@wwtdev/bsds-css 2.15.0 → 2.17.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.
- package/dist/components/_flyout.scss +5 -1
- package/dist/components/_form-input-composite.scss +1 -1
- package/dist/components/_modal.scss +14 -14
- package/dist/components/_pills.scss +0 -3
- package/dist/components/_table.scss +328 -0
- package/dist/components/_tooltip.scss +27 -11
- package/dist/components/flyout.css +5 -1
- package/dist/components/form-input-composite.css +1 -1
- package/dist/components/modal.css +14 -14
- package/dist/components/pills.css +0 -3
- package/dist/components/table.css +324 -0
- package/dist/components/tooltip.css +27 -11
- package/dist/wwt-bsds.css +308 -29
- package/dist/wwt-bsds.min.css +1 -1
- package/package.json +1 -1
|
@@ -35,7 +35,11 @@
|
|
|
35
35
|
|
|
36
36
|
.bs-flyout:where([data-shown="true"]) {
|
|
37
37
|
opacity: 1;
|
|
38
|
-
|
|
38
|
+
/*
|
|
39
|
+
Needs to be "none" instead of "0" so as not to interfere with calculating
|
|
40
|
+
"containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
|
|
41
|
+
*/
|
|
42
|
+
transform: none;
|
|
39
43
|
}
|
|
40
44
|
|
|
41
45
|
.bs-flyout :where(.bs-flyout-close-container) {
|
|
@@ -293,7 +293,7 @@ data-autosize-icons="true" - see above
|
|
|
293
293
|
outline: 1px solid transparent;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
|
-
.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible
|
|
296
|
+
.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible) {
|
|
297
297
|
outline: 1px solid var(--focus-border);
|
|
298
298
|
}
|
|
299
299
|
|
|
@@ -2,22 +2,32 @@
|
|
|
2
2
|
.bs-modal {
|
|
3
3
|
background-color: var(--bs-bg-base-to-medium);
|
|
4
4
|
border-radius: 4px;
|
|
5
|
+
bottom: 0;
|
|
5
6
|
box-shadow: var(--bs-shadow-contentHigh);
|
|
6
|
-
|
|
7
|
+
height: fit-content;
|
|
8
|
+
left: 0;
|
|
9
|
+
margin: auto;
|
|
7
10
|
max-height: calc(100% - 3rem);
|
|
8
11
|
opacity: 0;
|
|
9
12
|
overflow: auto;
|
|
10
13
|
padding: 1.5rem;
|
|
11
14
|
position: fixed;
|
|
12
|
-
right:
|
|
13
|
-
top:
|
|
14
|
-
transform: translateY(-50%);
|
|
15
|
+
right: 0;
|
|
16
|
+
top: 0;
|
|
15
17
|
transition-duration: 75ms;
|
|
16
18
|
transition-property: opacity;
|
|
17
19
|
transition-timing-function: ease-in-out;
|
|
20
|
+
width: calc(100% - 3rem);
|
|
18
21
|
z-index: 9999;
|
|
19
22
|
}
|
|
20
23
|
|
|
24
|
+
@media (min-width: 752px) {
|
|
25
|
+
.bs-modal {
|
|
26
|
+
max-height: 40.625rem;
|
|
27
|
+
width: 35rem;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
21
31
|
.bs-modal:where([data-shown]:not([data-shown="false"])) {
|
|
22
32
|
opacity: 1;
|
|
23
33
|
}
|
|
@@ -66,16 +76,6 @@
|
|
|
66
76
|
margin-top: 3rem;
|
|
67
77
|
}
|
|
68
78
|
|
|
69
|
-
@media (min-width: 752px) {
|
|
70
|
-
.bs-modal {
|
|
71
|
-
left: 50%;
|
|
72
|
-
margin: 0;
|
|
73
|
-
max-height: 40.625rem;
|
|
74
|
-
transform: translate(-50%, -50%);
|
|
75
|
-
width: 35rem;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
79
|
/* Vue Transition Styles - Only used in Vue component */
|
|
80
80
|
.bs-modal:where(.bs-modal-enter-from),
|
|
81
81
|
.bs-modal:where(.bs-modal-leave-to) {
|
|
@@ -62,9 +62,6 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
/* ------------------------------ Background Colors ------------------------------ */
|
|
65
|
-
:where(.box, [class*="bg-"]:not([class~="bg-white"])) .bs-pill:where(:not([data-variant^="live"], [data-active]:not([data-active="false"]))) {
|
|
66
|
-
--pill-background: var(--bs-bg-base);
|
|
67
|
-
}
|
|
68
65
|
:where(.box[data-invert]) .bs-pill {
|
|
69
66
|
--pill-background: var(--bs-bg-invert-to-base-subtle);
|
|
70
67
|
--pill-text: var(--bs-gray-100);
|
|
@@ -0,0 +1,328 @@
|
|
|
1
|
+
@mixin table() {
|
|
2
|
+
/* ------ WRAPPER ------ */
|
|
3
|
+
|
|
4
|
+
.bs-table-wrap {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:where(.bs-table-wrap) {
|
|
11
|
+
font-size: var(--bs-text-sm);
|
|
12
|
+
color: var(--bs-table-cell-ink, var(--bs-ink-light));
|
|
13
|
+
border-radius: var(--bs-space-2);
|
|
14
|
+
border: 1px solid var(--bs-border-base);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:where(.bs-table-wrap-header, .bs-table-wrap-footer) {
|
|
18
|
+
padding-block: var(--bs-space-3);
|
|
19
|
+
padding-inline: var(--bs-table-cell-padding);
|
|
20
|
+
background: var(--bs-bg-medium);
|
|
21
|
+
border-color: inherit;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where(.bs-table-wrap-header) {
|
|
25
|
+
border-bottom-width: 1px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:where(.bs-table-wrap-footer) {
|
|
29
|
+
border-top-width: 1px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
/* ------ TABLE ------ */
|
|
34
|
+
|
|
35
|
+
.bs-table-scroll-wrap {
|
|
36
|
+
flex: 1;
|
|
37
|
+
border-color: inherit;
|
|
38
|
+
overflow: auto;
|
|
39
|
+
overscroll-behavior: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.bs-table {
|
|
43
|
+
display: grid;
|
|
44
|
+
grid-template-columns: var(--bs-table-col-widths);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:where(.bs-table) {
|
|
48
|
+
border-color: inherit;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ------ HEADER ROWGROUP ------ */
|
|
52
|
+
|
|
53
|
+
.bs-table-header-rowgroup {
|
|
54
|
+
grid-column: 1 / -1;
|
|
55
|
+
grid-row: span var(--bs-table-header-row-count);
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-template-columns: subgrid;
|
|
58
|
+
grid-template-rows: subgrid;
|
|
59
|
+
border-color: inherit;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.bs-table-header-rowgroup-freeze {
|
|
63
|
+
position: sticky;
|
|
64
|
+
top: 0;
|
|
65
|
+
z-index: 1;
|
|
66
|
+
|
|
67
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
68
|
+
box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* ------ BODY ROWGROUP ------ */
|
|
73
|
+
|
|
74
|
+
.bs-table-body-rowgroup {
|
|
75
|
+
grid-column: 1 / -1;
|
|
76
|
+
grid-row: span var(--bs-table-body-row-count);
|
|
77
|
+
display: grid;
|
|
78
|
+
grid-template-columns: subgrid;
|
|
79
|
+
grid-template-rows: subgrid;
|
|
80
|
+
border-color: inherit;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* ------ FOOTER ROWGROUP ------ */
|
|
84
|
+
|
|
85
|
+
.bs-table-footer-rowgroup {
|
|
86
|
+
grid-column: 1 / -1;
|
|
87
|
+
grid-row: span var(--bs-table-footer-row-count);
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-template-columns: subgrid;
|
|
90
|
+
grid-template-rows: subgrid;
|
|
91
|
+
border-color: inherit;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.bs-table-footer-rowgroup-freeze {
|
|
95
|
+
position: sticky;
|
|
96
|
+
bottom: 0;
|
|
97
|
+
|
|
98
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
99
|
+
box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* ------ ROWS ------ */
|
|
104
|
+
|
|
105
|
+
.bs-table-row {
|
|
106
|
+
grid-column: 1 / -1;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:where(.bs-table-row) {
|
|
110
|
+
background: var(--bs-bg-base);
|
|
111
|
+
border-color: inherit;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
:where(.bs-table-header-rowgroup .bs-table-row) {
|
|
115
|
+
background: var(--bs-bg-light);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:where(.bs-table-row:has(.bs-table-head-cell, .bs-table-cell)) {
|
|
119
|
+
display: grid;
|
|
120
|
+
grid-template-columns: subgrid;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ------ FROZEN COLS ------ */
|
|
124
|
+
|
|
125
|
+
.bs-table-cols-frozen-left {
|
|
126
|
+
position: sticky;
|
|
127
|
+
left: 0;
|
|
128
|
+
grid-column: span var(--bs-table-frozen-left-count);
|
|
129
|
+
display: grid;
|
|
130
|
+
grid-template-columns: subgrid;
|
|
131
|
+
background: inherit;
|
|
132
|
+
border-color: inherit;
|
|
133
|
+
|
|
134
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
135
|
+
box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.bs-table-cols-frozen-right {
|
|
140
|
+
position: sticky;
|
|
141
|
+
right: 0;
|
|
142
|
+
grid-column: span var(--bs-table-frozen-right-count);
|
|
143
|
+
display: grid;
|
|
144
|
+
grid-template-columns: subgrid;
|
|
145
|
+
background: inherit;
|
|
146
|
+
border-color: inherit;
|
|
147
|
+
|
|
148
|
+
.bs-table:not(.bs-table-border-none) & {
|
|
149
|
+
box-shadow: -3px 0 0 rgba(0, 0, 0, .03);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* ------ CELLS ------ */
|
|
154
|
+
|
|
155
|
+
:where(.bs-table-head-cell) {
|
|
156
|
+
color: var(--bs-table-head-cell-ink, var(--bs-ink-base));
|
|
157
|
+
font-weight: var(--bs-font-bold);
|
|
158
|
+
border-color: inherit;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* Couldn't use :where due to Blue Steel reset styles on <button> imposing font-size.
|
|
162
|
+
Adding inherit in case consumer does custom header cell styles */
|
|
163
|
+
.bs-table-head-cell .bs-sort-toggle {
|
|
164
|
+
font-size: inherit;
|
|
165
|
+
font-weight: var(--bs-font-bold);
|
|
166
|
+
color: inherit;
|
|
167
|
+
line-height: inherit;
|
|
168
|
+
letter-spacing: inherit;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
:where(.bs-table-cell) {
|
|
172
|
+
border-color: inherit;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* ------ PROP: CELL-PADDING ------ */
|
|
176
|
+
|
|
177
|
+
:root {
|
|
178
|
+
--bs-table-cell-padding-xs: var(--bs-space-2);
|
|
179
|
+
--bs-table-cell-padding-sm: var(--bs-space-3);
|
|
180
|
+
--bs-table-cell-padding-md: var(--bs-space-4);
|
|
181
|
+
--bs-table-cell-padding-lg: var(--bs-space-6);
|
|
182
|
+
--bs-table-cell-padding-xl: var(--bs-space-8);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
:where(.bs-table-head-cell, .bs-table-cell) {
|
|
186
|
+
padding: var(--bs-table-cell-padding);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* ------ PROP: TRUNCATE ------ */
|
|
190
|
+
|
|
191
|
+
:where(.bs-table-truncate):where(.bs-table-head-cell, .bs-table-cell) {
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
text-overflow: ellipsis;
|
|
194
|
+
white-space: nowrap;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
/* ------ PROP: STRIPED ROWS ------ */
|
|
199
|
+
|
|
200
|
+
:where(.bs-table-striped .bs-table-body-rowgroup .bs-table-row:nth-child(even)) {
|
|
201
|
+
background: var(--bs-bg-light);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
/* ------ PROP: ROW HOVER ------ */
|
|
206
|
+
|
|
207
|
+
:where(.bs-table-row-hover .bs-table-body-rowgroup .bs-table-row:hover) {
|
|
208
|
+
background: var(--bs-table-row-hover, var(--bs-bg-light));
|
|
209
|
+
transition: background-color 200ms;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
/* ------ PROP: BORDERS ------ */
|
|
214
|
+
|
|
215
|
+
/* -- borders="rows" -- */
|
|
216
|
+
:where(.bs-table-border-rows) :where(.bs-table-row) {
|
|
217
|
+
border-bottom-width: 1px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* -- borders="cols" -- */
|
|
221
|
+
/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
|
|
222
|
+
:where(.bs-table-border-cols) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
|
|
223
|
+
border-left-width: 1px;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.bs-table-border-cols .bs-table-header-rowgroup {
|
|
227
|
+
border-bottom-width: 1px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* -- borders="grid" -- */
|
|
231
|
+
:where(.bs-table-border-grid) :where(.bs-table-row) {
|
|
232
|
+
border-bottom-width: 1px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
|
|
236
|
+
:where(.bs-table-border-grid) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
|
|
237
|
+
border-left-width: 1px;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* -- borders="frozen" -- */
|
|
241
|
+
.bs-table-border-frozen .bs-table-header-rowgroup-freeze {
|
|
242
|
+
border-bottom-width: 1px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* -- frozen col and footer-rowgroup sections will always show border, unless borders="none" -- */
|
|
246
|
+
/* (header-rowgroup is not included below since TableRow bottom border covers most cases) */
|
|
247
|
+
.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-left {
|
|
248
|
+
border-right-width: 1px;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-right {
|
|
252
|
+
border-left-width: 1px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.bs-table:not(.bs-table-border-none) .bs-table-footer-rowgroup-freeze {
|
|
256
|
+
border-top-width: 1px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* turn off last row's bottom border, since it would double-up with Table's border */
|
|
260
|
+
:where(.bs-table-body-rowgroup, .bs-table-footer-rowgroup) .bs-table-row:last-of-type {
|
|
261
|
+
border-bottom-width: 0;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
/* ------ TABLE COLUMN RESIZER ------ */
|
|
266
|
+
|
|
267
|
+
.bs-table-col-resizer {
|
|
268
|
+
position: fixed; /* fixed instead of absolute, due to using coordinates from .getBoundingClientRect() */
|
|
269
|
+
top: 0;
|
|
270
|
+
left: -8px;
|
|
271
|
+
bottom: 0;
|
|
272
|
+
width: 15px; /* includes 5px resizer handle width + 5px of extra hover target area on left and right of handle */
|
|
273
|
+
cursor: col-resize;
|
|
274
|
+
touch-action: none;
|
|
275
|
+
z-index: var(--bs-table-col-resizer-z, 10);
|
|
276
|
+
transform: translate(var(--bs-table-col-resizer-x), var(--bs-table-col-resizer-y));
|
|
277
|
+
|
|
278
|
+
/* resizer handle and vertical line set-up */
|
|
279
|
+
&:before,
|
|
280
|
+
&::after {
|
|
281
|
+
content: "";
|
|
282
|
+
position: absolute;
|
|
283
|
+
top: 0;
|
|
284
|
+
left: 0;
|
|
285
|
+
background: var(--bs-table-col-resizer-color, var(--bs-blue-base));
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* resizer handle */
|
|
289
|
+
&::after {
|
|
290
|
+
left: 5px;
|
|
291
|
+
width: 5px;
|
|
292
|
+
height: var(--bs-table-col-resizer-handle-height);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* resizer vertical line/tail */
|
|
296
|
+
&::before {
|
|
297
|
+
left: 7px;
|
|
298
|
+
width: 1px;
|
|
299
|
+
height: var(--bs-table-col-resizer-tail-height);
|
|
300
|
+
display: none;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
&.bs-table-col-resizer-active::before {
|
|
304
|
+
display: block;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
/* ------ SORT TOGGLE ------ */
|
|
309
|
+
|
|
310
|
+
/* Override Blue Steel CSS: It adds "relative" to buttons by default, which was causing an overlap issue when a Table with frozen, sortable cols scrolled horizontally */
|
|
311
|
+
.bs-sort-toggle {
|
|
312
|
+
position: static;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Using :where to lower specificity so consumers can use utility classes to override */
|
|
316
|
+
:where(.bs-sort-toggle) {
|
|
317
|
+
display: inline-flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
gap: var(--bs-space-2);
|
|
320
|
+
cursor: pointer;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
:where(.bs-sort-toggle .bs-icon) {
|
|
324
|
+
flex-shrink: 0;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
}
|
|
328
|
+
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
/* Active States */
|
|
43
43
|
:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
|
|
44
44
|
:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
|
|
45
|
-
:where(.bs-tooltip:not([data-position])):focus-
|
|
46
|
-
:where(.bs-tooltip[data-position="top"]):focus-
|
|
45
|
+
:where(.bs-tooltip:not([data-position])):has(:focus-visible) :where(.bs-tooltip-text),
|
|
46
|
+
:where(.bs-tooltip[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
47
47
|
:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
|
|
48
48
|
:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
|
|
49
49
|
opacity: 1;
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
/* Active States */
|
|
62
62
|
:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
|
|
63
|
-
:where(.bs-tooltip[data-position="bottom"]):focus-
|
|
63
|
+
:where(.bs-tooltip[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
64
64
|
:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
|
|
65
65
|
opacity: 1;
|
|
66
66
|
transform: translateX(-50%) scale(1);
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
|
|
77
77
|
/* Active States */
|
|
78
78
|
:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
|
|
79
|
-
:where(.bs-tooltip[data-position="left"]):focus-
|
|
79
|
+
:where(.bs-tooltip[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
80
80
|
:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
|
|
81
81
|
opacity: 1;
|
|
82
82
|
transform: translateY(-50%) scale(1);
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
|
|
94
|
-
:where(.bs-tooltip[data-position="right"]):focus-
|
|
94
|
+
:where(.bs-tooltip[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
95
95
|
:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
|
|
96
96
|
opacity: 1;
|
|
97
97
|
transform: translateY(-50%) scale(1);
|
|
@@ -131,10 +131,10 @@
|
|
|
131
131
|
:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
|
|
132
132
|
:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
|
|
133
133
|
:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
|
|
134
|
-
:where(.bs-tooltip[data-position="top-left"]):focus-
|
|
135
|
-
:where(.bs-tooltip[data-position="top-right"]):focus-
|
|
136
|
-
:where(.bs-tooltip[data-position="bottom-left"]):focus-
|
|
137
|
-
:where(.bs-tooltip[data-position="bottom-right"]):focus-
|
|
134
|
+
:where(.bs-tooltip[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
135
|
+
:where(.bs-tooltip[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
136
|
+
:where(.bs-tooltip[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
137
|
+
:where(.bs-tooltip[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-text),
|
|
138
138
|
:where(.bs-tooltip[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
|
|
139
139
|
:where(.bs-tooltip[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
|
|
140
140
|
:where(.bs-tooltip[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
|
|
@@ -149,15 +149,31 @@ Don't display unless data-shown is present
|
|
|
149
149
|
This must go last to properly override the other classes
|
|
150
150
|
*/
|
|
151
151
|
:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-text),
|
|
152
|
-
:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):focus-
|
|
152
|
+
:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-text) {
|
|
153
153
|
opacity: 0;
|
|
154
154
|
transform: scale(0);
|
|
155
155
|
}
|
|
156
156
|
:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-text),
|
|
157
|
-
:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):focus-
|
|
157
|
+
:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-text) {
|
|
158
158
|
opacity: 0;
|
|
159
159
|
transform: scale(0);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
+
/* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
|
|
163
|
+
.bs-tooltip :where(.bs-tooltip-text.escaped) {
|
|
164
|
+
opacity: 0;
|
|
165
|
+
transform: scale(0.5);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.bs-tooltip :where(.bs-tooltip-text.escaped-x) {
|
|
169
|
+
opacity: 0;
|
|
170
|
+
transform: translateX(-50%) scale(0.5);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.bs-tooltip :where(.bs-tooltip-text.escaped-y) {
|
|
174
|
+
opacity: 0;
|
|
175
|
+
transform: translateY(-50%) scale(0.5);
|
|
176
|
+
}
|
|
177
|
+
|
|
162
178
|
}
|
|
163
179
|
|
|
@@ -34,7 +34,11 @@
|
|
|
34
34
|
|
|
35
35
|
.bs-flyout:where([data-shown="true"]) {
|
|
36
36
|
opacity: 1;
|
|
37
|
-
|
|
37
|
+
/*
|
|
38
|
+
Needs to be "none" instead of "0" so as not to interfere with calculating
|
|
39
|
+
"containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
|
|
40
|
+
*/
|
|
41
|
+
transform: none;
|
|
38
42
|
}
|
|
39
43
|
|
|
40
44
|
.bs-flyout :where(.bs-flyout-close-container) {
|
|
@@ -292,6 +292,6 @@ data-autosize-icons="true" - see above
|
|
|
292
292
|
outline: 1px solid transparent;
|
|
293
293
|
}
|
|
294
294
|
|
|
295
|
-
.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible
|
|
295
|
+
.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible) {
|
|
296
296
|
outline: 1px solid var(--focus-border);
|
|
297
297
|
}
|
|
@@ -1,22 +1,32 @@
|
|
|
1
1
|
.bs-modal {
|
|
2
2
|
background-color: var(--bs-bg-base-to-medium);
|
|
3
3
|
border-radius: 4px;
|
|
4
|
+
bottom: 0;
|
|
4
5
|
box-shadow: var(--bs-shadow-contentHigh);
|
|
5
|
-
|
|
6
|
+
height: fit-content;
|
|
7
|
+
left: 0;
|
|
8
|
+
margin: auto;
|
|
6
9
|
max-height: calc(100% - 3rem);
|
|
7
10
|
opacity: 0;
|
|
8
11
|
overflow: auto;
|
|
9
12
|
padding: 1.5rem;
|
|
10
13
|
position: fixed;
|
|
11
|
-
right:
|
|
12
|
-
top:
|
|
13
|
-
transform: translateY(-50%);
|
|
14
|
+
right: 0;
|
|
15
|
+
top: 0;
|
|
14
16
|
transition-duration: 75ms;
|
|
15
17
|
transition-property: opacity;
|
|
16
18
|
transition-timing-function: ease-in-out;
|
|
19
|
+
width: calc(100% - 3rem);
|
|
17
20
|
z-index: 9999;
|
|
18
21
|
}
|
|
19
22
|
|
|
23
|
+
@media (min-width: 752px) {
|
|
24
|
+
.bs-modal {
|
|
25
|
+
max-height: 40.625rem;
|
|
26
|
+
width: 35rem;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
20
30
|
.bs-modal:where([data-shown]:not([data-shown="false"])) {
|
|
21
31
|
opacity: 1;
|
|
22
32
|
}
|
|
@@ -65,16 +75,6 @@
|
|
|
65
75
|
margin-top: 3rem;
|
|
66
76
|
}
|
|
67
77
|
|
|
68
|
-
@media (min-width: 752px) {
|
|
69
|
-
.bs-modal {
|
|
70
|
-
left: 50%;
|
|
71
|
-
margin: 0;
|
|
72
|
-
max-height: 40.625rem;
|
|
73
|
-
transform: translate(-50%, -50%);
|
|
74
|
-
width: 35rem;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
78
|
/* Vue Transition Styles - Only used in Vue component */
|
|
79
79
|
.bs-modal:where(.bs-modal-enter-from),
|
|
80
80
|
.bs-modal:where(.bs-modal-leave-to) {
|
|
@@ -61,9 +61,6 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
/* ------------------------------ Background Colors ------------------------------ */
|
|
64
|
-
:where(.box, [class*="bg-"]:not([class~="bg-white"])) .bs-pill:where(:not([data-variant^="live"], [data-active]:not([data-active="false"]))) {
|
|
65
|
-
--pill-background: var(--bs-bg-base);
|
|
66
|
-
}
|
|
67
64
|
:where(.box[data-invert]) .bs-pill {
|
|
68
65
|
--pill-background: var(--bs-bg-invert-to-base-subtle);
|
|
69
66
|
--pill-text: var(--bs-gray-100);
|