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

#2764: add disabled styles to navs and dropdowns

Browse Source
This commit is contained in:
Mark Otto 2012-06-19 13:52:07 -07:00
parent d14f06fc4e
commit 64ba423b6d
5 changed files with 87 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

19
docs/components.html
View File

@ -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>

19
docs/templates/pages/components.mustache vendored
View File

@ -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>

14
less/dropdowns.less
View File

@ -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 {

16
less/navs.less
View File

@ -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;
}