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