root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

This commit is contained in:
syed 2013-07-25 11:58:25 +05:00
parent e9c83647af
commit f8d5a974bc
3 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
customize.html
View File

@ -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%)"> <input type="text" placeholder="darken(@navbar-link-color, 10%)">
<label>@navbar-brand-hover-bg</label> <label>@navbar-brand-hover-bg</label>
<input type="text" placeholder="transparent"> <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>
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Inverted navbar</h3> <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"> <input type="text" placeholder="#fff">
<label>@navbar-inverse-brand-hover-bg</label> <label>@navbar-inverse-brand-hover-bg</label>
<input type="text" placeholder="transparent"> <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>
</div> </div>

14
less/navbar.less
View File

@ -123,12 +123,12 @@
height: 32px; height: 32px;
padding: 8px 12px; padding: 8px 12px;
background-color: transparent; background-color: transparent;
border: 1px solid #ddd; border: 1px solid @navbar-toggle-border-color;
border-radius: 4px; border-radius: @border-radius-base;
&:hover, &:hover,
&:focus { &:focus {
background-color: #ddd; background-color: @navbar-toggle-hover-bg;
} }
// Bars // Bars
@ -136,7 +136,7 @@
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
background-color: #ccc; background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px; border-radius: 1px;
} }
.icon-bar + .icon-bar { .icon-bar + .icon-bar {
@ -250,13 +250,13 @@
// Darken the responsive nav toggle // Darken the responsive nav toggle
.navbar-toggle { .navbar-toggle {
border-color: #333; border-color: @navbar-inverse-toggle-border-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: #333; background-color: @navbar-inverse-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
background-color: #fff; background-color: @navbar-inverse-toggle-icon-bar-bg;
} }
} }

10
less/variables.less
View File

@ -224,6 +224,16 @@
@navbar-inverse-search-border: @navbar-inverse-bg; @navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc; @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 // Pagination
// ------------------------- // -------------------------