diff options
author | Mark Otto <markotto@twitter.com> | 2012-06-20 00:52:07 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-06-20 00:52:07 +0400 |
commit | 64ba423b6d06c98e95e23d8c34df62a47a421a03 (patch) | |
tree | 1b9a2ea94ec7a59c6c87db0791b9aa0b59acd6bf | |
parent | d14f06fc4ed3f4753de9ae5ef247c48629714935 (diff) |
#2764: add disabled styles to navs and dropdowns
-rw-r--r-- | docs/assets/css/bootstrap.css | 21 | ||||
-rw-r--r-- | docs/components.html | 19 | ||||
-rw-r--r-- | docs/templates/pages/components.mustache | 19 | ||||
-rw-r--r-- | less/dropdowns.less | 14 | ||||
-rw-r--r-- | less/navs.less | 16 |
5 files changed, 87 insertions, 2 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 81fb023d9d..3389eb4031 100644 --- 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 3cafb15b5c..ce931783f4 100644 --- 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> @@ -655,6 +655,23 @@ </ul> </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"> +<ul class="nav nav-pills"> + ... + <li class="disabled"><a href="#">Home</a></li> + ... +</ul> +</pre> + <h3>Component alignment</h3> <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 09e77724dc..1c33073a8e 100644 --- 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> @@ -578,6 +578,23 @@ </ul> </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"> +<ul class="nav nav-pills"> + ... + <li class="disabled"><a href="#">{{_i}}Home{{/i}}</a></li> + ... +</ul> +</pre> + <h3>{{_i}}Component alignment{{/i}}</h3> <p>{{_i}}To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p> diff --git a/less/dropdowns.less b/less/dropdowns.less index f965d292d2..648a9f2462 100644 --- 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 5cb9f9f3a2..1034837396 100644 --- 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; +} |