navbar vars

diff --git a/docs/customize.html b/docs/customize.html
index 4955471a1c0473a9f03c03471fca525b60aa56c2..aa02cfa2a37110c4f2a60beb9da1f27ace0afbcb 100644 (file)
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -328,7 +328,7 @@
                 <input type="text" class="span3" placeholder="#ddd">
 
                 <h3>Forms</h3>
-                <label>@placeholderText</label>
+                <label>@input-color-placeholder</label>
                 <input type="text" class="span3" placeholder="@grayLight">
                 <label>@input-background</label>
                 <input type="text" class="span3" placeholder="#fff">
@@ -367,28 +367,28 @@
                 <input type="text" class="span3" placeholder="#d9edf7">
 
                 <h3>Navbar</h3>
-                <label>@navbarHeight</label>
+                <label>@navbar-height</label>
                 <input type="text" class="span3" placeholder="40px">
-                <label>@navbarBackground</label>
+                <label>@navbar-background</label>
                 <input type="text" class="span3" placeholder="@grayDarker">
-                <label>@navbarBackgroundHighlight</label>
+                <label>@navbar-background-highlight</label>
                 <input type="text" class="span3" placeholder="@grayDark">
-                <label>@navbarText</label>
+                <label>@navbar-text</label>
                 <input type="text" class="span3" placeholder="@grayLight">
-                <label>@navbarBrandColor</label>
-                <input type="text" class="span3" placeholder="@navbarLinkColor">
-                <label>@navbarLinkColor</label>
+                <label>@navbar-brand-color</label>
+                <input type="text" class="span3" placeholder="@navbar-link-color">
+                <label>@navbar-link-color</label>
                 <input type="text" class="span3" placeholder="@grayLight">
-                <label>@navbarLinkColorHover</label>
+                <label>@navbar-link-color-hover</label>
                 <input type="text" class="span3" placeholder="#fff">
-                <label>@navbarLinkColorActive</label>
-                <input type="text" class="span3" placeholder="@navbarLinkColorHover">
-                <label>@navbarLinkBackgroundHover</label>
+                <label>@navbar-link-color-active</label>
+                <input type="text" class="span3" placeholder="@navbar-link-color-hover">
+                <label>@navbar-link-background-hover</label>
                 <input type="text" class="span3" placeholder="transparent">
-                <label>@navbarLinkBackgroundActive</label>
-                <input type="text" class="span3" placeholder="@navbarBackground">
+                <label>@navbar-link-background-active</label>
+                <input type="text" class="span3" placeholder="@navbar-background">
                 <label>@navbarSearchBackground</label>
-                <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
+                <input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)">
                 <label>@navbarSearchBackgroundFocus</label>
                 <input type="text" class="span3" placeholder="#fff">
                 <label>@navbarSearchBorder</label>
@@ -396,10 +396,10 @@
                 <label>@navbarSearchPlaceholderColor</label>
                 <input type="text" class="span3" placeholder="#ccc">
 
-                <label>@navbarCollapseWidth</label>
+                <label>@navbar-collapse-width</label>
                 <input type="text" class="span3" placeholder="979px">
-                <label>@navbarCollapseDesktopWidth</label>
-                <input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
+                <label>@navbar-collapse-width-desktop</label>
+                <input type="text" class="span3" placeholder="@navbar-collapse-width + 1">
 
                 <h3>Dropdowns</h3>
                 <label>@dropdown-background</label>

diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index c3c318d42ac23655c55e7bdf12de2d6d84d3eb1e..768de2391b6e05d75e1388b37b29bb3946dafe80 100644 (file)
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -299,28 +299,28 @@
                 <input type="text" class="span3" placeholder="#d9edf7">
 
                 <h3>{{_i}}Navbar{{/i}}</h3>
-                <label>@navbarHeight</label>
+                <label>@navbar-height</label>
                 <input type="text" class="span3" placeholder="40px">
-                <label>@navbarBackground</label>
+                <label>@navbar-background</label>
                 <input type="text" class="span3" placeholder="@grayDarker">
-                <label>@navbarBackgroundHighlight</label>
+                <label>@navbar-background-highlight</label>
                 <input type="text" class="span3" placeholder="@grayDark">
-                <label>@navbarText</label>
+                <label>@navbar-text</label>
                 <input type="text" class="span3" placeholder="@grayLight">
-                <label>@navbarBrandColor</label>
-                <input type="text" class="span3" placeholder="@navbarLinkColor">
-                <label>@navbarLinkColor</label>
+                <label>@navbar-brand-color</label>
+                <input type="text" class="span3" placeholder="@navbar-link-color">
+                <label>@navbar-link-color</label>
                 <input type="text" class="span3" placeholder="@grayLight">
-                <label>@navbarLinkColorHover</label>
+                <label>@navbar-link-color-hover</label>
                 <input type="text" class="span3" placeholder="#fff">
-                <label>@navbarLinkColorActive</label>
-                <input type="text" class="span3" placeholder="@navbarLinkColorHover">
-                <label>@navbarLinkBackgroundHover</label>
+                <label>@navbar-link-color-active</label>
+                <input type="text" class="span3" placeholder="@navbar-link-color-hover">
+                <label>@navbar-link-background-hover</label>
                 <input type="text" class="span3" placeholder="transparent">
-                <label>@navbarLinkBackgroundActive</label>
-                <input type="text" class="span3" placeholder="@navbarBackground">
+                <label>@navbar-link-background-active</label>
+                <input type="text" class="span3" placeholder="@navbar-background">
                 <label>@navbarSearchBackground</label>
-                <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
+                <input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)">
                 <label>@navbarSearchBackgroundFocus</label>
                 <input type="text" class="span3" placeholder="#fff">
                 <label>@navbarSearchBorder</label>
@@ -328,10 +328,10 @@
                 <label>@navbarSearchPlaceholderColor</label>
                 <input type="text" class="span3" placeholder="#ccc">
 
-                <label>@navbarCollapseWidth</label>
+                <label>@navbar-collapse-width</label>
                 <input type="text" class="span3" placeholder="979px">
-                <label>@navbarCollapseDesktopWidth</label>
-                <input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
+                <label>@navbar-collapse-width-desktop</label>
+                <input type="text" class="span3" placeholder="@navbar-collapse-width + 1">
 
                 <h3>{{_i}}Dropdowns{{/i}}</h3>
                 <label>@dropdown-background</label>

diff --git a/less/mixins.less b/less/mixins.less
index 452c7278224ec298f6e6d7de33c06d4afb2d7e68..d4ba71cfe43593882b41e3e0eaf7c11c1836887b 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -456,7 +456,7 @@
 // Vertically center elements in the navbar.
 // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
 .navbarVerticalAlign(@elementHeight) {
-  margin-top: (@navbarHeight - @elementHeight) / 2;
+  margin-top: (@navbar-height - @elementHeight) / 2;
 }
 
 

diff --git a/less/navbar.less b/less/navbar.less
index 01932049bc8768be0c457c0828c94dfbcdfdea82..a167746ee30ca6a167f5f8c99fa96b2e873c4e5b 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -11,8 +11,8 @@
   overflow: visible;
   padding: 0 20px;
   margin-bottom: @line-height-base;
-  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
-  border: 1px solid @navbarBorder;
+  #gradient > .vertical(@navbar-background-highlight, @navbar-background);
+  border: 1px solid @navbar-border;
   border-radius: @border-radius-base;
   .box-shadow(0 1px 4px rgba(0,0,0,.065));
 
@@ -38,13 +38,13 @@
 .navbar .brand {
   float: left;
   display: block;
-  // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @line-height-base) / 2) 20px ((@navbarHeight - @line-height-base) / 2);
+  // Vertically center the text given @navbar-height
+  padding: ((@navbar-height - @line-height-base) / 2) 20px ((@navbar-height - @line-height-base) / 2);
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
-  color: @navbarBrandColor;
-  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+  color: @navbar-brand-color;
+  text-shadow: 0 1px 0 @navbar-background-highlight;
   &:hover {
     text-decoration: none;
   }
@@ -54,26 +54,26 @@
 // -------------------------
 .navbar-text {
   margin-bottom: 0;
-  line-height: @navbarHeight;
-  color: @navbarText;
+  line-height: @navbar-height;
+  color: @navbar-text;
 }
 
 // Janky solution for now to account for links outside the .nav
 // -------------------------
 .navbar-link {
-  color: @navbarLinkColor;
+  color: @navbar-link-color;
   &:hover {
-    color: @navbarLinkColorHover;
+    color: @navbar-link-color-hover;
   }
 }
 
 // Dividers in navbar
 // -------------------------
 .navbar .divider-vertical {
-  height: @navbarHeight;
+  height: @navbar-height;
   margin: 0 9px;
-  border-left: 1px solid @navbarBackground;
-  border-right: 1px solid @navbarBackgroundHighlight;
+  border-left: 1px solid @navbar-background;
+  border-right: 1px solid @navbar-background-highlight;
 }
 
 // Buttons in navbar
@@ -214,11 +214,11 @@
 // Links
 .navbar .nav > li > a {
   float: none;
-  // Vertically center the text given @navbarHeight
-  padding: ((@navbarHeight - @line-height-base) / 2) 15px ((@navbarHeight - @line-height-base) / 2);
-  color: @navbarLinkColor;
+  // Vertically center the text given @navbar-height
+  padding: ((@navbar-height - @line-height-base) / 2) 15px ((@navbar-height - @line-height-base) / 2);
+  color: @navbar-link-color;
   text-decoration: none;
-  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+  text-shadow: 0 1px 0 @navbar-background-highlight;
 }
 .navbar .nav .dropdown-toggle .caret {
   margin-top: 8px;
@@ -228,8 +228,8 @@
 // Hover
 .navbar .nav > li > a:focus,
 .navbar .nav > li > a:hover {
-  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
-  color: @navbarLinkColorHover;
+  background-color: @navbar-link-background-hover; // "transparent" is default to differentiate :hover from .active
+  color: @navbar-link-color-hover;
   text-decoration: none;
 }
 
@@ -237,9 +237,9 @@
 .navbar .nav > .active > a,
 .navbar .nav > .active > a:hover,
 .navbar .nav > .active > a:focus {
-  color: @navbarLinkColorActive;
+  color: @navbar-link-color-active;
   text-decoration: none;
-  background-color: @navbarLinkBackgroundActive;
+  background-color: @navbar-link-background-active;
   .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
 }
 
@@ -251,7 +251,7 @@
   padding: 7px 10px;
   margin-left: 5px;
   margin-right: 5px;
-  .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
+  .buttonBackground(darken(@navbar-background-highlight, 5%), darken(@navbar-background, 5%));
   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
 }
 .navbar .btn-navbar .icon-bar {
@@ -314,26 +314,26 @@
 
 // Caret should match text color on hover
 .navbar .nav li.dropdown > a:hover .caret {
-  border-top-color: @navbarLinkColorActive;
-  border-bottom-color: @navbarLinkColorActive;
+  border-top-color: @navbar-link-color-active;
+  border-bottom-color: @navbar-link-color-active;
 }
 
 // Remove background color from open dropdown
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
-  background-color: @navbarLinkBackgroundActive;
-  color: @navbarLinkColorActive;
+  background-color: @navbar-link-background-active;
+  color: @navbar-link-color-active;
 }
 .navbar .nav li.dropdown > .dropdown-toggle .caret {
-  border-top-color: @navbarLinkColor;
-  border-bottom-color: @navbarLinkColor;
+  border-top-color: @navbar-link-color;
+  border-bottom-color: @navbar-link-color;
 }
 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
-  border-top-color: @navbarLinkColorActive;
-  border-bottom-color: @navbarLinkColorActive;
+  border-top-color: @navbar-link-color-active;
+  border-bottom-color: @navbar-link-color-active;
 }
 
 // Right aligned menus need alt position
@@ -363,84 +363,84 @@
 // -------------------------
 
 .navbar-inverse {
-  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
-  border-color: @navbarInverseBorder;
+  #gradient > .vertical(@navbar-inverse-background-highlight, @navbar-inverse-background);
+  border-color: @navbar-inverse-border;
 
   .brand,
   .nav > li > a {
-    color: @navbarInverseLinkColor;
+    color: @navbar-inverse-link-color;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     &:hover {
-      color: @navbarInverseLinkColorHover;
+      color: @navbar-inverse-link-color-hover;
     }
   }
 
   .brand {
-    color: @navbarInverseBrandColor;
+    color: @navbar-inverse-brand-color;
   }
 
   .navbar-text {
-    color: @navbarInverseText;
+    color: @navbar-inverse-text;
   }
 
   .nav > li > a:focus,
   .nav > li > a:hover {
-    background-color: @navbarInverseLinkBackgroundHover;
-    color: @navbarInverseLinkColorHover;
+    background-color: @navbar-inverse-link-background-hover;
+    color: @navbar-inverse-link-color-hover;
   }
 
   .nav .active > a,
   .nav .active > a:hover,
   .nav .active > a:focus {
-    color: @navbarInverseLinkColorActive;
-    background-color: @navbarInverseLinkBackgroundActive;
+    color: @navbar-inverse-link-color-active;
+    background-color: @navbar-inverse-link-background-active;
   }
 
   // Inline text links
   .navbar-link {
-    color: @navbarInverseLinkColor;
+    color: @navbar-inverse-link-color;
     &:hover {
-      color: @navbarInverseLinkColorHover;
+      color: @navbar-inverse-link-color-hover;
     }
   }
 
   // Dividers in navbar
   .divider-vertical {
-    border-left-color: @navbarInverseBackground;
-    border-right-color: @navbarInverseBackgroundHighlight;
+    border-left-color: @navbar-inverse-background;
+    border-right-color: @navbar-inverse-background-highlight;
   }
 
   // Dropdowns
   .nav li.dropdown.open > .dropdown-toggle,
   .nav li.dropdown.active > .dropdown-toggle,
   .nav li.dropdown.open.active > .dropdown-toggle {
-    background-color: @navbarInverseLinkBackgroundActive;
-    color: @navbarInverseLinkColorActive;
+    background-color: @navbar-inverse-link-background-active;
+    color: @navbar-inverse-link-color-active;
   }
   .nav li.dropdown > a:hover .caret {
-    border-top-color: @navbarInverseLinkColorActive;
-    border-bottom-color: @navbarInverseLinkColorActive;
+    border-top-color: @navbar-inverse-link-color-active;
+    border-bottom-color: @navbar-inverse-link-color-active;
   }
   .nav li.dropdown > .dropdown-toggle .caret {
-    border-top-color: @navbarInverseLinkColor;
-    border-bottom-color: @navbarInverseLinkColor;
+    border-top-color: @navbar-inverse-link-color;
+    border-bottom-color: @navbar-inverse-link-color;
   }
   .nav li.dropdown.open > .dropdown-toggle .caret,
   .nav li.dropdown.active > .dropdown-toggle .caret,
   .nav li.dropdown.open.active > .dropdown-toggle .caret {
-    border-top-color: @navbarInverseLinkColorActive;
-    border-bottom-color: @navbarInverseLinkColorActive;
+    border-top-color: @navbar-inverse-link-color-active;
+    border-bottom-color: @navbar-inverse-link-color-active;
   }
 
   // Navbar search
   .navbar-search {
     .search-query {
       color: #fff;
-      background-color: @navbarInverseSearchBackground;
-      border-color: @navbarInverseSearchBorder;
+      background-color: @navbar-inverse-search-background;
+      border-color: @navbar-inverse-search-border;
       .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
       .transition(none);
-      .placeholder(@navbarInverseSearchPlaceholderColor);
+      .placeholder(@navbar-inverse-search-placeholder-color);
 
       // Focus states (we use .focused since IE8 and down doesn't support :focus)
       &:focus,
@@ -448,7 +448,7 @@
         padding: 5px 15px;
         color: @grayDark;
         text-shadow: 0 1px 0 #fff;
-        background-color: @navbarInverseSearchBackgroundFocus;
+        background-color: @navbar-inverse-search-background-focus;
         border: 0;
         .box-shadow(0 0 3px rgba(0,0,0,.15));
         outline: 0;
@@ -458,7 +458,7 @@
 
   // Navbar collapse button
   .btn-navbar {
-    .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
+    .buttonBackground(darken(@navbar-inverse-background-highlight, 5%), darken(@navbar-inverse-background, 5%));
   }
 
 }

diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index e0c0df6b16cf37f72fc841df0e6dc36b868b7e61..5cf90b107595c8811ef201cebfddd4295bce5f14 100644 (file)
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -5,7 +5,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: @navbarCollapseWidth) {
+@media (max-width: @navbar-collapse-width) {
 
   // UNFIX THE TOPBAR
   // ----------------
@@ -60,7 +60,7 @@
     display: none;
   }
   .nav-collapse .nav .nav-header {
-    color: @navbarText;
+    color: @navbar-text;
     text-shadow: none;
   }
   // Nav and dropdown links in navbar
@@ -68,7 +68,7 @@
   .nav-collapse .dropdown-menu a {
     padding: 9px 15px;
     font-weight: bold;
-    color: @navbarLinkColor;
+    color: @navbar-link-color;
     border-radius: 3px;
   }
   // Buttons
@@ -82,15 +82,15 @@
   }
   .nav-collapse .nav > li > a:hover,
   .nav-collapse .dropdown-menu a:hover {
-    background-color: @navbarBackground;
+    background-color: @navbar-background;
   }
   .navbar-inverse .nav-collapse .nav > li > a,
   .navbar-inverse .nav-collapse .dropdown-menu a {
-    color: @navbarInverseLinkColor;
+    color: @navbar-inverse-link-color;
   }
   .navbar-inverse .nav-collapse .nav > li > a:hover,
   .navbar-inverse .nav-collapse .dropdown-menu a:hover {
-    background-color: @navbarInverseBackground;
+    background-color: @navbar-inverse-background;
   }
   // Buttons in the navbar
   .nav-collapse.in .btn-group {
@@ -135,14 +135,14 @@
     float: none;
     padding: (@line-height-base / 2) 15px;
     margin: (@line-height-base / 2) 0;
-    border-top: 1px solid @navbarBackground;
-    border-bottom: 1px solid @navbarBackground;
+    border-top: 1px solid @navbar-background;
+    border-bottom: 1px solid @navbar-background;
     .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
   }
   .navbar-inverse .nav-collapse .navbar-form,
   .navbar-inverse .nav-collapse .navbar-search {
-    border-top-color: @navbarInverseBackground;
-    border-bottom-color: @navbarInverseBackground;
+    border-top-color: @navbar-inverse-background;
+    border-bottom-color: @navbar-inverse-background;
   }
   // Pull right (secondary) nav content
   .navbar .nav-collapse .nav.pull-right {
@@ -174,7 +174,7 @@
 // DEFAULT DESKTOP
 // ---------------
 
-@media (min-width: @navbarCollapseDesktopWidth) {
+@media (min-width: @navbar-collapse-width-desktop) {
 
   // Required to make the collapsing navbar work on regular desktops
   .nav-collapse.collapse {

diff --git a/less/variables.less b/less/variables.less
index d3f1f124338fe74cbd79d2ee432ba92fc9be5c98..4da2f0d6281be334a3b5cf3918777d0082b1ad4c 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -33,6 +33,7 @@
 
 // Typography
 // -------------------------
+
 @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@@ -152,41 +153,41 @@
 // Navbar
 // -------------------------
 
-@navbarCollapseWidth:             979px;
-@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
+@navbar-collapse-width:            979px;
+@navbar-collapse-width-desktop:    @navbar-collapse-width + 1;
 
-@navbarHeight:                    44px;
-@navbarBackgroundHighlight:       #ffffff;
-@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
-@navbarBorder:                    darken(@navbarBackground, 12%);
+@navbar-height:                    44px;
+@navbar-background-highlight:      #ffffff;
+@navbar-background:                darken(@navbar-background-highlight, 5%);
+@navbar-border:                    darken(@navbar-background, 12%);
 
-@navbarText:                      #777;
-@navbarLinkColor:                 #777;
-@navbarLinkColorHover:            @grayDark;
-@navbarLinkColorActive:           @gray;
-@navbarLinkBackgroundHover:       transparent;
-@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
+@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%);
 
-@navbarBrandColor:                @navbarLinkColor;
+@navbar-brand-color:                @navbar-link-color;
 
 // Inverted navbar
-@navbarInverseBackground:                #111111;
-@navbarInverseBackgroundHighlight:       #222222;
-@navbarInverseBorder:                    #111111;
-
-@navbarInverseText:                      @grayLight;
-@navbarInverseLinkColor:                 @grayLight;
-@navbarInverseLinkColorHover:            #fff;
-@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
-@navbarInverseLinkBackgroundHover:       transparent;
-@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
-
-@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus:     #fff;
-@navbarInverseSearchBorder:              @navbarInverseBackground;
-@navbarInverseSearchPlaceholderColor:    #ccc;
-
-@navbarInverseBrandColor:                @navbarInverseLinkColor;
+@navbar-inverse-background:                #111111;
+@navbar-inverse-background-highlight:       #222222;
+@navbar-inverse-border:                    #111111;
+
+@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-search-background:          lighten(@navbar-inverse-background, 25%);
+@navbar-inverse-search-background-focus:     #fff;
+@navbar-inverse-search-border:              @navbar-inverse-background;
+@navbar-inverse-search-placeholder-color:    #ccc;
+
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
 
 
 // Pagination