@seed-design/css 2.5.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.css +700 -89
- package/all.layered.css +700 -89
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/base.css +15 -0
- package/base.layered.css +15 -0
- package/base.layered.min.css +1 -1
- package/base.min.css +1 -1
- package/breakpoints/index.mjs +5 -0
- package/package.json +6 -1
- package/recipes/accordion.css +1 -1
- package/recipes/accordion.layered.css +1 -1
- package/recipes/action-button.css +3 -13
- package/recipes/action-button.layered.css +4 -17
- package/recipes/attachment-input-item.css +15 -3
- package/recipes/attachment-input-item.layered.css +24 -8
- package/recipes/attachment-input-trigger.css +6 -1
- package/recipes/attachment-input-trigger.layered.css +10 -3
- package/recipes/bottom-sheet.css +7 -0
- package/recipes/bottom-sheet.layered.css +11 -2
- package/recipes/callout.css +43 -4
- package/recipes/callout.layered.css +57 -6
- package/recipes/checkmark.css +6 -1
- package/recipes/checkmark.layered.css +10 -3
- package/recipes/chip-tabs.css +6 -1
- package/recipes/chip-tabs.layered.css +10 -3
- package/recipes/chip.css +6 -3
- package/recipes/chip.layered.css +10 -5
- package/recipes/content-dialog.css +4 -1
- package/recipes/content-dialog.layered.css +5 -1
- package/recipes/contextual-floating-button.css +6 -1
- package/recipes/contextual-floating-button.layered.css +8 -1
- package/recipes/floating-action-button.css +6 -1
- package/recipes/floating-action-button.layered.css +8 -1
- package/recipes/help-bubble.css +8 -2
- package/recipes/help-bubble.layered.css +12 -4
- package/recipes/image-frame-reaction-button.css +6 -0
- package/recipes/image-frame-reaction-button.layered.css +8 -0
- package/recipes/input-button.css +6 -1
- package/recipes/input-button.layered.css +10 -3
- package/recipes/list-item.css +6 -0
- package/recipes/list-item.layered.css +6 -0
- package/recipes/menu-sheet.css +7 -1
- package/recipes/menu-sheet.layered.css +9 -1
- package/recipes/menu.css +1 -1
- package/recipes/menu.layered.css +1 -1
- package/recipes/page-banner.css +58 -4
- package/recipes/page-banner.layered.css +79 -8
- package/recipes/pagination-button.css +68 -0
- package/recipes/pagination-button.d.ts +19 -0
- package/recipes/pagination-button.layered.css +80 -0
- package/recipes/pagination-button.layered.mjs +22 -0
- package/recipes/pagination-button.mjs +22 -0
- package/recipes/pagination-page-item.css +99 -0
- package/recipes/pagination-page-item.d.ts +19 -0
- package/recipes/pagination-page-item.layered.css +118 -0
- package/recipes/pagination-page-item.layered.mjs +22 -0
- package/recipes/pagination-page-item.mjs +22 -0
- package/recipes/pull-to-refresh.css +1 -1
- package/recipes/pull-to-refresh.layered.css +1 -1
- package/recipes/quantity-picker.css +8 -2
- package/recipes/quantity-picker.layered.css +10 -2
- package/recipes/radiomark.css +6 -1
- package/recipes/radiomark.layered.css +10 -3
- package/recipes/reaction-button.css +4 -1
- package/recipes/reaction-button.layered.css +5 -1
- package/recipes/select-box.css +3 -3
- package/recipes/select-box.layered.css +3 -3
- package/recipes/select.css +1 -1
- package/recipes/select.layered.css +1 -1
- package/recipes/side-panel.css +6 -1
- package/recipes/side-panel.layered.css +12 -5
- package/recipes/snackbar.css +7 -1
- package/recipes/snackbar.layered.css +9 -1
- package/recipes/switchmark.css +4 -1
- package/recipes/switchmark.layered.css +5 -1
- package/recipes/tabs.css +4 -1
- package/recipes/tabs.layered.css +5 -1
- package/recipes/toggle-button.css +4 -1
- package/recipes/toggle-button.layered.css +5 -1
- package/recipes/wheel-picker-public.css +121 -0
- package/recipes/wheel-picker-public.d.ts +24 -0
- package/recipes/wheel-picker-public.layered.css +140 -0
- package/recipes/wheel-picker-public.layered.mjs +63 -0
- package/recipes/wheel-picker-public.mjs +63 -0
- package/recipes/wheel-picker.css +1 -1
- package/recipes/wheel-picker.layered.css +1 -1
- package/scale-feedback/index.d.ts +3 -0
- package/scale-feedback/index.mjs +33 -0
- package/vars/color/stroke.d.ts +3 -3
- package/vars/component/accordion-item.d.ts +1 -1
- package/vars/component/accordion-item.mjs +1 -1
- package/vars/component/action-button.d.ts +1 -23
- package/vars/component/action-button.mjs +1 -23
- package/vars/component/bottom-sheet.d.ts +1 -1
- package/vars/component/bottom-sheet.mjs +1 -1
- package/vars/component/callout-close-button.d.ts +81 -0
- package/vars/component/callout-close-button.mjs +63 -0
- package/vars/component/callout.d.ts +1 -2
- package/vars/component/callout.mjs +1 -2
- package/vars/component/checkbox.d.ts +3 -0
- package/vars/component/help-bubble.d.ts +4 -1
- package/vars/component/help-bubble.mjs +3 -1
- package/vars/component/index.d.ts +6 -1
- package/vars/component/index.mjs +6 -1
- package/vars/component/list-item.d.ts +2 -6
- package/vars/component/list-item.mjs +2 -5
- package/vars/component/page-banner-close-button.d.ts +133 -0
- package/vars/component/page-banner-close-button.mjs +99 -0
- package/vars/component/page-banner.d.ts +0 -1
- package/vars/component/page-banner.mjs +0 -1
- package/vars/component/pagination-button.d.ts +33 -0
- package/vars/component/pagination-button.mjs +33 -0
- package/vars/component/pagination-page-item.d.ts +54 -0
- package/vars/component/pagination-page-item.mjs +54 -0
- package/vars/component/radio.d.ts +3 -0
- package/vars/component/select-box.d.ts +2 -2
- package/vars/component/select-box.mjs +2 -2
- package/vars/component/snackbar.d.ts +1 -1
- package/vars/component/snackbar.mjs +1 -1
- package/vars/component/switch.d.ts +3 -0
- package/vars/component/switchmark.d.ts +2 -0
- package/vars/component/wheel-picker.d.ts +72 -0
- package/vars/component/wheel-picker.mjs +72 -0
package/all.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 {
|
|
@@ -5594,11 +5686,12 @@
|
|
|
5594
5686
|
align-items: center;
|
|
5595
5687
|
gap: var(--seed-dimension-x2_5);
|
|
5596
5688
|
border-radius: var(--seed-radius-r3);
|
|
5689
|
+
height: 80px;
|
|
5690
|
+
transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
5597
5691
|
--remove-button-mask-size: var(--seed-dimension-x6);
|
|
5598
5692
|
--remove-button-mask-offset: var(--seed-dimension-x1_5);
|
|
5599
5693
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5600
5694
|
outline-offset: var(--seed-dimension-x0_5);
|
|
5601
|
-
height: 80px;
|
|
5602
5695
|
display: flex;
|
|
5603
5696
|
position: relative;
|
|
5604
5697
|
}
|
|
@@ -5636,6 +5729,7 @@
|
|
|
5636
5729
|
}
|
|
5637
5730
|
|
|
5638
5731
|
.seed-attachment-input-item__root[aria-grabbed="true"] {
|
|
5732
|
+
scale: var(--seed-feedback-scale);
|
|
5639
5733
|
--remove-button-mask-size: 0px;
|
|
5640
5734
|
--remove-button-mask-offset: 0px;
|
|
5641
5735
|
}
|
|
@@ -5730,9 +5824,6 @@
|
|
|
5730
5824
|
font: inherit;
|
|
5731
5825
|
cursor: pointer;
|
|
5732
5826
|
border-radius: inherit;
|
|
5733
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5734
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5735
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5736
5827
|
background: none;
|
|
5737
5828
|
border: none;
|
|
5738
5829
|
flex-direction: column;
|
|
@@ -5742,6 +5833,16 @@
|
|
|
5742
5833
|
display: flex;
|
|
5743
5834
|
}
|
|
5744
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
|
+
|
|
5745
5846
|
.seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
|
|
5746
5847
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5747
5848
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -5763,9 +5864,6 @@
|
|
|
5763
5864
|
background-color: var(--seed-color-bg-layer-default);
|
|
5764
5865
|
border-radius: var(--seed-radius-full);
|
|
5765
5866
|
cursor: pointer;
|
|
5766
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5767
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5768
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5769
5867
|
border: none;
|
|
5770
5868
|
justify-content: center;
|
|
5771
5869
|
align-items: center;
|
|
@@ -5774,6 +5872,16 @@
|
|
|
5774
5872
|
position: absolute;
|
|
5775
5873
|
}
|
|
5776
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
|
+
|
|
5777
5885
|
.seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
|
|
5778
5886
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5779
5887
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -5838,7 +5946,7 @@
|
|
|
5838
5946
|
|
|
5839
5947
|
.seed-attachment-input-item__root--type_image {
|
|
5840
5948
|
width: 80px;
|
|
5841
|
-
transition: opacity .2s;
|
|
5949
|
+
transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
|
|
5842
5950
|
}
|
|
5843
5951
|
|
|
5844
5952
|
.seed-attachment-input-item__root--type_image:before {
|
|
@@ -5896,9 +6004,6 @@
|
|
|
5896
6004
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
5897
6005
|
cursor: pointer;
|
|
5898
6006
|
border-radius: var(--seed-radius-r3);
|
|
5899
|
-
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5900
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5901
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5902
6007
|
background-color: #0000;
|
|
5903
6008
|
border: none;
|
|
5904
6009
|
flex-direction: column;
|
|
@@ -5907,6 +6012,16 @@
|
|
|
5907
6012
|
display: flex;
|
|
5908
6013
|
}
|
|
5909
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
|
+
|
|
5910
6025
|
.seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
|
|
5911
6026
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5912
6027
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6003,11 +6118,18 @@
|
|
|
6003
6118
|
font-size: var(--seed-font-size-t5);
|
|
6004
6119
|
line-height: var(--seed-line-height-t5);
|
|
6005
6120
|
font-weight: var(--seed-font-weight-bold);
|
|
6006
|
-
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);
|
|
6007
6121
|
position: relative;
|
|
6008
6122
|
overflow: hidden;
|
|
6009
6123
|
}
|
|
6010
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
|
+
|
|
6011
6133
|
@media (hover: hover) and (pointer: fine) {
|
|
6012
6134
|
.seed-floating-action-button__root:is(:hover, [data-hover]) {
|
|
6013
6135
|
background: var(--seed-color-bg-brand-solid-pressed);
|
|
@@ -6127,11 +6249,12 @@
|
|
|
6127
6249
|
}
|
|
6128
6250
|
|
|
6129
6251
|
.seed-help-bubble__content {
|
|
6252
|
+
box-sizing: border-box;
|
|
6130
6253
|
background: var(--seed-color-bg-neutral-inverted);
|
|
6131
6254
|
padding-inline: var(--seed-dimension-x3);
|
|
6132
6255
|
padding-block: var(--seed-dimension-x2_5);
|
|
6133
6256
|
border-radius: var(--seed-radius-r3);
|
|
6134
|
-
--seed-box-max-width-base:
|
|
6257
|
+
--seed-box-max-width-base: 280px;
|
|
6135
6258
|
--seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
|
|
6136
6259
|
--seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
|
|
6137
6260
|
--seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
|
|
@@ -6218,9 +6341,6 @@
|
|
|
6218
6341
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
6219
6342
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
6220
6343
|
border-radius: var(--seed-radius-r3);
|
|
6221
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6222
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6223
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6224
6344
|
background: none;
|
|
6225
6345
|
border: none;
|
|
6226
6346
|
justify-content: center;
|
|
@@ -6228,6 +6348,16 @@
|
|
|
6228
6348
|
display: flex;
|
|
6229
6349
|
}
|
|
6230
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
|
+
|
|
6231
6361
|
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6232
6362
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6233
6363
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -6334,6 +6464,14 @@
|
|
|
6334
6464
|
position: relative;
|
|
6335
6465
|
}
|
|
6336
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
|
+
|
|
6337
6475
|
.seed-image-frame-reaction-button__root:before {
|
|
6338
6476
|
content: "";
|
|
6339
6477
|
inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
@@ -6680,14 +6818,21 @@
|
|
|
6680
6818
|
.seed-input-button__clearButton {
|
|
6681
6819
|
cursor: pointer;
|
|
6682
6820
|
border-radius: var(--seed-radius-full);
|
|
6683
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6684
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6685
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
6686
6821
|
background-color: #0000;
|
|
6687
6822
|
border: none;
|
|
6688
6823
|
padding: 0;
|
|
6689
6824
|
}
|
|
6690
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
|
+
|
|
6691
6836
|
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
|
|
6692
6837
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6693
6838
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -6989,6 +7134,9 @@
|
|
|
6989
7134
|
--seed-box-padding-right: var(--seed-box-padding-right-base, initial);
|
|
6990
7135
|
padding-right: var(--seed-box-padding-right);
|
|
6991
7136
|
--seed-focus-ring: none;
|
|
7137
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7138
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7139
|
+
--seed-switchmark-feedback-scale: 1;
|
|
6992
7140
|
--seed-icon-size: 22px;
|
|
6993
7141
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
6994
7142
|
flex-shrink: 0;
|
|
@@ -7012,6 +7160,9 @@
|
|
|
7012
7160
|
align-items: center;
|
|
7013
7161
|
gap: var(--seed-box-gap);
|
|
7014
7162
|
--seed-focus-ring: none;
|
|
7163
|
+
--seed-checkmark-feedback-scale: 1;
|
|
7164
|
+
--seed-radiomark-feedback-scale: 1;
|
|
7165
|
+
--seed-switchmark-feedback-scale: 1;
|
|
7015
7166
|
font-size: var(--seed-font-size-t5);
|
|
7016
7167
|
line-height: var(--seed-line-height-t5);
|
|
7017
7168
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -7337,7 +7488,7 @@
|
|
|
7337
7488
|
}
|
|
7338
7489
|
|
|
7339
7490
|
.seed-menu__scrollArea {
|
|
7340
|
-
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)));
|
|
7341
7492
|
box-sizing: border-box;
|
|
7342
7493
|
padding-block: var(--seed-dimension-x2);
|
|
7343
7494
|
gap: var(--seed-dimension-x2);
|
|
@@ -7628,6 +7779,7 @@
|
|
|
7628
7779
|
word-break: break-all;
|
|
7629
7780
|
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
|
|
7630
7781
|
background: var(--seed-color-bg-layer-floating);
|
|
7782
|
+
max-width: 480px;
|
|
7631
7783
|
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
7632
7784
|
padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
|
|
7633
7785
|
padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
|
|
@@ -7718,13 +7870,20 @@
|
|
|
7718
7870
|
font-size: var(--seed-font-size-t5);
|
|
7719
7871
|
line-height: var(--seed-line-height-t5);
|
|
7720
7872
|
font-weight: var(--seed-font-weight-medium);
|
|
7721
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7722
7873
|
border: none;
|
|
7723
7874
|
justify-content: center;
|
|
7724
7875
|
align-items: center;
|
|
7725
7876
|
display: flex;
|
|
7726
7877
|
}
|
|
7727
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
|
+
|
|
7728
7887
|
@media (hover: hover) and (pointer: fine) {
|
|
7729
7888
|
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
|
|
7730
7889
|
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
@@ -8028,15 +8187,22 @@
|
|
|
8028
8187
|
line-height: var(--seed-line-height-t3);
|
|
8029
8188
|
font-weight: var(--seed-font-weight-bold);
|
|
8030
8189
|
border-radius: var(--seed-radius-r1);
|
|
8031
|
-
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8032
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8033
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8034
8190
|
background-color: #0000;
|
|
8035
8191
|
border: none;
|
|
8036
8192
|
align-items: center;
|
|
8037
8193
|
display: flex;
|
|
8038
8194
|
}
|
|
8039
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
|
+
|
|
8040
8206
|
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
|
|
8041
8207
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8042
8208
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
@@ -8048,12 +8214,10 @@
|
|
|
8048
8214
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
8049
8215
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
8050
8216
|
--seed-suffix-icon-margin-left: initial;
|
|
8217
|
+
background-color: var(--seed-color-bg-transparent);
|
|
8051
8218
|
cursor: pointer;
|
|
8052
|
-
border-radius: var(--seed-radius-
|
|
8053
|
-
|
|
8054
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8055
|
-
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8056
|
-
background-color: #0000;
|
|
8219
|
+
border-radius: var(--seed-radius-r2);
|
|
8220
|
+
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
8057
8221
|
border: none;
|
|
8058
8222
|
flex-grow: 0;
|
|
8059
8223
|
flex-shrink: 0;
|
|
@@ -8064,11 +8228,33 @@
|
|
|
8064
8228
|
display: flex;
|
|
8065
8229
|
}
|
|
8066
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
|
+
|
|
8067
8241
|
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
8068
8242
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8069
8243
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
8070
8244
|
}
|
|
8071
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
|
+
|
|
8072
8258
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
8073
8259
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
8074
8260
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8091,6 +8277,10 @@
|
|
|
8091
8277
|
color: var(--seed-color-fg-neutral);
|
|
8092
8278
|
}
|
|
8093
8279
|
|
|
8280
|
+
.seed-page-banner__closeButton--tone_neutral-variant_weak {
|
|
8281
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8282
|
+
}
|
|
8283
|
+
|
|
8094
8284
|
.seed-page-banner__root--tone_neutral-variant_solid {
|
|
8095
8285
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
8096
8286
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
@@ -8113,6 +8303,10 @@
|
|
|
8113
8303
|
color: var(--seed-color-fg-neutral-inverted);
|
|
8114
8304
|
}
|
|
8115
8305
|
|
|
8306
|
+
.seed-page-banner__closeButton--tone_neutral-variant_solid {
|
|
8307
|
+
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
8308
|
+
}
|
|
8309
|
+
|
|
8116
8310
|
.seed-page-banner__root--tone_informative-variant_weak {
|
|
8117
8311
|
background-color: var(--seed-color-bg-informative-weak);
|
|
8118
8312
|
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
@@ -8135,6 +8329,10 @@
|
|
|
8135
8329
|
color: var(--seed-color-fg-informative-contrast);
|
|
8136
8330
|
}
|
|
8137
8331
|
|
|
8332
|
+
.seed-page-banner__closeButton--tone_informative-variant_weak {
|
|
8333
|
+
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
8334
|
+
}
|
|
8335
|
+
|
|
8138
8336
|
.seed-page-banner__root--tone_informative-variant_solid {
|
|
8139
8337
|
background-color: var(--seed-color-bg-informative-solid);
|
|
8140
8338
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8157,6 +8355,10 @@
|
|
|
8157
8355
|
color: var(--seed-color-palette-static-white);
|
|
8158
8356
|
}
|
|
8159
8357
|
|
|
8358
|
+
.seed-page-banner__closeButton--tone_informative-variant_solid {
|
|
8359
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8360
|
+
}
|
|
8361
|
+
|
|
8160
8362
|
.seed-page-banner__root--tone_positive-variant_weak {
|
|
8161
8363
|
background-color: var(--seed-color-bg-positive-weak);
|
|
8162
8364
|
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
@@ -8179,6 +8381,10 @@
|
|
|
8179
8381
|
color: var(--seed-color-fg-positive-contrast);
|
|
8180
8382
|
}
|
|
8181
8383
|
|
|
8384
|
+
.seed-page-banner__closeButton--tone_positive-variant_weak {
|
|
8385
|
+
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
8386
|
+
}
|
|
8387
|
+
|
|
8182
8388
|
.seed-page-banner__root--tone_positive-variant_solid {
|
|
8183
8389
|
background-color: var(--seed-color-bg-positive-solid);
|
|
8184
8390
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8201,6 +8407,10 @@
|
|
|
8201
8407
|
color: var(--seed-color-palette-static-white);
|
|
8202
8408
|
}
|
|
8203
8409
|
|
|
8410
|
+
.seed-page-banner__closeButton--tone_positive-variant_solid {
|
|
8411
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8412
|
+
}
|
|
8413
|
+
|
|
8204
8414
|
.seed-page-banner__root--tone_warning-variant_weak {
|
|
8205
8415
|
background-color: var(--seed-color-bg-warning-weak);
|
|
8206
8416
|
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
@@ -8223,6 +8433,10 @@
|
|
|
8223
8433
|
color: var(--seed-color-fg-warning-contrast);
|
|
8224
8434
|
}
|
|
8225
8435
|
|
|
8436
|
+
.seed-page-banner__closeButton--tone_warning-variant_weak {
|
|
8437
|
+
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
8438
|
+
}
|
|
8439
|
+
|
|
8226
8440
|
.seed-page-banner__root--tone_warning-variant_solid {
|
|
8227
8441
|
background-color: var(--seed-color-bg-warning-solid);
|
|
8228
8442
|
--seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
@@ -8245,6 +8459,10 @@
|
|
|
8245
8459
|
color: var(--seed-color-palette-static-black-alpha-900);
|
|
8246
8460
|
}
|
|
8247
8461
|
|
|
8462
|
+
.seed-page-banner__closeButton--tone_warning-variant_solid {
|
|
8463
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
8464
|
+
}
|
|
8465
|
+
|
|
8248
8466
|
.seed-page-banner__root--tone_critical-variant_weak {
|
|
8249
8467
|
background-color: var(--seed-color-bg-critical-weak);
|
|
8250
8468
|
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
@@ -8267,6 +8485,10 @@
|
|
|
8267
8485
|
color: var(--seed-color-fg-critical-contrast);
|
|
8268
8486
|
}
|
|
8269
8487
|
|
|
8488
|
+
.seed-page-banner__closeButton--tone_critical-variant_weak {
|
|
8489
|
+
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
8490
|
+
}
|
|
8491
|
+
|
|
8270
8492
|
.seed-page-banner__root--tone_critical-variant_solid {
|
|
8271
8493
|
background-color: var(--seed-color-bg-critical-solid);
|
|
8272
8494
|
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
@@ -8289,6 +8511,10 @@
|
|
|
8289
8511
|
color: var(--seed-color-palette-static-white);
|
|
8290
8512
|
}
|
|
8291
8513
|
|
|
8514
|
+
.seed-page-banner__closeButton--tone_critical-variant_solid {
|
|
8515
|
+
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
8516
|
+
}
|
|
8517
|
+
|
|
8292
8518
|
.seed-page-banner__root--tone_magic-variant_weak {
|
|
8293
8519
|
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
|
|
8294
8520
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
@@ -8311,6 +8537,206 @@
|
|
|
8311
8537
|
color: var(--seed-color-fg-neutral);
|
|
8312
8538
|
}
|
|
8313
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
|
+
|
|
8314
8740
|
.seed-progress-circle__root {
|
|
8315
8741
|
box-sizing: border-box;
|
|
8316
8742
|
display: inline-flex;
|
|
@@ -8363,7 +8789,7 @@
|
|
|
8363
8789
|
}
|
|
8364
8790
|
|
|
8365
8791
|
.seed-pull-to-refresh__root {
|
|
8366
|
-
--ptr-size:
|
|
8792
|
+
--ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
|
|
8367
8793
|
--ptr-transition-duration: var(--seed-duration-d6);
|
|
8368
8794
|
height: 100%;
|
|
8369
8795
|
}
|
|
@@ -8397,7 +8823,7 @@
|
|
|
8397
8823
|
box-sizing: border-box;
|
|
8398
8824
|
cursor: pointer;
|
|
8399
8825
|
background-color: var(--seed-color-bg-transparent);
|
|
8400
|
-
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);
|
|
8401
8827
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8402
8828
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8403
8829
|
border: none;
|
|
@@ -8413,6 +8839,10 @@
|
|
|
8413
8839
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8414
8840
|
}
|
|
8415
8841
|
|
|
8842
|
+
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8843
|
+
scale: var(--seed-feedback-scale);
|
|
8844
|
+
}
|
|
8845
|
+
|
|
8416
8846
|
@media (hover: hover) and (pointer: fine) {
|
|
8417
8847
|
.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8418
8848
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8480,7 +8910,7 @@
|
|
|
8480
8910
|
box-sizing: border-box;
|
|
8481
8911
|
cursor: pointer;
|
|
8482
8912
|
background-color: var(--seed-color-bg-transparent);
|
|
8483
|
-
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);
|
|
8484
8914
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8485
8915
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8486
8916
|
border: none;
|
|
@@ -8496,6 +8926,10 @@
|
|
|
8496
8926
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8497
8927
|
}
|
|
8498
8928
|
|
|
8929
|
+
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
8930
|
+
scale: var(--seed-feedback-scale);
|
|
8931
|
+
}
|
|
8932
|
+
|
|
8499
8933
|
@media (hover: hover) and (pointer: fine) {
|
|
8500
8934
|
.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8501
8935
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8723,9 +9157,6 @@
|
|
|
8723
9157
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
8724
9158
|
border-radius: var(--seed-radius-full);
|
|
8725
9159
|
margin-top: var(--radiomark-margin-top, 0);
|
|
8726
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8727
|
-
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
8728
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
8729
9160
|
flex: none;
|
|
8730
9161
|
justify-content: center;
|
|
8731
9162
|
align-items: center;
|
|
@@ -8733,6 +9164,16 @@
|
|
|
8733
9164
|
position: relative;
|
|
8734
9165
|
}
|
|
8735
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
|
+
|
|
8736
9177
|
@media (hover: hover) and (pointer: fine) {
|
|
8737
9178
|
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
8738
9179
|
background-color: var(--seed-color-bg-transparent-pressed);
|
|
@@ -8872,8 +9313,12 @@
|
|
|
8872
9313
|
outline-offset: var(--seed-dimension-x0_5);
|
|
8873
9314
|
}
|
|
8874
9315
|
|
|
9316
|
+
.seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
9317
|
+
scale: var(--seed-feedback-scale);
|
|
9318
|
+
}
|
|
9319
|
+
|
|
8875
9320
|
.seed-reaction-button {
|
|
8876
|
-
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);
|
|
8877
9322
|
background: var(--seed-color-bg-transparent);
|
|
8878
9323
|
font-weight: var(--seed-font-weight-medium);
|
|
8879
9324
|
color: var(--seed-color-fg-neutral);
|
|
@@ -9144,7 +9589,7 @@
|
|
|
9144
9589
|
}
|
|
9145
9590
|
|
|
9146
9591
|
.seed-select__scrollArea {
|
|
9147
|
-
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)));
|
|
9148
9593
|
box-sizing: border-box;
|
|
9149
9594
|
padding-block: var(--seed-dimension-x2);
|
|
9150
9595
|
gap: var(--seed-dimension-x2);
|
|
@@ -9627,7 +10072,7 @@
|
|
|
9627
10072
|
cursor: pointer;
|
|
9628
10073
|
border-radius: var(--seed-radius-r3);
|
|
9629
10074
|
background-color: var(--seed-color-bg-transparent);
|
|
9630
|
-
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);
|
|
9631
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);
|
|
9632
10077
|
flex-direction: column;
|
|
9633
10078
|
display: flex;
|
|
@@ -9664,11 +10109,11 @@
|
|
|
9664
10109
|
|
|
9665
10110
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
|
|
9666
10111
|
cursor: not-allowed;
|
|
9667
|
-
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);
|
|
9668
10113
|
}
|
|
9669
10114
|
|
|
9670
10115
|
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
|
|
9671
|
-
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);
|
|
9672
10117
|
}
|
|
9673
10118
|
|
|
9674
10119
|
.seed-select-box__root {
|
|
@@ -10362,11 +10807,6 @@
|
|
|
10362
10807
|
top: calc(28px + var(--seed-safe-area-top));
|
|
10363
10808
|
border-radius: var(--seed-radius-r3);
|
|
10364
10809
|
cursor: pointer;
|
|
10365
|
-
transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
10366
|
-
--seed-icon-size: 22px;
|
|
10367
|
-
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
10368
|
-
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
10369
|
-
outline-offset: var(--seed-dimension-x0_5);
|
|
10370
10810
|
border: none;
|
|
10371
10811
|
justify-content: center;
|
|
10372
10812
|
align-items: center;
|
|
@@ -10377,6 +10817,18 @@
|
|
|
10377
10817
|
right: 24px;
|
|
10378
10818
|
}
|
|
10379
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
|
+
|
|
10380
10832
|
.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
10381
10833
|
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
10382
10834
|
outline-offset: var(--seed-dimension-x0_5);
|
|
@@ -10792,7 +11244,7 @@
|
|
|
10792
11244
|
background: var(--seed-color-bg-neutral-inverted);
|
|
10793
11245
|
border-radius: var(--seed-radius-r2);
|
|
10794
11246
|
width: 100%;
|
|
10795
|
-
max-width:
|
|
11247
|
+
max-width: 464px;
|
|
10796
11248
|
padding-inline: var(--seed-dimension-x2_5);
|
|
10797
11249
|
padding-block: var(--seed-dimension-x2_5);
|
|
10798
11250
|
min-height: 44px;
|
|
@@ -10873,6 +11325,14 @@
|
|
|
10873
11325
|
position: relative;
|
|
10874
11326
|
}
|
|
10875
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
|
+
|
|
10876
11336
|
.seed-snackbar__actionButton:after {
|
|
10877
11337
|
content: "";
|
|
10878
11338
|
top: 50%;
|
|
@@ -10989,11 +11449,15 @@
|
|
|
10989
11449
|
border-radius: var(--seed-radius-full);
|
|
10990
11450
|
background: var(--seed-color-palette-gray-600);
|
|
10991
11451
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
10992
|
-
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);
|
|
10993
11453
|
display: block;
|
|
10994
11454
|
position: relative;
|
|
10995
11455
|
}
|
|
10996
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
|
+
|
|
10997
11461
|
.seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
|
|
10998
11462
|
opacity: .38;
|
|
10999
11463
|
}
|
|
@@ -11179,8 +11643,12 @@
|
|
|
11179
11643
|
bottom: 0;
|
|
11180
11644
|
}
|
|
11181
11645
|
|
|
11646
|
+
.seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
11647
|
+
scale: var(--seed-feedback-scale);
|
|
11648
|
+
}
|
|
11649
|
+
|
|
11182
11650
|
.seed-tabs__trigger {
|
|
11183
|
-
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);
|
|
11184
11652
|
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
11185
11653
|
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
11186
11654
|
}
|
|
@@ -12672,8 +13140,12 @@
|
|
|
12672
13140
|
cursor: not-allowed;
|
|
12673
13141
|
}
|
|
12674
13142
|
|
|
13143
|
+
.seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
13144
|
+
scale: var(--seed-feedback-scale);
|
|
13145
|
+
}
|
|
13146
|
+
|
|
12675
13147
|
.seed-toggle-button {
|
|
12676
|
-
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);
|
|
12677
13149
|
font-weight: var(--seed-font-weight-bold);
|
|
12678
13150
|
}
|
|
12679
13151
|
|
|
@@ -12912,7 +13384,7 @@
|
|
|
12912
13384
|
|
|
12913
13385
|
.seed-wheel-picker__selectionIndicator {
|
|
12914
13386
|
z-index: 0;
|
|
12915
|
-
inset-inline:
|
|
13387
|
+
inset-inline: var(--seed-dimension-x4);
|
|
12916
13388
|
height: var(--seed-wheel-picker-item-size);
|
|
12917
13389
|
pointer-events: none;
|
|
12918
13390
|
position: absolute;
|
|
@@ -12920,6 +13392,145 @@
|
|
|
12920
13392
|
transform: translateY(-50%);
|
|
12921
13393
|
}
|
|
12922
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
|
+
|
|
12923
13534
|
@keyframes seed-enter {
|
|
12924
13535
|
from {
|
|
12925
13536
|
opacity: var(--seed-enter-opacity, 1);
|