bootstrap-scss 5.1.1 → 5.2.0

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.
Files changed (87) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +146 -118
  4. package/_alert.scss +71 -57
  5. package/_badge.scss +38 -29
  6. package/_breadcrumb.scss +40 -28
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +186 -111
  9. package/_card.scss +234 -216
  10. package/_carousel.scss +229 -229
  11. package/_close.scss +40 -40
  12. package/_containers.scss +41 -41
  13. package/_dropdown.scss +248 -240
  14. package/_forms.scss +9 -9
  15. package/_functions.scss +302 -302
  16. package/_grid.scss +33 -33
  17. package/_helpers.scss +10 -9
  18. package/_list-group.scss +191 -174
  19. package/_maps.scss +54 -0
  20. package/_mixins.scss +43 -43
  21. package/_modal.scss +237 -209
  22. package/_nav.scss +172 -139
  23. package/_navbar.scss +276 -335
  24. package/_offcanvas.scss +143 -83
  25. package/_pagination.scss +109 -64
  26. package/_placeholders.scss +51 -51
  27. package/_popover.scss +196 -158
  28. package/_progress.scss +59 -48
  29. package/_reboot.scss +610 -625
  30. package/_root.scss +73 -54
  31. package/_spinners.scss +85 -69
  32. package/_tables.scss +164 -151
  33. package/_toasts.scss +70 -51
  34. package/_tooltip.scss +120 -115
  35. package/_transitions.scss +27 -27
  36. package/_type.scss +106 -104
  37. package/_utilities.scss +647 -630
  38. package/_variables.scss +1633 -1639
  39. package/bootstrap-grid.scss +64 -67
  40. package/bootstrap-reboot.scss +9 -13
  41. package/bootstrap-utilities.scss +15 -18
  42. package/bootstrap.scss +51 -53
  43. package/forms/_floating-labels.scss +74 -63
  44. package/forms/_form-check.scss +175 -152
  45. package/forms/_form-control.scss +194 -219
  46. package/forms/_form-range.scss +91 -91
  47. package/forms/_form-select.scss +71 -70
  48. package/forms/_form-text.scss +11 -11
  49. package/forms/_input-group.scss +129 -121
  50. package/forms/_labels.scss +36 -36
  51. package/forms/_validation.scss +12 -12
  52. package/helpers/_clearfix.scss +3 -3
  53. package/helpers/_color-bg.scss +10 -0
  54. package/helpers/_colored-links.scss +12 -12
  55. package/helpers/_position.scss +36 -30
  56. package/helpers/_ratio.scss +26 -26
  57. package/helpers/_stacks.scss +15 -15
  58. package/helpers/_stretched-link.scss +15 -15
  59. package/helpers/_text-truncation.scss +7 -7
  60. package/helpers/_visually-hidden.scss +8 -8
  61. package/helpers/_vr.scss +8 -8
  62. package/mixins/_alert.scss +15 -11
  63. package/mixins/_backdrop.scss +14 -14
  64. package/mixins/_banner.scss +9 -0
  65. package/mixins/_border-radius.scss +78 -78
  66. package/mixins/_box-shadow.scss +18 -18
  67. package/mixins/_breakpoints.scss +127 -127
  68. package/mixins/_buttons.scss +70 -133
  69. package/mixins/_caret.scss +64 -64
  70. package/mixins/_clearfix.scss +9 -9
  71. package/mixins/_color-scheme.scss +7 -7
  72. package/mixins/_container.scss +11 -9
  73. package/mixins/_forms.scss +152 -144
  74. package/mixins/_gradients.scss +47 -47
  75. package/mixins/_grid.scss +151 -150
  76. package/mixins/_image.scss +16 -16
  77. package/mixins/_list-group.scss +24 -24
  78. package/mixins/_lists.scss +7 -7
  79. package/mixins/_pagination.scss +10 -31
  80. package/mixins/_reset-text.scss +17 -17
  81. package/mixins/_table-variants.scss +24 -21
  82. package/mixins/_transition.scss +26 -26
  83. package/mixins/_utilities.scss +97 -89
  84. package/mixins/_visually-hidden.scss +29 -29
  85. package/package.json +1 -1
  86. package/utilities/_api.scss +47 -47
  87. package/vendor/_rfs.scss +354 -354
package/_dropdown.scss CHANGED
@@ -1,240 +1,248 @@
1
- // The dropdown wrapper (`<div>`)
2
- .dropup,
3
- .dropend,
4
- .dropdown,
5
- .dropstart {
6
- position: relative;
7
- }
8
-
9
- .dropdown-toggle {
10
- white-space: nowrap;
11
-
12
- // Generate the caret automatically
13
- @include caret();
14
- }
15
-
16
- // The dropdown menu
17
- .dropdown-menu {
18
- position: absolute;
19
- z-index: $zindex-dropdown;
20
- display: none; // none by default, but block on "open" of the menu
21
- min-width: $dropdown-min-width;
22
- padding: $dropdown-padding-y $dropdown-padding-x;
23
- margin: 0; // Override default margin of ul
24
- @include font-size($dropdown-font-size);
25
- color: $dropdown-color;
26
- text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
27
- list-style: none;
28
- background-color: $dropdown-bg;
29
- background-clip: padding-box;
30
- border: $dropdown-border-width solid $dropdown-border-color;
31
- @include border-radius($dropdown-border-radius);
32
- @include box-shadow($dropdown-box-shadow);
33
-
34
- &[data-bs-popper] {
35
- top: 100%;
36
- left: 0;
37
- margin-top: $dropdown-spacer;
38
- }
39
- }
40
-
41
- // scss-docs-start responsive-breakpoints
42
- // We deliberately hardcode the `bs-` prefix because we check
43
- // this custom property in JS to determine Popper's positioning
44
-
45
- @each $breakpoint in map-keys($grid-breakpoints) {
46
- @include media-breakpoint-up($breakpoint) {
47
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
48
-
49
- .dropdown-menu#{$infix}-start {
50
- --bs-position: start;
51
-
52
- &[data-bs-popper] {
53
- right: auto;
54
- left: 0;
55
- }
56
- }
57
-
58
- .dropdown-menu#{$infix}-end {
59
- --bs-position: end;
60
-
61
- &[data-bs-popper] {
62
- right: 0;
63
- left: auto;
64
- }
65
- }
66
- }
67
- }
68
- // scss-docs-end responsive-breakpoints
69
-
70
- // Allow for dropdowns to go bottom up (aka, dropup-menu)
71
- // Just add .dropup after the standard .dropdown class and you're set.
72
- .dropup {
73
- .dropdown-menu[data-bs-popper] {
74
- top: auto;
75
- bottom: 100%;
76
- margin-top: 0;
77
- margin-bottom: $dropdown-spacer;
78
- }
79
-
80
- .dropdown-toggle {
81
- @include caret(up);
82
- }
83
- }
84
-
85
- .dropend {
86
- .dropdown-menu[data-bs-popper] {
87
- top: 0;
88
- right: auto;
89
- left: 100%;
90
- margin-top: 0;
91
- margin-left: $dropdown-spacer;
92
- }
93
-
94
- .dropdown-toggle {
95
- @include caret(end);
96
- &::after {
97
- vertical-align: 0;
98
- }
99
- }
100
- }
101
-
102
- .dropstart {
103
- .dropdown-menu[data-bs-popper] {
104
- top: 0;
105
- right: 100%;
106
- left: auto;
107
- margin-top: 0;
108
- margin-right: $dropdown-spacer;
109
- }
110
-
111
- .dropdown-toggle {
112
- @include caret(start);
113
- &::before {
114
- vertical-align: 0;
115
- }
116
- }
117
- }
118
-
119
-
120
- // Dividers (basically an `<hr>`) within the dropdown
121
- .dropdown-divider {
122
- height: 0;
123
- margin: $dropdown-divider-margin-y 0;
124
- overflow: hidden;
125
- border-top: 1px solid $dropdown-divider-bg;
126
- }
127
-
128
- // Links, buttons, and more within the dropdown menu
129
- //
130
- // `<button>`-specific styles are denoted with `// For <button>s`
131
- .dropdown-item {
132
- display: block;
133
- width: 100%; // For `<button>`s
134
- padding: $dropdown-item-padding-y $dropdown-item-padding-x;
135
- clear: both;
136
- font-weight: $font-weight-normal;
137
- color: $dropdown-link-color;
138
- text-align: inherit; // For `<button>`s
139
- text-decoration: if($link-decoration == none, null, none);
140
- white-space: nowrap; // prevent links from randomly breaking onto new lines
141
- background-color: transparent; // For `<button>`s
142
- border: 0; // For `<button>`s
143
-
144
- // Prevent dropdown overflow if there's no padding
145
- // See https://github.com/twbs/bootstrap/pull/27703
146
- @if $dropdown-padding-y == 0 {
147
- &:first-child {
148
- @include border-top-radius($dropdown-inner-border-radius);
149
- }
150
-
151
- &:last-child {
152
- @include border-bottom-radius($dropdown-inner-border-radius);
153
- }
154
- }
155
-
156
- &:hover,
157
- &:focus {
158
- color: $dropdown-link-hover-color;
159
- text-decoration: if($link-hover-decoration == underline, none, null);
160
- @include gradient-bg($dropdown-link-hover-bg);
161
- }
162
-
163
- &.active,
164
- &:active {
165
- color: $dropdown-link-active-color;
166
- text-decoration: none;
167
- @include gradient-bg($dropdown-link-active-bg);
168
- }
169
-
170
- &.disabled,
171
- &:disabled {
172
- color: $dropdown-link-disabled-color;
173
- pointer-events: none;
174
- background-color: transparent;
175
- // Remove CSS gradients if they're enabled
176
- background-image: if($enable-gradients, none, null);
177
- }
178
- }
179
-
180
- .dropdown-menu.show {
181
- display: block;
182
- }
183
-
184
- // Dropdown section headers
185
- .dropdown-header {
186
- display: block;
187
- padding: $dropdown-header-padding;
188
- margin-bottom: 0; // for use with heading elements
189
- @include font-size($font-size-sm);
190
- color: $dropdown-header-color;
191
- white-space: nowrap; // as with > li > a
192
- }
193
-
194
- // Dropdown text
195
- .dropdown-item-text {
196
- display: block;
197
- padding: $dropdown-item-padding-y $dropdown-item-padding-x;
198
- color: $dropdown-link-color;
199
- }
200
-
201
- // Dark dropdowns
202
- .dropdown-menu-dark {
203
- color: $dropdown-dark-color;
204
- background-color: $dropdown-dark-bg;
205
- border-color: $dropdown-dark-border-color;
206
- @include box-shadow($dropdown-dark-box-shadow);
207
-
208
- .dropdown-item {
209
- color: $dropdown-dark-link-color;
210
-
211
- &:hover,
212
- &:focus {
213
- color: $dropdown-dark-link-hover-color;
214
- @include gradient-bg($dropdown-dark-link-hover-bg);
215
- }
216
-
217
- &.active,
218
- &:active {
219
- color: $dropdown-dark-link-active-color;
220
- @include gradient-bg($dropdown-dark-link-active-bg);
221
- }
222
-
223
- &.disabled,
224
- &:disabled {
225
- color: $dropdown-dark-link-disabled-color;
226
- }
227
- }
228
-
229
- .dropdown-divider {
230
- border-color: $dropdown-dark-divider-bg;
231
- }
232
-
233
- .dropdown-item-text {
234
- color: $dropdown-dark-link-color;
235
- }
236
-
237
- .dropdown-header {
238
- color: $dropdown-dark-header-color;
239
- }
240
- }
1
+ // The dropdown wrapper (`<div>`)
2
+ .dropup,
3
+ .dropend,
4
+ .dropdown,
5
+ .dropstart,
6
+ .dropup-center,
7
+ .dropdown-center {
8
+ position: relative;
9
+ }
10
+
11
+ .dropdown-toggle {
12
+ white-space: nowrap;
13
+
14
+ // Generate the caret automatically
15
+ @include caret();
16
+ }
17
+
18
+ // The dropdown menu
19
+ .dropdown-menu {
20
+ // scss-docs-start dropdown-css-vars
21
+ --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
22
+ --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
23
+ --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
24
+ --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
25
+ @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
26
+ --#{$prefix}dropdown-color: #{$dropdown-color};
27
+ --#{$prefix}dropdown-bg: #{$dropdown-bg};
28
+ --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
29
+ --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
30
+ --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
31
+ --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
32
+ --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
33
+ --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
34
+ --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
35
+ --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
36
+ --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
37
+ --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
38
+ --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
39
+ --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
40
+ --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
41
+ --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
42
+ --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
43
+ --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
44
+ --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
45
+ --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
46
+ // scss-docs-end dropdown-css-vars
47
+
48
+ position: absolute;
49
+ z-index: $zindex-dropdown;
50
+ display: none; // none by default, but block on "open" of the menu
51
+ min-width: var(--#{$prefix}dropdown-min-width);
52
+ padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
53
+ margin: 0; // Override default margin of ul
54
+ @include font-size(var(--#{$prefix}dropdown-font-size));
55
+ color: var(--#{$prefix}dropdown-color);
56
+ text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
57
+ list-style: none;
58
+ background-color: var(--#{$prefix}dropdown-bg);
59
+ background-clip: padding-box;
60
+ border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
61
+ @include border-radius(var(--#{$prefix}dropdown-border-radius));
62
+ @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
63
+
64
+ &[data-bs-popper] {
65
+ top: 100%;
66
+ left: 0;
67
+ margin-top: var(--#{$prefix}dropdown-spacer);
68
+ }
69
+
70
+ @if $dropdown-padding-y == 0 {
71
+ > .dropdown-item:first-child,
72
+ > li:first-child .dropdown-item {
73
+ @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
74
+ }
75
+ > .dropdown-item:last-child,
76
+ > li:last-child .dropdown-item {
77
+ @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
78
+ }
79
+
80
+ }
81
+ }
82
+
83
+ // scss-docs-start responsive-breakpoints
84
+ // We deliberately hardcode the `bs-` prefix because we check
85
+ // this custom property in JS to determine Popper's positioning
86
+
87
+ @each $breakpoint in map-keys($grid-breakpoints) {
88
+ @include media-breakpoint-up($breakpoint) {
89
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
90
+
91
+ .dropdown-menu#{$infix}-start {
92
+ --bs-position: start;
93
+
94
+ &[data-bs-popper] {
95
+ right: auto;
96
+ left: 0;
97
+ }
98
+ }
99
+
100
+ .dropdown-menu#{$infix}-end {
101
+ --bs-position: end;
102
+
103
+ &[data-bs-popper] {
104
+ right: 0;
105
+ left: auto;
106
+ }
107
+ }
108
+ }
109
+ }
110
+ // scss-docs-end responsive-breakpoints
111
+
112
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
113
+ // Just add .dropup after the standard .dropdown class and you're set.
114
+ .dropup {
115
+ .dropdown-menu[data-bs-popper] {
116
+ top: auto;
117
+ bottom: 100%;
118
+ margin-top: 0;
119
+ margin-bottom: var(--#{$prefix}dropdown-spacer);
120
+ }
121
+
122
+ .dropdown-toggle {
123
+ @include caret(up);
124
+ }
125
+ }
126
+
127
+ .dropend {
128
+ .dropdown-menu[data-bs-popper] {
129
+ top: 0;
130
+ right: auto;
131
+ left: 100%;
132
+ margin-top: 0;
133
+ margin-left: var(--#{$prefix}dropdown-spacer);
134
+ }
135
+
136
+ .dropdown-toggle {
137
+ @include caret(end);
138
+ &::after {
139
+ vertical-align: 0;
140
+ }
141
+ }
142
+ }
143
+
144
+ .dropstart {
145
+ .dropdown-menu[data-bs-popper] {
146
+ top: 0;
147
+ right: 100%;
148
+ left: auto;
149
+ margin-top: 0;
150
+ margin-right: var(--#{$prefix}dropdown-spacer);
151
+ }
152
+
153
+ .dropdown-toggle {
154
+ @include caret(start);
155
+ &::before {
156
+ vertical-align: 0;
157
+ }
158
+ }
159
+ }
160
+
161
+
162
+ // Dividers (basically an `<hr>`) within the dropdown
163
+ .dropdown-divider {
164
+ height: 0;
165
+ margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
166
+ overflow: hidden;
167
+ border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
168
+ opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
169
+ }
170
+
171
+ // Links, buttons, and more within the dropdown menu
172
+ //
173
+ // `<button>`-specific styles are denoted with `// For <button>s`
174
+ .dropdown-item {
175
+ display: block;
176
+ width: 100%; // For `<button>`s
177
+ padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
178
+ clear: both;
179
+ font-weight: $font-weight-normal;
180
+ color: var(--#{$prefix}dropdown-link-color);
181
+ text-align: inherit; // For `<button>`s
182
+ text-decoration: if($link-decoration == none, null, none);
183
+ white-space: nowrap; // prevent links from randomly breaking onto new lines
184
+ background-color: transparent; // For `<button>`s
185
+ border: 0; // For `<button>`s
186
+
187
+ &:hover,
188
+ &:focus {
189
+ color: var(--#{$prefix}dropdown-link-hover-color);
190
+ text-decoration: if($link-hover-decoration == underline, none, null);
191
+ @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
192
+ }
193
+
194
+ &.active,
195
+ &:active {
196
+ color: var(--#{$prefix}dropdown-link-active-color);
197
+ text-decoration: none;
198
+ @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
199
+ }
200
+
201
+ &.disabled,
202
+ &:disabled {
203
+ color: var(--#{$prefix}dropdown-link-disabled-color);
204
+ pointer-events: none;
205
+ background-color: transparent;
206
+ // Remove CSS gradients if they're enabled
207
+ background-image: if($enable-gradients, none, null);
208
+ }
209
+ }
210
+
211
+ .dropdown-menu.show {
212
+ display: block;
213
+ }
214
+
215
+ // Dropdown section headers
216
+ .dropdown-header {
217
+ display: block;
218
+ padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
219
+ margin-bottom: 0; // for use with heading elements
220
+ @include font-size($font-size-sm);
221
+ color: var(--#{$prefix}dropdown-header-color);
222
+ white-space: nowrap; // as with > li > a
223
+ }
224
+
225
+ // Dropdown text
226
+ .dropdown-item-text {
227
+ display: block;
228
+ padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
229
+ color: var(--#{$prefix}dropdown-link-color);
230
+ }
231
+
232
+ // Dark dropdowns
233
+ .dropdown-menu-dark {
234
+ // scss-docs-start dropdown-dark-css-vars
235
+ --#{$prefix}dropdown-color: #{$dropdown-dark-color};
236
+ --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
237
+ --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
238
+ --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
239
+ --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
240
+ --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
241
+ --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
242
+ --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
243
+ --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
244
+ --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
245
+ --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
246
+ --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
247
+ // scss-docs-end dropdown-dark-css-vars
248
+ }
package/_forms.scss CHANGED
@@ -1,9 +1,9 @@
1
- @import "forms/labels";
2
- @import "forms/form-text";
3
- @import "forms/form-control";
4
- @import "forms/form-select";
5
- @import "forms/form-check";
6
- @import "forms/form-range";
7
- @import "forms/floating-labels";
8
- @import "forms/input-group";
9
- @import "forms/validation";
1
+ @import "forms/labels";
2
+ @import "forms/form-text";
3
+ @import "forms/form-control";
4
+ @import "forms/form-select";
5
+ @import "forms/form-check";
6
+ @import "forms/form-range";
7
+ @import "forms/floating-labels";
8
+ @import "forms/input-group";
9
+ @import "forms/validation";