@salemcobalt/ui 0.2.0-rc.3 → 0.2.0-rc.31
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/README.md +99 -21
- package/dist/codemirror-6REE3TUN.js +383 -0
- package/dist/codemirror-6REE3TUN.js.map +1 -0
- package/dist/editor.d.ts +55 -0
- package/dist/editor.js +174 -0
- package/dist/editor.js.map +1 -0
- package/dist/index.d.ts +1439 -62
- package/dist/index.js +2554 -88
- package/dist/index.js.map +1 -1
- package/dist/markdown-5O5GUVBJ.js +10 -0
- package/dist/markdown-5O5GUVBJ.js.map +1 -0
- package/dist/styles.css +3824 -38
- package/package.json +59 -6
package/dist/styles.css
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
/* @salemcobalt/ui 0.2.0-rc.
|
|
1
|
+
/* @salemcobalt/ui 0.2.0-rc.31 — requires @salemcobalt/tokens/css. */
|
|
2
2
|
@layer sc {
|
|
3
3
|
/* ---- base.css ---- */
|
|
4
4
|
/* Shared: focus ring, reduced motion. Component files follow. */
|
|
5
5
|
.sc-focus-ring:focus-visible,
|
|
6
6
|
.sc-button:focus-visible,
|
|
7
|
+
.sc-avatar-button:focus-visible,
|
|
7
8
|
.sc-card[data-interactive]:focus-visible,
|
|
8
9
|
.sc-dialog__close:focus-visible,
|
|
10
|
+
.sc-dialog__handle:focus-visible,
|
|
9
11
|
.sc-menu__item:focus-visible,
|
|
10
12
|
.sc-input:focus-visible,
|
|
11
13
|
.sc-select:focus-visible,
|
|
12
14
|
.sc-select__item:focus-visible,
|
|
15
|
+
.sc-select__clear:focus-visible,
|
|
13
16
|
.sc-checkbox:focus-visible,
|
|
14
17
|
.sc-switch:focus-visible,
|
|
15
18
|
.sc-tabs__tab:focus-visible,
|
|
@@ -17,6 +20,26 @@
|
|
|
17
20
|
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
18
21
|
outline-offset: var(--sc-border-width-focus);
|
|
19
22
|
}
|
|
23
|
+
/* Controls on an accent fill. The scope repoints the semantic tokens its descendants read, the way raised surfaces
|
|
24
|
+
repoint the washes (docs/adr/0003), so secondary and ghost Buttons, IconButtons, muted text and focus rings inside
|
|
25
|
+
need no rules of their own: text, strong borders and focus rings take text.on-accent; hover and pressed take
|
|
26
|
+
accent.hover and accent.active, the primary Button's states. The element's own focus ring is outside the fill, so it
|
|
27
|
+
keeps its colour by setting it again. Contrast: packages/tokens/test/contrast.test.ts. */
|
|
28
|
+
.sc-on-accent,
|
|
29
|
+
.sc-toast[data-tone='accent'] {
|
|
30
|
+
--sc-color-text-default: var(--sc-color-text-on-accent);
|
|
31
|
+
--sc-color-text-muted: var(--sc-color-text-on-accent);
|
|
32
|
+
--sc-color-border-strong: var(--sc-color-text-on-accent);
|
|
33
|
+
--sc-color-border-focus: var(--sc-color-text-on-accent);
|
|
34
|
+
--sc-color-surface-hover: var(--sc-color-accent-hover);
|
|
35
|
+
--sc-color-surface-active: var(--sc-color-accent-active);
|
|
36
|
+
background: var(--sc-color-accent-default);
|
|
37
|
+
color: var(--sc-color-text-on-accent);
|
|
38
|
+
}
|
|
39
|
+
.sc-on-accent:focus-visible,
|
|
40
|
+
.sc-toast[data-tone='accent']:focus-visible {
|
|
41
|
+
outline-color: var(--sc-color-accent-default);
|
|
42
|
+
}
|
|
20
43
|
/* Keeps content for assistive tech only. */
|
|
21
44
|
.sc-visually-hidden {
|
|
22
45
|
position: absolute;
|
|
@@ -72,6 +95,16 @@
|
|
|
72
95
|
line-height: var(--sc-font-line-height-tight);
|
|
73
96
|
letter-spacing: var(--sc-font-tracking-tight);
|
|
74
97
|
}
|
|
98
|
+
/* Overline: a section label. 12px uppercase mono with wide tracking; muted unless a tone is set. */
|
|
99
|
+
.sc-heading[data-size='overline'] {
|
|
100
|
+
font-family: var(--sc-font-family-mono);
|
|
101
|
+
font-size: var(--sc-font-size-xs);
|
|
102
|
+
font-weight: var(--sc-font-weight-medium);
|
|
103
|
+
line-height: var(--sc-font-line-height-snug);
|
|
104
|
+
letter-spacing: var(--sc-font-tracking-wider);
|
|
105
|
+
text-transform: uppercase;
|
|
106
|
+
text-wrap: wrap;
|
|
107
|
+
}
|
|
75
108
|
.sc-heading[data-truncate] {
|
|
76
109
|
overflow: hidden;
|
|
77
110
|
text-overflow: ellipsis;
|
|
@@ -116,6 +149,9 @@
|
|
|
116
149
|
.sc-text[data-numeric] {
|
|
117
150
|
font-variant-numeric: tabular-nums;
|
|
118
151
|
}
|
|
152
|
+
.sc-text[data-family='mono'] {
|
|
153
|
+
font-family: var(--sc-font-family-mono);
|
|
154
|
+
}
|
|
119
155
|
.sc-text[data-truncate=''] {
|
|
120
156
|
overflow: hidden;
|
|
121
157
|
text-overflow: ellipsis;
|
|
@@ -252,10 +288,10 @@
|
|
|
252
288
|
background: var(--sc-color-accent-default);
|
|
253
289
|
color: var(--sc-color-text-on-accent);
|
|
254
290
|
}
|
|
255
|
-
.sc-button[data-variant='primary']:hover {
|
|
291
|
+
.sc-button[data-variant='primary']:hover:where(:not(:disabled)) {
|
|
256
292
|
background: var(--sc-color-accent-hover);
|
|
257
293
|
}
|
|
258
|
-
.sc-button[data-variant='primary']:active {
|
|
294
|
+
.sc-button[data-variant='primary']:active:where(:not(:disabled)) {
|
|
259
295
|
background: var(--sc-color-accent-active);
|
|
260
296
|
}
|
|
261
297
|
.sc-button[data-variant='secondary'] {
|
|
@@ -263,30 +299,30 @@
|
|
|
263
299
|
color: var(--sc-color-text-default);
|
|
264
300
|
border-color: var(--sc-color-border-strong);
|
|
265
301
|
}
|
|
266
|
-
.sc-button[data-variant='secondary']:hover {
|
|
302
|
+
.sc-button[data-variant='secondary']:hover:where(:not(:disabled)) {
|
|
267
303
|
background: var(--sc-color-surface-hover);
|
|
268
304
|
}
|
|
269
|
-
.sc-button[data-variant='secondary']:active {
|
|
305
|
+
.sc-button[data-variant='secondary']:active:where(:not(:disabled)) {
|
|
270
306
|
background: var(--sc-color-surface-active);
|
|
271
307
|
}
|
|
272
308
|
.sc-button[data-variant='ghost'] {
|
|
273
309
|
background: transparent;
|
|
274
310
|
color: var(--sc-color-text-default);
|
|
275
311
|
}
|
|
276
|
-
.sc-button[data-variant='ghost']:hover {
|
|
312
|
+
.sc-button[data-variant='ghost']:hover:where(:not(:disabled)) {
|
|
277
313
|
background: var(--sc-color-surface-hover);
|
|
278
314
|
}
|
|
279
|
-
.sc-button[data-variant='ghost']:active {
|
|
315
|
+
.sc-button[data-variant='ghost']:active:where(:not(:disabled)) {
|
|
280
316
|
background: var(--sc-color-surface-active);
|
|
281
317
|
}
|
|
282
318
|
.sc-button[data-variant='danger'] {
|
|
283
319
|
background: var(--sc-color-danger-solid);
|
|
284
320
|
color: var(--sc-color-text-on-status);
|
|
285
321
|
}
|
|
286
|
-
.sc-button[data-variant='danger']:hover {
|
|
322
|
+
.sc-button[data-variant='danger']:hover:where(:not(:disabled)) {
|
|
287
323
|
background: var(--sc-color-danger-hover);
|
|
288
324
|
}
|
|
289
|
-
.sc-button[data-variant='danger']:active {
|
|
325
|
+
.sc-button[data-variant='danger']:active:where(:not(:disabled)) {
|
|
290
326
|
background: var(--sc-color-danger-hover);
|
|
291
327
|
filter: brightness(0.95);
|
|
292
328
|
}
|
|
@@ -294,17 +330,16 @@
|
|
|
294
330
|
opacity: 0.5;
|
|
295
331
|
cursor: not-allowed;
|
|
296
332
|
}
|
|
297
|
-
.sc-button:disabled:hover,
|
|
298
|
-
.sc-button:disabled:active {
|
|
299
|
-
background: revert-layer;
|
|
300
|
-
filter: none;
|
|
301
|
-
}
|
|
302
333
|
.sc-button[data-loading] {
|
|
303
334
|
cursor: progress;
|
|
304
335
|
}
|
|
305
336
|
.sc-button[data-loading] > .sc-button__label {
|
|
306
337
|
opacity: 0;
|
|
307
338
|
}
|
|
339
|
+
/* Its own line box, so descenders sit inside the label (the button sets line-height: 1 for centring). */
|
|
340
|
+
.sc-button__label {
|
|
341
|
+
line-height: var(--sc-font-line-height-ui);
|
|
342
|
+
}
|
|
308
343
|
.sc-button__icon {
|
|
309
344
|
display: inline-flex;
|
|
310
345
|
inline-size: 1.125em;
|
|
@@ -324,6 +359,51 @@
|
|
|
324
359
|
border-inline-end-color: transparent;
|
|
325
360
|
animation: sc-spin 0.8s linear infinite;
|
|
326
361
|
}
|
|
362
|
+
/* Icon-only: square, the label kept for assistive tech only, no shortcut hint. Same element, so focus and
|
|
363
|
+
any open tooltip survive the switch. */
|
|
364
|
+
.sc-button[data-icon-only] {
|
|
365
|
+
inline-size: var(--_h);
|
|
366
|
+
padding-inline: 0;
|
|
367
|
+
}
|
|
368
|
+
.sc-button[data-icon-only] > .sc-button__label {
|
|
369
|
+
position: absolute;
|
|
370
|
+
inline-size: 1px;
|
|
371
|
+
block-size: 1px;
|
|
372
|
+
overflow: hidden;
|
|
373
|
+
clip-path: inset(50%);
|
|
374
|
+
white-space: nowrap;
|
|
375
|
+
}
|
|
376
|
+
.sc-button[data-icon-only] > .sc-button__shortcut {
|
|
377
|
+
display: none;
|
|
378
|
+
}
|
|
379
|
+
/* A shortcut hint after the label: a Kbd tinted to the button's own colour, so it reads on every variant. */
|
|
380
|
+
.sc-button__shortcut {
|
|
381
|
+
display: inline-flex;
|
|
382
|
+
align-items: center;
|
|
383
|
+
gap: var(--sc-spacing-3xs);
|
|
384
|
+
flex: none;
|
|
385
|
+
margin-inline-start: var(--sc-spacing-3xs);
|
|
386
|
+
}
|
|
387
|
+
.sc-button__shortcut .sc-kbd {
|
|
388
|
+
background: transparent;
|
|
389
|
+
color: inherit;
|
|
390
|
+
border-color: currentColor;
|
|
391
|
+
box-shadow: none;
|
|
392
|
+
opacity: 0.72;
|
|
393
|
+
}
|
|
394
|
+
.sc-button__shortcut .sc-kbd-group {
|
|
395
|
+
color: inherit;
|
|
396
|
+
}
|
|
397
|
+
.sc-button[data-loading] > .sc-button__shortcut {
|
|
398
|
+
opacity: 0;
|
|
399
|
+
}
|
|
400
|
+
/* No hint where there is no fine pointer (phones, tablets without a trackpad): touch users rarely have the keys,
|
|
401
|
+
and the hint costs width. A tablet with a trackpad (any-pointer: fine) keeps it. `aria-keyshortcuts` stays. */
|
|
402
|
+
@media not all and (any-pointer: fine) {
|
|
403
|
+
.sc-button__shortcut {
|
|
404
|
+
display: none;
|
|
405
|
+
}
|
|
406
|
+
}
|
|
327
407
|
@keyframes sc-spin {
|
|
328
408
|
to {
|
|
329
409
|
rotate: 1turn;
|
|
@@ -360,6 +440,40 @@
|
|
|
360
440
|
.sc-icon-button[data-loading] > .sc-button__icon {
|
|
361
441
|
opacity: 0;
|
|
362
442
|
}
|
|
443
|
+
/* Status dot, top-left: icons such as the broom own the top-right and fill the bottom. Physical corner on
|
|
444
|
+
purpose, because the glyph does not mirror in RTL either. */
|
|
445
|
+
.sc-icon-button__dot {
|
|
446
|
+
--_dot: var(--sc-color-accent-default);
|
|
447
|
+
position: absolute;
|
|
448
|
+
inset: var(--sc-spacing-2xs) auto auto var(--sc-spacing-2xs);
|
|
449
|
+
inline-size: 8px;
|
|
450
|
+
block-size: 8px;
|
|
451
|
+
border-radius: var(--sc-radius-full);
|
|
452
|
+
background: var(--_dot);
|
|
453
|
+
box-shadow: 0 0 0 var(--sc-border-width-focus)
|
|
454
|
+
var(--sc-icon-button-dot-ring, var(--sc-color-surface-default));
|
|
455
|
+
pointer-events: none;
|
|
456
|
+
}
|
|
457
|
+
.sc-icon-button[data-size='sm'] > .sc-icon-button__dot {
|
|
458
|
+
inset: var(--sc-spacing-3xs) auto auto var(--sc-spacing-3xs);
|
|
459
|
+
inline-size: 6px;
|
|
460
|
+
block-size: 6px;
|
|
461
|
+
}
|
|
462
|
+
.sc-icon-button__dot[data-tone='neutral'] {
|
|
463
|
+
--_dot: var(--sc-color-text-subtle);
|
|
464
|
+
}
|
|
465
|
+
.sc-icon-button__dot[data-tone='success'] {
|
|
466
|
+
--_dot: var(--sc-color-success-solid);
|
|
467
|
+
}
|
|
468
|
+
.sc-icon-button__dot[data-tone='warning'] {
|
|
469
|
+
--_dot: var(--sc-color-warning-solid);
|
|
470
|
+
}
|
|
471
|
+
.sc-icon-button__dot[data-tone='danger'] {
|
|
472
|
+
--_dot: var(--sc-color-danger-solid);
|
|
473
|
+
}
|
|
474
|
+
.sc-icon-button__dot[data-tone='info'] {
|
|
475
|
+
--_dot: var(--sc-color-info-solid);
|
|
476
|
+
}
|
|
363
477
|
.sc-button[data-popup-open] {
|
|
364
478
|
background: var(--sc-color-surface-active);
|
|
365
479
|
}
|
|
@@ -513,6 +627,9 @@
|
|
|
513
627
|
--_p: var(--sc-spacing-lg);
|
|
514
628
|
}
|
|
515
629
|
.sc-card[data-variant='elevated'] {
|
|
630
|
+
/* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
|
|
631
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
632
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
516
633
|
box-shadow: var(--sc-elevation-1);
|
|
517
634
|
border-color: transparent;
|
|
518
635
|
}
|
|
@@ -547,6 +664,26 @@
|
|
|
547
664
|
border-color: var(--sc-color-accent-default);
|
|
548
665
|
box-shadow: inset 0 0 0 1px var(--sc-color-accent-default);
|
|
549
666
|
}
|
|
667
|
+
/* Plain: a quiet row. No surface or shadow; interactive hover is a wash (no border or elevation, so a long list
|
|
668
|
+
does not flicker); selected is the accent wash with a 1px accent border (3:1, the selection cue). */
|
|
669
|
+
.sc-card[data-variant='plain'] {
|
|
670
|
+
background: transparent;
|
|
671
|
+
border-color: transparent;
|
|
672
|
+
}
|
|
673
|
+
.sc-card[data-variant='plain'][data-interactive]:hover {
|
|
674
|
+
background: var(--sc-color-surface-hover);
|
|
675
|
+
border-color: transparent;
|
|
676
|
+
box-shadow: none;
|
|
677
|
+
}
|
|
678
|
+
.sc-card[data-variant='plain'][data-interactive]:active {
|
|
679
|
+
background: var(--sc-color-surface-active);
|
|
680
|
+
}
|
|
681
|
+
.sc-card[data-variant='plain'][data-selected],
|
|
682
|
+
.sc-card[data-variant='plain'][data-selected]:hover {
|
|
683
|
+
background: var(--sc-color-accent-wash);
|
|
684
|
+
border-color: var(--sc-color-accent-border);
|
|
685
|
+
box-shadow: none;
|
|
686
|
+
}
|
|
550
687
|
@media (prefers-reduced-motion: reduce) {
|
|
551
688
|
.sc-card {
|
|
552
689
|
transition: none;
|
|
@@ -723,6 +860,11 @@
|
|
|
723
860
|
background: var(--sc-color-surface-backdrop);
|
|
724
861
|
transition: opacity var(--sc-duration-base) var(--sc-ease-enter);
|
|
725
862
|
}
|
|
863
|
+
/* A dialog opened from inside another (Base UI nests its portal after the parent's popup): its scrim covers the
|
|
864
|
+
parent's popup too, so the layer behind the new one reads as behind. Same layer as the popups; DOM order stacks it. */
|
|
865
|
+
.sc-dialog__backdrop:has(~ .sc-dialog__popup[data-nested]) {
|
|
866
|
+
z-index: var(--sc-z-dialog);
|
|
867
|
+
}
|
|
726
868
|
.sc-dialog__backdrop[data-starting-style],
|
|
727
869
|
.sc-dialog__backdrop[data-ending-style] {
|
|
728
870
|
opacity: 0;
|
|
@@ -731,19 +873,27 @@
|
|
|
731
873
|
transition-duration: calc(var(--sc-duration-base) * 0.75);
|
|
732
874
|
transition-timing-function: var(--sc-ease-exit);
|
|
733
875
|
}
|
|
876
|
+
/* The popup never exceeds the viewport minus a gutter each side, whatever `size` says. 100dvw rather than
|
|
877
|
+
100% so the clamp holds inside a transformed or narrow portal container too. */
|
|
734
878
|
.sc-dialog__popup {
|
|
879
|
+
--_gutter: var(--sc-spacing-md);
|
|
880
|
+
--_max: calc(100dvw - 2 * var(--_gutter));
|
|
735
881
|
position: fixed;
|
|
736
882
|
inset: 0;
|
|
737
883
|
margin: auto;
|
|
738
884
|
z-index: var(--sc-z-dialog);
|
|
739
885
|
box-sizing: border-box;
|
|
740
|
-
inline-size: min(
|
|
741
|
-
max-
|
|
886
|
+
inline-size: min(var(--_max), var(--sc-size-dialog-md));
|
|
887
|
+
max-inline-size: var(--_max);
|
|
888
|
+
max-block-size: min(100dvh - 2 * var(--_gutter), 85dvh);
|
|
742
889
|
block-size: fit-content;
|
|
743
890
|
overflow: auto;
|
|
744
891
|
padding: var(--sc-spacing-lg);
|
|
745
892
|
border-radius: var(--sc-radius-xl);
|
|
746
893
|
background: var(--sc-color-surface-raised);
|
|
894
|
+
/* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
|
|
895
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
896
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
747
897
|
color: var(--sc-color-text-default);
|
|
748
898
|
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
749
899
|
box-shadow: var(--sc-elevation-3);
|
|
@@ -764,10 +914,10 @@
|
|
|
764
914
|
transition-timing-function: var(--sc-ease-exit);
|
|
765
915
|
}
|
|
766
916
|
.sc-dialog__popup[data-size='sm'] {
|
|
767
|
-
inline-size: min(
|
|
917
|
+
inline-size: min(var(--_max), var(--sc-size-dialog-sm));
|
|
768
918
|
}
|
|
769
919
|
.sc-dialog__popup[data-size='lg'] {
|
|
770
|
-
inline-size: min(
|
|
920
|
+
inline-size: min(var(--_max), var(--sc-size-dialog-lg));
|
|
771
921
|
}
|
|
772
922
|
.sc-dialog__title {
|
|
773
923
|
margin: 0;
|
|
@@ -788,6 +938,20 @@
|
|
|
788
938
|
font-size: var(--sc-font-size-sm);
|
|
789
939
|
line-height: var(--sc-font-line-height-normal);
|
|
790
940
|
}
|
|
941
|
+
/* Content wraps instead of widening the popup: long URLs break, fields and media stay inside the box. */
|
|
942
|
+
.sc-dialog__title,
|
|
943
|
+
.sc-dialog__description,
|
|
944
|
+
.sc-dialog__body {
|
|
945
|
+
min-inline-size: 0;
|
|
946
|
+
overflow-wrap: anywhere;
|
|
947
|
+
}
|
|
948
|
+
.sc-dialog__body > *,
|
|
949
|
+
.sc-dialog__body :where(img, video, table, pre, .sc-select) {
|
|
950
|
+
max-inline-size: 100%;
|
|
951
|
+
}
|
|
952
|
+
.sc-dialog__body :where(pre) {
|
|
953
|
+
overflow: auto;
|
|
954
|
+
}
|
|
791
955
|
.sc-dialog__actions {
|
|
792
956
|
margin-block-start: var(--sc-spacing-lg);
|
|
793
957
|
}
|
|
@@ -810,6 +974,163 @@
|
|
|
810
974
|
background: var(--sc-color-surface-hover);
|
|
811
975
|
color: var(--sc-color-text-default);
|
|
812
976
|
}
|
|
977
|
+
/* Sheet: title and actions stay put, the body scrolls. Same centred box as `dialog` on wide viewports. */
|
|
978
|
+
.sc-dialog__popup[data-variant='sheet'] {
|
|
979
|
+
display: flex;
|
|
980
|
+
flex-direction: column;
|
|
981
|
+
overflow: hidden;
|
|
982
|
+
}
|
|
983
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__title,
|
|
984
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__description,
|
|
985
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__actions {
|
|
986
|
+
flex: none;
|
|
987
|
+
}
|
|
988
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__body {
|
|
989
|
+
flex: 1 1 auto;
|
|
990
|
+
min-block-size: 0;
|
|
991
|
+
overflow: auto;
|
|
992
|
+
overscroll-behavior: contain;
|
|
993
|
+
}
|
|
994
|
+
/* The sheet's grab handle shows only where the sheet docks. */
|
|
995
|
+
.sc-dialog__handle {
|
|
996
|
+
display: none;
|
|
997
|
+
}
|
|
998
|
+
/* Below 640px the sheet docks to the bottom edge, full width, and slides up. The breakpoint is fixed
|
|
999
|
+
here because custom properties cannot drive a media query. */
|
|
1000
|
+
@media (width < 640px) {
|
|
1001
|
+
.sc-dialog__popup[data-variant='sheet'] {
|
|
1002
|
+
inset: auto 0 0 0;
|
|
1003
|
+
margin: 0;
|
|
1004
|
+
inline-size: 100%;
|
|
1005
|
+
max-inline-size: none;
|
|
1006
|
+
max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - var(--sc-spacing-xl));
|
|
1007
|
+
padding-block-end: calc(var(--sc-spacing-lg) + env(safe-area-inset-bottom, 0px));
|
|
1008
|
+
padding-inline: calc(var(--sc-spacing-lg) + env(safe-area-inset-left, 0px))
|
|
1009
|
+
calc(var(--sc-spacing-lg) + env(safe-area-inset-right, 0px));
|
|
1010
|
+
border-block-end: 0;
|
|
1011
|
+
border-radius: var(--sc-radius-xl) var(--sc-radius-xl) 0 0;
|
|
1012
|
+
transition:
|
|
1013
|
+
opacity var(--sc-duration-base) var(--sc-ease-enter),
|
|
1014
|
+
translate var(--sc-duration-base) var(--sc-ease-enter),
|
|
1015
|
+
transform var(--sc-duration-slow) var(--sc-ease-standard);
|
|
1016
|
+
}
|
|
1017
|
+
/* The handle: a 36 × 4 bar centred in a 64 × 24 target, where the bar alone used to sit. */
|
|
1018
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle {
|
|
1019
|
+
display: grid;
|
|
1020
|
+
place-items: center;
|
|
1021
|
+
flex: none;
|
|
1022
|
+
align-self: center;
|
|
1023
|
+
inline-size: 64px;
|
|
1024
|
+
block-size: 24px;
|
|
1025
|
+
margin-block: calc(-1 * var(--sc-spacing-sm) - 10px) calc(var(--sc-spacing-md) - 10px);
|
|
1026
|
+
padding: 0;
|
|
1027
|
+
border: 0;
|
|
1028
|
+
border-radius: var(--sc-radius-md);
|
|
1029
|
+
background: transparent;
|
|
1030
|
+
color: var(--sc-color-border-strong);
|
|
1031
|
+
}
|
|
1032
|
+
/* Inset, so the popup's clipped top edge does not cut the ring. */
|
|
1033
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle:focus-visible {
|
|
1034
|
+
outline-offset: calc(-1 * var(--sc-border-width-focus));
|
|
1035
|
+
}
|
|
1036
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__handle::before {
|
|
1037
|
+
content: '';
|
|
1038
|
+
inline-size: 36px;
|
|
1039
|
+
block-size: 4px;
|
|
1040
|
+
border-radius: var(--sc-radius-full);
|
|
1041
|
+
background: currentColor;
|
|
1042
|
+
}
|
|
1043
|
+
/* Swipe to dismiss (sheetSwipe.ts): the page never pans under the sheet, while `Dialog.Body` and any other
|
|
1044
|
+
scroll container inside keep scrolling, because touch-action resets at a scroll container. The drag
|
|
1045
|
+
moves the sheet with `transform`, which adds to the `translate` the exit transition animates. */
|
|
1046
|
+
.sc-dialog__popup[data-variant='sheet'][data-swipe-dismiss] {
|
|
1047
|
+
touch-action: none;
|
|
1048
|
+
}
|
|
1049
|
+
.sc-dialog__popup[data-variant='sheet'][data-swipe-dismiss] > .sc-dialog__handle {
|
|
1050
|
+
cursor: grab;
|
|
1051
|
+
}
|
|
1052
|
+
.sc-dialog__popup[data-variant='sheet'][data-swiping] {
|
|
1053
|
+
cursor: grabbing;
|
|
1054
|
+
user-select: none;
|
|
1055
|
+
transition: none;
|
|
1056
|
+
}
|
|
1057
|
+
.sc-dialog__popup[data-variant='sheet'][data-starting-style],
|
|
1058
|
+
.sc-dialog__popup[data-variant='sheet'][data-ending-style] {
|
|
1059
|
+
opacity: 1;
|
|
1060
|
+
translate: 0 100%;
|
|
1061
|
+
scale: none;
|
|
1062
|
+
}
|
|
1063
|
+
/* Actions stack full width, confirming action on top, in thumb reach. */
|
|
1064
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__actions {
|
|
1065
|
+
flex-wrap: wrap-reverse;
|
|
1066
|
+
}
|
|
1067
|
+
.sc-dialog__popup[data-variant='sheet'] > .sc-dialog__actions > * {
|
|
1068
|
+
flex: 1 1 100%;
|
|
1069
|
+
}
|
|
1070
|
+
}
|
|
1071
|
+
/* Full screen: covers the viewport and slides in from the inline end. Title and actions stay put while
|
|
1072
|
+
`Dialog.Body` scrolls, as in a sheet. The surface is `surface-default`, not raised, because it replaces
|
|
1073
|
+
the page rather than floating over it, so the hover washes go back to the page's own. */
|
|
1074
|
+
.sc-dialog__popup[data-variant='fullscreen'] {
|
|
1075
|
+
--_slide: 1;
|
|
1076
|
+
inset: 0;
|
|
1077
|
+
margin: 0;
|
|
1078
|
+
inline-size: auto;
|
|
1079
|
+
max-inline-size: none;
|
|
1080
|
+
block-size: auto;
|
|
1081
|
+
max-block-size: none;
|
|
1082
|
+
display: flex;
|
|
1083
|
+
flex-direction: column;
|
|
1084
|
+
overflow: hidden;
|
|
1085
|
+
padding-block: calc(var(--sc-spacing-lg) + env(safe-area-inset-top, 0px))
|
|
1086
|
+
calc(var(--sc-spacing-lg) + env(safe-area-inset-bottom, 0px));
|
|
1087
|
+
padding-inline: calc(var(--sc-spacing-lg) + env(safe-area-inset-left, 0px))
|
|
1088
|
+
calc(var(--sc-spacing-lg) + env(safe-area-inset-right, 0px));
|
|
1089
|
+
border: 0;
|
|
1090
|
+
border-radius: 0;
|
|
1091
|
+
box-shadow: none;
|
|
1092
|
+
background: var(--sc-color-surface-default);
|
|
1093
|
+
--sc-color-surface-hover: inherit;
|
|
1094
|
+
--sc-color-surface-active: inherit;
|
|
1095
|
+
transition:
|
|
1096
|
+
opacity var(--sc-duration-slower) var(--sc-ease-enter),
|
|
1097
|
+
translate var(--sc-duration-slower) var(--sc-ease-enter);
|
|
1098
|
+
}
|
|
1099
|
+
.sc-dialog__popup[data-variant='fullscreen'][data-starting-style] {
|
|
1100
|
+
opacity: 0;
|
|
1101
|
+
translate: calc(var(--_slide) * 96px) 0;
|
|
1102
|
+
scale: none;
|
|
1103
|
+
}
|
|
1104
|
+
.sc-dialog__popup[data-variant='fullscreen'][data-ending-style] {
|
|
1105
|
+
opacity: 0;
|
|
1106
|
+
translate: calc(var(--_slide) * 64px) 0;
|
|
1107
|
+
scale: none;
|
|
1108
|
+
transition-duration: var(--sc-duration-slow);
|
|
1109
|
+
transition-timing-function: var(--sc-ease-exit);
|
|
1110
|
+
}
|
|
1111
|
+
.sc-dialog__popup[data-variant='fullscreen']:dir(rtl) {
|
|
1112
|
+
--_slide: -1;
|
|
1113
|
+
}
|
|
1114
|
+
.sc-dialog__popup[data-variant='fullscreen'] > .sc-dialog__title,
|
|
1115
|
+
.sc-dialog__popup[data-variant='fullscreen'] > .sc-dialog__description,
|
|
1116
|
+
.sc-dialog__popup[data-variant='fullscreen'] > .sc-dialog__actions {
|
|
1117
|
+
flex: none;
|
|
1118
|
+
}
|
|
1119
|
+
.sc-dialog__popup[data-variant='fullscreen'] > .sc-dialog__body {
|
|
1120
|
+
flex: 1 1 auto;
|
|
1121
|
+
min-block-size: 0;
|
|
1122
|
+
overflow: auto;
|
|
1123
|
+
overscroll-behavior: contain;
|
|
1124
|
+
}
|
|
1125
|
+
/* From 900px the backdrop shows a margin around it, so it still reads as a layer over the app. */
|
|
1126
|
+
@media (width >= 900px) {
|
|
1127
|
+
.sc-dialog__popup[data-variant='fullscreen'] {
|
|
1128
|
+
inset: var(--sc-spacing-md);
|
|
1129
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
1130
|
+
border-radius: var(--sc-radius-xl);
|
|
1131
|
+
box-shadow: var(--sc-elevation-3);
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
813
1134
|
@media (prefers-reduced-motion: reduce) {
|
|
814
1135
|
.sc-dialog__backdrop,
|
|
815
1136
|
.sc-dialog__popup {
|
|
@@ -821,6 +1142,30 @@
|
|
|
821
1142
|
scale: none;
|
|
822
1143
|
}
|
|
823
1144
|
}
|
|
1145
|
+
/* Reduced motion: the full-screen surface crossfades instead of sliding. */
|
|
1146
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1147
|
+
.sc-dialog__popup[data-variant='fullscreen'] {
|
|
1148
|
+
transition-duration: var(--sc-duration-base);
|
|
1149
|
+
}
|
|
1150
|
+
.sc-dialog__popup[data-variant='fullscreen'][data-starting-style],
|
|
1151
|
+
.sc-dialog__popup[data-variant='fullscreen'][data-ending-style] {
|
|
1152
|
+
translate: none;
|
|
1153
|
+
}
|
|
1154
|
+
.sc-dialog__popup[data-variant='fullscreen'][data-ending-style] {
|
|
1155
|
+
transition-duration: var(--sc-duration-fast);
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
/* Reduced motion: a docked sheet appears and goes without sliding, and a released swipe closes or snaps
|
|
1159
|
+
back in place without the spring. */
|
|
1160
|
+
@media (width < 640px) and (prefers-reduced-motion: reduce) {
|
|
1161
|
+
.sc-dialog__popup[data-variant='sheet'] {
|
|
1162
|
+
transition-duration: 0ms;
|
|
1163
|
+
}
|
|
1164
|
+
.sc-dialog__popup[data-variant='sheet'][data-starting-style],
|
|
1165
|
+
.sc-dialog__popup[data-variant='sheet'][data-ending-style] {
|
|
1166
|
+
translate: none;
|
|
1167
|
+
}
|
|
1168
|
+
}
|
|
824
1169
|
|
|
825
1170
|
/* ---- tooltip.css ---- */
|
|
826
1171
|
/* ---- Tooltip --------------------------------------------------------------- */
|
|
@@ -928,6 +1273,9 @@
|
|
|
928
1273
|
padding: var(--sc-spacing-2xs);
|
|
929
1274
|
border-radius: var(--sc-radius-lg);
|
|
930
1275
|
background: var(--sc-color-surface-raised);
|
|
1276
|
+
/* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
|
|
1277
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
1278
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
931
1279
|
color: var(--sc-color-text-default);
|
|
932
1280
|
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
933
1281
|
box-shadow: var(--sc-elevation-2);
|
|
@@ -963,7 +1311,7 @@
|
|
|
963
1311
|
border-radius: var(--sc-radius-sm);
|
|
964
1312
|
color: var(--sc-color-text-default);
|
|
965
1313
|
text-decoration: none;
|
|
966
|
-
cursor:
|
|
1314
|
+
cursor: pointer;
|
|
967
1315
|
user-select: none;
|
|
968
1316
|
outline: 0;
|
|
969
1317
|
}
|
|
@@ -1005,6 +1353,14 @@
|
|
|
1005
1353
|
grid-column: 2;
|
|
1006
1354
|
min-inline-size: 0;
|
|
1007
1355
|
}
|
|
1356
|
+
/* A second line under the label; the icon and trailing text stay on the label's line. */
|
|
1357
|
+
.sc-menu__description {
|
|
1358
|
+
grid-column: 2;
|
|
1359
|
+
grid-row: 2;
|
|
1360
|
+
min-inline-size: 0;
|
|
1361
|
+
color: var(--sc-color-text-muted);
|
|
1362
|
+
font-size: var(--sc-font-size-xs);
|
|
1363
|
+
}
|
|
1008
1364
|
.sc-menu__trailing {
|
|
1009
1365
|
grid-column: 3;
|
|
1010
1366
|
display: inline-flex;
|
|
@@ -1100,6 +1456,7 @@
|
|
|
1100
1456
|
min-inline-size: 0;
|
|
1101
1457
|
}
|
|
1102
1458
|
.sc-input {
|
|
1459
|
+
appearance: none;
|
|
1103
1460
|
box-sizing: border-box;
|
|
1104
1461
|
inline-size: 100%;
|
|
1105
1462
|
min-inline-size: 0;
|
|
@@ -1137,6 +1494,30 @@
|
|
|
1137
1494
|
color: var(--sc-color-text-subtle);
|
|
1138
1495
|
cursor: not-allowed;
|
|
1139
1496
|
}
|
|
1497
|
+
/* Native date, time and number fields: same box, tabular digits, the picker indicator at the end edge. */
|
|
1498
|
+
.sc-input:is(
|
|
1499
|
+
[type='date'],
|
|
1500
|
+
[type='time'],
|
|
1501
|
+
[type='datetime-local'],
|
|
1502
|
+
[type='month'],
|
|
1503
|
+
[type='week'],
|
|
1504
|
+
[type='number']
|
|
1505
|
+
) {
|
|
1506
|
+
font-variant-numeric: tabular-nums;
|
|
1507
|
+
}
|
|
1508
|
+
.sc-input::-webkit-date-and-time-value {
|
|
1509
|
+
min-block-size: 1lh;
|
|
1510
|
+
text-align: start;
|
|
1511
|
+
}
|
|
1512
|
+
.sc-input::-webkit-calendar-picker-indicator {
|
|
1513
|
+
margin-inline-start: var(--sc-spacing-xs);
|
|
1514
|
+
padding: 0;
|
|
1515
|
+
opacity: 0.7;
|
|
1516
|
+
cursor: pointer;
|
|
1517
|
+
}
|
|
1518
|
+
.sc-input::-webkit-calendar-picker-indicator:hover {
|
|
1519
|
+
opacity: 1;
|
|
1520
|
+
}
|
|
1140
1521
|
.sc-input-wrap[data-icon-start] > .sc-input {
|
|
1141
1522
|
padding-inline-start: calc(var(--_px) + var(--sc-size-icon-md) + var(--sc-spacing-xs));
|
|
1142
1523
|
}
|
|
@@ -1174,7 +1555,38 @@
|
|
|
1174
1555
|
.sc-textarea[data-resize='none'] {
|
|
1175
1556
|
resize: none;
|
|
1176
1557
|
}
|
|
1558
|
+
.sc-textarea[data-variant='code'] {
|
|
1559
|
+
font-family: var(--sc-font-family-mono);
|
|
1560
|
+
font-size: calc(var(--_fs) * 0.95);
|
|
1561
|
+
line-height: var(--sc-font-line-height-normal);
|
|
1562
|
+
tab-size: 2;
|
|
1563
|
+
hyphens: none;
|
|
1564
|
+
overflow-wrap: normal;
|
|
1565
|
+
}
|
|
1566
|
+
.sc-textarea[wrap='off'] {
|
|
1567
|
+
white-space: pre;
|
|
1568
|
+
overflow-x: auto;
|
|
1569
|
+
}
|
|
1177
1570
|
/* Select */
|
|
1571
|
+
/* iOS Safari zooms the page when a focused text field's font is under 16px, and stays zoomed. On touch screens,
|
|
1572
|
+
text fields render at 16px or more; mouse-and-keyboard density is unchanged. 16px is Safari's threshold, not a
|
|
1573
|
+
design value, so it is a literal. Disabling zoom in the viewport meta instead would also block pinch-zoom. */
|
|
1574
|
+
@media (pointer: coarse) {
|
|
1575
|
+
.sc-input,
|
|
1576
|
+
.sc-textarea[data-variant='code'] {
|
|
1577
|
+
font-size: max(16px, var(--_fs));
|
|
1578
|
+
}
|
|
1579
|
+
}
|
|
1580
|
+
.sc-select__wrap {
|
|
1581
|
+
position: relative;
|
|
1582
|
+
display: inline-flex;
|
|
1583
|
+
max-inline-size: 100%;
|
|
1584
|
+
align-self: flex-start;
|
|
1585
|
+
}
|
|
1586
|
+
.sc-select__wrap[data-full-width] {
|
|
1587
|
+
display: flex;
|
|
1588
|
+
align-self: stretch;
|
|
1589
|
+
}
|
|
1178
1590
|
.sc-select {
|
|
1179
1591
|
box-sizing: border-box;
|
|
1180
1592
|
display: inline-flex;
|
|
@@ -1206,6 +1618,30 @@
|
|
|
1206
1618
|
inline-size: 100%;
|
|
1207
1619
|
align-self: stretch;
|
|
1208
1620
|
}
|
|
1621
|
+
/* Room for the × between the value and the chevron. The clear button is a sibling, never nested in the trigger. */
|
|
1622
|
+
.sc-select[data-clearable] > .sc-select__icon {
|
|
1623
|
+
margin-inline-start: calc(var(--sc-size-icon-lg) + var(--sc-spacing-2xs));
|
|
1624
|
+
}
|
|
1625
|
+
.sc-select__clear {
|
|
1626
|
+
position: absolute;
|
|
1627
|
+
inset-block-start: 50%;
|
|
1628
|
+
inset-inline-end: calc(var(--sc-spacing-xs) + var(--sc-size-icon-md) + var(--sc-spacing-2xs));
|
|
1629
|
+
translate: 0 -50%;
|
|
1630
|
+
display: inline-grid;
|
|
1631
|
+
place-items: center;
|
|
1632
|
+
inline-size: var(--sc-size-icon-lg);
|
|
1633
|
+
block-size: var(--sc-size-icon-lg);
|
|
1634
|
+
padding: 0;
|
|
1635
|
+
border: 0;
|
|
1636
|
+
border-radius: var(--sc-radius-sm);
|
|
1637
|
+
background: transparent;
|
|
1638
|
+
color: var(--sc-color-text-muted);
|
|
1639
|
+
cursor: pointer;
|
|
1640
|
+
}
|
|
1641
|
+
.sc-select__clear:hover {
|
|
1642
|
+
background: var(--sc-color-surface-hover);
|
|
1643
|
+
color: var(--sc-color-text-default);
|
|
1644
|
+
}
|
|
1209
1645
|
.sc-select:hover:not([data-disabled]) {
|
|
1210
1646
|
border-color: var(--sc-color-text-muted);
|
|
1211
1647
|
}
|
|
@@ -1224,9 +1660,12 @@
|
|
|
1224
1660
|
color: var(--sc-color-text-subtle);
|
|
1225
1661
|
cursor: not-allowed;
|
|
1226
1662
|
}
|
|
1663
|
+
/* The value clips for the ellipsis, so it needs a real line box: the trigger's line-height of 1 cut off descenders
|
|
1664
|
+
("Any age"). Same fix as .sc-chip__label. */
|
|
1227
1665
|
.sc-select__value {
|
|
1228
1666
|
overflow: hidden;
|
|
1229
1667
|
text-overflow: ellipsis;
|
|
1668
|
+
line-height: var(--sc-font-line-height-ui);
|
|
1230
1669
|
}
|
|
1231
1670
|
.sc-select__value[data-placeholder] {
|
|
1232
1671
|
color: var(--sc-color-text-subtle);
|
|
@@ -1248,6 +1687,9 @@
|
|
|
1248
1687
|
padding: var(--sc-spacing-2xs);
|
|
1249
1688
|
border-radius: var(--sc-radius-lg);
|
|
1250
1689
|
background: var(--sc-color-surface-raised);
|
|
1690
|
+
/* Hover and pressed washes inside a raised surface use the raised tokens, so they show against it (docs/adr/0003). */
|
|
1691
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
1692
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
1251
1693
|
color: var(--sc-color-text-default);
|
|
1252
1694
|
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
1253
1695
|
box-shadow: var(--sc-elevation-2);
|
|
@@ -1275,7 +1717,7 @@
|
|
|
1275
1717
|
padding-inline: var(--sc-spacing-xs);
|
|
1276
1718
|
padding-block: var(--sc-spacing-2xs);
|
|
1277
1719
|
border-radius: var(--sc-radius-sm);
|
|
1278
|
-
cursor:
|
|
1720
|
+
cursor: pointer;
|
|
1279
1721
|
user-select: none;
|
|
1280
1722
|
outline: 0;
|
|
1281
1723
|
}
|
|
@@ -1541,6 +1983,50 @@
|
|
|
1541
1983
|
.sc-tabs__panel[data-hidden] {
|
|
1542
1984
|
display: none;
|
|
1543
1985
|
}
|
|
1986
|
+
/* Segmented: a quiet control. Sunken track, the active tab raised on `surface-default` by the sliding
|
|
1987
|
+
indicator, no accent colour; counts are plain muted numbers
|
|
1988
|
+
(`text-muted`, not `text-subtle`, which fails AA on the sunken track). */
|
|
1989
|
+
.sc-tabs__list[data-variant='segmented'] {
|
|
1990
|
+
display: inline-flex;
|
|
1991
|
+
align-self: flex-start;
|
|
1992
|
+
max-inline-size: 100%;
|
|
1993
|
+
gap: var(--sc-spacing-3xs);
|
|
1994
|
+
padding: var(--sc-spacing-3xs);
|
|
1995
|
+
border-block-end: 0;
|
|
1996
|
+
border-radius: var(--sc-radius-md);
|
|
1997
|
+
background: var(--sc-color-surface-sunken);
|
|
1998
|
+
isolation: isolate;
|
|
1999
|
+
}
|
|
2000
|
+
.sc-tabs__list[data-variant='segmented'][data-fill] {
|
|
2001
|
+
display: flex;
|
|
2002
|
+
align-self: stretch;
|
|
2003
|
+
}
|
|
2004
|
+
.sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab {
|
|
2005
|
+
position: relative;
|
|
2006
|
+
z-index: 1;
|
|
2007
|
+
block-size: var(--sc-size-control-sm);
|
|
2008
|
+
padding-inline: var(--sc-spacing-sm);
|
|
2009
|
+
border-radius: var(--sc-radius-sm);
|
|
2010
|
+
}
|
|
2011
|
+
.sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab:hover:not([data-disabled]) {
|
|
2012
|
+
background: transparent;
|
|
2013
|
+
}
|
|
2014
|
+
.sc-tabs__list[data-variant='segmented'] .sc-tabs__count,
|
|
2015
|
+
.sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab[data-active] > .sc-tabs__count {
|
|
2016
|
+
padding-inline: 0;
|
|
2017
|
+
background: transparent;
|
|
2018
|
+
color: var(--sc-color-text-muted);
|
|
2019
|
+
font-weight: var(--sc-font-weight-regular);
|
|
2020
|
+
}
|
|
2021
|
+
.sc-tabs__list[data-variant='segmented'] > .sc-tabs__indicator {
|
|
2022
|
+
inset-block: 0 auto;
|
|
2023
|
+
z-index: 0;
|
|
2024
|
+
block-size: var(--active-tab-height);
|
|
2025
|
+
translate: var(--active-tab-left) var(--active-tab-top);
|
|
2026
|
+
background: var(--sc-color-surface-default);
|
|
2027
|
+
border-radius: var(--sc-radius-sm);
|
|
2028
|
+
box-shadow: var(--sc-elevation-1);
|
|
2029
|
+
}
|
|
1544
2030
|
@media (prefers-reduced-motion: reduce) {
|
|
1545
2031
|
.sc-tabs__tab,
|
|
1546
2032
|
.sc-tabs__indicator {
|
|
@@ -1548,31 +2034,512 @@
|
|
|
1548
2034
|
}
|
|
1549
2035
|
}
|
|
1550
2036
|
|
|
1551
|
-
/* ----
|
|
1552
|
-
/* ----
|
|
1553
|
-
|
|
2037
|
+
/* ---- priority-nav.css ---- */
|
|
2038
|
+
/* ---- PriorityNav ----------------------------------------------------------- */
|
|
2039
|
+
/* Takes the free space in a flex header (brand · nav · actions) without sizing to its own links, so the
|
|
2040
|
+
row can grow back after collapsing. In a grid, give it a `minmax(0, 1fr)` track. */
|
|
2041
|
+
.sc-priority-nav {
|
|
2042
|
+
position: relative;
|
|
2043
|
+
flex: 1 1 0%;
|
|
2044
|
+
min-inline-size: 0;
|
|
2045
|
+
/* The toggle goes icon-only when the nav itself is narrow (below), whatever the viewport. */
|
|
2046
|
+
container: sc-priority-nav / inline-size;
|
|
2047
|
+
font-family: var(--sc-font-family-sans);
|
|
2048
|
+
font-size: var(--sc-font-size-sm);
|
|
2049
|
+
}
|
|
2050
|
+
.sc-priority-nav__list {
|
|
1554
2051
|
display: flex;
|
|
1555
2052
|
flex-wrap: nowrap;
|
|
1556
2053
|
align-items: center;
|
|
1557
|
-
gap: var(--sc-spacing-
|
|
2054
|
+
gap: var(--sc-spacing-2xs);
|
|
2055
|
+
min-inline-size: 0;
|
|
2056
|
+
margin: 0;
|
|
2057
|
+
padding: 0;
|
|
2058
|
+
list-style: none;
|
|
2059
|
+
}
|
|
2060
|
+
.sc-priority-nav__item,
|
|
2061
|
+
.sc-priority-nav__more {
|
|
2062
|
+
flex: none;
|
|
2063
|
+
display: flex;
|
|
2064
|
+
}
|
|
2065
|
+
.sc-priority-nav__more[hidden] {
|
|
2066
|
+
display: none;
|
|
2067
|
+
}
|
|
2068
|
+
/* Once measured, the current link is the one item that may shrink (ellipsis) when the row cannot hold it
|
|
2069
|
+
and "More". While measuring it keeps its full width like the others. */
|
|
2070
|
+
.sc-priority-nav:not([data-measuring]) .sc-priority-nav__item[data-current] {
|
|
2071
|
+
flex: 0 1 auto;
|
|
1558
2072
|
min-inline-size: 0;
|
|
2073
|
+
}
|
|
2074
|
+
/* Before measurement (server HTML, pre-hydration, no JS): one line that never wraps. With JS the line
|
|
2075
|
+
clips for the few frames before hydration measures it; without JS it scrolls sideways (below). */
|
|
2076
|
+
.sc-priority-nav[data-measuring] > .sc-priority-nav__list {
|
|
1559
2077
|
overflow-x: auto;
|
|
2078
|
+
overflow-y: hidden;
|
|
1560
2079
|
scrollbar-width: none;
|
|
1561
2080
|
}
|
|
1562
|
-
.sc-
|
|
1563
|
-
|
|
1564
|
-
|
|
2081
|
+
.sc-priority-nav[data-measuring] .sc-priority-nav__more[hidden] {
|
|
2082
|
+
display: flex;
|
|
2083
|
+
position: absolute;
|
|
2084
|
+
visibility: hidden;
|
|
2085
|
+
pointer-events: none;
|
|
1565
2086
|
}
|
|
1566
|
-
|
|
2087
|
+
@media (scripting: none) {
|
|
2088
|
+
.sc-priority-nav[data-measuring] > .sc-priority-nav__list {
|
|
2089
|
+
scrollbar-width: thin;
|
|
2090
|
+
}
|
|
2091
|
+
}
|
|
2092
|
+
.sc-priority-nav__link,
|
|
2093
|
+
.sc-priority-nav__toggle {
|
|
1567
2094
|
display: inline-flex;
|
|
1568
|
-
flex: none;
|
|
1569
2095
|
align-items: center;
|
|
1570
2096
|
gap: var(--sc-spacing-2xs);
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
inline
|
|
1575
|
-
|
|
2097
|
+
box-sizing: border-box;
|
|
2098
|
+
block-size: var(--sc-size-control-sm);
|
|
2099
|
+
margin: 0;
|
|
2100
|
+
padding-inline: var(--sc-spacing-sm);
|
|
2101
|
+
border: 0;
|
|
2102
|
+
border-radius: var(--sc-radius-sm);
|
|
2103
|
+
background: transparent;
|
|
2104
|
+
color: var(--sc-color-text-muted);
|
|
2105
|
+
font: inherit;
|
|
2106
|
+
font-weight: var(--sc-font-weight-medium);
|
|
2107
|
+
line-height: var(--sc-font-line-height-ui);
|
|
2108
|
+
white-space: nowrap;
|
|
2109
|
+
text-decoration: none;
|
|
2110
|
+
cursor: pointer;
|
|
2111
|
+
user-select: none;
|
|
2112
|
+
transition:
|
|
2113
|
+
background-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
2114
|
+
color var(--sc-duration-fast) var(--sc-ease-standard);
|
|
2115
|
+
}
|
|
2116
|
+
.sc-priority-nav__link {
|
|
2117
|
+
min-inline-size: 0;
|
|
2118
|
+
}
|
|
2119
|
+
.sc-priority-nav__label {
|
|
2120
|
+
min-inline-size: 0;
|
|
2121
|
+
overflow: hidden;
|
|
2122
|
+
text-overflow: ellipsis;
|
|
2123
|
+
}
|
|
2124
|
+
.sc-priority-nav__link:hover,
|
|
2125
|
+
.sc-priority-nav__toggle:hover {
|
|
2126
|
+
background: var(--sc-color-surface-hover);
|
|
2127
|
+
color: var(--sc-color-text-default);
|
|
2128
|
+
}
|
|
2129
|
+
.sc-priority-nav__link:active,
|
|
2130
|
+
.sc-priority-nav__toggle:active {
|
|
2131
|
+
background: var(--sc-color-surface-active);
|
|
2132
|
+
}
|
|
2133
|
+
.sc-priority-nav__link[aria-current='page'] {
|
|
2134
|
+
color: var(--sc-color-text-default);
|
|
2135
|
+
box-shadow: inset 0 calc(-1 * var(--sc-border-width-focus)) 0 var(--sc-color-accent-default);
|
|
2136
|
+
border-end-start-radius: 0;
|
|
2137
|
+
border-end-end-radius: 0;
|
|
2138
|
+
}
|
|
2139
|
+
.sc-priority-nav__link:focus-visible,
|
|
2140
|
+
.sc-priority-nav__toggle:focus-visible {
|
|
2141
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
2142
|
+
outline-offset: calc(-1 * var(--sc-border-width-focus));
|
|
2143
|
+
}
|
|
2144
|
+
.sc-priority-nav__toggle[aria-expanded='true'] {
|
|
2145
|
+
background: var(--sc-color-surface-active);
|
|
2146
|
+
color: var(--sc-color-text-default);
|
|
2147
|
+
}
|
|
2148
|
+
.sc-priority-nav__ellipsis {
|
|
2149
|
+
display: none;
|
|
2150
|
+
}
|
|
2151
|
+
/* Item badge (`badge`): a count pill or a dot after the label, in accent. Decorative (aria-hidden); the link's
|
|
2152
|
+
name carries `badgeLabel`. "More" shows the collapsed items' badges summed. No transition or animation. */
|
|
2153
|
+
.sc-priority-nav__badge {
|
|
2154
|
+
display: inline-grid;
|
|
2155
|
+
place-items: center;
|
|
2156
|
+
flex: none;
|
|
2157
|
+
box-sizing: border-box;
|
|
2158
|
+
border-radius: var(--sc-radius-full);
|
|
2159
|
+
background: var(--sc-color-accent-default);
|
|
2160
|
+
color: var(--sc-color-text-on-accent);
|
|
2161
|
+
pointer-events: none;
|
|
2162
|
+
}
|
|
2163
|
+
.sc-priority-nav__badge[data-kind='count'] {
|
|
2164
|
+
min-inline-size: var(--sc-size-icon-md);
|
|
2165
|
+
block-size: var(--sc-size-icon-md);
|
|
2166
|
+
padding-inline: var(--sc-spacing-3xs);
|
|
2167
|
+
font-size: var(--sc-font-size-xs);
|
|
2168
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
2169
|
+
font-variant-numeric: tabular-nums;
|
|
2170
|
+
line-height: 1;
|
|
2171
|
+
}
|
|
2172
|
+
.sc-priority-nav__badge[data-kind='dot'] {
|
|
2173
|
+
inline-size: 8px;
|
|
2174
|
+
block-size: 8px;
|
|
2175
|
+
}
|
|
2176
|
+
.sc-priority-nav__panel .sc-priority-nav__badge {
|
|
2177
|
+
margin-inline-start: auto;
|
|
2178
|
+
}
|
|
2179
|
+
.sc-priority-nav__toggle {
|
|
2180
|
+
position: relative;
|
|
2181
|
+
}
|
|
2182
|
+
@container sc-priority-nav (inline-size <= 400px) {
|
|
2183
|
+
.sc-priority-nav__toggle {
|
|
2184
|
+
justify-content: center;
|
|
2185
|
+
inline-size: var(--sc-size-control-sm);
|
|
2186
|
+
padding-inline: 0;
|
|
2187
|
+
}
|
|
2188
|
+
.sc-priority-nav__ellipsis {
|
|
2189
|
+
display: inline-block;
|
|
2190
|
+
}
|
|
2191
|
+
.sc-priority-nav__chevron {
|
|
2192
|
+
display: none;
|
|
2193
|
+
}
|
|
2194
|
+
/* Icon-only: the badge sits on the toggle's inline-end corner, ringed like IconButton's dot. */
|
|
2195
|
+
.sc-priority-nav__toggle > .sc-priority-nav__badge {
|
|
2196
|
+
position: absolute;
|
|
2197
|
+
inset-block-start: 0;
|
|
2198
|
+
inset-inline-end: 0;
|
|
2199
|
+
box-shadow: 0 0 0 var(--sc-border-width-focus) var(--sc-color-surface-default);
|
|
2200
|
+
}
|
|
2201
|
+
.sc-priority-nav__toggle > .sc-priority-nav__badge[data-kind='dot'] {
|
|
2202
|
+
inset-block-start: var(--sc-spacing-2xs);
|
|
2203
|
+
inset-inline-end: var(--sc-spacing-2xs);
|
|
2204
|
+
}
|
|
2205
|
+
/* Visually hidden, still part of the accessible name ("More, 3 links"). */
|
|
2206
|
+
.sc-priority-nav__toggle-label {
|
|
2207
|
+
position: absolute;
|
|
2208
|
+
inline-size: 1px;
|
|
2209
|
+
block-size: 1px;
|
|
2210
|
+
overflow: hidden;
|
|
2211
|
+
clip-path: inset(50%);
|
|
2212
|
+
white-space: nowrap;
|
|
2213
|
+
}
|
|
2214
|
+
}
|
|
2215
|
+
.sc-priority-nav__chevron {
|
|
2216
|
+
transition: rotate var(--sc-duration-fast) var(--sc-ease-standard);
|
|
2217
|
+
}
|
|
2218
|
+
.sc-priority-nav__toggle[aria-expanded='true'] > .sc-priority-nav__chevron {
|
|
2219
|
+
rotate: 180deg;
|
|
2220
|
+
}
|
|
2221
|
+
/* The panel: Menu's surface, a list of the collapsed links. While open it is in the top layer (Popover
|
|
2222
|
+
API), so no ancestor's overflow clips it; it is fixed-positioned against the viewport either way. */
|
|
2223
|
+
.sc-priority-nav__toggle {
|
|
2224
|
+
anchor-name: var(--_anchor);
|
|
2225
|
+
}
|
|
2226
|
+
.sc-priority-nav__panel {
|
|
2227
|
+
--_gutter: var(--sc-spacing-md);
|
|
2228
|
+
position: fixed;
|
|
2229
|
+
inset: auto;
|
|
2230
|
+
z-index: var(--sc-z-dropdown);
|
|
2231
|
+
display: flex;
|
|
2232
|
+
flex-direction: column;
|
|
2233
|
+
box-sizing: border-box;
|
|
2234
|
+
inline-size: max-content;
|
|
2235
|
+
min-inline-size: min(180px, 100vw - 2 * var(--_gutter));
|
|
2236
|
+
max-inline-size: min(320px, 100vw - 2 * var(--_gutter));
|
|
2237
|
+
max-block-size: min(28rem, 100dvh - 2 * var(--_gutter));
|
|
2238
|
+
overflow-y: auto;
|
|
2239
|
+
overscroll-behavior: contain;
|
|
2240
|
+
margin: 0;
|
|
2241
|
+
padding: var(--sc-spacing-2xs);
|
|
2242
|
+
list-style: none;
|
|
2243
|
+
border-radius: var(--sc-radius-lg);
|
|
2244
|
+
background: var(--sc-color-surface-raised);
|
|
2245
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
2246
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
2247
|
+
color: var(--sc-color-text-default);
|
|
2248
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
2249
|
+
box-shadow: var(--sc-elevation-2);
|
|
2250
|
+
font-family: var(--sc-font-family-sans);
|
|
2251
|
+
font-size: var(--sc-font-size-sm);
|
|
2252
|
+
transition:
|
|
2253
|
+
opacity var(--sc-duration-fast) var(--sc-ease-enter),
|
|
2254
|
+
translate var(--sc-duration-fast) var(--sc-ease-enter);
|
|
2255
|
+
}
|
|
2256
|
+
/* Anchored below the toggle, aligned to its inline-end edge; flips to its inline-start edge (and above
|
|
2257
|
+
it) when that would leave the viewport; when no edge fits, it spans the viewport row under the toggle,
|
|
2258
|
+
centred on it and kept a gutter from both edges. Without anchor positioning, JS sets left/top (place.ts). */
|
|
2259
|
+
@supports (anchor-name: --a) {
|
|
2260
|
+
.sc-priority-nav__panel {
|
|
2261
|
+
position-anchor: var(--_anchor);
|
|
2262
|
+
position-area: block-end span-inline-start;
|
|
2263
|
+
margin-block: var(--sc-spacing-2xs);
|
|
2264
|
+
/* Makes an option that ends closer than the gutter to the viewport edge count as overflowing. */
|
|
2265
|
+
margin-inline-start: var(--_gutter);
|
|
2266
|
+
position-try-fallbacks:
|
|
2267
|
+
flip-inline,
|
|
2268
|
+
flip-block,
|
|
2269
|
+
flip-block flip-inline,
|
|
2270
|
+
--sc-priority-nav-fit;
|
|
2271
|
+
}
|
|
2272
|
+
}
|
|
2273
|
+
@position-try --sc-priority-nav-fit {
|
|
2274
|
+
position-area: block-end span-all;
|
|
2275
|
+
justify-self: anchor-center;
|
|
2276
|
+
margin-inline: var(--_gutter);
|
|
2277
|
+
}
|
|
2278
|
+
@starting-style {
|
|
2279
|
+
.sc-priority-nav__panel {
|
|
2280
|
+
opacity: 0;
|
|
2281
|
+
translate: 0 calc(-1 * var(--sc-spacing-2xs));
|
|
2282
|
+
}
|
|
2283
|
+
}
|
|
2284
|
+
.sc-priority-nav__panel[hidden] {
|
|
2285
|
+
display: none;
|
|
2286
|
+
}
|
|
2287
|
+
.sc-priority-nav__panel .sc-priority-nav__link {
|
|
2288
|
+
display: flex;
|
|
2289
|
+
inline-size: 100%;
|
|
2290
|
+
padding-inline: var(--sc-spacing-xs);
|
|
2291
|
+
color: var(--sc-color-text-default);
|
|
2292
|
+
}
|
|
2293
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2294
|
+
.sc-priority-nav__link,
|
|
2295
|
+
.sc-priority-nav__toggle,
|
|
2296
|
+
.sc-priority-nav__chevron,
|
|
2297
|
+
.sc-priority-nav__panel {
|
|
2298
|
+
transition: none;
|
|
2299
|
+
}
|
|
2300
|
+
}
|
|
2301
|
+
|
|
2302
|
+
/* ---- popover.css ---- */
|
|
2303
|
+
/* ---- Popover --------------------------------------------------------------- */
|
|
2304
|
+
.sc-popover__positioner {
|
|
2305
|
+
z-index: var(--sc-z-dropdown);
|
|
2306
|
+
outline: 0;
|
|
2307
|
+
}
|
|
2308
|
+
/* A Dialog opened from inside the popover (Base UI nests its portal next to this positioner) stacks above it: while
|
|
2309
|
+
one is open the popover drops to the backdrop layer, and the dialog's own scrim, later in the DOM, covers it. */
|
|
2310
|
+
.sc-popover__positioner:has(~ * .sc-dialog__popup) {
|
|
2311
|
+
z-index: var(--sc-z-backdrop);
|
|
2312
|
+
}
|
|
2313
|
+
/* Menu's surface: raised background, hairline border, large radius, elevation 2. */
|
|
2314
|
+
.sc-popover {
|
|
2315
|
+
position: relative;
|
|
2316
|
+
box-sizing: border-box;
|
|
2317
|
+
inline-size: max-content;
|
|
2318
|
+
max-inline-size: min(100vw - 2 * var(--sc-spacing-md), 360px);
|
|
2319
|
+
max-block-size: var(--available-height);
|
|
2320
|
+
overflow: auto;
|
|
2321
|
+
padding: var(--sc-spacing-md);
|
|
2322
|
+
border-radius: var(--sc-radius-lg);
|
|
2323
|
+
background: var(--sc-color-surface-raised);
|
|
2324
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
2325
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
2326
|
+
color: var(--sc-color-text-default);
|
|
2327
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
2328
|
+
box-shadow: var(--sc-elevation-2);
|
|
2329
|
+
font-family: var(--sc-font-family-sans);
|
|
2330
|
+
font-size: var(--sc-font-size-sm);
|
|
2331
|
+
line-height: var(--sc-font-line-height-normal);
|
|
2332
|
+
outline: 0;
|
|
2333
|
+
transform-origin: var(--transform-origin);
|
|
2334
|
+
transition:
|
|
2335
|
+
opacity var(--sc-duration-fast) var(--sc-ease-enter),
|
|
2336
|
+
scale var(--sc-duration-fast) var(--sc-ease-enter);
|
|
2337
|
+
}
|
|
2338
|
+
/* With an arrow the popup must not clip it. */
|
|
2339
|
+
.sc-popover:has(> .sc-popover__arrow) {
|
|
2340
|
+
overflow: visible;
|
|
2341
|
+
}
|
|
2342
|
+
.sc-popover[data-starting-style],
|
|
2343
|
+
.sc-popover[data-ending-style] {
|
|
2344
|
+
opacity: 0;
|
|
2345
|
+
scale: 0.97;
|
|
2346
|
+
}
|
|
2347
|
+
.sc-popover[data-ending-style] {
|
|
2348
|
+
transition-timing-function: var(--sc-ease-exit);
|
|
2349
|
+
}
|
|
2350
|
+
.sc-popover[data-instant] {
|
|
2351
|
+
transition: none;
|
|
2352
|
+
}
|
|
2353
|
+
.sc-popover__title {
|
|
2354
|
+
margin: 0;
|
|
2355
|
+
font-size: var(--sc-font-size-md);
|
|
2356
|
+
line-height: var(--sc-font-line-height-snug);
|
|
2357
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
2358
|
+
}
|
|
2359
|
+
.sc-popover__title:has(~ .sc-popover__close),
|
|
2360
|
+
.sc-popover__close ~ .sc-popover__title {
|
|
2361
|
+
padding-inline-end: var(--sc-spacing-xl);
|
|
2362
|
+
}
|
|
2363
|
+
.sc-popover__description {
|
|
2364
|
+
margin: var(--sc-spacing-2xs) 0 0;
|
|
2365
|
+
color: var(--sc-color-text-muted);
|
|
2366
|
+
}
|
|
2367
|
+
.sc-popover__close {
|
|
2368
|
+
position: absolute;
|
|
2369
|
+
inset-block-start: var(--sc-spacing-xs);
|
|
2370
|
+
inset-inline-end: var(--sc-spacing-xs);
|
|
2371
|
+
display: inline-grid;
|
|
2372
|
+
place-items: center;
|
|
2373
|
+
inline-size: var(--sc-size-control-sm);
|
|
2374
|
+
block-size: var(--sc-size-control-sm);
|
|
2375
|
+
padding: 0;
|
|
2376
|
+
border: 0;
|
|
2377
|
+
border-radius: var(--sc-radius-md);
|
|
2378
|
+
background: transparent;
|
|
2379
|
+
color: var(--sc-color-text-muted);
|
|
2380
|
+
cursor: pointer;
|
|
2381
|
+
}
|
|
2382
|
+
.sc-popover__close:hover {
|
|
2383
|
+
background: var(--sc-color-surface-hover);
|
|
2384
|
+
color: var(--sc-color-text-default);
|
|
2385
|
+
}
|
|
2386
|
+
.sc-popover__close:focus-visible {
|
|
2387
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
2388
|
+
outline-offset: calc(-1 * var(--sc-border-width-focus));
|
|
2389
|
+
}
|
|
2390
|
+
/* A 16×8 tip with the popup's fill and border, placed by Base UI on the side facing the trigger. It overlaps
|
|
2391
|
+
the popup's border by one hairline so the border does not run across its base. */
|
|
2392
|
+
.sc-popover__arrow {
|
|
2393
|
+
--_w: 16px;
|
|
2394
|
+
--_h: 8px;
|
|
2395
|
+
display: block;
|
|
2396
|
+
inline-size: var(--_w);
|
|
2397
|
+
block-size: calc(var(--_h) + var(--sc-border-width-hairline));
|
|
2398
|
+
overflow: clip;
|
|
2399
|
+
pointer-events: none;
|
|
2400
|
+
}
|
|
2401
|
+
.sc-popover__arrow::before {
|
|
2402
|
+
content: '';
|
|
2403
|
+
position: absolute;
|
|
2404
|
+
inset-block-end: 0;
|
|
2405
|
+
inset-inline-start: 50%;
|
|
2406
|
+
box-sizing: border-box;
|
|
2407
|
+
inline-size: calc(var(--_h) * 1.4142);
|
|
2408
|
+
block-size: calc(var(--_h) * 1.4142);
|
|
2409
|
+
background: var(--sc-color-surface-raised);
|
|
2410
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
2411
|
+
translate: -50% 50%;
|
|
2412
|
+
rotate: 45deg;
|
|
2413
|
+
}
|
|
2414
|
+
.sc-popover__arrow[data-side='top'] {
|
|
2415
|
+
inset-block-end: calc(-1 * var(--_h));
|
|
2416
|
+
rotate: 180deg;
|
|
2417
|
+
}
|
|
2418
|
+
.sc-popover__arrow[data-side='bottom'] {
|
|
2419
|
+
inset-block-start: calc(-1 * var(--_h));
|
|
2420
|
+
}
|
|
2421
|
+
.sc-popover__arrow[data-side='left'],
|
|
2422
|
+
.sc-popover__arrow[data-side='inline-start'] {
|
|
2423
|
+
inset-inline-end: calc(-1 * (var(--_w) + var(--_h)) / 2);
|
|
2424
|
+
rotate: 90deg;
|
|
2425
|
+
}
|
|
2426
|
+
.sc-popover__arrow[data-side='right'],
|
|
2427
|
+
.sc-popover__arrow[data-side='inline-end'] {
|
|
2428
|
+
inset-inline-start: calc(-1 * (var(--_w) + var(--_h)) / 2);
|
|
2429
|
+
rotate: -90deg;
|
|
2430
|
+
}
|
|
2431
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2432
|
+
.sc-popover {
|
|
2433
|
+
transition-duration: 0ms;
|
|
2434
|
+
}
|
|
2435
|
+
.sc-popover[data-starting-style],
|
|
2436
|
+
.sc-popover[data-ending-style] {
|
|
2437
|
+
scale: none;
|
|
2438
|
+
}
|
|
2439
|
+
}
|
|
2440
|
+
|
|
2441
|
+
/* ---- broom-icon.css ---- */
|
|
2442
|
+
/* ---- BroomIcon ------------------------------------------------------------- */
|
|
2443
|
+
/* Geometry and motion as approved: the body pivots on the handle top (20.2, 2.2) from -14deg to 8deg while
|
|
2444
|
+
the dust fades in and drifts left in step; strokes stay a fixed screen width at any size. */
|
|
2445
|
+
.sc-broom {
|
|
2446
|
+
--sc-broom-stroke: 1.25px;
|
|
2447
|
+
}
|
|
2448
|
+
/* `display` (72px) is a one-off for the broom's showcase and empty states. Move it into the Icon sizes and
|
|
2449
|
+
tokens if a second icon ever needs it. */
|
|
2450
|
+
.sc-icon.sc-broom[data-size='display'] {
|
|
2451
|
+
--_s: calc(var(--sc-size-icon-xl) * 3);
|
|
2452
|
+
--sc-broom-stroke: 1.75px;
|
|
2453
|
+
}
|
|
2454
|
+
.sc-broom__body,
|
|
2455
|
+
.sc-broom__dust {
|
|
2456
|
+
transform-box: view-box;
|
|
2457
|
+
stroke-width: var(--sc-broom-stroke);
|
|
2458
|
+
}
|
|
2459
|
+
.sc-broom__body {
|
|
2460
|
+
transform-origin: 20.2px 2.2px;
|
|
2461
|
+
}
|
|
2462
|
+
.sc-broom * {
|
|
2463
|
+
vector-effect: non-scaling-stroke;
|
|
2464
|
+
}
|
|
2465
|
+
.sc-broom__band {
|
|
2466
|
+
fill: currentColor;
|
|
2467
|
+
stroke: none;
|
|
2468
|
+
}
|
|
2469
|
+
.sc-broom__dust {
|
|
2470
|
+
opacity: 0;
|
|
2471
|
+
}
|
|
2472
|
+
.sc-broom[data-sweeping] .sc-broom__body {
|
|
2473
|
+
animation: sc-broom-sweep 0.9s ease-in-out infinite alternate;
|
|
2474
|
+
}
|
|
2475
|
+
.sc-broom[data-sweeping] .sc-broom__dust {
|
|
2476
|
+
animation: sc-broom-dust 0.9s ease-in-out infinite alternate;
|
|
2477
|
+
}
|
|
2478
|
+
@keyframes sc-broom-sweep {
|
|
2479
|
+
from {
|
|
2480
|
+
transform: rotate(-14deg);
|
|
2481
|
+
}
|
|
2482
|
+
to {
|
|
2483
|
+
transform: rotate(8deg);
|
|
2484
|
+
}
|
|
2485
|
+
}
|
|
2486
|
+
/* At the top of the sweep (8deg) the head stays about 2 grid units clear of the dust. */
|
|
2487
|
+
@keyframes sc-broom-dust {
|
|
2488
|
+
from {
|
|
2489
|
+
opacity: 0;
|
|
2490
|
+
transform: translateX(0.5px);
|
|
2491
|
+
}
|
|
2492
|
+
to {
|
|
2493
|
+
opacity: 0.9;
|
|
2494
|
+
transform: translateX(-1px);
|
|
2495
|
+
}
|
|
2496
|
+
}
|
|
2497
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2498
|
+
.sc-broom[data-sweeping] .sc-broom__body,
|
|
2499
|
+
.sc-broom[data-sweeping] .sc-broom__dust {
|
|
2500
|
+
animation: none;
|
|
2501
|
+
}
|
|
2502
|
+
.sc-broom[data-sweeping] .sc-broom__dust {
|
|
2503
|
+
opacity: 0.9;
|
|
2504
|
+
}
|
|
2505
|
+
}
|
|
2506
|
+
/* Drawn on a 24px grid (the shipped icons use 16px), so inside an IconButton it takes the next icon size up:
|
|
2507
|
+
20px in an md button, as in the approved nav mock. */
|
|
2508
|
+
.sc-icon-button > .sc-button__icon:has(> .sc-broom) {
|
|
2509
|
+
--_icon: var(--sc-size-icon-lg);
|
|
2510
|
+
}
|
|
2511
|
+
.sc-icon-button[data-size='sm'] > .sc-button__icon:has(> .sc-broom) {
|
|
2512
|
+
--_icon: var(--sc-size-icon-md);
|
|
2513
|
+
}
|
|
2514
|
+
.sc-icon-button[data-size='lg'] > .sc-button__icon:has(> .sc-broom) {
|
|
2515
|
+
--_icon: var(--sc-size-icon-xl);
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2518
|
+
/* ---- toolbar.css ---- */
|
|
2519
|
+
/* ---- Toolbar --------------------------------------------------------------- */
|
|
2520
|
+
.sc-toolbar {
|
|
2521
|
+
display: flex;
|
|
2522
|
+
flex-wrap: nowrap;
|
|
2523
|
+
align-items: center;
|
|
2524
|
+
gap: var(--sc-spacing-xs);
|
|
2525
|
+
min-inline-size: 0;
|
|
2526
|
+
overflow-x: auto;
|
|
2527
|
+
scrollbar-width: none;
|
|
2528
|
+
}
|
|
2529
|
+
.sc-toolbar[data-wrap] {
|
|
2530
|
+
flex-wrap: wrap;
|
|
2531
|
+
overflow: visible;
|
|
2532
|
+
}
|
|
2533
|
+
.sc-toolbar__group {
|
|
2534
|
+
display: inline-flex;
|
|
2535
|
+
flex: none;
|
|
2536
|
+
align-items: center;
|
|
2537
|
+
gap: var(--sc-spacing-2xs);
|
|
2538
|
+
}
|
|
2539
|
+
.sc-toolbar__separator {
|
|
2540
|
+
flex: none;
|
|
2541
|
+
inline-size: var(--sc-border-width-hairline);
|
|
2542
|
+
block-size: var(--sc-size-icon-lg);
|
|
1576
2543
|
margin-inline: var(--sc-spacing-2xs);
|
|
1577
2544
|
background: var(--sc-color-border-default);
|
|
1578
2545
|
}
|
|
@@ -1634,6 +2601,12 @@
|
|
|
1634
2601
|
.sc-toolbar__group[data-gap='4xl'] {
|
|
1635
2602
|
gap: var(--sc-spacing-4xl);
|
|
1636
2603
|
}
|
|
2604
|
+
/* Toolbar.Button stays focusable when disabled (aria-disabled + data-disabled, no `disabled` attribute), so the
|
|
2605
|
+
Button's :disabled look is repeated for it here. */
|
|
2606
|
+
.sc-toolbar .sc-button[data-disabled] {
|
|
2607
|
+
opacity: 0.5;
|
|
2608
|
+
cursor: not-allowed;
|
|
2609
|
+
}
|
|
1637
2610
|
|
|
1638
2611
|
/* ---- banner.css ---- */
|
|
1639
2612
|
/* ---- Banner ---------------------------------------------------------------- */
|
|
@@ -1689,8 +2662,8 @@
|
|
|
1689
2662
|
.sc-banner > .sc-button[data-variant='ghost'] {
|
|
1690
2663
|
color: inherit;
|
|
1691
2664
|
}
|
|
1692
|
-
.sc-banner > .sc-button[data-variant='ghost']:hover,
|
|
1693
|
-
.sc-banner > .sc-button[data-variant='ghost']:active {
|
|
2665
|
+
.sc-banner > .sc-button[data-variant='ghost']:hover:where(:not(:disabled)),
|
|
2666
|
+
.sc-banner > .sc-button[data-variant='ghost']:active:where(:not(:disabled)) {
|
|
1694
2667
|
background: rgb(from var(--_fg) r g b / 0.1);
|
|
1695
2668
|
}
|
|
1696
2669
|
|
|
@@ -1995,8 +2968,27 @@
|
|
|
1995
2968
|
.sc-table__row[data-selected] > .sc-table__header {
|
|
1996
2969
|
background: var(--sc-color-accent-subtle);
|
|
1997
2970
|
}
|
|
1998
|
-
.
|
|
1999
|
-
.sc-
|
|
2971
|
+
/* A selected row still shows its hover (docs/adr/0003): the selected wash, a step towards the accent. */
|
|
2972
|
+
.sc-table__row[data-selected][data-interactive]:hover > .sc-table__cell,
|
|
2973
|
+
.sc-table__row[data-selected][data-interactive]:hover > .sc-table__header {
|
|
2974
|
+
background: color-mix(in oklab, var(--sc-color-accent-subtle), var(--sc-color-accent-default) 10%);
|
|
2975
|
+
}
|
|
2976
|
+
/* Selection column: the cell is the hit area, the checkbox the control (the checkbox inherits the cursor). */
|
|
2977
|
+
.sc-table__select {
|
|
2978
|
+
inline-size: 1px;
|
|
2979
|
+
padding-inline-end: var(--sc-spacing-2xs);
|
|
2980
|
+
text-align: center;
|
|
2981
|
+
cursor: pointer;
|
|
2982
|
+
user-select: none;
|
|
2983
|
+
}
|
|
2984
|
+
.sc-table__select > .sc-checkbox {
|
|
2985
|
+
vertical-align: middle;
|
|
2986
|
+
}
|
|
2987
|
+
.sc-table__select[data-disabled] {
|
|
2988
|
+
cursor: not-allowed;
|
|
2989
|
+
}
|
|
2990
|
+
.sc-table__header[data-align='center'],
|
|
2991
|
+
.sc-table__cell[data-align='center'] {
|
|
2000
2992
|
text-align: center;
|
|
2001
2993
|
}
|
|
2002
2994
|
.sc-table__header[data-align='end'],
|
|
@@ -2023,6 +3015,178 @@
|
|
|
2023
3015
|
vertical-align: middle;
|
|
2024
3016
|
}
|
|
2025
3017
|
|
|
3018
|
+
/* ---- selection-bar.css ---- */
|
|
3019
|
+
/* ---- SelectionBar ---------------------------------------------------------- */
|
|
3020
|
+
/* Floats centred at the bottom of the viewport, sized to its content. A raised surface like Menu and Popover, so
|
|
3021
|
+
washes inside use the raised tokens (docs/adr/0003). */
|
|
3022
|
+
.sc-selection-bar {
|
|
3023
|
+
--_gutter: var(--sc-spacing-md);
|
|
3024
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
3025
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
3026
|
+
position: fixed;
|
|
3027
|
+
inset-inline: var(--_gutter);
|
|
3028
|
+
inset-block-end: calc(var(--_gutter) + env(safe-area-inset-bottom, 0px));
|
|
3029
|
+
z-index: var(--sc-z-sticky);
|
|
3030
|
+
box-sizing: border-box;
|
|
3031
|
+
inline-size: fit-content;
|
|
3032
|
+
max-inline-size: min(100vw - 2 * var(--_gutter), 48rem);
|
|
3033
|
+
margin-inline: auto;
|
|
3034
|
+
padding: var(--sc-spacing-2xs) var(--sc-spacing-xs) var(--sc-spacing-2xs) var(--sc-spacing-sm);
|
|
3035
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
3036
|
+
border-radius: var(--sc-radius-lg);
|
|
3037
|
+
background: var(--sc-color-surface-raised);
|
|
3038
|
+
box-shadow: var(--sc-elevation-2);
|
|
3039
|
+
color: var(--sc-color-text-default);
|
|
3040
|
+
font-family: var(--sc-font-family-sans);
|
|
3041
|
+
font-size: var(--sc-font-size-sm);
|
|
3042
|
+
line-height: var(--sc-font-line-height-ui);
|
|
3043
|
+
opacity: 0;
|
|
3044
|
+
translate: 0 var(--sc-spacing-sm);
|
|
3045
|
+
pointer-events: none;
|
|
3046
|
+
transition:
|
|
3047
|
+
opacity var(--sc-duration-base) var(--sc-ease-standard),
|
|
3048
|
+
translate var(--sc-duration-base) var(--sc-ease-standard);
|
|
3049
|
+
}
|
|
3050
|
+
.sc-selection-bar[data-open] {
|
|
3051
|
+
/* Toasts sit above it (toast.css). */
|
|
3052
|
+
anchor-name: --sc-bottom-bar;
|
|
3053
|
+
opacity: 1;
|
|
3054
|
+
translate: none;
|
|
3055
|
+
pointer-events: auto;
|
|
3056
|
+
}
|
|
3057
|
+
@starting-style {
|
|
3058
|
+
.sc-selection-bar[data-open] {
|
|
3059
|
+
opacity: 0;
|
|
3060
|
+
translate: 0 var(--sc-spacing-sm);
|
|
3061
|
+
}
|
|
3062
|
+
}
|
|
3063
|
+
/* Phones: stretch between the gutters. */
|
|
3064
|
+
@media (width < 640px) {
|
|
3065
|
+
.sc-selection-bar {
|
|
3066
|
+
inline-size: auto;
|
|
3067
|
+
}
|
|
3068
|
+
}
|
|
3069
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3070
|
+
.sc-selection-bar,
|
|
3071
|
+
.sc-selection-bar[data-open] {
|
|
3072
|
+
translate: none;
|
|
3073
|
+
transition: none;
|
|
3074
|
+
}
|
|
3075
|
+
}
|
|
3076
|
+
.sc-selection-bar__count {
|
|
3077
|
+
flex: none;
|
|
3078
|
+
font-weight: var(--sc-font-weight-medium);
|
|
3079
|
+
font-variant-numeric: tabular-nums;
|
|
3080
|
+
white-space: nowrap;
|
|
3081
|
+
}
|
|
3082
|
+
/* Left in the flow where the bar is mounted (the end of the scrolling content): the last rows scroll clear of it. */
|
|
3083
|
+
.sc-selection-bar__spacer {
|
|
3084
|
+
flex: none;
|
|
3085
|
+
block-size: calc(
|
|
3086
|
+
var(--sc-selection-bar-height, 0px) + var(--sc-spacing-md) + env(safe-area-inset-bottom, 0px)
|
|
3087
|
+
);
|
|
3088
|
+
}
|
|
3089
|
+
|
|
3090
|
+
/* ---- toast.css ---- */
|
|
3091
|
+
/* ---- Toast ----------------------------------------------------------------- */
|
|
3092
|
+
/* Bottom-end, clear of a bar fixed along the bottom: an open SelectionBar, or any `position: fixed` bar of the app's
|
|
3093
|
+
that sets `anchor-name: --sc-bottom-bar`. Without one, the gutter. Phones use the md gutter on both sides.
|
|
3094
|
+
A sticky bar can't be an anchor (anchor() reads where it would be unstuck); while one shows, the app raises the
|
|
3095
|
+
toasts by setting `--sc-toast-offset-block-end` (on :root, for example) to the room it needs. */
|
|
3096
|
+
.sc-toast-viewport {
|
|
3097
|
+
--_gutter: var(--sc-spacing-lg);
|
|
3098
|
+
--_bottom: calc(var(--_gutter) + var(--sc-toast-offset-block-end, 0px) + env(safe-area-inset-bottom, 0px));
|
|
3099
|
+
position: fixed;
|
|
3100
|
+
inset-block-end: var(--_bottom);
|
|
3101
|
+
inset-inline-end: var(--_gutter);
|
|
3102
|
+
z-index: var(--sc-z-toast);
|
|
3103
|
+
display: flex;
|
|
3104
|
+
flex-direction: column;
|
|
3105
|
+
align-items: flex-end;
|
|
3106
|
+
gap: var(--sc-spacing-xs);
|
|
3107
|
+
inline-size: min(360px, 100vw - 2 * var(--_gutter));
|
|
3108
|
+
outline: none;
|
|
3109
|
+
}
|
|
3110
|
+
@supports (anchor-name: --a) {
|
|
3111
|
+
.sc-toast-viewport {
|
|
3112
|
+
inset-block-end: max(var(--_bottom), calc(anchor(--sc-bottom-bar top, 0px) + var(--sc-spacing-xs)));
|
|
3113
|
+
}
|
|
3114
|
+
}
|
|
3115
|
+
@media (width < 640px) {
|
|
3116
|
+
.sc-toast-viewport {
|
|
3117
|
+
--_gutter: var(--sc-spacing-md);
|
|
3118
|
+
}
|
|
3119
|
+
}
|
|
3120
|
+
/* A raised surface, so washes inside use the raised tokens (docs/adr/0003). */
|
|
3121
|
+
.sc-toast {
|
|
3122
|
+
--sc-color-surface-hover: var(--sc-color-surface-raised-hover);
|
|
3123
|
+
--sc-color-surface-active: var(--sc-color-surface-raised-active);
|
|
3124
|
+
box-sizing: border-box;
|
|
3125
|
+
display: flex;
|
|
3126
|
+
align-items: center;
|
|
3127
|
+
gap: var(--sc-spacing-xs);
|
|
3128
|
+
inline-size: 100%;
|
|
3129
|
+
padding: var(--sc-spacing-xs) var(--sc-spacing-xs) var(--sc-spacing-xs) var(--sc-spacing-sm);
|
|
3130
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
3131
|
+
border-inline-start: var(--sc-border-width-focus) solid var(--sc-color-border-strong);
|
|
3132
|
+
border-radius: var(--sc-radius-lg);
|
|
3133
|
+
background: var(--sc-color-surface-raised);
|
|
3134
|
+
box-shadow: var(--sc-elevation-2);
|
|
3135
|
+
color: var(--sc-color-text-default);
|
|
3136
|
+
font-family: var(--sc-font-family-sans);
|
|
3137
|
+
font-size: var(--sc-font-size-sm);
|
|
3138
|
+
line-height: var(--sc-font-line-height-ui);
|
|
3139
|
+
transition:
|
|
3140
|
+
opacity var(--sc-duration-fast) var(--sc-ease-standard),
|
|
3141
|
+
translate var(--sc-duration-fast) var(--sc-ease-standard);
|
|
3142
|
+
}
|
|
3143
|
+
.sc-toast:focus-visible {
|
|
3144
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
3145
|
+
outline-offset: var(--sc-border-width-focus);
|
|
3146
|
+
}
|
|
3147
|
+
.sc-toast[data-tone='success'] {
|
|
3148
|
+
border-inline-start-color: var(--sc-color-success-solid);
|
|
3149
|
+
}
|
|
3150
|
+
.sc-toast[data-tone='danger'] {
|
|
3151
|
+
border-inline-start-color: var(--sc-color-danger-solid);
|
|
3152
|
+
}
|
|
3153
|
+
/* Filled; the fill, text and button states come from the .sc-on-accent scope (base.css). */
|
|
3154
|
+
.sc-toast[data-tone='accent'] {
|
|
3155
|
+
border-color: var(--sc-color-accent-default);
|
|
3156
|
+
}
|
|
3157
|
+
.sc-toast[data-starting-style],
|
|
3158
|
+
.sc-toast[data-ending-style] {
|
|
3159
|
+
opacity: 0;
|
|
3160
|
+
translate: 0 var(--sc-spacing-xs);
|
|
3161
|
+
}
|
|
3162
|
+
.sc-toast__content {
|
|
3163
|
+
flex: 1 1 auto;
|
|
3164
|
+
min-inline-size: 0;
|
|
3165
|
+
}
|
|
3166
|
+
.sc-toast__title {
|
|
3167
|
+
margin: 0;
|
|
3168
|
+
font-size: inherit;
|
|
3169
|
+
font-weight: var(--sc-font-weight-medium);
|
|
3170
|
+
}
|
|
3171
|
+
.sc-toast__description {
|
|
3172
|
+
margin: 0;
|
|
3173
|
+
color: var(--sc-color-text-muted);
|
|
3174
|
+
font-size: var(--sc-font-size-xs);
|
|
3175
|
+
}
|
|
3176
|
+
.sc-toast__action,
|
|
3177
|
+
.sc-toast__close {
|
|
3178
|
+
flex: none;
|
|
3179
|
+
}
|
|
3180
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3181
|
+
.sc-toast {
|
|
3182
|
+
transition: none;
|
|
3183
|
+
}
|
|
3184
|
+
.sc-toast[data-starting-style],
|
|
3185
|
+
.sc-toast[data-ending-style] {
|
|
3186
|
+
translate: none;
|
|
3187
|
+
}
|
|
3188
|
+
}
|
|
3189
|
+
|
|
2026
3190
|
/* ---- stat.css ---- */
|
|
2027
3191
|
/* ---- Stat ------------------------------------------------------------------ */
|
|
2028
3192
|
.sc-stat {
|
|
@@ -2114,4 +3278,2626 @@
|
|
|
2114
3278
|
font-size: var(--sc-font-size-xs);
|
|
2115
3279
|
}
|
|
2116
3280
|
|
|
3281
|
+
/* ---- chip.css ---- */
|
|
3282
|
+
/* ---- Chip ------------------------------------------------------------------ */
|
|
3283
|
+
.sc-chip {
|
|
3284
|
+
--_h: var(--sc-size-control-sm);
|
|
3285
|
+
--_px: var(--sc-spacing-sm);
|
|
3286
|
+
--_fs: var(--sc-font-size-sm);
|
|
3287
|
+
--_icon: var(--sc-size-icon-sm);
|
|
3288
|
+
--_bg: transparent;
|
|
3289
|
+
--_fg: var(--sc-color-text-default);
|
|
3290
|
+
--_bd: var(--sc-color-border-strong);
|
|
3291
|
+
--_bg-hover: var(--sc-color-surface-hover);
|
|
3292
|
+
--_bg-on: var(--sc-color-surface-active);
|
|
3293
|
+
--_fg-on: var(--sc-color-text-default);
|
|
3294
|
+
--_bd-on: var(--sc-color-text-muted);
|
|
3295
|
+
position: relative;
|
|
3296
|
+
display: inline-flex;
|
|
3297
|
+
align-items: center;
|
|
3298
|
+
box-sizing: border-box;
|
|
3299
|
+
max-inline-size: 100%;
|
|
3300
|
+
block-size: var(--_h);
|
|
3301
|
+
border-radius: var(--sc-radius-full);
|
|
3302
|
+
border: var(--sc-border-width-hairline) solid var(--_bd);
|
|
3303
|
+
background: var(--_bg);
|
|
3304
|
+
color: var(--_fg);
|
|
3305
|
+
font-family: var(--sc-font-family-sans);
|
|
3306
|
+
font-size: var(--_fs);
|
|
3307
|
+
font-weight: var(--sc-font-weight-medium);
|
|
3308
|
+
line-height: 1;
|
|
3309
|
+
white-space: nowrap;
|
|
3310
|
+
transition:
|
|
3311
|
+
background-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
3312
|
+
border-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
3313
|
+
color var(--sc-duration-fast) var(--sc-ease-standard);
|
|
3314
|
+
}
|
|
3315
|
+
.sc-chip[data-size='sm'] {
|
|
3316
|
+
--_h: var(--sc-size-badge-md);
|
|
3317
|
+
--_px: var(--sc-spacing-xs);
|
|
3318
|
+
--_fs: var(--sc-font-size-xs);
|
|
3319
|
+
--_icon: var(--sc-size-icon-xs);
|
|
3320
|
+
}
|
|
3321
|
+
.sc-chip[data-selected] {
|
|
3322
|
+
--_bg: var(--_bg-on);
|
|
3323
|
+
--_fg: var(--_fg-on);
|
|
3324
|
+
--_bd: var(--_bd-on);
|
|
3325
|
+
}
|
|
3326
|
+
.sc-chip[data-disabled] {
|
|
3327
|
+
opacity: 0.5;
|
|
3328
|
+
}
|
|
3329
|
+
/* The text, or the toggle button that holds it. */
|
|
3330
|
+
.sc-chip__action,
|
|
3331
|
+
.sc-chip > .sc-chip__icon,
|
|
3332
|
+
.sc-chip > .sc-chip__label {
|
|
3333
|
+
display: inline-flex;
|
|
3334
|
+
align-items: center;
|
|
3335
|
+
min-inline-size: 0;
|
|
3336
|
+
}
|
|
3337
|
+
.sc-chip > .sc-chip__icon {
|
|
3338
|
+
margin-inline-start: var(--_px);
|
|
3339
|
+
}
|
|
3340
|
+
.sc-chip > .sc-chip__label {
|
|
3341
|
+
padding-inline: var(--_px);
|
|
3342
|
+
}
|
|
3343
|
+
.sc-chip > .sc-chip__icon + .sc-chip__label {
|
|
3344
|
+
padding-inline-start: var(--sc-spacing-2xs);
|
|
3345
|
+
}
|
|
3346
|
+
.sc-chip__action {
|
|
3347
|
+
gap: var(--sc-spacing-2xs);
|
|
3348
|
+
box-sizing: border-box;
|
|
3349
|
+
block-size: 100%;
|
|
3350
|
+
margin: 0;
|
|
3351
|
+
padding-inline: var(--_px);
|
|
3352
|
+
border: 0;
|
|
3353
|
+
border-radius: inherit;
|
|
3354
|
+
background: transparent;
|
|
3355
|
+
color: inherit;
|
|
3356
|
+
font: inherit;
|
|
3357
|
+
line-height: 1;
|
|
3358
|
+
cursor: pointer;
|
|
3359
|
+
}
|
|
3360
|
+
.sc-chip__action:hover:not(:disabled) {
|
|
3361
|
+
background: var(--_bg-hover);
|
|
3362
|
+
}
|
|
3363
|
+
.sc-chip[data-selected] > .sc-chip__action:hover:not(:disabled) {
|
|
3364
|
+
background: transparent;
|
|
3365
|
+
filter: brightness(0.97);
|
|
3366
|
+
}
|
|
3367
|
+
.sc-chip__action:disabled {
|
|
3368
|
+
cursor: not-allowed;
|
|
3369
|
+
}
|
|
3370
|
+
.sc-chip__icon {
|
|
3371
|
+
flex: none;
|
|
3372
|
+
inline-size: var(--_icon);
|
|
3373
|
+
block-size: var(--_icon);
|
|
3374
|
+
}
|
|
3375
|
+
.sc-chip__icon > svg {
|
|
3376
|
+
inline-size: 100%;
|
|
3377
|
+
block-size: 100%;
|
|
3378
|
+
}
|
|
3379
|
+
/* The label clips for the ellipsis, so it needs a real line box or descenders get cut (the chip sets line-height: 1). */
|
|
3380
|
+
.sc-chip__label {
|
|
3381
|
+
overflow: hidden;
|
|
3382
|
+
text-overflow: ellipsis;
|
|
3383
|
+
line-height: var(--sc-font-line-height-ui);
|
|
3384
|
+
}
|
|
3385
|
+
.sc-chip[data-removable] > .sc-chip__action,
|
|
3386
|
+
.sc-chip[data-removable] > .sc-chip__label {
|
|
3387
|
+
padding-inline-end: var(--sc-spacing-2xs);
|
|
3388
|
+
}
|
|
3389
|
+
.sc-chip__remove {
|
|
3390
|
+
flex: none;
|
|
3391
|
+
display: inline-grid;
|
|
3392
|
+
place-items: center;
|
|
3393
|
+
box-sizing: border-box;
|
|
3394
|
+
inline-size: calc(var(--_h) - 2 * var(--sc-spacing-2xs) - 2px);
|
|
3395
|
+
block-size: calc(var(--_h) - 2 * var(--sc-spacing-2xs) - 2px);
|
|
3396
|
+
margin-inline-end: var(--sc-spacing-2xs);
|
|
3397
|
+
padding: 0;
|
|
3398
|
+
border: 0;
|
|
3399
|
+
border-radius: var(--sc-radius-full);
|
|
3400
|
+
background: transparent;
|
|
3401
|
+
color: inherit;
|
|
3402
|
+
opacity: 0.7;
|
|
3403
|
+
cursor: pointer;
|
|
3404
|
+
}
|
|
3405
|
+
.sc-chip__remove:hover:not(:disabled) {
|
|
3406
|
+
opacity: 1;
|
|
3407
|
+
background: var(--_bg-hover);
|
|
3408
|
+
}
|
|
3409
|
+
.sc-chip__remove:disabled {
|
|
3410
|
+
cursor: not-allowed;
|
|
3411
|
+
}
|
|
3412
|
+
.sc-chip__action:focus-visible,
|
|
3413
|
+
.sc-chip__remove:focus-visible {
|
|
3414
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
3415
|
+
outline-offset: 0;
|
|
3416
|
+
}
|
|
3417
|
+
/* 44px hit area on touch without changing layout. */
|
|
3418
|
+
@media (pointer: coarse) {
|
|
3419
|
+
.sc-chip__action::after,
|
|
3420
|
+
.sc-chip__remove::after {
|
|
3421
|
+
content: '';
|
|
3422
|
+
position: absolute;
|
|
3423
|
+
inset: 50% auto auto 50%;
|
|
3424
|
+
translate: -50% -50%;
|
|
3425
|
+
inline-size: max(100%, var(--sc-size-touch-target));
|
|
3426
|
+
block-size: max(100%, var(--sc-size-touch-target));
|
|
3427
|
+
}
|
|
3428
|
+
.sc-chip__action,
|
|
3429
|
+
.sc-chip__remove {
|
|
3430
|
+
position: relative;
|
|
3431
|
+
}
|
|
3432
|
+
}
|
|
3433
|
+
/* Tones: soft fill when selected, tinted outline otherwise. */
|
|
3434
|
+
.sc-chip[data-tone='accent'] {
|
|
3435
|
+
--_fg: var(--sc-color-accent-text);
|
|
3436
|
+
--_bd: var(--sc-color-accent-text);
|
|
3437
|
+
--_bg-hover: var(--sc-color-accent-subtle);
|
|
3438
|
+
--_bg-on: var(--sc-color-accent-subtle);
|
|
3439
|
+
--_fg-on: var(--sc-color-accent-text);
|
|
3440
|
+
--_bd-on: var(--sc-color-accent-default);
|
|
3441
|
+
}
|
|
3442
|
+
.sc-chip[data-tone='success'] {
|
|
3443
|
+
--_fg: var(--sc-color-success-text);
|
|
3444
|
+
--_bd: var(--sc-color-success-text);
|
|
3445
|
+
--_bg-hover: var(--sc-color-success-subtle);
|
|
3446
|
+
--_bg-on: var(--sc-color-success-subtle);
|
|
3447
|
+
--_fg-on: var(--sc-color-success-text);
|
|
3448
|
+
--_bd-on: var(--sc-color-success-solid);
|
|
3449
|
+
}
|
|
3450
|
+
.sc-chip[data-tone='warning'] {
|
|
3451
|
+
--_fg: var(--sc-color-warning-text);
|
|
3452
|
+
--_bd: var(--sc-color-warning-text);
|
|
3453
|
+
--_bg-hover: var(--sc-color-warning-subtle);
|
|
3454
|
+
--_bg-on: var(--sc-color-warning-subtle);
|
|
3455
|
+
--_fg-on: var(--sc-color-warning-text);
|
|
3456
|
+
--_bd-on: var(--sc-color-warning-solid);
|
|
3457
|
+
}
|
|
3458
|
+
.sc-chip[data-tone='danger'] {
|
|
3459
|
+
--_fg: var(--sc-color-danger-text);
|
|
3460
|
+
--_bd: var(--sc-color-danger-text);
|
|
3461
|
+
--_bg-hover: var(--sc-color-danger-subtle);
|
|
3462
|
+
--_bg-on: var(--sc-color-danger-subtle);
|
|
3463
|
+
--_fg-on: var(--sc-color-danger-text);
|
|
3464
|
+
--_bd-on: var(--sc-color-danger-solid);
|
|
3465
|
+
}
|
|
3466
|
+
.sc-chip[data-tone='info'] {
|
|
3467
|
+
--_fg: var(--sc-color-info-text);
|
|
3468
|
+
--_bd: var(--sc-color-info-text);
|
|
3469
|
+
--_bg-hover: var(--sc-color-info-subtle);
|
|
3470
|
+
--_bg-on: var(--sc-color-info-subtle);
|
|
3471
|
+
--_fg-on: var(--sc-color-info-text);
|
|
3472
|
+
--_bd-on: var(--sc-color-info-solid);
|
|
3473
|
+
}
|
|
3474
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3475
|
+
.sc-chip {
|
|
3476
|
+
transition: none;
|
|
3477
|
+
}
|
|
3478
|
+
}
|
|
3479
|
+
|
|
3480
|
+
/* ---- disclosure.css ---- */
|
|
3481
|
+
/* ---- Disclosure ------------------------------------------------------------ */
|
|
3482
|
+
.sc-disclosure {
|
|
3483
|
+
display: flex;
|
|
3484
|
+
flex-direction: column;
|
|
3485
|
+
gap: var(--sc-spacing-xs);
|
|
3486
|
+
min-inline-size: 0;
|
|
3487
|
+
font-family: var(--sc-font-family-sans);
|
|
3488
|
+
font-size: var(--sc-font-size-sm);
|
|
3489
|
+
line-height: var(--sc-font-line-height-normal);
|
|
3490
|
+
color: var(--sc-color-text-default);
|
|
3491
|
+
}
|
|
3492
|
+
.sc-disclosure__summary {
|
|
3493
|
+
display: inline-flex;
|
|
3494
|
+
align-items: center;
|
|
3495
|
+
gap: var(--sc-spacing-2xs);
|
|
3496
|
+
inline-size: fit-content;
|
|
3497
|
+
margin-inline: calc(-1 * var(--sc-spacing-2xs));
|
|
3498
|
+
padding: var(--sc-spacing-2xs);
|
|
3499
|
+
border-radius: var(--sc-radius-sm);
|
|
3500
|
+
color: var(--sc-color-accent-text);
|
|
3501
|
+
font-weight: var(--sc-font-weight-medium);
|
|
3502
|
+
line-height: var(--sc-font-line-height-ui);
|
|
3503
|
+
list-style: none;
|
|
3504
|
+
cursor: pointer;
|
|
3505
|
+
user-select: none;
|
|
3506
|
+
}
|
|
3507
|
+
.sc-disclosure__summary::-webkit-details-marker,
|
|
3508
|
+
.sc-disclosure__summary::marker {
|
|
3509
|
+
display: none;
|
|
3510
|
+
content: '';
|
|
3511
|
+
}
|
|
3512
|
+
.sc-disclosure__summary:hover {
|
|
3513
|
+
background: var(--sc-color-surface-hover);
|
|
3514
|
+
}
|
|
3515
|
+
.sc-disclosure__summary:focus-visible {
|
|
3516
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
3517
|
+
outline-offset: 0;
|
|
3518
|
+
}
|
|
3519
|
+
.sc-disclosure__chevron {
|
|
3520
|
+
flex: none;
|
|
3521
|
+
inline-size: var(--sc-size-icon-md);
|
|
3522
|
+
block-size: var(--sc-size-icon-md);
|
|
3523
|
+
transition: rotate var(--sc-duration-fast) var(--sc-ease-standard);
|
|
3524
|
+
}
|
|
3525
|
+
.sc-disclosure[open] > .sc-disclosure__summary > .sc-disclosure__chevron {
|
|
3526
|
+
rotate: 180deg;
|
|
3527
|
+
}
|
|
3528
|
+
.sc-disclosure[data-summary-position='end'] > .sc-disclosure__summary {
|
|
3529
|
+
order: 1;
|
|
3530
|
+
}
|
|
3531
|
+
.sc-disclosure__content {
|
|
3532
|
+
min-inline-size: 0;
|
|
3533
|
+
}
|
|
3534
|
+
/* Preview: while closed, the content stays rendered, clipped to N lines and faded. Browsers without
|
|
3535
|
+
`::details-content` keep the native behaviour (content hidden until open). */
|
|
3536
|
+
.sc-disclosure[data-preview]:not([open])::details-content {
|
|
3537
|
+
content-visibility: visible;
|
|
3538
|
+
display: block;
|
|
3539
|
+
max-block-size: calc(var(--_lines, 3) * 1lh);
|
|
3540
|
+
overflow: clip;
|
|
3541
|
+
mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
|
|
3542
|
+
}
|
|
3543
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3544
|
+
.sc-disclosure__chevron {
|
|
3545
|
+
transition: none;
|
|
3546
|
+
}
|
|
3547
|
+
}
|
|
3548
|
+
|
|
3549
|
+
/* ---- empty-state.css ---- */
|
|
3550
|
+
/* ---- EmptyState ------------------------------------------------------------ */
|
|
3551
|
+
.sc-empty-state {
|
|
3552
|
+
--_icon: var(--sc-size-icon-xl);
|
|
3553
|
+
--_ring: 48px;
|
|
3554
|
+
--_py: var(--sc-spacing-2xl);
|
|
3555
|
+
--_title: var(--sc-font-size-lg);
|
|
3556
|
+
display: flex;
|
|
3557
|
+
flex-direction: column;
|
|
3558
|
+
align-items: center;
|
|
3559
|
+
gap: var(--sc-spacing-xs);
|
|
3560
|
+
box-sizing: border-box;
|
|
3561
|
+
inline-size: 100%;
|
|
3562
|
+
margin: 0;
|
|
3563
|
+
padding: var(--_py) var(--sc-spacing-lg);
|
|
3564
|
+
list-style: none;
|
|
3565
|
+
text-align: center;
|
|
3566
|
+
font-family: var(--sc-font-family-sans);
|
|
3567
|
+
color: var(--sc-color-text-default);
|
|
3568
|
+
}
|
|
3569
|
+
.sc-empty-state[data-size='sm'] {
|
|
3570
|
+
--_icon: var(--sc-size-icon-lg);
|
|
3571
|
+
--_ring: 40px;
|
|
3572
|
+
--_py: var(--sc-spacing-lg);
|
|
3573
|
+
--_title: var(--sc-font-size-md);
|
|
3574
|
+
gap: var(--sc-spacing-2xs);
|
|
3575
|
+
}
|
|
3576
|
+
.sc-empty-state__icon {
|
|
3577
|
+
display: inline-grid;
|
|
3578
|
+
place-items: center;
|
|
3579
|
+
inline-size: var(--_ring);
|
|
3580
|
+
block-size: var(--_ring);
|
|
3581
|
+
margin-block-end: var(--sc-spacing-xs);
|
|
3582
|
+
border-radius: var(--sc-radius-full);
|
|
3583
|
+
background: var(--sc-color-surface-sunken);
|
|
3584
|
+
color: var(--sc-color-text-muted);
|
|
3585
|
+
}
|
|
3586
|
+
.sc-empty-state__icon > svg {
|
|
3587
|
+
inline-size: var(--_icon);
|
|
3588
|
+
block-size: var(--_icon);
|
|
3589
|
+
}
|
|
3590
|
+
.sc-empty-state__title {
|
|
3591
|
+
margin: 0;
|
|
3592
|
+
max-inline-size: 36ch;
|
|
3593
|
+
font-size: var(--_title);
|
|
3594
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
3595
|
+
line-height: var(--sc-font-line-height-snug);
|
|
3596
|
+
letter-spacing: var(--sc-font-tracking-snug);
|
|
3597
|
+
text-wrap: balance;
|
|
3598
|
+
}
|
|
3599
|
+
.sc-empty-state__description {
|
|
3600
|
+
margin: 0;
|
|
3601
|
+
max-inline-size: 48ch;
|
|
3602
|
+
font-size: var(--sc-font-size-sm);
|
|
3603
|
+
line-height: var(--sc-font-line-height-normal);
|
|
3604
|
+
color: var(--sc-color-text-muted);
|
|
3605
|
+
text-wrap: pretty;
|
|
3606
|
+
}
|
|
3607
|
+
.sc-empty-state__actions {
|
|
3608
|
+
display: flex;
|
|
3609
|
+
flex-wrap: wrap;
|
|
3610
|
+
justify-content: center;
|
|
3611
|
+
gap: var(--sc-spacing-xs);
|
|
3612
|
+
margin-block-start: var(--sc-spacing-sm);
|
|
3613
|
+
}
|
|
3614
|
+
|
|
3615
|
+
/* ---- skeleton.css ---- */
|
|
3616
|
+
/* ---- Skeleton -------------------------------------------------------------- */
|
|
3617
|
+
.sc-skeleton {
|
|
3618
|
+
--_base: var(--sc-color-surface-active);
|
|
3619
|
+
--_sheen: var(--sc-color-surface-hover);
|
|
3620
|
+
display: block;
|
|
3621
|
+
box-sizing: border-box;
|
|
3622
|
+
inline-size: 100%;
|
|
3623
|
+
block-size: 1em;
|
|
3624
|
+
border-radius: var(--sc-radius-sm);
|
|
3625
|
+
background: var(--_base);
|
|
3626
|
+
background-image: linear-gradient(90deg, var(--_base) 0%, var(--_sheen) 50%, var(--_base) 100%);
|
|
3627
|
+
background-size: 200% 100%;
|
|
3628
|
+
animation: sc-shimmer 1.6s ease-in-out infinite;
|
|
3629
|
+
}
|
|
3630
|
+
.sc-skeleton[data-variant='text'] {
|
|
3631
|
+
display: inline-block;
|
|
3632
|
+
vertical-align: middle;
|
|
3633
|
+
block-size: 1em;
|
|
3634
|
+
border-radius: var(--sc-radius-sm);
|
|
3635
|
+
}
|
|
3636
|
+
.sc-skeleton[data-variant='rect'] {
|
|
3637
|
+
block-size: 80px;
|
|
3638
|
+
border-radius: var(--sc-radius-md);
|
|
3639
|
+
}
|
|
3640
|
+
.sc-skeleton[data-variant='circle'] {
|
|
3641
|
+
inline-size: 40px;
|
|
3642
|
+
aspect-ratio: 1;
|
|
3643
|
+
block-size: auto;
|
|
3644
|
+
border-radius: var(--sc-radius-full);
|
|
3645
|
+
}
|
|
3646
|
+
.sc-skeleton[data-still] {
|
|
3647
|
+
animation: none;
|
|
3648
|
+
background-image: none;
|
|
3649
|
+
}
|
|
3650
|
+
.sc-skeleton-lines {
|
|
3651
|
+
display: flex;
|
|
3652
|
+
flex-direction: column;
|
|
3653
|
+
gap: calc(1lh - 1em);
|
|
3654
|
+
inline-size: 100%;
|
|
3655
|
+
}
|
|
3656
|
+
.sc-skeleton-lines > .sc-skeleton {
|
|
3657
|
+
display: block;
|
|
3658
|
+
}
|
|
3659
|
+
.sc-skeleton-lines > .sc-skeleton[data-last] {
|
|
3660
|
+
inline-size: 60%;
|
|
3661
|
+
}
|
|
3662
|
+
@keyframes sc-shimmer {
|
|
3663
|
+
from {
|
|
3664
|
+
background-position: 200% 0;
|
|
3665
|
+
}
|
|
3666
|
+
to {
|
|
3667
|
+
background-position: -200% 0;
|
|
3668
|
+
}
|
|
3669
|
+
}
|
|
3670
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3671
|
+
.sc-skeleton {
|
|
3672
|
+
animation: none;
|
|
3673
|
+
background-image: none;
|
|
3674
|
+
}
|
|
3675
|
+
}
|
|
3676
|
+
|
|
3677
|
+
/* ---- filepond/dist/filepond.css ---- */
|
|
3678
|
+
/*!
|
|
3679
|
+
* FilePond 4.32.12
|
|
3680
|
+
* Licensed under MIT, https://opensource.org/licenses/MIT/
|
|
3681
|
+
* Please visit https://pqina.nl/filepond/ for details.
|
|
3682
|
+
*/
|
|
3683
|
+
|
|
3684
|
+
/* eslint-disable */
|
|
3685
|
+
.filepond--assistant {
|
|
3686
|
+
position: absolute;
|
|
3687
|
+
overflow: hidden;
|
|
3688
|
+
height: 1px;
|
|
3689
|
+
width: 1px;
|
|
3690
|
+
padding: 0;
|
|
3691
|
+
border: 0;
|
|
3692
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
3693
|
+
-webkit-clip-path: inset(50%);
|
|
3694
|
+
clip-path: inset(50%);
|
|
3695
|
+
white-space: nowrap;
|
|
3696
|
+
}
|
|
3697
|
+
/* Hard to override styles */
|
|
3698
|
+
.filepond--browser.filepond--browser {
|
|
3699
|
+
/* is positioned absolute so it is focusable for form validation errors */
|
|
3700
|
+
position: absolute;
|
|
3701
|
+
margin: 0;
|
|
3702
|
+
padding: 0;
|
|
3703
|
+
|
|
3704
|
+
/* is positioned ~behind drop label */
|
|
3705
|
+
left: 1em;
|
|
3706
|
+
top: 1.75em;
|
|
3707
|
+
width: calc(100% - 2em);
|
|
3708
|
+
|
|
3709
|
+
/* hide visually */
|
|
3710
|
+
opacity: 0;
|
|
3711
|
+
font-size: 0; /* removes text cursor in Internet Explorer 11 */
|
|
3712
|
+
}
|
|
3713
|
+
.filepond--data {
|
|
3714
|
+
position: absolute;
|
|
3715
|
+
width: 0;
|
|
3716
|
+
height: 0;
|
|
3717
|
+
padding: 0;
|
|
3718
|
+
margin: 0;
|
|
3719
|
+
border: none;
|
|
3720
|
+
visibility: hidden;
|
|
3721
|
+
pointer-events: none;
|
|
3722
|
+
contain: strict;
|
|
3723
|
+
}
|
|
3724
|
+
.filepond--drip {
|
|
3725
|
+
position: absolute;
|
|
3726
|
+
top: 0;
|
|
3727
|
+
left: 0;
|
|
3728
|
+
right: 0;
|
|
3729
|
+
bottom: 0;
|
|
3730
|
+
overflow: hidden;
|
|
3731
|
+
opacity: 0.1;
|
|
3732
|
+
|
|
3733
|
+
/* can't interact with this element */
|
|
3734
|
+
pointer-events: none;
|
|
3735
|
+
|
|
3736
|
+
/* inherit border radius from parent (needed for drip-blob cut of) */
|
|
3737
|
+
border-radius: 0.5em;
|
|
3738
|
+
|
|
3739
|
+
/* this seems to prevent Chrome from redrawing this layer constantly */
|
|
3740
|
+
background: rgba(0, 0, 0, 0.01);
|
|
3741
|
+
}
|
|
3742
|
+
.filepond--drip-blob {
|
|
3743
|
+
position: absolute;
|
|
3744
|
+
-webkit-transform-origin: center center;
|
|
3745
|
+
transform-origin: center center;
|
|
3746
|
+
top: 0;
|
|
3747
|
+
left: 0;
|
|
3748
|
+
width: 8em;
|
|
3749
|
+
height: 8em;
|
|
3750
|
+
margin-left: -4em;
|
|
3751
|
+
margin-top: -4em;
|
|
3752
|
+
background: #292625;
|
|
3753
|
+
border-radius: 50%;
|
|
3754
|
+
|
|
3755
|
+
/* will be animated */
|
|
3756
|
+
will-change: transform, opacity;
|
|
3757
|
+
}
|
|
3758
|
+
.filepond--drop-label {
|
|
3759
|
+
position: absolute;
|
|
3760
|
+
left: 0;
|
|
3761
|
+
right: 0;
|
|
3762
|
+
top: 0;
|
|
3763
|
+
margin: 0;
|
|
3764
|
+
color: #4f4f4f;
|
|
3765
|
+
|
|
3766
|
+
/* center contents */
|
|
3767
|
+
display: flex;
|
|
3768
|
+
justify-content: center;
|
|
3769
|
+
align-items: center;
|
|
3770
|
+
|
|
3771
|
+
/* fixes IE11 centering problems (is overruled by label min-height) */
|
|
3772
|
+
height: 0px;
|
|
3773
|
+
|
|
3774
|
+
/* dont allow selection */
|
|
3775
|
+
-webkit-user-select: none;
|
|
3776
|
+
-moz-user-select: none;
|
|
3777
|
+
-ms-user-select: none;
|
|
3778
|
+
user-select: none;
|
|
3779
|
+
|
|
3780
|
+
/* will be animated */
|
|
3781
|
+
will-change: transform, opacity;
|
|
3782
|
+
}
|
|
3783
|
+
/* Hard to override styles on purpose */
|
|
3784
|
+
.filepond--drop-label.filepond--drop-label label {
|
|
3785
|
+
display: block;
|
|
3786
|
+
margin: 0;
|
|
3787
|
+
padding: 0.5em; /* use padding instead of margin so click area is not impacted */
|
|
3788
|
+
}
|
|
3789
|
+
.filepond--drop-label label {
|
|
3790
|
+
cursor: default;
|
|
3791
|
+
font-size: 0.875em;
|
|
3792
|
+
font-weight: normal;
|
|
3793
|
+
text-align: center;
|
|
3794
|
+
line-height: 1.5;
|
|
3795
|
+
}
|
|
3796
|
+
.filepond--label-action {
|
|
3797
|
+
text-decoration: underline;
|
|
3798
|
+
-webkit-text-decoration-skip: ink;
|
|
3799
|
+
text-decoration-skip-ink: auto;
|
|
3800
|
+
-webkit-text-decoration-color: #a7a4a4;
|
|
3801
|
+
text-decoration-color: #a7a4a4;
|
|
3802
|
+
cursor: pointer;
|
|
3803
|
+
}
|
|
3804
|
+
.filepond--root[data-disabled] .filepond--drop-label label {
|
|
3805
|
+
opacity: 0.5;
|
|
3806
|
+
}
|
|
3807
|
+
/* Hard to override styles */
|
|
3808
|
+
.filepond--file-action-button.filepond--file-action-button {
|
|
3809
|
+
font-size: 1em;
|
|
3810
|
+
width: 1.625em;
|
|
3811
|
+
height: 1.625em;
|
|
3812
|
+
|
|
3813
|
+
font-family: inherit;
|
|
3814
|
+
line-height: inherit;
|
|
3815
|
+
|
|
3816
|
+
margin: 0;
|
|
3817
|
+
padding: 0;
|
|
3818
|
+
border: none;
|
|
3819
|
+
outline: none;
|
|
3820
|
+
|
|
3821
|
+
will-change: transform, opacity;
|
|
3822
|
+
|
|
3823
|
+
/* hidden label */
|
|
3824
|
+
}
|
|
3825
|
+
.filepond--file-action-button.filepond--file-action-button span {
|
|
3826
|
+
position: absolute;
|
|
3827
|
+
overflow: hidden;
|
|
3828
|
+
height: 1px;
|
|
3829
|
+
width: 1px;
|
|
3830
|
+
padding: 0;
|
|
3831
|
+
border: 0;
|
|
3832
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
3833
|
+
-webkit-clip-path: inset(50%);
|
|
3834
|
+
clip-path: inset(50%);
|
|
3835
|
+
white-space: nowrap;
|
|
3836
|
+
}
|
|
3837
|
+
.filepond--file-action-button.filepond--file-action-button {
|
|
3838
|
+
/* scale SVG to fill button */
|
|
3839
|
+
}
|
|
3840
|
+
.filepond--file-action-button.filepond--file-action-button svg {
|
|
3841
|
+
width: 100%;
|
|
3842
|
+
height: 100%;
|
|
3843
|
+
}
|
|
3844
|
+
.filepond--file-action-button.filepond--file-action-button {
|
|
3845
|
+
/* bigger touch area */
|
|
3846
|
+
}
|
|
3847
|
+
.filepond--file-action-button.filepond--file-action-button::after {
|
|
3848
|
+
position: absolute;
|
|
3849
|
+
left: -0.75em;
|
|
3850
|
+
right: -0.75em;
|
|
3851
|
+
top: -0.75em;
|
|
3852
|
+
bottom: -0.75em;
|
|
3853
|
+
content: '';
|
|
3854
|
+
}
|
|
3855
|
+
/* Soft styles */
|
|
3856
|
+
.filepond--file-action-button {
|
|
3857
|
+
/* use default arrow cursor */
|
|
3858
|
+
cursor: auto;
|
|
3859
|
+
|
|
3860
|
+
/* reset default button styles */
|
|
3861
|
+
color: #fff;
|
|
3862
|
+
|
|
3863
|
+
/* set default look n feel */
|
|
3864
|
+
border-radius: 50%;
|
|
3865
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
3866
|
+
background-image: none;
|
|
3867
|
+
|
|
3868
|
+
/* we animate box shadow on focus */
|
|
3869
|
+
/* it's only slightly slower than animating */
|
|
3870
|
+
/* a pseudo-element with transforms and renders */
|
|
3871
|
+
/* a lot better on chrome */
|
|
3872
|
+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
3873
|
+
transition: box-shadow 0.25s ease-in;
|
|
3874
|
+
}
|
|
3875
|
+
.filepond--file-action-button:hover,
|
|
3876
|
+
.filepond--file-action-button:focus {
|
|
3877
|
+
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
|
|
3878
|
+
}
|
|
3879
|
+
.filepond--file-action-button[disabled] {
|
|
3880
|
+
color: rgba(255, 255, 255, 0.5);
|
|
3881
|
+
background-color: rgba(0, 0, 0, 0.25);
|
|
3882
|
+
}
|
|
3883
|
+
.filepond--file-action-button[hidden] {
|
|
3884
|
+
display: none;
|
|
3885
|
+
}
|
|
3886
|
+
/* edit button */
|
|
3887
|
+
.filepond--action-edit-item.filepond--action-edit-item {
|
|
3888
|
+
width: 2em;
|
|
3889
|
+
height: 2em;
|
|
3890
|
+
padding: 0.1875em;
|
|
3891
|
+
}
|
|
3892
|
+
.filepond--action-edit-item.filepond--action-edit-item[data-align*='center'] {
|
|
3893
|
+
margin-left: -0.1875em;
|
|
3894
|
+
}
|
|
3895
|
+
.filepond--action-edit-item.filepond--action-edit-item[data-align*='bottom'] {
|
|
3896
|
+
margin-bottom: -0.1875em;
|
|
3897
|
+
}
|
|
3898
|
+
.filepond--action-edit-item-alt {
|
|
3899
|
+
border: none;
|
|
3900
|
+
line-height: inherit;
|
|
3901
|
+
background: transparent;
|
|
3902
|
+
font-family: inherit;
|
|
3903
|
+
color: inherit;
|
|
3904
|
+
outline: none;
|
|
3905
|
+
padding: 0;
|
|
3906
|
+
margin: 0 0 0 0.25em;
|
|
3907
|
+
pointer-events: all;
|
|
3908
|
+
position: absolute;
|
|
3909
|
+
}
|
|
3910
|
+
.filepond--action-edit-item-alt svg {
|
|
3911
|
+
width: 1.3125em;
|
|
3912
|
+
height: 1.3125em;
|
|
3913
|
+
}
|
|
3914
|
+
.filepond--action-edit-item-alt span {
|
|
3915
|
+
font-size: 0;
|
|
3916
|
+
opacity: 0;
|
|
3917
|
+
}
|
|
3918
|
+
.filepond--file-info {
|
|
3919
|
+
position: static;
|
|
3920
|
+
display: flex;
|
|
3921
|
+
flex-direction: column;
|
|
3922
|
+
align-items: flex-start;
|
|
3923
|
+
flex: 1;
|
|
3924
|
+
margin: 0 0.5em 0 0;
|
|
3925
|
+
min-width: 0;
|
|
3926
|
+
|
|
3927
|
+
/* will be animated */
|
|
3928
|
+
will-change: transform, opacity;
|
|
3929
|
+
|
|
3930
|
+
/* can't do anything with this info */
|
|
3931
|
+
pointer-events: none;
|
|
3932
|
+
-webkit-user-select: none;
|
|
3933
|
+
-moz-user-select: none;
|
|
3934
|
+
-ms-user-select: none;
|
|
3935
|
+
user-select: none;
|
|
3936
|
+
|
|
3937
|
+
/* no margins on children */
|
|
3938
|
+
}
|
|
3939
|
+
.filepond--file-info * {
|
|
3940
|
+
margin: 0;
|
|
3941
|
+
}
|
|
3942
|
+
.filepond--file-info {
|
|
3943
|
+
/* we don't want to have these overrules so these selectors are a bit more specific */
|
|
3944
|
+
}
|
|
3945
|
+
.filepond--file-info .filepond--file-info-main {
|
|
3946
|
+
font-size: 0.75em;
|
|
3947
|
+
line-height: 1.2;
|
|
3948
|
+
|
|
3949
|
+
/* we want ellipsis if this bar gets too wide */
|
|
3950
|
+
text-overflow: ellipsis;
|
|
3951
|
+
overflow: hidden;
|
|
3952
|
+
white-space: nowrap;
|
|
3953
|
+
width: 100%;
|
|
3954
|
+
}
|
|
3955
|
+
.filepond--file-info .filepond--file-info-sub {
|
|
3956
|
+
font-size: 0.625em;
|
|
3957
|
+
opacity: 0.5;
|
|
3958
|
+
transition: opacity 0.25s ease-in-out;
|
|
3959
|
+
white-space: nowrap;
|
|
3960
|
+
}
|
|
3961
|
+
.filepond--file-info .filepond--file-info-sub:empty {
|
|
3962
|
+
display: none;
|
|
3963
|
+
}
|
|
3964
|
+
.filepond--file-status {
|
|
3965
|
+
position: static;
|
|
3966
|
+
display: flex;
|
|
3967
|
+
flex-direction: column;
|
|
3968
|
+
align-items: flex-end;
|
|
3969
|
+
flex-grow: 0;
|
|
3970
|
+
flex-shrink: 0;
|
|
3971
|
+
|
|
3972
|
+
margin: 0;
|
|
3973
|
+
min-width: 2.25em;
|
|
3974
|
+
text-align: right;
|
|
3975
|
+
|
|
3976
|
+
/* will be animated */
|
|
3977
|
+
will-change: transform, opacity;
|
|
3978
|
+
|
|
3979
|
+
/* can't do anything with this info */
|
|
3980
|
+
pointer-events: none;
|
|
3981
|
+
-webkit-user-select: none;
|
|
3982
|
+
-moz-user-select: none;
|
|
3983
|
+
-ms-user-select: none;
|
|
3984
|
+
user-select: none;
|
|
3985
|
+
|
|
3986
|
+
/* no margins on children */
|
|
3987
|
+
}
|
|
3988
|
+
.filepond--file-status * {
|
|
3989
|
+
margin: 0;
|
|
3990
|
+
white-space: nowrap;
|
|
3991
|
+
}
|
|
3992
|
+
.filepond--file-status {
|
|
3993
|
+
/* font sizes */
|
|
3994
|
+
}
|
|
3995
|
+
.filepond--file-status .filepond--file-status-main {
|
|
3996
|
+
font-size: 0.75em;
|
|
3997
|
+
line-height: 1.2;
|
|
3998
|
+
}
|
|
3999
|
+
.filepond--file-status .filepond--file-status-sub {
|
|
4000
|
+
font-size: 0.625em;
|
|
4001
|
+
opacity: 0.5;
|
|
4002
|
+
transition: opacity 0.25s ease-in-out;
|
|
4003
|
+
}
|
|
4004
|
+
/* Hard to override styles */
|
|
4005
|
+
.filepond--file-wrapper.filepond--file-wrapper {
|
|
4006
|
+
border: none;
|
|
4007
|
+
margin: 0;
|
|
4008
|
+
padding: 0;
|
|
4009
|
+
min-width: 0;
|
|
4010
|
+
height: 100%;
|
|
4011
|
+
|
|
4012
|
+
/* hide legend for visual users */
|
|
4013
|
+
}
|
|
4014
|
+
.filepond--file-wrapper.filepond--file-wrapper > legend {
|
|
4015
|
+
position: absolute;
|
|
4016
|
+
overflow: hidden;
|
|
4017
|
+
height: 1px;
|
|
4018
|
+
width: 1px;
|
|
4019
|
+
padding: 0;
|
|
4020
|
+
border: 0;
|
|
4021
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
4022
|
+
-webkit-clip-path: inset(50%);
|
|
4023
|
+
clip-path: inset(50%);
|
|
4024
|
+
white-space: nowrap;
|
|
4025
|
+
}
|
|
4026
|
+
.filepond--file {
|
|
4027
|
+
position: static;
|
|
4028
|
+
display: flex;
|
|
4029
|
+
height: 100%;
|
|
4030
|
+
align-items: flex-start;
|
|
4031
|
+
|
|
4032
|
+
padding: 0.5625em 0.5625em;
|
|
4033
|
+
|
|
4034
|
+
color: #fff;
|
|
4035
|
+
border-radius: 0.5em;
|
|
4036
|
+
|
|
4037
|
+
/* control positions */
|
|
4038
|
+
}
|
|
4039
|
+
.filepond--file .filepond--file-status {
|
|
4040
|
+
margin-left: auto;
|
|
4041
|
+
margin-right: 2.25em;
|
|
4042
|
+
}
|
|
4043
|
+
.filepond--file .filepond--processing-complete-indicator {
|
|
4044
|
+
pointer-events: none;
|
|
4045
|
+
-webkit-user-select: none;
|
|
4046
|
+
-moz-user-select: none;
|
|
4047
|
+
-ms-user-select: none;
|
|
4048
|
+
user-select: none;
|
|
4049
|
+
z-index: 3;
|
|
4050
|
+
}
|
|
4051
|
+
.filepond--file .filepond--processing-complete-indicator,
|
|
4052
|
+
.filepond--file .filepond--progress-indicator,
|
|
4053
|
+
.filepond--file .filepond--file-action-button {
|
|
4054
|
+
position: absolute;
|
|
4055
|
+
}
|
|
4056
|
+
.filepond--file {
|
|
4057
|
+
/* .filepond--file-action-button */
|
|
4058
|
+
}
|
|
4059
|
+
.filepond--file [data-align*='left'] {
|
|
4060
|
+
left: 0.5625em;
|
|
4061
|
+
}
|
|
4062
|
+
.filepond--file [data-align*='right'] {
|
|
4063
|
+
right: 0.5625em;
|
|
4064
|
+
}
|
|
4065
|
+
.filepond--file [data-align*='center'] {
|
|
4066
|
+
left: calc(50% - 0.8125em); /* .8125 is half of button width */
|
|
4067
|
+
}
|
|
4068
|
+
.filepond--file [data-align*='bottom'] {
|
|
4069
|
+
bottom: 1.125em;
|
|
4070
|
+
}
|
|
4071
|
+
.filepond--file [data-align='center'] {
|
|
4072
|
+
top: calc(50% - 0.8125em);
|
|
4073
|
+
}
|
|
4074
|
+
.filepond--file .filepond--progress-indicator {
|
|
4075
|
+
margin-top: 0.1875em;
|
|
4076
|
+
}
|
|
4077
|
+
.filepond--file .filepond--progress-indicator[data-align*='right'] {
|
|
4078
|
+
margin-right: 0.1875em;
|
|
4079
|
+
}
|
|
4080
|
+
.filepond--file .filepond--progress-indicator[data-align*='left'] {
|
|
4081
|
+
margin-left: 0.1875em;
|
|
4082
|
+
}
|
|
4083
|
+
/* make sure text does not overlap */
|
|
4084
|
+
[data-filepond-item-state='cancelled'] .filepond--file-info,
|
|
4085
|
+
[data-filepond-item-state*='invalid'] .filepond--file-info,
|
|
4086
|
+
[data-filepond-item-state*='error'] .filepond--file-info {
|
|
4087
|
+
margin-right: 2.25em;
|
|
4088
|
+
}
|
|
4089
|
+
[data-filepond-item-state~='processing'] .filepond--file-status-sub {
|
|
4090
|
+
opacity: 0;
|
|
4091
|
+
}
|
|
4092
|
+
[data-filepond-item-state~='processing']
|
|
4093
|
+
.filepond--action-abort-item-processing
|
|
4094
|
+
~ .filepond--file-status
|
|
4095
|
+
.filepond--file-status-sub {
|
|
4096
|
+
opacity: 0.5;
|
|
4097
|
+
}
|
|
4098
|
+
[data-filepond-item-state='processing-error'] .filepond--file-status-sub {
|
|
4099
|
+
opacity: 0;
|
|
4100
|
+
}
|
|
4101
|
+
[data-filepond-item-state='processing-error']
|
|
4102
|
+
.filepond--action-retry-item-processing
|
|
4103
|
+
~ .filepond--file-status
|
|
4104
|
+
.filepond--file-status-sub {
|
|
4105
|
+
opacity: 0.5;
|
|
4106
|
+
}
|
|
4107
|
+
[data-filepond-item-state='processing-complete'] {
|
|
4108
|
+
/* busy state */
|
|
4109
|
+
}
|
|
4110
|
+
[data-filepond-item-state='processing-complete'] .filepond--action-revert-item-processing svg {
|
|
4111
|
+
-webkit-animation: fall 0.5s 0.125s linear both;
|
|
4112
|
+
animation: fall 0.5s 0.125s linear both;
|
|
4113
|
+
}
|
|
4114
|
+
[data-filepond-item-state='processing-complete'] {
|
|
4115
|
+
/* hide details by default, only show when can revert */
|
|
4116
|
+
}
|
|
4117
|
+
[data-filepond-item-state='processing-complete'] .filepond--file-status-sub {
|
|
4118
|
+
opacity: 0.5;
|
|
4119
|
+
}
|
|
4120
|
+
[data-filepond-item-state='processing-complete']
|
|
4121
|
+
.filepond--processing-complete-indicator:not([style*='hidden'])
|
|
4122
|
+
~ .filepond--file-status
|
|
4123
|
+
.filepond--file-status-sub {
|
|
4124
|
+
opacity: 0;
|
|
4125
|
+
}
|
|
4126
|
+
[data-filepond-item-state='processing-complete'] .filepond--file-info-sub {
|
|
4127
|
+
opacity: 0;
|
|
4128
|
+
}
|
|
4129
|
+
[data-filepond-item-state='processing-complete']
|
|
4130
|
+
.filepond--action-revert-item-processing
|
|
4131
|
+
~ .filepond--file-info
|
|
4132
|
+
.filepond--file-info-sub {
|
|
4133
|
+
opacity: 0.5;
|
|
4134
|
+
}
|
|
4135
|
+
/* file state can be invalid or error, both are visually similar but */
|
|
4136
|
+
/* having them as separate states might be useful */
|
|
4137
|
+
[data-filepond-item-state*='invalid'] .filepond--panel,
|
|
4138
|
+
[data-filepond-item-state*='invalid'] .filepond--file-wrapper,
|
|
4139
|
+
[data-filepond-item-state*='error'] .filepond--panel,
|
|
4140
|
+
[data-filepond-item-state*='error'] .filepond--file-wrapper {
|
|
4141
|
+
-webkit-animation: shake 0.65s linear both;
|
|
4142
|
+
animation: shake 0.65s linear both;
|
|
4143
|
+
}
|
|
4144
|
+
/* spins progress indicator when file is marked as busy */
|
|
4145
|
+
[data-filepond-item-state*='busy'] .filepond--progress-indicator svg {
|
|
4146
|
+
-webkit-animation: spin 1s linear infinite;
|
|
4147
|
+
animation: spin 1s linear infinite;
|
|
4148
|
+
}
|
|
4149
|
+
/**
|
|
4150
|
+
* States
|
|
4151
|
+
*/
|
|
4152
|
+
@-webkit-keyframes spin {
|
|
4153
|
+
0% {
|
|
4154
|
+
-webkit-transform: rotateZ(0deg);
|
|
4155
|
+
transform: rotateZ(0deg);
|
|
4156
|
+
}
|
|
4157
|
+
|
|
4158
|
+
100% {
|
|
4159
|
+
-webkit-transform: rotateZ(360deg);
|
|
4160
|
+
transform: rotateZ(360deg);
|
|
4161
|
+
}
|
|
4162
|
+
}
|
|
4163
|
+
@keyframes spin {
|
|
4164
|
+
0% {
|
|
4165
|
+
-webkit-transform: rotateZ(0deg);
|
|
4166
|
+
transform: rotateZ(0deg);
|
|
4167
|
+
}
|
|
4168
|
+
|
|
4169
|
+
100% {
|
|
4170
|
+
-webkit-transform: rotateZ(360deg);
|
|
4171
|
+
transform: rotateZ(360deg);
|
|
4172
|
+
}
|
|
4173
|
+
}
|
|
4174
|
+
@-webkit-keyframes shake {
|
|
4175
|
+
10%,
|
|
4176
|
+
90% {
|
|
4177
|
+
-webkit-transform: translateX(-0.0625em);
|
|
4178
|
+
transform: translateX(-0.0625em);
|
|
4179
|
+
}
|
|
4180
|
+
|
|
4181
|
+
20%,
|
|
4182
|
+
80% {
|
|
4183
|
+
-webkit-transform: translateX(0.125em);
|
|
4184
|
+
transform: translateX(0.125em);
|
|
4185
|
+
}
|
|
4186
|
+
|
|
4187
|
+
30%,
|
|
4188
|
+
50%,
|
|
4189
|
+
70% {
|
|
4190
|
+
-webkit-transform: translateX(-0.25em);
|
|
4191
|
+
transform: translateX(-0.25em);
|
|
4192
|
+
}
|
|
4193
|
+
|
|
4194
|
+
40%,
|
|
4195
|
+
60% {
|
|
4196
|
+
-webkit-transform: translateX(0.25em);
|
|
4197
|
+
transform: translateX(0.25em);
|
|
4198
|
+
}
|
|
4199
|
+
}
|
|
4200
|
+
@keyframes shake {
|
|
4201
|
+
10%,
|
|
4202
|
+
90% {
|
|
4203
|
+
-webkit-transform: translateX(-0.0625em);
|
|
4204
|
+
transform: translateX(-0.0625em);
|
|
4205
|
+
}
|
|
4206
|
+
|
|
4207
|
+
20%,
|
|
4208
|
+
80% {
|
|
4209
|
+
-webkit-transform: translateX(0.125em);
|
|
4210
|
+
transform: translateX(0.125em);
|
|
4211
|
+
}
|
|
4212
|
+
|
|
4213
|
+
30%,
|
|
4214
|
+
50%,
|
|
4215
|
+
70% {
|
|
4216
|
+
-webkit-transform: translateX(-0.25em);
|
|
4217
|
+
transform: translateX(-0.25em);
|
|
4218
|
+
}
|
|
4219
|
+
|
|
4220
|
+
40%,
|
|
4221
|
+
60% {
|
|
4222
|
+
-webkit-transform: translateX(0.25em);
|
|
4223
|
+
transform: translateX(0.25em);
|
|
4224
|
+
}
|
|
4225
|
+
}
|
|
4226
|
+
@-webkit-keyframes fall {
|
|
4227
|
+
0% {
|
|
4228
|
+
opacity: 0;
|
|
4229
|
+
-webkit-transform: scale(0.5);
|
|
4230
|
+
transform: scale(0.5);
|
|
4231
|
+
-webkit-animation-timing-function: ease-out;
|
|
4232
|
+
animation-timing-function: ease-out;
|
|
4233
|
+
}
|
|
4234
|
+
|
|
4235
|
+
70% {
|
|
4236
|
+
opacity: 1;
|
|
4237
|
+
-webkit-transform: scale(1.1);
|
|
4238
|
+
transform: scale(1.1);
|
|
4239
|
+
-webkit-animation-timing-function: ease-in-out;
|
|
4240
|
+
animation-timing-function: ease-in-out;
|
|
4241
|
+
}
|
|
4242
|
+
|
|
4243
|
+
100% {
|
|
4244
|
+
-webkit-transform: scale(1);
|
|
4245
|
+
transform: scale(1);
|
|
4246
|
+
-webkit-animation-timing-function: ease-out;
|
|
4247
|
+
animation-timing-function: ease-out;
|
|
4248
|
+
}
|
|
4249
|
+
}
|
|
4250
|
+
@keyframes fall {
|
|
4251
|
+
0% {
|
|
4252
|
+
opacity: 0;
|
|
4253
|
+
-webkit-transform: scale(0.5);
|
|
4254
|
+
transform: scale(0.5);
|
|
4255
|
+
-webkit-animation-timing-function: ease-out;
|
|
4256
|
+
animation-timing-function: ease-out;
|
|
4257
|
+
}
|
|
4258
|
+
|
|
4259
|
+
70% {
|
|
4260
|
+
opacity: 1;
|
|
4261
|
+
-webkit-transform: scale(1.1);
|
|
4262
|
+
transform: scale(1.1);
|
|
4263
|
+
-webkit-animation-timing-function: ease-in-out;
|
|
4264
|
+
animation-timing-function: ease-in-out;
|
|
4265
|
+
}
|
|
4266
|
+
|
|
4267
|
+
100% {
|
|
4268
|
+
-webkit-transform: scale(1);
|
|
4269
|
+
transform: scale(1);
|
|
4270
|
+
-webkit-animation-timing-function: ease-out;
|
|
4271
|
+
animation-timing-function: ease-out;
|
|
4272
|
+
}
|
|
4273
|
+
}
|
|
4274
|
+
/* ignore all other interaction elements while dragging a file */
|
|
4275
|
+
.filepond--hopper[data-hopper-state='drag-over'] > * {
|
|
4276
|
+
pointer-events: none;
|
|
4277
|
+
}
|
|
4278
|
+
/* capture all hit tests using a hidden layer, this speeds up the event flow */
|
|
4279
|
+
.filepond--hopper[data-hopper-state='drag-over']::after {
|
|
4280
|
+
content: '';
|
|
4281
|
+
position: absolute;
|
|
4282
|
+
left: 0;
|
|
4283
|
+
top: 0;
|
|
4284
|
+
right: 0;
|
|
4285
|
+
bottom: 0;
|
|
4286
|
+
z-index: 100;
|
|
4287
|
+
}
|
|
4288
|
+
.filepond--progress-indicator {
|
|
4289
|
+
z-index: 103;
|
|
4290
|
+
}
|
|
4291
|
+
.filepond--file-action-button {
|
|
4292
|
+
z-index: 102;
|
|
4293
|
+
}
|
|
4294
|
+
.filepond--file-status {
|
|
4295
|
+
z-index: 101;
|
|
4296
|
+
}
|
|
4297
|
+
.filepond--file-info {
|
|
4298
|
+
z-index: 100;
|
|
4299
|
+
}
|
|
4300
|
+
.filepond--item {
|
|
4301
|
+
position: absolute;
|
|
4302
|
+
top: 0;
|
|
4303
|
+
left: 0;
|
|
4304
|
+
right: 0;
|
|
4305
|
+
z-index: 1;
|
|
4306
|
+
|
|
4307
|
+
padding: 0;
|
|
4308
|
+
margin: 0.25em;
|
|
4309
|
+
|
|
4310
|
+
will-change: transform, opacity;
|
|
4311
|
+
|
|
4312
|
+
touch-action: auto;
|
|
4313
|
+
|
|
4314
|
+
/* item children order */
|
|
4315
|
+
}
|
|
4316
|
+
.filepond--item > .filepond--panel {
|
|
4317
|
+
z-index: -1;
|
|
4318
|
+
}
|
|
4319
|
+
/* has a slight shadow */
|
|
4320
|
+
.filepond--item > .filepond--panel .filepond--panel-bottom {
|
|
4321
|
+
box-shadow: 0 0.0625em 0.125em -0.0625em rgba(0, 0, 0, 0.25);
|
|
4322
|
+
}
|
|
4323
|
+
.filepond--item {
|
|
4324
|
+
/* drag related */
|
|
4325
|
+
}
|
|
4326
|
+
.filepond--item > .filepond--file-wrapper,
|
|
4327
|
+
.filepond--item > .filepond--panel {
|
|
4328
|
+
transition: opacity 0.15s ease-out;
|
|
4329
|
+
}
|
|
4330
|
+
.filepond--item[data-drag-state] {
|
|
4331
|
+
cursor: -webkit-grab;
|
|
4332
|
+
cursor: grab;
|
|
4333
|
+
}
|
|
4334
|
+
.filepond--item[data-drag-state] > .filepond--panel {
|
|
4335
|
+
transition: box-shadow 0.125s ease-in-out;
|
|
4336
|
+
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
4337
|
+
}
|
|
4338
|
+
.filepond--item[data-drag-state='drag'] {
|
|
4339
|
+
cursor: -webkit-grabbing;
|
|
4340
|
+
cursor: grabbing;
|
|
4341
|
+
}
|
|
4342
|
+
.filepond--item[data-drag-state='drag'] > .filepond--panel {
|
|
4343
|
+
box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.325);
|
|
4344
|
+
}
|
|
4345
|
+
.filepond--item[data-drag-state]:not([data-drag-state='idle']) {
|
|
4346
|
+
z-index: 2;
|
|
4347
|
+
}
|
|
4348
|
+
/* states */
|
|
4349
|
+
.filepond--item-panel {
|
|
4350
|
+
background-color: #64605e;
|
|
4351
|
+
}
|
|
4352
|
+
[data-filepond-item-state='processing-complete'] .filepond--item-panel {
|
|
4353
|
+
background-color: #369763;
|
|
4354
|
+
}
|
|
4355
|
+
[data-filepond-item-state*='invalid'] .filepond--item-panel,
|
|
4356
|
+
[data-filepond-item-state*='error'] .filepond--item-panel {
|
|
4357
|
+
background-color: #c44e47;
|
|
4358
|
+
}
|
|
4359
|
+
/* style of item panel */
|
|
4360
|
+
.filepond--item-panel {
|
|
4361
|
+
border-radius: 0.5em;
|
|
4362
|
+
transition: background-color 0.25s;
|
|
4363
|
+
}
|
|
4364
|
+
/* normal mode */
|
|
4365
|
+
.filepond--list-scroller {
|
|
4366
|
+
position: absolute;
|
|
4367
|
+
top: 0;
|
|
4368
|
+
left: 0;
|
|
4369
|
+
right: 0;
|
|
4370
|
+
margin: 0;
|
|
4371
|
+
will-change: transform;
|
|
4372
|
+
}
|
|
4373
|
+
/* scroll mode */
|
|
4374
|
+
.filepond--list-scroller[data-state='overflow'] .filepond--list {
|
|
4375
|
+
bottom: 0;
|
|
4376
|
+
right: 0;
|
|
4377
|
+
}
|
|
4378
|
+
.filepond--list-scroller[data-state='overflow'] {
|
|
4379
|
+
overflow-y: scroll;
|
|
4380
|
+
overflow-x: hidden;
|
|
4381
|
+
-webkit-overflow-scrolling: touch;
|
|
4382
|
+
-webkit-mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
|
|
4383
|
+
mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
|
|
4384
|
+
}
|
|
4385
|
+
/* style scrollbar */
|
|
4386
|
+
.filepond--list-scroller::-webkit-scrollbar {
|
|
4387
|
+
background: transparent;
|
|
4388
|
+
}
|
|
4389
|
+
.filepond--list-scroller::-webkit-scrollbar:vertical {
|
|
4390
|
+
width: 1em;
|
|
4391
|
+
}
|
|
4392
|
+
.filepond--list-scroller::-webkit-scrollbar:horizontal {
|
|
4393
|
+
height: 0;
|
|
4394
|
+
}
|
|
4395
|
+
.filepond--list-scroller::-webkit-scrollbar-thumb {
|
|
4396
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
4397
|
+
border-radius: 99999px;
|
|
4398
|
+
border: 0.3125em solid transparent;
|
|
4399
|
+
background-clip: content-box;
|
|
4400
|
+
}
|
|
4401
|
+
/* hard to overide styles on purpose */
|
|
4402
|
+
.filepond--list.filepond--list {
|
|
4403
|
+
position: absolute;
|
|
4404
|
+
top: 0;
|
|
4405
|
+
margin: 0;
|
|
4406
|
+
padding: 0;
|
|
4407
|
+
list-style-type: none;
|
|
4408
|
+
|
|
4409
|
+
/* prevents endless paint calls on filepond--list-scroller */
|
|
4410
|
+
will-change: transform;
|
|
4411
|
+
}
|
|
4412
|
+
/* used for padding so allowed to be restyled */
|
|
4413
|
+
.filepond--list {
|
|
4414
|
+
left: 0.75em;
|
|
4415
|
+
right: 0.75em;
|
|
4416
|
+
}
|
|
4417
|
+
.filepond--root[data-style-panel-layout~='integrated'] {
|
|
4418
|
+
width: 100%;
|
|
4419
|
+
height: 100%;
|
|
4420
|
+
max-width: none;
|
|
4421
|
+
margin: 0;
|
|
4422
|
+
}
|
|
4423
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root,
|
|
4424
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root {
|
|
4425
|
+
border-radius: 0;
|
|
4426
|
+
}
|
|
4427
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root > *,
|
|
4428
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root > * {
|
|
4429
|
+
display: none;
|
|
4430
|
+
}
|
|
4431
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--drop-label,
|
|
4432
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
|
|
4433
|
+
bottom: 0;
|
|
4434
|
+
height: auto;
|
|
4435
|
+
display: flex;
|
|
4436
|
+
justify-content: center;
|
|
4437
|
+
align-items: center;
|
|
4438
|
+
z-index: 7;
|
|
4439
|
+
}
|
|
4440
|
+
.filepond--root[data-style-panel-layout~='circle'],
|
|
4441
|
+
.filepond--root[data-style-panel-layout~='integrated'] {
|
|
4442
|
+
/* we're only loading one item, this makes the intro animation a bit nicer */
|
|
4443
|
+
}
|
|
4444
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--item-panel,
|
|
4445
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--item-panel {
|
|
4446
|
+
display: none;
|
|
4447
|
+
}
|
|
4448
|
+
.filepond--root[data-style-panel-layout~='compact'] .filepond--list-scroller,
|
|
4449
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--list-scroller {
|
|
4450
|
+
overflow: hidden;
|
|
4451
|
+
height: 100%;
|
|
4452
|
+
margin-top: 0;
|
|
4453
|
+
margin-bottom: 0;
|
|
4454
|
+
}
|
|
4455
|
+
.filepond--root[data-style-panel-layout~='compact'] .filepond--list,
|
|
4456
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--list {
|
|
4457
|
+
left: 0;
|
|
4458
|
+
right: 0;
|
|
4459
|
+
height: 100%;
|
|
4460
|
+
}
|
|
4461
|
+
.filepond--root[data-style-panel-layout~='compact'] .filepond--item,
|
|
4462
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--item {
|
|
4463
|
+
margin: 0;
|
|
4464
|
+
}
|
|
4465
|
+
.filepond--root[data-style-panel-layout~='compact'] .filepond--file-wrapper,
|
|
4466
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--file-wrapper {
|
|
4467
|
+
height: 100%;
|
|
4468
|
+
}
|
|
4469
|
+
.filepond--root[data-style-panel-layout~='compact'] .filepond--drop-label,
|
|
4470
|
+
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
|
|
4471
|
+
z-index: 7;
|
|
4472
|
+
}
|
|
4473
|
+
.filepond--root[data-style-panel-layout~='circle'] {
|
|
4474
|
+
border-radius: 99999rem;
|
|
4475
|
+
overflow: hidden;
|
|
4476
|
+
}
|
|
4477
|
+
.filepond--root[data-style-panel-layout~='circle'] > .filepond--panel {
|
|
4478
|
+
border-radius: inherit;
|
|
4479
|
+
}
|
|
4480
|
+
.filepond--root[data-style-panel-layout~='circle'] > .filepond--panel > * {
|
|
4481
|
+
display: none;
|
|
4482
|
+
}
|
|
4483
|
+
.filepond--root[data-style-panel-layout~='circle'] {
|
|
4484
|
+
/* circle cuts of this info, so best to hide it */
|
|
4485
|
+
}
|
|
4486
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--file-info {
|
|
4487
|
+
display: none;
|
|
4488
|
+
}
|
|
4489
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--file-status {
|
|
4490
|
+
display: none;
|
|
4491
|
+
}
|
|
4492
|
+
.filepond--root[data-style-panel-layout~='circle'] .filepond--action-edit-item {
|
|
4493
|
+
opacity: 1 !important;
|
|
4494
|
+
visibility: visible !important;
|
|
4495
|
+
}
|
|
4496
|
+
/* dirfty way to fix circular overflow issue on safari 11+ */
|
|
4497
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
4498
|
+
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
|
4499
|
+
.filepond--root[data-style-panel-layout~='circle'] {
|
|
4500
|
+
will-change: transform;
|
|
4501
|
+
}
|
|
4502
|
+
}
|
|
4503
|
+
}
|
|
4504
|
+
.filepond--panel-root {
|
|
4505
|
+
border-radius: 0.5em;
|
|
4506
|
+
background-color: #f1f0ef;
|
|
4507
|
+
}
|
|
4508
|
+
.filepond--panel {
|
|
4509
|
+
position: absolute;
|
|
4510
|
+
left: 0;
|
|
4511
|
+
top: 0;
|
|
4512
|
+
right: 0;
|
|
4513
|
+
margin: 0;
|
|
4514
|
+
|
|
4515
|
+
/* defaults to 100% height (fixed height mode) this fixes problem with panel height in IE11 */
|
|
4516
|
+
height: 100% !important;
|
|
4517
|
+
|
|
4518
|
+
/* no interaction possible with panel */
|
|
4519
|
+
pointer-events: none;
|
|
4520
|
+
}
|
|
4521
|
+
.filepond-panel:not([data-scalable='false']) {
|
|
4522
|
+
height: auto !important;
|
|
4523
|
+
}
|
|
4524
|
+
.filepond--panel[data-scalable='false'] > div {
|
|
4525
|
+
display: none;
|
|
4526
|
+
}
|
|
4527
|
+
.filepond--panel[data-scalable='true'] {
|
|
4528
|
+
/* this seems to fix Chrome performance issues */
|
|
4529
|
+
/* - when box-shadow is enabled */
|
|
4530
|
+
/* - when multiple ponds are active on the same page */
|
|
4531
|
+
-webkit-transform-style: preserve-3d;
|
|
4532
|
+
transform-style: preserve-3d;
|
|
4533
|
+
|
|
4534
|
+
/* prevent borders and backgrounds */
|
|
4535
|
+
background-color: transparent !important;
|
|
4536
|
+
border: none !important;
|
|
4537
|
+
}
|
|
4538
|
+
.filepond--panel-top,
|
|
4539
|
+
.filepond--panel-bottom,
|
|
4540
|
+
.filepond--panel-center {
|
|
4541
|
+
position: absolute;
|
|
4542
|
+
left: 0;
|
|
4543
|
+
top: 0;
|
|
4544
|
+
right: 0;
|
|
4545
|
+
margin: 0;
|
|
4546
|
+
padding: 0;
|
|
4547
|
+
}
|
|
4548
|
+
.filepond--panel-top,
|
|
4549
|
+
.filepond--panel-bottom {
|
|
4550
|
+
height: 0.5em;
|
|
4551
|
+
}
|
|
4552
|
+
.filepond--panel-top {
|
|
4553
|
+
border-bottom-left-radius: 0 !important;
|
|
4554
|
+
border-bottom-right-radius: 0 !important;
|
|
4555
|
+
border-bottom: none !important;
|
|
4556
|
+
|
|
4557
|
+
/* fixes tiny transparant line between top and center panel */
|
|
4558
|
+
}
|
|
4559
|
+
.filepond--panel-top::after {
|
|
4560
|
+
content: '';
|
|
4561
|
+
position: absolute;
|
|
4562
|
+
height: 2px;
|
|
4563
|
+
left: 0;
|
|
4564
|
+
right: 0;
|
|
4565
|
+
bottom: -1px;
|
|
4566
|
+
background-color: inherit;
|
|
4567
|
+
}
|
|
4568
|
+
.filepond--panel-center,
|
|
4569
|
+
.filepond--panel-bottom {
|
|
4570
|
+
will-change: transform;
|
|
4571
|
+
-webkit-backface-visibility: hidden;
|
|
4572
|
+
backface-visibility: hidden;
|
|
4573
|
+
-webkit-transform-origin: left top;
|
|
4574
|
+
transform-origin: left top;
|
|
4575
|
+
-webkit-transform: translate3d(0, 0.5em, 0);
|
|
4576
|
+
transform: translate3d(0, 0.5em, 0);
|
|
4577
|
+
}
|
|
4578
|
+
.filepond--panel-bottom {
|
|
4579
|
+
border-top-left-radius: 0 !important;
|
|
4580
|
+
border-top-right-radius: 0 !important;
|
|
4581
|
+
border-top: none !important;
|
|
4582
|
+
|
|
4583
|
+
/* fixes tiny transparant line between bottom and center of panel */
|
|
4584
|
+
}
|
|
4585
|
+
.filepond--panel-bottom::before {
|
|
4586
|
+
content: '';
|
|
4587
|
+
position: absolute;
|
|
4588
|
+
height: 2px;
|
|
4589
|
+
left: 0;
|
|
4590
|
+
right: 0;
|
|
4591
|
+
top: -1px;
|
|
4592
|
+
background-color: inherit;
|
|
4593
|
+
}
|
|
4594
|
+
.filepond--panel-center {
|
|
4595
|
+
/* the center panel is scaled using scale3d to fit the correct height */
|
|
4596
|
+
/* we use 100px instead of 1px as scaling 1px to a huge height is really laggy on chrome */
|
|
4597
|
+
height: 100px !important;
|
|
4598
|
+
border-top: none !important;
|
|
4599
|
+
border-bottom: none !important;
|
|
4600
|
+
border-radius: 0 !important;
|
|
4601
|
+
|
|
4602
|
+
/* hide if not transformed, prevents a little flash when the panel is at 100px height while attached for first time */
|
|
4603
|
+
}
|
|
4604
|
+
.filepond--panel-center:not([style]) {
|
|
4605
|
+
visibility: hidden;
|
|
4606
|
+
}
|
|
4607
|
+
.filepond--progress-indicator {
|
|
4608
|
+
position: static;
|
|
4609
|
+
width: 1.25em;
|
|
4610
|
+
height: 1.25em;
|
|
4611
|
+
|
|
4612
|
+
color: #fff;
|
|
4613
|
+
|
|
4614
|
+
/* can't have margins */
|
|
4615
|
+
margin: 0;
|
|
4616
|
+
|
|
4617
|
+
/* no interaction possible with progress indicator */
|
|
4618
|
+
pointer-events: none;
|
|
4619
|
+
|
|
4620
|
+
/* will be animated */
|
|
4621
|
+
will-change: transform, opacity;
|
|
4622
|
+
}
|
|
4623
|
+
.filepond--progress-indicator svg {
|
|
4624
|
+
width: 100%;
|
|
4625
|
+
height: 100%;
|
|
4626
|
+
vertical-align: top;
|
|
4627
|
+
transform-box: fill-box; /* should center the animation correctly when zoomed in */
|
|
4628
|
+
}
|
|
4629
|
+
.filepond--progress-indicator path {
|
|
4630
|
+
fill: none;
|
|
4631
|
+
stroke: currentColor;
|
|
4632
|
+
}
|
|
4633
|
+
.filepond--list-scroller {
|
|
4634
|
+
z-index: 6;
|
|
4635
|
+
}
|
|
4636
|
+
.filepond--drop-label {
|
|
4637
|
+
z-index: 5;
|
|
4638
|
+
}
|
|
4639
|
+
.filepond--drip {
|
|
4640
|
+
z-index: 3;
|
|
4641
|
+
}
|
|
4642
|
+
.filepond--root > .filepond--panel {
|
|
4643
|
+
z-index: 2;
|
|
4644
|
+
}
|
|
4645
|
+
.filepond--browser {
|
|
4646
|
+
z-index: 1;
|
|
4647
|
+
}
|
|
4648
|
+
.filepond--root {
|
|
4649
|
+
/* layout*/
|
|
4650
|
+
box-sizing: border-box;
|
|
4651
|
+
position: relative;
|
|
4652
|
+
margin-bottom: 1em;
|
|
4653
|
+
|
|
4654
|
+
/* base font size for whole component */
|
|
4655
|
+
font-size: 1rem;
|
|
4656
|
+
|
|
4657
|
+
/* base line height */
|
|
4658
|
+
line-height: normal;
|
|
4659
|
+
|
|
4660
|
+
/* up uses default system font family */
|
|
4661
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
|
4662
|
+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
4663
|
+
|
|
4664
|
+
/* will increase font weight a bit on Safari */
|
|
4665
|
+
font-weight: 450;
|
|
4666
|
+
|
|
4667
|
+
/* default text alignment */
|
|
4668
|
+
text-align: left;
|
|
4669
|
+
|
|
4670
|
+
/* better text rendering on Safari */
|
|
4671
|
+
text-rendering: optimizeLegibility;
|
|
4672
|
+
|
|
4673
|
+
/* text direction is ltr for now */
|
|
4674
|
+
direction: ltr;
|
|
4675
|
+
|
|
4676
|
+
/* optimize rendering */
|
|
4677
|
+
/* https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
|
|
4678
|
+
contain: layout style size;
|
|
4679
|
+
|
|
4680
|
+
/* correct box sizing, line-height and positioning on child elements */
|
|
4681
|
+
}
|
|
4682
|
+
.filepond--root * {
|
|
4683
|
+
box-sizing: inherit;
|
|
4684
|
+
line-height: inherit;
|
|
4685
|
+
}
|
|
4686
|
+
.filepond--root *:not(text) {
|
|
4687
|
+
font-size: inherit;
|
|
4688
|
+
}
|
|
4689
|
+
.filepond--root {
|
|
4690
|
+
/* block everything */
|
|
4691
|
+
}
|
|
4692
|
+
.filepond--root[data-disabled] {
|
|
4693
|
+
pointer-events: none;
|
|
4694
|
+
}
|
|
4695
|
+
.filepond--root[data-disabled] .filepond--list-scroller {
|
|
4696
|
+
pointer-events: all;
|
|
4697
|
+
}
|
|
4698
|
+
.filepond--root[data-disabled] .filepond--list {
|
|
4699
|
+
pointer-events: none;
|
|
4700
|
+
}
|
|
4701
|
+
/**
|
|
4702
|
+
* Root element children layout
|
|
4703
|
+
*/
|
|
4704
|
+
.filepond--root .filepond--drop-label {
|
|
4705
|
+
min-height: 4.75em;
|
|
4706
|
+
}
|
|
4707
|
+
.filepond--root .filepond--list-scroller {
|
|
4708
|
+
margin-top: 1em;
|
|
4709
|
+
margin-bottom: 1em;
|
|
4710
|
+
}
|
|
4711
|
+
.filepond--root .filepond--credits {
|
|
4712
|
+
position: absolute;
|
|
4713
|
+
right: 0;
|
|
4714
|
+
opacity: 0.4;
|
|
4715
|
+
line-height: 0.85;
|
|
4716
|
+
font-size: 11px;
|
|
4717
|
+
color: inherit;
|
|
4718
|
+
text-decoration: none;
|
|
4719
|
+
z-index: 3;
|
|
4720
|
+
bottom: -14px;
|
|
4721
|
+
}
|
|
4722
|
+
.filepond--root .filepond--credits[style] {
|
|
4723
|
+
top: 0;
|
|
4724
|
+
bottom: auto;
|
|
4725
|
+
margin-top: 14px;
|
|
4726
|
+
}
|
|
4727
|
+
|
|
4728
|
+
/* ---- file-input.css ---- */
|
|
4729
|
+
/* ---- FileInput (FilePond, docs/adr/0004) ------------------------------------
|
|
4730
|
+
FilePond's own stylesheet (filepond/dist/filepond.css) is concatenated just before this file, inside the
|
|
4731
|
+
same layer. Everything here is scoped under .sc-file-input and wins by specificity, never !important.
|
|
4732
|
+
FilePond lays out its rows in JS from measured sizes, so spacing is set in em on its elements and the
|
|
4733
|
+
zone's height through min-height on the drop label. */
|
|
4734
|
+
.sc-file-input-field {
|
|
4735
|
+
/* Drop zone height: two control heights, so `size` and compact density move it with the other fields. */
|
|
4736
|
+
--_zone: calc(var(--_h) * 2);
|
|
4737
|
+
}
|
|
4738
|
+
.sc-file-input {
|
|
4739
|
+
position: relative;
|
|
4740
|
+
box-sizing: border-box;
|
|
4741
|
+
border: var(--sc-border-width-hairline) dashed var(--sc-color-border-strong);
|
|
4742
|
+
border-radius: var(--sc-radius-lg);
|
|
4743
|
+
background: var(--sc-color-surface-default);
|
|
4744
|
+
color: var(--sc-color-text-default);
|
|
4745
|
+
font-size: var(--_fs);
|
|
4746
|
+
transition:
|
|
4747
|
+
border-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
4748
|
+
background-color var(--sc-duration-fast) var(--sc-ease-standard);
|
|
4749
|
+
}
|
|
4750
|
+
.sc-file-input:not([data-disabled]):hover {
|
|
4751
|
+
border-color: var(--sc-color-text-muted);
|
|
4752
|
+
}
|
|
4753
|
+
/* The file input is FilePond's single tab stop and is invisible; the ring goes on the zone. */
|
|
4754
|
+
.sc-file-input:has(.filepond--browser:focus-visible) {
|
|
4755
|
+
border-color: var(--sc-color-border-focus);
|
|
4756
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
4757
|
+
outline-offset: var(--sc-border-width-focus);
|
|
4758
|
+
}
|
|
4759
|
+
.sc-file-input:has(.filepond--root[data-hopper-state='drag-over']) {
|
|
4760
|
+
border-style: solid;
|
|
4761
|
+
border-color: var(--sc-color-accent-default);
|
|
4762
|
+
background: var(--sc-color-accent-subtle);
|
|
4763
|
+
}
|
|
4764
|
+
.sc-file-input[data-invalid] {
|
|
4765
|
+
border-color: var(--sc-color-danger-solid);
|
|
4766
|
+
}
|
|
4767
|
+
.sc-file-input[data-disabled] {
|
|
4768
|
+
border-style: solid;
|
|
4769
|
+
border-color: var(--sc-color-border-default);
|
|
4770
|
+
background: var(--sc-color-surface-sunken);
|
|
4771
|
+
color: var(--sc-color-text-muted);
|
|
4772
|
+
cursor: not-allowed;
|
|
4773
|
+
}
|
|
4774
|
+
|
|
4775
|
+
/* Before FilePond loads (server render, first paint): the same zone, inert. */
|
|
4776
|
+
.sc-file-input__placeholder {
|
|
4777
|
+
display: flex;
|
|
4778
|
+
align-items: center;
|
|
4779
|
+
justify-content: center;
|
|
4780
|
+
min-block-size: var(--_zone);
|
|
4781
|
+
padding: var(--sc-spacing-xs);
|
|
4782
|
+
color: var(--sc-color-text-muted);
|
|
4783
|
+
text-align: center;
|
|
4784
|
+
}
|
|
4785
|
+
.sc-file-input__browse {
|
|
4786
|
+
color: var(--sc-color-text-link);
|
|
4787
|
+
text-decoration: underline;
|
|
4788
|
+
text-underline-offset: 0.2em;
|
|
4789
|
+
}
|
|
4790
|
+
|
|
4791
|
+
/* FilePond's root and the panel it animates behind the rows: the zone above paints the surface instead. */
|
|
4792
|
+
.sc-file-input .filepond--root {
|
|
4793
|
+
margin: 0;
|
|
4794
|
+
font-family: inherit;
|
|
4795
|
+
font-size: inherit;
|
|
4796
|
+
font-weight: inherit;
|
|
4797
|
+
line-height: var(--sc-font-line-height-ui);
|
|
4798
|
+
color: inherit;
|
|
4799
|
+
}
|
|
4800
|
+
.sc-file-input .filepond--panel-root {
|
|
4801
|
+
background-color: transparent;
|
|
4802
|
+
}
|
|
4803
|
+
.sc-file-input .filepond--drip {
|
|
4804
|
+
display: none;
|
|
4805
|
+
}
|
|
4806
|
+
.sc-file-input .filepond--root .filepond--drop-label {
|
|
4807
|
+
min-height: var(--_zone);
|
|
4808
|
+
color: var(--sc-color-text-muted);
|
|
4809
|
+
}
|
|
4810
|
+
/* Disabled reads through the sunken surface, solid border and cursor; the text stays at muted so it keeps AA
|
|
4811
|
+
(axe cannot tell this label belongs to a disabled control). */
|
|
4812
|
+
.sc-file-input[data-disabled] .filepond--root .filepond--drop-label {
|
|
4813
|
+
color: var(--sc-color-text-muted);
|
|
4814
|
+
}
|
|
4815
|
+
.sc-file-input .filepond--drop-label.filepond--drop-label label {
|
|
4816
|
+
padding: var(--sc-spacing-xs);
|
|
4817
|
+
font-size: 1em;
|
|
4818
|
+
line-height: var(--sc-font-line-height-ui);
|
|
4819
|
+
cursor: pointer;
|
|
4820
|
+
}
|
|
4821
|
+
.sc-file-input .filepond--root[data-disabled] .filepond--drop-label label {
|
|
4822
|
+
opacity: 1;
|
|
4823
|
+
}
|
|
4824
|
+
.sc-file-input .filepond--label-action {
|
|
4825
|
+
color: var(--sc-color-text-link);
|
|
4826
|
+
text-decoration-color: currentColor;
|
|
4827
|
+
text-underline-offset: 0.2em;
|
|
4828
|
+
}
|
|
4829
|
+
.sc-file-input[data-disabled] .filepond--label-action {
|
|
4830
|
+
color: inherit;
|
|
4831
|
+
}
|
|
4832
|
+
.sc-file-input .filepond--root .filepond--list-scroller {
|
|
4833
|
+
margin-block: 0 0.5em;
|
|
4834
|
+
}
|
|
4835
|
+
.sc-file-input .filepond--list.filepond--list {
|
|
4836
|
+
inset-inline: 0.5em;
|
|
4837
|
+
}
|
|
4838
|
+
|
|
4839
|
+
/* File rows */
|
|
4840
|
+
.sc-file-input .filepond--item {
|
|
4841
|
+
margin: 0.25em 0;
|
|
4842
|
+
}
|
|
4843
|
+
.sc-file-input .filepond--item-panel {
|
|
4844
|
+
border-radius: var(--sc-radius-md);
|
|
4845
|
+
background-color: var(--sc-color-surface-sunken);
|
|
4846
|
+
}
|
|
4847
|
+
.sc-file-input[data-disabled] .filepond--item-panel {
|
|
4848
|
+
background-color: var(--sc-color-surface-default);
|
|
4849
|
+
}
|
|
4850
|
+
.sc-file-input .filepond--item > .filepond--panel .filepond--panel-bottom {
|
|
4851
|
+
box-shadow: none;
|
|
4852
|
+
}
|
|
4853
|
+
.sc-file-input .filepond--file {
|
|
4854
|
+
align-items: center;
|
|
4855
|
+
padding: 0.5em 0.75em;
|
|
4856
|
+
color: var(--sc-color-text-default);
|
|
4857
|
+
}
|
|
4858
|
+
.sc-file-input[data-disabled] .filepond--file {
|
|
4859
|
+
color: var(--sc-color-text-muted);
|
|
4860
|
+
}
|
|
4861
|
+
.sc-file-input .filepond--file-info {
|
|
4862
|
+
flex-direction: row;
|
|
4863
|
+
align-items: baseline;
|
|
4864
|
+
gap: var(--sc-spacing-xs);
|
|
4865
|
+
margin-inline-end: 2.5em;
|
|
4866
|
+
}
|
|
4867
|
+
.sc-file-input .filepond--file-info .filepond--file-info-main {
|
|
4868
|
+
flex: 0 1 auto;
|
|
4869
|
+
inline-size: auto;
|
|
4870
|
+
font-size: 1em;
|
|
4871
|
+
font-weight: var(--sc-font-weight-medium);
|
|
4872
|
+
line-height: var(--sc-font-line-height-ui);
|
|
4873
|
+
}
|
|
4874
|
+
.sc-file-input .filepond--file-info .filepond--file-info-sub {
|
|
4875
|
+
flex: none;
|
|
4876
|
+
font-size: var(--sc-font-size-xs);
|
|
4877
|
+
font-variant-numeric: tabular-nums;
|
|
4878
|
+
color: var(--sc-color-text-muted);
|
|
4879
|
+
opacity: 1;
|
|
4880
|
+
}
|
|
4881
|
+
.sc-file-input .filepond--file-status {
|
|
4882
|
+
display: none;
|
|
4883
|
+
}
|
|
4884
|
+
.sc-file-input .filepond--progress-indicator {
|
|
4885
|
+
color: var(--sc-color-text-muted);
|
|
4886
|
+
}
|
|
4887
|
+
/* The × at the end of each row: a ghost icon button. */
|
|
4888
|
+
.sc-file-input .filepond--file-action-button.filepond--file-action-button {
|
|
4889
|
+
display: inline-grid;
|
|
4890
|
+
place-items: center;
|
|
4891
|
+
inline-size: var(--sc-size-control-sm);
|
|
4892
|
+
block-size: var(--sc-size-control-sm);
|
|
4893
|
+
border-radius: var(--sc-radius-sm);
|
|
4894
|
+
font-size: inherit;
|
|
4895
|
+
}
|
|
4896
|
+
.sc-file-input .filepond--file [data-align*='right'] {
|
|
4897
|
+
inset-inline-end: 0.25em;
|
|
4898
|
+
}
|
|
4899
|
+
.sc-file-input .filepond--file-action-button.filepond--file-action-button svg {
|
|
4900
|
+
inline-size: var(--sc-size-icon-md);
|
|
4901
|
+
block-size: var(--sc-size-icon-md);
|
|
4902
|
+
}
|
|
4903
|
+
.sc-file-input .filepond--action-remove-item {
|
|
4904
|
+
top: 50%;
|
|
4905
|
+
margin-block-start: calc(var(--sc-size-control-sm) / -2);
|
|
4906
|
+
background: transparent;
|
|
4907
|
+
color: var(--sc-color-text-muted);
|
|
4908
|
+
box-shadow: none;
|
|
4909
|
+
cursor: pointer;
|
|
4910
|
+
transition:
|
|
4911
|
+
background-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
4912
|
+
color var(--sc-duration-fast) var(--sc-ease-standard);
|
|
4913
|
+
}
|
|
4914
|
+
.sc-file-input .filepond--action-remove-item:hover,
|
|
4915
|
+
.sc-file-input .filepond--action-remove-item:focus {
|
|
4916
|
+
background: var(--sc-color-surface-hover);
|
|
4917
|
+
color: var(--sc-color-text-default);
|
|
4918
|
+
box-shadow: none;
|
|
4919
|
+
}
|
|
4920
|
+
.sc-file-input .filepond--file-action-button.filepond--file-action-button:focus-visible {
|
|
4921
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
4922
|
+
outline-offset: 0;
|
|
4923
|
+
}
|
|
4924
|
+
.sc-file-input .filepond--action-remove-item[disabled] {
|
|
4925
|
+
background: transparent;
|
|
4926
|
+
color: var(--sc-color-text-subtle);
|
|
4927
|
+
cursor: not-allowed;
|
|
4928
|
+
}
|
|
4929
|
+
|
|
4930
|
+
/* The file's name as a preview button (FileInput `preview`): a foreign node placed before FilePond's info,
|
|
4931
|
+
which keeps its size line; FilePond's own name span hides while the button is there. FilePond turns
|
|
4932
|
+
pointer events off inside rows, so the button turns them back on. */
|
|
4933
|
+
.sc-file-input .filepond--file:has(> .sc-file-input__preview) .filepond--file-info-main {
|
|
4934
|
+
display: none;
|
|
4935
|
+
}
|
|
4936
|
+
/* With the name in the button, the info holds only the size: it keeps its width (and its margin clear of
|
|
4937
|
+
the ×) and the button's name truncates instead. */
|
|
4938
|
+
.sc-file-input .filepond--file:has(> .sc-file-input__preview) .filepond--file-info {
|
|
4939
|
+
flex: none;
|
|
4940
|
+
}
|
|
4941
|
+
.sc-file-input .sc-file-input__preview {
|
|
4942
|
+
flex: 0 1 auto;
|
|
4943
|
+
min-inline-size: 0;
|
|
4944
|
+
margin: 0 var(--sc-spacing-xs) 0 calc(-1 * var(--sc-spacing-3xs));
|
|
4945
|
+
padding: 0 var(--sc-spacing-3xs);
|
|
4946
|
+
overflow: hidden;
|
|
4947
|
+
border: 0;
|
|
4948
|
+
border-radius: var(--sc-radius-sm);
|
|
4949
|
+
background: transparent;
|
|
4950
|
+
color: var(--sc-color-text-link);
|
|
4951
|
+
font: inherit;
|
|
4952
|
+
font-weight: var(--sc-font-weight-medium);
|
|
4953
|
+
line-height: var(--sc-font-line-height-ui);
|
|
4954
|
+
text-align: start;
|
|
4955
|
+
text-decoration: underline;
|
|
4956
|
+
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
|
|
4957
|
+
text-underline-offset: 0.2em;
|
|
4958
|
+
text-overflow: ellipsis;
|
|
4959
|
+
white-space: nowrap;
|
|
4960
|
+
pointer-events: auto;
|
|
4961
|
+
cursor: pointer;
|
|
4962
|
+
}
|
|
4963
|
+
.sc-file-input .sc-file-input__preview:hover {
|
|
4964
|
+
text-decoration-color: currentColor;
|
|
4965
|
+
}
|
|
4966
|
+
.sc-file-input .sc-file-input__preview:focus-visible {
|
|
4967
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
4968
|
+
outline-offset: 0;
|
|
4969
|
+
}
|
|
4970
|
+
|
|
4971
|
+
/* The message slot stays in the tree (it is the live region); out of the flow while empty. */
|
|
4972
|
+
.sc-file-input__messages {
|
|
4973
|
+
display: flex;
|
|
4974
|
+
flex-direction: column;
|
|
4975
|
+
gap: var(--sc-spacing-3xs);
|
|
4976
|
+
}
|
|
4977
|
+
.sc-file-input__messages:empty {
|
|
4978
|
+
position: absolute;
|
|
4979
|
+
}
|
|
4980
|
+
|
|
4981
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4982
|
+
.sc-file-input,
|
|
4983
|
+
.sc-file-input .filepond--action-remove-item {
|
|
4984
|
+
transition: none;
|
|
4985
|
+
}
|
|
4986
|
+
}
|
|
4987
|
+
|
|
4988
|
+
/* ---- file-preview-dialog.css ---- */
|
|
4989
|
+
/* ---- FilePreviewDialog -------------------------------------------------------
|
|
4990
|
+
A `lg` Dialog whose body holds the file: a PDF frame, a text block or an image, each held inside the
|
|
4991
|
+
viewport so the popup itself rarely scrolls. */
|
|
4992
|
+
.sc-file-preview__frame,
|
|
4993
|
+
.sc-file-preview__text,
|
|
4994
|
+
.sc-file-preview__image {
|
|
4995
|
+
display: block;
|
|
4996
|
+
box-sizing: border-box;
|
|
4997
|
+
inline-size: 100%;
|
|
4998
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
4999
|
+
border-radius: var(--sc-radius-md);
|
|
5000
|
+
}
|
|
5001
|
+
.sc-file-preview__frame {
|
|
5002
|
+
/* The popup's 85dvh cap, less its title, description, padding and the action row, so it never scrolls. */
|
|
5003
|
+
block-size: clamp(16rem, 85dvh - 11rem, 60rem);
|
|
5004
|
+
background: var(--sc-color-surface-sunken);
|
|
5005
|
+
}
|
|
5006
|
+
.sc-file-preview__text {
|
|
5007
|
+
max-block-size: 60dvh;
|
|
5008
|
+
margin: 0;
|
|
5009
|
+
padding: var(--sc-spacing-sm) var(--sc-spacing-md);
|
|
5010
|
+
overflow: auto;
|
|
5011
|
+
background: var(--sc-color-surface-sunken);
|
|
5012
|
+
color: var(--sc-color-text-default);
|
|
5013
|
+
font-family: var(--sc-font-family-mono);
|
|
5014
|
+
font-size: var(--sc-font-size-xs);
|
|
5015
|
+
line-height: var(--sc-font-line-height-normal);
|
|
5016
|
+
white-space: pre-wrap;
|
|
5017
|
+
overflow-wrap: anywhere;
|
|
5018
|
+
}
|
|
5019
|
+
.sc-file-preview__text:focus-visible {
|
|
5020
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
5021
|
+
outline-offset: var(--sc-border-width-focus);
|
|
5022
|
+
}
|
|
5023
|
+
.sc-file-preview__image {
|
|
5024
|
+
inline-size: auto;
|
|
5025
|
+
max-inline-size: 100%;
|
|
5026
|
+
max-block-size: 65dvh;
|
|
5027
|
+
margin-inline: auto;
|
|
5028
|
+
object-fit: contain;
|
|
5029
|
+
background: var(--sc-color-surface-sunken);
|
|
5030
|
+
}
|
|
5031
|
+
.sc-file-preview__actions {
|
|
5032
|
+
display: flex;
|
|
5033
|
+
justify-content: flex-end;
|
|
5034
|
+
margin-block-start: var(--sc-spacing-md);
|
|
5035
|
+
}
|
|
5036
|
+
.sc-file-preview__tab {
|
|
5037
|
+
display: flex;
|
|
5038
|
+
flex-direction: column;
|
|
5039
|
+
align-items: flex-start;
|
|
5040
|
+
gap: var(--sc-spacing-sm);
|
|
5041
|
+
}
|
|
5042
|
+
.sc-file-preview__note {
|
|
5043
|
+
margin: var(--sc-spacing-xs) 0 0;
|
|
5044
|
+
color: var(--sc-color-text-muted);
|
|
5045
|
+
}
|
|
5046
|
+
.sc-file-preview__tab > .sc-file-preview__note {
|
|
5047
|
+
margin: 0;
|
|
5048
|
+
}
|
|
5049
|
+
|
|
5050
|
+
/* ---- full-screen-flow.css ---- */
|
|
5051
|
+
/* ---- FullScreenFlow -------------------------------------------------------- */
|
|
5052
|
+
/* The flow is `Dialog variant="fullscreen"` with this class on the popup: header, body and footer rows,
|
|
5053
|
+
no padding of its own (each row clears the safe areas itself). */
|
|
5054
|
+
.sc-dialog__popup.sc-flow {
|
|
5055
|
+
display: grid;
|
|
5056
|
+
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
5057
|
+
padding: 0;
|
|
5058
|
+
isolation: isolate;
|
|
5059
|
+
font-size: var(--sc-font-size-md);
|
|
5060
|
+
line-height: var(--sc-font-line-height-normal);
|
|
5061
|
+
}
|
|
5062
|
+
.sc-flow__decoration {
|
|
5063
|
+
position: absolute;
|
|
5064
|
+
inset: 0;
|
|
5065
|
+
z-index: 0;
|
|
5066
|
+
overflow: hidden;
|
|
5067
|
+
border-radius: inherit;
|
|
5068
|
+
pointer-events: none;
|
|
5069
|
+
}
|
|
5070
|
+
.sc-flow__header,
|
|
5071
|
+
.sc-flow__body,
|
|
5072
|
+
.sc-flow__footer {
|
|
5073
|
+
position: relative;
|
|
5074
|
+
z-index: 1;
|
|
5075
|
+
min-inline-size: 0;
|
|
5076
|
+
}
|
|
5077
|
+
|
|
5078
|
+
/* Header: title, progress centred in the space left, status, ×. */
|
|
5079
|
+
.sc-flow__header {
|
|
5080
|
+
display: flex;
|
|
5081
|
+
align-items: center;
|
|
5082
|
+
gap: var(--sc-spacing-sm) var(--sc-spacing-md);
|
|
5083
|
+
padding-block: calc(var(--sc-spacing-xs) + env(safe-area-inset-top, 0px)) var(--sc-spacing-xs);
|
|
5084
|
+
padding-inline: calc(var(--sc-spacing-md) + env(safe-area-inset-left, 0px))
|
|
5085
|
+
calc(var(--sc-spacing-xs) + env(safe-area-inset-right, 0px));
|
|
5086
|
+
border-block-end: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
5087
|
+
background: color-mix(in oklab, var(--sc-color-surface-default) 88%, transparent);
|
|
5088
|
+
backdrop-filter: blur(6px);
|
|
5089
|
+
}
|
|
5090
|
+
.sc-flow__heading {
|
|
5091
|
+
display: inline-flex;
|
|
5092
|
+
align-items: center;
|
|
5093
|
+
gap: var(--sc-spacing-xs);
|
|
5094
|
+
min-inline-size: 0;
|
|
5095
|
+
}
|
|
5096
|
+
.sc-flow__logo {
|
|
5097
|
+
display: inline-flex;
|
|
5098
|
+
flex: none;
|
|
5099
|
+
}
|
|
5100
|
+
.sc-flow .sc-flow__title {
|
|
5101
|
+
margin: 0;
|
|
5102
|
+
padding: 0;
|
|
5103
|
+
font-size: var(--sc-font-size-sm);
|
|
5104
|
+
line-height: var(--sc-font-line-height-snug);
|
|
5105
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
5106
|
+
letter-spacing: var(--sc-font-tracking-normal);
|
|
5107
|
+
white-space: nowrap;
|
|
5108
|
+
overflow-wrap: normal;
|
|
5109
|
+
}
|
|
5110
|
+
.sc-flow__compact-title {
|
|
5111
|
+
display: none;
|
|
5112
|
+
min-inline-size: 0;
|
|
5113
|
+
overflow: hidden;
|
|
5114
|
+
font-size: var(--sc-font-size-sm);
|
|
5115
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5116
|
+
text-overflow: ellipsis;
|
|
5117
|
+
white-space: nowrap;
|
|
5118
|
+
}
|
|
5119
|
+
.sc-flow__status {
|
|
5120
|
+
display: inline-flex;
|
|
5121
|
+
align-items: center;
|
|
5122
|
+
gap: var(--sc-spacing-2xs);
|
|
5123
|
+
margin-inline-start: auto;
|
|
5124
|
+
font-size: var(--sc-font-size-xs);
|
|
5125
|
+
color: var(--sc-color-text-subtle);
|
|
5126
|
+
white-space: nowrap;
|
|
5127
|
+
}
|
|
5128
|
+
.sc-flow__close {
|
|
5129
|
+
flex: none;
|
|
5130
|
+
margin-inline-start: auto;
|
|
5131
|
+
}
|
|
5132
|
+
.sc-flow__status + .sc-flow__close {
|
|
5133
|
+
margin-inline-start: 0;
|
|
5134
|
+
}
|
|
5135
|
+
|
|
5136
|
+
/* Progress: one segment per chapter, as wide as its share of the steps (flex-grow set inline). */
|
|
5137
|
+
.sc-flow__progress {
|
|
5138
|
+
flex: 1 1 12rem;
|
|
5139
|
+
display: grid;
|
|
5140
|
+
gap: var(--sc-spacing-2xs);
|
|
5141
|
+
min-inline-size: 0;
|
|
5142
|
+
max-inline-size: 32.5rem;
|
|
5143
|
+
margin-inline: auto;
|
|
5144
|
+
}
|
|
5145
|
+
.sc-flow__progress + .sc-flow__status,
|
|
5146
|
+
.sc-flow__progress + .sc-flow__close {
|
|
5147
|
+
margin-inline-start: 0;
|
|
5148
|
+
}
|
|
5149
|
+
.sc-flow__progress-label {
|
|
5150
|
+
overflow: hidden;
|
|
5151
|
+
font-size: var(--sc-font-size-xs);
|
|
5152
|
+
color: var(--sc-color-text-muted);
|
|
5153
|
+
text-align: center;
|
|
5154
|
+
text-overflow: ellipsis;
|
|
5155
|
+
white-space: nowrap;
|
|
5156
|
+
}
|
|
5157
|
+
.sc-flow__progress-label :where(b, strong) {
|
|
5158
|
+
color: var(--sc-color-text-default);
|
|
5159
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5160
|
+
}
|
|
5161
|
+
.sc-flow__segments {
|
|
5162
|
+
display: flex;
|
|
5163
|
+
gap: var(--sc-spacing-2xs);
|
|
5164
|
+
margin: 0;
|
|
5165
|
+
padding: 0;
|
|
5166
|
+
list-style: none;
|
|
5167
|
+
}
|
|
5168
|
+
.sc-flow__segment {
|
|
5169
|
+
flex: 1 1 0;
|
|
5170
|
+
block-size: 4px;
|
|
5171
|
+
overflow: hidden;
|
|
5172
|
+
border-radius: var(--sc-radius-full);
|
|
5173
|
+
background: var(--sc-color-surface-active);
|
|
5174
|
+
}
|
|
5175
|
+
.sc-flow__segment-fill {
|
|
5176
|
+
display: block;
|
|
5177
|
+
block-size: 100%;
|
|
5178
|
+
border-radius: inherit;
|
|
5179
|
+
background: var(--sc-color-accent-default);
|
|
5180
|
+
transition: inline-size var(--sc-duration-slower) var(--sc-ease-standard);
|
|
5181
|
+
}
|
|
5182
|
+
|
|
5183
|
+
/* Body: rail beside the viewport from 1000px. */
|
|
5184
|
+
.sc-flow__body {
|
|
5185
|
+
display: grid;
|
|
5186
|
+
grid-template-columns: minmax(0, 1fr);
|
|
5187
|
+
min-block-size: 0;
|
|
5188
|
+
}
|
|
5189
|
+
.sc-flow__rail {
|
|
5190
|
+
display: none;
|
|
5191
|
+
}
|
|
5192
|
+
@media (width >= 1000px) {
|
|
5193
|
+
.sc-flow__body:has(> .sc-flow__rail) {
|
|
5194
|
+
grid-template-columns: 14.5rem minmax(0, 1fr);
|
|
5195
|
+
}
|
|
5196
|
+
.sc-flow__rail {
|
|
5197
|
+
display: block;
|
|
5198
|
+
overflow-y: auto;
|
|
5199
|
+
padding-block: var(--sc-spacing-lg);
|
|
5200
|
+
padding-inline: var(--sc-spacing-md) var(--sc-spacing-sm);
|
|
5201
|
+
border-inline-end: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
5202
|
+
}
|
|
5203
|
+
}
|
|
5204
|
+
.sc-flow__rail-group {
|
|
5205
|
+
margin-block-end: var(--sc-spacing-sm);
|
|
5206
|
+
}
|
|
5207
|
+
.sc-flow__rail-label {
|
|
5208
|
+
display: block;
|
|
5209
|
+
padding: 0 var(--sc-spacing-xs) var(--sc-spacing-2xs);
|
|
5210
|
+
font-size: var(--sc-font-size-xs);
|
|
5211
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5212
|
+
letter-spacing: var(--sc-font-tracking-wide);
|
|
5213
|
+
text-transform: uppercase;
|
|
5214
|
+
color: var(--sc-color-text-subtle);
|
|
5215
|
+
}
|
|
5216
|
+
.sc-flow__rail-list {
|
|
5217
|
+
margin: 0;
|
|
5218
|
+
padding: 0;
|
|
5219
|
+
list-style: none;
|
|
5220
|
+
}
|
|
5221
|
+
.sc-flow__rail-item {
|
|
5222
|
+
display: grid;
|
|
5223
|
+
grid-template-columns: 1.25rem minmax(0, 1fr) auto;
|
|
5224
|
+
align-items: center;
|
|
5225
|
+
gap: var(--sc-spacing-xs);
|
|
5226
|
+
box-sizing: border-box;
|
|
5227
|
+
inline-size: 100%;
|
|
5228
|
+
min-block-size: var(--sc-size-control-sm);
|
|
5229
|
+
padding: 0 var(--sc-spacing-xs);
|
|
5230
|
+
border: 0;
|
|
5231
|
+
border-radius: var(--sc-radius-md);
|
|
5232
|
+
background: transparent;
|
|
5233
|
+
color: var(--sc-color-text-muted);
|
|
5234
|
+
font: inherit;
|
|
5235
|
+
font-size: var(--sc-font-size-sm);
|
|
5236
|
+
text-align: start;
|
|
5237
|
+
cursor: pointer;
|
|
5238
|
+
transition:
|
|
5239
|
+
background-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
5240
|
+
color var(--sc-duration-fast) var(--sc-ease-standard);
|
|
5241
|
+
}
|
|
5242
|
+
.sc-flow__rail-item:hover:not(:disabled) {
|
|
5243
|
+
background: var(--sc-color-surface-hover);
|
|
5244
|
+
color: var(--sc-color-text-default);
|
|
5245
|
+
}
|
|
5246
|
+
.sc-flow__rail-item:disabled {
|
|
5247
|
+
color: var(--sc-color-text-subtle);
|
|
5248
|
+
cursor: not-allowed;
|
|
5249
|
+
}
|
|
5250
|
+
.sc-flow__rail-item[aria-current='step'] {
|
|
5251
|
+
background: var(--sc-color-accent-subtle);
|
|
5252
|
+
color: var(--sc-color-accent-text);
|
|
5253
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5254
|
+
}
|
|
5255
|
+
.sc-flow__rail-mark {
|
|
5256
|
+
display: grid;
|
|
5257
|
+
place-items: center;
|
|
5258
|
+
inline-size: 1.25rem;
|
|
5259
|
+
block-size: 1.25rem;
|
|
5260
|
+
}
|
|
5261
|
+
.sc-flow__rail-item:not([data-done]) .sc-flow__rail-mark::before {
|
|
5262
|
+
content: '';
|
|
5263
|
+
inline-size: 7px;
|
|
5264
|
+
block-size: 7px;
|
|
5265
|
+
border-radius: var(--sc-radius-full);
|
|
5266
|
+
background: currentColor;
|
|
5267
|
+
opacity: 0.55;
|
|
5268
|
+
}
|
|
5269
|
+
.sc-flow__rail-item[data-done] .sc-flow__rail-mark {
|
|
5270
|
+
color: var(--sc-color-success-text);
|
|
5271
|
+
}
|
|
5272
|
+
.sc-flow__rail-adornment {
|
|
5273
|
+
display: inline-flex;
|
|
5274
|
+
color: var(--sc-color-accent-text);
|
|
5275
|
+
}
|
|
5276
|
+
.sc-flow__rail-note {
|
|
5277
|
+
display: grid;
|
|
5278
|
+
gap: var(--sc-spacing-2xs);
|
|
5279
|
+
margin-block-start: var(--sc-spacing-md);
|
|
5280
|
+
padding: var(--sc-spacing-xs) var(--sc-spacing-sm);
|
|
5281
|
+
border-radius: var(--sc-radius-lg);
|
|
5282
|
+
background: var(--sc-color-surface-sunken);
|
|
5283
|
+
font-size: var(--sc-font-size-xs);
|
|
5284
|
+
color: var(--sc-color-text-muted);
|
|
5285
|
+
}
|
|
5286
|
+
@media (height <= 820px) {
|
|
5287
|
+
.sc-flow__rail-note {
|
|
5288
|
+
display: none;
|
|
5289
|
+
}
|
|
5290
|
+
}
|
|
5291
|
+
|
|
5292
|
+
/* Viewport: the leaving and arriving steps share one grid cell while they animate. */
|
|
5293
|
+
.sc-flow__viewport {
|
|
5294
|
+
position: relative;
|
|
5295
|
+
display: grid;
|
|
5296
|
+
min-block-size: 0;
|
|
5297
|
+
overflow-x: hidden;
|
|
5298
|
+
overflow-y: auto;
|
|
5299
|
+
overscroll-behavior: contain;
|
|
5300
|
+
}
|
|
5301
|
+
.sc-flow__frame {
|
|
5302
|
+
--_dir: 1;
|
|
5303
|
+
--_flip: 1;
|
|
5304
|
+
grid-area: 1 / 1;
|
|
5305
|
+
min-inline-size: 0;
|
|
5306
|
+
}
|
|
5307
|
+
.sc-flow__frame[data-direction='back'] {
|
|
5308
|
+
--_dir: -1;
|
|
5309
|
+
}
|
|
5310
|
+
.sc-flow__frame:dir(rtl) {
|
|
5311
|
+
--_flip: -1;
|
|
5312
|
+
}
|
|
5313
|
+
.sc-flow__frame[data-phase='enter'] {
|
|
5314
|
+
animation: sc-flow-step-in var(--sc-duration-slower) var(--sc-ease-enter) both;
|
|
5315
|
+
}
|
|
5316
|
+
.sc-flow__frame[data-phase='exit'] {
|
|
5317
|
+
pointer-events: none;
|
|
5318
|
+
animation: sc-flow-step-out var(--sc-duration-base) var(--sc-ease-exit) forwards;
|
|
5319
|
+
}
|
|
5320
|
+
@keyframes sc-flow-step-in {
|
|
5321
|
+
from {
|
|
5322
|
+
opacity: 0;
|
|
5323
|
+
translate: calc(var(--_dir) * var(--_flip) * 72px) 0;
|
|
5324
|
+
}
|
|
5325
|
+
}
|
|
5326
|
+
@keyframes sc-flow-step-out {
|
|
5327
|
+
to {
|
|
5328
|
+
opacity: 0;
|
|
5329
|
+
translate: calc(var(--_dir) * var(--_flip) * -40px) 0;
|
|
5330
|
+
scale: 0.985;
|
|
5331
|
+
}
|
|
5332
|
+
}
|
|
5333
|
+
@keyframes sc-flow-fade-in {
|
|
5334
|
+
from {
|
|
5335
|
+
opacity: 0;
|
|
5336
|
+
}
|
|
5337
|
+
}
|
|
5338
|
+
@keyframes sc-flow-fade-out {
|
|
5339
|
+
to {
|
|
5340
|
+
opacity: 0;
|
|
5341
|
+
}
|
|
5342
|
+
}
|
|
5343
|
+
|
|
5344
|
+
/* Step */
|
|
5345
|
+
.sc-flow__step {
|
|
5346
|
+
display: grid;
|
|
5347
|
+
align-content: start;
|
|
5348
|
+
gap: var(--sc-spacing-lg);
|
|
5349
|
+
box-sizing: border-box;
|
|
5350
|
+
inline-size: 100%;
|
|
5351
|
+
max-inline-size: 45rem;
|
|
5352
|
+
margin-inline: auto;
|
|
5353
|
+
padding: var(--sc-spacing-xl) var(--sc-spacing-md) var(--sc-spacing-2xl);
|
|
5354
|
+
}
|
|
5355
|
+
@media (width >= 700px) {
|
|
5356
|
+
.sc-flow__step {
|
|
5357
|
+
padding-block-start: var(--sc-spacing-2xl);
|
|
5358
|
+
padding-inline: var(--sc-spacing-xl);
|
|
5359
|
+
}
|
|
5360
|
+
}
|
|
5361
|
+
.sc-flow__step-head {
|
|
5362
|
+
display: grid;
|
|
5363
|
+
gap: var(--sc-spacing-xs);
|
|
5364
|
+
}
|
|
5365
|
+
.sc-flow__eyebrow {
|
|
5366
|
+
margin: 0;
|
|
5367
|
+
font-size: var(--sc-font-size-xs);
|
|
5368
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5369
|
+
letter-spacing: var(--sc-font-tracking-wide);
|
|
5370
|
+
text-transform: uppercase;
|
|
5371
|
+
color: var(--sc-color-accent-text);
|
|
5372
|
+
}
|
|
5373
|
+
.sc-flow__step-title {
|
|
5374
|
+
margin: 0;
|
|
5375
|
+
font-size: var(--sc-font-size-3xl);
|
|
5376
|
+
line-height: var(--sc-font-line-height-snug);
|
|
5377
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
5378
|
+
letter-spacing: var(--sc-font-tracking-tight);
|
|
5379
|
+
text-wrap: balance;
|
|
5380
|
+
}
|
|
5381
|
+
/* Focus lands here only by script, to move the reading position; Tab never reaches it. */
|
|
5382
|
+
.sc-flow__step-title:focus,
|
|
5383
|
+
.sc-flow__step-title:focus-visible {
|
|
5384
|
+
outline: none;
|
|
5385
|
+
}
|
|
5386
|
+
.sc-flow__step-description {
|
|
5387
|
+
max-inline-size: 60ch;
|
|
5388
|
+
color: var(--sc-color-text-muted);
|
|
5389
|
+
}
|
|
5390
|
+
|
|
5391
|
+
/* Footer: back at the start, hint and primary action at the end, every button a 44px target. */
|
|
5392
|
+
.sc-flow__footer {
|
|
5393
|
+
display: flex;
|
|
5394
|
+
align-items: center;
|
|
5395
|
+
gap: var(--sc-spacing-sm);
|
|
5396
|
+
padding-block: var(--sc-spacing-sm) calc(var(--sc-spacing-sm) + env(safe-area-inset-bottom, 0px));
|
|
5397
|
+
padding-inline: calc(var(--sc-spacing-md) + env(safe-area-inset-left, 0px))
|
|
5398
|
+
calc(var(--sc-spacing-md) + env(safe-area-inset-right, 0px));
|
|
5399
|
+
border-block-start: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
5400
|
+
background: color-mix(in oklab, var(--sc-color-surface-default) 92%, transparent);
|
|
5401
|
+
backdrop-filter: blur(6px);
|
|
5402
|
+
}
|
|
5403
|
+
.sc-flow__footer .sc-button {
|
|
5404
|
+
min-block-size: var(--sc-size-touch-target);
|
|
5405
|
+
min-inline-size: max(var(--_h), var(--sc-size-touch-target));
|
|
5406
|
+
}
|
|
5407
|
+
.sc-flow__footer-hint {
|
|
5408
|
+
display: none;
|
|
5409
|
+
align-items: center;
|
|
5410
|
+
gap: var(--sc-spacing-2xs);
|
|
5411
|
+
font-size: var(--sc-font-size-xs);
|
|
5412
|
+
color: var(--sc-color-text-subtle);
|
|
5413
|
+
}
|
|
5414
|
+
.sc-flow__footer-actions {
|
|
5415
|
+
display: flex;
|
|
5416
|
+
gap: var(--sc-spacing-xs);
|
|
5417
|
+
margin-inline-start: auto;
|
|
5418
|
+
}
|
|
5419
|
+
.sc-flow__footer-actions > .sc-button:last-child {
|
|
5420
|
+
min-inline-size: 10rem;
|
|
5421
|
+
}
|
|
5422
|
+
|
|
5423
|
+
@media (width >= 760px) {
|
|
5424
|
+
.sc-flow__footer-hint {
|
|
5425
|
+
display: inline-flex;
|
|
5426
|
+
margin-inline-start: auto;
|
|
5427
|
+
}
|
|
5428
|
+
.sc-flow__footer-hint + .sc-flow__footer-actions {
|
|
5429
|
+
margin-inline-start: 0;
|
|
5430
|
+
}
|
|
5431
|
+
}
|
|
5432
|
+
@media (width < 760px) {
|
|
5433
|
+
.sc-flow__header {
|
|
5434
|
+
flex-wrap: wrap;
|
|
5435
|
+
row-gap: var(--sc-spacing-xs);
|
|
5436
|
+
}
|
|
5437
|
+
.sc-flow__heading {
|
|
5438
|
+
flex: 1 1 0;
|
|
5439
|
+
}
|
|
5440
|
+
.sc-flow__progress {
|
|
5441
|
+
order: 1;
|
|
5442
|
+
flex-basis: 100%;
|
|
5443
|
+
max-inline-size: none;
|
|
5444
|
+
padding-inline-end: var(--sc-spacing-xs);
|
|
5445
|
+
}
|
|
5446
|
+
.sc-flow__progress-label {
|
|
5447
|
+
display: none;
|
|
5448
|
+
}
|
|
5449
|
+
.sc-flow__heading[data-compact] > .sc-flow__title {
|
|
5450
|
+
position: absolute;
|
|
5451
|
+
inline-size: 1px;
|
|
5452
|
+
block-size: 1px;
|
|
5453
|
+
margin: -1px;
|
|
5454
|
+
overflow: hidden;
|
|
5455
|
+
clip-path: inset(50%);
|
|
5456
|
+
}
|
|
5457
|
+
.sc-flow__compact-title {
|
|
5458
|
+
display: inline;
|
|
5459
|
+
}
|
|
5460
|
+
.sc-flow__step-title {
|
|
5461
|
+
font-size: var(--sc-font-size-2xl);
|
|
5462
|
+
}
|
|
5463
|
+
}
|
|
5464
|
+
@media (width < 520px) {
|
|
5465
|
+
.sc-flow__footer-actions {
|
|
5466
|
+
flex: 1 1 auto;
|
|
5467
|
+
}
|
|
5468
|
+
.sc-flow__footer-actions > :last-child {
|
|
5469
|
+
flex: 1 1 auto;
|
|
5470
|
+
}
|
|
5471
|
+
}
|
|
5472
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5473
|
+
.sc-flow__frame[data-phase='enter'] {
|
|
5474
|
+
animation: sc-flow-fade-in var(--sc-duration-base) var(--sc-ease-enter) both;
|
|
5475
|
+
}
|
|
5476
|
+
.sc-flow__frame[data-phase='exit'] {
|
|
5477
|
+
animation: sc-flow-fade-out var(--sc-duration-fast) var(--sc-ease-exit) forwards;
|
|
5478
|
+
}
|
|
5479
|
+
.sc-flow__segment-fill {
|
|
5480
|
+
transition: none;
|
|
5481
|
+
}
|
|
5482
|
+
}
|
|
5483
|
+
|
|
5484
|
+
/* ---- score.css ---- */
|
|
5485
|
+
/* ---- Score ----------------------------------------------------------------- */
|
|
5486
|
+
/* A number on a tinted tile, or inside a ring. Tone sets the tint (--_bg), the number (--_fg) and the solid used
|
|
5487
|
+
for the ring arc and the selected tile (--_solid, --_on-solid). */
|
|
5488
|
+
.sc-score {
|
|
5489
|
+
--_bg: var(--sc-color-accent-subtle);
|
|
5490
|
+
--_fg: var(--sc-color-accent-text);
|
|
5491
|
+
--_solid: var(--sc-color-accent-default);
|
|
5492
|
+
--_on-solid: var(--sc-color-text-on-accent);
|
|
5493
|
+
--_s: var(--sc-size-score-sm);
|
|
5494
|
+
position: relative;
|
|
5495
|
+
display: inline-grid;
|
|
5496
|
+
place-items: center;
|
|
5497
|
+
flex: none;
|
|
5498
|
+
box-sizing: border-box;
|
|
5499
|
+
inline-size: var(--_s);
|
|
5500
|
+
block-size: var(--_s);
|
|
5501
|
+
border-radius: var(--sc-radius-lg);
|
|
5502
|
+
background: var(--_bg);
|
|
5503
|
+
color: var(--_fg);
|
|
5504
|
+
font-family: var(--sc-font-family-sans);
|
|
5505
|
+
font-size: var(--sc-font-size-sm);
|
|
5506
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
5507
|
+
font-variant-numeric: tabular-nums;
|
|
5508
|
+
line-height: 1;
|
|
5509
|
+
vertical-align: middle;
|
|
5510
|
+
transition:
|
|
5511
|
+
background-color var(--sc-duration-fast) var(--sc-ease-standard),
|
|
5512
|
+
color var(--sc-duration-fast) var(--sc-ease-standard);
|
|
5513
|
+
}
|
|
5514
|
+
.sc-score[data-size='md'] {
|
|
5515
|
+
--_s: var(--sc-size-score-md);
|
|
5516
|
+
border-radius: var(--sc-radius-xl);
|
|
5517
|
+
font-size: var(--sc-font-size-lg);
|
|
5518
|
+
}
|
|
5519
|
+
.sc-score[data-tone='neutral'] {
|
|
5520
|
+
/* surface.active, so the tile still shows on a hovered row (surface.hover). Selected turns accent. */
|
|
5521
|
+
--_bg: var(--sc-color-surface-active);
|
|
5522
|
+
--_fg: var(--sc-color-text-muted);
|
|
5523
|
+
--_solid: var(--sc-color-text-muted);
|
|
5524
|
+
}
|
|
5525
|
+
.sc-score[data-tone='success'] {
|
|
5526
|
+
--_bg: var(--sc-color-success-subtle);
|
|
5527
|
+
--_fg: var(--sc-color-success-text);
|
|
5528
|
+
--_solid: var(--sc-color-success-solid);
|
|
5529
|
+
--_on-solid: var(--sc-color-text-on-status);
|
|
5530
|
+
}
|
|
5531
|
+
.sc-score[data-tone='warning'] {
|
|
5532
|
+
--_bg: var(--sc-color-warning-subtle);
|
|
5533
|
+
--_fg: var(--sc-color-warning-text);
|
|
5534
|
+
--_solid: var(--sc-color-warning-solid);
|
|
5535
|
+
--_on-solid: var(--sc-color-text-on-status);
|
|
5536
|
+
}
|
|
5537
|
+
.sc-score[data-tone='danger'] {
|
|
5538
|
+
--_bg: var(--sc-color-danger-subtle);
|
|
5539
|
+
--_fg: var(--sc-color-danger-text);
|
|
5540
|
+
--_solid: var(--sc-color-danger-solid);
|
|
5541
|
+
--_on-solid: var(--sc-color-text-on-status);
|
|
5542
|
+
}
|
|
5543
|
+
/* Not scored (`value={null}`): no tone, a muted dash on the neutral tile or inside an empty ring. --_solid stays
|
|
5544
|
+
accent, so a selected row still turns the tile solid accent, as neutral does. */
|
|
5545
|
+
.sc-score[data-unscored] {
|
|
5546
|
+
--_bg: var(--sc-color-surface-active);
|
|
5547
|
+
--_fg: var(--sc-color-text-muted);
|
|
5548
|
+
}
|
|
5549
|
+
.sc-score__body {
|
|
5550
|
+
display: grid;
|
|
5551
|
+
justify-items: center;
|
|
5552
|
+
gap: var(--sc-spacing-3xs);
|
|
5553
|
+
}
|
|
5554
|
+
.sc-score__caption {
|
|
5555
|
+
font-family: var(--sc-font-family-mono);
|
|
5556
|
+
font-size: var(--sc-font-size-xs);
|
|
5557
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5558
|
+
letter-spacing: var(--sc-font-tracking-wide);
|
|
5559
|
+
text-transform: uppercase;
|
|
5560
|
+
color: var(--sc-color-text-muted);
|
|
5561
|
+
}
|
|
5562
|
+
/* Selected: the tile goes solid in its tone (neutral goes accent), inside a selected row or on `selected`. */
|
|
5563
|
+
.sc-score[data-variant='tile'][data-selected],
|
|
5564
|
+
.sc-card[data-selected] .sc-score[data-variant='tile'],
|
|
5565
|
+
[aria-pressed='true'] .sc-score[data-variant='tile'],
|
|
5566
|
+
[aria-selected='true'] .sc-score[data-variant='tile'] {
|
|
5567
|
+
background: var(--_solid);
|
|
5568
|
+
color: var(--_on-solid);
|
|
5569
|
+
}
|
|
5570
|
+
.sc-score[data-variant='tile'][data-tone='neutral'][data-selected],
|
|
5571
|
+
.sc-card[data-selected] .sc-score[data-variant='tile'][data-tone='neutral'],
|
|
5572
|
+
[aria-pressed='true'] .sc-score[data-variant='tile'][data-tone='neutral'],
|
|
5573
|
+
[aria-selected='true'] .sc-score[data-variant='tile'][data-tone='neutral'] {
|
|
5574
|
+
background: var(--sc-color-accent-default);
|
|
5575
|
+
color: var(--sc-color-text-on-accent);
|
|
5576
|
+
}
|
|
5577
|
+
.sc-score[data-variant='tile'][data-selected] .sc-score__caption,
|
|
5578
|
+
.sc-card[data-selected] .sc-score[data-variant='tile'] .sc-score__caption,
|
|
5579
|
+
[aria-pressed='true'] .sc-score[data-variant='tile'] .sc-score__caption,
|
|
5580
|
+
[aria-selected='true'] .sc-score[data-variant='tile'] .sc-score__caption {
|
|
5581
|
+
color: inherit;
|
|
5582
|
+
}
|
|
5583
|
+
/* Ring: the number in the tone's text colour over a donut. The SVG is drawn for the 64px ring token with a 6px
|
|
5584
|
+
stroke (r = 29 in Score.tsx); the arc length comes from --sc-score-fill (0–100, set inline). */
|
|
5585
|
+
.sc-score[data-variant='ring'] {
|
|
5586
|
+
--_s: var(--sc-size-score-ring);
|
|
5587
|
+
border-radius: var(--sc-radius-full);
|
|
5588
|
+
background: transparent;
|
|
5589
|
+
font-size: var(--sc-font-size-lg);
|
|
5590
|
+
}
|
|
5591
|
+
.sc-score__ring {
|
|
5592
|
+
position: absolute;
|
|
5593
|
+
inset: 0;
|
|
5594
|
+
inline-size: 100%;
|
|
5595
|
+
block-size: 100%;
|
|
5596
|
+
rotate: -90deg;
|
|
5597
|
+
overflow: visible;
|
|
5598
|
+
}
|
|
5599
|
+
.sc-score__track,
|
|
5600
|
+
.sc-score__arc {
|
|
5601
|
+
fill: none;
|
|
5602
|
+
stroke-width: var(--sc-size-score-ring-stroke);
|
|
5603
|
+
}
|
|
5604
|
+
.sc-score__track {
|
|
5605
|
+
stroke: var(--sc-color-surface-active);
|
|
5606
|
+
}
|
|
5607
|
+
.sc-score__arc {
|
|
5608
|
+
stroke: var(--_solid);
|
|
5609
|
+
stroke-linecap: round;
|
|
5610
|
+
stroke-dasharray: 100;
|
|
5611
|
+
stroke-dashoffset: calc(100 - var(--sc-score-fill, 0));
|
|
5612
|
+
/* Moves only when the value changes; the first render draws it in place. The data motion (600ms, a long soft
|
|
5613
|
+
landing) is what makes a change from one score to the next read; the 300ms panel timing was over too soon. */
|
|
5614
|
+
transition: stroke-dashoffset var(--sc-duration-data) var(--sc-ease-data);
|
|
5615
|
+
}
|
|
5616
|
+
.sc-score[data-variant='ring'] .sc-score__body {
|
|
5617
|
+
position: relative;
|
|
5618
|
+
}
|
|
5619
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5620
|
+
.sc-score,
|
|
5621
|
+
.sc-score__arc {
|
|
5622
|
+
transition: none;
|
|
5623
|
+
}
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
/* ---- reason-list.css ---- */
|
|
5627
|
+
/* ---- ReasonList ------------------------------------------------------------ */
|
|
5628
|
+
/* Marker shape per tone: for = filled square, against = bar, gap = hollow circle. Markers use the tone's solid,
|
|
5629
|
+
3:1 on every surface; the shape carries the meaning on its own (WCAG 1.4.1). */
|
|
5630
|
+
.sc-reason-list {
|
|
5631
|
+
--_m: 9px;
|
|
5632
|
+
--_marker: var(--sc-color-success-solid);
|
|
5633
|
+
display: grid;
|
|
5634
|
+
gap: var(--sc-spacing-xs);
|
|
5635
|
+
margin: 0;
|
|
5636
|
+
padding: 0;
|
|
5637
|
+
list-style: none;
|
|
5638
|
+
font-family: var(--sc-font-family-sans);
|
|
5639
|
+
font-size: var(--sc-font-size-sm);
|
|
5640
|
+
line-height: var(--sc-font-line-height-ui);
|
|
5641
|
+
color: var(--sc-color-text-muted);
|
|
5642
|
+
}
|
|
5643
|
+
.sc-reason-list[data-size='sm'] {
|
|
5644
|
+
--_m: 7px;
|
|
5645
|
+
gap: var(--sc-spacing-2xs);
|
|
5646
|
+
font-size: var(--sc-font-size-xs);
|
|
5647
|
+
}
|
|
5648
|
+
.sc-reason-list[data-divider] {
|
|
5649
|
+
padding-block-start: var(--sc-spacing-xs);
|
|
5650
|
+
border-block-start: var(--sc-border-width-hairline) dashed var(--sc-color-border-default);
|
|
5651
|
+
}
|
|
5652
|
+
.sc-reason-list[data-tone='against'] {
|
|
5653
|
+
--_marker: var(--sc-color-danger-solid);
|
|
5654
|
+
}
|
|
5655
|
+
.sc-reason-list[data-tone='gap'] {
|
|
5656
|
+
--_marker: var(--sc-color-warning-solid);
|
|
5657
|
+
}
|
|
5658
|
+
.sc-reason-list__item {
|
|
5659
|
+
position: relative;
|
|
5660
|
+
padding-inline-start: calc(var(--_m) + var(--sc-spacing-xs));
|
|
5661
|
+
}
|
|
5662
|
+
/* Centred on the first line: half the line box less half the marker. */
|
|
5663
|
+
.sc-reason-list__item::before {
|
|
5664
|
+
content: '';
|
|
5665
|
+
position: absolute;
|
|
5666
|
+
inset-inline-start: 0;
|
|
5667
|
+
inset-block-start: 0.45em;
|
|
5668
|
+
inset-block-start: calc((1lh - var(--_m)) / 2);
|
|
5669
|
+
box-sizing: border-box;
|
|
5670
|
+
inline-size: var(--_m);
|
|
5671
|
+
block-size: var(--_m);
|
|
5672
|
+
border-radius: var(--sc-radius-xs);
|
|
5673
|
+
background: var(--_marker);
|
|
5674
|
+
}
|
|
5675
|
+
.sc-reason-list[data-tone='against'] > .sc-reason-list__item::before {
|
|
5676
|
+
inset-block-start: 0.6em;
|
|
5677
|
+
inset-block-start: calc((1lh - var(--_m) / 3) / 2);
|
|
5678
|
+
block-size: calc(var(--_m) / 3);
|
|
5679
|
+
border-radius: var(--sc-radius-full);
|
|
5680
|
+
}
|
|
5681
|
+
.sc-reason-list[data-tone='gap'] > .sc-reason-list__item::before {
|
|
5682
|
+
background: transparent;
|
|
5683
|
+
border: var(--sc-border-width-focus) solid var(--_marker);
|
|
5684
|
+
border-radius: var(--sc-radius-full);
|
|
5685
|
+
}
|
|
5686
|
+
.sc-reason-list__item :where(strong, b) {
|
|
5687
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
5688
|
+
color: var(--sc-color-text-default);
|
|
5689
|
+
}
|
|
5690
|
+
|
|
5691
|
+
/* ---- word-diff.css ---- */
|
|
5692
|
+
/* ---- WordDiff -------------------------------------------------------------- */
|
|
5693
|
+
/* Strike-through and underline carry the meaning; the tint only groups the words. Both lines are 3:1 on their tint
|
|
5694
|
+
(diff.*-stroke on diff.*-wash) in light and dark. */
|
|
5695
|
+
.sc-word-diff {
|
|
5696
|
+
margin: 0;
|
|
5697
|
+
font-family: var(--sc-font-family-sans);
|
|
5698
|
+
font-size: var(--sc-font-size-sm);
|
|
5699
|
+
line-height: var(--sc-font-line-height-normal);
|
|
5700
|
+
color: var(--sc-color-text-default);
|
|
5701
|
+
white-space: pre-wrap;
|
|
5702
|
+
overflow-wrap: anywhere;
|
|
5703
|
+
}
|
|
5704
|
+
.sc-word-diff[data-size='md'] {
|
|
5705
|
+
font-size: var(--sc-font-size-md);
|
|
5706
|
+
}
|
|
5707
|
+
p.sc-word-diff:not([data-family='mono']),
|
|
5708
|
+
div.sc-word-diff:not([data-family='mono']) {
|
|
5709
|
+
max-inline-size: var(--sc-font-measure);
|
|
5710
|
+
}
|
|
5711
|
+
/* Code and structured text: the mono face, full width, tabs as two columns. */
|
|
5712
|
+
.sc-word-diff[data-family='mono'] {
|
|
5713
|
+
font-family: var(--sc-font-family-mono);
|
|
5714
|
+
tab-size: 2;
|
|
5715
|
+
}
|
|
5716
|
+
.sc-word-diff__added,
|
|
5717
|
+
.sc-word-diff__removed {
|
|
5718
|
+
padding-inline: var(--sc-spacing-3xs);
|
|
5719
|
+
border-radius: var(--sc-radius-xs);
|
|
5720
|
+
text-decoration-thickness: var(--sc-border-width-focus);
|
|
5721
|
+
box-decoration-break: clone;
|
|
5722
|
+
-webkit-box-decoration-break: clone;
|
|
5723
|
+
}
|
|
5724
|
+
.sc-word-diff__added {
|
|
5725
|
+
background: var(--sc-color-diff-added-wash);
|
|
5726
|
+
color: var(--sc-color-text-default);
|
|
5727
|
+
text-decoration-line: underline;
|
|
5728
|
+
text-decoration-color: var(--sc-color-diff-added-stroke);
|
|
5729
|
+
text-underline-offset: 0.2em;
|
|
5730
|
+
}
|
|
5731
|
+
.sc-word-diff__removed {
|
|
5732
|
+
background: var(--sc-color-diff-removed-wash);
|
|
5733
|
+
color: var(--sc-color-text-muted);
|
|
5734
|
+
text-decoration-line: line-through;
|
|
5735
|
+
text-decoration-color: var(--sc-color-diff-removed-stroke);
|
|
5736
|
+
}
|
|
5737
|
+
/* In mono, side padding would push every later character off its column. */
|
|
5738
|
+
.sc-word-diff[data-family='mono'] .sc-word-diff__added,
|
|
5739
|
+
.sc-word-diff[data-family='mono'] .sc-word-diff__removed {
|
|
5740
|
+
padding-inline: 0;
|
|
5741
|
+
}
|
|
5742
|
+
|
|
5743
|
+
/* ---- text-editor.css ---- */
|
|
5744
|
+
/* ---- TextEditor (@salemcobalt/ui/editor) ------------------------------------ */
|
|
5745
|
+
/* CodeMirror is themed in JS (EditorView.theme on these tokens). These rules size the code Textarea it renders
|
|
5746
|
+
before CodeMirror loads like the editor: grown to its content (field-sizing; `rows` where unsupported), at least
|
|
5747
|
+
`rows` lines, with the editor's room under the last line on touch screens, clear of Safari's bottom toolbar. */
|
|
5748
|
+
.sc-field[data-editor='fallback'] .sc-textarea {
|
|
5749
|
+
field-sizing: content;
|
|
5750
|
+
min-block-size: calc(
|
|
5751
|
+
var(--_rows, 8) * 1lh + 2 * var(--sc-spacing-xs) + 2 * var(--sc-border-width-hairline)
|
|
5752
|
+
);
|
|
5753
|
+
}
|
|
5754
|
+
@media (pointer: coarse) {
|
|
5755
|
+
.sc-field[data-editor='fallback'] .sc-textarea {
|
|
5756
|
+
padding-block-end: var(--sc-spacing-xl);
|
|
5757
|
+
min-block-size: calc(
|
|
5758
|
+
var(--_rows, 8) * 1lh + var(--sc-spacing-xs) + var(--sc-spacing-xl) + 2 *
|
|
5759
|
+
var(--sc-border-width-hairline)
|
|
5760
|
+
);
|
|
5761
|
+
}
|
|
5762
|
+
}
|
|
5763
|
+
|
|
5764
|
+
/* ---- quote.css ---- */
|
|
5765
|
+
/* ---- Quote ----------------------------------------------------------------- */
|
|
5766
|
+
/* Label and words on one line, on the accent wash with the accent border (both from the plain Card selected
|
|
5767
|
+
state), so an echoed instruction reads as "yours" next to what changed. */
|
|
5768
|
+
.sc-quote {
|
|
5769
|
+
box-sizing: border-box;
|
|
5770
|
+
margin: 0;
|
|
5771
|
+
padding: var(--sc-spacing-xs) var(--sc-spacing-sm);
|
|
5772
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-accent-border);
|
|
5773
|
+
border-radius: var(--sc-radius-lg);
|
|
5774
|
+
background: var(--sc-color-accent-wash);
|
|
5775
|
+
font-family: var(--sc-font-family-sans);
|
|
5776
|
+
font-size: var(--sc-font-size-sm);
|
|
5777
|
+
line-height: var(--sc-font-line-height-ui);
|
|
5778
|
+
color: var(--sc-color-text-muted);
|
|
5779
|
+
}
|
|
5780
|
+
.sc-quote__label {
|
|
5781
|
+
display: inline;
|
|
5782
|
+
margin-inline-end: var(--sc-spacing-xs);
|
|
5783
|
+
font-family: var(--sc-font-family-mono);
|
|
5784
|
+
font-size: var(--sc-font-size-xs);
|
|
5785
|
+
font-weight: var(--sc-font-weight-medium);
|
|
5786
|
+
letter-spacing: var(--sc-font-tracking-wider);
|
|
5787
|
+
text-transform: uppercase;
|
|
5788
|
+
color: var(--sc-color-accent-text);
|
|
5789
|
+
}
|
|
5790
|
+
.sc-quote__text {
|
|
5791
|
+
display: inline;
|
|
5792
|
+
margin: 0;
|
|
5793
|
+
}
|
|
5794
|
+
|
|
5795
|
+
/* ---- avatar.css ---- */
|
|
5796
|
+
/* ---- Avatar ---------------------------------------------------------------- */
|
|
5797
|
+
/* Sizes follow the control heights (so compact density shrinks them too), xs the 24px icon. The tint alone is about
|
|
5798
|
+
1.0-1.4:1 on the surfaces, so the 1px ring (avatar.ring, 3:1 on the fill and every surface) draws the circle. It is
|
|
5799
|
+
an overlay, so it also edges a picture. */
|
|
5800
|
+
.sc-avatar {
|
|
5801
|
+
--_size: var(--sc-size-control-md);
|
|
5802
|
+
--_fs: var(--sc-font-size-sm);
|
|
5803
|
+
--_ring: var(--sc-border-width-hairline);
|
|
5804
|
+
position: relative;
|
|
5805
|
+
display: inline-grid;
|
|
5806
|
+
place-items: center;
|
|
5807
|
+
flex: none;
|
|
5808
|
+
box-sizing: border-box;
|
|
5809
|
+
inline-size: var(--_size);
|
|
5810
|
+
block-size: var(--_size);
|
|
5811
|
+
overflow: hidden;
|
|
5812
|
+
border-radius: var(--sc-radius-full);
|
|
5813
|
+
background: var(--sc-color-avatar-fill);
|
|
5814
|
+
color: var(--sc-color-avatar-text);
|
|
5815
|
+
font-family: var(--sc-font-family-sans);
|
|
5816
|
+
font-size: var(--_fs);
|
|
5817
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
5818
|
+
line-height: 1;
|
|
5819
|
+
letter-spacing: 0;
|
|
5820
|
+
white-space: nowrap;
|
|
5821
|
+
user-select: none;
|
|
5822
|
+
vertical-align: middle;
|
|
5823
|
+
}
|
|
5824
|
+
.sc-avatar::after {
|
|
5825
|
+
content: '';
|
|
5826
|
+
position: absolute;
|
|
5827
|
+
inset: 0;
|
|
5828
|
+
border-radius: inherit;
|
|
5829
|
+
box-shadow: inset 0 0 0 var(--_ring) var(--sc-color-avatar-ring);
|
|
5830
|
+
pointer-events: none;
|
|
5831
|
+
transition: box-shadow var(--sc-duration-fast) var(--sc-ease-standard);
|
|
5832
|
+
}
|
|
5833
|
+
.sc-avatar[data-size='xs'] {
|
|
5834
|
+
--_size: var(--sc-size-icon-xl);
|
|
5835
|
+
--_fs: var(--sc-font-size-xs);
|
|
5836
|
+
}
|
|
5837
|
+
.sc-avatar[data-size='sm'] {
|
|
5838
|
+
--_size: var(--sc-size-control-sm);
|
|
5839
|
+
--_fs: var(--sc-font-size-xs);
|
|
5840
|
+
}
|
|
5841
|
+
.sc-avatar[data-size='lg'] {
|
|
5842
|
+
--_size: var(--sc-size-control-lg);
|
|
5843
|
+
--_fs: var(--sc-font-size-md);
|
|
5844
|
+
}
|
|
5845
|
+
.sc-avatar__image {
|
|
5846
|
+
position: absolute;
|
|
5847
|
+
inset: 0;
|
|
5848
|
+
inline-size: 100%;
|
|
5849
|
+
block-size: 100%;
|
|
5850
|
+
object-fit: cover;
|
|
5851
|
+
}
|
|
5852
|
+
.sc-avatar__fallback {
|
|
5853
|
+
display: contents;
|
|
5854
|
+
}
|
|
5855
|
+
/* No name and no initials: a person glyph at 60% of the circle. */
|
|
5856
|
+
.sc-avatar__icon {
|
|
5857
|
+
font-size: calc(var(--_size) * 0.6);
|
|
5858
|
+
}
|
|
5859
|
+
|
|
5860
|
+
/* ---- AvatarButton ---------------------------------------------------------- */
|
|
5861
|
+
.sc-avatar-button {
|
|
5862
|
+
position: relative;
|
|
5863
|
+
display: inline-grid;
|
|
5864
|
+
flex: none;
|
|
5865
|
+
padding: 0;
|
|
5866
|
+
border: 0;
|
|
5867
|
+
border-radius: var(--sc-radius-full);
|
|
5868
|
+
background: none;
|
|
5869
|
+
color: inherit;
|
|
5870
|
+
font: inherit;
|
|
5871
|
+
text-decoration: none;
|
|
5872
|
+
cursor: pointer;
|
|
5873
|
+
}
|
|
5874
|
+
.sc-avatar-button:hover > .sc-avatar,
|
|
5875
|
+
.sc-avatar-button[data-popup-open] > .sc-avatar,
|
|
5876
|
+
.sc-avatar-button[aria-expanded='true'] > .sc-avatar {
|
|
5877
|
+
--_ring: var(--sc-border-width-focus);
|
|
5878
|
+
}
|
|
5879
|
+
.sc-avatar-button:disabled {
|
|
5880
|
+
opacity: 0.5;
|
|
5881
|
+
cursor: not-allowed;
|
|
5882
|
+
}
|
|
5883
|
+
.sc-avatar-button:disabled:hover > .sc-avatar {
|
|
5884
|
+
--_ring: var(--sc-border-width-hairline);
|
|
5885
|
+
}
|
|
5886
|
+
/* 44px hit area on touch without changing layout, as on Button. */
|
|
5887
|
+
@media (pointer: coarse) {
|
|
5888
|
+
.sc-avatar-button::after {
|
|
5889
|
+
content: '';
|
|
5890
|
+
position: absolute;
|
|
5891
|
+
inset: 50% auto auto 50%;
|
|
5892
|
+
translate: -50% -50%;
|
|
5893
|
+
inline-size: max(100%, var(--sc-size-touch-target));
|
|
5894
|
+
block-size: max(100%, var(--sc-size-touch-target));
|
|
5895
|
+
}
|
|
5896
|
+
}
|
|
5897
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5898
|
+
.sc-avatar::after {
|
|
5899
|
+
transition: none;
|
|
5900
|
+
}
|
|
5901
|
+
}
|
|
5902
|
+
|
|
2117
5903
|
}
|