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