Fixes #6995: Add disabled navbar nav link support

5 files changed, 36 insertions, 4 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c078ea4af..ba2b7d01b 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 b60dd1621..5727a1759 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -805,7 +805,7 @@ title: Components
               <ul class="nav">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Link</a></li>
-                <li><a href="#">Link</a></li>
+                <li class="disabled"><a href="#">Disabled</a></li>
               </ul>
             </div>
           </div><!-- /example -->
@@ -813,7 +813,7 @@ title: Components
 <ul class="nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Link</a></li>
-  <li><a href="#">Link</a></li>
+  <li class="disabled"><a href="#">Disabled</a></li>
 </ul>
 {% 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>
diff --git a/less/navbar.less b/less/navbar.less
index 7c70f83a6..7fb241c42 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 07d5e5c5d..33b5ec3fe 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 2b6fa6e1b..c9fef3391 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