@seed-design/css 2.5.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.css +700 -89
- package/all.layered.css +700 -89
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/base.css +15 -0
- package/base.layered.css +15 -0
- package/base.layered.min.css +1 -1
- package/base.min.css +1 -1
- package/breakpoints/index.mjs +5 -0
- package/package.json +6 -1
- package/recipes/accordion.css +1 -1
- package/recipes/accordion.layered.css +1 -1
- package/recipes/action-button.css +3 -13
- package/recipes/action-button.layered.css +4 -17
- package/recipes/attachment-input-item.css +15 -3
- package/recipes/attachment-input-item.layered.css +24 -8
- package/recipes/attachment-input-trigger.css +6 -1
- package/recipes/attachment-input-trigger.layered.css +10 -3
- package/recipes/bottom-sheet.css +7 -0
- package/recipes/bottom-sheet.layered.css +11 -2
- package/recipes/callout.css +43 -4
- package/recipes/callout.layered.css +57 -6
- package/recipes/checkmark.css +6 -1
- package/recipes/checkmark.layered.css +10 -3
- package/recipes/chip-tabs.css +6 -1
- package/recipes/chip-tabs.layered.css +10 -3
- package/recipes/chip.css +6 -3
- package/recipes/chip.layered.css +10 -5
- package/recipes/content-dialog.css +4 -1
- package/recipes/content-dialog.layered.css +5 -1
- package/recipes/contextual-floating-button.css +6 -1
- package/recipes/contextual-floating-button.layered.css +8 -1
- package/recipes/floating-action-button.css +6 -1
- package/recipes/floating-action-button.layered.css +8 -1
- package/recipes/help-bubble.css +8 -2
- package/recipes/help-bubble.layered.css +12 -4
- package/recipes/image-frame-reaction-button.css +6 -0
- package/recipes/image-frame-reaction-button.layered.css +8 -0
- package/recipes/input-button.css +6 -1
- package/recipes/input-button.layered.css +10 -3
- package/recipes/list-item.css +6 -0
- package/recipes/list-item.layered.css +6 -0
- package/recipes/menu-sheet.css +7 -1
- package/recipes/menu-sheet.layered.css +9 -1
- package/recipes/menu.css +1 -1
- package/recipes/menu.layered.css +1 -1
- package/recipes/page-banner.css +58 -4
- package/recipes/page-banner.layered.css +79 -8
- package/recipes/pagination-button.css +68 -0
- package/recipes/pagination-button.d.ts +19 -0
- package/recipes/pagination-button.layered.css +80 -0
- package/recipes/pagination-button.layered.mjs +22 -0
- package/recipes/pagination-button.mjs +22 -0
- package/recipes/pagination-page-item.css +99 -0
- package/recipes/pagination-page-item.d.ts +19 -0
- package/recipes/pagination-page-item.layered.css +118 -0
- package/recipes/pagination-page-item.layered.mjs +22 -0
- package/recipes/pagination-page-item.mjs +22 -0
- package/recipes/pull-to-refresh.css +1 -1
- package/recipes/pull-to-refresh.layered.css +1 -1
- package/recipes/quantity-picker.css +8 -2
- package/recipes/quantity-picker.layered.css +10 -2
- package/recipes/radiomark.css +6 -1
- package/recipes/radiomark.layered.css +10 -3
- package/recipes/reaction-button.css +4 -1
- package/recipes/reaction-button.layered.css +5 -1
- package/recipes/select-box.css +3 -3
- package/recipes/select-box.layered.css +3 -3
- package/recipes/select.css +1 -1
- package/recipes/select.layered.css +1 -1
- package/recipes/side-panel.css +6 -1
- package/recipes/side-panel.layered.css +12 -5
- package/recipes/snackbar.css +7 -1
- package/recipes/snackbar.layered.css +9 -1
- package/recipes/switchmark.css +4 -1
- package/recipes/switchmark.layered.css +5 -1
- package/recipes/tabs.css +4 -1
- package/recipes/tabs.layered.css +5 -1
- package/recipes/toggle-button.css +4 -1
- package/recipes/toggle-button.layered.css +5 -1
- package/recipes/wheel-picker-public.css +121 -0
- package/recipes/wheel-picker-public.d.ts +24 -0
- package/recipes/wheel-picker-public.layered.css +140 -0
- package/recipes/wheel-picker-public.layered.mjs +63 -0
- package/recipes/wheel-picker-public.mjs +63 -0
- package/recipes/wheel-picker.css +1 -1
- package/recipes/wheel-picker.layered.css +1 -1
- package/scale-feedback/index.d.ts +3 -0
- package/scale-feedback/index.mjs +33 -0
- package/vars/color/stroke.d.ts +3 -3
- package/vars/component/accordion-item.d.ts +1 -1
- package/vars/component/accordion-item.mjs +1 -1
- package/vars/component/action-button.d.ts +1 -23
- package/vars/component/action-button.mjs +1 -23
- package/vars/component/bottom-sheet.d.ts +1 -1
- package/vars/component/bottom-sheet.mjs +1 -1
- package/vars/component/callout-close-button.d.ts +81 -0
- package/vars/component/callout-close-button.mjs +63 -0
- package/vars/component/callout.d.ts +1 -2
- package/vars/component/callout.mjs +1 -2
- package/vars/component/checkbox.d.ts +3 -0
- package/vars/component/help-bubble.d.ts +4 -1
- package/vars/component/help-bubble.mjs +3 -1
- package/vars/component/index.d.ts +6 -1
- package/vars/component/index.mjs +6 -1
- package/vars/component/list-item.d.ts +2 -6
- package/vars/component/list-item.mjs +2 -5
- package/vars/component/page-banner-close-button.d.ts +133 -0
- package/vars/component/page-banner-close-button.mjs +99 -0
- package/vars/component/page-banner.d.ts +0 -1
- package/vars/component/page-banner.mjs +0 -1
- package/vars/component/pagination-button.d.ts +33 -0
- package/vars/component/pagination-button.mjs +33 -0
- package/vars/component/pagination-page-item.d.ts +54 -0
- package/vars/component/pagination-page-item.mjs +54 -0
- package/vars/component/radio.d.ts +3 -0
- package/vars/component/select-box.d.ts +2 -2
- package/vars/component/select-box.mjs +2 -2
- package/vars/component/snackbar.d.ts +1 -1
- package/vars/component/snackbar.mjs +1 -1
- package/vars/component/switch.d.ts +3 -0
- package/vars/component/switchmark.d.ts +2 -0
- package/vars/component/wheel-picker.d.ts +72 -0
- package/vars/component/wheel-picker.mjs +72 -0
package/all.layered.css
CHANGED
|
@@ -24,6 +24,8 @@
|
|
|
24
24
|
--seed-font-size-limit-max: 1.5;
|
|
25
25
|
--seed-line-height-limit-min: .8;
|
|
26
26
|
--seed-line-height-limit-max: 1.5;
|
|
27
|
+
--seed-feedback-scale: 1;
|
|
28
|
+
--seed-feedback-scale-transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
27
29
|
}
|
|
28
30
|
|
|
29
31
|
[data-seed-platform="ios"] {
|
|
@@ -381,6 +383,19 @@
|
|
|
381
383
|
display: block;
|
|
382
384
|
}
|
|
383
385
|
|
|
386
|
+
.seed-scale-feedback {
|
|
387
|
+
--seed-dynamic-scale-basis: max(var(--seed-element-height), var(--seed-element-width) / 4, 24);
|
|
388
|
+
--seed-dynamic-scale: calc((var(--seed-dynamic-scale-basis) - 2) / var(--seed-dynamic-scale-basis));
|
|
389
|
+
--seed-feedback-scale: var(--seed-dynamic-scale, 1);
|
|
390
|
+
scale: 1;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
@media (prefers-reduced-motion: reduce) {
|
|
394
|
+
.seed-scale-feedback {
|
|
395
|
+
--seed-feedback-scale: 1;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
|
|
384
399
|
:root, [data-seed-color-mode="system"] {
|
|
385
400
|
--lightningcss-light: initial;
|
|
386
401
|
--lightningcss-dark: ;
|
|
@@ -1357,7 +1372,7 @@
|
|
|
1357
1372
|
}
|
|
1358
1373
|
|
|
1359
1374
|
.seed-accordion__item--variant_separated {
|
|
1360
|
-
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-
|
|
1375
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
1361
1376
|
border-radius: var(--seed-radius-r3);
|
|
1362
1377
|
overflow: hidden;
|
|
1363
1378
|
}
|
|
@@ -1577,9 +1592,12 @@
|
|
|
1577
1592
|
cursor: not-allowed;
|
|
1578
1593
|
}
|
|
1579
1594
|
|
|
1595
|
+
.seed-action-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1596
|
+
scale: var(--seed-feedback-scale);
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1580
1599
|
.seed-action-button {
|
|
1581
1600
|
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
1582
|
-
scale: 1;
|
|
1583
1601
|
}
|
|
1584
1602
|
|
|
1585
1603
|
.seed-action-button--variant_brandSolid {
|
|
@@ -1847,10 +1865,6 @@
|
|
|
1847
1865
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
1848
1866
|
}
|
|
1849
1867
|
|
|
1850
|
-
.seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1851
|
-
scale: var(--seed-scale-s95);
|
|
1852
|
-
}
|
|
1853
|
-
|
|
1854
1868
|
.seed-action-button--size_small {
|
|
1855
1869
|
height: var(--seed-dimension-x9);
|
|
1856
1870
|
border-radius: var(--seed-radius-r2);
|
|
@@ -1861,10 +1875,6 @@
|
|
|
1861
1875
|
--seed-icon-size: var(--seed-dimension-x4);
|
|
1862
1876
|
}
|
|
1863
1877
|
|
|
1864
|
-
.seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1865
|
-
scale: var(--seed-scale-s97);
|
|
1866
|
-
}
|
|
1867
|
-
|
|
1868
1878
|
.seed-action-button--size_medium {
|
|
1869
1879
|
height: var(--seed-dimension-x10);
|
|
1870
1880
|
border-radius: var(--seed-radius-r2);
|
|
@@ -1875,10 +1885,6 @@
|
|
|
1875
1885
|
--seed-icon-size: 18px;
|
|
1876
1886
|
}
|
|
1877
1887
|
|
|
1878
|
-
.seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1879
|
-
scale: var(--seed-scale-s97);
|
|
1880
|
-
}
|
|
1881
|
-
|
|
1882
1888
|
.seed-action-button--size_large {
|
|
1883
1889
|
height: var(--seed-dimension-x13);
|
|
1884
1890
|
border-radius: var(--seed-radius-r3);
|
|
@@ -1889,10 +1895,6 @@
|
|
|
1889
1895
|
--seed-icon-size: 22px;
|
|
1890
1896
|
}
|
|
1891
1897
|
|
|
1892
|
-
.seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1893
|
-
scale: var(--seed-scale-s98);
|
|
1894
|
-
}
|
|
1895
|
-
|
|
1896
1898
|
.seed-action-button--size_xsmall-layout_withText {
|
|
1897
1899
|
gap: var(--seed-dimension-x1);
|
|
1898
1900
|
--seed-box-padding-left: var(--seed-dimension-x3_5);
|
|
@@ -3105,6 +3107,7 @@
|
|
|
3105
3107
|
background: var(--seed-color-bg-layer-floating);
|
|
3106
3108
|
border-top-left-radius: var(--seed-radius-r6);
|
|
3107
3109
|
border-top-right-radius: var(--seed-radius-r6);
|
|
3110
|
+
max-width: 480px;
|
|
3108
3111
|
padding-bottom: var(--seed-safe-area-bottom);
|
|
3109
3112
|
touch-action: none;
|
|
3110
3113
|
will-change: transform;
|
|
@@ -3215,8 +3218,6 @@
|
|
|
3215
3218
|
border-radius: var(--seed-radius-full);
|
|
3216
3219
|
background: var(--seed-color-bg-neutral-weak);
|
|
3217
3220
|
cursor: pointer;
|
|
3218
|
-
--seed-icon-size: 14px;
|
|
3219
|
-
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3220
3221
|
border: none;
|
|
3221
3222
|
justify-content: center;
|
|
3222
3223
|
align-items: center;
|
|
@@ -3226,6 +3227,16 @@
|
|
|
3226
3227
|
position: absolute;
|
|
3227
3228
|
}
|
|
3228
3229
|
|
|
3230
|
+
.seed-bottom-sheet__closeButton:is(:active, [data-active]) {
|
|
3231
|
+
scale: var(--seed-feedback-scale);
|
|
3232
|
+
}
|
|
3233
|
+
|
|
3234
|
+
.seed-bottom-sheet__closeButton {
|
|
3235
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
3236
|
+
--seed-icon-size: 14px;
|
|
3237
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3238
|
+
}
|
|
3239
|
+
|
|
3229
3240
|
.seed-bottom-sheet__closeButton:after {
|
|
3230
3241
|
content: "";
|
|
3231
3242
|
border-radius: var(--seed-radius-r1);
|
|
@@ -3375,7 +3386,14 @@
|
|
|
3375
3386
|
|
|
3376
3387
|
.seed-callout__root:is(button, a) {
|
|
3377
3388
|
cursor: pointer;
|
|
3378
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3389
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3390
|
+
}
|
|
3391
|
+
|
|
3392
|
+
.seed-callout__root:is(button, a):is(:active, [data-active]) {
|
|
3393
|
+
scale: var(--seed-feedback-scale);
|
|
3394
|
+
}
|
|
3395
|
+
|
|
3396
|
+
.seed-callout__root:is(button, a) {
|
|
3379
3397
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3380
3398
|
outline-offset: var(--seed-dimension-x0_5);
|
|
3381
3399
|
}
|
|
@@ -3436,15 +3454,13 @@
|
|
|
3436
3454
|
}
|
|
3437
3455
|
|
|
3438
3456
|
.seed-callout__closeButton {
|
|
3457
|
+
background-color: var(--seed-color-bg-transparent);
|
|
3439
3458
|
cursor: pointer;
|
|
3440
3459
|
width: var(--seed-dimension-x10);
|
|
3441
3460
|
height: var(--seed-dimension-x10);
|
|
3442
3461
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
3443
|
-
border-radius: var(--seed-radius-
|
|
3444
|
-
|
|
3445
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3446
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3447
|
-
background-color: #0000;
|
|
3462
|
+
border-radius: var(--seed-radius-r2);
|
|
3463
|
+
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
3448
3464
|
border: none;
|
|
3449
3465
|
flex-grow: 0;
|
|
3450
3466
|
flex-shrink: 0;
|
|
@@ -3454,11 +3470,33 @@
|
|
|
3454
3470
|
display: flex;
|
|
3455
3471
|
}
|
|
3456
3472
|
|
|
3473
|
+
.seed-callout__closeButton:is(:active, [data-active]) {
|
|
3474
|
+
scale: var(--seed-feedback-scale);
|
|
3475
|
+
}
|
|
3476
|
+
|
|
3477
|
+
.seed-callout__closeButton {
|
|
3478
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3479
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3480
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3481
|
+
}
|
|
3482
|
+
|
|
3457
3483
|
.seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
3458
3484
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3459
3485
|
outline-offset: var(--seed-dimension-x0_5);
|
|
3460
3486
|
}
|
|
3461
3487
|
|
|
3488
|
+
@media (hover: hover) and (pointer: fine) {
|
|
3489
|
+
.seed-callout__closeButton:is(:hover, [data-hover]) {
|
|
3490
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3491
|
+
}
|
|
3492
|
+
}
|
|
3493
|
+
|
|
3494
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
3495
|
+
.seed-callout__closeButton:is(:active, [data-active]) {
|
|
3496
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3497
|
+
}
|
|
3498
|
+
}
|
|
3499
|
+
|
|
3462
3500
|
.seed-callout__root--tone_neutral {
|
|
3463
3501
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
3464
3502
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -3481,6 +3519,10 @@
|
|
|
3481
3519
|
color: var(--seed-color-fg-neutral);
|
|
3482
3520
|
}
|
|
3483
3521
|
|
|
3522
|
+
.seed-callout__closeButton--tone_neutral {
|
|
3523
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3524
|
+
}
|
|
3525
|
+
|
|
3484
3526
|
.seed-callout__root--tone_informative {
|
|
3485
3527
|
background-color: var(--seed-color-bg-informative-weak);
|
|
3486
3528
|
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
@@ -3503,6 +3545,10 @@
|
|
|
3503
3545
|
color: var(--seed-color-fg-informative-contrast);
|
|
3504
3546
|
}
|
|
3505
3547
|
|
|
3548
|
+
.seed-callout__closeButton--tone_informative {
|
|
3549
|
+
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
3550
|
+
}
|
|
3551
|
+
|
|
3506
3552
|
.seed-callout__root--tone_positive {
|
|
3507
3553
|
background-color: var(--seed-color-bg-positive-weak);
|
|
3508
3554
|
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
@@ -3525,6 +3571,10 @@
|
|
|
3525
3571
|
color: var(--seed-color-fg-positive-contrast);
|
|
3526
3572
|
}
|
|
3527
3573
|
|
|
3574
|
+
.seed-callout__closeButton--tone_positive {
|
|
3575
|
+
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
3576
|
+
}
|
|
3577
|
+
|
|
3528
3578
|
.seed-callout__root--tone_warning {
|
|
3529
3579
|
background-color: var(--seed-color-bg-warning-weak);
|
|
3530
3580
|
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
@@ -3547,6 +3597,10 @@
|
|
|
3547
3597
|
color: var(--seed-color-fg-warning-contrast);
|
|
3548
3598
|
}
|
|
3549
3599
|
|
|
3600
|
+
.seed-callout__closeButton--tone_warning {
|
|
3601
|
+
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
3602
|
+
}
|
|
3603
|
+
|
|
3550
3604
|
.seed-callout__root--tone_critical {
|
|
3551
3605
|
background-color: var(--seed-color-bg-critical-weak);
|
|
3552
3606
|
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
@@ -3569,6 +3623,10 @@
|
|
|
3569
3623
|
color: var(--seed-color-fg-critical-contrast);
|
|
3570
3624
|
}
|
|
3571
3625
|
|
|
3626
|
+
.seed-callout__closeButton--tone_critical {
|
|
3627
|
+
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
3628
|
+
}
|
|
3629
|
+
|
|
3572
3630
|
.seed-callout__root--tone_magic {
|
|
3573
3631
|
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
|
|
3574
3632
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -3591,6 +3649,10 @@
|
|
|
3591
3649
|
color: var(--seed-color-fg-neutral);
|
|
3592
3650
|
}
|
|
3593
3651
|
|
|
3652
|
+
.seed-callout__closeButton--tone_magic {
|
|
3653
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3654
|
+
}
|
|
3655
|
+
|
|
3594
3656
|
.seed-checkbox__root {
|
|
3595
3657
|
vertical-align: top;
|
|
3596
3658
|
isolation: isolate;
|
|
@@ -3653,13 +3715,20 @@
|
|
|
3653
3715
|
.seed-checkmark__root {
|
|
3654
3716
|
box-sizing: border-box;
|
|
3655
3717
|
margin-top: var(--checkmark-margin-top, 0);
|
|
3656
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3657
|
-
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
3658
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3659
3718
|
flex: none;
|
|
3660
3719
|
position: relative;
|
|
3661
3720
|
}
|
|
3662
3721
|
|
|
3722
|
+
.seed-checkmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3723
|
+
scale: var(--seed-checkmark-feedback-scale, var(--seed-feedback-scale));
|
|
3724
|
+
}
|
|
3725
|
+
|
|
3726
|
+
.seed-checkmark__root {
|
|
3727
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3728
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
3729
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3730
|
+
}
|
|
3731
|
+
|
|
3663
3732
|
.seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
|
|
3664
3733
|
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
3665
3734
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -3845,21 +3914,26 @@
|
|
|
3845
3914
|
-webkit-font-smoothing: antialiased;
|
|
3846
3915
|
-moz-osx-font-smoothing: grayscale;
|
|
3847
3916
|
border-radius: var(--seed-radius-full);
|
|
3848
|
-
transition-duration: var(--seed-duration-color-transition);
|
|
3849
|
-
transition-timing-function: var(--seed-timing-function-easing);
|
|
3850
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3851
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3852
3917
|
border: none;
|
|
3853
3918
|
flex-shrink: 0;
|
|
3854
3919
|
justify-content: center;
|
|
3855
3920
|
align-items: center;
|
|
3856
3921
|
font-family: inherit;
|
|
3857
3922
|
line-height: 1;
|
|
3858
|
-
transition-property: background-color, color, border-color, box-shadow, outline-color;
|
|
3859
3923
|
display: inline-flex;
|
|
3860
3924
|
position: relative;
|
|
3861
3925
|
}
|
|
3862
3926
|
|
|
3927
|
+
.seed-chip__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3928
|
+
scale: var(--seed-feedback-scale);
|
|
3929
|
+
}
|
|
3930
|
+
|
|
3931
|
+
.seed-chip__root {
|
|
3932
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
3933
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3934
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3935
|
+
}
|
|
3936
|
+
|
|
3863
3937
|
.seed-chip__root:is(:focus-visible, [data-focus-visible]) {
|
|
3864
3938
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3865
3939
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -4167,9 +4241,6 @@
|
|
|
4167
4241
|
border-radius: var(--seed-radius-full);
|
|
4168
4242
|
font-family: inherit;
|
|
4169
4243
|
font-weight: var(--seed-font-weight-medium);
|
|
4170
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4171
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4172
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
4173
4244
|
border: none;
|
|
4174
4245
|
flex-shrink: 0;
|
|
4175
4246
|
justify-content: center;
|
|
@@ -4177,6 +4248,16 @@
|
|
|
4177
4248
|
display: flex;
|
|
4178
4249
|
}
|
|
4179
4250
|
|
|
4251
|
+
.seed-chip-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
4252
|
+
scale: var(--seed-feedback-scale);
|
|
4253
|
+
}
|
|
4254
|
+
|
|
4255
|
+
.seed-chip-tabs__trigger {
|
|
4256
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4257
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4258
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4259
|
+
}
|
|
4260
|
+
|
|
4180
4261
|
.seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
|
|
4181
4262
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4182
4263
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -4513,7 +4594,7 @@
|
|
|
4513
4594
|
background: var(--seed-color-bg-transparent);
|
|
4514
4595
|
border-radius: var(--seed-radius-r3);
|
|
4515
4596
|
cursor: pointer;
|
|
4516
|
-
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4597
|
+
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4517
4598
|
--seed-icon-size: 22px;
|
|
4518
4599
|
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
4519
4600
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
@@ -4532,6 +4613,10 @@
|
|
|
4532
4613
|
outline-offset: var(--seed-dimension-x0_5);
|
|
4533
4614
|
}
|
|
4534
4615
|
|
|
4616
|
+
.seed-content-dialog__closeButton:is(:active, [data-active]) {
|
|
4617
|
+
scale: var(--seed-feedback-scale);
|
|
4618
|
+
}
|
|
4619
|
+
|
|
4535
4620
|
@media (hover: hover) and (pointer: fine) {
|
|
4536
4621
|
.seed-content-dialog__closeButton:is(:hover, [data-hover]) {
|
|
4537
4622
|
background: var(--seed-color-bg-transparent-pressed);
|
|
@@ -4624,7 +4709,14 @@
|
|
|
4624
4709
|
--seed-icon-size: 22px;
|
|
4625
4710
|
--size: 16px;
|
|
4626
4711
|
--thickness: 2px;
|
|
4627
|
-
|
|
4712
|
+
}
|
|
4713
|
+
|
|
4714
|
+
.seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
4715
|
+
scale: var(--seed-feedback-scale);
|
|
4716
|
+
}
|
|
4717
|
+
|
|
4718
|
+
.seed-contextual-floating-button {
|
|
4719
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4628
4720
|
}
|
|
4629
4721
|
|
|
4630
4722
|
.seed-contextual-floating-button--variant_solid {
|
|
@@ -5843,11 +5935,12 @@
|
|
|
5843
5935
|
align-items: center;
|
|
5844
5936
|
gap: var(--seed-dimension-x2_5);
|
|
5845
5937
|
border-radius: var(--seed-radius-r3);
|
|
5938
|
+
height: 80px;
|
|
5939
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
5846
5940
|
--remove-button-mask-size: var(--seed-dimension-x6);
|
|
5847
5941
|
--remove-button-mask-offset: var(--seed-dimension-x1_5);
|
|
5848
5942
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5849
5943
|
outline-offset: var(--seed-dimension-x0_5);
|
|
5850
|
-
height: 80px;
|
|
5851
5944
|
display: flex;
|
|
5852
5945
|
position: relative;
|
|
5853
5946
|
}
|
|
@@ -5885,6 +5978,7 @@
|
|
|
5885
5978
|
}
|
|
5886
5979
|
|
|
5887
5980
|
.seed-attachment-input-item__root[aria-grabbed="true"] {
|
|
5981
|
+
scale: var(--seed-feedback-scale);
|
|
5888
5982
|
--remove-button-mask-size: 0px;
|
|
5889
5983
|
--remove-button-mask-offset: 0px;
|
|
5890
5984
|
}
|
|
@@ -5979,9 +6073,6 @@
|
|
|
5979
6073
|
font: inherit;
|
|
5980
6074
|
cursor: pointer;
|
|
5981
6075
|
border-radius: inherit;
|
|
5982
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5983
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5984
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5985
6076
|
background: none;
|
|
5986
6077
|
border: none;
|
|
5987
6078
|
flex-direction: column;
|
|
@@ -5991,6 +6082,16 @@
|
|
|
5991
6082
|
display: flex;
|
|
5992
6083
|
}
|
|
5993
6084
|
|
|
6085
|
+
.seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6086
|
+
scale: var(--seed-feedback-scale);
|
|
6087
|
+
}
|
|
6088
|
+
|
|
6089
|
+
.seed-attachment-input-item__actionButton {
|
|
6090
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6091
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6092
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6093
|
+
}
|
|
6094
|
+
|
|
5994
6095
|
.seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
|
|
5995
6096
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5996
6097
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6012,9 +6113,6 @@
|
|
|
6012
6113
|
background-color: var(--seed-color-bg-layer-default);
|
|
6013
6114
|
border-radius: var(--seed-radius-full);
|
|
6014
6115
|
cursor: pointer;
|
|
6015
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6016
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6017
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6018
6116
|
border: none;
|
|
6019
6117
|
justify-content: center;
|
|
6020
6118
|
align-items: center;
|
|
@@ -6023,6 +6121,16 @@
|
|
|
6023
6121
|
position: absolute;
|
|
6024
6122
|
}
|
|
6025
6123
|
|
|
6124
|
+
.seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6125
|
+
scale: var(--seed-feedback-scale);
|
|
6126
|
+
}
|
|
6127
|
+
|
|
6128
|
+
.seed-attachment-input-item__removeButton {
|
|
6129
|
+
transition: background-color .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6130
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6131
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6132
|
+
}
|
|
6133
|
+
|
|
6026
6134
|
.seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6027
6135
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6028
6136
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6087,7 +6195,7 @@
|
|
|
6087
6195
|
|
|
6088
6196
|
.seed-attachment-input-item__root--type_image {
|
|
6089
6197
|
width: 80px;
|
|
6090
|
-
transition: opacity .2s;
|
|
6198
|
+
transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
6091
6199
|
}
|
|
6092
6200
|
|
|
6093
6201
|
.seed-attachment-input-item__root--type_image:before {
|
|
@@ -6145,9 +6253,6 @@
|
|
|
6145
6253
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
6146
6254
|
cursor: pointer;
|
|
6147
6255
|
border-radius: var(--seed-radius-r3);
|
|
6148
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6149
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6150
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6151
6256
|
background-color: #0000;
|
|
6152
6257
|
border: none;
|
|
6153
6258
|
flex-direction: column;
|
|
@@ -6156,6 +6261,16 @@
|
|
|
6156
6261
|
display: flex;
|
|
6157
6262
|
}
|
|
6158
6263
|
|
|
6264
|
+
.seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6265
|
+
scale: var(--seed-feedback-scale);
|
|
6266
|
+
}
|
|
6267
|
+
|
|
6268
|
+
.seed-attachment-input-trigger__root {
|
|
6269
|
+
transition: background-color .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6270
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6271
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6272
|
+
}
|
|
6273
|
+
|
|
6159
6274
|
.seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
|
|
6160
6275
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6161
6276
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6252,11 +6367,18 @@
|
|
|
6252
6367
|
font-size: var(--seed-font-size-t5);
|
|
6253
6368
|
line-height: var(--seed-line-height-t5);
|
|
6254
6369
|
font-weight: var(--seed-font-weight-bold);
|
|
6255
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6256
6370
|
position: relative;
|
|
6257
6371
|
overflow: hidden;
|
|
6258
6372
|
}
|
|
6259
6373
|
|
|
6374
|
+
.seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6375
|
+
scale: var(--seed-feedback-scale);
|
|
6376
|
+
}
|
|
6377
|
+
|
|
6378
|
+
.seed-floating-action-button__root {
|
|
6379
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6380
|
+
}
|
|
6381
|
+
|
|
6260
6382
|
@media (hover: hover) and (pointer: fine) {
|
|
6261
6383
|
.seed-floating-action-button__root:is(:hover, [data-hover]) {
|
|
6262
6384
|
background: var(--seed-color-bg-brand-solid-pressed);
|
|
@@ -6376,11 +6498,12 @@
|
|
|
6376
6498
|
}
|
|
6377
6499
|
|
|
6378
6500
|
.seed-help-bubble__content {
|
|
6501
|
+
box-sizing: border-box;
|
|
6379
6502
|
background: var(--seed-color-bg-neutral-inverted);
|
|
6380
6503
|
padding-inline: var(--seed-dimension-x3);
|
|
6381
6504
|
padding-block: var(--seed-dimension-x2_5);
|
|
6382
6505
|
border-radius: var(--seed-radius-r3);
|
|
6383
|
-
--seed-box-max-width-base:
|
|
6506
|
+
--seed-box-max-width-base: 280px;
|
|
6384
6507
|
--seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
|
|
6385
6508
|
--seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
|
|
6386
6509
|
--seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
|
|
@@ -6467,9 +6590,6 @@
|
|
|
6467
6590
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
6468
6591
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
6469
6592
|
border-radius: var(--seed-radius-r3);
|
|
6470
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6471
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6472
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6473
6593
|
background: none;
|
|
6474
6594
|
border: none;
|
|
6475
6595
|
justify-content: center;
|
|
@@ -6477,6 +6597,16 @@
|
|
|
6477
6597
|
display: flex;
|
|
6478
6598
|
}
|
|
6479
6599
|
|
|
6600
|
+
.seed-help-bubble__closeButton:is(:active, [data-active]) {
|
|
6601
|
+
scale: var(--seed-feedback-scale);
|
|
6602
|
+
}
|
|
6603
|
+
|
|
6604
|
+
.seed-help-bubble__closeButton {
|
|
6605
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6606
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6607
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6608
|
+
}
|
|
6609
|
+
|
|
6480
6610
|
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6481
6611
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6482
6612
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6583,6 +6713,14 @@
|
|
|
6583
6713
|
position: relative;
|
|
6584
6714
|
}
|
|
6585
6715
|
|
|
6716
|
+
.seed-image-frame-reaction-button__root:is(:active, [data-active]) {
|
|
6717
|
+
scale: var(--seed-feedback-scale);
|
|
6718
|
+
}
|
|
6719
|
+
|
|
6720
|
+
.seed-image-frame-reaction-button__root {
|
|
6721
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
6722
|
+
}
|
|
6723
|
+
|
|
6586
6724
|
.seed-image-frame-reaction-button__root:before {
|
|
6587
6725
|
content: "";
|
|
6588
6726
|
inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
@@ -6929,14 +7067,21 @@
|
|
|
6929
7067
|
.seed-input-button__clearButton {
|
|
6930
7068
|
cursor: pointer;
|
|
6931
7069
|
border-radius: var(--seed-radius-full);
|
|
6932
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6933
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6934
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
6935
7070
|
background-color: #0000;
|
|
6936
7071
|
border: none;
|
|
6937
7072
|
padding: 0;
|
|
6938
7073
|
}
|
|
6939
7074
|
|
|
7075
|
+
.seed-input-button__clearButton:is(:active, [data-active]) {
|
|
7076
|
+
scale: var(--seed-feedback-scale);
|
|
7077
|
+
}
|
|
7078
|
+
|
|
7079
|
+
.seed-input-button__clearButton {
|
|
7080
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7081
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7082
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7083
|
+
}
|
|
7084
|
+
|
|
6940
7085
|
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
|
|
6941
7086
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6942
7087
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -7238,6 +7383,9 @@
|
|
|
7238
7383
|
--seed-box-padding-right: var(--seed-box-padding-right-base, initial);
|
|
7239
7384
|
padding-right: var(--seed-box-padding-right);
|
|
7240
7385
|
--seed-focus-ring: none;
|
|
7386
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7387
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7388
|
+
--seed-switchmark-feedback-scale: 1;
|
|
7241
7389
|
--seed-icon-size: 22px;
|
|
7242
7390
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
7243
7391
|
flex-shrink: 0;
|
|
@@ -7261,6 +7409,9 @@
|
|
|
7261
7409
|
align-items: center;
|
|
7262
7410
|
gap: var(--seed-box-gap);
|
|
7263
7411
|
--seed-focus-ring: none;
|
|
7412
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7413
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7414
|
+
--seed-switchmark-feedback-scale: 1;
|
|
7264
7415
|
font-size: var(--seed-font-size-t5);
|
|
7265
7416
|
line-height: var(--seed-line-height-t5);
|
|
7266
7417
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -7586,7 +7737,7 @@
|
|
|
7586
7737
|
}
|
|
7587
7738
|
|
|
7588
7739
|
.seed-menu__scrollArea {
|
|
7589
|
-
max-height: min(480px, var(--seed-menu-available-height, 480px));
|
|
7740
|
+
max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
|
|
7590
7741
|
box-sizing: border-box;
|
|
7591
7742
|
padding-block: var(--seed-dimension-x2);
|
|
7592
7743
|
gap: var(--seed-dimension-x2);
|
|
@@ -7877,6 +8028,7 @@
|
|
|
7877
8028
|
word-break: break-all;
|
|
7878
8029
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
7879
8030
|
background: var(--seed-color-bg-layer-floating);
|
|
8031
|
+
max-width: 480px;
|
|
7880
8032
|
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
7881
8033
|
padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
|
|
7882
8034
|
padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
|
|
@@ -7967,13 +8119,20 @@
|
|
|
7967
8119
|
font-size: var(--seed-font-size-t5);
|
|
7968
8120
|
line-height: var(--seed-line-height-t5);
|
|
7969
8121
|
font-weight: var(--seed-font-weight-medium);
|
|
7970
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7971
8122
|
border: none;
|
|
7972
8123
|
justify-content: center;
|
|
7973
8124
|
align-items: center;
|
|
7974
8125
|
display: flex;
|
|
7975
8126
|
}
|
|
7976
8127
|
|
|
8128
|
+
.seed-menu-sheet__closeButton:is(:active, [data-active]) {
|
|
8129
|
+
scale: var(--seed-feedback-scale);
|
|
8130
|
+
}
|
|
8131
|
+
|
|
8132
|
+
.seed-menu-sheet__closeButton {
|
|
8133
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8134
|
+
}
|
|
8135
|
+
|
|
7977
8136
|
@media (hover: hover) and (pointer: fine) {
|
|
7978
8137
|
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
|
|
7979
8138
|
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
@@ -8277,15 +8436,22 @@
|
|
|
8277
8436
|
line-height: var(--seed-line-height-t3);
|
|
8278
8437
|
font-weight: var(--seed-font-weight-bold);
|
|
8279
8438
|
border-radius: var(--seed-radius-r1);
|
|
8280
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8281
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8282
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8283
8439
|
background-color: #0000;
|
|
8284
8440
|
border: none;
|
|
8285
8441
|
align-items: center;
|
|
8286
8442
|
display: flex;
|
|
8287
8443
|
}
|
|
8288
8444
|
|
|
8445
|
+
.seed-page-banner__button:is(:active, [data-active]) {
|
|
8446
|
+
scale: var(--seed-feedback-scale);
|
|
8447
|
+
}
|
|
8448
|
+
|
|
8449
|
+
.seed-page-banner__button {
|
|
8450
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8451
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8452
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8453
|
+
}
|
|
8454
|
+
|
|
8289
8455
|
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
|
|
8290
8456
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8291
8457
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -8297,12 +8463,10 @@
|
|
|
8297
8463
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
8298
8464
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
8299
8465
|
--seed-suffix-icon-margin-left: initial;
|
|
8466
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8300
8467
|
cursor: pointer;
|
|
8301
|
-
border-radius: var(--seed-radius-
|
|
8302
|
-
|
|
8303
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8304
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8305
|
-
background-color: #0000;
|
|
8468
|
+
border-radius: var(--seed-radius-r2);
|
|
8469
|
+
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
8306
8470
|
border: none;
|
|
8307
8471
|
flex-grow: 0;
|
|
8308
8472
|
flex-shrink: 0;
|
|
@@ -8313,11 +8477,33 @@
|
|
|
8313
8477
|
display: flex;
|
|
8314
8478
|
}
|
|
8315
8479
|
|
|
8480
|
+
.seed-page-banner__closeButton:is(:active, [data-active]) {
|
|
8481
|
+
scale: var(--seed-feedback-scale);
|
|
8482
|
+
}
|
|
8483
|
+
|
|
8484
|
+
.seed-page-banner__closeButton {
|
|
8485
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8486
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8487
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8488
|
+
}
|
|
8489
|
+
|
|
8316
8490
|
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
8317
8491
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8318
8492
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8319
8493
|
}
|
|
8320
8494
|
|
|
8495
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8496
|
+
.seed-page-banner__closeButton:is(:hover, [data-hover]) {
|
|
8497
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8498
|
+
}
|
|
8499
|
+
}
|
|
8500
|
+
|
|
8501
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8502
|
+
.seed-page-banner__closeButton:is(:active, [data-active]) {
|
|
8503
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8504
|
+
}
|
|
8505
|
+
}
|
|
8506
|
+
|
|
8321
8507
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
8322
8508
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
8323
8509
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8340,6 +8526,10 @@
|
|
|
8340
8526
|
color: var(--seed-color-fg-neutral);
|
|
8341
8527
|
}
|
|
8342
8528
|
|
|
8529
|
+
.seed-page-banner__closeButton--tone_neutral-variant_weak {
|
|
8530
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8531
|
+
}
|
|
8532
|
+
|
|
8343
8533
|
.seed-page-banner__root--tone_neutral-variant_solid {
|
|
8344
8534
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
8345
8535
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
@@ -8362,6 +8552,10 @@
|
|
|
8362
8552
|
color: var(--seed-color-fg-neutral-inverted);
|
|
8363
8553
|
}
|
|
8364
8554
|
|
|
8555
|
+
.seed-page-banner__closeButton--tone_neutral-variant_solid {
|
|
8556
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
8557
|
+
}
|
|
8558
|
+
|
|
8365
8559
|
.seed-page-banner__root--tone_informative-variant_weak {
|
|
8366
8560
|
background-color: var(--seed-color-bg-informative-weak);
|
|
8367
8561
|
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
@@ -8384,6 +8578,10 @@
|
|
|
8384
8578
|
color: var(--seed-color-fg-informative-contrast);
|
|
8385
8579
|
}
|
|
8386
8580
|
|
|
8581
|
+
.seed-page-banner__closeButton--tone_informative-variant_weak {
|
|
8582
|
+
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
8583
|
+
}
|
|
8584
|
+
|
|
8387
8585
|
.seed-page-banner__root--tone_informative-variant_solid {
|
|
8388
8586
|
background-color: var(--seed-color-bg-informative-solid);
|
|
8389
8587
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8406,6 +8604,10 @@
|
|
|
8406
8604
|
color: var(--seed-color-palette-static-white);
|
|
8407
8605
|
}
|
|
8408
8606
|
|
|
8607
|
+
.seed-page-banner__closeButton--tone_informative-variant_solid {
|
|
8608
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8609
|
+
}
|
|
8610
|
+
|
|
8409
8611
|
.seed-page-banner__root--tone_positive-variant_weak {
|
|
8410
8612
|
background-color: var(--seed-color-bg-positive-weak);
|
|
8411
8613
|
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
@@ -8428,6 +8630,10 @@
|
|
|
8428
8630
|
color: var(--seed-color-fg-positive-contrast);
|
|
8429
8631
|
}
|
|
8430
8632
|
|
|
8633
|
+
.seed-page-banner__closeButton--tone_positive-variant_weak {
|
|
8634
|
+
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
8635
|
+
}
|
|
8636
|
+
|
|
8431
8637
|
.seed-page-banner__root--tone_positive-variant_solid {
|
|
8432
8638
|
background-color: var(--seed-color-bg-positive-solid);
|
|
8433
8639
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8450,6 +8656,10 @@
|
|
|
8450
8656
|
color: var(--seed-color-palette-static-white);
|
|
8451
8657
|
}
|
|
8452
8658
|
|
|
8659
|
+
.seed-page-banner__closeButton--tone_positive-variant_solid {
|
|
8660
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8661
|
+
}
|
|
8662
|
+
|
|
8453
8663
|
.seed-page-banner__root--tone_warning-variant_weak {
|
|
8454
8664
|
background-color: var(--seed-color-bg-warning-weak);
|
|
8455
8665
|
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
@@ -8472,6 +8682,10 @@
|
|
|
8472
8682
|
color: var(--seed-color-fg-warning-contrast);
|
|
8473
8683
|
}
|
|
8474
8684
|
|
|
8685
|
+
.seed-page-banner__closeButton--tone_warning-variant_weak {
|
|
8686
|
+
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
8687
|
+
}
|
|
8688
|
+
|
|
8475
8689
|
.seed-page-banner__root--tone_warning-variant_solid {
|
|
8476
8690
|
background-color: var(--seed-color-bg-warning-solid);
|
|
8477
8691
|
--seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
@@ -8494,6 +8708,10 @@
|
|
|
8494
8708
|
color: var(--seed-color-palette-static-black-alpha-900);
|
|
8495
8709
|
}
|
|
8496
8710
|
|
|
8711
|
+
.seed-page-banner__closeButton--tone_warning-variant_solid {
|
|
8712
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
8713
|
+
}
|
|
8714
|
+
|
|
8497
8715
|
.seed-page-banner__root--tone_critical-variant_weak {
|
|
8498
8716
|
background-color: var(--seed-color-bg-critical-weak);
|
|
8499
8717
|
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
@@ -8516,6 +8734,10 @@
|
|
|
8516
8734
|
color: var(--seed-color-fg-critical-contrast);
|
|
8517
8735
|
}
|
|
8518
8736
|
|
|
8737
|
+
.seed-page-banner__closeButton--tone_critical-variant_weak {
|
|
8738
|
+
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
8739
|
+
}
|
|
8740
|
+
|
|
8519
8741
|
.seed-page-banner__root--tone_critical-variant_solid {
|
|
8520
8742
|
background-color: var(--seed-color-bg-critical-solid);
|
|
8521
8743
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8538,6 +8760,10 @@
|
|
|
8538
8760
|
color: var(--seed-color-palette-static-white);
|
|
8539
8761
|
}
|
|
8540
8762
|
|
|
8763
|
+
.seed-page-banner__closeButton--tone_critical-variant_solid {
|
|
8764
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8765
|
+
}
|
|
8766
|
+
|
|
8541
8767
|
.seed-page-banner__root--tone_magic-variant_weak {
|
|
8542
8768
|
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
|
|
8543
8769
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8560,6 +8786,206 @@
|
|
|
8560
8786
|
color: var(--seed-color-fg-neutral);
|
|
8561
8787
|
}
|
|
8562
8788
|
|
|
8789
|
+
.seed-page-banner__closeButton--tone_magic-variant_weak {
|
|
8790
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8791
|
+
}
|
|
8792
|
+
|
|
8793
|
+
.seed-pagination-button {
|
|
8794
|
+
box-sizing: border-box;
|
|
8795
|
+
cursor: pointer;
|
|
8796
|
+
text-transform: none;
|
|
8797
|
+
white-space: nowrap;
|
|
8798
|
+
vertical-align: middle;
|
|
8799
|
+
-webkit-font-smoothing: antialiased;
|
|
8800
|
+
-moz-osx-font-smoothing: grayscale;
|
|
8801
|
+
width: var(--seed-dimension-x10);
|
|
8802
|
+
height: var(--seed-dimension-x10);
|
|
8803
|
+
border-radius: var(--seed-radius-r2);
|
|
8804
|
+
isolation: isolate;
|
|
8805
|
+
background: none;
|
|
8806
|
+
border: none;
|
|
8807
|
+
flex-shrink: 0;
|
|
8808
|
+
justify-content: center;
|
|
8809
|
+
align-items: center;
|
|
8810
|
+
padding: 0;
|
|
8811
|
+
font-family: inherit;
|
|
8812
|
+
text-decoration: none;
|
|
8813
|
+
display: inline-flex;
|
|
8814
|
+
position: relative;
|
|
8815
|
+
}
|
|
8816
|
+
|
|
8817
|
+
.seed-pagination-button:before {
|
|
8818
|
+
content: "";
|
|
8819
|
+
z-index: -1;
|
|
8820
|
+
border-radius: inherit;
|
|
8821
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8822
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
8823
|
+
position: absolute;
|
|
8824
|
+
inset: 0;
|
|
8825
|
+
}
|
|
8826
|
+
|
|
8827
|
+
.seed-pagination-button {
|
|
8828
|
+
--seed-icon-size: var(--seed-dimension-x4);
|
|
8829
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
8830
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8831
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8832
|
+
}
|
|
8833
|
+
|
|
8834
|
+
.seed-pagination-button:is(:focus-visible, [data-focus-visible]) {
|
|
8835
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8836
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8837
|
+
}
|
|
8838
|
+
|
|
8839
|
+
.seed-pagination-button {
|
|
8840
|
+
scale: 1;
|
|
8841
|
+
}
|
|
8842
|
+
|
|
8843
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8844
|
+
.seed-pagination-button:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8845
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8846
|
+
}
|
|
8847
|
+
}
|
|
8848
|
+
|
|
8849
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8850
|
+
.seed-pagination-button:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8851
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8852
|
+
}
|
|
8853
|
+
}
|
|
8854
|
+
|
|
8855
|
+
.seed-pagination-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8856
|
+
scale: var(--seed-scale-s97);
|
|
8857
|
+
}
|
|
8858
|
+
|
|
8859
|
+
.seed-pagination-button:is(:disabled, [disabled], [data-disabled]) {
|
|
8860
|
+
cursor: not-allowed;
|
|
8861
|
+
--seed-icon-color: var(--seed-color-fg-disabled);
|
|
8862
|
+
}
|
|
8863
|
+
|
|
8864
|
+
.seed-pagination-button:is(:disabled, [disabled], [data-disabled]):before {
|
|
8865
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8866
|
+
}
|
|
8867
|
+
|
|
8868
|
+
.seed-pagination-button {
|
|
8869
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8870
|
+
}
|
|
8871
|
+
|
|
8872
|
+
.seed-pagination-page-item {
|
|
8873
|
+
box-sizing: border-box;
|
|
8874
|
+
cursor: pointer;
|
|
8875
|
+
text-transform: none;
|
|
8876
|
+
white-space: nowrap;
|
|
8877
|
+
vertical-align: middle;
|
|
8878
|
+
-webkit-font-smoothing: antialiased;
|
|
8879
|
+
-moz-osx-font-smoothing: grayscale;
|
|
8880
|
+
width: var(--seed-dimension-x10);
|
|
8881
|
+
height: var(--seed-dimension-x10);
|
|
8882
|
+
border-radius: var(--seed-radius-r2);
|
|
8883
|
+
isolation: isolate;
|
|
8884
|
+
color: var(--seed-color-fg-neutral);
|
|
8885
|
+
font-family: inherit;
|
|
8886
|
+
font-size: var(--seed-font-size-t4);
|
|
8887
|
+
line-height: var(--seed-line-height-t4);
|
|
8888
|
+
font-weight: var(--seed-font-weight-bold);
|
|
8889
|
+
background: none;
|
|
8890
|
+
border: none;
|
|
8891
|
+
flex-shrink: 0;
|
|
8892
|
+
justify-content: center;
|
|
8893
|
+
align-items: center;
|
|
8894
|
+
padding: 0;
|
|
8895
|
+
text-decoration: none;
|
|
8896
|
+
display: inline-flex;
|
|
8897
|
+
position: relative;
|
|
8898
|
+
}
|
|
8899
|
+
|
|
8900
|
+
.seed-pagination-page-item:before {
|
|
8901
|
+
content: "";
|
|
8902
|
+
z-index: -1;
|
|
8903
|
+
border-radius: inherit;
|
|
8904
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8905
|
+
position: absolute;
|
|
8906
|
+
inset: 0;
|
|
8907
|
+
}
|
|
8908
|
+
|
|
8909
|
+
.seed-pagination-page-item > [data-pagination-page-item-label] {
|
|
8910
|
+
text-overflow: ellipsis;
|
|
8911
|
+
white-space: nowrap;
|
|
8912
|
+
min-width: 0;
|
|
8913
|
+
max-width: 100%;
|
|
8914
|
+
display: block;
|
|
8915
|
+
overflow: hidden;
|
|
8916
|
+
}
|
|
8917
|
+
|
|
8918
|
+
.seed-pagination-page-item {
|
|
8919
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8920
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8921
|
+
}
|
|
8922
|
+
|
|
8923
|
+
.seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
|
|
8924
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8925
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8926
|
+
}
|
|
8927
|
+
|
|
8928
|
+
.seed-pagination-page-item {
|
|
8929
|
+
scale: 1;
|
|
8930
|
+
}
|
|
8931
|
+
|
|
8932
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8933
|
+
.seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8934
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8935
|
+
}
|
|
8936
|
+
}
|
|
8937
|
+
|
|
8938
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8939
|
+
.seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8940
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8941
|
+
}
|
|
8942
|
+
}
|
|
8943
|
+
|
|
8944
|
+
.seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8945
|
+
scale: var(--seed-scale-s97);
|
|
8946
|
+
}
|
|
8947
|
+
|
|
8948
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
|
|
8949
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
8950
|
+
}
|
|
8951
|
+
|
|
8952
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
|
|
8953
|
+
background-color: var(--seed-color-bg-neutral-inverted);
|
|
8954
|
+
}
|
|
8955
|
+
|
|
8956
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8957
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8958
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
8959
|
+
}
|
|
8960
|
+
}
|
|
8961
|
+
|
|
8962
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8963
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8964
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
8965
|
+
}
|
|
8966
|
+
}
|
|
8967
|
+
|
|
8968
|
+
.seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
|
|
8969
|
+
cursor: not-allowed;
|
|
8970
|
+
color: var(--seed-color-fg-disabled);
|
|
8971
|
+
}
|
|
8972
|
+
|
|
8973
|
+
.seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
|
|
8974
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8975
|
+
}
|
|
8976
|
+
|
|
8977
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
|
|
8978
|
+
color: var(--seed-color-fg-disabled);
|
|
8979
|
+
}
|
|
8980
|
+
|
|
8981
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
|
|
8982
|
+
background-color: var(--seed-color-bg-disabled);
|
|
8983
|
+
}
|
|
8984
|
+
|
|
8985
|
+
.seed-pagination-page-item {
|
|
8986
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8987
|
+
}
|
|
8988
|
+
|
|
8563
8989
|
.seed-progress-circle__root {
|
|
8564
8990
|
box-sizing: border-box;
|
|
8565
8991
|
display: inline-flex;
|
|
@@ -8612,7 +9038,7 @@
|
|
|
8612
9038
|
}
|
|
8613
9039
|
|
|
8614
9040
|
.seed-pull-to-refresh__root {
|
|
8615
|
-
--ptr-size:
|
|
9041
|
+
--ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
|
|
8616
9042
|
--ptr-transition-duration: var(--seed-duration-d6);
|
|
8617
9043
|
height: 100%;
|
|
8618
9044
|
}
|
|
@@ -8646,7 +9072,7 @@
|
|
|
8646
9072
|
box-sizing: border-box;
|
|
8647
9073
|
cursor: pointer;
|
|
8648
9074
|
background-color: var(--seed-color-bg-transparent);
|
|
8649
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9075
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8650
9076
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8651
9077
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8652
9078
|
border: none;
|
|
@@ -8662,6 +9088,10 @@
|
|
|
8662
9088
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8663
9089
|
}
|
|
8664
9090
|
|
|
9091
|
+
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9092
|
+
scale: var(--seed-feedback-scale);
|
|
9093
|
+
}
|
|
9094
|
+
|
|
8665
9095
|
@media (hover: hover) and (pointer: fine) {
|
|
8666
9096
|
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8667
9097
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8729,7 +9159,7 @@
|
|
|
8729
9159
|
box-sizing: border-box;
|
|
8730
9160
|
cursor: pointer;
|
|
8731
9161
|
background-color: var(--seed-color-bg-transparent);
|
|
8732
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9162
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8733
9163
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8734
9164
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8735
9165
|
border: none;
|
|
@@ -8745,6 +9175,10 @@
|
|
|
8745
9175
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8746
9176
|
}
|
|
8747
9177
|
|
|
9178
|
+
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9179
|
+
scale: var(--seed-feedback-scale);
|
|
9180
|
+
}
|
|
9181
|
+
|
|
8748
9182
|
@media (hover: hover) and (pointer: fine) {
|
|
8749
9183
|
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8750
9184
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8972,9 +9406,6 @@
|
|
|
8972
9406
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
8973
9407
|
border-radius: var(--seed-radius-full);
|
|
8974
9408
|
margin-top: var(--radiomark-margin-top, 0);
|
|
8975
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8976
|
-
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
8977
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
8978
9409
|
flex: none;
|
|
8979
9410
|
justify-content: center;
|
|
8980
9411
|
align-items: center;
|
|
@@ -8982,6 +9413,16 @@
|
|
|
8982
9413
|
position: relative;
|
|
8983
9414
|
}
|
|
8984
9415
|
|
|
9416
|
+
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9417
|
+
scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
|
|
9418
|
+
}
|
|
9419
|
+
|
|
9420
|
+
.seed-radiomark__root {
|
|
9421
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9422
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
9423
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
9424
|
+
}
|
|
9425
|
+
|
|
8985
9426
|
@media (hover: hover) and (pointer: fine) {
|
|
8986
9427
|
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8987
9428
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -9121,8 +9562,12 @@
|
|
|
9121
9562
|
outline-offset: var(--seed-dimension-x0_5);
|
|
9122
9563
|
}
|
|
9123
9564
|
|
|
9565
|
+
.seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9566
|
+
scale: var(--seed-feedback-scale);
|
|
9567
|
+
}
|
|
9568
|
+
|
|
9124
9569
|
.seed-reaction-button {
|
|
9125
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9570
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9126
9571
|
background: var(--seed-color-bg-transparent);
|
|
9127
9572
|
font-weight: var(--seed-font-weight-medium);
|
|
9128
9573
|
color: var(--seed-color-fg-neutral);
|
|
@@ -9393,7 +9838,7 @@
|
|
|
9393
9838
|
}
|
|
9394
9839
|
|
|
9395
9840
|
.seed-select__scrollArea {
|
|
9396
|
-
max-height: min(480px, var(--seed-select-available-height, 480px));
|
|
9841
|
+
max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
|
|
9397
9842
|
box-sizing: border-box;
|
|
9398
9843
|
padding-block: var(--seed-dimension-x2);
|
|
9399
9844
|
gap: var(--seed-dimension-x2);
|
|
@@ -9876,7 +10321,7 @@
|
|
|
9876
10321
|
cursor: pointer;
|
|
9877
10322
|
border-radius: var(--seed-radius-r3);
|
|
9878
10323
|
background-color: var(--seed-color-bg-transparent);
|
|
9879
|
-
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-
|
|
10324
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
9880
10325
|
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9881
10326
|
flex-direction: column;
|
|
9882
10327
|
display: flex;
|
|
@@ -9913,11 +10358,11 @@
|
|
|
9913
10358
|
|
|
9914
10359
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
|
|
9915
10360
|
cursor: not-allowed;
|
|
9916
|
-
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-
|
|
10361
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
9917
10362
|
}
|
|
9918
10363
|
|
|
9919
10364
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
|
|
9920
|
-
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-
|
|
10365
|
+
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
|
|
9921
10366
|
}
|
|
9922
10367
|
|
|
9923
10368
|
.seed-select-box__root {
|
|
@@ -10611,11 +11056,6 @@
|
|
|
10611
11056
|
top: calc(28px + var(--seed-safe-area-top));
|
|
10612
11057
|
border-radius: var(--seed-radius-r3);
|
|
10613
11058
|
cursor: pointer;
|
|
10614
|
-
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
10615
|
-
--seed-icon-size: 22px;
|
|
10616
|
-
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
10617
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
10618
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
10619
11059
|
border: none;
|
|
10620
11060
|
justify-content: center;
|
|
10621
11061
|
align-items: center;
|
|
@@ -10626,6 +11066,18 @@
|
|
|
10626
11066
|
right: 24px;
|
|
10627
11067
|
}
|
|
10628
11068
|
|
|
11069
|
+
.seed-side-panel__closeButton:is(:active, [data-active]) {
|
|
11070
|
+
scale: var(--seed-feedback-scale);
|
|
11071
|
+
}
|
|
11072
|
+
|
|
11073
|
+
.seed-side-panel__closeButton {
|
|
11074
|
+
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11075
|
+
--seed-icon-size: 22px;
|
|
11076
|
+
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
11077
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
11078
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
11079
|
+
}
|
|
11080
|
+
|
|
10629
11081
|
.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
10630
11082
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
10631
11083
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -11041,7 +11493,7 @@
|
|
|
11041
11493
|
background: var(--seed-color-bg-neutral-inverted);
|
|
11042
11494
|
border-radius: var(--seed-radius-r2);
|
|
11043
11495
|
width: 100%;
|
|
11044
|
-
max-width:
|
|
11496
|
+
max-width: 464px;
|
|
11045
11497
|
padding-inline: var(--seed-dimension-x2_5);
|
|
11046
11498
|
padding-block: var(--seed-dimension-x2_5);
|
|
11047
11499
|
min-height: 44px;
|
|
@@ -11122,6 +11574,14 @@
|
|
|
11122
11574
|
position: relative;
|
|
11123
11575
|
}
|
|
11124
11576
|
|
|
11577
|
+
.seed-snackbar__actionButton:is(:active, [data-active]) {
|
|
11578
|
+
scale: var(--seed-feedback-scale);
|
|
11579
|
+
}
|
|
11580
|
+
|
|
11581
|
+
.seed-snackbar__actionButton {
|
|
11582
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
11583
|
+
}
|
|
11584
|
+
|
|
11125
11585
|
.seed-snackbar__actionButton:after {
|
|
11126
11586
|
content: "";
|
|
11127
11587
|
top: 50%;
|
|
@@ -11238,11 +11698,15 @@
|
|
|
11238
11698
|
border-radius: var(--seed-radius-full);
|
|
11239
11699
|
background: var(--seed-color-palette-gray-600);
|
|
11240
11700
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
11241
|
-
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11701
|
+
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11242
11702
|
display: block;
|
|
11243
11703
|
position: relative;
|
|
11244
11704
|
}
|
|
11245
11705
|
|
|
11706
|
+
.seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
11707
|
+
scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
|
|
11708
|
+
}
|
|
11709
|
+
|
|
11246
11710
|
.seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
|
|
11247
11711
|
opacity: .38;
|
|
11248
11712
|
}
|
|
@@ -11428,8 +11892,12 @@
|
|
|
11428
11892
|
bottom: 0;
|
|
11429
11893
|
}
|
|
11430
11894
|
|
|
11895
|
+
.seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
11896
|
+
scale: var(--seed-feedback-scale);
|
|
11897
|
+
}
|
|
11898
|
+
|
|
11431
11899
|
.seed-tabs__trigger {
|
|
11432
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11900
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11433
11901
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
11434
11902
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
11435
11903
|
}
|
|
@@ -12921,8 +13389,12 @@
|
|
|
12921
13389
|
cursor: not-allowed;
|
|
12922
13390
|
}
|
|
12923
13391
|
|
|
13392
|
+
.seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
13393
|
+
scale: var(--seed-feedback-scale);
|
|
13394
|
+
}
|
|
13395
|
+
|
|
12924
13396
|
.seed-toggle-button {
|
|
12925
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
13397
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
12926
13398
|
font-weight: var(--seed-font-weight-bold);
|
|
12927
13399
|
}
|
|
12928
13400
|
|
|
@@ -13161,7 +13633,7 @@
|
|
|
13161
13633
|
|
|
13162
13634
|
.seed-wheel-picker__selectionIndicator {
|
|
13163
13635
|
z-index: 0;
|
|
13164
|
-
inset-inline:
|
|
13636
|
+
inset-inline: var(--seed-dimension-x4);
|
|
13165
13637
|
height: var(--seed-wheel-picker-item-size);
|
|
13166
13638
|
pointer-events: none;
|
|
13167
13639
|
position: absolute;
|
|
@@ -13169,6 +13641,145 @@
|
|
|
13169
13641
|
transform: translateY(-50%);
|
|
13170
13642
|
}
|
|
13171
13643
|
|
|
13644
|
+
.seed-wheel-picker-public__root {
|
|
13645
|
+
background-color: var(--seed-color-bg-layer-floating);
|
|
13646
|
+
--seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
|
|
13647
|
+
--seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
|
|
13648
|
+
--seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
|
|
13649
|
+
width: 100%;
|
|
13650
|
+
position: relative;
|
|
13651
|
+
overflow: hidden;
|
|
13652
|
+
}
|
|
13653
|
+
|
|
13654
|
+
.seed-wheel-picker-public__scrollFog {
|
|
13655
|
+
z-index: 1;
|
|
13656
|
+
height: 100%;
|
|
13657
|
+
position: relative;
|
|
13658
|
+
overflow: hidden;
|
|
13659
|
+
}
|
|
13660
|
+
|
|
13661
|
+
.seed-wheel-picker-public__columns {
|
|
13662
|
+
justify-content: center;
|
|
13663
|
+
width: 100%;
|
|
13664
|
+
height: 100%;
|
|
13665
|
+
display: flex;
|
|
13666
|
+
}
|
|
13667
|
+
|
|
13668
|
+
.seed-wheel-picker-public__column {
|
|
13669
|
+
box-sizing: border-box;
|
|
13670
|
+
overscroll-behavior-x: none;
|
|
13671
|
+
overscroll-behavior-y: contain;
|
|
13672
|
+
scroll-snap-type: y mandatory;
|
|
13673
|
+
scrollbar-width: none;
|
|
13674
|
+
-ms-overflow-style: none;
|
|
13675
|
+
touch-action: pan-y;
|
|
13676
|
+
cursor: grab;
|
|
13677
|
+
width: max-content;
|
|
13678
|
+
height: 100%;
|
|
13679
|
+
padding-block: var(--seed-wheel-picker-public-center-offset);
|
|
13680
|
+
outline: none;
|
|
13681
|
+
flex: none;
|
|
13682
|
+
overflow: hidden auto;
|
|
13683
|
+
}
|
|
13684
|
+
|
|
13685
|
+
.seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
|
|
13686
|
+
cursor: default;
|
|
13687
|
+
--seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
|
|
13688
|
+
--seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
|
|
13689
|
+
overflow-y: hidden;
|
|
13690
|
+
}
|
|
13691
|
+
|
|
13692
|
+
.seed-wheel-picker-public__column[data-wheel-picker-dragging] {
|
|
13693
|
+
cursor: grabbing;
|
|
13694
|
+
scroll-snap-type: none;
|
|
13695
|
+
}
|
|
13696
|
+
|
|
13697
|
+
.seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
|
|
13698
|
+
scroll-snap-type: none;
|
|
13699
|
+
}
|
|
13700
|
+
|
|
13701
|
+
.seed-wheel-picker-public__column::-webkit-scrollbar {
|
|
13702
|
+
display: none;
|
|
13703
|
+
}
|
|
13704
|
+
|
|
13705
|
+
.seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
|
|
13706
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
13707
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
13708
|
+
border-radius: var(--seed-radius-r2);
|
|
13709
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
13710
|
+
}
|
|
13711
|
+
|
|
13712
|
+
.seed-wheel-picker-public__column.seed-wheel-picker-public__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
|
|
13713
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
13714
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
13715
|
+
}
|
|
13716
|
+
|
|
13717
|
+
.seed-wheel-picker-public__item {
|
|
13718
|
+
height: var(--seed-wheel-picker-public-item-size);
|
|
13719
|
+
min-height: var(--seed-wheel-picker-public-item-size);
|
|
13720
|
+
color: var(--seed-wheel-picker-public-item-color);
|
|
13721
|
+
scroll-snap-align: center;
|
|
13722
|
+
-webkit-user-select: none;
|
|
13723
|
+
user-select: none;
|
|
13724
|
+
justify-content: center;
|
|
13725
|
+
align-items: center;
|
|
13726
|
+
display: flex;
|
|
13727
|
+
}
|
|
13728
|
+
|
|
13729
|
+
.seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
|
|
13730
|
+
color: #0000;
|
|
13731
|
+
background-image: linear-gradient(to bottom, var(--seed-wheel-picker-public-item-color) 0%, var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) 100%);
|
|
13732
|
+
-webkit-text-fill-color: transparent;
|
|
13733
|
+
-webkit-background-clip: text;
|
|
13734
|
+
background-clip: text;
|
|
13735
|
+
}
|
|
13736
|
+
|
|
13737
|
+
.seed-wheel-picker-public__itemLabel {
|
|
13738
|
+
box-sizing: border-box;
|
|
13739
|
+
height: 100%;
|
|
13740
|
+
padding-inline: var(--seed-dimension-x4);
|
|
13741
|
+
font-weight: var(--seed-font-weight-medium);
|
|
13742
|
+
white-space: nowrap;
|
|
13743
|
+
flex-shrink: 0;
|
|
13744
|
+
justify-content: center;
|
|
13745
|
+
align-items: center;
|
|
13746
|
+
display: flex;
|
|
13747
|
+
}
|
|
13748
|
+
|
|
13749
|
+
.seed-wheel-picker-public__selectionIndicator {
|
|
13750
|
+
z-index: 0;
|
|
13751
|
+
inset-inline: var(--seed-dimension-x4);
|
|
13752
|
+
height: var(--seed-wheel-picker-public-item-size);
|
|
13753
|
+
border-radius: var(--seed-radius-r2);
|
|
13754
|
+
background-color: var(--seed-color-bg-neutral-weak);
|
|
13755
|
+
pointer-events: none;
|
|
13756
|
+
position: absolute;
|
|
13757
|
+
top: 50%;
|
|
13758
|
+
transform: translateY(-50%);
|
|
13759
|
+
}
|
|
13760
|
+
|
|
13761
|
+
.seed-wheel-picker-public__root--size_small {
|
|
13762
|
+
height: var(--seed-wheel-picker-public-viewport-size, 180px);
|
|
13763
|
+
--seed-wheel-picker-public-item-size: 36px;
|
|
13764
|
+
--seed-wheel-picker-public-scroll-fog-max-height: 108px;
|
|
13765
|
+
}
|
|
13766
|
+
|
|
13767
|
+
.seed-wheel-picker-public__itemLabel--size_small {
|
|
13768
|
+
font-size: var(--seed-font-size-t7-static);
|
|
13769
|
+
line-height: var(--seed-line-height-t7-static);
|
|
13770
|
+
}
|
|
13771
|
+
|
|
13772
|
+
.seed-wheel-picker-public__root--size_medium {
|
|
13773
|
+
height: var(--seed-wheel-picker-public-viewport-size, 220px);
|
|
13774
|
+
--seed-wheel-picker-public-item-size: 44px;
|
|
13775
|
+
--seed-wheel-picker-public-scroll-fog-max-height: 132px;
|
|
13776
|
+
}
|
|
13777
|
+
|
|
13778
|
+
.seed-wheel-picker-public__itemLabel--size_medium {
|
|
13779
|
+
font-size: var(--seed-font-size-t10-static);
|
|
13780
|
+
line-height: var(--seed-line-height-t10-static);
|
|
13781
|
+
}
|
|
13782
|
+
|
|
13172
13783
|
@media (min-width: 480px) {
|
|
13173
13784
|
.seed-action-button {
|
|
13174
13785
|
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);
|