1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

Rewrite the disabled list group items to simplify styles

This commit is contained in:
Mark Otto 2014-03-06 21:40:22 -08:00
parent c8614c0f15
commit 0c9308a3b2
13 changed files with 45 additions and 22 deletions

View file

@ -5853,7 +5853,6 @@ a.list-group-item:focus {
.list-group-item.disabled:focus { .list-group-item.disabled:focus {
color: #999; color: #999;
background-color: #eee; background-color: #eee;
border-color: #eee;
} }
.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled .list-group-item-heading,
@ -5865,7 +5864,7 @@ a.list-group-item:focus {
.list-group-item.disabled .list-group-item-text, .list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text { .list-group-item.disabled:focus .list-group-item-text {
color: #fff; color: #999;
} }
.list-group-item.active, .list-group-item.active,

File diff suppressed because one or more lines are too long

View file

@ -4699,7 +4699,6 @@ a.list-group-item:focus {
.list-group-item.disabled:focus { .list-group-item.disabled:focus {
color: #999; color: #999;
background-color: #eee; background-color: #eee;
border-color: #eee;
} }
.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading,
@ -4709,7 +4708,7 @@ a.list-group-item:focus {
.list-group-item.disabled .list-group-item-text, .list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text { .list-group-item.disabled:focus .list-group-item-text {
color: #fff; color: #999;
} }
.list-group-item.active, .list-group-item.active,
.list-group-item.active:hover, .list-group-item.active:hover,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -123,6 +123,7 @@
<li><a href="#list-group-basic">Basic example</a></li> <li><a href="#list-group-basic">Basic example</a></li>
<li><a href="#list-group-badges">Badges</a></li> <li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-linked">Linked items</a></li> <li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-disabled">Disabled items</a></li>
<li><a href="#list-group-contextual-classes">Contextual classes</a></li> <li><a href="#list-group-contextual-classes">Contextual classes</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li> <li><a href="#list-group-custom-content">Custom content</a></li>
</ul> </ul>

File diff suppressed because one or more lines are too long

View file

@ -2648,6 +2648,31 @@ body { padding-bottom: 70px; }
<a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a> <a href="#" class="list-group-item">Vestibulum at eros</a>
</div> </div>
{% endhighlight %}
<h3 id="list-group-disabled">Disabled items</h3>
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-contextual-classes">Contextual classes</h3> <h3 id="list-group-contextual-classes">Contextual classes</h3>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -73,7 +73,6 @@ a.list-group-item {
&.disabled:focus { &.disabled:focus {
background-color: @list-group-disabled-bg; background-color: @list-group-disabled-bg;
color: @list-group-disabled-color; color: @list-group-disabled-color;
border-color: @list-group-disabled-border;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading { .list-group-item-heading {

View file

@ -643,23 +643,23 @@
//** List group border radius //** List group border radius
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
//** Background color of single list elements on hover //** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5; @list-group-hover-bg: #f5f5f5;
//** Text color of active list elements //** Text color of active list items
@list-group-active-color: @component-active-color; @list-group-active-color: @component-active-color;
//** Background color of active list elements //** Background color of active list items
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
//** Border color of active list elements //** Border color of active list elements
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); @list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list elements //** Text color of disabled list items
@list-group-disabled-color: @gray-light; @list-group-disabled-color: @gray-light;
//** Background color of disabled list elements //** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter; @list-group-disabled-bg: @gray-lighter;
//** Border color of disabled list elements //** Text color for content within disabled list items
@list-group-disabled-border: #eee; // Or something else you want @list-group-disabled-text-color: @list-group-disabled-color;
@list-group-disabled-text-color: lighten(@list-group-disabled-bg, 40%); // Or something else you want
@list-group-link-color: #555; @list-group-link-color: #555;
@list-group-link-heading-color: #333; @list-group-link-heading-color: #333;