Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 20:04:30 -07:00
Code Issues 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 4a6728aea2
commit 8eb16e12d2
5 changed files with 80 additions and 46 deletions
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,