Commit | Line | Data |
---|---|---|
7b869721 S |
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 | } |