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/_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(-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
- }
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/_toasts.scss CHANGED
@@ -1,71 +1,73 @@
1
- .toast {
2
- // scss-docs-start toast-css-vars
3
- --#{$prefix}toast-zindex: #{$zindex-toast};
4
- --#{$prefix}toast-padding-x: #{$toast-padding-x};
5
- --#{$prefix}toast-padding-y: #{$toast-padding-y};
6
- --#{$prefix}toast-spacing: #{$toast-spacing};
7
- --#{$prefix}toast-max-width: #{$toast-max-width};
8
- @include rfs($toast-font-size, --#{$prefix}toast-font-size);
9
- --#{$prefix}toast-color: #{$toast-color};
10
- --#{$prefix}toast-bg: #{$toast-background-color};
11
- --#{$prefix}toast-border-width: #{$toast-border-width};
12
- --#{$prefix}toast-border-color: #{$toast-border-color};
13
- --#{$prefix}toast-border-radius: #{$toast-border-radius};
14
- --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
15
- --#{$prefix}toast-header-color: #{$toast-header-color};
16
- --#{$prefix}toast-header-bg: #{$toast-header-background-color};
17
- --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
18
- // scss-docs-end toast-css-vars
19
-
20
- width: var(--#{$prefix}toast-max-width);
21
- max-width: 100%;
22
- @include font-size(var(--#{$prefix}toast-font-size));
23
- color: var(--#{$prefix}toast-color);
24
- pointer-events: auto;
25
- background-color: var(--#{$prefix}toast-bg);
26
- background-clip: padding-box;
27
- border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
28
- box-shadow: var(--#{$prefix}toast-box-shadow);
29
- @include border-radius(var(--#{$prefix}toast-border-radius));
30
-
31
- &.showing {
32
- opacity: 0;
33
- }
34
-
35
- &:not(.show) {
36
- display: none;
37
- }
38
- }
39
-
40
- .toast-container {
41
- position: absolute;
42
- z-index: var(--#{$prefix}toast-zindex);
43
- width: max-content;
44
- max-width: 100%;
45
- pointer-events: none;
46
-
47
- > :not(:last-child) {
48
- margin-bottom: var(--#{$prefix}toast-spacing);
49
- }
50
- }
51
-
52
- .toast-header {
53
- display: flex;
54
- align-items: center;
55
- padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
56
- color: var(--#{$prefix}toast-header-color);
57
- background-color: var(--#{$prefix}toast-header-bg);
58
- background-clip: padding-box;
59
- border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
60
- @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
61
-
62
- .btn-close {
63
- margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
64
- margin-left: var(--#{$prefix}toast-padding-x);
65
- }
66
- }
67
-
68
- .toast-body {
69
- padding: var(--#{$prefix}toast-padding-x);
70
- word-wrap: break-word;
71
- }
1
+ .toast {
2
+ // scss-docs-start toast-css-vars
3
+ --#{$prefix}toast-zindex: #{$zindex-toast};
4
+ --#{$prefix}toast-padding-x: #{$toast-padding-x};
5
+ --#{$prefix}toast-padding-y: #{$toast-padding-y};
6
+ --#{$prefix}toast-spacing: #{$toast-spacing};
7
+ --#{$prefix}toast-max-width: #{$toast-max-width};
8
+ @include rfs($toast-font-size, --#{$prefix}toast-font-size);
9
+ --#{$prefix}toast-color: #{$toast-color};
10
+ --#{$prefix}toast-bg: #{$toast-background-color};
11
+ --#{$prefix}toast-border-width: #{$toast-border-width};
12
+ --#{$prefix}toast-border-color: #{$toast-border-color};
13
+ --#{$prefix}toast-border-radius: #{$toast-border-radius};
14
+ --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
15
+ --#{$prefix}toast-header-color: #{$toast-header-color};
16
+ --#{$prefix}toast-header-bg: #{$toast-header-background-color};
17
+ --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
18
+ // scss-docs-end toast-css-vars
19
+
20
+ width: var(--#{$prefix}toast-max-width);
21
+ max-width: 100%;
22
+ @include font-size(var(--#{$prefix}toast-font-size));
23
+ color: var(--#{$prefix}toast-color);
24
+ pointer-events: auto;
25
+ background-color: var(--#{$prefix}toast-bg);
26
+ background-clip: padding-box;
27
+ border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
28
+ box-shadow: var(--#{$prefix}toast-box-shadow);
29
+ @include border-radius(var(--#{$prefix}toast-border-radius));
30
+
31
+ &.showing {
32
+ opacity: 0;
33
+ }
34
+
35
+ &:not(.show) {
36
+ display: none;
37
+ }
38
+ }
39
+
40
+ .toast-container {
41
+ --#{$prefix}toast-zindex: #{$zindex-toast};
42
+
43
+ position: absolute;
44
+ z-index: var(--#{$prefix}toast-zindex);
45
+ width: max-content;
46
+ max-width: 100%;
47
+ pointer-events: none;
48
+
49
+ > :not(:last-child) {
50
+ margin-bottom: var(--#{$prefix}toast-spacing);
51
+ }
52
+ }
53
+
54
+ .toast-header {
55
+ display: flex;
56
+ align-items: center;
57
+ padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
58
+ color: var(--#{$prefix}toast-header-color);
59
+ background-color: var(--#{$prefix}toast-header-bg);
60
+ background-clip: padding-box;
61
+ border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
62
+ @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
63
+
64
+ .btn-close {
65
+ margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
66
+ margin-left: var(--#{$prefix}toast-padding-x);
67
+ }
68
+ }
69
+
70
+ .toast-body {
71
+ padding: var(--#{$prefix}toast-padding-x);
72
+ word-wrap: break-word;
73
+ }