diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c078ea4af1..ba2b7d01b9 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2991,6 +2991,7 @@ button.close { .nav > .disabled > a:hover, .nav > .disabled > a:focus { + color: #999999; text-decoration: none; cursor: default; background-color: transparent; @@ -3149,6 +3150,13 @@ button.close { 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 { border-radius: 0; } @@ -3307,6 +3315,13 @@ button.close { 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 { border-color: #333; } diff --git a/docs/components.html b/docs/components.html index b60dd1621a..5727a1759d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -805,7 +805,7 @@ title: Components @@ -813,7 +813,7 @@ title: Components {% endhighlight %}

You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <li> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.

diff --git a/less/navbar.less b/less/navbar.less index 7c70f83a6c..7fb241c42e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -37,6 +37,12 @@ color: @navbar-link-color-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; 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 .navbar-toggle { diff --git a/less/navs.less b/less/navs.less index 07d5e5c5d1..33b5ec3fe8 100644 --- a/less/navs.less +++ b/less/navs.less @@ -156,6 +156,7 @@ // Nuke hover effects .nav > .disabled > a:hover, .nav > .disabled > a:focus { + color: @grayLight; text-decoration: none; background-color: transparent; cursor: default; diff --git a/less/variables.less b/less/variables.less index 2b6fa6e1bf..c9fef33913 100644 --- a/less/variables.less +++ b/less/variables.less @@ -189,9 +189,11 @@ // Navbar links @navbar-link-color: #777; @navbar-link-color-hover: #333; -@navbar-link-color-active: #555; @navbar-link-bg-hover: transparent; +@navbar-link-color-active: #555; @navbar-link-bg-active: darken(@navbar-bg, 10%); +@navbar-link-color-disabled: #ccc; +@navbar-link-bg-disabled: transparent; // Inverted navbar @navbar-inverse-text: @grayLight; @@ -205,9 +207,11 @@ // Inverted navbar links @navbar-inverse-link-color: @grayLight; @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-color-active: @navbar-inverse-link-color-hover; @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 // Normal navbar needs no special styles or vars