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