diff options
| -rw-r--r-- | customize.html | 14 | ||||
| -rw-r--r-- | less/navbar.less | 14 | ||||
| -rw-r--r-- | less/variables.less | 10 |
3 files changed, 31 insertions, 7 deletions
diff --git a/customize.html b/customize.html index ae8f9a11d0..6140783f7f 100644 --- 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 c87c8e68c3..36f30cecd9 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 342eef67c9..d2f7da3c7e 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 // ------------------------- |