library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use CSSVar darken for navbar

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-27 14:23:14 +02:00
parent 85cdc54826
commit c5d4770067
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
sass/components/navbar.sass
View File

@ -97,37 +97,51 @@ $navbar-colors: $colors !default
--navbar-item-active-background-color: #{$navbar-item-active-background-color}
background-color: var(--navbar-background-color)
color: var(--navbar-color)
min-height: var(--navbar-height)
position: relative
z-index: var(--navbar-z)
@each $name, $pair in $navbar-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
--navbar-background-color: var(--#{$name}, #{$color})
--navbar-color: var(--#{$name}-invert, #{$color-invert})
--navbar-item-color: var(--#{$name}-invert, #{$color-invert})
--navbar-dropdown-arrow: var(--#{$name}-invert, #{$color-invert})
--navbar-burger-color: var(--#{$name}-invert, #{$color-invert})
--navbar-item-hover-background-color: blue
--navbar-item-hover-color: var(--#{$name}-invert, #{$color-invert})
--navbar-item-active-background-delta: -5%
--navbar-item-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--navbar-item-active-background-delta)})
--navbar-item-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--navbar-item-active-background-#{$name}-l), var(--#{$name}-a))
// background-color: $color
// color: $color-invert
.navbar-brand
& > .navbar-item,
.navbar-link
color: $color-invert
// color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: bulmaDarken($color, 5%)
color: $color-invert
background-color: var(--navbar-item-active-background-color, #{bulmaDarken($color, 5%)})
// color: var(--#{$name}-invert, #{$color-invert})
.navbar-link
&::after
border-color: $color-invert
// border-color: $color-invert
.navbar-burger
color: $color-invert
// color: $color-invert
+from($navbar-breakpoint)
.navbar-start,
.navbar-end
& > .navbar-item,
.navbar-link
color: $color-invert
// color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
@ -137,7 +151,7 @@ $navbar-colors: $colors !default
color: $color-invert
.navbar-link
&::after
border-color: $color-invert
// border-color: $color-invert
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link

2
sass/helpers/color.sass
View File

@ -1,7 +1,7 @@
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
--has-text-hover-delta: 10%
--has-text-hover-delta: -10%
--has-text-hover-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--has-text-hover-delta)})
--has-text-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-hover-#{$name}-l), var(--#{$name}-a))
color: var(--#{$name}, #{$color}) !important