library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fallback to rgb shadow color

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-15 13:25:39 +01:00
parent eef8f5577f
commit 2fc648fb94
5 changed files with 80 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
sass/components/card.sass
View File

@ -1,13 +1,16 @@
$card-color: $text !default
$card-background-color: $scheme-main !default
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$card-color: var(--text, #{$text}) !default
$card-background-color: var(--scheme-main, #{$scheme-main}) !default
$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
$card-radius: 0 !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-color: var(--text-strong, #{$text-strong}) !default
$card-header-padding: 0.75rem 1rem !default
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
$card-header-weight: $weight-bold !default
$card-header-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$card-header-shadow: 0 0.125em 0.25em $card-header-shadow-color !default
$card-header-weight: var(--weight-bold, #{$weight-bold}) !default
$card-content-background-color: transparent !default
$card-content-padding: 1.5rem !default
@ -16,30 +19,46 @@ $card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border-light !default
$card-footer-padding: 0.75rem !default
$card-media-margin: $block-spacing !default
$card-media-margin: var(--block-spacing, #{$block-spacing}) !default
.card
background-color: $card-background-color
box-shadow: $card-shadow
color: $card-color
--card-background-color: #{$card-background-color}
--card-shadow: #{$card-shadow}
--card-color: #{$card-color}
--card-radius: #{$card-radius}
--card-header-background-color: #{$card-header-background-color}
--card-header-shadow: #{$card-header-shadow}
--card-header-color: #{$card-header-color}
--card-header-weight: #{$card-header-weight}
--card-header-padding: #{$card-header-padding}
--card-header-padding: #{$card-header-padding}
--card-content-background-color: #{$card-content-background-color}
--card-content-padding: #{$card-content-padding}
--card-footer-background-color: #{$card-footer-background-color}
--card-footer-border-top: #{$card-footer-border-top}
--card-footer-padding: #{$card-footer-padding}
--card-media-margin: #{$card-media-margin}
background-color: var(--card-background-color)
box-shadow: var(--card-shadow)
color: var(--card-color)
max-width: 100%
position: relative
border-radius: $card-radius
border-radius: var(--card-radius)
overflow: hidden
.card-header
background-color: $card-header-background-color
background-color: var(--card-header-background-color)
align-items: stretch
box-shadow: $card-header-shadow
box-shadow: var(--card-header-shadow)
display: flex
.card-header-title
align-items: center
color: $card-header-color
color: var(--card-header-color)
display: flex
flex-grow: 1
font-weight: $card-header-weight
padding: $card-header-padding
font-weight: var(--card-header-weight)
padding: var(--card-header-padding)
&.is-centered
justify-content: center
@ -48,19 +67,19 @@ $card-media-margin: $block-spacing !default
cursor: pointer
display: flex
justify-content: center
padding: $card-header-padding
padding: var(--card-header-padding)
.card-image
display: block
position: relative
.card-content
background-color: $card-content-background-color
padding: $card-content-padding
background-color: var(--card-content-background-color)
padding: var(--card-content-padding)
.card-footer
background-color: $card-footer-background-color
border-top: $card-footer-border-top
background-color: var(--card-footer-background-color)
border-top: var(--card-footer-border-top)
align-items: stretch
display: flex
@ -71,7 +90,7 @@ $card-media-margin: $block-spacing !default
flex-grow: 1
flex-shrink: 0
justify-content: center
padding: $card-footer-padding
padding: var(--card-footer-padding)
&:not(:last-child)
+ltr-property("border", $card-footer-border-top)
@ -79,4 +98,4 @@ $card-media-margin: $block-spacing !default
.card
.media:not(:last-child)
margin-bottom: $card-media-margin
margin-bottom: var(--card-media-margin)

12
sass/components/navbar.sass
View File

@ -32,7 +32,7 @@ $navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba(#{$scheme-invert-rgb}, 0.1,), 0 0 0 1px bulmaRgba(#{$scheme-invert-rgb}, 0.1,) !default
$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
@ -244,7 +244,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
box-shadow: 0 8px 16px rgba(var(--scheme-invert-rgb), 0.1)
padding: 0.5rem 0
&.is-active
display: block
@ -256,7 +256,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
box-shadow: 0 -2px 3px rgba(var(--scheme-invert-rgb), 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@ -329,7 +329,7 @@ a.navbar-item,
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
box-shadow: 0 -8px 8px rgba(var(--scheme-invert-rgb), 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
@ -356,7 +356,7 @@ a.navbar-item,
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
box-shadow: 0 8px 8px rgba(var(--scheme-invert-rgb), 0.1)
display: none
font-size: 0.875rem
+ltr-position(0, false)
@ -407,7 +407,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
box-shadow: 0 -2px 3px rgba(var(--scheme-invert-rgb), 0.1)
&.is-fixed-top-desktop
top: 0
html,

7
sass/themes/default.sass
View File

@ -1,7 +1,7 @@
\:root
// Initial variables
--black: #{$black}
--black-70: rgba(#000, 0.7)
--black-70: rgba(0, 0, 0, 0.7)
--black-bis: #{$black-bis}
--black-ter: #{$black-ter}
--grey-darker: #{$grey-darker}
@ -75,11 +75,16 @@
--danger-light: #{$danger-light}
--danger-dark: #{$danger-dark}
--light-invert: #{$light-invert}
--light-light: #{$light-light}
--light-dark: #{$light-dark}
--dark-invert: #{$dark-invert}
--dark-light: #{$dark-light}
--dark-dark: #{$dark-dark}
--scheme-main: #{$scheme-main}
--scheme-main-bis: #{$scheme-main-bis}
--scheme-main-ter: #{$scheme-main-ter}
--scheme-invert: #{$scheme-invert}
--scheme-invert-rgb: #{$scheme-invert-rgb}
--scheme-invert-bis: #{$scheme-invert-bis}
--scheme-invert-ter: #{$scheme-invert-ter}
--background: #{$background}

36
sass/utilities/derived-variables.scss
View File

@ -22,20 +22,24 @@ $red-invert : findColorInvert($red) !default;
$primary-invert : findColorInvert($primary, $turquoise) !default;
$primary-light : findLightColor($primary, $turquoise) !default;
$primary-dark : findDarkColor($primary, $turquoise) !default;
$info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default;
$info-invert : findColorInvert($info, $cyan) !default;
$info-light : findLightColor($info, $cyan) !default;
$info-dark : findDarkColor($info, $cyan) !default;
$success-invert : findColorInvert($success, $green) !default;
$success-light : findLightColor($success, $green) !default;
$success-dark : findDarkColor($success, $green) !default;
$warning-invert : findColorInvert($warning) !default;
$warning-light : findLightColor($warning) !default;
$warning-dark : findDarkColor($warning) !default;
$danger-invert : findColorInvert($danger) !default;
$danger-light : findLightColor($danger) !default;
$danger-dark : findDarkColor($danger) !default;
$light-invert : findColorInvert($light) !default;
$dark-invert : findColorInvert($dark) !default;
$warning-invert : findColorInvert($warning, $yellow) !default;
$warning-light : findLightColor($warning, $yellow) !default;
$warning-dark : findDarkColor($warning, $yellow) !default;
$danger-invert : findColorInvert($danger, $red) !default;
$danger-light : findLightColor($danger, $red) !default;
$danger-dark : findDarkColor($danger, $red) !default;
$light-invert : findColorInvert($light, $white-ter) !default;
$light-light : findLightColor($light, $white-ter) !default;
$light-dark : findDarkColor($light, $white-ter) !default;
$dark-invert : findColorInvert($dark, $grey-darker) !default;
$dark-light : findLightColor($dark, $grey-darker) !default;
$dark-dark : findDarkColor($dark, $grey-darker) !default;
// General colors
@ -43,6 +47,7 @@ $scheme-main : var(--white, #{$white}) !default;
$scheme-main-bis : var(--white-bis, #{$white-bis}) !default;
$scheme-main-ter : var(--white-ter, #{$white-ter}) !default;
$scheme-invert : var(--black, #{$black}) !default;
$scheme-invert-rgb : bulmaToRGB($black) !default;
$scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
$scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
@ -56,7 +61,7 @@ $border-light-hover: var(--grey-light, #{$grey-light}) !default;
// Text colors
$text : var(--grey-dark, #{$grey-dark}) !default;
$text-invert: findColorInvert($text) !default;
$text-invert: findColorInvert($text, $grey-dark) !default;
$text-light : var(--grey, #{$grey}) !default;
$text-strong: var(--grey-darker, #{$grey-darker}) !default;
@ -71,9 +76,10 @@ $pre-background : var(--background, #{$background}) !default;
// Link colors
$link : var(--blue, #{$blue}) !default;
$link-invert : findColorInvert($link) !default;
$link-light : findLightColor($link) !default;
$link-dark : findDarkColor($link) !default;
$link-rgb : bulmaToRGB($blue) !default;
$link-invert : findColorInvert($link, $blue) !default;
$link-light : findLightColor($link, $blue) !default;
$link-dark : findDarkColor($link, $blue) !default;
$link-visited : var(--purple, #{$purple}) !default;
$link-hover : var(--grey-darker, #{$grey-darker}) !default;

6
sass/utilities/functions.sass
View File

@ -84,7 +84,7 @@
@return #fff
@else if type-of($fallback) == 'color'
@if (colorLuminance($fallback) > 0.55)
@return var(--black-70, rgba(#000, 0.7))
@return var(--black-70, rgba(0, 0, 0, 0.7))
@else
@return var(--white, #fff)
@return $color
@ -117,6 +117,7 @@
@return $color
@function bulmaRgba($color, $alpha)
@debug $color
@if type-of($color) != 'color'
@return $color
@return rgba($color, $alpha)
@ -130,3 +131,6 @@
@if type-of($color) != 'color'
@return $color
@return lighten($color, $amount)
@function bulmaToRGB($color)
@return red($color), green($color), blue($color)