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  padding-left: 0; // reset padding because ul and ol
13  margin-bottom: 20px;
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    @include border-top-radius($list-group-border-radius);
33  }
34  &:last-child {
35    margin-bottom: 0;
36    @include border-bottom-radius($list-group-border-radius);
37  }
38
39  // Disabled state
40  &.disabled,
41  &.disabled:hover,
42  &.disabled:focus {
43    color: $list-group-disabled-color;
44    cursor: $cursor-disabled;
45    background-color: $list-group-disabled-bg;
46
47    // Force color to inherit for custom content
48    .list-group-item-heading {
49      color: inherit;
50    }
51    .list-group-item-text {
52      color: $list-group-disabled-text-color;
53    }
54  }
55
56  // Active class on item itself, not parent
57  &.active,
58  &.active:hover,
59  &.active:focus {
60    z-index: 2; // Place active items above their siblings for proper border styling
61    color: $list-group-active-color;
62    background-color: $list-group-active-bg;
63    border-color: $list-group-active-border;
64
65    // Force color to inherit for custom content
66    .list-group-item-heading,
67    .list-group-item-heading > small,
68    .list-group-item-heading > .small {
69      color: inherit;
70    }
71    .list-group-item-text {
72      color: $list-group-active-text-color;
73    }
74  }
75}
76
77
78// Interactive list items
79//
80// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
81// Includes an extra `.active` modifier class for showing selected items.
82
83a.list-group-item,
84button.list-group-item {
85  color: $list-group-link-color;
86
87  .list-group-item-heading {
88    color: $list-group-link-heading-color;
89  }
90
91  // Hover state
92  &:hover,
93  &:focus {
94    color: $list-group-link-hover-color;
95    text-decoration: none;
96    background-color: $list-group-hover-bg;
97  }
98}
99
100button.list-group-item {
101  width: 100%;
102  text-align: left;
103}
104
105
106// Contextual variants
107//
108// Add modifier classes to change text and background color on individual items.
109// Organizationally, this must come after the `:hover` states.
110
111@include list-group-item-variant(success, $state-success-bg, $state-success-text);
112@include list-group-item-variant(info, $state-info-bg, $state-info-text);
113@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
114@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
115
116
117// Custom content options
118//
119// Extra classes for creating well-formatted content within `.list-group-item`s.
120
121.list-group-item-heading {
122  margin-top: 0;
123  margin-bottom: 5px;
124}
125.list-group-item-text {
126  margin-bottom: 0;
127  line-height: 1.3;
128}
129