Moved navs inline properties to variables.less and customize.html & nav-customize.html
This commit is contained in:
parent
f8d5a974bc
commit
a06afd8320
|
@ -12,6 +12,7 @@
|
||||||
<li><a href="#variables-form-states">Form states</a></li>
|
<li><a href="#variables-form-states">Form states</a></li>
|
||||||
<li><a href="#variables-alerts">Alerts</a></li>
|
<li><a href="#variables-alerts">Alerts</a></li>
|
||||||
<li><a href="#variables-navbar">Navbar</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-tables">Tables</a></li>
|
||||||
<li><a href="#variables-forms">Forms</a></li>
|
<li><a href="#variables-forms">Forms</a></li>
|
||||||
<li><a href="#variables-dropdowns">Dropdowns</a></li>
|
<li><a href="#variables-dropdowns">Dropdowns</a></li>
|
||||||
|
|
|
@ -771,6 +771,46 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<h2 id="variables-tables">Tables</h2>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
|
|
|
@ -23,17 +23,17 @@
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
text-decoration: none;
|
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 state sets text to gray and nukes hover/tab effects
|
||||||
&.disabled > a {
|
&.disabled > a {
|
||||||
color: @gray-light;
|
color: @nav-disabled-link-color;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: @gray-light;
|
color: @nav-disabled-link-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
@ -51,12 +51,12 @@
|
||||||
&,
|
&,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: #fff;
|
color: @nav-open-link-hover-color;
|
||||||
background-color: @link-color;
|
background-color: @link-color;
|
||||||
border-color: @link-color;
|
border-color: @link-color;
|
||||||
.caret {
|
.caret {
|
||||||
border-top-color: #fff;
|
border-top-color: @nav-open-caret-border-color;
|
||||||
border-bottom-color: #fff;
|
border-bottom-color: @nav-open-caret-border-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -83,7 +83,7 @@
|
||||||
|
|
||||||
// Give the tabs something to sit on
|
// Give the tabs something to sit on
|
||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid @nav-tabs-border-color;
|
||||||
> li {
|
> li {
|
||||||
float: left;
|
float: left;
|
||||||
// Make the list-items overlay the bottom border
|
// Make the list-items overlay the bottom border
|
||||||
|
@ -96,7 +96,7 @@
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @gray-lighter @gray-lighter #ddd;
|
border-color: @nav-tabs-link-hover-border-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -105,9 +105,9 @@
|
||||||
&,
|
&,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: @gray;
|
color: @nav-tabs-active-link-hover-color;
|
||||||
background-color: @body-bg;
|
background-color: @nav-tabs-active-link-hover-bg;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid @nav-tabs-active-link-hover-border-color;
|
||||||
border-bottom-color: transparent;
|
border-bottom-color: transparent;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
@ -142,8 +142,8 @@
|
||||||
&,
|
&,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: #fff;
|
color: @nav-pills-active-link-hover-color;
|
||||||
background-color: @component-active-bg;
|
background-color: @nav-pills-active-link-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -183,13 +183,13 @@
|
||||||
.nav-tabs-justified {
|
.nav-tabs-justified {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
> li > a {
|
> li > a {
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
|
||||||
|
|
||||||
// Override margin from .nav-tabs
|
// Override margin from .nav-tabs
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
> .active > a {
|
> .active > a {
|
||||||
border-bottom-color: @body-bg;
|
border-bottom-color: @nav-tabs-justified-active-link-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -234,6 +234,33 @@
|
||||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||||
@navbar-inverse-toggle-border-color: #333;
|
@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
|
// Pagination
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
Loading…
Reference in New Issue