@seed-design/css 2.4.2 → 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 +713 -94
- package/all.layered.css +713 -94
- 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/date-picker.css +10 -4
- package/recipes/date-picker.layered.css +12 -4
- 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/date-picker.d.ts +5 -0
- package/vars/component/date-picker.mjs +5 -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 {
|
|
@@ -5063,29 +5155,37 @@
|
|
|
5063
5155
|
}
|
|
5064
5156
|
|
|
5065
5157
|
@media (hover: hover) and (pointer: fine) {
|
|
5066
|
-
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
|
|
5158
|
+
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
|
|
5067
5159
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5068
5160
|
}
|
|
5069
5161
|
}
|
|
5070
5162
|
|
|
5071
5163
|
@media not all and (hover: hover) and (pointer: fine) {
|
|
5072
|
-
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
|
|
5164
|
+
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
|
|
5073
5165
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5074
5166
|
}
|
|
5075
5167
|
}
|
|
5076
5168
|
|
|
5077
5169
|
@media (hover: hover) and (pointer: fine) {
|
|
5078
|
-
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
|
|
5170
|
+
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
|
|
5079
5171
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
5080
5172
|
}
|
|
5081
5173
|
}
|
|
5082
5174
|
|
|
5083
5175
|
@media not all and (hover: hover) and (pointer: fine) {
|
|
5084
|
-
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
|
|
5176
|
+
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
|
|
5085
5177
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
5086
5178
|
}
|
|
5087
5179
|
}
|
|
5088
5180
|
|
|
5181
|
+
.seed-date-picker__dateButton[data-range-start-readonly]:before {
|
|
5182
|
+
background-color: var(--seed-color-palette-gray-600);
|
|
5183
|
+
}
|
|
5184
|
+
|
|
5185
|
+
.seed-date-picker__dateButton[data-range-start-readonly] {
|
|
5186
|
+
cursor: default;
|
|
5187
|
+
}
|
|
5188
|
+
|
|
5089
5189
|
.seed-date-picker__dateButton[data-in-range] {
|
|
5090
5190
|
color: var(--seed-color-fg-neutral-muted);
|
|
5091
5191
|
}
|
|
@@ -5835,11 +5935,12 @@
|
|
|
5835
5935
|
align-items: center;
|
|
5836
5936
|
gap: var(--seed-dimension-x2_5);
|
|
5837
5937
|
border-radius: var(--seed-radius-r3);
|
|
5938
|
+
height: 80px;
|
|
5939
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
5838
5940
|
--remove-button-mask-size: var(--seed-dimension-x6);
|
|
5839
5941
|
--remove-button-mask-offset: var(--seed-dimension-x1_5);
|
|
5840
5942
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5841
5943
|
outline-offset: var(--seed-dimension-x0_5);
|
|
5842
|
-
height: 80px;
|
|
5843
5944
|
display: flex;
|
|
5844
5945
|
position: relative;
|
|
5845
5946
|
}
|
|
@@ -5877,6 +5978,7 @@
|
|
|
5877
5978
|
}
|
|
5878
5979
|
|
|
5879
5980
|
.seed-attachment-input-item__root[aria-grabbed="true"] {
|
|
5981
|
+
scale: var(--seed-feedback-scale);
|
|
5880
5982
|
--remove-button-mask-size: 0px;
|
|
5881
5983
|
--remove-button-mask-offset: 0px;
|
|
5882
5984
|
}
|
|
@@ -5971,9 +6073,6 @@
|
|
|
5971
6073
|
font: inherit;
|
|
5972
6074
|
cursor: pointer;
|
|
5973
6075
|
border-radius: inherit;
|
|
5974
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5975
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5976
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5977
6076
|
background: none;
|
|
5978
6077
|
border: none;
|
|
5979
6078
|
flex-direction: column;
|
|
@@ -5983,6 +6082,16 @@
|
|
|
5983
6082
|
display: flex;
|
|
5984
6083
|
}
|
|
5985
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
|
+
|
|
5986
6095
|
.seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
|
|
5987
6096
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5988
6097
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6004,9 +6113,6 @@
|
|
|
6004
6113
|
background-color: var(--seed-color-bg-layer-default);
|
|
6005
6114
|
border-radius: var(--seed-radius-full);
|
|
6006
6115
|
cursor: pointer;
|
|
6007
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6008
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6009
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6010
6116
|
border: none;
|
|
6011
6117
|
justify-content: center;
|
|
6012
6118
|
align-items: center;
|
|
@@ -6015,6 +6121,16 @@
|
|
|
6015
6121
|
position: absolute;
|
|
6016
6122
|
}
|
|
6017
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
|
+
|
|
6018
6134
|
.seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6019
6135
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6020
6136
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6079,7 +6195,7 @@
|
|
|
6079
6195
|
|
|
6080
6196
|
.seed-attachment-input-item__root--type_image {
|
|
6081
6197
|
width: 80px;
|
|
6082
|
-
transition: opacity .2s;
|
|
6198
|
+
transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
6083
6199
|
}
|
|
6084
6200
|
|
|
6085
6201
|
.seed-attachment-input-item__root--type_image:before {
|
|
@@ -6137,9 +6253,6 @@
|
|
|
6137
6253
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
6138
6254
|
cursor: pointer;
|
|
6139
6255
|
border-radius: var(--seed-radius-r3);
|
|
6140
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6141
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6142
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6143
6256
|
background-color: #0000;
|
|
6144
6257
|
border: none;
|
|
6145
6258
|
flex-direction: column;
|
|
@@ -6148,6 +6261,16 @@
|
|
|
6148
6261
|
display: flex;
|
|
6149
6262
|
}
|
|
6150
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
|
+
|
|
6151
6274
|
.seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
|
|
6152
6275
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6153
6276
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6244,11 +6367,18 @@
|
|
|
6244
6367
|
font-size: var(--seed-font-size-t5);
|
|
6245
6368
|
line-height: var(--seed-line-height-t5);
|
|
6246
6369
|
font-weight: var(--seed-font-weight-bold);
|
|
6247
|
-
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);
|
|
6248
6370
|
position: relative;
|
|
6249
6371
|
overflow: hidden;
|
|
6250
6372
|
}
|
|
6251
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
|
+
|
|
6252
6382
|
@media (hover: hover) and (pointer: fine) {
|
|
6253
6383
|
.seed-floating-action-button__root:is(:hover, [data-hover]) {
|
|
6254
6384
|
background: var(--seed-color-bg-brand-solid-pressed);
|
|
@@ -6368,11 +6498,12 @@
|
|
|
6368
6498
|
}
|
|
6369
6499
|
|
|
6370
6500
|
.seed-help-bubble__content {
|
|
6501
|
+
box-sizing: border-box;
|
|
6371
6502
|
background: var(--seed-color-bg-neutral-inverted);
|
|
6372
6503
|
padding-inline: var(--seed-dimension-x3);
|
|
6373
6504
|
padding-block: var(--seed-dimension-x2_5);
|
|
6374
6505
|
border-radius: var(--seed-radius-r3);
|
|
6375
|
-
--seed-box-max-width-base:
|
|
6506
|
+
--seed-box-max-width-base: 280px;
|
|
6376
6507
|
--seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
|
|
6377
6508
|
--seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
|
|
6378
6509
|
--seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
|
|
@@ -6459,9 +6590,6 @@
|
|
|
6459
6590
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
6460
6591
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
6461
6592
|
border-radius: var(--seed-radius-r3);
|
|
6462
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6463
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6464
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6465
6593
|
background: none;
|
|
6466
6594
|
border: none;
|
|
6467
6595
|
justify-content: center;
|
|
@@ -6469,6 +6597,16 @@
|
|
|
6469
6597
|
display: flex;
|
|
6470
6598
|
}
|
|
6471
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
|
+
|
|
6472
6610
|
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6473
6611
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6474
6612
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6575,6 +6713,14 @@
|
|
|
6575
6713
|
position: relative;
|
|
6576
6714
|
}
|
|
6577
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
|
+
|
|
6578
6724
|
.seed-image-frame-reaction-button__root:before {
|
|
6579
6725
|
content: "";
|
|
6580
6726
|
inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
@@ -6921,14 +7067,21 @@
|
|
|
6921
7067
|
.seed-input-button__clearButton {
|
|
6922
7068
|
cursor: pointer;
|
|
6923
7069
|
border-radius: var(--seed-radius-full);
|
|
6924
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6925
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6926
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
6927
7070
|
background-color: #0000;
|
|
6928
7071
|
border: none;
|
|
6929
7072
|
padding: 0;
|
|
6930
7073
|
}
|
|
6931
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
|
+
|
|
6932
7085
|
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
|
|
6933
7086
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6934
7087
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -7230,6 +7383,9 @@
|
|
|
7230
7383
|
--seed-box-padding-right: var(--seed-box-padding-right-base, initial);
|
|
7231
7384
|
padding-right: var(--seed-box-padding-right);
|
|
7232
7385
|
--seed-focus-ring: none;
|
|
7386
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7387
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7388
|
+
--seed-switchmark-feedback-scale: 1;
|
|
7233
7389
|
--seed-icon-size: 22px;
|
|
7234
7390
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
7235
7391
|
flex-shrink: 0;
|
|
@@ -7253,6 +7409,9 @@
|
|
|
7253
7409
|
align-items: center;
|
|
7254
7410
|
gap: var(--seed-box-gap);
|
|
7255
7411
|
--seed-focus-ring: none;
|
|
7412
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7413
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7414
|
+
--seed-switchmark-feedback-scale: 1;
|
|
7256
7415
|
font-size: var(--seed-font-size-t5);
|
|
7257
7416
|
line-height: var(--seed-line-height-t5);
|
|
7258
7417
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -7578,7 +7737,7 @@
|
|
|
7578
7737
|
}
|
|
7579
7738
|
|
|
7580
7739
|
.seed-menu__scrollArea {
|
|
7581
|
-
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)));
|
|
7582
7741
|
box-sizing: border-box;
|
|
7583
7742
|
padding-block: var(--seed-dimension-x2);
|
|
7584
7743
|
gap: var(--seed-dimension-x2);
|
|
@@ -7869,6 +8028,7 @@
|
|
|
7869
8028
|
word-break: break-all;
|
|
7870
8029
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
7871
8030
|
background: var(--seed-color-bg-layer-floating);
|
|
8031
|
+
max-width: 480px;
|
|
7872
8032
|
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
7873
8033
|
padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
|
|
7874
8034
|
padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
|
|
@@ -7959,13 +8119,20 @@
|
|
|
7959
8119
|
font-size: var(--seed-font-size-t5);
|
|
7960
8120
|
line-height: var(--seed-line-height-t5);
|
|
7961
8121
|
font-weight: var(--seed-font-weight-medium);
|
|
7962
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7963
8122
|
border: none;
|
|
7964
8123
|
justify-content: center;
|
|
7965
8124
|
align-items: center;
|
|
7966
8125
|
display: flex;
|
|
7967
8126
|
}
|
|
7968
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
|
+
|
|
7969
8136
|
@media (hover: hover) and (pointer: fine) {
|
|
7970
8137
|
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
|
|
7971
8138
|
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
@@ -8269,15 +8436,22 @@
|
|
|
8269
8436
|
line-height: var(--seed-line-height-t3);
|
|
8270
8437
|
font-weight: var(--seed-font-weight-bold);
|
|
8271
8438
|
border-radius: var(--seed-radius-r1);
|
|
8272
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8273
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8274
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8275
8439
|
background-color: #0000;
|
|
8276
8440
|
border: none;
|
|
8277
8441
|
align-items: center;
|
|
8278
8442
|
display: flex;
|
|
8279
8443
|
}
|
|
8280
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
|
+
|
|
8281
8455
|
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
|
|
8282
8456
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8283
8457
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -8289,12 +8463,10 @@
|
|
|
8289
8463
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
8290
8464
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
8291
8465
|
--seed-suffix-icon-margin-left: initial;
|
|
8466
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8292
8467
|
cursor: pointer;
|
|
8293
|
-
border-radius: var(--seed-radius-
|
|
8294
|
-
|
|
8295
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8296
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8297
|
-
background-color: #0000;
|
|
8468
|
+
border-radius: var(--seed-radius-r2);
|
|
8469
|
+
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
8298
8470
|
border: none;
|
|
8299
8471
|
flex-grow: 0;
|
|
8300
8472
|
flex-shrink: 0;
|
|
@@ -8305,11 +8477,33 @@
|
|
|
8305
8477
|
display: flex;
|
|
8306
8478
|
}
|
|
8307
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
|
+
|
|
8308
8490
|
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
8309
8491
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8310
8492
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8311
8493
|
}
|
|
8312
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
|
+
|
|
8313
8507
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
8314
8508
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
8315
8509
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8332,6 +8526,10 @@
|
|
|
8332
8526
|
color: var(--seed-color-fg-neutral);
|
|
8333
8527
|
}
|
|
8334
8528
|
|
|
8529
|
+
.seed-page-banner__closeButton--tone_neutral-variant_weak {
|
|
8530
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8531
|
+
}
|
|
8532
|
+
|
|
8335
8533
|
.seed-page-banner__root--tone_neutral-variant_solid {
|
|
8336
8534
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
8337
8535
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
@@ -8354,6 +8552,10 @@
|
|
|
8354
8552
|
color: var(--seed-color-fg-neutral-inverted);
|
|
8355
8553
|
}
|
|
8356
8554
|
|
|
8555
|
+
.seed-page-banner__closeButton--tone_neutral-variant_solid {
|
|
8556
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
8557
|
+
}
|
|
8558
|
+
|
|
8357
8559
|
.seed-page-banner__root--tone_informative-variant_weak {
|
|
8358
8560
|
background-color: var(--seed-color-bg-informative-weak);
|
|
8359
8561
|
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
@@ -8376,6 +8578,10 @@
|
|
|
8376
8578
|
color: var(--seed-color-fg-informative-contrast);
|
|
8377
8579
|
}
|
|
8378
8580
|
|
|
8581
|
+
.seed-page-banner__closeButton--tone_informative-variant_weak {
|
|
8582
|
+
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
8583
|
+
}
|
|
8584
|
+
|
|
8379
8585
|
.seed-page-banner__root--tone_informative-variant_solid {
|
|
8380
8586
|
background-color: var(--seed-color-bg-informative-solid);
|
|
8381
8587
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8398,6 +8604,10 @@
|
|
|
8398
8604
|
color: var(--seed-color-palette-static-white);
|
|
8399
8605
|
}
|
|
8400
8606
|
|
|
8607
|
+
.seed-page-banner__closeButton--tone_informative-variant_solid {
|
|
8608
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8609
|
+
}
|
|
8610
|
+
|
|
8401
8611
|
.seed-page-banner__root--tone_positive-variant_weak {
|
|
8402
8612
|
background-color: var(--seed-color-bg-positive-weak);
|
|
8403
8613
|
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
@@ -8420,6 +8630,10 @@
|
|
|
8420
8630
|
color: var(--seed-color-fg-positive-contrast);
|
|
8421
8631
|
}
|
|
8422
8632
|
|
|
8633
|
+
.seed-page-banner__closeButton--tone_positive-variant_weak {
|
|
8634
|
+
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
8635
|
+
}
|
|
8636
|
+
|
|
8423
8637
|
.seed-page-banner__root--tone_positive-variant_solid {
|
|
8424
8638
|
background-color: var(--seed-color-bg-positive-solid);
|
|
8425
8639
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8442,6 +8656,10 @@
|
|
|
8442
8656
|
color: var(--seed-color-palette-static-white);
|
|
8443
8657
|
}
|
|
8444
8658
|
|
|
8659
|
+
.seed-page-banner__closeButton--tone_positive-variant_solid {
|
|
8660
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8661
|
+
}
|
|
8662
|
+
|
|
8445
8663
|
.seed-page-banner__root--tone_warning-variant_weak {
|
|
8446
8664
|
background-color: var(--seed-color-bg-warning-weak);
|
|
8447
8665
|
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
@@ -8464,6 +8682,10 @@
|
|
|
8464
8682
|
color: var(--seed-color-fg-warning-contrast);
|
|
8465
8683
|
}
|
|
8466
8684
|
|
|
8685
|
+
.seed-page-banner__closeButton--tone_warning-variant_weak {
|
|
8686
|
+
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
8687
|
+
}
|
|
8688
|
+
|
|
8467
8689
|
.seed-page-banner__root--tone_warning-variant_solid {
|
|
8468
8690
|
background-color: var(--seed-color-bg-warning-solid);
|
|
8469
8691
|
--seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
@@ -8486,7 +8708,11 @@
|
|
|
8486
8708
|
color: var(--seed-color-palette-static-black-alpha-900);
|
|
8487
8709
|
}
|
|
8488
8710
|
|
|
8489
|
-
.seed-page-
|
|
8711
|
+
.seed-page-banner__closeButton--tone_warning-variant_solid {
|
|
8712
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
8713
|
+
}
|
|
8714
|
+
|
|
8715
|
+
.seed-page-banner__root--tone_critical-variant_weak {
|
|
8490
8716
|
background-color: var(--seed-color-bg-critical-weak);
|
|
8491
8717
|
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
8492
8718
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
@@ -8508,6 +8734,10 @@
|
|
|
8508
8734
|
color: var(--seed-color-fg-critical-contrast);
|
|
8509
8735
|
}
|
|
8510
8736
|
|
|
8737
|
+
.seed-page-banner__closeButton--tone_critical-variant_weak {
|
|
8738
|
+
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
8739
|
+
}
|
|
8740
|
+
|
|
8511
8741
|
.seed-page-banner__root--tone_critical-variant_solid {
|
|
8512
8742
|
background-color: var(--seed-color-bg-critical-solid);
|
|
8513
8743
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8530,6 +8760,10 @@
|
|
|
8530
8760
|
color: var(--seed-color-palette-static-white);
|
|
8531
8761
|
}
|
|
8532
8762
|
|
|
8763
|
+
.seed-page-banner__closeButton--tone_critical-variant_solid {
|
|
8764
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8765
|
+
}
|
|
8766
|
+
|
|
8533
8767
|
.seed-page-banner__root--tone_magic-variant_weak {
|
|
8534
8768
|
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
|
|
8535
8769
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8552,6 +8786,206 @@
|
|
|
8552
8786
|
color: var(--seed-color-fg-neutral);
|
|
8553
8787
|
}
|
|
8554
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
|
+
|
|
8555
8989
|
.seed-progress-circle__root {
|
|
8556
8990
|
box-sizing: border-box;
|
|
8557
8991
|
display: inline-flex;
|
|
@@ -8604,7 +9038,7 @@
|
|
|
8604
9038
|
}
|
|
8605
9039
|
|
|
8606
9040
|
.seed-pull-to-refresh__root {
|
|
8607
|
-
--ptr-size:
|
|
9041
|
+
--ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
|
|
8608
9042
|
--ptr-transition-duration: var(--seed-duration-d6);
|
|
8609
9043
|
height: 100%;
|
|
8610
9044
|
}
|
|
@@ -8638,7 +9072,7 @@
|
|
|
8638
9072
|
box-sizing: border-box;
|
|
8639
9073
|
cursor: pointer;
|
|
8640
9074
|
background-color: var(--seed-color-bg-transparent);
|
|
8641
|
-
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);
|
|
8642
9076
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8643
9077
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8644
9078
|
border: none;
|
|
@@ -8654,6 +9088,10 @@
|
|
|
8654
9088
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8655
9089
|
}
|
|
8656
9090
|
|
|
9091
|
+
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9092
|
+
scale: var(--seed-feedback-scale);
|
|
9093
|
+
}
|
|
9094
|
+
|
|
8657
9095
|
@media (hover: hover) and (pointer: fine) {
|
|
8658
9096
|
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8659
9097
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8721,7 +9159,7 @@
|
|
|
8721
9159
|
box-sizing: border-box;
|
|
8722
9160
|
cursor: pointer;
|
|
8723
9161
|
background-color: var(--seed-color-bg-transparent);
|
|
8724
|
-
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);
|
|
8725
9163
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8726
9164
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8727
9165
|
border: none;
|
|
@@ -8737,6 +9175,10 @@
|
|
|
8737
9175
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8738
9176
|
}
|
|
8739
9177
|
|
|
9178
|
+
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9179
|
+
scale: var(--seed-feedback-scale);
|
|
9180
|
+
}
|
|
9181
|
+
|
|
8740
9182
|
@media (hover: hover) and (pointer: fine) {
|
|
8741
9183
|
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8742
9184
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8964,9 +9406,6 @@
|
|
|
8964
9406
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
8965
9407
|
border-radius: var(--seed-radius-full);
|
|
8966
9408
|
margin-top: var(--radiomark-margin-top, 0);
|
|
8967
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8968
|
-
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
8969
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
8970
9409
|
flex: none;
|
|
8971
9410
|
justify-content: center;
|
|
8972
9411
|
align-items: center;
|
|
@@ -8974,6 +9413,16 @@
|
|
|
8974
9413
|
position: relative;
|
|
8975
9414
|
}
|
|
8976
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
|
+
|
|
8977
9426
|
@media (hover: hover) and (pointer: fine) {
|
|
8978
9427
|
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8979
9428
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -9113,8 +9562,12 @@
|
|
|
9113
9562
|
outline-offset: var(--seed-dimension-x0_5);
|
|
9114
9563
|
}
|
|
9115
9564
|
|
|
9565
|
+
.seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9566
|
+
scale: var(--seed-feedback-scale);
|
|
9567
|
+
}
|
|
9568
|
+
|
|
9116
9569
|
.seed-reaction-button {
|
|
9117
|
-
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);
|
|
9118
9571
|
background: var(--seed-color-bg-transparent);
|
|
9119
9572
|
font-weight: var(--seed-font-weight-medium);
|
|
9120
9573
|
color: var(--seed-color-fg-neutral);
|
|
@@ -9385,7 +9838,7 @@
|
|
|
9385
9838
|
}
|
|
9386
9839
|
|
|
9387
9840
|
.seed-select__scrollArea {
|
|
9388
|
-
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)));
|
|
9389
9842
|
box-sizing: border-box;
|
|
9390
9843
|
padding-block: var(--seed-dimension-x2);
|
|
9391
9844
|
gap: var(--seed-dimension-x2);
|
|
@@ -9868,7 +10321,7 @@
|
|
|
9868
10321
|
cursor: pointer;
|
|
9869
10322
|
border-radius: var(--seed-radius-r3);
|
|
9870
10323
|
background-color: var(--seed-color-bg-transparent);
|
|
9871
|
-
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);
|
|
9872
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);
|
|
9873
10326
|
flex-direction: column;
|
|
9874
10327
|
display: flex;
|
|
@@ -9905,11 +10358,11 @@
|
|
|
9905
10358
|
|
|
9906
10359
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
|
|
9907
10360
|
cursor: not-allowed;
|
|
9908
|
-
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);
|
|
9909
10362
|
}
|
|
9910
10363
|
|
|
9911
10364
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
|
|
9912
|
-
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);
|
|
9913
10366
|
}
|
|
9914
10367
|
|
|
9915
10368
|
.seed-select-box__root {
|
|
@@ -10603,11 +11056,6 @@
|
|
|
10603
11056
|
top: calc(28px + var(--seed-safe-area-top));
|
|
10604
11057
|
border-radius: var(--seed-radius-r3);
|
|
10605
11058
|
cursor: pointer;
|
|
10606
|
-
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
10607
|
-
--seed-icon-size: 22px;
|
|
10608
|
-
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
10609
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
10610
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
10611
11059
|
border: none;
|
|
10612
11060
|
justify-content: center;
|
|
10613
11061
|
align-items: center;
|
|
@@ -10618,6 +11066,18 @@
|
|
|
10618
11066
|
right: 24px;
|
|
10619
11067
|
}
|
|
10620
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
|
+
|
|
10621
11081
|
.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
10622
11082
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
10623
11083
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -11033,7 +11493,7 @@
|
|
|
11033
11493
|
background: var(--seed-color-bg-neutral-inverted);
|
|
11034
11494
|
border-radius: var(--seed-radius-r2);
|
|
11035
11495
|
width: 100%;
|
|
11036
|
-
max-width:
|
|
11496
|
+
max-width: 464px;
|
|
11037
11497
|
padding-inline: var(--seed-dimension-x2_5);
|
|
11038
11498
|
padding-block: var(--seed-dimension-x2_5);
|
|
11039
11499
|
min-height: 44px;
|
|
@@ -11114,6 +11574,14 @@
|
|
|
11114
11574
|
position: relative;
|
|
11115
11575
|
}
|
|
11116
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
|
+
|
|
11117
11585
|
.seed-snackbar__actionButton:after {
|
|
11118
11586
|
content: "";
|
|
11119
11587
|
top: 50%;
|
|
@@ -11230,11 +11698,15 @@
|
|
|
11230
11698
|
border-radius: var(--seed-radius-full);
|
|
11231
11699
|
background: var(--seed-color-palette-gray-600);
|
|
11232
11700
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
11233
|
-
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);
|
|
11234
11702
|
display: block;
|
|
11235
11703
|
position: relative;
|
|
11236
11704
|
}
|
|
11237
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
|
+
|
|
11238
11710
|
.seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
|
|
11239
11711
|
opacity: .38;
|
|
11240
11712
|
}
|
|
@@ -11420,8 +11892,12 @@
|
|
|
11420
11892
|
bottom: 0;
|
|
11421
11893
|
}
|
|
11422
11894
|
|
|
11895
|
+
.seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
11896
|
+
scale: var(--seed-feedback-scale);
|
|
11897
|
+
}
|
|
11898
|
+
|
|
11423
11899
|
.seed-tabs__trigger {
|
|
11424
|
-
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);
|
|
11425
11901
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
11426
11902
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
11427
11903
|
}
|
|
@@ -12913,8 +13389,12 @@
|
|
|
12913
13389
|
cursor: not-allowed;
|
|
12914
13390
|
}
|
|
12915
13391
|
|
|
13392
|
+
.seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
13393
|
+
scale: var(--seed-feedback-scale);
|
|
13394
|
+
}
|
|
13395
|
+
|
|
12916
13396
|
.seed-toggle-button {
|
|
12917
|
-
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);
|
|
12918
13398
|
font-weight: var(--seed-font-weight-bold);
|
|
12919
13399
|
}
|
|
12920
13400
|
|
|
@@ -13153,7 +13633,7 @@
|
|
|
13153
13633
|
|
|
13154
13634
|
.seed-wheel-picker__selectionIndicator {
|
|
13155
13635
|
z-index: 0;
|
|
13156
|
-
inset-inline:
|
|
13636
|
+
inset-inline: var(--seed-dimension-x4);
|
|
13157
13637
|
height: var(--seed-wheel-picker-item-size);
|
|
13158
13638
|
pointer-events: none;
|
|
13159
13639
|
position: absolute;
|
|
@@ -13161,6 +13641,145 @@
|
|
|
13161
13641
|
transform: translateY(-50%);
|
|
13162
13642
|
}
|
|
13163
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
|
+
|
|
13164
13783
|
@media (min-width: 480px) {
|
|
13165
13784
|
.seed-action-button {
|
|
13166
13785
|
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);
|