rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Moved navs inline properties to variables.less and customize.html & nav-customize.html

Browse Source
This commit is contained in:
syed 2013-07-25 12:43:14 +05:00
parent f8d5a974bc
commit a06afd8320
4 changed files with 83 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/nav-customize.html
View File

@ -12,6 +12,7 @@
<li><a href="#variables-form-states">Form states</a></li>
<li><a href="#variables-alerts">Alerts</a></li>
<li><a href="#variables-navbar">Navbar</a></li>
<li><a href="#variables-nav">Nav</a></li>
<li><a href="#variables-tables">Tables</a></li>
<li><a href="#variables-forms">Forms</a></li>
<li><a href="#variables-dropdowns">Dropdowns</a></li>

40
customize.html
View File

@ -771,6 +771,46 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div>
</div>
<h2 id="variables-nav">Nav</h2>
<div class="row">
<div class="col-lg-6">
<h3>Default nav</h3>
<h4>Basics</h4>
<label>@nav-link-hover-bg</label>
<input type="text" placeholder="@gray-lighter">
<label>@nav-disabled-link-color</label>
<input type="text" placeholder="@gray-light">
<label>@nav-disabled-link-hover-color</label>
<input type="text" placeholder="@gray-light">
<label>@nav-open-link-hover-color</label>
<input type="text" placeholder="#fff">
<label>@nav-open-caret-border-color</label>
<input type="text" placeholder="@fff">
<h4>Tabs</h4>
<label>@nav-tabs-border-color</label>
<input type="text" placeholder="@ddd">
<label>@nav-tabs-link-hover-border-color</label>
<input type="text" placeholder="@gray-lighter">
<label>@nav-tabs-active-link-hover-color</label>
<input type="text" placeholder="@gray">
<label>@nav-tabs-active-link-hover-bg</label>
<input type="text" placeholder="@body-bg">
<label>@nav-tabs-active-link-hover-border-color</label>
<input type="text" placeholder="#ddd">
<label>@nav-tabs-justified-link-border-color</label>
<input type="text" placeholder="#ddd">
<label>@nav-tabs-justified-active-link-border-color</label>
<input type="text" placeholder="@body-bg">
<h4>Pills</h4>
<label>@nav-pills-active-link-hover-color</label>
<input type="text" placeholder="@fff">
<label>@nav-pills-active-link-hover-bg</label>
<input type="text" placeholder="@component-active-bg">
</div>
</div>
<h2 id="variables-tables">Tables</h2>
<div class="row">
<div class="col-lg-6">

30
less/navs.less
View File

@ -23,17 +23,17 @@
&:hover,
&:focus {
text-decoration: none;
background-color: @gray-lighter;
background-color: @nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @gray-light;
color: @nav-disabled-link-color;
&:hover,
&:focus {
color: @gray-light;
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
@ -51,12 +51,12 @@
&,
&:hover,
&:focus {
color: #fff;
color: @nav-open-link-hover-color;
background-color: @link-color;
border-color: @link-color;
.caret {
border-top-color: #fff;
border-bottom-color: #fff;
border-top-color: @nav-open-caret-border-color;
border-bottom-color: @nav-open-caret-border-color;
}
}
}
@ -83,7 +83,7 @@
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid @nav-tabs-border-color;
> li {
float: left;
// Make the list-items overlay the bottom border
@ -96,7 +96,7 @@
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
border-color: @gray-lighter @gray-lighter #ddd;
border-color: @nav-tabs-link-hover-border-color;
}
}
@ -105,9 +105,9 @@
&,
&:hover,
&:focus {
color: @gray;
background-color: @body-bg;
border: 1px solid #ddd;
color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
@ -142,8 +142,8 @@
&,
&:hover,
&:focus {
color: #fff;
background-color: @component-active-bg;
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
@ -183,13 +183,13 @@
.nav-tabs-justified {
border-bottom: 0;
> li > a {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
border-bottom-color: @body-bg;
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}

27
less/variables.less
View File

@ -234,6 +234,33 @@
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
// Navs
// -------------------------
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
@nav-open-caret-border-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
// Pills
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff;
// Pagination
// -------------------------