sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-29 00:06:04 -04:00
Code Issues Projects Releases Wiki Activity

Adding contextual styles to list-items

Browse Source
This commit is contained in:
Aaron Borden 2013-10-16 19:02:04 -07:00
parent 3e9e339ee3
commit 0c2055ef38
6 changed files with 73 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components.html
View File

@ -3325,6 +3325,27 @@ 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-contextual-classes">Contextual classes</h3>
<p>Use contextual classes to color list items.</p>
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item">Cras justo odio</a>
<a href="#" class="list-group-item success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item danger">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<div class="list-group">
<a href="#" class="list-group-item">Cras justo odio</a>
<a href="#" class="list-group-item success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item danger">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h3 id="list-group-custom-content">Custom content</h3>

30
dist/css/bootstrap.css vendored
View File

@ -5511,6 +5511,36 @@ a.thumbnail.active {
margin-right: 5px;
}
.list-group > .list-group-item.success {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.list-group > .list-group-item.success:hover {
background-color: #d0e9c6;
border-color: #c9e2b3;
}
.list-group > .list-group-item.danger {
background-color: #f2dede;
border-color: #ebccd1;
}
.list-group > .list-group-item.danger:hover {
background-color: #ebcccc;
border-color: #e4b9c0;
}
.list-group > .list-group-item.warning {
background-color: #fcf8e3;
border-color: #faebcc;
}
.list-group > .list-group-item.warning:hover {
background-color: #faf2cc;
border-color: #f7e1b5;
}
a.list-group-item {
color: #555555;
}

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs-assets/js/raw-files.js
View File

File diff suppressed because one or more lines are too long

5
less/list-group.less
View File

@ -41,6 +41,11 @@
}
}
// Contextual variants
.list-group-item-variant(success; @state-success-bg; @state-success-border);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-border);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-border);
// Linked list items
a.list-group-item {
color: @list-group-link-color;

15
less/mixins.less
View File

@ -448,6 +448,21 @@
}
}
// List Groups
// -------------------------
.list-group-item-variant(@state; @background; @border) {
.list-group > .list-group-item.@{state} {
background-color: @background;
border-color: @border;
}
// Hover states
.list-group > .list-group-item.@{state}:hover {
background-color: darken(@background, 5%);
border-color: darken(@border, 5%);
}
}
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,