#2764: add disabled styles to navs and dropdowns

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 81fb023d9d3670e923f8b48fa16e937ac378163c..3389eb4031a45a86add1cf07a8f594cf27b5baf2 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2466,6 +2466,17 @@ table .span24 {
   outline: 0;
 }
 
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+  color: #999999;
+}
+
+.dropdown-menu .disabled > a:hover {
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+
 .open {
   *z-index: 1000;
 }
@@ -3580,6 +3591,16 @@ input[type="submit"].btn.btn-mini {
   *border-left-color: #ffffff;
 }
 
+.nav > .disabled > a {
+  color: #999999;
+}
+
+.nav > .disabled > a:hover {
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+
 .navbar {
   *position: relative;
   *z-index: 2;

diff --git a/docs/components.html b/docs/components.html
index 3cafb15b5c00a654c7826b2c79c2aa79d40e3b85..ce931783f4f23f5ae1a3570ff3937bb8396a9701 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -114,7 +114,7 @@
 
 <!-- Dropdowns
 ================================================== -->
-<section id="Dropdowns">
+<section id="dropdowns">
   <div class="page-header">
     <h1>Dropdown menus <small>Dropdown and dropup menus for contextual actions</small></h1>
   </div>
@@ -653,6 +653,23 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
+</pre>
+
+  <h3>Disabled state</h3>
+  <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.</p>
+  <div class="bs-docs-example">
+    <ul class="nav nav-pills">
+      <li><a href="#">Clickable link</a></li>
+      <li><a href="#">Clickable link</a></li>
+      <li class="disabled"><a href="#">Disabled link</a></li>
+    </ul>
+  </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  ...
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
 
   <h3>Component alignment</h3>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 09e77724dc49c31890b4fae59bb5bf283c1eb960..1c33073a8ef3c5d4ad93f4df8bd19b9c0c3da7c9 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -37,7 +37,7 @@
 
 <!-- Dropdowns
 ================================================== -->
-<section id="Dropdowns">
+<section id="dropdowns">
   <div class="page-header">
     <h1>{{_i}}Dropdown menus{{/i}} <small>{{_i}}Dropdown and dropup menus for contextual actions{{/i}}</small></h1>
   </div>
@@ -576,6 +576,23 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
+</pre>
+
+  <h3>{{_i}}Disabled state{{/i}}</h3>
+  <p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.{{/i}}</p>
+  <div class="bs-docs-example">
+    <ul class="nav nav-pills">
+      <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
+      <li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
+      <li class="disabled"><a href="#">{{_i}}Disabled link{{/i}}</a></li>
+    </ul>
+  </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  ...
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
 
   <h3>{{_i}}Component alignment{{/i}}</h3>

diff --git a/less/dropdowns.less b/less/dropdowns.less
index f965d292d2dc24ce05828de37ab9084f38b8a4e0..648a9f24629d1ae87643b804f8827a64eccb373a 100644 (file)
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -103,6 +103,20 @@
   outline: 0;
 }
 
+// Disabled state
+// --------------
+// Gray out text and ensure the hover state remains gray
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+  color: @grayLight;
+}
+// Nuke hover effects
+.dropdown-menu .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  cursor: default;
+}
+
 // Open state for the dropdown
 // ---------------------------
 .open {

diff --git a/less/navs.less b/less/navs.less
index 5cb9f9f3a2e6cc63888b6ab0362667a5f127f3a3..103483739638f4f83cdcd6e1bfc5bda89ecd4300 100644 (file)
--- a/less/navs.less
+++ b/less/navs.less
@@ -361,3 +361,19 @@
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: @white;
 }
+
+
+
+// DISABLED STATES
+// ---------------
+
+// Gray out text
+.nav > .disabled > a {
+  color: @grayLight;
+}
+// Nuke hover effects
+.nav > .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  cursor: default;
+}