rewrite active and disabled styles for navs
This commit is contained in:
parent
d2f4c35061
commit
c8306d2f70
|
@ -30,8 +30,8 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Another link</a>
|
<a class="nav-link" href="#">Another link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item disabled">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Disabled</a>
|
<a class="nav-link disabled" href="#">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
@ -53,8 +53,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ul class="nav nav-tabs">
|
<ul class="nav nav-tabs">
|
||||||
<li class="nav-item active">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Active</a>
|
<a href="#" class="nav-link active">Active</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Link</a>
|
<a href="#" class="nav-link">Link</a>
|
||||||
|
@ -74,8 +74,8 @@ Take that same HTML, but use `.nav-pills` instead:
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="nav-item active">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Active</a>
|
<a href="#" class="nav-link active">Active</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Link</a>
|
<a href="#" class="nav-link">Link</a>
|
||||||
|
@ -83,8 +83,8 @@ Take that same HTML, but use `.nav-pills` instead:
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Another link</a>
|
<a href="#" class="nav-link">Another link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item disabled">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Disabled</a>
|
<a href="#" class="nav-link disabled">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
@ -95,8 +95,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ul class="nav nav-pills nav-stacked">
|
<ul class="nav nav-pills nav-stacked">
|
||||||
<li class="nav-item active">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Active</a>
|
<a href="#" class="nav-link active">Active</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Link</a>
|
<a href="#" class="nav-link">Link</a>
|
||||||
|
@ -104,8 +104,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Another link</a>
|
<a href="#" class="nav-link">Another link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item disabled">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Disabled</a>
|
<a href="#" class="nav-link disabled">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
@ -118,10 +118,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ul class="nav nav-tabs">
|
<ul class="nav nav-tabs">
|
||||||
<li class="nav-item active">
|
|
||||||
<a href="#" class="nav-link">Active</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link active">Active</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
@ -134,8 +134,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Another link</a>
|
<a href="#" class="nav-link">Another link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item disabled">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Disabled</a>
|
<a href="#" class="nav-link disabled">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
@ -144,10 +144,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="nav-item active">
|
|
||||||
<a href="#" class="nav-link">Active</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link active">Active</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
@ -160,8 +160,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Another link</a>
|
<a href="#" class="nav-link">Another link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item disabled">
|
<li class="nav-item">
|
||||||
<a href="#" class="nav-link">Disabled</a>
|
<a href="#" class="nav-link disabled">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
@ -172,8 +172,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
|
||||||
|
|
||||||
<div class="bd-example bd-example-tabs" role="tabpanel">
|
<div class="bd-example bd-example-tabs" role="tabpanel">
|
||||||
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
||||||
<li class="nav-item active">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
<a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
||||||
|
@ -212,8 +212,8 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
<ul class="nav nav-tabs" role="tablist">
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
<li class="nav-item active">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#home" role="tab" data-toggle="tab">Home</a>
|
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
|
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
|
||||||
|
@ -277,8 +277,8 @@ Activates a tab element and content container. Tab should have either a `data-ta
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<ul class="nav nav-tabs" role="tablist" id="myTab">
|
<ul class="nav nav-tabs" role="tablist" id="myTab">
|
||||||
<li class="nav-item active">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
|
<a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
<a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
||||||
|
|
|
@ -17,7 +17,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled state lightens text and removes hover/tab effects
|
// Disabled state lightens text and removes hover/tab effects
|
||||||
.disabled > &,
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $nav-disabled-link-color;
|
color: $nav-disabled-link-color;
|
||||||
|
|
||||||
|
@ -83,6 +82,7 @@
|
||||||
|
|
||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
border-bottom: 1px solid $nav-tabs-border-color;
|
border-bottom: 1px solid $nav-tabs-border-color;
|
||||||
|
@include clearfix();
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -103,27 +103,24 @@
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.open > .nav-link,
|
&.disabled {
|
||||||
.active > .nav-link,
|
|
||||||
.nav-link.open,
|
|
||||||
.nav-link.active {
|
|
||||||
@include plain-hover-focus {
|
|
||||||
color: $nav-tabs-active-link-hover-color;
|
|
||||||
background-color: $nav-tabs-active-link-hover-bg;
|
|
||||||
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled > .nav-link,
|
|
||||||
.nav-link.disabled {
|
|
||||||
@include plain-hover-focus {
|
@include plain-hover-focus {
|
||||||
color: $nav-disabled-link-color;
|
color: $nav-disabled-link-color;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active,
|
||||||
|
.nav-item.open .nav-link {
|
||||||
|
@include plain-hover-focus {
|
||||||
|
color: $nav-tabs-active-link-hover-color;
|
||||||
|
background-color: $nav-tabs-active-link-hover-bg;
|
||||||
|
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -146,10 +143,8 @@
|
||||||
@include border-radius($nav-pills-border-radius);
|
@include border-radius($nav-pills-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.open > .nav-link,
|
.nav-link.active,
|
||||||
.active > .nav-link,
|
.nav-item.open .nav-link {
|
||||||
.nav-link.open,
|
|
||||||
.nav-link.active {
|
|
||||||
@include plain-hover-focus {
|
@include plain-hover-focus {
|
||||||
color: $component-active-color;
|
color: $component-active-color;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
Loading…
Reference in New Issue