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

Fix box and navbar shadows

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-15 16:47:59 +01:00
parent 8eb16e12d2
commit 8d613846d3
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
sass/components/navbar.sass
View File

@ -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,

12
sass/elements/box.sass
View File

@ -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}