1//
2// List groups
3// --------------------------------------------------
4
5
6// Base class
7//
8// Easily usable on <ul>, <ol>, or <div>.
9
10.list-group {
11  // No need to set list-style: none; since .list-group-item is block level
12  margin-bottom: 20px;
13  padding-left: 0; // reset padding because ul and ol
14}
15
16
17// Individual list items
18//
19// Use on `li`s or `div`s within the `.list-group` parent.
20
21.list-group-item {
22  position: relative;
23  display: block;
24  padding: 10px 15px;
25  // Place the border on the list items and negative margin up for better styling
26  margin-bottom: -1px;
27  background-color: @list-group-bg;
28  border: 1px solid @list-group-border;
29
30  // Round the first and last items
31  &:first-child {
32    .border-top-radius(@list-group-border-radius);
33  }
34  &:last-child {
35    margin-bottom: 0;
36    .border-bottom-radius(@list-group-border-radius);
37  }
38}
39
40
41// Linked list items
42//
43// Use anchor elements instead of `li`s or `div`s to create linked list items.
44// Includes an extra `.active` modifier class for showing selected items.
45
46a.list-group-item {
47  color: @list-group-link-color;
48
49  .list-group-item-heading {
50    color: @list-group-link-heading-color;
51  }
52
53  // Hover state
54  &:hover,
55  &:focus {
56    text-decoration: none;
57    color: @list-group-link-hover-color;
58    background-color: @list-group-hover-bg;
59  }
60}
61
62.list-group-item {
63  // Disabled state
64  &.disabled,
65  &.disabled:hover,
66  &.disabled:focus {
67    background-color: @list-group-disabled-bg;
68    color: @list-group-disabled-color;
69    cursor: @cursor-disabled;
70
71    // Force color to inherit for custom content
72    .list-group-item-heading {
73      color: inherit;
74    }
75    .list-group-item-text {
76      color: @list-group-disabled-text-color;
77    }
78  }
79
80  // Active class on item itself, not parent
81  &.active,
82  &.active:hover,
83  &.active:focus {
84    z-index: 2; // Place active items above their siblings for proper border styling
85    color: @list-group-active-color;
86    background-color: @list-group-active-bg;
87    border-color: @list-group-active-border;
88
89    // Force color to inherit for custom content
90    .list-group-item-heading,
91    .list-group-item-heading > small,
92    .list-group-item-heading > .small {
93      color: inherit;
94    }
95    .list-group-item-text {
96      color: @list-group-active-text-color;
97    }
98  }
99}
100
101
102// Contextual variants
103//
104// Add modifier classes to change text and background color on individual items.
105// Organizationally, this must come after the `:hover` states.
106
107.list-group-item-variant(success; @state-success-bg; @state-success-text);
108.list-group-item-variant(info; @state-info-bg; @state-info-text);
109.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
110.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
111
112
113// Custom content options
114//
115// Extra classes for creating well-formatted content within `.list-group-item`s.
116
117.list-group-item-heading {
118  margin-top: 0;
119  margin-bottom: 5px;
120}
121.list-group-item-text {
122  margin-bottom: 0;
123  line-height: 1.3;
124}
125