2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03: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
+1 -2
View File
@@ -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,
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -2
View File
@@ -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,
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1
View File
@@ -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>
+1 -1
View File
File diff suppressed because one or more lines are too long
+25
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">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
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
-1
View File
@@ -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 {
+10 -10
View File
@@ -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;