Moving navbar inline properties to variables.less and customize.html

2 files changed, 17 insertions, 7 deletions

diff --git a/less/navbar.less b/less/navbar.less
index c87c8e68c..36f30cecd 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -123,12 +123,12 @@
   height: 32px;
   padding: 8px 12px;
   background-color: transparent;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: 1px solid @navbar-toggle-border-color;
+  border-radius: @border-radius-base;
 
   &:hover,
   &:focus {
-    background-color: #ddd;
+    background-color: @navbar-toggle-hover-bg;
   }
 
   // Bars
@@ -136,7 +136,7 @@
     display: block;
     width: 22px;
     height: 2px;
-    background-color: #ccc;
+    background-color: @navbar-toggle-icon-bar-bg;
     border-radius: 1px;
   }
   .icon-bar + .icon-bar {
@@ -250,13 +250,13 @@
 
   // Darken the responsive nav toggle
   .navbar-toggle {
-    border-color: #333;
+    border-color: @navbar-inverse-toggle-border-color;
     &:hover,
     &:focus {
-      background-color: #333;
+      background-color: @navbar-inverse-toggle-hover-bg;
     }
     .icon-bar {
-      background-color: #fff;
+      background-color: @navbar-inverse-toggle-icon-bar-bg;
     }
   }
 
diff --git a/less/variables.less b/less/variables.less
index 342eef67c..d2f7da3c7 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -224,6 +224,16 @@
 @navbar-inverse-search-border:              @navbar-inverse-bg;
 @navbar-inverse-search-placeholder-color:   #ccc;
 
+// Navbar toggle
+@navbar-toggle-hover-bg:                    #ddd;
+@navbar-toggle-icon-bar-bg:                 #ccc;
+@navbar-toggle-border-color:                #ddd;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-icon-bar-bg:         #fff;
+@navbar-inverse-toggle-border-color:        #333;
+
 
 // Pagination
 // -------------------------