| author | stetrabby <info@trabucchi.de> |
| Fri, 20 Dec 2013 22:49:16 +0100 | |
| changeset 54 | 0ded9d7748b7 |
| permissions | -rwxr-xr-x |
| info@54 | 1 |
// |
| info@54 | 2 |
// List groups |
| info@54 | 3 |
// -------------------------------------------------- |
| info@54 | 4 |
|
| info@54 | 5 |
// Base class |
| info@54 | 6 |
// |
| info@54 | 7 |
// Easily usable on <ul>, <ol>, or <div>. |
| info@54 | 8 |
.list-group {
|
| info@54 | 9 |
// No need to set list-style: none; since .list-group-item is block level |
| info@54 | 10 |
margin-bottom: 20px; |
| info@54 | 11 |
padding-left: 0; // reset padding because ul and ol |
| info@54 | 12 |
} |
| info@54 | 13 |
|
| info@54 | 14 |
// Individual list items |
| info@54 | 15 |
// ------------------------- |
| info@54 | 16 |
|
| info@54 | 17 |
.list-group-item {
|
| info@54 | 18 |
position: relative; |
| info@54 | 19 |
display: block; |
| info@54 | 20 |
padding: 10px 15px; |
| info@54 | 21 |
// Place the border on the list items and negative margin up for better styling |
| info@54 | 22 |
margin-bottom: -1px; |
| info@54 | 23 |
background-color: @list-group-bg; |
| info@54 | 24 |
border: 1px solid @list-group-border; |
| info@54 | 25 |
|
| info@54 | 26 |
// Round the first and last items |
| info@54 | 27 |
&:first-child {
|
| info@54 | 28 |
.border-top-radius(@list-group-border-radius); |
| info@54 | 29 |
} |
| info@54 | 30 |
&:last-child {
|
| info@54 | 31 |
margin-bottom: 0; |
| info@54 | 32 |
.border-bottom-radius(@list-group-border-radius); |
| info@54 | 33 |
} |
| info@54 | 34 |
|
| info@54 | 35 |
// Align badges within list items |
| info@54 | 36 |
> .badge {
|
| info@54 | 37 |
float: right; |
| info@54 | 38 |
} |
| info@54 | 39 |
> .badge + .badge {
|
| info@54 | 40 |
margin-right: 5px; |
| info@54 | 41 |
} |
| info@54 | 42 |
} |
| info@54 | 43 |
|
| info@54 | 44 |
// Linked list items |
| info@54 | 45 |
a.list-group-item {
|
| info@54 | 46 |
color: @list-group-link-color; |
| info@54 | 47 |
|
| info@54 | 48 |
.list-group-item-heading {
|
| info@54 | 49 |
color: @list-group-link-heading-color; |
| info@54 | 50 |
} |
| info@54 | 51 |
|
| info@54 | 52 |
// Hover state |
| info@54 | 53 |
&:hover, |
| info@54 | 54 |
&:focus {
|
| info@54 | 55 |
text-decoration: none; |
| info@54 | 56 |
background-color: @list-group-hover-bg; |
| info@54 | 57 |
} |
| info@54 | 58 |
|
| info@54 | 59 |
// Active class on item itself, not parent |
| info@54 | 60 |
&.active, |
| info@54 | 61 |
&.active:hover, |
| info@54 | 62 |
&.active:focus {
|
| info@54 | 63 |
z-index: 2; // Place active items above their siblings for proper border styling |
| info@54 | 64 |
color: @list-group-active-color; |
| info@54 | 65 |
background-color: @list-group-active-bg; |
| info@54 | 66 |
border-color: @list-group-active-border; |
| info@54 | 67 |
|
| info@54 | 68 |
// Force color to inherit for custom content |
| info@54 | 69 |
.list-group-item-heading {
|
| info@54 | 70 |
color: inherit; |
| info@54 | 71 |
} |
| info@54 | 72 |
.list-group-item-text {
|
| info@54 | 73 |
color: lighten(@list-group-active-bg, 40%); |
| info@54 | 74 |
} |
| info@54 | 75 |
} |
| info@54 | 76 |
} |
| info@54 | 77 |
|
| info@54 | 78 |
// Custom content options |
| info@54 | 79 |
// ------------------------- |
| info@54 | 80 |
|
| info@54 | 81 |
.list-group-item-heading {
|
| info@54 | 82 |
margin-top: 0; |
| info@54 | 83 |
margin-bottom: 5px; |
| info@54 | 84 |
} |
| info@54 | 85 |
.list-group-item-text {
|
| info@54 | 86 |
margin-bottom: 0; |
| info@54 | 87 |
line-height: 1.3; |
| info@54 | 88 |
} |