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