|
0
|
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 }
|
|
|
13
|
|
|
14
|
|
|
15 // Interactive list items
|
|
|
16 //
|
|
|
17 // Use anchor or button elements instead of `li`s or `div`s to create interactive
|
|
|
18 // list items. Includes an extra `.active` modifier class for selected items.
|
|
|
19
|
|
|
20 .list-group-item-action {
|
|
|
21 width: 100%; // For `<button>`s (anchors become 100% by default though)
|
|
|
22 color: $list-group-action-color;
|
|
|
23 text-align: inherit; // For `<button>`s (anchors inherit)
|
|
|
24
|
|
|
25 // Hover state
|
|
|
26 @include hover-focus {
|
|
|
27 color: $list-group-action-hover-color;
|
|
|
28 text-decoration: none;
|
|
|
29 background-color: $list-group-hover-bg;
|
|
|
30 }
|
|
|
31
|
|
|
32 &:active {
|
|
|
33 color: $list-group-action-active-color;
|
|
|
34 background-color: $list-group-action-active-bg;
|
|
|
35 }
|
|
|
36 }
|
|
|
37
|
|
|
38
|
|
|
39 // Individual list items
|
|
|
40 //
|
|
|
41 // Use on `li`s or `div`s within the `.list-group` parent.
|
|
|
42
|
|
|
43 .list-group-item {
|
|
|
44 position: relative;
|
|
|
45 display: block;
|
|
|
46 padding: $list-group-item-padding-y $list-group-item-padding-x;
|
|
|
47 // Place the border on the list items and negative margin up for better styling
|
|
|
48 margin-bottom: -$list-group-border-width;
|
|
|
49 background-color: $list-group-bg;
|
|
|
50 border: $list-group-border-width solid $list-group-border-color;
|
|
|
51
|
|
|
52 &:first-child {
|
|
|
53 @include border-top-radius($list-group-border-radius);
|
|
|
54 }
|
|
|
55
|
|
|
56 &:last-child {
|
|
|
57 margin-bottom: 0;
|
|
|
58 @include border-bottom-radius($list-group-border-radius);
|
|
|
59 }
|
|
|
60
|
|
|
61 @include hover-focus {
|
|
|
62 text-decoration: none;
|
|
|
63 }
|
|
|
64
|
|
|
65 &.disabled,
|
|
|
66 &:disabled {
|
|
|
67 color: $list-group-disabled-color;
|
|
|
68 background-color: $list-group-disabled-bg;
|
|
|
69 }
|
|
|
70
|
|
|
71 // Include both here for `<a>`s and `<button>`s
|
|
|
72 &.active {
|
|
|
73 z-index: 2; // Place active items above their siblings for proper border styling
|
|
|
74 color: $list-group-active-color;
|
|
|
75 background-color: $list-group-active-bg;
|
|
|
76 border-color: $list-group-active-border-color;
|
|
|
77 }
|
|
|
78 }
|
|
|
79
|
|
|
80
|
|
|
81 // Flush list items
|
|
|
82 //
|
|
|
83 // Remove borders and border-radius to keep list group items edge-to-edge. Most
|
|
|
84 // useful within other components (e.g., cards).
|
|
|
85
|
|
|
86 .list-group-flush {
|
|
|
87 .list-group-item {
|
|
|
88 border-right: 0;
|
|
|
89 border-left: 0;
|
|
|
90 border-radius: 0;
|
|
|
91 }
|
|
|
92
|
|
|
93 &:first-child {
|
|
|
94 .list-group-item:first-child {
|
|
|
95 border-top: 0;
|
|
|
96 }
|
|
|
97 }
|
|
|
98
|
|
|
99 &:last-child {
|
|
|
100 .list-group-item:last-child {
|
|
|
101 border-bottom: 0;
|
|
|
102 }
|
|
|
103 }
|
|
|
104 }
|
|
|
105
|
|
|
106
|
|
|
107 // Contextual variants
|
|
|
108 //
|
|
|
109 // Add modifier classes to change text and background color on individual items.
|
|
|
110 // Organizationally, this must come after the `:hover` states.
|
|
|
111
|
|
|
112 @each $color, $value in $theme-colors {
|
|
|
113 @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
|
|
114 }
|
