Commit 0c9308a3 authored by Mark Otto's avatar Mark Otto

Rewrite the disabled list group items to simplify styles

parent c8614c0f
...@@ -5853,7 +5853,6 @@ a.list-group-item:focus { ...@@ -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 { ...@@ -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,
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -4699,7 +4699,6 @@ a.list-group-item:focus { ...@@ -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 { ...@@ -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,
......
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -123,6 +123,7 @@ ...@@ -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>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -2648,6 +2648,31 @@ body { padding-bottom: 70px; } ...@@ -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>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -73,7 +73,6 @@ a.list-group-item { ...@@ -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 {
......
...@@ -643,23 +643,23 @@ ...@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment