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

diff --git a/customize.html b/customize.html
index ae8f9a11d09e7846d22b7f2a2c7f61ec6f6ee6ec..6140783f7f659a2ec7206eee8604fe0ff4aaa455 100644 (file)
--- a/customize.html
+++ b/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>
 

diff --git a/less/navbar.less b/less/navbar.less
index c87c8e68c3f82cccd3edb9aa86e91c1b8a2a7353..36f30cecd92d7b7cc4e0b6b212942c31d564c36a 100644 (file)
--- 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 342eef67c9e8ac97be2affe2f21c1e8c4c3e048d..d2f7da3c7e31da082720f5942b55071b2dec226f 100644 (file)
--- 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
 // -------------------------