@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.css
CHANGED
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
--seed-font-size-limit-max: 1.5;
|
|
24
24
|
--seed-line-height-limit-min: .8;
|
|
25
25
|
--seed-line-height-limit-max: 1.5;
|
|
26
|
+
--seed-feedback-scale: 1;
|
|
27
|
+
--seed-feedback-scale-transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
[data-seed-platform="ios"] {
|
|
@@ -380,6 +382,19 @@
|
|
|
380
382
|
display: block;
|
|
381
383
|
}
|
|
382
384
|
|
|
385
|
+
.seed-scale-feedback {
|
|
386
|
+
--seed-dynamic-scale-basis: max(var(--seed-element-height), var(--seed-element-width) / 4, 24);
|
|
387
|
+
--seed-dynamic-scale: calc((var(--seed-dynamic-scale-basis) - 2) / var(--seed-dynamic-scale-basis));
|
|
388
|
+
--seed-feedback-scale: var(--seed-dynamic-scale, 1);
|
|
389
|
+
scale: 1;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
@media (prefers-reduced-motion: reduce) {
|
|
393
|
+
.seed-scale-feedback {
|
|
394
|
+
--seed-feedback-scale: 1;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
383
398
|
:root, [data-seed-color-mode="system"] {
|
|
384
399
|
--lightningcss-light: initial;
|
|
385
400
|
--lightningcss-dark: ;
|
|
@@ -1108,7 +1123,7 @@
|
|
|
1108
1123
|
}
|
|
1109
1124
|
|
|
1110
1125
|
.seed-accordion__item--variant_separated {
|
|
1111
|
-
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-
|
|
1126
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
1112
1127
|
border-radius: var(--seed-radius-r3);
|
|
1113
1128
|
overflow: hidden;
|
|
1114
1129
|
}
|
|
@@ -1328,9 +1343,12 @@
|
|
|
1328
1343
|
cursor: not-allowed;
|
|
1329
1344
|
}
|
|
1330
1345
|
|
|
1346
|
+
.seed-action-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1347
|
+
scale: var(--seed-feedback-scale);
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1331
1350
|
.seed-action-button {
|
|
1332
1351
|
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);
|
|
1333
|
-
scale: 1;
|
|
1334
1352
|
}
|
|
1335
1353
|
|
|
1336
1354
|
.seed-action-button--variant_brandSolid {
|
|
@@ -1598,10 +1616,6 @@
|
|
|
1598
1616
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
1599
1617
|
}
|
|
1600
1618
|
|
|
1601
|
-
.seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1602
|
-
scale: var(--seed-scale-s95);
|
|
1603
|
-
}
|
|
1604
|
-
|
|
1605
1619
|
.seed-action-button--size_small {
|
|
1606
1620
|
height: var(--seed-dimension-x9);
|
|
1607
1621
|
border-radius: var(--seed-radius-r2);
|
|
@@ -1612,10 +1626,6 @@
|
|
|
1612
1626
|
--seed-icon-size: var(--seed-dimension-x4);
|
|
1613
1627
|
}
|
|
1614
1628
|
|
|
1615
|
-
.seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1616
|
-
scale: var(--seed-scale-s97);
|
|
1617
|
-
}
|
|
1618
|
-
|
|
1619
1629
|
.seed-action-button--size_medium {
|
|
1620
1630
|
height: var(--seed-dimension-x10);
|
|
1621
1631
|
border-radius: var(--seed-radius-r2);
|
|
@@ -1626,10 +1636,6 @@
|
|
|
1626
1636
|
--seed-icon-size: 18px;
|
|
1627
1637
|
}
|
|
1628
1638
|
|
|
1629
|
-
.seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1630
|
-
scale: var(--seed-scale-s97);
|
|
1631
|
-
}
|
|
1632
|
-
|
|
1633
1639
|
.seed-action-button--size_large {
|
|
1634
1640
|
height: var(--seed-dimension-x13);
|
|
1635
1641
|
border-radius: var(--seed-radius-r3);
|
|
@@ -1640,10 +1646,6 @@
|
|
|
1640
1646
|
--seed-icon-size: 22px;
|
|
1641
1647
|
}
|
|
1642
1648
|
|
|
1643
|
-
.seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
1644
|
-
scale: var(--seed-scale-s98);
|
|
1645
|
-
}
|
|
1646
|
-
|
|
1647
1649
|
.seed-action-button--size_xsmall-layout_withText {
|
|
1648
1650
|
gap: var(--seed-dimension-x1);
|
|
1649
1651
|
--seed-box-padding-left: var(--seed-dimension-x3_5);
|
|
@@ -2856,6 +2858,7 @@
|
|
|
2856
2858
|
background: var(--seed-color-bg-layer-floating);
|
|
2857
2859
|
border-top-left-radius: var(--seed-radius-r6);
|
|
2858
2860
|
border-top-right-radius: var(--seed-radius-r6);
|
|
2861
|
+
max-width: 480px;
|
|
2859
2862
|
padding-bottom: var(--seed-safe-area-bottom);
|
|
2860
2863
|
touch-action: none;
|
|
2861
2864
|
will-change: transform;
|
|
@@ -2966,8 +2969,6 @@
|
|
|
2966
2969
|
border-radius: var(--seed-radius-full);
|
|
2967
2970
|
background: var(--seed-color-bg-neutral-weak);
|
|
2968
2971
|
cursor: pointer;
|
|
2969
|
-
--seed-icon-size: 14px;
|
|
2970
|
-
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
2971
2972
|
border: none;
|
|
2972
2973
|
justify-content: center;
|
|
2973
2974
|
align-items: center;
|
|
@@ -2977,6 +2978,16 @@
|
|
|
2977
2978
|
position: absolute;
|
|
2978
2979
|
}
|
|
2979
2980
|
|
|
2981
|
+
.seed-bottom-sheet__closeButton:is(:active, [data-active]) {
|
|
2982
|
+
scale: var(--seed-feedback-scale);
|
|
2983
|
+
}
|
|
2984
|
+
|
|
2985
|
+
.seed-bottom-sheet__closeButton {
|
|
2986
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
2987
|
+
--seed-icon-size: 14px;
|
|
2988
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
2989
|
+
}
|
|
2990
|
+
|
|
2980
2991
|
.seed-bottom-sheet__closeButton:after {
|
|
2981
2992
|
content: "";
|
|
2982
2993
|
border-radius: var(--seed-radius-r1);
|
|
@@ -3126,7 +3137,14 @@
|
|
|
3126
3137
|
|
|
3127
3138
|
.seed-callout__root:is(button, a) {
|
|
3128
3139
|
cursor: pointer;
|
|
3129
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3140
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3141
|
+
}
|
|
3142
|
+
|
|
3143
|
+
.seed-callout__root:is(button, a):is(:active, [data-active]) {
|
|
3144
|
+
scale: var(--seed-feedback-scale);
|
|
3145
|
+
}
|
|
3146
|
+
|
|
3147
|
+
.seed-callout__root:is(button, a) {
|
|
3130
3148
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3131
3149
|
outline-offset: var(--seed-dimension-x0_5);
|
|
3132
3150
|
}
|
|
@@ -3187,15 +3205,13 @@
|
|
|
3187
3205
|
}
|
|
3188
3206
|
|
|
3189
3207
|
.seed-callout__closeButton {
|
|
3208
|
+
background-color: var(--seed-color-bg-transparent);
|
|
3190
3209
|
cursor: pointer;
|
|
3191
3210
|
width: var(--seed-dimension-x10);
|
|
3192
3211
|
height: var(--seed-dimension-x10);
|
|
3193
3212
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
3194
|
-
border-radius: var(--seed-radius-
|
|
3195
|
-
|
|
3196
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3197
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3198
|
-
background-color: #0000;
|
|
3213
|
+
border-radius: var(--seed-radius-r2);
|
|
3214
|
+
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
3199
3215
|
border: none;
|
|
3200
3216
|
flex-grow: 0;
|
|
3201
3217
|
flex-shrink: 0;
|
|
@@ -3205,11 +3221,33 @@
|
|
|
3205
3221
|
display: flex;
|
|
3206
3222
|
}
|
|
3207
3223
|
|
|
3224
|
+
.seed-callout__closeButton:is(:active, [data-active]) {
|
|
3225
|
+
scale: var(--seed-feedback-scale);
|
|
3226
|
+
}
|
|
3227
|
+
|
|
3228
|
+
.seed-callout__closeButton {
|
|
3229
|
+
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);
|
|
3230
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3231
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3232
|
+
}
|
|
3233
|
+
|
|
3208
3234
|
.seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
3209
3235
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3210
3236
|
outline-offset: var(--seed-dimension-x0_5);
|
|
3211
3237
|
}
|
|
3212
3238
|
|
|
3239
|
+
@media (hover: hover) and (pointer: fine) {
|
|
3240
|
+
.seed-callout__closeButton:is(:hover, [data-hover]) {
|
|
3241
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3242
|
+
}
|
|
3243
|
+
}
|
|
3244
|
+
|
|
3245
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
3246
|
+
.seed-callout__closeButton:is(:active, [data-active]) {
|
|
3247
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3250
|
+
|
|
3213
3251
|
.seed-callout__root--tone_neutral {
|
|
3214
3252
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
3215
3253
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -3232,6 +3270,10 @@
|
|
|
3232
3270
|
color: var(--seed-color-fg-neutral);
|
|
3233
3271
|
}
|
|
3234
3272
|
|
|
3273
|
+
.seed-callout__closeButton--tone_neutral {
|
|
3274
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3275
|
+
}
|
|
3276
|
+
|
|
3235
3277
|
.seed-callout__root--tone_informative {
|
|
3236
3278
|
background-color: var(--seed-color-bg-informative-weak);
|
|
3237
3279
|
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
@@ -3254,6 +3296,10 @@
|
|
|
3254
3296
|
color: var(--seed-color-fg-informative-contrast);
|
|
3255
3297
|
}
|
|
3256
3298
|
|
|
3299
|
+
.seed-callout__closeButton--tone_informative {
|
|
3300
|
+
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
3301
|
+
}
|
|
3302
|
+
|
|
3257
3303
|
.seed-callout__root--tone_positive {
|
|
3258
3304
|
background-color: var(--seed-color-bg-positive-weak);
|
|
3259
3305
|
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
@@ -3276,6 +3322,10 @@
|
|
|
3276
3322
|
color: var(--seed-color-fg-positive-contrast);
|
|
3277
3323
|
}
|
|
3278
3324
|
|
|
3325
|
+
.seed-callout__closeButton--tone_positive {
|
|
3326
|
+
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
3327
|
+
}
|
|
3328
|
+
|
|
3279
3329
|
.seed-callout__root--tone_warning {
|
|
3280
3330
|
background-color: var(--seed-color-bg-warning-weak);
|
|
3281
3331
|
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
@@ -3298,6 +3348,10 @@
|
|
|
3298
3348
|
color: var(--seed-color-fg-warning-contrast);
|
|
3299
3349
|
}
|
|
3300
3350
|
|
|
3351
|
+
.seed-callout__closeButton--tone_warning {
|
|
3352
|
+
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
3353
|
+
}
|
|
3354
|
+
|
|
3301
3355
|
.seed-callout__root--tone_critical {
|
|
3302
3356
|
background-color: var(--seed-color-bg-critical-weak);
|
|
3303
3357
|
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
@@ -3320,6 +3374,10 @@
|
|
|
3320
3374
|
color: var(--seed-color-fg-critical-contrast);
|
|
3321
3375
|
}
|
|
3322
3376
|
|
|
3377
|
+
.seed-callout__closeButton--tone_critical {
|
|
3378
|
+
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
3379
|
+
}
|
|
3380
|
+
|
|
3323
3381
|
.seed-callout__root--tone_magic {
|
|
3324
3382
|
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
|
|
3325
3383
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -3342,6 +3400,10 @@
|
|
|
3342
3400
|
color: var(--seed-color-fg-neutral);
|
|
3343
3401
|
}
|
|
3344
3402
|
|
|
3403
|
+
.seed-callout__closeButton--tone_magic {
|
|
3404
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3405
|
+
}
|
|
3406
|
+
|
|
3345
3407
|
.seed-checkbox__root {
|
|
3346
3408
|
vertical-align: top;
|
|
3347
3409
|
isolation: isolate;
|
|
@@ -3404,13 +3466,20 @@
|
|
|
3404
3466
|
.seed-checkmark__root {
|
|
3405
3467
|
box-sizing: border-box;
|
|
3406
3468
|
margin-top: var(--checkmark-margin-top, 0);
|
|
3407
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3408
|
-
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
3409
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3410
3469
|
flex: none;
|
|
3411
3470
|
position: relative;
|
|
3412
3471
|
}
|
|
3413
3472
|
|
|
3473
|
+
.seed-checkmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3474
|
+
scale: var(--seed-checkmark-feedback-scale, var(--seed-feedback-scale));
|
|
3475
|
+
}
|
|
3476
|
+
|
|
3477
|
+
.seed-checkmark__root {
|
|
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-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
3480
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3481
|
+
}
|
|
3482
|
+
|
|
3414
3483
|
.seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
|
|
3415
3484
|
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
3416
3485
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -3596,21 +3665,26 @@
|
|
|
3596
3665
|
-webkit-font-smoothing: antialiased;
|
|
3597
3666
|
-moz-osx-font-smoothing: grayscale;
|
|
3598
3667
|
border-radius: var(--seed-radius-full);
|
|
3599
|
-
transition-duration: var(--seed-duration-color-transition);
|
|
3600
|
-
transition-timing-function: var(--seed-timing-function-easing);
|
|
3601
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3602
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3603
3668
|
border: none;
|
|
3604
3669
|
flex-shrink: 0;
|
|
3605
3670
|
justify-content: center;
|
|
3606
3671
|
align-items: center;
|
|
3607
3672
|
font-family: inherit;
|
|
3608
3673
|
line-height: 1;
|
|
3609
|
-
transition-property: background-color, color, border-color, box-shadow, outline-color;
|
|
3610
3674
|
display: inline-flex;
|
|
3611
3675
|
position: relative;
|
|
3612
3676
|
}
|
|
3613
3677
|
|
|
3678
|
+
.seed-chip__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3679
|
+
scale: var(--seed-feedback-scale);
|
|
3680
|
+
}
|
|
3681
|
+
|
|
3682
|
+
.seed-chip__root {
|
|
3683
|
+
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);
|
|
3684
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3685
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3686
|
+
}
|
|
3687
|
+
|
|
3614
3688
|
.seed-chip__root:is(:focus-visible, [data-focus-visible]) {
|
|
3615
3689
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3616
3690
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -3918,9 +3992,6 @@
|
|
|
3918
3992
|
border-radius: var(--seed-radius-full);
|
|
3919
3993
|
font-family: inherit;
|
|
3920
3994
|
font-weight: var(--seed-font-weight-medium);
|
|
3921
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3922
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3923
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
3924
3995
|
border: none;
|
|
3925
3996
|
flex-shrink: 0;
|
|
3926
3997
|
justify-content: center;
|
|
@@ -3928,6 +3999,16 @@
|
|
|
3928
3999
|
display: flex;
|
|
3929
4000
|
}
|
|
3930
4001
|
|
|
4002
|
+
.seed-chip-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
4003
|
+
scale: var(--seed-feedback-scale);
|
|
4004
|
+
}
|
|
4005
|
+
|
|
4006
|
+
.seed-chip-tabs__trigger {
|
|
4007
|
+
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);
|
|
4008
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4009
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4010
|
+
}
|
|
4011
|
+
|
|
3931
4012
|
.seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
|
|
3932
4013
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3933
4014
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -4264,7 +4345,7 @@
|
|
|
4264
4345
|
background: var(--seed-color-bg-transparent);
|
|
4265
4346
|
border-radius: var(--seed-radius-r3);
|
|
4266
4347
|
cursor: pointer;
|
|
4267
|
-
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4348
|
+
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);
|
|
4268
4349
|
--seed-icon-size: 22px;
|
|
4269
4350
|
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
4270
4351
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
@@ -4283,6 +4364,10 @@
|
|
|
4283
4364
|
outline-offset: var(--seed-dimension-x0_5);
|
|
4284
4365
|
}
|
|
4285
4366
|
|
|
4367
|
+
.seed-content-dialog__closeButton:is(:active, [data-active]) {
|
|
4368
|
+
scale: var(--seed-feedback-scale);
|
|
4369
|
+
}
|
|
4370
|
+
|
|
4286
4371
|
@media (hover: hover) and (pointer: fine) {
|
|
4287
4372
|
.seed-content-dialog__closeButton:is(:hover, [data-hover]) {
|
|
4288
4373
|
background: var(--seed-color-bg-transparent-pressed);
|
|
@@ -4375,7 +4460,14 @@
|
|
|
4375
4460
|
--seed-icon-size: 22px;
|
|
4376
4461
|
--size: 16px;
|
|
4377
4462
|
--thickness: 2px;
|
|
4378
|
-
|
|
4463
|
+
}
|
|
4464
|
+
|
|
4465
|
+
.seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
4466
|
+
scale: var(--seed-feedback-scale);
|
|
4467
|
+
}
|
|
4468
|
+
|
|
4469
|
+
.seed-contextual-floating-button {
|
|
4470
|
+
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);
|
|
4379
4471
|
}
|
|
4380
4472
|
|
|
4381
4473
|
.seed-contextual-floating-button--variant_solid {
|
|
@@ -4814,29 +4906,37 @@
|
|
|
4814
4906
|
}
|
|
4815
4907
|
|
|
4816
4908
|
@media (hover: hover) and (pointer: fine) {
|
|
4817
|
-
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
|
|
4909
|
+
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
|
|
4818
4910
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
4819
4911
|
}
|
|
4820
4912
|
}
|
|
4821
4913
|
|
|
4822
4914
|
@media not all and (hover: hover) and (pointer: fine) {
|
|
4823
|
-
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
|
|
4915
|
+
.seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
|
|
4824
4916
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
4825
4917
|
}
|
|
4826
4918
|
}
|
|
4827
4919
|
|
|
4828
4920
|
@media (hover: hover) and (pointer: fine) {
|
|
4829
|
-
.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 {
|
|
4921
|
+
.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 {
|
|
4830
4922
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
4831
4923
|
}
|
|
4832
4924
|
}
|
|
4833
4925
|
|
|
4834
4926
|
@media not all and (hover: hover) and (pointer: fine) {
|
|
4835
|
-
.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 {
|
|
4927
|
+
.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 {
|
|
4836
4928
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
4837
4929
|
}
|
|
4838
4930
|
}
|
|
4839
4931
|
|
|
4932
|
+
.seed-date-picker__dateButton[data-range-start-readonly]:before {
|
|
4933
|
+
background-color: var(--seed-color-palette-gray-600);
|
|
4934
|
+
}
|
|
4935
|
+
|
|
4936
|
+
.seed-date-picker__dateButton[data-range-start-readonly] {
|
|
4937
|
+
cursor: default;
|
|
4938
|
+
}
|
|
4939
|
+
|
|
4840
4940
|
.seed-date-picker__dateButton[data-in-range] {
|
|
4841
4941
|
color: var(--seed-color-fg-neutral-muted);
|
|
4842
4942
|
}
|
|
@@ -5586,11 +5686,12 @@
|
|
|
5586
5686
|
align-items: center;
|
|
5587
5687
|
gap: var(--seed-dimension-x2_5);
|
|
5588
5688
|
border-radius: var(--seed-radius-r3);
|
|
5689
|
+
height: 80px;
|
|
5690
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
5589
5691
|
--remove-button-mask-size: var(--seed-dimension-x6);
|
|
5590
5692
|
--remove-button-mask-offset: var(--seed-dimension-x1_5);
|
|
5591
5693
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5592
5694
|
outline-offset: var(--seed-dimension-x0_5);
|
|
5593
|
-
height: 80px;
|
|
5594
5695
|
display: flex;
|
|
5595
5696
|
position: relative;
|
|
5596
5697
|
}
|
|
@@ -5628,6 +5729,7 @@
|
|
|
5628
5729
|
}
|
|
5629
5730
|
|
|
5630
5731
|
.seed-attachment-input-item__root[aria-grabbed="true"] {
|
|
5732
|
+
scale: var(--seed-feedback-scale);
|
|
5631
5733
|
--remove-button-mask-size: 0px;
|
|
5632
5734
|
--remove-button-mask-offset: 0px;
|
|
5633
5735
|
}
|
|
@@ -5722,9 +5824,6 @@
|
|
|
5722
5824
|
font: inherit;
|
|
5723
5825
|
cursor: pointer;
|
|
5724
5826
|
border-radius: inherit;
|
|
5725
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5726
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5727
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5728
5827
|
background: none;
|
|
5729
5828
|
border: none;
|
|
5730
5829
|
flex-direction: column;
|
|
@@ -5734,6 +5833,16 @@
|
|
|
5734
5833
|
display: flex;
|
|
5735
5834
|
}
|
|
5736
5835
|
|
|
5836
|
+
.seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
5837
|
+
scale: var(--seed-feedback-scale);
|
|
5838
|
+
}
|
|
5839
|
+
|
|
5840
|
+
.seed-attachment-input-item__actionButton {
|
|
5841
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5842
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5843
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5737
5846
|
.seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
|
|
5738
5847
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5739
5848
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -5755,9 +5864,6 @@
|
|
|
5755
5864
|
background-color: var(--seed-color-bg-layer-default);
|
|
5756
5865
|
border-radius: var(--seed-radius-full);
|
|
5757
5866
|
cursor: pointer;
|
|
5758
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5759
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5760
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5761
5867
|
border: none;
|
|
5762
5868
|
justify-content: center;
|
|
5763
5869
|
align-items: center;
|
|
@@ -5766,6 +5872,16 @@
|
|
|
5766
5872
|
position: absolute;
|
|
5767
5873
|
}
|
|
5768
5874
|
|
|
5875
|
+
.seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
5876
|
+
scale: var(--seed-feedback-scale);
|
|
5877
|
+
}
|
|
5878
|
+
|
|
5879
|
+
.seed-attachment-input-item__removeButton {
|
|
5880
|
+
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);
|
|
5881
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5882
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5883
|
+
}
|
|
5884
|
+
|
|
5769
5885
|
.seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
|
|
5770
5886
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5771
5887
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -5830,7 +5946,7 @@
|
|
|
5830
5946
|
|
|
5831
5947
|
.seed-attachment-input-item__root--type_image {
|
|
5832
5948
|
width: 80px;
|
|
5833
|
-
transition: opacity .2s;
|
|
5949
|
+
transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
5834
5950
|
}
|
|
5835
5951
|
|
|
5836
5952
|
.seed-attachment-input-item__root--type_image:before {
|
|
@@ -5888,9 +6004,6 @@
|
|
|
5888
6004
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
5889
6005
|
cursor: pointer;
|
|
5890
6006
|
border-radius: var(--seed-radius-r3);
|
|
5891
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5892
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5893
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5894
6007
|
background-color: #0000;
|
|
5895
6008
|
border: none;
|
|
5896
6009
|
flex-direction: column;
|
|
@@ -5899,6 +6012,16 @@
|
|
|
5899
6012
|
display: flex;
|
|
5900
6013
|
}
|
|
5901
6014
|
|
|
6015
|
+
.seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6016
|
+
scale: var(--seed-feedback-scale);
|
|
6017
|
+
}
|
|
6018
|
+
|
|
6019
|
+
.seed-attachment-input-trigger__root {
|
|
6020
|
+
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);
|
|
6021
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6022
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6023
|
+
}
|
|
6024
|
+
|
|
5902
6025
|
.seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
|
|
5903
6026
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5904
6027
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -5995,11 +6118,18 @@
|
|
|
5995
6118
|
font-size: var(--seed-font-size-t5);
|
|
5996
6119
|
line-height: var(--seed-line-height-t5);
|
|
5997
6120
|
font-weight: var(--seed-font-weight-bold);
|
|
5998
|
-
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);
|
|
5999
6121
|
position: relative;
|
|
6000
6122
|
overflow: hidden;
|
|
6001
6123
|
}
|
|
6002
6124
|
|
|
6125
|
+
.seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6126
|
+
scale: var(--seed-feedback-scale);
|
|
6127
|
+
}
|
|
6128
|
+
|
|
6129
|
+
.seed-floating-action-button__root {
|
|
6130
|
+
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);
|
|
6131
|
+
}
|
|
6132
|
+
|
|
6003
6133
|
@media (hover: hover) and (pointer: fine) {
|
|
6004
6134
|
.seed-floating-action-button__root:is(:hover, [data-hover]) {
|
|
6005
6135
|
background: var(--seed-color-bg-brand-solid-pressed);
|
|
@@ -6119,11 +6249,12 @@
|
|
|
6119
6249
|
}
|
|
6120
6250
|
|
|
6121
6251
|
.seed-help-bubble__content {
|
|
6252
|
+
box-sizing: border-box;
|
|
6122
6253
|
background: var(--seed-color-bg-neutral-inverted);
|
|
6123
6254
|
padding-inline: var(--seed-dimension-x3);
|
|
6124
6255
|
padding-block: var(--seed-dimension-x2_5);
|
|
6125
6256
|
border-radius: var(--seed-radius-r3);
|
|
6126
|
-
--seed-box-max-width-base:
|
|
6257
|
+
--seed-box-max-width-base: 280px;
|
|
6127
6258
|
--seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
|
|
6128
6259
|
--seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
|
|
6129
6260
|
--seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
|
|
@@ -6210,9 +6341,6 @@
|
|
|
6210
6341
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
6211
6342
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
6212
6343
|
border-radius: var(--seed-radius-r3);
|
|
6213
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6214
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6215
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6216
6344
|
background: none;
|
|
6217
6345
|
border: none;
|
|
6218
6346
|
justify-content: center;
|
|
@@ -6220,6 +6348,16 @@
|
|
|
6220
6348
|
display: flex;
|
|
6221
6349
|
}
|
|
6222
6350
|
|
|
6351
|
+
.seed-help-bubble__closeButton:is(:active, [data-active]) {
|
|
6352
|
+
scale: var(--seed-feedback-scale);
|
|
6353
|
+
}
|
|
6354
|
+
|
|
6355
|
+
.seed-help-bubble__closeButton {
|
|
6356
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6357
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6358
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6359
|
+
}
|
|
6360
|
+
|
|
6223
6361
|
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6224
6362
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6225
6363
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6326,6 +6464,14 @@
|
|
|
6326
6464
|
position: relative;
|
|
6327
6465
|
}
|
|
6328
6466
|
|
|
6467
|
+
.seed-image-frame-reaction-button__root:is(:active, [data-active]) {
|
|
6468
|
+
scale: var(--seed-feedback-scale);
|
|
6469
|
+
}
|
|
6470
|
+
|
|
6471
|
+
.seed-image-frame-reaction-button__root {
|
|
6472
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
6473
|
+
}
|
|
6474
|
+
|
|
6329
6475
|
.seed-image-frame-reaction-button__root:before {
|
|
6330
6476
|
content: "";
|
|
6331
6477
|
inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
@@ -6672,14 +6818,21 @@
|
|
|
6672
6818
|
.seed-input-button__clearButton {
|
|
6673
6819
|
cursor: pointer;
|
|
6674
6820
|
border-radius: var(--seed-radius-full);
|
|
6675
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6676
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6677
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
6678
6821
|
background-color: #0000;
|
|
6679
6822
|
border: none;
|
|
6680
6823
|
padding: 0;
|
|
6681
6824
|
}
|
|
6682
6825
|
|
|
6826
|
+
.seed-input-button__clearButton:is(:active, [data-active]) {
|
|
6827
|
+
scale: var(--seed-feedback-scale);
|
|
6828
|
+
}
|
|
6829
|
+
|
|
6830
|
+
.seed-input-button__clearButton {
|
|
6831
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6832
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6833
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6834
|
+
}
|
|
6835
|
+
|
|
6683
6836
|
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
|
|
6684
6837
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6685
6838
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -6981,6 +7134,9 @@
|
|
|
6981
7134
|
--seed-box-padding-right: var(--seed-box-padding-right-base, initial);
|
|
6982
7135
|
padding-right: var(--seed-box-padding-right);
|
|
6983
7136
|
--seed-focus-ring: none;
|
|
7137
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7138
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7139
|
+
--seed-switchmark-feedback-scale: 1;
|
|
6984
7140
|
--seed-icon-size: 22px;
|
|
6985
7141
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
6986
7142
|
flex-shrink: 0;
|
|
@@ -7004,6 +7160,9 @@
|
|
|
7004
7160
|
align-items: center;
|
|
7005
7161
|
gap: var(--seed-box-gap);
|
|
7006
7162
|
--seed-focus-ring: none;
|
|
7163
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7164
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7165
|
+
--seed-switchmark-feedback-scale: 1;
|
|
7007
7166
|
font-size: var(--seed-font-size-t5);
|
|
7008
7167
|
line-height: var(--seed-line-height-t5);
|
|
7009
7168
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -7329,7 +7488,7 @@
|
|
|
7329
7488
|
}
|
|
7330
7489
|
|
|
7331
7490
|
.seed-menu__scrollArea {
|
|
7332
|
-
max-height: min(480px, var(--seed-menu-available-height, 480px));
|
|
7491
|
+
max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
|
|
7333
7492
|
box-sizing: border-box;
|
|
7334
7493
|
padding-block: var(--seed-dimension-x2);
|
|
7335
7494
|
gap: var(--seed-dimension-x2);
|
|
@@ -7620,6 +7779,7 @@
|
|
|
7620
7779
|
word-break: break-all;
|
|
7621
7780
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
7622
7781
|
background: var(--seed-color-bg-layer-floating);
|
|
7782
|
+
max-width: 480px;
|
|
7623
7783
|
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
7624
7784
|
padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
|
|
7625
7785
|
padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
|
|
@@ -7710,13 +7870,20 @@
|
|
|
7710
7870
|
font-size: var(--seed-font-size-t5);
|
|
7711
7871
|
line-height: var(--seed-line-height-t5);
|
|
7712
7872
|
font-weight: var(--seed-font-weight-medium);
|
|
7713
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7714
7873
|
border: none;
|
|
7715
7874
|
justify-content: center;
|
|
7716
7875
|
align-items: center;
|
|
7717
7876
|
display: flex;
|
|
7718
7877
|
}
|
|
7719
7878
|
|
|
7879
|
+
.seed-menu-sheet__closeButton:is(:active, [data-active]) {
|
|
7880
|
+
scale: var(--seed-feedback-scale);
|
|
7881
|
+
}
|
|
7882
|
+
|
|
7883
|
+
.seed-menu-sheet__closeButton {
|
|
7884
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7885
|
+
}
|
|
7886
|
+
|
|
7720
7887
|
@media (hover: hover) and (pointer: fine) {
|
|
7721
7888
|
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
|
|
7722
7889
|
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
@@ -8020,15 +8187,22 @@
|
|
|
8020
8187
|
line-height: var(--seed-line-height-t3);
|
|
8021
8188
|
font-weight: var(--seed-font-weight-bold);
|
|
8022
8189
|
border-radius: var(--seed-radius-r1);
|
|
8023
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8024
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8025
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8026
8190
|
background-color: #0000;
|
|
8027
8191
|
border: none;
|
|
8028
8192
|
align-items: center;
|
|
8029
8193
|
display: flex;
|
|
8030
8194
|
}
|
|
8031
8195
|
|
|
8196
|
+
.seed-page-banner__button:is(:active, [data-active]) {
|
|
8197
|
+
scale: var(--seed-feedback-scale);
|
|
8198
|
+
}
|
|
8199
|
+
|
|
8200
|
+
.seed-page-banner__button {
|
|
8201
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8202
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8203
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8204
|
+
}
|
|
8205
|
+
|
|
8032
8206
|
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
|
|
8033
8207
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8034
8208
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -8040,12 +8214,10 @@
|
|
|
8040
8214
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
8041
8215
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
8042
8216
|
--seed-suffix-icon-margin-left: initial;
|
|
8217
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8043
8218
|
cursor: pointer;
|
|
8044
|
-
border-radius: var(--seed-radius-
|
|
8045
|
-
|
|
8046
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8047
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8048
|
-
background-color: #0000;
|
|
8219
|
+
border-radius: var(--seed-radius-r2);
|
|
8220
|
+
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
8049
8221
|
border: none;
|
|
8050
8222
|
flex-grow: 0;
|
|
8051
8223
|
flex-shrink: 0;
|
|
@@ -8056,11 +8228,33 @@
|
|
|
8056
8228
|
display: flex;
|
|
8057
8229
|
}
|
|
8058
8230
|
|
|
8231
|
+
.seed-page-banner__closeButton:is(:active, [data-active]) {
|
|
8232
|
+
scale: var(--seed-feedback-scale);
|
|
8233
|
+
}
|
|
8234
|
+
|
|
8235
|
+
.seed-page-banner__closeButton {
|
|
8236
|
+
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);
|
|
8237
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8238
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8239
|
+
}
|
|
8240
|
+
|
|
8059
8241
|
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
8060
8242
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8061
8243
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8062
8244
|
}
|
|
8063
8245
|
|
|
8246
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8247
|
+
.seed-page-banner__closeButton:is(:hover, [data-hover]) {
|
|
8248
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8249
|
+
}
|
|
8250
|
+
}
|
|
8251
|
+
|
|
8252
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8253
|
+
.seed-page-banner__closeButton:is(:active, [data-active]) {
|
|
8254
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8255
|
+
}
|
|
8256
|
+
}
|
|
8257
|
+
|
|
8064
8258
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
8065
8259
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
8066
8260
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8083,6 +8277,10 @@
|
|
|
8083
8277
|
color: var(--seed-color-fg-neutral);
|
|
8084
8278
|
}
|
|
8085
8279
|
|
|
8280
|
+
.seed-page-banner__closeButton--tone_neutral-variant_weak {
|
|
8281
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8282
|
+
}
|
|
8283
|
+
|
|
8086
8284
|
.seed-page-banner__root--tone_neutral-variant_solid {
|
|
8087
8285
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
8088
8286
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
@@ -8105,6 +8303,10 @@
|
|
|
8105
8303
|
color: var(--seed-color-fg-neutral-inverted);
|
|
8106
8304
|
}
|
|
8107
8305
|
|
|
8306
|
+
.seed-page-banner__closeButton--tone_neutral-variant_solid {
|
|
8307
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
8308
|
+
}
|
|
8309
|
+
|
|
8108
8310
|
.seed-page-banner__root--tone_informative-variant_weak {
|
|
8109
8311
|
background-color: var(--seed-color-bg-informative-weak);
|
|
8110
8312
|
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
@@ -8127,6 +8329,10 @@
|
|
|
8127
8329
|
color: var(--seed-color-fg-informative-contrast);
|
|
8128
8330
|
}
|
|
8129
8331
|
|
|
8332
|
+
.seed-page-banner__closeButton--tone_informative-variant_weak {
|
|
8333
|
+
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
8334
|
+
}
|
|
8335
|
+
|
|
8130
8336
|
.seed-page-banner__root--tone_informative-variant_solid {
|
|
8131
8337
|
background-color: var(--seed-color-bg-informative-solid);
|
|
8132
8338
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8149,6 +8355,10 @@
|
|
|
8149
8355
|
color: var(--seed-color-palette-static-white);
|
|
8150
8356
|
}
|
|
8151
8357
|
|
|
8358
|
+
.seed-page-banner__closeButton--tone_informative-variant_solid {
|
|
8359
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8360
|
+
}
|
|
8361
|
+
|
|
8152
8362
|
.seed-page-banner__root--tone_positive-variant_weak {
|
|
8153
8363
|
background-color: var(--seed-color-bg-positive-weak);
|
|
8154
8364
|
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
@@ -8171,6 +8381,10 @@
|
|
|
8171
8381
|
color: var(--seed-color-fg-positive-contrast);
|
|
8172
8382
|
}
|
|
8173
8383
|
|
|
8384
|
+
.seed-page-banner__closeButton--tone_positive-variant_weak {
|
|
8385
|
+
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
8386
|
+
}
|
|
8387
|
+
|
|
8174
8388
|
.seed-page-banner__root--tone_positive-variant_solid {
|
|
8175
8389
|
background-color: var(--seed-color-bg-positive-solid);
|
|
8176
8390
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8193,6 +8407,10 @@
|
|
|
8193
8407
|
color: var(--seed-color-palette-static-white);
|
|
8194
8408
|
}
|
|
8195
8409
|
|
|
8410
|
+
.seed-page-banner__closeButton--tone_positive-variant_solid {
|
|
8411
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8412
|
+
}
|
|
8413
|
+
|
|
8196
8414
|
.seed-page-banner__root--tone_warning-variant_weak {
|
|
8197
8415
|
background-color: var(--seed-color-bg-warning-weak);
|
|
8198
8416
|
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
@@ -8215,6 +8433,10 @@
|
|
|
8215
8433
|
color: var(--seed-color-fg-warning-contrast);
|
|
8216
8434
|
}
|
|
8217
8435
|
|
|
8436
|
+
.seed-page-banner__closeButton--tone_warning-variant_weak {
|
|
8437
|
+
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
8438
|
+
}
|
|
8439
|
+
|
|
8218
8440
|
.seed-page-banner__root--tone_warning-variant_solid {
|
|
8219
8441
|
background-color: var(--seed-color-bg-warning-solid);
|
|
8220
8442
|
--seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
@@ -8237,7 +8459,11 @@
|
|
|
8237
8459
|
color: var(--seed-color-palette-static-black-alpha-900);
|
|
8238
8460
|
}
|
|
8239
8461
|
|
|
8240
|
-
.seed-page-
|
|
8462
|
+
.seed-page-banner__closeButton--tone_warning-variant_solid {
|
|
8463
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
8464
|
+
}
|
|
8465
|
+
|
|
8466
|
+
.seed-page-banner__root--tone_critical-variant_weak {
|
|
8241
8467
|
background-color: var(--seed-color-bg-critical-weak);
|
|
8242
8468
|
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
8243
8469
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
@@ -8259,6 +8485,10 @@
|
|
|
8259
8485
|
color: var(--seed-color-fg-critical-contrast);
|
|
8260
8486
|
}
|
|
8261
8487
|
|
|
8488
|
+
.seed-page-banner__closeButton--tone_critical-variant_weak {
|
|
8489
|
+
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
8490
|
+
}
|
|
8491
|
+
|
|
8262
8492
|
.seed-page-banner__root--tone_critical-variant_solid {
|
|
8263
8493
|
background-color: var(--seed-color-bg-critical-solid);
|
|
8264
8494
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8281,6 +8511,10 @@
|
|
|
8281
8511
|
color: var(--seed-color-palette-static-white);
|
|
8282
8512
|
}
|
|
8283
8513
|
|
|
8514
|
+
.seed-page-banner__closeButton--tone_critical-variant_solid {
|
|
8515
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8516
|
+
}
|
|
8517
|
+
|
|
8284
8518
|
.seed-page-banner__root--tone_magic-variant_weak {
|
|
8285
8519
|
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
|
|
8286
8520
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8303,6 +8537,206 @@
|
|
|
8303
8537
|
color: var(--seed-color-fg-neutral);
|
|
8304
8538
|
}
|
|
8305
8539
|
|
|
8540
|
+
.seed-page-banner__closeButton--tone_magic-variant_weak {
|
|
8541
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8542
|
+
}
|
|
8543
|
+
|
|
8544
|
+
.seed-pagination-button {
|
|
8545
|
+
box-sizing: border-box;
|
|
8546
|
+
cursor: pointer;
|
|
8547
|
+
text-transform: none;
|
|
8548
|
+
white-space: nowrap;
|
|
8549
|
+
vertical-align: middle;
|
|
8550
|
+
-webkit-font-smoothing: antialiased;
|
|
8551
|
+
-moz-osx-font-smoothing: grayscale;
|
|
8552
|
+
width: var(--seed-dimension-x10);
|
|
8553
|
+
height: var(--seed-dimension-x10);
|
|
8554
|
+
border-radius: var(--seed-radius-r2);
|
|
8555
|
+
isolation: isolate;
|
|
8556
|
+
background: none;
|
|
8557
|
+
border: none;
|
|
8558
|
+
flex-shrink: 0;
|
|
8559
|
+
justify-content: center;
|
|
8560
|
+
align-items: center;
|
|
8561
|
+
padding: 0;
|
|
8562
|
+
font-family: inherit;
|
|
8563
|
+
text-decoration: none;
|
|
8564
|
+
display: inline-flex;
|
|
8565
|
+
position: relative;
|
|
8566
|
+
}
|
|
8567
|
+
|
|
8568
|
+
.seed-pagination-button:before {
|
|
8569
|
+
content: "";
|
|
8570
|
+
z-index: -1;
|
|
8571
|
+
border-radius: inherit;
|
|
8572
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8573
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
8574
|
+
position: absolute;
|
|
8575
|
+
inset: 0;
|
|
8576
|
+
}
|
|
8577
|
+
|
|
8578
|
+
.seed-pagination-button {
|
|
8579
|
+
--seed-icon-size: var(--seed-dimension-x4);
|
|
8580
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
8581
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8582
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8583
|
+
}
|
|
8584
|
+
|
|
8585
|
+
.seed-pagination-button:is(:focus-visible, [data-focus-visible]) {
|
|
8586
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8587
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8588
|
+
}
|
|
8589
|
+
|
|
8590
|
+
.seed-pagination-button {
|
|
8591
|
+
scale: 1;
|
|
8592
|
+
}
|
|
8593
|
+
|
|
8594
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8595
|
+
.seed-pagination-button:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8596
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8597
|
+
}
|
|
8598
|
+
}
|
|
8599
|
+
|
|
8600
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8601
|
+
.seed-pagination-button:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8602
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8603
|
+
}
|
|
8604
|
+
}
|
|
8605
|
+
|
|
8606
|
+
.seed-pagination-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8607
|
+
scale: var(--seed-scale-s97);
|
|
8608
|
+
}
|
|
8609
|
+
|
|
8610
|
+
.seed-pagination-button:is(:disabled, [disabled], [data-disabled]) {
|
|
8611
|
+
cursor: not-allowed;
|
|
8612
|
+
--seed-icon-color: var(--seed-color-fg-disabled);
|
|
8613
|
+
}
|
|
8614
|
+
|
|
8615
|
+
.seed-pagination-button:is(:disabled, [disabled], [data-disabled]):before {
|
|
8616
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8617
|
+
}
|
|
8618
|
+
|
|
8619
|
+
.seed-pagination-button {
|
|
8620
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8621
|
+
}
|
|
8622
|
+
|
|
8623
|
+
.seed-pagination-page-item {
|
|
8624
|
+
box-sizing: border-box;
|
|
8625
|
+
cursor: pointer;
|
|
8626
|
+
text-transform: none;
|
|
8627
|
+
white-space: nowrap;
|
|
8628
|
+
vertical-align: middle;
|
|
8629
|
+
-webkit-font-smoothing: antialiased;
|
|
8630
|
+
-moz-osx-font-smoothing: grayscale;
|
|
8631
|
+
width: var(--seed-dimension-x10);
|
|
8632
|
+
height: var(--seed-dimension-x10);
|
|
8633
|
+
border-radius: var(--seed-radius-r2);
|
|
8634
|
+
isolation: isolate;
|
|
8635
|
+
color: var(--seed-color-fg-neutral);
|
|
8636
|
+
font-family: inherit;
|
|
8637
|
+
font-size: var(--seed-font-size-t4);
|
|
8638
|
+
line-height: var(--seed-line-height-t4);
|
|
8639
|
+
font-weight: var(--seed-font-weight-bold);
|
|
8640
|
+
background: none;
|
|
8641
|
+
border: none;
|
|
8642
|
+
flex-shrink: 0;
|
|
8643
|
+
justify-content: center;
|
|
8644
|
+
align-items: center;
|
|
8645
|
+
padding: 0;
|
|
8646
|
+
text-decoration: none;
|
|
8647
|
+
display: inline-flex;
|
|
8648
|
+
position: relative;
|
|
8649
|
+
}
|
|
8650
|
+
|
|
8651
|
+
.seed-pagination-page-item:before {
|
|
8652
|
+
content: "";
|
|
8653
|
+
z-index: -1;
|
|
8654
|
+
border-radius: inherit;
|
|
8655
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8656
|
+
position: absolute;
|
|
8657
|
+
inset: 0;
|
|
8658
|
+
}
|
|
8659
|
+
|
|
8660
|
+
.seed-pagination-page-item > [data-pagination-page-item-label] {
|
|
8661
|
+
text-overflow: ellipsis;
|
|
8662
|
+
white-space: nowrap;
|
|
8663
|
+
min-width: 0;
|
|
8664
|
+
max-width: 100%;
|
|
8665
|
+
display: block;
|
|
8666
|
+
overflow: hidden;
|
|
8667
|
+
}
|
|
8668
|
+
|
|
8669
|
+
.seed-pagination-page-item {
|
|
8670
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8671
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8672
|
+
}
|
|
8673
|
+
|
|
8674
|
+
.seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
|
|
8675
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8676
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8677
|
+
}
|
|
8678
|
+
|
|
8679
|
+
.seed-pagination-page-item {
|
|
8680
|
+
scale: 1;
|
|
8681
|
+
}
|
|
8682
|
+
|
|
8683
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8684
|
+
.seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8685
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8686
|
+
}
|
|
8687
|
+
}
|
|
8688
|
+
|
|
8689
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8690
|
+
.seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8691
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
8692
|
+
}
|
|
8693
|
+
}
|
|
8694
|
+
|
|
8695
|
+
.seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8696
|
+
scale: var(--seed-scale-s97);
|
|
8697
|
+
}
|
|
8698
|
+
|
|
8699
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
|
|
8700
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
8701
|
+
}
|
|
8702
|
+
|
|
8703
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
|
|
8704
|
+
background-color: var(--seed-color-bg-neutral-inverted);
|
|
8705
|
+
}
|
|
8706
|
+
|
|
8707
|
+
@media (hover: hover) and (pointer: fine) {
|
|
8708
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8709
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
8710
|
+
}
|
|
8711
|
+
}
|
|
8712
|
+
|
|
8713
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
8714
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
|
|
8715
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
8716
|
+
}
|
|
8717
|
+
}
|
|
8718
|
+
|
|
8719
|
+
.seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
|
|
8720
|
+
cursor: not-allowed;
|
|
8721
|
+
color: var(--seed-color-fg-disabled);
|
|
8722
|
+
}
|
|
8723
|
+
|
|
8724
|
+
.seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
|
|
8725
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8726
|
+
}
|
|
8727
|
+
|
|
8728
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
|
|
8729
|
+
color: var(--seed-color-fg-disabled);
|
|
8730
|
+
}
|
|
8731
|
+
|
|
8732
|
+
.seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
|
|
8733
|
+
background-color: var(--seed-color-bg-disabled);
|
|
8734
|
+
}
|
|
8735
|
+
|
|
8736
|
+
.seed-pagination-page-item {
|
|
8737
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8738
|
+
}
|
|
8739
|
+
|
|
8306
8740
|
.seed-progress-circle__root {
|
|
8307
8741
|
box-sizing: border-box;
|
|
8308
8742
|
display: inline-flex;
|
|
@@ -8355,7 +8789,7 @@
|
|
|
8355
8789
|
}
|
|
8356
8790
|
|
|
8357
8791
|
.seed-pull-to-refresh__root {
|
|
8358
|
-
--ptr-size:
|
|
8792
|
+
--ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
|
|
8359
8793
|
--ptr-transition-duration: var(--seed-duration-d6);
|
|
8360
8794
|
height: 100%;
|
|
8361
8795
|
}
|
|
@@ -8389,7 +8823,7 @@
|
|
|
8389
8823
|
box-sizing: border-box;
|
|
8390
8824
|
cursor: pointer;
|
|
8391
8825
|
background-color: var(--seed-color-bg-transparent);
|
|
8392
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8826
|
+
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);
|
|
8393
8827
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8394
8828
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8395
8829
|
border: none;
|
|
@@ -8405,6 +8839,10 @@
|
|
|
8405
8839
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8406
8840
|
}
|
|
8407
8841
|
|
|
8842
|
+
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8843
|
+
scale: var(--seed-feedback-scale);
|
|
8844
|
+
}
|
|
8845
|
+
|
|
8408
8846
|
@media (hover: hover) and (pointer: fine) {
|
|
8409
8847
|
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8410
8848
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8472,7 +8910,7 @@
|
|
|
8472
8910
|
box-sizing: border-box;
|
|
8473
8911
|
cursor: pointer;
|
|
8474
8912
|
background-color: var(--seed-color-bg-transparent);
|
|
8475
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8913
|
+
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);
|
|
8476
8914
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8477
8915
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8478
8916
|
border: none;
|
|
@@ -8488,6 +8926,10 @@
|
|
|
8488
8926
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8489
8927
|
}
|
|
8490
8928
|
|
|
8929
|
+
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8930
|
+
scale: var(--seed-feedback-scale);
|
|
8931
|
+
}
|
|
8932
|
+
|
|
8491
8933
|
@media (hover: hover) and (pointer: fine) {
|
|
8492
8934
|
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8493
8935
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8715,9 +9157,6 @@
|
|
|
8715
9157
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
8716
9158
|
border-radius: var(--seed-radius-full);
|
|
8717
9159
|
margin-top: var(--radiomark-margin-top, 0);
|
|
8718
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8719
|
-
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
8720
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
8721
9160
|
flex: none;
|
|
8722
9161
|
justify-content: center;
|
|
8723
9162
|
align-items: center;
|
|
@@ -8725,6 +9164,16 @@
|
|
|
8725
9164
|
position: relative;
|
|
8726
9165
|
}
|
|
8727
9166
|
|
|
9167
|
+
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9168
|
+
scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
|
|
9169
|
+
}
|
|
9170
|
+
|
|
9171
|
+
.seed-radiomark__root {
|
|
9172
|
+
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);
|
|
9173
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
9174
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
9175
|
+
}
|
|
9176
|
+
|
|
8728
9177
|
@media (hover: hover) and (pointer: fine) {
|
|
8729
9178
|
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8730
9179
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8864,8 +9313,12 @@
|
|
|
8864
9313
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8865
9314
|
}
|
|
8866
9315
|
|
|
9316
|
+
.seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9317
|
+
scale: var(--seed-feedback-scale);
|
|
9318
|
+
}
|
|
9319
|
+
|
|
8867
9320
|
.seed-reaction-button {
|
|
8868
|
-
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);
|
|
9321
|
+
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);
|
|
8869
9322
|
background: var(--seed-color-bg-transparent);
|
|
8870
9323
|
font-weight: var(--seed-font-weight-medium);
|
|
8871
9324
|
color: var(--seed-color-fg-neutral);
|
|
@@ -9136,7 +9589,7 @@
|
|
|
9136
9589
|
}
|
|
9137
9590
|
|
|
9138
9591
|
.seed-select__scrollArea {
|
|
9139
|
-
max-height: min(480px, var(--seed-select-available-height, 480px));
|
|
9592
|
+
max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
|
|
9140
9593
|
box-sizing: border-box;
|
|
9141
9594
|
padding-block: var(--seed-dimension-x2);
|
|
9142
9595
|
gap: var(--seed-dimension-x2);
|
|
@@ -9619,7 +10072,7 @@
|
|
|
9619
10072
|
cursor: pointer;
|
|
9620
10073
|
border-radius: var(--seed-radius-r3);
|
|
9621
10074
|
background-color: var(--seed-color-bg-transparent);
|
|
9622
|
-
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-
|
|
10075
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
9623
10076
|
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
9624
10077
|
flex-direction: column;
|
|
9625
10078
|
display: flex;
|
|
@@ -9656,11 +10109,11 @@
|
|
|
9656
10109
|
|
|
9657
10110
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
|
|
9658
10111
|
cursor: not-allowed;
|
|
9659
|
-
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-
|
|
10112
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
9660
10113
|
}
|
|
9661
10114
|
|
|
9662
10115
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
|
|
9663
|
-
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-
|
|
10116
|
+
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
|
|
9664
10117
|
}
|
|
9665
10118
|
|
|
9666
10119
|
.seed-select-box__root {
|
|
@@ -10354,11 +10807,6 @@
|
|
|
10354
10807
|
top: calc(28px + var(--seed-safe-area-top));
|
|
10355
10808
|
border-radius: var(--seed-radius-r3);
|
|
10356
10809
|
cursor: pointer;
|
|
10357
|
-
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
10358
|
-
--seed-icon-size: 22px;
|
|
10359
|
-
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
10360
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
10361
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
10362
10810
|
border: none;
|
|
10363
10811
|
justify-content: center;
|
|
10364
10812
|
align-items: center;
|
|
@@ -10369,6 +10817,18 @@
|
|
|
10369
10817
|
right: 24px;
|
|
10370
10818
|
}
|
|
10371
10819
|
|
|
10820
|
+
.seed-side-panel__closeButton:is(:active, [data-active]) {
|
|
10821
|
+
scale: var(--seed-feedback-scale);
|
|
10822
|
+
}
|
|
10823
|
+
|
|
10824
|
+
.seed-side-panel__closeButton {
|
|
10825
|
+
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);
|
|
10826
|
+
--seed-icon-size: 22px;
|
|
10827
|
+
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
10828
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
10829
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
10830
|
+
}
|
|
10831
|
+
|
|
10372
10832
|
.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
10373
10833
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
10374
10834
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -10784,7 +11244,7 @@
|
|
|
10784
11244
|
background: var(--seed-color-bg-neutral-inverted);
|
|
10785
11245
|
border-radius: var(--seed-radius-r2);
|
|
10786
11246
|
width: 100%;
|
|
10787
|
-
max-width:
|
|
11247
|
+
max-width: 464px;
|
|
10788
11248
|
padding-inline: var(--seed-dimension-x2_5);
|
|
10789
11249
|
padding-block: var(--seed-dimension-x2_5);
|
|
10790
11250
|
min-height: 44px;
|
|
@@ -10865,6 +11325,14 @@
|
|
|
10865
11325
|
position: relative;
|
|
10866
11326
|
}
|
|
10867
11327
|
|
|
11328
|
+
.seed-snackbar__actionButton:is(:active, [data-active]) {
|
|
11329
|
+
scale: var(--seed-feedback-scale);
|
|
11330
|
+
}
|
|
11331
|
+
|
|
11332
|
+
.seed-snackbar__actionButton {
|
|
11333
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
11334
|
+
}
|
|
11335
|
+
|
|
10868
11336
|
.seed-snackbar__actionButton:after {
|
|
10869
11337
|
content: "";
|
|
10870
11338
|
top: 50%;
|
|
@@ -10981,11 +11449,15 @@
|
|
|
10981
11449
|
border-radius: var(--seed-radius-full);
|
|
10982
11450
|
background: var(--seed-color-palette-gray-600);
|
|
10983
11451
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
10984
|
-
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);
|
|
11452
|
+
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);
|
|
10985
11453
|
display: block;
|
|
10986
11454
|
position: relative;
|
|
10987
11455
|
}
|
|
10988
11456
|
|
|
11457
|
+
.seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
11458
|
+
scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
|
|
11459
|
+
}
|
|
11460
|
+
|
|
10989
11461
|
.seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
|
|
10990
11462
|
opacity: .38;
|
|
10991
11463
|
}
|
|
@@ -11171,8 +11643,12 @@
|
|
|
11171
11643
|
bottom: 0;
|
|
11172
11644
|
}
|
|
11173
11645
|
|
|
11646
|
+
.seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
11647
|
+
scale: var(--seed-feedback-scale);
|
|
11648
|
+
}
|
|
11649
|
+
|
|
11174
11650
|
.seed-tabs__trigger {
|
|
11175
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11651
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
11176
11652
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
11177
11653
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
11178
11654
|
}
|
|
@@ -12664,8 +13140,12 @@
|
|
|
12664
13140
|
cursor: not-allowed;
|
|
12665
13141
|
}
|
|
12666
13142
|
|
|
13143
|
+
.seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
13144
|
+
scale: var(--seed-feedback-scale);
|
|
13145
|
+
}
|
|
13146
|
+
|
|
12667
13147
|
.seed-toggle-button {
|
|
12668
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
13148
|
+
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);
|
|
12669
13149
|
font-weight: var(--seed-font-weight-bold);
|
|
12670
13150
|
}
|
|
12671
13151
|
|
|
@@ -12904,7 +13384,7 @@
|
|
|
12904
13384
|
|
|
12905
13385
|
.seed-wheel-picker__selectionIndicator {
|
|
12906
13386
|
z-index: 0;
|
|
12907
|
-
inset-inline:
|
|
13387
|
+
inset-inline: var(--seed-dimension-x4);
|
|
12908
13388
|
height: var(--seed-wheel-picker-item-size);
|
|
12909
13389
|
pointer-events: none;
|
|
12910
13390
|
position: absolute;
|
|
@@ -12912,6 +13392,145 @@
|
|
|
12912
13392
|
transform: translateY(-50%);
|
|
12913
13393
|
}
|
|
12914
13394
|
|
|
13395
|
+
.seed-wheel-picker-public__root {
|
|
13396
|
+
background-color: var(--seed-color-bg-layer-floating);
|
|
13397
|
+
--seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
|
|
13398
|
+
--seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
|
|
13399
|
+
--seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
|
|
13400
|
+
width: 100%;
|
|
13401
|
+
position: relative;
|
|
13402
|
+
overflow: hidden;
|
|
13403
|
+
}
|
|
13404
|
+
|
|
13405
|
+
.seed-wheel-picker-public__scrollFog {
|
|
13406
|
+
z-index: 1;
|
|
13407
|
+
height: 100%;
|
|
13408
|
+
position: relative;
|
|
13409
|
+
overflow: hidden;
|
|
13410
|
+
}
|
|
13411
|
+
|
|
13412
|
+
.seed-wheel-picker-public__columns {
|
|
13413
|
+
justify-content: center;
|
|
13414
|
+
width: 100%;
|
|
13415
|
+
height: 100%;
|
|
13416
|
+
display: flex;
|
|
13417
|
+
}
|
|
13418
|
+
|
|
13419
|
+
.seed-wheel-picker-public__column {
|
|
13420
|
+
box-sizing: border-box;
|
|
13421
|
+
overscroll-behavior-x: none;
|
|
13422
|
+
overscroll-behavior-y: contain;
|
|
13423
|
+
scroll-snap-type: y mandatory;
|
|
13424
|
+
scrollbar-width: none;
|
|
13425
|
+
-ms-overflow-style: none;
|
|
13426
|
+
touch-action: pan-y;
|
|
13427
|
+
cursor: grab;
|
|
13428
|
+
width: max-content;
|
|
13429
|
+
height: 100%;
|
|
13430
|
+
padding-block: var(--seed-wheel-picker-public-center-offset);
|
|
13431
|
+
outline: none;
|
|
13432
|
+
flex: none;
|
|
13433
|
+
overflow: hidden auto;
|
|
13434
|
+
}
|
|
13435
|
+
|
|
13436
|
+
.seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
|
|
13437
|
+
cursor: default;
|
|
13438
|
+
--seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
|
|
13439
|
+
--seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
|
|
13440
|
+
overflow-y: hidden;
|
|
13441
|
+
}
|
|
13442
|
+
|
|
13443
|
+
.seed-wheel-picker-public__column[data-wheel-picker-dragging] {
|
|
13444
|
+
cursor: grabbing;
|
|
13445
|
+
scroll-snap-type: none;
|
|
13446
|
+
}
|
|
13447
|
+
|
|
13448
|
+
.seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
|
|
13449
|
+
scroll-snap-type: none;
|
|
13450
|
+
}
|
|
13451
|
+
|
|
13452
|
+
.seed-wheel-picker-public__column::-webkit-scrollbar {
|
|
13453
|
+
display: none;
|
|
13454
|
+
}
|
|
13455
|
+
|
|
13456
|
+
.seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
|
|
13457
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
13458
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
13459
|
+
border-radius: var(--seed-radius-r2);
|
|
13460
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
13461
|
+
}
|
|
13462
|
+
|
|
13463
|
+
.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]) {
|
|
13464
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
13465
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
13466
|
+
}
|
|
13467
|
+
|
|
13468
|
+
.seed-wheel-picker-public__item {
|
|
13469
|
+
height: var(--seed-wheel-picker-public-item-size);
|
|
13470
|
+
min-height: var(--seed-wheel-picker-public-item-size);
|
|
13471
|
+
color: var(--seed-wheel-picker-public-item-color);
|
|
13472
|
+
scroll-snap-align: center;
|
|
13473
|
+
-webkit-user-select: none;
|
|
13474
|
+
user-select: none;
|
|
13475
|
+
justify-content: center;
|
|
13476
|
+
align-items: center;
|
|
13477
|
+
display: flex;
|
|
13478
|
+
}
|
|
13479
|
+
|
|
13480
|
+
.seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
|
|
13481
|
+
color: #0000;
|
|
13482
|
+
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%);
|
|
13483
|
+
-webkit-text-fill-color: transparent;
|
|
13484
|
+
-webkit-background-clip: text;
|
|
13485
|
+
background-clip: text;
|
|
13486
|
+
}
|
|
13487
|
+
|
|
13488
|
+
.seed-wheel-picker-public__itemLabel {
|
|
13489
|
+
box-sizing: border-box;
|
|
13490
|
+
height: 100%;
|
|
13491
|
+
padding-inline: var(--seed-dimension-x4);
|
|
13492
|
+
font-weight: var(--seed-font-weight-medium);
|
|
13493
|
+
white-space: nowrap;
|
|
13494
|
+
flex-shrink: 0;
|
|
13495
|
+
justify-content: center;
|
|
13496
|
+
align-items: center;
|
|
13497
|
+
display: flex;
|
|
13498
|
+
}
|
|
13499
|
+
|
|
13500
|
+
.seed-wheel-picker-public__selectionIndicator {
|
|
13501
|
+
z-index: 0;
|
|
13502
|
+
inset-inline: var(--seed-dimension-x4);
|
|
13503
|
+
height: var(--seed-wheel-picker-public-item-size);
|
|
13504
|
+
border-radius: var(--seed-radius-r2);
|
|
13505
|
+
background-color: var(--seed-color-bg-neutral-weak);
|
|
13506
|
+
pointer-events: none;
|
|
13507
|
+
position: absolute;
|
|
13508
|
+
top: 50%;
|
|
13509
|
+
transform: translateY(-50%);
|
|
13510
|
+
}
|
|
13511
|
+
|
|
13512
|
+
.seed-wheel-picker-public__root--size_small {
|
|
13513
|
+
height: var(--seed-wheel-picker-public-viewport-size, 180px);
|
|
13514
|
+
--seed-wheel-picker-public-item-size: 36px;
|
|
13515
|
+
--seed-wheel-picker-public-scroll-fog-max-height: 108px;
|
|
13516
|
+
}
|
|
13517
|
+
|
|
13518
|
+
.seed-wheel-picker-public__itemLabel--size_small {
|
|
13519
|
+
font-size: var(--seed-font-size-t7-static);
|
|
13520
|
+
line-height: var(--seed-line-height-t7-static);
|
|
13521
|
+
}
|
|
13522
|
+
|
|
13523
|
+
.seed-wheel-picker-public__root--size_medium {
|
|
13524
|
+
height: var(--seed-wheel-picker-public-viewport-size, 220px);
|
|
13525
|
+
--seed-wheel-picker-public-item-size: 44px;
|
|
13526
|
+
--seed-wheel-picker-public-scroll-fog-max-height: 132px;
|
|
13527
|
+
}
|
|
13528
|
+
|
|
13529
|
+
.seed-wheel-picker-public__itemLabel--size_medium {
|
|
13530
|
+
font-size: var(--seed-font-size-t10-static);
|
|
13531
|
+
line-height: var(--seed-line-height-t10-static);
|
|
13532
|
+
}
|
|
13533
|
+
|
|
12915
13534
|
@keyframes seed-enter {
|
|
12916
13535
|
from {
|
|
12917
13536
|
opacity: var(--seed-enter-opacity, 1);
|