mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Fix box and navbar shadows
This commit is contained in:
parent
2fc648fb94
commit
f11812ab86
@ -6,6 +6,7 @@ $navbar-padding-vertical: 1rem !default
|
|||||||
$navbar-padding-horizontal: 2rem !default
|
$navbar-padding-horizontal: 2rem !default
|
||||||
$navbar-z: 30 !default
|
$navbar-z: 30 !default
|
||||||
$navbar-fixed-z: 30 !default
|
$navbar-fixed-z: 30 !default
|
||||||
|
$navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||||
|
|
||||||
$navbar-item-color: $text !default
|
$navbar-item-color: $text !default
|
||||||
$navbar-item-hover-color: $link !default
|
$navbar-item-hover-color: $link !default
|
||||||
@ -32,7 +33,9 @@ $navbar-dropdown-radius: $radius-large !default
|
|||||||
$navbar-dropdown-z: 20 !default
|
$navbar-dropdown-z: 20 !default
|
||||||
|
|
||||||
$navbar-dropdown-boxed-radius: $radius-large !default
|
$navbar-dropdown-boxed-radius: $radius-large !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-boxed-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||||
|
$navbar-dropdown-boxed-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||||
|
$navbar-dropdown-boxed-shadow: 0 8px 8px $navbar-dropdown-boxed-shadow-color, 0 0 0 1px $navbar-dropdown-boxed-shadow-color-bis !default
|
||||||
|
|
||||||
$navbar-dropdown-item-hover-color: $scheme-invert !default
|
$navbar-dropdown-item-hover-color: $scheme-invert !default
|
||||||
$navbar-dropdown-item-hover-background-color: $background !default
|
$navbar-dropdown-item-hover-background-color: $background !default
|
||||||
@ -244,7 +247,7 @@ a.navbar-item,
|
|||||||
display: none
|
display: none
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
background-color: $navbar-background-color
|
background-color: $navbar-background-color
|
||||||
box-shadow: 0 8px 16px rgba(var(--scheme-invert-rgb), 0.1)
|
box-shadow: 0 8px 16px $navbar-shadow-color
|
||||||
padding: 0.5rem 0
|
padding: 0.5rem 0
|
||||||
&.is-active
|
&.is-active
|
||||||
display: block
|
display: block
|
||||||
@ -256,7 +259,7 @@ a.navbar-item,
|
|||||||
&.is-fixed-bottom-touch
|
&.is-fixed-bottom-touch
|
||||||
bottom: 0
|
bottom: 0
|
||||||
&.has-shadow
|
&.has-shadow
|
||||||
box-shadow: 0 -2px 3px rgba(var(--scheme-invert-rgb), 0.1)
|
box-shadow: 0 -2px 3px $navbar-shadow-color
|
||||||
&.is-fixed-top-touch
|
&.is-fixed-top-touch
|
||||||
top: 0
|
top: 0
|
||||||
&.is-fixed-top,
|
&.is-fixed-top,
|
||||||
@ -329,7 +332,7 @@ a.navbar-item,
|
|||||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
||||||
border-top: none
|
border-top: none
|
||||||
bottom: 100%
|
bottom: 100%
|
||||||
box-shadow: 0 -8px 8px rgba(var(--scheme-invert-rgb), 0.1)
|
box-shadow: 0 -8px 8px $navbar-shadow-color
|
||||||
top: auto
|
top: auto
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&.is-hoverable:focus,
|
&.is-hoverable:focus,
|
||||||
@ -356,7 +359,7 @@ a.navbar-item,
|
|||||||
border-bottom-left-radius: $navbar-dropdown-radius
|
border-bottom-left-radius: $navbar-dropdown-radius
|
||||||
border-bottom-right-radius: $navbar-dropdown-radius
|
border-bottom-right-radius: $navbar-dropdown-radius
|
||||||
border-top: $navbar-dropdown-border-top
|
border-top: $navbar-dropdown-border-top
|
||||||
box-shadow: 0 8px 8px rgba(var(--scheme-invert-rgb), 0.1)
|
box-shadow: 0 8px 8px $navbar-shadow-color
|
||||||
display: none
|
display: none
|
||||||
font-size: 0.875rem
|
font-size: 0.875rem
|
||||||
+ltr-position(0, false)
|
+ltr-position(0, false)
|
||||||
@ -407,7 +410,7 @@ a.navbar-item,
|
|||||||
&.is-fixed-bottom-desktop
|
&.is-fixed-bottom-desktop
|
||||||
bottom: 0
|
bottom: 0
|
||||||
&.has-shadow
|
&.has-shadow
|
||||||
box-shadow: 0 -2px 3px rgba(var(--scheme-invert-rgb), 0.1)
|
box-shadow: 0 -2px 3px $navbar-shadow-color
|
||||||
&.is-fixed-top-desktop
|
&.is-fixed-top-desktop
|
||||||
top: 0
|
top: 0
|
||||||
html,
|
html,
|
||||||
|
@ -1,11 +1,17 @@
|
|||||||
$box-color: var(--text, #{$text}) !default
|
$box-color: var(--text, #{$text}) !default
|
||||||
$box-background-color: var(--scheme-main, #{$scheme-main}) !default
|
$box-background-color: var(--scheme-main, #{$scheme-main}) !default
|
||||||
$box-radius: var(--radius-large, #{$radius-large}) !default
|
$box-radius: var(--radius-large, #{$radius-large}) !default
|
||||||
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
$box-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||||
|
$box-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
|
||||||
|
$box-shadow: 0 0.5em 1em -0.125em $box-shadow-color, 0 0px 0 1px $box-shadow-color-bis !default
|
||||||
$box-padding: 1.25rem !default
|
$box-padding: 1.25rem !default
|
||||||
|
|
||||||
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
|
$box-link-hover-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||||
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
|
$box-link-hover-shadow-color-bis: var(--link, #{$link}) !default
|
||||||
|
$box-link-hover-shadow: 0 0.5em 1em -0.125em $box-link-hover-shadow-color, 0 0 0 1px $box-link-hover-shadow-color-bis !default
|
||||||
|
$box-link-active-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2) !default
|
||||||
|
$box-link-active-shadow-color-bis: var(--link, #{$link}) !default
|
||||||
|
$box-link-active-shadow: inset 0 1px 2px $box-link-active-shadow-color, 0 0 0 1px $box-link-active-shadow-color-bis !default
|
||||||
|
|
||||||
.box
|
.box
|
||||||
--box-background-color: #{$box-background-color}
|
--box-background-color: #{$box-background-color}
|
||||||
|
Loading…
Reference in New Issue
Block a user