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

Fixes #6995: Add disabled navbar nav link support

Browse Source
This commit is contained in:
Mark Otto 2013-02-28 23:20:25 -08:00
parent 4418c82888
commit 5a30e52aac
5 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/assets/css/bootstrap.css vendored
View File

@ -2991,6 +2991,7 @@ button.close {
.nav > .disabled > a:hover, .nav > .disabled > a:hover,
.nav > .disabled > a:focus { .nav > .disabled > a:focus {
color: #999999;
text-decoration: none; text-decoration: none;
cursor: default; cursor: default;
background-color: transparent; background-color: transparent;
@ -3149,6 +3150,13 @@ button.close {
background-color: #d5d5d5; background-color: #d5d5d5;
} }
.navbar .nav > .disabled > a,
.navbar .nav > .disabled > a:hover,
.navbar .nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-static-top { .navbar-static-top {
border-radius: 0; border-radius: 0;
} }
@ -3307,6 +3315,13 @@ button.close {
background-color: #080808; background-color: #080808;
} }
.navbar-inverse .nav > .disabled > a,
.navbar-inverse .nav > .disabled > a:hover,
.navbar-inverse .nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.navbar-inverse .navbar-toggle { .navbar-inverse .navbar-toggle {
border-color: #333; border-color: #333;
} }

4
docs/components.html
View File

@ -805,7 +805,7 @@ title: Components
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li class="disabled"><a href="#">Disabled</a></li>
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
@ -813,7 +813,7 @@ title: Components
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li class="disabled"><a href="#">Disabled</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p> <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>

12
less/navbar.less
View File

@ -37,6 +37,12 @@
color: @navbar-link-color-active; color: @navbar-link-color-active;
background-color: @navbar-link-bg-active; background-color: @navbar-link-bg-active;
} }
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-link-color-disabled;
background-color: @navbar-link-bg-disabled;
}
} }
@ -210,6 +216,12 @@
color: @navbar-inverse-link-color-active; color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active; background-color: @navbar-inverse-link-bg-active;
} }
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-inverse-link-color-disabled;
background-color: @navbar-inverse-link-bg-disabled;
}
// Darken the responsive nav toggle // Darken the responsive nav toggle
.navbar-toggle { .navbar-toggle {

1
less/navs.less
View File

@ -156,6 +156,7 @@
// Nuke hover effects // Nuke hover effects
.nav > .disabled > a:hover, .nav > .disabled > a:hover,
.nav > .disabled > a:focus { .nav > .disabled > a:focus {
color: @grayLight;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;

8
less/variables.less
View File

@ -189,9 +189,11 @@
// Navbar links // Navbar links
@navbar-link-color: #777; @navbar-link-color: #777;
@navbar-link-color-hover: #333; @navbar-link-color-hover: #333;
@navbar-link-color-active: #555;
@navbar-link-bg-hover: transparent; @navbar-link-bg-hover: transparent;
@navbar-link-color-active: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%); @navbar-link-bg-active: darken(@navbar-bg, 10%);
@navbar-link-color-disabled: #ccc;
@navbar-link-bg-disabled: transparent;
// Inverted navbar // Inverted navbar
@navbar-inverse-text: @grayLight; @navbar-inverse-text: @grayLight;
@ -205,9 +207,11 @@
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: @grayLight; @navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff; @navbar-inverse-link-color-hover: #fff;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-hover: transparent; @navbar-inverse-link-bg-hover: transparent;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%); @navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-color-disabled: #444;
@navbar-inverse-link-bg-disabled: transparent;
// Inverted navbar search // Inverted navbar search
// Normal navbar needs no special styles or vars // Normal navbar needs no special styles or vars