Add navbar color modifiers (#849)

* Add navbar color modifiers

* Use border-color instead of +arrow for navbar dropdowns
This commit is contained in:
mattrick 2017-09-09 03:17:19 -07:00 committed by Jeremy Thomas
parent 6d531b9f4e
commit 1a5dc72c1b

View File

@ -37,6 +37,32 @@ $navbar-divider-background-color: $border !default
background-color: $navbar-background-color
min-height: $navbar-height
position: relative
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
.navbar-item,
.navbar-link
color: $color-invert
a.navbar-item,
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 2.5%)
color: $color-invert
+desktop
.navbar-link
&::after
border-color: $color-invert
.navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar-dropdown .navbar-item:not(a)
color: $navbar-item
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 2.5%)
color: $color-invert
& > .container
align-items: stretch
display: flex