Add navbar color modifiers (#849)

* Add navbar color modifiers

* Use border-color instead of +arrow for navbar dropdowns

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index d9693a5ad5c1507937c0a414e93c7fa4159e1497..f7ca87a3dee007689c048e92b2ecc4f724292868 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -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