mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 18:40:03 +00:00
Code Issues Projects Releases Wiki Activity

rewrite active and disabled styles for navs

Browse Source
This commit is contained in:
Mark Otto 2015-08-18 20:25:31 -07:00
parent d2f4c35061
commit c8306d2f70
2 changed files with 41 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/components/navs.md
View File

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

31
scss/_nav.scss
View File

@ -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;
} }
&.disabled {
@include plain-hover-focus {
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
}
} }
.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: $nav-tabs-active-link-hover-color; color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg; 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; 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 {
color: $nav-disabled-link-color;
background-color: transparent;
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;