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/_modal.scss CHANGED
@@ -1,209 +1,237 @@
1
- // .modal-open - body class for killing the scroll
2
- // .modal - container to scroll within
3
- // .modal-dialog - positioning shell for the actual modal
4
- // .modal-content - actual modal w/ bg and corners and stuff
5
-
6
-
7
- // Container that the modal scrolls within
8
- .modal {
9
- position: fixed;
10
- top: 0;
11
- left: 0;
12
- z-index: $zindex-modal;
13
- display: none;
14
- width: 100%;
15
- height: 100%;
16
- overflow-x: hidden;
17
- overflow-y: auto;
18
- // Prevent Chrome on Windows from adding a focus outline. For details, see
19
- // https://github.com/twbs/bootstrap/pull/10951.
20
- outline: 0;
21
- // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
22
- // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
23
- // See also https://github.com/twbs/bootstrap/issues/17695
24
- }
25
-
26
- // Shell div to position the modal with bottom padding
27
- .modal-dialog {
28
- position: relative;
29
- width: auto;
30
- margin: $modal-dialog-margin;
31
- // allow clicks to pass through for custom click handling to close modal
32
- pointer-events: none;
33
-
34
- // When fading in the modal, animate it to slide down
35
- .modal.fade & {
36
- @include transition($modal-transition);
37
- transform: $modal-fade-transform;
38
- }
39
- .modal.show & {
40
- transform: $modal-show-transform;
41
- }
42
-
43
- // When trying to close, animate focus to scale
44
- .modal.modal-static & {
45
- transform: $modal-scale-transform;
46
- }
47
- }
48
-
49
- .modal-dialog-scrollable {
50
- height: subtract(100%, $modal-dialog-margin * 2);
51
-
52
- .modal-content {
53
- max-height: 100%;
54
- overflow: hidden;
55
- }
56
-
57
- .modal-body {
58
- overflow-y: auto;
59
- }
60
- }
61
-
62
- .modal-dialog-centered {
63
- display: flex;
64
- align-items: center;
65
- min-height: subtract(100%, $modal-dialog-margin * 2);
66
- }
67
-
68
- // Actual modal
69
- .modal-content {
70
- position: relative;
71
- display: flex;
72
- flex-direction: column;
73
- width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
74
- // counteract the pointer-events: none; in the .modal-dialog
75
- color: $modal-content-color;
76
- pointer-events: auto;
77
- background-color: $modal-content-bg;
78
- background-clip: padding-box;
79
- border: $modal-content-border-width solid $modal-content-border-color;
80
- @include border-radius($modal-content-border-radius);
81
- @include box-shadow($modal-content-box-shadow-xs);
82
- // Remove focus outline from opened modal
83
- outline: 0;
84
- }
85
-
86
- // Modal background
87
- .modal-backdrop {
88
- @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
89
- }
90
-
91
- // Modal header
92
- // Top section of the modal w/ title and dismiss
93
- .modal-header {
94
- display: flex;
95
- flex-shrink: 0;
96
- align-items: center;
97
- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
98
- padding: $modal-header-padding;
99
- border-bottom: $modal-header-border-width solid $modal-header-border-color;
100
- @include border-top-radius($modal-content-inner-border-radius);
101
-
102
- .btn-close {
103
- padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
104
- margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
105
- }
106
- }
107
-
108
- // Title text within header
109
- .modal-title {
110
- margin-bottom: 0;
111
- line-height: $modal-title-line-height;
112
- }
113
-
114
- // Modal body
115
- // Where all modal content resides (sibling of .modal-header and .modal-footer)
116
- .modal-body {
117
- position: relative;
118
- // Enable `flex-grow: 1` so that the body take up as much space as possible
119
- // when there should be a fixed height on `.modal-dialog`.
120
- flex: 1 1 auto;
121
- padding: $modal-inner-padding;
122
- }
123
-
124
- // Footer (for actions)
125
- .modal-footer {
126
- display: flex;
127
- flex-wrap: wrap;
128
- flex-shrink: 0;
129
- align-items: center; // vertically center
130
- justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
131
- padding: $modal-inner-padding - $modal-footer-margin-between * .5;
132
- border-top: $modal-footer-border-width solid $modal-footer-border-color;
133
- @include border-bottom-radius($modal-content-inner-border-radius);
134
-
135
- // Place margin between footer elements
136
- // This solution is far from ideal because of the universal selector usage,
137
- // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
138
- > * {
139
- margin: $modal-footer-margin-between * .5;
140
- }
141
- }
142
-
143
- // Scale up the modal
144
- @include media-breakpoint-up(sm) {
145
- // Automatically set modal's width for larger viewports
146
- .modal-dialog {
147
- max-width: $modal-md;
148
- margin: $modal-dialog-margin-y-sm-up auto;
149
- }
150
-
151
- .modal-dialog-scrollable {
152
- height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
153
- }
154
-
155
- .modal-dialog-centered {
156
- min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
157
- }
158
-
159
- .modal-content {
160
- @include box-shadow($modal-content-box-shadow-sm-up);
161
- }
162
-
163
- .modal-sm { max-width: $modal-sm; }
164
- }
165
-
166
- @include media-breakpoint-up(lg) {
167
- .modal-lg,
168
- .modal-xl {
169
- max-width: $modal-lg;
170
- }
171
- }
172
-
173
- @include media-breakpoint-up(xl) {
174
- .modal-xl { max-width: $modal-xl; }
175
- }
176
-
177
- // scss-docs-start modal-fullscreen-loop
178
- @each $breakpoint in map-keys($grid-breakpoints) {
179
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
180
- $postfix: if($infix != "", $infix + "-down", "");
181
-
182
- @include media-breakpoint-down($breakpoint) {
183
- .modal-fullscreen#{$postfix} {
184
- width: 100vw;
185
- max-width: none;
186
- height: 100%;
187
- margin: 0;
188
-
189
- .modal-content {
190
- height: 100%;
191
- border: 0;
192
- @include border-radius(0);
193
- }
194
-
195
- .modal-header {
196
- @include border-radius(0);
197
- }
198
-
199
- .modal-body {
200
- overflow-y: auto;
201
- }
202
-
203
- .modal-footer {
204
- @include border-radius(0);
205
- }
206
- }
207
- }
208
- }
209
- // scss-docs-end modal-fullscreen-loop
1
+ // stylelint-disable function-disallowed-list
2
+
3
+ // .modal-open - body class for killing the scroll
4
+ // .modal - container to scroll within
5
+ // .modal-dialog - positioning shell for the actual modal
6
+ // .modal-content - actual modal w/ bg and corners and stuff
7
+
8
+
9
+ // Container that the modal scrolls within
10
+ .modal {
11
+ // scss-docs-start modal-css-vars
12
+ --#{$prefix}modal-zindex: #{$zindex-modal};
13
+ --#{$prefix}modal-width: #{$modal-md};
14
+ --#{$prefix}modal-padding: #{$modal-inner-padding};
15
+ --#{$prefix}modal-margin: #{$modal-dialog-margin};
16
+ --#{$prefix}modal-color: #{$modal-content-color};
17
+ --#{$prefix}modal-bg: #{$modal-content-bg};
18
+ --#{$prefix}modal-border-color: #{$modal-content-border-color};
19
+ --#{$prefix}modal-border-width: #{$modal-content-border-width};
20
+ --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
21
+ --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
22
+ --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
23
+ --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
24
+ --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
25
+ --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
26
+ --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
27
+ --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
28
+ --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
29
+ --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
30
+ --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
31
+ --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
32
+ --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
33
+ // scss-docs-end modal-css-vars
34
+
35
+ position: fixed;
36
+ top: 0;
37
+ left: 0;
38
+ z-index: var(--#{$prefix}modal-zindex);
39
+ display: none;
40
+ width: 100%;
41
+ height: 100%;
42
+ overflow-x: hidden;
43
+ overflow-y: auto;
44
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
45
+ // https://github.com/twbs/bootstrap/pull/10951.
46
+ outline: 0;
47
+ // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
48
+ // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
49
+ // See also https://github.com/twbs/bootstrap/issues/17695
50
+ }
51
+
52
+ // Shell div to position the modal with bottom padding
53
+ .modal-dialog {
54
+ position: relative;
55
+ width: auto;
56
+ margin: var(--#{$prefix}modal-margin);
57
+ // allow clicks to pass through for custom click handling to close modal
58
+ pointer-events: none;
59
+
60
+ // When fading in the modal, animate it to slide down
61
+ .modal.fade & {
62
+ @include transition($modal-transition);
63
+ transform: $modal-fade-transform;
64
+ }
65
+ .modal.show & {
66
+ transform: $modal-show-transform;
67
+ }
68
+
69
+ // When trying to close, animate focus to scale
70
+ .modal.modal-static & {
71
+ transform: $modal-scale-transform;
72
+ }
73
+ }
74
+
75
+ .modal-dialog-scrollable {
76
+ height: calc(100% - var(--#{$prefix}modal-margin) * 2);
77
+
78
+ .modal-content {
79
+ max-height: 100%;
80
+ overflow: hidden;
81
+ }
82
+
83
+ .modal-body {
84
+ overflow-y: auto;
85
+ }
86
+ }
87
+
88
+ .modal-dialog-centered {
89
+ display: flex;
90
+ align-items: center;
91
+ min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
92
+ }
93
+
94
+ // Actual modal
95
+ .modal-content {
96
+ position: relative;
97
+ display: flex;
98
+ flex-direction: column;
99
+ width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
100
+ // counteract the pointer-events: none; in the .modal-dialog
101
+ color: var(--#{$prefix}modal-color);
102
+ pointer-events: auto;
103
+ background-color: var(--#{$prefix}modal-bg);
104
+ background-clip: padding-box;
105
+ border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
106
+ @include border-radius(var(--#{$prefix}modal-border-radius));
107
+ @include box-shadow(var(--#{$prefix}modal-box-shadow));
108
+ // Remove focus outline from opened modal
109
+ outline: 0;
110
+ }
111
+
112
+ // Modal background
113
+ .modal-backdrop {
114
+ // scss-docs-start modal-backdrop-css-vars
115
+ --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
116
+ --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
117
+ --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
118
+ // scss-docs-end modal-backdrop-css-vars
119
+
120
+ @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
121
+ }
122
+
123
+ // Modal header
124
+ // Top section of the modal w/ title and dismiss
125
+ .modal-header {
126
+ display: flex;
127
+ flex-shrink: 0;
128
+ align-items: center;
129
+ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
130
+ padding: var(--#{$prefix}modal-header-padding);
131
+ border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
132
+ @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
133
+
134
+ .btn-close {
135
+ padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
136
+ margin: calc(var(--#{$prefix}modal-header-padding-y) * -.5) calc(var(--#{$prefix}modal-header-padding-x) * -.5) calc(var(--#{$prefix}modal-header-padding-y) * -.5) auto;
137
+ }
138
+ }
139
+
140
+ // Title text within header
141
+ .modal-title {
142
+ margin-bottom: 0;
143
+ line-height: var(--#{$prefix}modal-title-line-height);
144
+ }
145
+
146
+ // Modal body
147
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
148
+ .modal-body {
149
+ position: relative;
150
+ // Enable `flex-grow: 1` so that the body take up as much space as possible
151
+ // when there should be a fixed height on `.modal-dialog`.
152
+ flex: 1 1 auto;
153
+ padding: var(--#{$prefix}modal-padding);
154
+ }
155
+
156
+ // Footer (for actions)
157
+ .modal-footer {
158
+ display: flex;
159
+ flex-shrink: 0;
160
+ flex-wrap: wrap;
161
+ align-items: center; // vertically center
162
+ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
163
+ padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
164
+ background-color: var(--#{$prefix}modal-footer-bg);
165
+ border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
166
+ @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
167
+
168
+ // Place margin between footer elements
169
+ // This solution is far from ideal because of the universal selector usage,
170
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
171
+ > * {
172
+ margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
173
+ }
174
+ }
175
+
176
+ // Scale up the modal
177
+ @include media-breakpoint-up(sm) {
178
+ .modal {
179
+ --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
180
+ --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
181
+ }
182
+
183
+ // Automatically set modal's width for larger viewports
184
+ .modal-dialog {
185
+ max-width: var(--#{$prefix}modal-width);
186
+ margin-right: auto;
187
+ margin-left: auto;
188
+ }
189
+
190
+ .modal-sm {
191
+ --#{$prefix}modal-width: #{$modal-sm};
192
+ }
193
+ }
194
+
195
+ @include media-breakpoint-up(lg) {
196
+ .modal-lg,
197
+ .modal-xl {
198
+ --#{$prefix}modal-width: #{$modal-lg};
199
+ }
200
+ }
201
+
202
+ @include media-breakpoint-up(xl) {
203
+ .modal-xl {
204
+ --#{$prefix}modal-width: #{$modal-xl};
205
+ }
206
+ }
207
+
208
+ // scss-docs-start modal-fullscreen-loop
209
+ @each $breakpoint in map-keys($grid-breakpoints) {
210
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
211
+ $postfix: if($infix != "", $infix + "-down", "");
212
+
213
+ @include media-breakpoint-down($breakpoint) {
214
+ .modal-fullscreen#{$postfix} {
215
+ width: 100vw;
216
+ max-width: none;
217
+ height: 100%;
218
+ margin: 0;
219
+
220
+ .modal-content {
221
+ height: 100%;
222
+ border: 0;
223
+ @include border-radius(0);
224
+ }
225
+
226
+ .modal-header,
227
+ .modal-footer {
228
+ @include border-radius(0);
229
+ }
230
+
231
+ .modal-body {
232
+ overflow-y: auto;
233
+ }
234
+ }
235
+ }
236
+ }
237
+ // scss-docs-end modal-fullscreen-loop