Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 20:54:30 -07:00
Code Issues 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
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} --navbar-item-active-background-color: #{$navbar-item-active-background-color}
background-color: var(--navbar-background-color) background-color: var(--navbar-background-color)
color: var(--navbar-color)
min-height: var(--navbar-height) min-height: var(--navbar-height)
position: relative position: relative
z-index: var(--navbar-z) z-index: var(--navbar-z)
@each $name, $pair in $navbar-colors @each $name, $pair in $navbar-colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
background-color: $color --navbar-background-color: var(--#{$name}, #{$color})
color: $color-invert --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-brand
& > .navbar-item, & > .navbar-item,
.navbar-link .navbar-link
color: $color-invert // color: $color-invert
& > a.navbar-item, & > a.navbar-item,
.navbar-link .navbar-link
&:focus, &:focus,
&:hover, &:hover,
&.is-active &.is-active
background-color: bulmaDarken($color, 5%) background-color: var(--navbar-item-active-background-color, #{bulmaDarken($color, 5%)})
color: $color-invert // color: var(--#{$name}-invert, #{$color-invert})
.navbar-link .navbar-link
&::after &::after
border-color: $color-invert // border-color: $color-invert
.navbar-burger .navbar-burger
color: $color-invert // color: $color-invert
+from($navbar-breakpoint) +from($navbar-breakpoint)
.navbar-start, .navbar-start,
.navbar-end .navbar-end
& > .navbar-item, & > .navbar-item,
.navbar-link .navbar-link
color: $color-invert // color: $color-invert
& > a.navbar-item, & > a.navbar-item,
.navbar-link .navbar-link
&:focus, &:focus,
@@ -137,7 +151,7 @@ $navbar-colors: $colors !default
color: $color-invert color: $color-invert
.navbar-link .navbar-link
&::after &::after
border-color: $color-invert // border-color: $color-invert
.navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .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 @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
.has-text-#{$name} .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-#{$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)) --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 color: var(--#{$name}, #{$color}) !important