| 1 |
efrain |
1 |
// Base class
|
|
|
2 |
//
|
|
|
3 |
// Easily usable on <ul>, <ol>, or <div>.
|
|
|
4 |
|
|
|
5 |
.list-group {
|
| 1441 |
ariadna |
6 |
// scss-docs-start list-group-css-vars
|
|
|
7 |
--#{$prefix}list-group-color: #{$list-group-color};
|
|
|
8 |
--#{$prefix}list-group-bg: #{$list-group-bg};
|
|
|
9 |
--#{$prefix}list-group-border-color: #{$list-group-border-color};
|
|
|
10 |
--#{$prefix}list-group-border-width: #{$list-group-border-width};
|
|
|
11 |
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
|
|
|
12 |
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
|
|
|
13 |
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
|
|
|
14 |
--#{$prefix}list-group-action-color: #{$list-group-action-color};
|
|
|
15 |
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
|
|
|
16 |
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
|
|
|
17 |
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
|
|
|
18 |
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
|
|
|
19 |
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
|
|
|
20 |
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
|
|
|
21 |
--#{$prefix}list-group-active-color: #{$list-group-active-color};
|
|
|
22 |
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
|
|
|
23 |
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
|
|
|
24 |
// scss-docs-end list-group-css-vars
|
|
|
25 |
|
| 1 |
efrain |
26 |
display: flex;
|
|
|
27 |
flex-direction: column;
|
|
|
28 |
|
|
|
29 |
// No need to set list-style: none; since .list-group-item is block level
|
|
|
30 |
padding-left: 0; // reset padding because ul and ol
|
|
|
31 |
margin-bottom: 0;
|
| 1441 |
ariadna |
32 |
@include border-radius(var(--#{$prefix}list-group-border-radius));
|
| 1 |
efrain |
33 |
}
|
|
|
34 |
|
| 1441 |
ariadna |
35 |
.list-group-numbered {
|
|
|
36 |
list-style-type: none;
|
|
|
37 |
counter-reset: section;
|
| 1 |
efrain |
38 |
|
| 1441 |
ariadna |
39 |
> .list-group-item::before {
|
|
|
40 |
// Increments only this instance of the section counter
|
|
|
41 |
content: counters(section, ".") ". ";
|
|
|
42 |
counter-increment: section;
|
|
|
43 |
}
|
|
|
44 |
}
|
|
|
45 |
|
| 1 |
efrain |
46 |
// Interactive list items
|
|
|
47 |
//
|
|
|
48 |
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
|
|
49 |
// list items. Includes an extra `.active` modifier class for selected items.
|
|
|
50 |
|
|
|
51 |
.list-group-item-action {
|
|
|
52 |
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
| 1441 |
ariadna |
53 |
color: var(--#{$prefix}list-group-action-color);
|
| 1 |
efrain |
54 |
text-align: inherit; // For `<button>`s (anchors inherit)
|
|
|
55 |
|
|
|
56 |
// Hover state
|
| 1441 |
ariadna |
57 |
&:hover,
|
|
|
58 |
&:focus {
|
| 1 |
efrain |
59 |
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
| 1441 |
ariadna |
60 |
color: var(--#{$prefix}list-group-action-hover-color);
|
| 1 |
efrain |
61 |
text-decoration: none;
|
| 1441 |
ariadna |
62 |
background-color: var(--#{$prefix}list-group-action-hover-bg);
|
| 1 |
efrain |
63 |
}
|
|
|
64 |
|
|
|
65 |
&:active {
|
| 1441 |
ariadna |
66 |
color: var(--#{$prefix}list-group-action-active-color);
|
|
|
67 |
background-color: var(--#{$prefix}list-group-action-active-bg);
|
| 1 |
efrain |
68 |
}
|
|
|
69 |
}
|
|
|
70 |
|
|
|
71 |
// Individual list items
|
|
|
72 |
//
|
|
|
73 |
// Use on `li`s or `div`s within the `.list-group` parent.
|
|
|
74 |
|
|
|
75 |
.list-group-item {
|
|
|
76 |
position: relative;
|
|
|
77 |
display: block;
|
| 1441 |
ariadna |
78 |
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
|
|
79 |
color: var(--#{$prefix}list-group-color);
|
| 1 |
efrain |
80 |
text-decoration: if($link-decoration == none, null, none);
|
| 1441 |
ariadna |
81 |
background-color: var(--#{$prefix}list-group-bg);
|
|
|
82 |
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
| 1 |
efrain |
83 |
|
|
|
84 |
&:first-child {
|
|
|
85 |
@include border-top-radius(inherit);
|
|
|
86 |
}
|
|
|
87 |
|
|
|
88 |
&:last-child {
|
|
|
89 |
@include border-bottom-radius(inherit);
|
|
|
90 |
}
|
|
|
91 |
|
|
|
92 |
&.disabled,
|
|
|
93 |
&:disabled {
|
| 1441 |
ariadna |
94 |
color: var(--#{$prefix}list-group-disabled-color);
|
| 1 |
efrain |
95 |
pointer-events: none;
|
| 1441 |
ariadna |
96 |
background-color: var(--#{$prefix}list-group-disabled-bg);
|
| 1 |
efrain |
97 |
}
|
|
|
98 |
|
|
|
99 |
// Include both here for `<a>`s and `<button>`s
|
|
|
100 |
&.active {
|
|
|
101 |
z-index: 2; // Place active items above their siblings for proper border styling
|
| 1441 |
ariadna |
102 |
color: var(--#{$prefix}list-group-active-color);
|
|
|
103 |
background-color: var(--#{$prefix}list-group-active-bg);
|
|
|
104 |
border-color: var(--#{$prefix}list-group-active-border-color);
|
| 1 |
efrain |
105 |
}
|
|
|
106 |
|
| 1441 |
ariadna |
107 |
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
|
|
108 |
& + .list-group-item {
|
| 1 |
efrain |
109 |
border-top-width: 0;
|
|
|
110 |
|
|
|
111 |
&.active {
|
| 1441 |
ariadna |
112 |
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
|
|
113 |
border-top-width: var(--#{$prefix}list-group-border-width);
|
| 1 |
efrain |
114 |
}
|
|
|
115 |
}
|
|
|
116 |
}
|
|
|
117 |
|
|
|
118 |
// Horizontal
|
|
|
119 |
//
|
|
|
120 |
// Change the layout of list group items from vertical (default) to horizontal.
|
|
|
121 |
|
|
|
122 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
123 |
@include media-breakpoint-up($breakpoint) {
|
|
|
124 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
125 |
|
|
|
126 |
.list-group-horizontal#{$infix} {
|
|
|
127 |
flex-direction: row;
|
|
|
128 |
|
|
|
129 |
> .list-group-item {
|
| 1441 |
ariadna |
130 |
&:first-child:not(:last-child) {
|
|
|
131 |
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
|
|
|
132 |
@include border-top-end-radius(0);
|
| 1 |
efrain |
133 |
}
|
|
|
134 |
|
| 1441 |
ariadna |
135 |
&:last-child:not(:first-child) {
|
|
|
136 |
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
|
|
|
137 |
@include border-bottom-start-radius(0);
|
| 1 |
efrain |
138 |
}
|
|
|
139 |
|
|
|
140 |
&.active {
|
|
|
141 |
margin-top: 0;
|
|
|
142 |
}
|
|
|
143 |
|
|
|
144 |
+ .list-group-item {
|
| 1441 |
ariadna |
145 |
border-top-width: var(--#{$prefix}list-group-border-width);
|
| 1 |
efrain |
146 |
border-left-width: 0;
|
|
|
147 |
|
|
|
148 |
&.active {
|
| 1441 |
ariadna |
149 |
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
|
|
150 |
border-left-width: var(--#{$prefix}list-group-border-width);
|
| 1 |
efrain |
151 |
}
|
|
|
152 |
}
|
|
|
153 |
}
|
|
|
154 |
}
|
|
|
155 |
}
|
|
|
156 |
}
|
|
|
157 |
|
|
|
158 |
|
|
|
159 |
// Flush list items
|
|
|
160 |
//
|
|
|
161 |
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
|
|
162 |
// useful within other components (e.g., cards).
|
|
|
163 |
|
|
|
164 |
.list-group-flush {
|
|
|
165 |
@include border-radius(0);
|
|
|
166 |
|
|
|
167 |
> .list-group-item {
|
| 1441 |
ariadna |
168 |
border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
| 1 |
efrain |
169 |
|
|
|
170 |
&:last-child {
|
|
|
171 |
border-bottom-width: 0;
|
|
|
172 |
}
|
|
|
173 |
}
|
|
|
174 |
}
|
|
|
175 |
|
|
|
176 |
|
| 1441 |
ariadna |
177 |
// scss-docs-start list-group-modifiers
|
|
|
178 |
// List group contextual variants
|
| 1 |
efrain |
179 |
//
|
|
|
180 |
// Add modifier classes to change text and background color on individual items.
|
|
|
181 |
// Organizationally, this must come after the `:hover` states.
|
|
|
182 |
|
| 1441 |
ariadna |
183 |
@each $state in map-keys($theme-colors) {
|
|
|
184 |
.list-group-item-#{$state} {
|
|
|
185 |
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
|
|
186 |
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
|
|
187 |
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
|
|
188 |
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
|
|
|
189 |
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
|
|
|
190 |
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
|
|
|
191 |
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
|
|
|
192 |
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
|
|
|
193 |
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
|
|
|
194 |
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
|
|
|
195 |
}
|
| 1 |
efrain |
196 |
}
|
| 1441 |
ariadna |
197 |
// scss-docs-end list-group-modifiers
|