kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases 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%)">
<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>

14
less/navbar.less
View File

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

10
less/variables.less
View File

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