1// Base class
2//
3// Easily usable on <ul>, <ol>, or <div>.
4
5.list-group {
6  display: flex;
7  flex-direction: column;
8
9  // No need to set list-style: none; since .list-group-item is block level
10  padding-left: 0; // reset padding because ul and ol
11  margin-bottom: 0;
12  @include border-radius($list-group-border-radius);
13}
14
15
16// Interactive list items
17//
18// Use anchor or button elements instead of `li`s or `div`s to create interactive
19// list items. Includes an extra `.active` modifier class for selected items.
20
21.list-group-item-action {
22  width: 100%; // For `<button>`s (anchors become 100% by default though)
23  color: $list-group-action-color;
24  text-align: inherit; // For `<button>`s (anchors inherit)
25
26  // Hover state
27  @include hover-focus() {
28    z-index: 1; // Place hover/focus items above their siblings for proper border styling
29    color: $list-group-action-hover-color;
30    text-decoration: none;
31    background-color: $list-group-hover-bg;
32  }
33
34  &:active {
35    color: $list-group-action-active-color;
36    background-color: $list-group-action-active-bg;
37  }
38}
39
40
41// Individual list items
42//
43// Use on `li`s or `div`s within the `.list-group` parent.
44
45.list-group-item {
46  position: relative;
47  display: block;
48  padding: $list-group-item-padding-y $list-group-item-padding-x;
49  color: $list-group-color;
50  text-decoration: if($link-decoration == none, null, none);
51  background-color: $list-group-bg;
52  border: $list-group-border-width solid $list-group-border-color;
53
54  &:first-child {
55    @include border-top-radius(inherit);
56  }
57
58  &:last-child {
59    @include border-bottom-radius(inherit);
60  }
61
62  &.disabled,
63  &:disabled {
64    color: $list-group-disabled-color;
65    pointer-events: none;
66    background-color: $list-group-disabled-bg;
67  }
68
69  // Include both here for `<a>`s and `<button>`s
70  &.active {
71    z-index: 2; // Place active items above their siblings for proper border styling
72    color: $list-group-active-color;
73    background-color: $list-group-active-bg;
74    border-color: $list-group-active-border-color;
75  }
76
77  & + & {
78    border-top-width: 0;
79
80    &.active {
81      margin-top: -$list-group-border-width;
82      border-top-width: $list-group-border-width;
83    }
84  }
85}
86
87
88// Horizontal
89//
90// Change the layout of list group items from vertical (default) to horizontal.
91
92@each $breakpoint in map-keys($grid-breakpoints) {
93  @include media-breakpoint-up($breakpoint) {
94    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
95
96    .list-group-horizontal#{$infix} {
97      flex-direction: row;
98
99      > .list-group-item {
100        &:first-child {
101          @include border-bottom-left-radius($list-group-border-radius);
102          @include border-top-right-radius(0);
103        }
104
105        &:last-child {
106          @include border-top-right-radius($list-group-border-radius);
107          @include border-bottom-left-radius(0);
108        }
109
110        &.active {
111          margin-top: 0;
112        }
113
114        & + .list-group-item {
115          border-top-width: $list-group-border-width;
116          border-left-width: 0;
117
118          &.active {
119            margin-left: -$list-group-border-width;
120            border-left-width: $list-group-border-width;
121          }
122        }
123      }
124    }
125  }
126}
127
128
129// Flush list items
130//
131// Remove borders and border-radius to keep list group items edge-to-edge. Most
132// useful within other components (e.g., cards).
133
134.list-group-flush {
135  @include border-radius(0);
136
137  > .list-group-item {
138    border-width: 0 0 $list-group-border-width;
139
140    &:last-child {
141      border-bottom-width: 0;
142    }
143  }
144}
145
146
147// Contextual variants
148//
149// Add modifier classes to change text and background color on individual items.
150// Organizationally, this must come after the `:hover` states.
151
152@each $color, $value in $theme-colors {
153  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
154}
155