bootstrap-scss 5.2.0 → 5.2.2

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 (86) hide show
  1. package/README.md +1 -1
  2. package/_accordion.scss +149 -146
  3. package/_alert.scss +71 -71
  4. package/_badge.scss +38 -38
  5. package/_breadcrumb.scss +40 -40
  6. package/_button-group.scss +142 -142
  7. package/_buttons.scss +207 -186
  8. package/_card.scss +234 -234
  9. package/_carousel.scss +229 -229
  10. package/_close.scss +40 -40
  11. package/_containers.scss +41 -41
  12. package/_dropdown.scss +249 -248
  13. package/_forms.scss +9 -9
  14. package/_functions.scss +302 -302
  15. package/_grid.scss +33 -33
  16. package/_helpers.scss +10 -10
  17. package/_list-group.scss +192 -191
  18. package/_maps.scss +54 -54
  19. package/_mixins.scss +43 -43
  20. package/_modal.scss +237 -237
  21. package/_nav.scss +172 -172
  22. package/_navbar.scss +278 -276
  23. package/_offcanvas.scss +144 -143
  24. package/_pagination.scss +109 -109
  25. package/_placeholders.scss +51 -51
  26. package/_popover.scss +196 -196
  27. package/_progress.scss +59 -59
  28. package/_reboot.scss +610 -610
  29. package/_root.scss +73 -73
  30. package/_spinners.scss +85 -85
  31. package/_tables.scss +164 -164
  32. package/_toasts.scss +73 -70
  33. package/_tooltip.scss +120 -120
  34. package/_transitions.scss +27 -27
  35. package/_type.scss +106 -106
  36. package/_utilities.scss +647 -647
  37. package/_variables.scss +1634 -1633
  38. package/bootstrap-grid.scss +64 -64
  39. package/bootstrap-reboot.scss +9 -9
  40. package/bootstrap-utilities.scss +15 -15
  41. package/bootstrap.scss +51 -51
  42. package/forms/_floating-labels.scss +75 -74
  43. package/forms/_form-check.scss +175 -175
  44. package/forms/_form-control.scss +194 -194
  45. package/forms/_form-range.scss +91 -91
  46. package/forms/_form-select.scss +71 -71
  47. package/forms/_form-text.scss +11 -11
  48. package/forms/_input-group.scss +132 -129
  49. package/forms/_labels.scss +36 -36
  50. package/forms/_validation.scss +12 -12
  51. package/helpers/_clearfix.scss +3 -3
  52. package/helpers/_color-bg.scss +10 -10
  53. package/helpers/_colored-links.scss +12 -12
  54. package/helpers/_position.scss +36 -36
  55. package/helpers/_ratio.scss +26 -26
  56. package/helpers/_stacks.scss +15 -15
  57. package/helpers/_stretched-link.scss +15 -15
  58. package/helpers/_text-truncation.scss +7 -7
  59. package/helpers/_visually-hidden.scss +8 -8
  60. package/helpers/_vr.scss +8 -8
  61. package/mixins/_alert.scss +15 -15
  62. package/mixins/_backdrop.scss +14 -14
  63. package/mixins/_banner.scss +9 -9
  64. package/mixins/_border-radius.scss +78 -78
  65. package/mixins/_box-shadow.scss +18 -18
  66. package/mixins/_breakpoints.scss +127 -127
  67. package/mixins/_buttons.scss +70 -70
  68. package/mixins/_caret.scss +64 -64
  69. package/mixins/_clearfix.scss +9 -9
  70. package/mixins/_color-scheme.scss +7 -7
  71. package/mixins/_container.scss +11 -11
  72. package/mixins/_forms.scss +152 -152
  73. package/mixins/_gradients.scss +47 -47
  74. package/mixins/_grid.scss +151 -151
  75. package/mixins/_image.scss +16 -16
  76. package/mixins/_list-group.scss +24 -24
  77. package/mixins/_lists.scss +7 -7
  78. package/mixins/_pagination.scss +10 -10
  79. package/mixins/_reset-text.scss +17 -17
  80. package/mixins/_table-variants.scss +24 -24
  81. package/mixins/_transition.scss +26 -26
  82. package/mixins/_utilities.scss +97 -97
  83. package/mixins/_visually-hidden.scss +29 -29
  84. package/package.json +1 -1
  85. package/utilities/_api.scss +47 -47
  86. package/vendor/_rfs.scss +354 -354
package/_popover.scss CHANGED
@@ -1,196 +1,196 @@
1
- .popover {
2
- // scss-docs-start popover-css-vars
3
- --#{$prefix}popover-zindex: #{$zindex-popover};
4
- --#{$prefix}popover-max-width: #{$popover-max-width};
5
- @include rfs($popover-font-size, --#{$prefix}popover-font-size);
6
- --#{$prefix}popover-bg: #{$popover-bg};
7
- --#{$prefix}popover-border-width: #{$popover-border-width};
8
- --#{$prefix}popover-border-color: #{$popover-border-color};
9
- --#{$prefix}popover-border-radius: #{$popover-border-radius};
10
- --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
11
- --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
12
- --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
13
- --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
14
- @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
15
- --#{$prefix}popover-header-color: #{$popover-header-color};
16
- --#{$prefix}popover-header-bg: #{$popover-header-bg};
17
- --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
18
- --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
19
- --#{$prefix}popover-body-color: #{$popover-body-color};
20
- --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
21
- --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
22
- --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
23
- // scss-docs-end popover-css-vars
24
-
25
- z-index: var(--#{$prefix}popover-zindex);
26
- display: block;
27
- max-width: var(--#{$prefix}popover-max-width);
28
- // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
29
- // So reset our font and text properties to avoid inheriting weird values.
30
- @include reset-text();
31
- @include font-size(var(--#{$prefix}popover-font-size));
32
- // Allow breaking very long words so they don't overflow the popover's bounds
33
- word-wrap: break-word;
34
- background-color: var(--#{$prefix}popover-bg);
35
- background-clip: padding-box;
36
- border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
37
- @include border-radius(var(--#{$prefix}popover-border-radius));
38
- @include box-shadow(var(--#{$prefix}popover-box-shadow));
39
-
40
- .popover-arrow {
41
- display: block;
42
- width: var(--#{$prefix}popover-arrow-width);
43
- height: var(--#{$prefix}popover-arrow-height);
44
-
45
- &::before,
46
- &::after {
47
- position: absolute;
48
- display: block;
49
- content: "";
50
- border-color: transparent;
51
- border-style: solid;
52
- border-width: 0;
53
- }
54
- }
55
- }
56
-
57
- .bs-popover-top {
58
- > .popover-arrow {
59
- bottom: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
60
-
61
- &::before,
62
- &::after {
63
- border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
64
- }
65
-
66
- &::before {
67
- bottom: 0;
68
- border-top-color: var(--#{$prefix}popover-arrow-border);
69
- }
70
-
71
- &::after {
72
- bottom: var(--#{$prefix}popover-border-width);
73
- border-top-color: var(--#{$prefix}popover-bg);
74
- }
75
- }
76
- }
77
-
78
- /* rtl:begin:ignore */
79
- .bs-popover-end {
80
- > .popover-arrow {
81
- left: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
82
- width: var(--#{$prefix}popover-arrow-height);
83
- height: var(--#{$prefix}popover-arrow-width);
84
-
85
- &::before,
86
- &::after {
87
- border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
88
- }
89
-
90
- &::before {
91
- left: 0;
92
- border-right-color: var(--#{$prefix}popover-arrow-border);
93
- }
94
-
95
- &::after {
96
- left: var(--#{$prefix}popover-border-width);
97
- border-right-color: var(--#{$prefix}popover-bg);
98
- }
99
- }
100
- }
101
-
102
- /* rtl:end:ignore */
103
-
104
- .bs-popover-bottom {
105
- > .popover-arrow {
106
- top: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
107
-
108
- &::before,
109
- &::after {
110
- border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
111
- }
112
-
113
- &::before {
114
- top: 0;
115
- border-bottom-color: var(--#{$prefix}popover-arrow-border);
116
- }
117
-
118
- &::after {
119
- top: var(--#{$prefix}popover-border-width);
120
- border-bottom-color: var(--#{$prefix}popover-bg);
121
- }
122
- }
123
-
124
- // This will remove the popover-header's border just below the arrow
125
- .popover-header::before {
126
- position: absolute;
127
- top: 0;
128
- left: 50%;
129
- display: block;
130
- width: var(--#{$prefix}popover-arrow-width);
131
- margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
132
- content: "";
133
- border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
134
- }
135
- }
136
-
137
- /* rtl:begin:ignore */
138
- .bs-popover-start {
139
- > .popover-arrow {
140
- right: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
141
- width: var(--#{$prefix}popover-arrow-height);
142
- height: var(--#{$prefix}popover-arrow-width);
143
-
144
- &::before,
145
- &::after {
146
- border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
147
- }
148
-
149
- &::before {
150
- right: 0;
151
- border-left-color: var(--#{$prefix}popover-arrow-border);
152
- }
153
-
154
- &::after {
155
- right: var(--#{$prefix}popover-border-width);
156
- border-left-color: var(--#{$prefix}popover-bg);
157
- }
158
- }
159
- }
160
-
161
- /* rtl:end:ignore */
162
-
163
- .bs-popover-auto {
164
- &[data-popper-placement^="top"] {
165
- @extend .bs-popover-top;
166
- }
167
- &[data-popper-placement^="right"] {
168
- @extend .bs-popover-end;
169
- }
170
- &[data-popper-placement^="bottom"] {
171
- @extend .bs-popover-bottom;
172
- }
173
- &[data-popper-placement^="left"] {
174
- @extend .bs-popover-start;
175
- }
176
- }
177
-
178
- // Offset the popover to account for the popover arrow
179
- .popover-header {
180
- padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
181
- margin-bottom: 0; // Reset the default from Reboot
182
- @include font-size(var(--#{$prefix}popover-header-font-size));
183
- color: var(--#{$prefix}popover-header-color);
184
- background-color: var(--#{$prefix}popover-header-bg);
185
- border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
186
- @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
187
-
188
- &:empty {
189
- display: none;
190
- }
191
- }
192
-
193
- .popover-body {
194
- padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
195
- color: var(--#{$prefix}popover-body-color);
196
- }
1
+ .popover {
2
+ // scss-docs-start popover-css-vars
3
+ --#{$prefix}popover-zindex: #{$zindex-popover};
4
+ --#{$prefix}popover-max-width: #{$popover-max-width};
5
+ @include rfs($popover-font-size, --#{$prefix}popover-font-size);
6
+ --#{$prefix}popover-bg: #{$popover-bg};
7
+ --#{$prefix}popover-border-width: #{$popover-border-width};
8
+ --#{$prefix}popover-border-color: #{$popover-border-color};
9
+ --#{$prefix}popover-border-radius: #{$popover-border-radius};
10
+ --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
11
+ --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
12
+ --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
13
+ --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
14
+ @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
15
+ --#{$prefix}popover-header-color: #{$popover-header-color};
16
+ --#{$prefix}popover-header-bg: #{$popover-header-bg};
17
+ --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
18
+ --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
19
+ --#{$prefix}popover-body-color: #{$popover-body-color};
20
+ --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
21
+ --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
22
+ --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
23
+ // scss-docs-end popover-css-vars
24
+
25
+ z-index: var(--#{$prefix}popover-zindex);
26
+ display: block;
27
+ max-width: var(--#{$prefix}popover-max-width);
28
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
29
+ // So reset our font and text properties to avoid inheriting weird values.
30
+ @include reset-text();
31
+ @include font-size(var(--#{$prefix}popover-font-size));
32
+ // Allow breaking very long words so they don't overflow the popover's bounds
33
+ word-wrap: break-word;
34
+ background-color: var(--#{$prefix}popover-bg);
35
+ background-clip: padding-box;
36
+ border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
37
+ @include border-radius(var(--#{$prefix}popover-border-radius));
38
+ @include box-shadow(var(--#{$prefix}popover-box-shadow));
39
+
40
+ .popover-arrow {
41
+ display: block;
42
+ width: var(--#{$prefix}popover-arrow-width);
43
+ height: var(--#{$prefix}popover-arrow-height);
44
+
45
+ &::before,
46
+ &::after {
47
+ position: absolute;
48
+ display: block;
49
+ content: "";
50
+ border-color: transparent;
51
+ border-style: solid;
52
+ border-width: 0;
53
+ }
54
+ }
55
+ }
56
+
57
+ .bs-popover-top {
58
+ > .popover-arrow {
59
+ bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
60
+
61
+ &::before,
62
+ &::after {
63
+ border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
64
+ }
65
+
66
+ &::before {
67
+ bottom: 0;
68
+ border-top-color: var(--#{$prefix}popover-arrow-border);
69
+ }
70
+
71
+ &::after {
72
+ bottom: var(--#{$prefix}popover-border-width);
73
+ border-top-color: var(--#{$prefix}popover-bg);
74
+ }
75
+ }
76
+ }
77
+
78
+ /* rtl:begin:ignore */
79
+ .bs-popover-end {
80
+ > .popover-arrow {
81
+ left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
82
+ width: var(--#{$prefix}popover-arrow-height);
83
+ height: var(--#{$prefix}popover-arrow-width);
84
+
85
+ &::before,
86
+ &::after {
87
+ border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
88
+ }
89
+
90
+ &::before {
91
+ left: 0;
92
+ border-right-color: var(--#{$prefix}popover-arrow-border);
93
+ }
94
+
95
+ &::after {
96
+ left: var(--#{$prefix}popover-border-width);
97
+ border-right-color: var(--#{$prefix}popover-bg);
98
+ }
99
+ }
100
+ }
101
+
102
+ /* rtl:end:ignore */
103
+
104
+ .bs-popover-bottom {
105
+ > .popover-arrow {
106
+ top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
107
+
108
+ &::before,
109
+ &::after {
110
+ border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
111
+ }
112
+
113
+ &::before {
114
+ top: 0;
115
+ border-bottom-color: var(--#{$prefix}popover-arrow-border);
116
+ }
117
+
118
+ &::after {
119
+ top: var(--#{$prefix}popover-border-width);
120
+ border-bottom-color: var(--#{$prefix}popover-bg);
121
+ }
122
+ }
123
+
124
+ // This will remove the popover-header's border just below the arrow
125
+ .popover-header::before {
126
+ position: absolute;
127
+ top: 0;
128
+ left: 50%;
129
+ display: block;
130
+ width: var(--#{$prefix}popover-arrow-width);
131
+ margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
132
+ content: "";
133
+ border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
134
+ }
135
+ }
136
+
137
+ /* rtl:begin:ignore */
138
+ .bs-popover-start {
139
+ > .popover-arrow {
140
+ right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
141
+ width: var(--#{$prefix}popover-arrow-height);
142
+ height: var(--#{$prefix}popover-arrow-width);
143
+
144
+ &::before,
145
+ &::after {
146
+ border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
147
+ }
148
+
149
+ &::before {
150
+ right: 0;
151
+ border-left-color: var(--#{$prefix}popover-arrow-border);
152
+ }
153
+
154
+ &::after {
155
+ right: var(--#{$prefix}popover-border-width);
156
+ border-left-color: var(--#{$prefix}popover-bg);
157
+ }
158
+ }
159
+ }
160
+
161
+ /* rtl:end:ignore */
162
+
163
+ .bs-popover-auto {
164
+ &[data-popper-placement^="top"] {
165
+ @extend .bs-popover-top;
166
+ }
167
+ &[data-popper-placement^="right"] {
168
+ @extend .bs-popover-end;
169
+ }
170
+ &[data-popper-placement^="bottom"] {
171
+ @extend .bs-popover-bottom;
172
+ }
173
+ &[data-popper-placement^="left"] {
174
+ @extend .bs-popover-start;
175
+ }
176
+ }
177
+
178
+ // Offset the popover to account for the popover arrow
179
+ .popover-header {
180
+ padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
181
+ margin-bottom: 0; // Reset the default from Reboot
182
+ @include font-size(var(--#{$prefix}popover-header-font-size));
183
+ color: var(--#{$prefix}popover-header-color);
184
+ background-color: var(--#{$prefix}popover-header-bg);
185
+ border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
186
+ @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
187
+
188
+ &:empty {
189
+ display: none;
190
+ }
191
+ }
192
+
193
+ .popover-body {
194
+ padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
195
+ color: var(--#{$prefix}popover-body-color);
196
+ }
package/_progress.scss CHANGED
@@ -1,59 +1,59 @@
1
- // Disable animation if transitions are disabled
2
-
3
- // scss-docs-start progress-keyframes
4
- @if $enable-transitions {
5
- @keyframes progress-bar-stripes {
6
- 0% { background-position-x: $progress-height; }
7
- }
8
- }
9
- // scss-docs-end progress-keyframes
10
-
11
- .progress {
12
- // scss-docs-start progress-css-vars
13
- --#{$prefix}progress-height: #{$progress-height};
14
- @include rfs($progress-font-size, --#{$prefix}progress-font-size);
15
- --#{$prefix}progress-bg: #{$progress-bg};
16
- --#{$prefix}progress-border-radius: #{$progress-border-radius};
17
- --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
18
- --#{$prefix}progress-bar-color: #{$progress-bar-color};
19
- --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
20
- --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
21
- // scss-docs-end progress-css-vars
22
-
23
- display: flex;
24
- height: var(--#{$prefix}progress-height);
25
- overflow: hidden; // force rounded corners by cropping it
26
- @include font-size(var(--#{$prefix}progress-font-size));
27
- background-color: var(--#{$prefix}progress-bg);
28
- @include border-radius(var(--#{$prefix}progress-border-radius));
29
- @include box-shadow(var(--#{$prefix}progress-box-shadow));
30
- }
31
-
32
- .progress-bar {
33
- display: flex;
34
- flex-direction: column;
35
- justify-content: center;
36
- overflow: hidden;
37
- color: var(--#{$prefix}progress-bar-color);
38
- text-align: center;
39
- white-space: nowrap;
40
- background-color: var(--#{$prefix}progress-bar-bg);
41
- @include transition(var(--#{$prefix}progress-bar-transition));
42
- }
43
-
44
- .progress-bar-striped {
45
- @include gradient-striped();
46
- background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
47
- }
48
-
49
- @if $enable-transitions {
50
- .progress-bar-animated {
51
- animation: $progress-bar-animation-timing progress-bar-stripes;
52
-
53
- @if $enable-reduced-motion {
54
- @media (prefers-reduced-motion: reduce) {
55
- animation: none;
56
- }
57
- }
58
- }
59
- }
1
+ // Disable animation if transitions are disabled
2
+
3
+ // scss-docs-start progress-keyframes
4
+ @if $enable-transitions {
5
+ @keyframes progress-bar-stripes {
6
+ 0% { background-position-x: $progress-height; }
7
+ }
8
+ }
9
+ // scss-docs-end progress-keyframes
10
+
11
+ .progress {
12
+ // scss-docs-start progress-css-vars
13
+ --#{$prefix}progress-height: #{$progress-height};
14
+ @include rfs($progress-font-size, --#{$prefix}progress-font-size);
15
+ --#{$prefix}progress-bg: #{$progress-bg};
16
+ --#{$prefix}progress-border-radius: #{$progress-border-radius};
17
+ --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
18
+ --#{$prefix}progress-bar-color: #{$progress-bar-color};
19
+ --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
20
+ --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
21
+ // scss-docs-end progress-css-vars
22
+
23
+ display: flex;
24
+ height: var(--#{$prefix}progress-height);
25
+ overflow: hidden; // force rounded corners by cropping it
26
+ @include font-size(var(--#{$prefix}progress-font-size));
27
+ background-color: var(--#{$prefix}progress-bg);
28
+ @include border-radius(var(--#{$prefix}progress-border-radius));
29
+ @include box-shadow(var(--#{$prefix}progress-box-shadow));
30
+ }
31
+
32
+ .progress-bar {
33
+ display: flex;
34
+ flex-direction: column;
35
+ justify-content: center;
36
+ overflow: hidden;
37
+ color: var(--#{$prefix}progress-bar-color);
38
+ text-align: center;
39
+ white-space: nowrap;
40
+ background-color: var(--#{$prefix}progress-bar-bg);
41
+ @include transition(var(--#{$prefix}progress-bar-transition));
42
+ }
43
+
44
+ .progress-bar-striped {
45
+ @include gradient-striped();
46
+ background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
47
+ }
48
+
49
+ @if $enable-transitions {
50
+ .progress-bar-animated {
51
+ animation: $progress-bar-animation-timing progress-bar-stripes;
52
+
53
+ @if $enable-reduced-motion {
54
+ @media (prefers-reduced-motion: reduce) {
55
+ animation: none;
56
+ }
57
+ }
58
+ }
59
+ }