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/_popover.scss CHANGED
@@ -1,158 +1,196 @@
1
- .popover {
2
- position: absolute;
3
- top: 0;
4
- left: 0 #{"/* rtl:ignore */"};
5
- z-index: $zindex-popover;
6
- display: block;
7
- max-width: $popover-max-width;
8
- // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9
- // So reset our font and text properties to avoid inheriting weird values.
10
- @include reset-text();
11
- @include font-size($popover-font-size);
12
- // Allow breaking very long words so they don't overflow the popover's bounds
13
- word-wrap: break-word;
14
- background-color: $popover-bg;
15
- background-clip: padding-box;
16
- border: $popover-border-width solid $popover-border-color;
17
- @include border-radius($popover-border-radius);
18
- @include box-shadow($popover-box-shadow);
19
-
20
- .popover-arrow {
21
- position: absolute;
22
- display: block;
23
- width: $popover-arrow-width;
24
- height: $popover-arrow-height;
25
-
26
- &::before,
27
- &::after {
28
- position: absolute;
29
- display: block;
30
- content: "";
31
- border-color: transparent;
32
- border-style: solid;
33
- }
34
- }
35
- }
36
-
37
- .bs-popover-top {
38
- > .popover-arrow {
39
- bottom: subtract(-$popover-arrow-height, $popover-border-width);
40
-
41
- &::before {
42
- bottom: 0;
43
- border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
44
- border-top-color: $popover-arrow-outer-color;
45
- }
46
-
47
- &::after {
48
- bottom: $popover-border-width;
49
- border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
50
- border-top-color: $popover-arrow-color;
51
- }
52
- }
53
- }
54
-
55
- .bs-popover-end {
56
- > .popover-arrow {
57
- left: subtract(-$popover-arrow-height, $popover-border-width);
58
- width: $popover-arrow-height;
59
- height: $popover-arrow-width;
60
-
61
- &::before {
62
- left: 0;
63
- border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
64
- border-right-color: $popover-arrow-outer-color;
65
- }
66
-
67
- &::after {
68
- left: $popover-border-width;
69
- border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
70
- border-right-color: $popover-arrow-color;
71
- }
72
- }
73
- }
74
-
75
- .bs-popover-bottom {
76
- > .popover-arrow {
77
- top: subtract(-$popover-arrow-height, $popover-border-width);
78
-
79
- &::before {
80
- top: 0;
81
- border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
82
- border-bottom-color: $popover-arrow-outer-color;
83
- }
84
-
85
- &::after {
86
- top: $popover-border-width;
87
- border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
88
- border-bottom-color: $popover-arrow-color;
89
- }
90
- }
91
-
92
- // This will remove the popover-header's border just below the arrow
93
- .popover-header::before {
94
- position: absolute;
95
- top: 0;
96
- left: 50%;
97
- display: block;
98
- width: $popover-arrow-width;
99
- margin-left: -$popover-arrow-width * .5;
100
- content: "";
101
- border-bottom: $popover-border-width solid $popover-header-bg;
102
- }
103
- }
104
-
105
- .bs-popover-start {
106
- > .popover-arrow {
107
- right: subtract(-$popover-arrow-height, $popover-border-width);
108
- width: $popover-arrow-height;
109
- height: $popover-arrow-width;
110
-
111
- &::before {
112
- right: 0;
113
- border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
114
- border-left-color: $popover-arrow-outer-color;
115
- }
116
-
117
- &::after {
118
- right: $popover-border-width;
119
- border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
120
- border-left-color: $popover-arrow-color;
121
- }
122
- }
123
- }
124
-
125
- .bs-popover-auto {
126
- &[data-popper-placement^="top"] {
127
- @extend .bs-popover-top;
128
- }
129
- &[data-popper-placement^="right"] {
130
- @extend .bs-popover-end;
131
- }
132
- &[data-popper-placement^="bottom"] {
133
- @extend .bs-popover-bottom;
134
- }
135
- &[data-popper-placement^="left"] {
136
- @extend .bs-popover-start;
137
- }
138
- }
139
-
140
- // Offset the popover to account for the popover arrow
141
- .popover-header {
142
- padding: $popover-header-padding-y $popover-header-padding-x;
143
- margin-bottom: 0; // Reset the default from Reboot
144
- @include font-size($font-size-base);
145
- color: $popover-header-color;
146
- background-color: $popover-header-bg;
147
- border-bottom: $popover-border-width solid $popover-border-color;
148
- @include border-top-radius($popover-inner-border-radius);
149
-
150
- &:empty {
151
- display: none;
152
- }
153
- }
154
-
155
- .popover-body {
156
- padding: $popover-body-padding-y $popover-body-padding-x;
157
- color: $popover-body-color;
158
- }
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
+ }
package/_progress.scss CHANGED
@@ -1,48 +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
- display: flex;
13
- height: $progress-height;
14
- overflow: hidden; // force rounded corners by cropping it
15
- @include font-size($progress-font-size);
16
- background-color: $progress-bg;
17
- @include border-radius($progress-border-radius);
18
- @include box-shadow($progress-box-shadow);
19
- }
20
-
21
- .progress-bar {
22
- display: flex;
23
- flex-direction: column;
24
- justify-content: center;
25
- overflow: hidden;
26
- color: $progress-bar-color;
27
- text-align: center;
28
- white-space: nowrap;
29
- background-color: $progress-bar-bg;
30
- @include transition($progress-bar-transition);
31
- }
32
-
33
- .progress-bar-striped {
34
- @include gradient-striped();
35
- background-size: $progress-height $progress-height;
36
- }
37
-
38
- @if $enable-transitions {
39
- .progress-bar-animated {
40
- animation: $progress-bar-animation-timing progress-bar-stripes;
41
-
42
- @if $enable-reduced-motion {
43
- @media (prefers-reduced-motion: reduce) {
44
- animation: none;
45
- }
46
- }
47
- }
48
- }
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
+ }