rewrite navbar once more for lower key styles and a new take on modifiers for improved customization

2 files changed, 47 insertions, 118 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index b1cdb0ea5..b845ff32d 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -5,6 +5,7 @@
 
 .navbar {
   position: relative;
+  padding: $navbar-padding-vertical $navbar-padding-horizontal;
   @include clearfix;
 
   @include media-breakpoint-up(sm) {
@@ -69,13 +70,12 @@
 
 .navbar-brand {
   float: left;
-  padding: .95rem 1rem;
+  margin-right: 1rem;
+  padding-top:    .25rem;
+  padding-bottom: .25rem;
   font-size: $font-size-lg;
-  line-height: 1;
-  color: $navbar-default-brand-color;
 
   @include hover-focus {
-    color: $navbar-default-brand-hover-color;
     text-decoration: none;
   }
 
@@ -92,11 +92,8 @@
 
 .navbar-toggler {
   padding: .5rem .75rem;
-  margin-top: .375rem;
-  margin-bottom: .375rem;
   font-size: $font-size-lg;
   line-height: 1;
-  color: $navbar-default-link-color;
   background: none;
   border: $border-width solid transparent;
   @include border-radius($btn-border-radius);
@@ -132,83 +129,56 @@
 
   .nav-link {
     display: block;
-    padding: .95rem .75rem;
-    line-height: 1.25; // Match the `.navbar-brand`
-    color: $navbar-default-link-color;
-
-    @include hover-focus {
-      color: $navbar-default-link-hover-color;
-      background-color: $navbar-default-link-hover-bg;
-    }
-  }
-
-  .open > .nav-link,
-  .active > .nav-link,
-  .nav-link.open,
-  .nav-link.active {
-    @include plain-hover-focus {
-      color: $navbar-default-link-active-color;
-      cursor: default;
-      background-color: $navbar-default-link-active-bg;
-    }
+    padding: .425rem .5rem;
   }
 }
 
-
-// Forms
-//
-// Additional modifier class to add to `.form-inline` to vertically center forms.
-
-.navbar-form {
-  margin-top: .375rem;
-  margin-bottom: .375rem;
-  margin-right: 1rem;
-}
-
-
-//
-// Alternate navbars
-//
-
-// todo: audit these styles
-
-// Default navbar
-.navbar-default {
-  background-color: $navbar-default-bg;
-  border-color: $navbar-default-border;
-
+// Dark links against a light background
+.navbar-light {
   .navbar-brand {
-    color: $navbar-default-brand-color;
+    color: $navbar-light-active-color;
 
     @include hover-focus {
-      color: $navbar-default-brand-hover-color;
-      background-color: $navbar-default-brand-hover-bg;
+      color: $navbar-light-active-color;
     }
   }
-}
 
-// Inverse navbar
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-light-color;
 
-.navbar-inverse {
-  background-color: $navbar-inverse-bg;
-  border-color: $navbar-inverse-border;
+      @include hover-focus {
+        color: $navbar-light-hover-color;
+      }
+    }
 
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
+      @include plain-hover-focus {
+        color: $navbar-light-active-color;
+      }
+    }
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
   .navbar-brand {
-    color: $navbar-inverse-brand-color;
+    color: $navbar-dark-active-color;
 
     @include hover-focus {
-      color: $navbar-inverse-brand-hover-color;
-      background-color: $navbar-inverse-brand-hover-bg;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-inverse-link-color;
+      color: $navbar-dark-color;
 
       @include hover-focus {
-        color: $navbar-inverse-link-hover-color;
-        background-color: $navbar-inverse-link-hover-bg;
+        color: $navbar-dark-hover-color;
       }
     }
 
@@ -217,13 +187,8 @@
     .nav-link.open,
     .nav-link.active {
       @include plain-hover-focus {
-        color: $navbar-inverse-link-active-color;
-        background-color: $navbar-inverse-link-active-bg;
+        color: $navbar-dark-active-color;
       }
     }
   }
-
-  .navbar-toggler {
-    color: $navbar-inverse-link-color;
-  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7c8b33721..b655a3f08 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -336,56 +336,20 @@ $zindex-modal:             1050 !default;
 
 
 // Navbar
-//
-//
 
-// Basics of a navbar
-$navbar-margin-bottom:             $spacer-y !default;
-$navbar-border-radius:             $border-radius !default;
-$navbar-padding-horizontal:        $spacer !default;
-$navbar-padding-vertical:          ($spacer / 2) !default;
-
-$navbar-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
-
-$navbar-default-link-color:                #777 !default;
-$navbar-default-link-hover-color:          #555 !default;
-$navbar-default-link-hover-bg:             transparent !default;
-$navbar-default-link-active-color:         #333 !default;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 5%) !default;
-$navbar-default-link-disabled-color:       #ccc !default;
-$navbar-default-link-disabled-bg:          transparent !default;
-
-$navbar-default-brand-color:               $navbar-default-link-color !default;
-$navbar-default-brand-hover-color:         $navbar-default-link-hover-color !default;
-$navbar-default-brand-hover-bg:            transparent !default;
-
-$navbar-default-toggle-hover-bg:           #ddd !default;
-$navbar-default-toggle-icon-bar-bg:        #888 !default;
-$navbar-default-toggle-border-color:       #ddd !default;
-
-
-// Inverted navbar
-$navbar-inverse-color:                      lighten($gray-light, 12%) !default;
-$navbar-inverse-bg:                         #373a3c !default;
-$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
-
-$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
-$navbar-inverse-link-hover-color:           #fff !default;
-$navbar-inverse-link-hover-bg:              transparent !default;
-$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
-$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
-$navbar-inverse-link-disabled-color:        #444 !default;
-$navbar-inverse-link-disabled-bg:           transparent !default;
-
-$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
-$navbar-inverse-brand-hover-color:          #fff !default;
-$navbar-inverse-brand-hover-bg:             transparent !default;
-
-$navbar-inverse-toggle-hover-bg:            #333 !default;
-$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
-$navbar-inverse-toggle-border-color:        #333 !default;
+$navbar-border-radius:              $border-radius !default;
+$navbar-padding-horizontal:         $spacer !default;
+$navbar-padding-vertical:           ($spacer / 2) !default;
+
+$navbar-dark-color:                 rgba(255,255,255,.5);
+$navbar-dark-hover-color:           rgba(255,255,255,.75);
+$navbar-dark-active-color:          rgba(255,255,255,1);
+$navbar-dark-disabled-color:        rgba(255,255,255,.25);
+
+$navbar-light-color:                rgba(0,0,0,.3);
+$navbar-light-hover-color:          rgba(0,0,0,.6);
+$navbar-light-active-color:         rgba(0,0,0,.8);
+$navbar-light-disabled-color:       rgba(0,0,0,.15);
 
 
 // Navs