Moved navs inline properties to variables.less and customize.html & nav-customize.html

4 files changed, 83 insertions, 15 deletions

diff --git a/_includes/nav-customize.html b/_includes/nav-customize.html
index 3099d6c71..26dbd3b03 100644
--- a/_includes/nav-customize.html
+++ b/_includes/nav-customize.html
@@ -12,6 +12,7 @@
     <li><a href="#variables-form-states">Form states</a></li>
     <li><a href="#variables-alerts">Alerts</a></li>
     <li><a href="#variables-navbar">Navbar</a></li>
+    <li><a href="#variables-nav">Nav</a></li>
     <li><a href="#variables-tables">Tables</a></li>
     <li><a href="#variables-forms">Forms</a></li>
     <li><a href="#variables-dropdowns">Dropdowns</a></li>
diff --git a/customize.html b/customize.html
index 6140783f7..d2ac699b3 100644
--- a/customize.html
+++ b/customize.html
@@ -771,6 +771,46 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
         </div>
       </div>
 
+      
+      <h2 id="variables-nav">Nav</h2>
+      <div class="row">
+        <div class="col-lg-6">
+          <h3>Default nav</h3>
+          <h4>Basics</h4>
+          <label>@nav-link-hover-bg</label>
+          <input type="text" placeholder="@gray-lighter">
+          <label>@nav-disabled-link-color</label>
+          <input type="text" placeholder="@gray-light">
+          <label>@nav-disabled-link-hover-color</label>
+          <input type="text" placeholder="@gray-light">
+          <label>@nav-open-link-hover-color</label>
+          <input type="text" placeholder="#fff">
+          <label>@nav-open-caret-border-color</label>
+          <input type="text" placeholder="@fff">
+          <h4>Tabs</h4>
+          <label>@nav-tabs-border-color</label>
+          <input type="text" placeholder="@ddd">
+          <label>@nav-tabs-link-hover-border-color</label>
+          <input type="text" placeholder="@gray-lighter">
+          <label>@nav-tabs-active-link-hover-color</label>
+          <input type="text" placeholder="@gray">
+          <label>@nav-tabs-active-link-hover-bg</label>
+          <input type="text" placeholder="@body-bg">
+          <label>@nav-tabs-active-link-hover-border-color</label>
+          <input type="text" placeholder="#ddd">
+          <label>@nav-tabs-justified-link-border-color</label>
+          <input type="text" placeholder="#ddd">
+          <label>@nav-tabs-justified-active-link-border-color</label>
+          <input type="text" placeholder="@body-bg">
+          <h4>Pills</h4>
+          <label>@nav-pills-active-link-hover-color</label>
+          <input type="text" placeholder="@fff">
+          <label>@nav-pills-active-link-hover-bg</label>
+          <input type="text" placeholder="@component-active-bg">
+        </div>
+      </div>
+      
+      
       <h2 id="variables-tables">Tables</h2>
       <div class="row">
         <div class="col-lg-6">
diff --git a/less/navs.less b/less/navs.less
index 21968dd77..7d64ef13a 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -23,17 +23,17 @@
       &:hover,
       &:focus {
         text-decoration: none;
-        background-color: @gray-lighter;
+        background-color: @nav-link-hover-bg;
       }
     }
 
     // Disabled state sets text to gray and nukes hover/tab effects
     &.disabled > a {
-      color: @gray-light;
+      color: @nav-disabled-link-color;
 
       &:hover,
       &:focus {
-        color: @gray-light;
+        color: @nav-disabled-link-hover-color;
         text-decoration: none;
         background-color: transparent;
         cursor: not-allowed;
@@ -51,12 +51,12 @@
     &,
     &:hover,
     &:focus {
-      color: #fff;
+      color: @nav-open-link-hover-color;
       background-color: @link-color;
       border-color: @link-color;
       .caret {
-        border-top-color: #fff;
-        border-bottom-color: #fff;
+        border-top-color: @nav-open-caret-border-color;
+        border-bottom-color: @nav-open-caret-border-color;
       }
     }
   }
@@ -83,7 +83,7 @@
 
 // Give the tabs something to sit on
 .nav-tabs {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid @nav-tabs-border-color;
   > li {
     float: left;
     // Make the list-items overlay the bottom border
@@ -96,7 +96,7 @@
       border: 1px solid transparent;
       border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
-        border-color: @gray-lighter @gray-lighter #ddd;
+        border-color: @nav-tabs-link-hover-border-color;
       }
     }
 
@@ -105,9 +105,9 @@
       &,
       &:hover,
       &:focus {
-        color: @gray;
-        background-color: @body-bg;
-        border: 1px solid #ddd;
+        color: @nav-tabs-active-link-hover-color;
+        background-color: @nav-tabs-active-link-hover-bg;
+        border: 1px solid @nav-tabs-active-link-hover-border-color;
         border-bottom-color: transparent;
         cursor: default;
       }
@@ -142,8 +142,8 @@
       &,
       &:hover,
       &:focus {
-        color: #fff;
-        background-color: @component-active-bg;
+        color: @nav-pills-active-link-hover-color;
+        background-color: @nav-pills-active-link-hover-bg;
       }
     }
   }
@@ -183,13 +183,13 @@
 .nav-tabs-justified {
   border-bottom: 0;
   > li > a {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 
     // Override margin from .nav-tabs
     margin-right: 0;
   }
   > .active > a {
-    border-bottom-color: @body-bg;
+    border-bottom-color: @nav-tabs-justified-active-link-border-color;
   }
 
 }
diff --git a/less/variables.less b/less/variables.less
index d2f7da3c7..cba5b1194 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -234,6 +234,33 @@
 @navbar-inverse-toggle-icon-bar-bg:         #fff;
 @navbar-inverse-toggle-border-color:        #333;
 
+// Navs
+// -------------------------
+
+@nav-link-hover-bg:                         @gray-lighter;
+
+@nav-disabled-link-color:                   @gray-light;
+@nav-disabled-link-hover-color:             @gray-light;
+
+@nav-open-link-hover-color:                 #fff;
+@nav-open-caret-border-color:               #fff;
+
+// Tabs
+@nav-tabs-border-color:                     #ddd;
+
+@nav-tabs-link-hover-border-color:          @gray-lighter;
+
+@nav-tabs-active-link-hover-bg:             @body-bg;
+@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-active-link-hover-border-color:   #ddd;
+
+@nav-tabs-justified-link-border-color:            #ddd;
+@nav-tabs-justified-active-link-border-color:     @body-bg;
+
+// Pills
+@nav-pills-active-link-hover-bg:            @component-active-bg;
+
+@nav-pills-active-link-hover-color:         #fff;
 
 // Pagination
 // -------------------------