Rewrite the disabled list group items to simplify styles
This commit is contained in:
parent
c8614c0f15
commit
0c9308a3b2
|
@ -5853,7 +5853,6 @@ a.list-group-item:focus {
|
|||
.list-group-item.disabled:focus {
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.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:hover .list-group-item-text,
|
||||
.list-group-item.disabled:focus .list-group-item-text {
|
||||
color: #fff;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.list-group-item.active,
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4699,7 +4699,6 @@ a.list-group-item:focus {
|
|||
.list-group-item.disabled:focus {
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
border-color: #eee;
|
||||
}
|
||||
.list-group-item.disabled .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:hover .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:hover,
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -123,6 +123,7 @@
|
|||
<li><a href="#list-group-basic">Basic example</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-disabled">Disabled items</a></li>
|
||||
<li><a href="#list-group-contextual-classes">Contextual classes</a></li>
|
||||
<li><a href="#list-group-custom-content">Custom content</a></li>
|
||||
</ul>
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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">Vestibulum at eros</a>
|
||||
</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 %}
|
||||
|
||||
<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
|
@ -73,7 +73,6 @@ a.list-group-item {
|
|||
&.disabled:focus {
|
||||
background-color: @list-group-disabled-bg;
|
||||
color: @list-group-disabled-color;
|
||||
border-color: @list-group-disabled-border;
|
||||
|
||||
// Force color to inherit for custom content
|
||||
.list-group-item-heading {
|
||||
|
|
|
@ -643,23 +643,23 @@
|
|||
//** List group border radius
|
||||
@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;
|
||||
//** Text color of active list elements
|
||||
//** Text color of active list items
|
||||
@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;
|
||||
//** Border color of active list elements
|
||||
@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%);
|
||||
|
||||
//** Text color of disabled list elements
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list elements
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Border color of disabled list elements
|
||||
@list-group-disabled-border: #eee; // Or something else you want
|
||||
@list-group-disabled-text-color: lighten(@list-group-disabled-bg, 40%); // Or something else you want
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
|
Loading…
Reference in New Issue