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

2 files changed, 42 insertions, 15 deletions

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
 // -------------------------