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

customize.html

@@ -724,6 +724,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="darken(@navbar-link-color, 10%)">
           <label>@navbar-brand-hover-bg</label>
           <input type="text" placeholder="transparent">
+          <h4>Toggle</h4>          
+          <label>@navbar-toggle-hover-bg</label>
+          <input type="text" placeholder="#ddd">
+          <label>@navbar-toggle-icon-bar-bg</label>
+          <input type="text" placeholder="#ccc">
+          <label>@navbar-toggle-border-color</label>
+          <input type="text" placeholder="#ddd">
         </div>
         <div class="col-lg-6">
           <h3>Inverted navbar</h3>
@@ -754,6 +761,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="#fff">
           <label>@navbar-inverse-brand-hover-bg</label>
           <input type="text" placeholder="transparent">
+          <h4>Toggle</h4>          
+          <label>@navbar-inverse-toggle-hover-bg</label>
+          <input type="text" placeholder="#333">
+          <label>@navbar-inverse-toggle-icon-bar-bg</label>
+          <input type="text" placeholder="#fff">
+          <label>@navbar-inverse-toggle-border-color</label>
+          <input type="text" placeholder="#333">
         </div>
       </div>
 

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;
     }
   }
 

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