mo betta new navbar styles; hook up some changed vars

3 files changed, 54 insertions, 34 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index ea9e77cfb..e73506ac1 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2867,7 +2867,7 @@ button.close {
 
 .navbar {
   padding: 15px;
-  background-color: #eee;
+  background-color: #eeeeee;
 }
 
 .navbar:before,
@@ -2886,6 +2886,7 @@ button.close {
   font-size: 18px;
   font-weight: bold;
   line-height: 1;
+  color: #777777;
 }
 
 .navbar .brand:hover {
@@ -2919,18 +2920,24 @@ button.close {
 
 .navbar .nav > li > a {
   line-height: 20px;
+  color: #777777;
 }
 
-.navbar .nav > li > a:hover {
-  background-color: #ddd;
+.navbar .nav > li > a:hover,
+.navbar .nav > li > a:focus {
+  color: #333333;
+  background-color: transparent;
 }
 
-.navbar .nav > .active > a {
-  background-color: #ddd;
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+  color: #555555;
+  background-color: #e1e1e1;
 }
 
 .navbar-inverse {
-  background-color: #222;
+  background-color: #222222;
 }
 
 .navbar-inverse .brand {
@@ -2942,15 +2949,20 @@ button.close {
 }
 
 .navbar-inverse .nav > li > a {
-  color: #fff;
+  color: #999999;
 }
 
-.navbar-inverse .nav > li > a:hover {
-  background-color: #333;
+.navbar-inverse .nav > li > a:hover,
+.navbar-inverse .nav > li > a:focus {
+  color: #ffffff;
+  background-color: transparent;
 }
 
-.navbar-inverse .nav > .active > a {
-  background-color: #333;
+.navbar-inverse .nav > .active > a,
+.navbar-inverse .nav > .active > a:hover,
+.navbar-inverse .nav > .active > a:focus {
+  color: #ffffff;
+  background-color: #222222;
 }
 
 .navbar-inverse .btn-navbar {
diff --git a/less/navbar.less b/less/navbar.less
index 82abf0795..30d7050e8 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -5,7 +5,7 @@
 // Wrapper and base class
 .navbar {
   padding: 15px;
-  background-color: #eee;
+  background-color: @navbar-bg;
   .clear_float();
 }
 
@@ -16,6 +16,7 @@
   font-size: 18px;
   font-weight: bold;
   line-height: 1;
+  color: @navbar-brand-color;
   &:hover {
     text-decoration: none;
     background-color: #ddd;
@@ -49,19 +50,25 @@
     margin-top: 15px; // space out from .navbar .brand and .btn-navbar
   }
   .nav > li > a {
+    color: @navbar-link-color;
     line-height: 20px;
   }
-  .nav > li > a:hover {
-    background-color: #ddd;
+  .nav > li > a:hover,
+  .nav > li > a:focus {
+    color: @navbar-link-color-hover;
+    background-color: @navbar-link-bg-hover;
   }
-  .nav > .active > a {
-    background-color: #ddd;
+  .nav > .active > a,
+  .nav > .active > a:hover,
+  .nav > .active > a:focus {
+    color: @navbar-link-color-active;
+    background-color: @navbar-link-bg-active;
   }
 }
 
 // Inverse navbar
 .navbar-inverse {
-  background-color: #222;
+    background-color: @navbar-inverse-bg;
 
   .brand {
     color: #fff;
@@ -70,13 +77,18 @@
     }
   }
   .nav > li > a {
-    color: #fff;
+    color: @navbar-inverse-link-color;
   }
-  .nav > li > a:hover {
-    background-color: #333;
+  .nav > li > a:hover,
+  .nav > li > a:focus {
+    color: @navbar-inverse-link-color-hover;
+    background-color: @navbar-inverse-link-bg-hover;
   }
-  .nav > .active > a {
-    background-color: #333;
+  .nav > .active > a,
+  .nav > .active > a:hover,
+  .nav > .active > a:focus {
+    color: @navbar-inverse-link-color-active;
+    background-color: @navbar-inverse-link-bg-active;
   }
   .btn-navbar {
     background-color: #444;
diff --git a/less/variables.less b/less/variables.less
index db99e4075..e5327f336 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -154,34 +154,30 @@
 @navbar-collapse-width-desktop:    @navbar-collapse-width + 1;
 
 @navbar-height:                    44px;
-@navbar-background-highlight:      #ffffff;
-@navbar-background:                darken(@navbar-background-highlight, 5%);
-@navbar-border:                    darken(@navbar-background, 12%);
+@navbar-bg:                        #eee;
 
 @navbar-text:                      #777;
 @navbar-link-color:                #777;
 @navbar-link-color-hover:          @grayDark;
 @navbar-link-color-active:         @gray;
-@navbar-link-background-hover:     transparent;
-@navbar-link-background-active:    darken(@navbar-background, 5%);
+@navbar-link-bg-hover:             transparent;
+@navbar-link-bg-active:            darken(@navbar-bg, 5%);
 
 @navbar-brand-color:               @navbar-link-color;
 
 // Inverted navbar
-@navbar-inverse-background:                #222;
-@navbar-inverse-background-highlight:      #222222;
-@navbar-inverse-border:                    #111111;
+@navbar-inverse-bg:                         #222;
 
 @navbar-inverse-text:                      @grayLight;
 @navbar-inverse-link-color:                @grayLight;
 @navbar-inverse-link-color-hover:          #fff;
 @navbar-inverse-link-color-active:         @navbar-inverse-link-color-hover;
-@navbar-inverse-link-background-hover:     transparent;
-@navbar-inverse-link-background-active:    @navbar-inverse-background;
+@navbar-inverse-link-bg-hover:             transparent;
+@navbar-inverse-link-bg-active:            @navbar-inverse-bg;
 
-@navbar-inverse-search-background:         lighten(@navbar-inverse-background, 25%);
+@navbar-inverse-search-background:         lighten(@navbar-inverse-bg, 25%);
 @navbar-inverse-search-background-focus:   #fff;
-@navbar-inverse-search-border:             @navbar-inverse-background;
+@navbar-inverse-search-border:             @navbar-inverse-bg;
 @navbar-inverse-search-placeholder-color:  #ccc;
 
 @navbar-inverse-brand-color:               @navbar-inverse-link-color;