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/_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