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:
parent
c8614c0f15
commit
0c9308a3b2
13 changed files with 45 additions and 22 deletions
3
dist/css/bootstrap-rtl.css
vendored
3
dist/css/bootstrap-rtl.css
vendored
|
@ -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,
|
||||
|
|
2
dist/css/bootstrap-rtl.min.css
vendored
2
dist/css/bootstrap-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
3
dist/css/bootstrap.css
vendored
3
dist/css/bootstrap.css
vendored
|
@ -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,
|
||||
|
|
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
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>
|
||||
|
|
2
docs/assets/js/customize.min.js
vendored
2
docs/assets/js/customize.min.js
vendored
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>
|
||||
|
|
2
docs/dist/css/bootstrap-rtl.min.css
vendored
2
docs/dist/css/bootstrap-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
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
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list elements
|
||||
//** Background color of disabled list items
|
||||
@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 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 a new issue