bootstrap-scss 5.2.1 → 5.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +84 -84
- package/_accordion.scss +149 -149
- package/_button-group.scss +142 -142
- package/_buttons.scss +207 -201
- package/_carousel.scss +0 -3
- package/_dropdown.scss +249 -249
- package/_functions.scss +302 -302
- package/_list-group.scss +192 -192
- package/_modal.scss +237 -237
- package/_nav.scss +172 -172
- package/_navbar.scss +278 -278
- package/_offcanvas.scss +144 -144
- package/_pagination.scss +109 -109
- package/_popover.scss +196 -196
- package/_toasts.scss +73 -71
- package/_variables.scss +1634 -1634
- package/bootstrap-utilities.scss +3 -0
- package/forms/_floating-labels.scss +75 -75
- package/forms/_input-group.scss +132 -132
- package/mixins/_banner.scss +9 -9
- package/mixins/_forms.scss +152 -152
- package/mixins/_table-variants.scss +2 -2
- package/mixins/_utilities.scss +97 -97
- package/package.json +26 -26
package/_list-group.scss
CHANGED
|
@@ -1,192 +1,192 @@
|
|
|
1
|
-
// Base class
|
|
2
|
-
//
|
|
3
|
-
// Easily usable on <ul>, <ol>, or <div>.
|
|
4
|
-
|
|
5
|
-
.list-group {
|
|
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
|
-
|
|
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;
|
|
32
|
-
@include border-radius(var(--#{$prefix}list-group-border-radius));
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.list-group-numbered {
|
|
36
|
-
list-style-type: none;
|
|
37
|
-
counter-reset: section;
|
|
38
|
-
|
|
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
|
-
|
|
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)
|
|
53
|
-
color: var(--#{$prefix}list-group-action-color);
|
|
54
|
-
text-align: inherit; // For `<button>`s (anchors inherit)
|
|
55
|
-
|
|
56
|
-
// Hover state
|
|
57
|
-
&:hover,
|
|
58
|
-
&:focus {
|
|
59
|
-
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
|
60
|
-
color: var(--#{$prefix}list-group-action-hover-color);
|
|
61
|
-
text-decoration: none;
|
|
62
|
-
background-color: var(--#{$prefix}list-group-action-hover-bg);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&:active {
|
|
66
|
-
color: var(--#{$prefix}list-group-action-active-color);
|
|
67
|
-
background-color: var(--#{$prefix}list-group-action-active-bg);
|
|
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;
|
|
78
|
-
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
|
79
|
-
color: var(--#{$prefix}list-group-color);
|
|
80
|
-
text-decoration: if($link-decoration == none, null, none);
|
|
81
|
-
background-color: var(--#{$prefix}list-group-bg);
|
|
82
|
-
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
|
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 {
|
|
94
|
-
color: var(--#{$prefix}list-group-disabled-color);
|
|
95
|
-
pointer-events: none;
|
|
96
|
-
background-color: var(--#{$prefix}list-group-disabled-bg);
|
|
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
|
|
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);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
|
108
|
-
& + .list-group-item {
|
|
109
|
-
border-top-width: 0;
|
|
110
|
-
|
|
111
|
-
&.active {
|
|
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);
|
|
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 {
|
|
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);
|
|
133
|
-
}
|
|
134
|
-
|
|
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);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
&.active {
|
|
141
|
-
margin-top: 0;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
+ .list-group-item {
|
|
145
|
-
border-top-width: var(--#{$prefix}list-group-border-width);
|
|
146
|
-
border-left-width: 0;
|
|
147
|
-
|
|
148
|
-
&.active {
|
|
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);
|
|
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 {
|
|
168
|
-
border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
|
169
|
-
|
|
170
|
-
&:last-child {
|
|
171
|
-
border-bottom-width: 0;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
// scss-docs-start list-group-modifiers
|
|
178
|
-
// List group contextual variants
|
|
179
|
-
//
|
|
180
|
-
// Add modifier classes to change text and background color on individual items.
|
|
181
|
-
// Organizationally, this must come after the `:hover` states.
|
|
182
|
-
|
|
183
|
-
@each $state, $value in $theme-colors {
|
|
184
|
-
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
|
|
185
|
-
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
|
|
186
|
-
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
|
|
187
|
-
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
|
|
191
|
-
}
|
|
192
|
-
// scss-docs-end list-group-modifiers
|
|
1
|
+
// Base class
|
|
2
|
+
//
|
|
3
|
+
// Easily usable on <ul>, <ol>, or <div>.
|
|
4
|
+
|
|
5
|
+
.list-group {
|
|
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
|
+
|
|
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;
|
|
32
|
+
@include border-radius(var(--#{$prefix}list-group-border-radius));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.list-group-numbered {
|
|
36
|
+
list-style-type: none;
|
|
37
|
+
counter-reset: section;
|
|
38
|
+
|
|
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
|
+
|
|
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)
|
|
53
|
+
color: var(--#{$prefix}list-group-action-color);
|
|
54
|
+
text-align: inherit; // For `<button>`s (anchors inherit)
|
|
55
|
+
|
|
56
|
+
// Hover state
|
|
57
|
+
&:hover,
|
|
58
|
+
&:focus {
|
|
59
|
+
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
|
60
|
+
color: var(--#{$prefix}list-group-action-hover-color);
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
background-color: var(--#{$prefix}list-group-action-hover-bg);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:active {
|
|
66
|
+
color: var(--#{$prefix}list-group-action-active-color);
|
|
67
|
+
background-color: var(--#{$prefix}list-group-action-active-bg);
|
|
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;
|
|
78
|
+
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
|
79
|
+
color: var(--#{$prefix}list-group-color);
|
|
80
|
+
text-decoration: if($link-decoration == none, null, none);
|
|
81
|
+
background-color: var(--#{$prefix}list-group-bg);
|
|
82
|
+
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
|
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 {
|
|
94
|
+
color: var(--#{$prefix}list-group-disabled-color);
|
|
95
|
+
pointer-events: none;
|
|
96
|
+
background-color: var(--#{$prefix}list-group-disabled-bg);
|
|
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
|
|
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);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
|
108
|
+
& + .list-group-item {
|
|
109
|
+
border-top-width: 0;
|
|
110
|
+
|
|
111
|
+
&.active {
|
|
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);
|
|
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 {
|
|
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);
|
|
133
|
+
}
|
|
134
|
+
|
|
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);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.active {
|
|
141
|
+
margin-top: 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
+ .list-group-item {
|
|
145
|
+
border-top-width: var(--#{$prefix}list-group-border-width);
|
|
146
|
+
border-left-width: 0;
|
|
147
|
+
|
|
148
|
+
&.active {
|
|
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);
|
|
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 {
|
|
168
|
+
border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
|
169
|
+
|
|
170
|
+
&:last-child {
|
|
171
|
+
border-bottom-width: 0;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
// scss-docs-start list-group-modifiers
|
|
178
|
+
// List group contextual variants
|
|
179
|
+
//
|
|
180
|
+
// Add modifier classes to change text and background color on individual items.
|
|
181
|
+
// Organizationally, this must come after the `:hover` states.
|
|
182
|
+
|
|
183
|
+
@each $state, $value in $theme-colors {
|
|
184
|
+
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
|
|
185
|
+
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
|
|
186
|
+
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
|
|
187
|
+
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
|
|
191
|
+
}
|
|
192
|
+
// scss-docs-end list-group-modifiers
|