@seed-design/css 1.2.3 → 1.2.5
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 +1013 -174
- package/all.layered.css +9069 -0
- package/all.layered.min.css +1 -0
- package/all.min.css +1 -1
- package/base.css +5 -2
- package/base.layered.css +857 -0
- package/base.layered.min.css +1 -0
- package/base.min.css +1 -1
- package/package.json +11 -2
- package/recipes/action-button.css +69 -17
- package/recipes/action-button.layered.css +421 -0
- package/recipes/action-button.layered.mjs +79 -0
- package/recipes/action-chip.layered.css +84 -0
- package/recipes/action-chip.layered.mjs +51 -0
- package/recipes/action-sheet-item.layered.css +38 -0
- package/recipes/action-sheet-item.layered.mjs +29 -0
- package/recipes/action-sheet.layered.css +134 -0
- package/recipes/action-sheet.layered.mjs +60 -0
- package/recipes/app-bar-main.layered.css +165 -0
- package/recipes/app-bar-main.layered.mjs +63 -0
- package/recipes/app-bar.css +8 -0
- package/recipes/app-bar.layered.css +302 -0
- package/recipes/app-bar.layered.mjs +70 -0
- package/recipes/app-screen.layered.css +332 -0
- package/recipes/app-screen.layered.mjs +98 -0
- package/recipes/article.layered.css +12 -0
- package/recipes/article.layered.mjs +22 -0
- package/recipes/aspect-ratio.layered.css +26 -0
- package/recipes/aspect-ratio.layered.mjs +22 -0
- package/recipes/avatar-stack.layered.css +94 -0
- package/recipes/avatar-stack.layered.mjs +50 -0
- package/recipes/avatar.layered.css +222 -0
- package/recipes/avatar.layered.mjs +65 -0
- package/recipes/badge.layered.css +140 -0
- package/recipes/badge.layered.mjs +131 -0
- package/recipes/bottom-sheet-handle.css +9 -2
- package/recipes/bottom-sheet-handle.layered.css +36 -0
- package/recipes/bottom-sheet-handle.layered.mjs +36 -0
- package/recipes/bottom-sheet.css +11 -0
- package/recipes/bottom-sheet.layered.css +224 -0
- package/recipes/bottom-sheet.layered.mjs +75 -0
- package/recipes/callout.css +77 -12
- package/recipes/callout.layered.css +242 -0
- package/recipes/callout.layered.mjs +63 -0
- package/recipes/checkbox-group.layered.css +7 -0
- package/recipes/checkbox-group.layered.mjs +22 -0
- package/recipes/checkbox.layered.css +54 -0
- package/recipes/checkbox.layered.mjs +48 -0
- package/recipes/checkmark.css +61 -13
- package/recipes/checkmark.layered.css +187 -0
- package/recipes/checkmark.layered.mjs +86 -0
- package/recipes/chip-tabs.css +62 -14
- package/recipes/chip-tabs.layered.css +254 -0
- package/recipes/chip-tabs.layered.mjs +75 -0
- package/recipes/chip.css +60 -15
- package/recipes/chip.layered.css +272 -0
- package/recipes/chip.layered.mjs +80 -0
- package/recipes/contextual-floating-button.css +24 -7
- package/recipes/contextual-floating-button.layered.css +130 -0
- package/recipes/contextual-floating-button.layered.mjs +34 -0
- package/recipes/control-chip.layered.css +99 -0
- package/recipes/control-chip.layered.mjs +51 -0
- package/recipes/dialog.layered.css +111 -0
- package/recipes/dialog.layered.mjs +66 -0
- package/recipes/extended-action-sheet-item.layered.css +38 -0
- package/recipes/extended-action-sheet-item.layered.mjs +29 -0
- package/recipes/extended-action-sheet.layered.css +132 -0
- package/recipes/extended-action-sheet.layered.mjs +64 -0
- package/recipes/extended-fab.layered.css +79 -0
- package/recipes/extended-fab.layered.mjs +34 -0
- package/recipes/fab.layered.css +37 -0
- package/recipes/fab.layered.mjs +22 -0
- package/recipes/field-label.layered.css +35 -0
- package/recipes/field-label.layered.mjs +47 -0
- package/recipes/field.layered.css +81 -0
- package/recipes/field.layered.mjs +60 -0
- package/recipes/floating-action-button.css +15 -5
- package/recipes/floating-action-button.layered.css +101 -0
- package/recipes/floating-action-button.layered.mjs +47 -0
- package/recipes/help-bubble.css +8 -0
- package/recipes/help-bubble.layered.css +104 -0
- package/recipes/help-bubble.layered.mjs +60 -0
- package/recipes/identity-placeholder.css +2 -2
- package/recipes/identity-placeholder.d.ts +1 -1
- package/recipes/identity-placeholder.layered.css +22 -0
- package/recipes/identity-placeholder.layered.mjs +43 -0
- package/recipes/identity-placeholder.mjs +2 -1
- package/recipes/image-frame-icon.layered.css +8 -0
- package/recipes/image-frame-icon.layered.mjs +22 -0
- package/recipes/image-frame-indicator.layered.css +18 -0
- package/recipes/image-frame-indicator.layered.mjs +22 -0
- package/recipes/image-frame-reaction-button.css +9 -1
- package/recipes/image-frame-reaction-button.layered.css +43 -0
- package/recipes/image-frame-reaction-button.layered.mjs +22 -0
- package/recipes/image-frame.layered.css +28 -0
- package/recipes/image-frame.layered.mjs +34 -0
- package/recipes/inline-banner.layered.css +161 -0
- package/recipes/inline-banner.layered.mjs +64 -0
- package/recipes/input-button.css +27 -5
- package/recipes/input-button.layered.css +167 -0
- package/recipes/input-button.layered.mjs +64 -0
- package/recipes/link-content.layered.css +48 -0
- package/recipes/link-content.layered.mjs +35 -0
- package/recipes/list-header.layered.css +26 -0
- package/recipes/list-header.layered.mjs +29 -0
- package/recipes/list-item.css +63 -17
- package/recipes/list-item.layered.css +187 -0
- package/recipes/list-item.layered.mjs +59 -0
- package/recipes/manner-temp-badge.layered.css +72 -0
- package/recipes/manner-temp-badge.layered.mjs +37 -0
- package/recipes/manner-temp.layered.css +57 -0
- package/recipes/manner-temp.layered.mjs +37 -0
- package/recipes/menu-sheet-item.css +24 -3
- package/recipes/menu-sheet-item.layered.css +102 -0
- package/recipes/menu-sheet-item.layered.mjs +56 -0
- package/recipes/menu-sheet.css +18 -3
- package/recipes/menu-sheet.layered.css +167 -0
- package/recipes/menu-sheet.layered.mjs +74 -0
- package/recipes/notification-badge-positioner.layered.css +35 -0
- package/recipes/notification-badge-positioner.layered.mjs +51 -0
- package/recipes/notification-badge.layered.css +33 -0
- package/recipes/notification-badge.layered.mjs +29 -0
- package/recipes/page-banner.css +122 -22
- package/recipes/page-banner.layered.css +361 -0
- package/recipes/page-banner.layered.mjs +117 -0
- package/recipes/progress-circle.layered.css +52 -0
- package/recipes/progress-circle.layered.mjs +55 -0
- package/recipes/pull-to-refresh.layered.css +19 -0
- package/recipes/pull-to-refresh.layered.mjs +36 -0
- package/recipes/radio-group.layered.css +7 -0
- package/recipes/radio-group.layered.mjs +22 -0
- package/recipes/radio.layered.css +54 -0
- package/recipes/radio.layered.mjs +48 -0
- package/recipes/radiomark.css +34 -7
- package/recipes/radiomark.layered.css +132 -0
- package/recipes/radiomark.layered.mjs +48 -0
- package/recipes/reaction-button.css +24 -7
- package/recipes/reaction-button.layered.css +124 -0
- package/recipes/reaction-button.layered.mjs +29 -0
- package/recipes/scroll-fog.layered.css +27 -0
- package/recipes/scroll-fog.layered.mjs +28 -0
- package/recipes/segmented-control.css +31 -7
- package/recipes/segmented-control.layered.css +108 -0
- package/recipes/segmented-control.layered.mjs +40 -0
- package/recipes/select-box-group.layered.css +13 -0
- package/recipes/select-box-group.layered.mjs +22 -0
- package/recipes/select-box.css +19 -3
- package/recipes/select-box.layered.css +148 -0
- package/recipes/select-box.layered.mjs +63 -0
- package/recipes/selectBoxCheckmark.css +9 -2
- package/recipes/selectBoxCheckmark.layered.css +42 -0
- package/recipes/selectBoxCheckmark.layered.mjs +36 -0
- package/recipes/skeleton.layered.css +56 -0
- package/recipes/skeleton.layered.mjs +36 -0
- package/recipes/slider-marker.layered.css +54 -0
- package/recipes/slider-marker.layered.mjs +30 -0
- package/recipes/slider-tick.layered.css +25 -0
- package/recipes/slider-tick.layered.mjs +29 -0
- package/recipes/slider.css +25 -1
- package/recipes/slider.layered.css +238 -0
- package/recipes/slider.layered.mjs +68 -0
- package/recipes/snackbar-region.layered.css +18 -0
- package/recipes/snackbar-region.layered.mjs +22 -0
- package/recipes/snackbar.css +20 -1
- package/recipes/snackbar.layered.css +126 -0
- package/recipes/snackbar.layered.mjs +56 -0
- package/recipes/switch.layered.css +62 -0
- package/recipes/switch.layered.mjs +44 -0
- package/recipes/switchmark.css +9 -1
- package/recipes/switchmark.layered.css +100 -0
- package/recipes/switchmark.layered.mjs +49 -0
- package/recipes/tabs.css +9 -0
- package/recipes/tabs.layered.css +211 -0
- package/recipes/tabs.layered.mjs +78 -0
- package/recipes/tag-group-item.layered.css +98 -0
- package/recipes/tag-group-item.layered.mjs +55 -0
- package/recipes/tag-group.layered.css +58 -0
- package/recipes/tag-group.layered.mjs +62 -0
- package/recipes/text-input.css +1 -0
- package/recipes/text-input.layered.css +236 -0
- package/recipes/text-input.layered.mjs +73 -0
- package/recipes/text.layered.css +364 -0
- package/recipes/text.layered.mjs +90 -0
- package/recipes/toggle-button.css +42 -11
- package/recipes/toggle-button.layered.css +183 -0
- package/recipes/toggle-button.layered.mjs +34 -0
- package/vars/color/stroke.d.ts +2 -1
- package/vars/color/stroke.mjs +2 -1
- package/vars/component/identity-placeholder.d.ts +2 -2
- package/vars/component/identity-placeholder.mjs +2 -2
- package/vars/component/image-frame-floater.d.ts +1 -1
- package/vars/component/image-frame.d.ts +11 -17
- package/vars/component/image-frame.mjs +7 -12
- package/vars/component/index.d.ts +1 -0
- package/vars/component/index.mjs +1 -0
- package/vars/component/list-item.d.ts +1 -1
- package/vars/component/list-item.mjs +1 -1
- package/vars/component/segmented-control-indicator.d.ts +24 -0
- package/vars/component/segmented-control-indicator.mjs +24 -0
- package/vars/component/segmented-control-item.d.ts +3 -11
- package/vars/component/segmented-control-item.mjs +3 -11
- package/vars/component/segmented-control.d.ts +0 -8
- package/vars/component/segmented-control.mjs +0 -8
- package/vars/component/slider.d.ts +3 -1
- package/vars/component/slider.mjs +3 -1
package/all.css
CHANGED
|
@@ -193,8 +193,7 @@
|
|
|
193
193
|
grid-row: var(--seed-box-grid-row);
|
|
194
194
|
}
|
|
195
195
|
|
|
196
|
-
.seed-box:is(:active, [data-active]) {
|
|
197
|
-
--seed-box-background--active: var(--seed-box-background);
|
|
196
|
+
.seed-box[data-has-active-bg]:is(:active, [data-active]) {
|
|
198
197
|
background: var(--seed-box-background--active);
|
|
199
198
|
}
|
|
200
199
|
|
|
@@ -236,10 +235,12 @@
|
|
|
236
235
|
|
|
237
236
|
[data-seed-color-mode="light-only"] {
|
|
238
237
|
color-scheme: light;
|
|
238
|
+
color-scheme: light only;
|
|
239
239
|
}
|
|
240
240
|
|
|
241
241
|
[data-seed-color-mode="dark-only"] {
|
|
242
242
|
color-scheme: dark;
|
|
243
|
+
color-scheme: dark only;
|
|
243
244
|
}
|
|
244
245
|
|
|
245
246
|
:root {
|
|
@@ -504,6 +505,7 @@
|
|
|
504
505
|
--seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
|
|
505
506
|
--seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
|
|
506
507
|
--seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
|
|
508
|
+
--seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
|
|
507
509
|
--seed-color-manner-temp-l1-bg: #f1f2f3;
|
|
508
510
|
--seed-color-manner-temp-l1-text: #757b85;
|
|
509
511
|
--seed-color-manner-temp-l10-bg: #ffebee;
|
|
@@ -714,6 +716,7 @@
|
|
|
714
716
|
--seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
|
|
715
717
|
--seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
|
|
716
718
|
--seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
|
|
719
|
+
--seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
|
|
717
720
|
--seed-color-manner-temp-l1-bg: #292929;
|
|
718
721
|
--seed-color-manner-temp-l1-text: #b8b8b9;
|
|
719
722
|
--seed-color-manner-temp-l10-bg: #34040a;
|
|
@@ -786,6 +789,8 @@
|
|
|
786
789
|
margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
|
|
787
790
|
margin-left: calc(var(--seed-box-bleed-left) * -1);
|
|
788
791
|
margin-right: calc(var(--seed-box-bleed-right) * -1);
|
|
792
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
793
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
789
794
|
border: none;
|
|
790
795
|
justify-content: center;
|
|
791
796
|
align-items: center;
|
|
@@ -795,8 +800,9 @@
|
|
|
795
800
|
position: relative;
|
|
796
801
|
}
|
|
797
802
|
|
|
798
|
-
.seed-action-button:is(:focus, [data-focus]) {
|
|
799
|
-
outline:
|
|
803
|
+
.seed-action-button:is(:focus-visible, [data-focus-visible]) {
|
|
804
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
805
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
800
806
|
}
|
|
801
807
|
|
|
802
808
|
.seed-action-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -804,7 +810,7 @@
|
|
|
804
810
|
}
|
|
805
811
|
|
|
806
812
|
.seed-action-button {
|
|
807
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
813
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
808
814
|
}
|
|
809
815
|
|
|
810
816
|
.seed-action-button--variant_brandSolid {
|
|
@@ -818,8 +824,16 @@
|
|
|
818
824
|
--range-color: var(--seed-color-palette-static-white);
|
|
819
825
|
}
|
|
820
826
|
|
|
821
|
-
|
|
822
|
-
|
|
827
|
+
@media (hover: hover) {
|
|
828
|
+
.seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
|
|
829
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
@media (hover: none) {
|
|
834
|
+
.seed-action-button--variant_brandSolid:is(:active, [data-active]) {
|
|
835
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
836
|
+
}
|
|
823
837
|
}
|
|
824
838
|
|
|
825
839
|
.seed-action-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -845,8 +859,16 @@
|
|
|
845
859
|
--range-color: var(--seed-color-palette-static-white);
|
|
846
860
|
}
|
|
847
861
|
|
|
848
|
-
|
|
849
|
-
|
|
862
|
+
@media (hover: hover) {
|
|
863
|
+
.seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
|
|
864
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
@media (hover: none) {
|
|
869
|
+
.seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
|
|
870
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
871
|
+
}
|
|
850
872
|
}
|
|
851
873
|
|
|
852
874
|
.seed-action-button--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -872,8 +894,16 @@
|
|
|
872
894
|
--range-color: var(--seed-color-fg-neutral);
|
|
873
895
|
}
|
|
874
896
|
|
|
875
|
-
|
|
876
|
-
|
|
897
|
+
@media (hover: hover) {
|
|
898
|
+
.seed-action-button--variant_neutralWeak:is(:hover, [data-hover]) {
|
|
899
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
900
|
+
}
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
@media (hover: none) {
|
|
904
|
+
.seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
|
|
905
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
906
|
+
}
|
|
877
907
|
}
|
|
878
908
|
|
|
879
909
|
.seed-action-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -899,8 +929,16 @@
|
|
|
899
929
|
--range-color: var(--seed-color-palette-static-white);
|
|
900
930
|
}
|
|
901
931
|
|
|
902
|
-
|
|
903
|
-
|
|
932
|
+
@media (hover: hover) {
|
|
933
|
+
.seed-action-button--variant_criticalSolid:is(:hover, [data-hover]) {
|
|
934
|
+
background: var(--seed-color-bg-critical-solid-pressed);
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
@media (hover: none) {
|
|
939
|
+
.seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
|
|
940
|
+
background: var(--seed-color-bg-critical-solid-pressed);
|
|
941
|
+
}
|
|
904
942
|
}
|
|
905
943
|
|
|
906
944
|
.seed-action-button--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -929,8 +967,16 @@
|
|
|
929
967
|
--range-color: var(--seed-color-bg-brand-solid);
|
|
930
968
|
}
|
|
931
969
|
|
|
932
|
-
|
|
933
|
-
|
|
970
|
+
@media (hover: hover) {
|
|
971
|
+
.seed-action-button--variant_brandOutline:is(:hover, [data-hover]) {
|
|
972
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
973
|
+
}
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
@media (hover: none) {
|
|
977
|
+
.seed-action-button--variant_brandOutline:is(:active, [data-active]) {
|
|
978
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
979
|
+
}
|
|
934
980
|
}
|
|
935
981
|
|
|
936
982
|
.seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -960,8 +1006,16 @@
|
|
|
960
1006
|
--range-color: var(--seed-color-fg-neutral);
|
|
961
1007
|
}
|
|
962
1008
|
|
|
963
|
-
|
|
964
|
-
|
|
1009
|
+
@media (hover: hover) {
|
|
1010
|
+
.seed-action-button--variant_neutralOutline:is(:hover, [data-hover]) {
|
|
1011
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1012
|
+
}
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
@media (hover: none) {
|
|
1016
|
+
.seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
|
|
1017
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1018
|
+
}
|
|
965
1019
|
}
|
|
966
1020
|
|
|
967
1021
|
.seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -990,8 +1044,16 @@
|
|
|
990
1044
|
background: #fff0;
|
|
991
1045
|
}
|
|
992
1046
|
|
|
993
|
-
|
|
994
|
-
|
|
1047
|
+
@media (hover: hover) {
|
|
1048
|
+
.seed-action-button--variant_ghost:is(:hover, [data-hover]) {
|
|
1049
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1050
|
+
}
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
@media (hover: none) {
|
|
1054
|
+
.seed-action-button--variant_ghost:is(:active, [data-active]) {
|
|
1055
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1056
|
+
}
|
|
995
1057
|
}
|
|
996
1058
|
|
|
997
1059
|
.seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -1428,6 +1490,10 @@
|
|
|
1428
1490
|
}
|
|
1429
1491
|
|
|
1430
1492
|
.seed-app-bar__iconButton {
|
|
1493
|
+
border-radius: var(--seed-radius-r1);
|
|
1494
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
1495
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
1496
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
1431
1497
|
background: none;
|
|
1432
1498
|
border: none;
|
|
1433
1499
|
justify-content: center;
|
|
@@ -1437,6 +1503,11 @@
|
|
|
1437
1503
|
display: flex;
|
|
1438
1504
|
}
|
|
1439
1505
|
|
|
1506
|
+
.seed-app-bar__iconButton:is(:focus-visible, [data-focus-visible]) {
|
|
1507
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
1508
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
1509
|
+
}
|
|
1510
|
+
|
|
1440
1511
|
.seed-app-bar__icon {
|
|
1441
1512
|
flex-shrink: 0;
|
|
1442
1513
|
display: inline-block;
|
|
@@ -2783,10 +2854,23 @@
|
|
|
2783
2854
|
|
|
2784
2855
|
.seed-bottom-sheet__closeButton:after {
|
|
2785
2856
|
content: "";
|
|
2857
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
2858
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
2859
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
2786
2860
|
position: absolute;
|
|
2787
2861
|
inset: -8px;
|
|
2788
2862
|
}
|
|
2789
2863
|
|
|
2864
|
+
.seed-bottom-sheet__closeButton:is(:focus, [data-focus]) {
|
|
2865
|
+
outline: none;
|
|
2866
|
+
}
|
|
2867
|
+
|
|
2868
|
+
.seed-bottom-sheet__closeButton:is(:focus-visible, [data-focus-visible]):after {
|
|
2869
|
+
border-radius: var(--seed-radius-r1);
|
|
2870
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
2871
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
2872
|
+
}
|
|
2873
|
+
|
|
2790
2874
|
.seed-bottom-sheet__header--headerAlign_left {
|
|
2791
2875
|
justify-content: flex-start;
|
|
2792
2876
|
}
|
|
@@ -2870,8 +2954,16 @@
|
|
|
2870
2954
|
transform: translateX(-50%);
|
|
2871
2955
|
}
|
|
2872
2956
|
|
|
2873
|
-
|
|
2874
|
-
|
|
2957
|
+
@media (hover: hover) {
|
|
2958
|
+
.seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
|
|
2959
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
2960
|
+
}
|
|
2961
|
+
}
|
|
2962
|
+
|
|
2963
|
+
@media (hover: none) {
|
|
2964
|
+
.seed-bottom-sheet-handle__root:is(:active, [data-active]) {
|
|
2965
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
2966
|
+
}
|
|
2875
2967
|
}
|
|
2876
2968
|
|
|
2877
2969
|
.seed-bottom-sheet-handle__touchArea {
|
|
@@ -2909,6 +3001,14 @@
|
|
|
2909
3001
|
|
|
2910
3002
|
.seed-callout__root:is(button, a) {
|
|
2911
3003
|
cursor: pointer;
|
|
3004
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3005
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3006
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3007
|
+
}
|
|
3008
|
+
|
|
3009
|
+
.seed-callout__root:is(button, a):is(:focus-visible, [data-focus-visible]) {
|
|
3010
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3011
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
2912
3012
|
}
|
|
2913
3013
|
|
|
2914
3014
|
.seed-callout__content {
|
|
@@ -2945,6 +3045,10 @@
|
|
|
2945
3045
|
line-height: var(--seed-line-height-t4);
|
|
2946
3046
|
font-weight: var(--seed-font-weight-regular);
|
|
2947
3047
|
text-underline-offset: 2px;
|
|
3048
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3049
|
+
border-radius: var(--seed-radius-r1);
|
|
3050
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3051
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
2948
3052
|
background-color: #0000;
|
|
2949
3053
|
border: none;
|
|
2950
3054
|
padding: 0;
|
|
@@ -2952,11 +3056,20 @@
|
|
|
2952
3056
|
display: inline-block;
|
|
2953
3057
|
}
|
|
2954
3058
|
|
|
3059
|
+
.seed-callout__link:is(:focus-visible, [data-focus-visible]) {
|
|
3060
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3061
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3062
|
+
}
|
|
3063
|
+
|
|
2955
3064
|
.seed-callout__closeButton {
|
|
2956
3065
|
cursor: pointer;
|
|
2957
3066
|
width: var(--seed-dimension-x10);
|
|
2958
3067
|
height: var(--seed-dimension-x10);
|
|
2959
3068
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
3069
|
+
border-radius: var(--seed-radius-r2_5);
|
|
3070
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3071
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3072
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
2960
3073
|
background-color: #0000;
|
|
2961
3074
|
border: none;
|
|
2962
3075
|
flex-grow: 0;
|
|
@@ -2967,14 +3080,27 @@
|
|
|
2967
3080
|
display: flex;
|
|
2968
3081
|
}
|
|
2969
3082
|
|
|
3083
|
+
.seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
3084
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3085
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3086
|
+
}
|
|
3087
|
+
|
|
2970
3088
|
.seed-callout__root--tone_neutral {
|
|
2971
3089
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
2972
3090
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
2973
3091
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
2974
3092
|
}
|
|
2975
3093
|
|
|
2976
|
-
|
|
2977
|
-
|
|
3094
|
+
@media (hover: hover) {
|
|
3095
|
+
.seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
|
|
3096
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3097
|
+
}
|
|
3098
|
+
}
|
|
3099
|
+
|
|
3100
|
+
@media (hover: none) {
|
|
3101
|
+
.seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
|
|
3102
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3103
|
+
}
|
|
2978
3104
|
}
|
|
2979
3105
|
|
|
2980
3106
|
.seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
|
|
@@ -2987,8 +3113,16 @@
|
|
|
2987
3113
|
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
2988
3114
|
}
|
|
2989
3115
|
|
|
2990
|
-
|
|
2991
|
-
|
|
3116
|
+
@media (hover: hover) {
|
|
3117
|
+
.seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
|
|
3118
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
3119
|
+
}
|
|
3120
|
+
}
|
|
3121
|
+
|
|
3122
|
+
@media (hover: none) {
|
|
3123
|
+
.seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
|
|
3124
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
3125
|
+
}
|
|
2992
3126
|
}
|
|
2993
3127
|
|
|
2994
3128
|
.seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
|
|
@@ -3001,8 +3135,16 @@
|
|
|
3001
3135
|
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
3002
3136
|
}
|
|
3003
3137
|
|
|
3004
|
-
|
|
3005
|
-
|
|
3138
|
+
@media (hover: hover) {
|
|
3139
|
+
.seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
|
|
3140
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
3141
|
+
}
|
|
3142
|
+
}
|
|
3143
|
+
|
|
3144
|
+
@media (hover: none) {
|
|
3145
|
+
.seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
|
|
3146
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
3147
|
+
}
|
|
3006
3148
|
}
|
|
3007
3149
|
|
|
3008
3150
|
.seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
|
|
@@ -3015,8 +3157,16 @@
|
|
|
3015
3157
|
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
3016
3158
|
}
|
|
3017
3159
|
|
|
3018
|
-
|
|
3019
|
-
|
|
3160
|
+
@media (hover: hover) {
|
|
3161
|
+
.seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
|
|
3162
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
3163
|
+
}
|
|
3164
|
+
}
|
|
3165
|
+
|
|
3166
|
+
@media (hover: none) {
|
|
3167
|
+
.seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
|
|
3168
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
3169
|
+
}
|
|
3020
3170
|
}
|
|
3021
3171
|
|
|
3022
3172
|
.seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
|
|
@@ -3029,8 +3179,16 @@
|
|
|
3029
3179
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
3030
3180
|
}
|
|
3031
3181
|
|
|
3032
|
-
|
|
3033
|
-
|
|
3182
|
+
@media (hover: hover) {
|
|
3183
|
+
.seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
|
|
3184
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
3185
|
+
}
|
|
3186
|
+
}
|
|
3187
|
+
|
|
3188
|
+
@media (hover: none) {
|
|
3189
|
+
.seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
|
|
3190
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
3191
|
+
}
|
|
3034
3192
|
}
|
|
3035
3193
|
|
|
3036
3194
|
.seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
|
|
@@ -3043,8 +3201,16 @@
|
|
|
3043
3201
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3044
3202
|
}
|
|
3045
3203
|
|
|
3046
|
-
|
|
3047
|
-
|
|
3204
|
+
@media (hover: hover) {
|
|
3205
|
+
.seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
|
|
3206
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
3207
|
+
}
|
|
3208
|
+
}
|
|
3209
|
+
|
|
3210
|
+
@media (hover: none) {
|
|
3211
|
+
.seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
|
|
3212
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
3213
|
+
}
|
|
3048
3214
|
}
|
|
3049
3215
|
|
|
3050
3216
|
.seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
|
|
@@ -3113,11 +3279,18 @@
|
|
|
3113
3279
|
.seed-checkmark__root {
|
|
3114
3280
|
box-sizing: border-box;
|
|
3115
3281
|
margin-top: var(--checkmark-margin-top, 0);
|
|
3116
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
3282
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3283
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
3284
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3117
3285
|
flex: none;
|
|
3118
3286
|
position: relative;
|
|
3119
3287
|
}
|
|
3120
3288
|
|
|
3289
|
+
.seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
|
|
3290
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
3291
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3292
|
+
}
|
|
3293
|
+
|
|
3121
3294
|
.seed-checkmark__icon {
|
|
3122
3295
|
content: "";
|
|
3123
3296
|
text-align: center;
|
|
@@ -3138,8 +3311,16 @@
|
|
|
3138
3311
|
border-width: 0;
|
|
3139
3312
|
}
|
|
3140
3313
|
|
|
3141
|
-
|
|
3142
|
-
|
|
3314
|
+
@media (hover: hover) {
|
|
3315
|
+
.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
3316
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3317
|
+
}
|
|
3318
|
+
}
|
|
3319
|
+
|
|
3320
|
+
@media (hover: none) {
|
|
3321
|
+
.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3322
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3323
|
+
}
|
|
3143
3324
|
}
|
|
3144
3325
|
|
|
3145
3326
|
.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3155,8 +3336,16 @@
|
|
|
3155
3336
|
color: var(--seed-color-fg-disabled);
|
|
3156
3337
|
}
|
|
3157
3338
|
|
|
3158
|
-
|
|
3159
|
-
|
|
3339
|
+
@media (hover: hover) {
|
|
3340
|
+
.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
3341
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3342
|
+
}
|
|
3343
|
+
}
|
|
3344
|
+
|
|
3345
|
+
@media (hover: none) {
|
|
3346
|
+
.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3347
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3348
|
+
}
|
|
3160
3349
|
}
|
|
3161
3350
|
|
|
3162
3351
|
.seed-checkmark__icon--variant_ghost {
|
|
@@ -3185,8 +3374,16 @@
|
|
|
3185
3374
|
background: var(--seed-color-bg-neutral-inverted);
|
|
3186
3375
|
}
|
|
3187
3376
|
|
|
3188
|
-
|
|
3189
|
-
|
|
3377
|
+
@media (hover: hover) {
|
|
3378
|
+
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3379
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3380
|
+
}
|
|
3381
|
+
}
|
|
3382
|
+
|
|
3383
|
+
@media (hover: none) {
|
|
3384
|
+
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3385
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3386
|
+
}
|
|
3190
3387
|
}
|
|
3191
3388
|
|
|
3192
3389
|
.seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
@@ -3197,24 +3394,48 @@
|
|
|
3197
3394
|
background: var(--seed-color-bg-brand-solid);
|
|
3198
3395
|
}
|
|
3199
3396
|
|
|
3200
|
-
|
|
3201
|
-
|
|
3397
|
+
@media (hover: hover) {
|
|
3398
|
+
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3399
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
3400
|
+
}
|
|
3401
|
+
}
|
|
3402
|
+
|
|
3403
|
+
@media (hover: none) {
|
|
3404
|
+
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3405
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
3406
|
+
}
|
|
3202
3407
|
}
|
|
3203
3408
|
|
|
3204
3409
|
.seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
3205
3410
|
color: var(--seed-color-palette-static-white);
|
|
3206
3411
|
}
|
|
3207
3412
|
|
|
3208
|
-
|
|
3209
|
-
|
|
3413
|
+
@media (hover: hover) {
|
|
3414
|
+
.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3415
|
+
background: var(--seed-color-palette-gray-200);
|
|
3416
|
+
}
|
|
3417
|
+
}
|
|
3418
|
+
|
|
3419
|
+
@media (hover: none) {
|
|
3420
|
+
.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3421
|
+
background: var(--seed-color-palette-gray-200);
|
|
3422
|
+
}
|
|
3210
3423
|
}
|
|
3211
3424
|
|
|
3212
3425
|
.seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
3213
3426
|
color: var(--seed-color-fg-neutral);
|
|
3214
3427
|
}
|
|
3215
3428
|
|
|
3216
|
-
|
|
3217
|
-
|
|
3429
|
+
@media (hover: hover) {
|
|
3430
|
+
.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3431
|
+
background: var(--seed-color-palette-carrot-200);
|
|
3432
|
+
}
|
|
3433
|
+
}
|
|
3434
|
+
|
|
3435
|
+
@media (hover: none) {
|
|
3436
|
+
.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3437
|
+
background: var(--seed-color-palette-carrot-200);
|
|
3438
|
+
}
|
|
3218
3439
|
}
|
|
3219
3440
|
|
|
3220
3441
|
.seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
@@ -3252,19 +3473,22 @@
|
|
|
3252
3473
|
border-radius: var(--seed-radius-full);
|
|
3253
3474
|
transition-duration: var(--seed-duration-color-transition);
|
|
3254
3475
|
transition-timing-function: var(--seed-timing-function-easing);
|
|
3476
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3477
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3255
3478
|
border: none;
|
|
3256
3479
|
flex-shrink: 0;
|
|
3257
3480
|
justify-content: center;
|
|
3258
3481
|
align-items: center;
|
|
3259
3482
|
font-family: inherit;
|
|
3260
3483
|
line-height: 1;
|
|
3261
|
-
transition-property: background-color, color, border-color, box-shadow;
|
|
3484
|
+
transition-property: background-color, color, border-color, box-shadow, outline-color;
|
|
3262
3485
|
display: inline-flex;
|
|
3263
3486
|
position: relative;
|
|
3264
3487
|
}
|
|
3265
3488
|
|
|
3266
|
-
.seed-chip__root:is(:focus, [data-focus]) {
|
|
3267
|
-
outline:
|
|
3489
|
+
.seed-chip__root:is(:focus-visible, [data-focus-visible]) {
|
|
3490
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3491
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3268
3492
|
}
|
|
3269
3493
|
|
|
3270
3494
|
.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3311,12 +3535,28 @@
|
|
|
3311
3535
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
3312
3536
|
}
|
|
3313
3537
|
|
|
3314
|
-
|
|
3315
|
-
|
|
3538
|
+
@media (hover: hover) {
|
|
3539
|
+
.seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3540
|
+
background: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3541
|
+
}
|
|
3316
3542
|
}
|
|
3317
3543
|
|
|
3318
|
-
|
|
3319
|
-
|
|
3544
|
+
@media (hover: none) {
|
|
3545
|
+
.seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3546
|
+
background: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3547
|
+
}
|
|
3548
|
+
}
|
|
3549
|
+
|
|
3550
|
+
@media (hover: hover) {
|
|
3551
|
+
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3552
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3553
|
+
}
|
|
3554
|
+
}
|
|
3555
|
+
|
|
3556
|
+
@media (hover: none) {
|
|
3557
|
+
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3558
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3559
|
+
}
|
|
3320
3560
|
}
|
|
3321
3561
|
|
|
3322
3562
|
.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3341,8 +3581,16 @@
|
|
|
3341
3581
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3342
3582
|
}
|
|
3343
3583
|
|
|
3344
|
-
|
|
3345
|
-
|
|
3584
|
+
@media (hover: hover) {
|
|
3585
|
+
.seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3586
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3587
|
+
}
|
|
3588
|
+
}
|
|
3589
|
+
|
|
3590
|
+
@media (hover: none) {
|
|
3591
|
+
.seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3592
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3593
|
+
}
|
|
3346
3594
|
}
|
|
3347
3595
|
|
|
3348
3596
|
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
|
|
@@ -3350,8 +3598,16 @@
|
|
|
3350
3598
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
3351
3599
|
}
|
|
3352
3600
|
|
|
3353
|
-
|
|
3354
|
-
|
|
3601
|
+
@media (hover: hover) {
|
|
3602
|
+
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3603
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3604
|
+
}
|
|
3605
|
+
}
|
|
3606
|
+
|
|
3607
|
+
@media (hover: none) {
|
|
3608
|
+
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3609
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3610
|
+
}
|
|
3355
3611
|
}
|
|
3356
3612
|
|
|
3357
3613
|
.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3376,8 +3632,16 @@
|
|
|
3376
3632
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3377
3633
|
}
|
|
3378
3634
|
|
|
3379
|
-
|
|
3380
|
-
|
|
3635
|
+
@media (hover: hover) {
|
|
3636
|
+
.seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3637
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3638
|
+
}
|
|
3639
|
+
}
|
|
3640
|
+
|
|
3641
|
+
@media (hover: none) {
|
|
3642
|
+
.seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3643
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3644
|
+
}
|
|
3381
3645
|
}
|
|
3382
3646
|
|
|
3383
3647
|
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
|
|
@@ -3385,8 +3649,16 @@
|
|
|
3385
3649
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
|
|
3386
3650
|
}
|
|
3387
3651
|
|
|
3388
|
-
|
|
3389
|
-
|
|
3652
|
+
@media (hover: hover) {
|
|
3653
|
+
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3654
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
3655
|
+
}
|
|
3656
|
+
}
|
|
3657
|
+
|
|
3658
|
+
@media (hover: none) {
|
|
3659
|
+
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3660
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
3661
|
+
}
|
|
3390
3662
|
}
|
|
3391
3663
|
|
|
3392
3664
|
.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3515,13 +3787,20 @@
|
|
|
3515
3787
|
padding-bottom: var(--seed-dimension-x2);
|
|
3516
3788
|
font-family: inherit;
|
|
3517
3789
|
font-weight: var(--seed-font-weight-medium);
|
|
3518
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
3790
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3791
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3792
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3519
3793
|
border: none;
|
|
3520
3794
|
justify-content: center;
|
|
3521
3795
|
align-items: center;
|
|
3522
3796
|
display: flex;
|
|
3523
3797
|
}
|
|
3524
3798
|
|
|
3799
|
+
.seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
|
|
3800
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3801
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3802
|
+
}
|
|
3803
|
+
|
|
3525
3804
|
.seed-chip-tabs__list--size_medium {
|
|
3526
3805
|
gap: 8px;
|
|
3527
3806
|
}
|
|
@@ -3554,12 +3833,28 @@
|
|
|
3554
3833
|
color: var(--seed-color-fg-neutral-inverted);
|
|
3555
3834
|
}
|
|
3556
3835
|
|
|
3557
|
-
|
|
3558
|
-
|
|
3836
|
+
@media (hover: hover) {
|
|
3837
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
|
|
3838
|
+
background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3839
|
+
}
|
|
3840
|
+
}
|
|
3841
|
+
|
|
3842
|
+
@media (hover: none) {
|
|
3843
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
|
|
3844
|
+
background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3845
|
+
}
|
|
3846
|
+
}
|
|
3847
|
+
|
|
3848
|
+
@media (hover: hover) {
|
|
3849
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
|
|
3850
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3851
|
+
}
|
|
3559
3852
|
}
|
|
3560
3853
|
|
|
3561
|
-
|
|
3562
|
-
|
|
3854
|
+
@media (hover: none) {
|
|
3855
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
|
|
3856
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3857
|
+
}
|
|
3563
3858
|
}
|
|
3564
3859
|
|
|
3565
3860
|
.seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3584,12 +3879,28 @@
|
|
|
3584
3879
|
border-color: #0000;
|
|
3585
3880
|
}
|
|
3586
3881
|
|
|
3587
|
-
|
|
3588
|
-
|
|
3882
|
+
@media (hover: hover) {
|
|
3883
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
|
|
3884
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3885
|
+
}
|
|
3886
|
+
}
|
|
3887
|
+
|
|
3888
|
+
@media (hover: none) {
|
|
3889
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
|
|
3890
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3891
|
+
}
|
|
3892
|
+
}
|
|
3893
|
+
|
|
3894
|
+
@media (hover: hover) {
|
|
3895
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
|
|
3896
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3897
|
+
}
|
|
3589
3898
|
}
|
|
3590
3899
|
|
|
3591
|
-
|
|
3592
|
-
|
|
3900
|
+
@media (hover: none) {
|
|
3901
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
|
|
3902
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3903
|
+
}
|
|
3593
3904
|
}
|
|
3594
3905
|
|
|
3595
3906
|
.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3612,12 +3923,28 @@
|
|
|
3612
3923
|
color: var(--seed-color-palette-static-white);
|
|
3613
3924
|
}
|
|
3614
3925
|
|
|
3615
|
-
|
|
3616
|
-
|
|
3926
|
+
@media (hover: hover) {
|
|
3927
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
|
|
3928
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3929
|
+
}
|
|
3930
|
+
}
|
|
3931
|
+
|
|
3932
|
+
@media (hover: none) {
|
|
3933
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
|
|
3934
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3935
|
+
}
|
|
3617
3936
|
}
|
|
3618
3937
|
|
|
3619
|
-
|
|
3620
|
-
|
|
3938
|
+
@media (hover: hover) {
|
|
3939
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
|
|
3940
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
3941
|
+
}
|
|
3942
|
+
}
|
|
3943
|
+
|
|
3944
|
+
@media (hover: none) {
|
|
3945
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
|
|
3946
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
3947
|
+
}
|
|
3621
3948
|
}
|
|
3622
3949
|
|
|
3623
3950
|
.seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3665,6 +3992,8 @@
|
|
|
3665
3992
|
text-transform: none;
|
|
3666
3993
|
-webkit-font-smoothing: antialiased;
|
|
3667
3994
|
-moz-osx-font-smoothing: grayscale;
|
|
3995
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3996
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3668
3997
|
border: none;
|
|
3669
3998
|
justify-content: center;
|
|
3670
3999
|
align-items: center;
|
|
@@ -3673,8 +4002,9 @@
|
|
|
3673
4002
|
display: inline-flex;
|
|
3674
4003
|
}
|
|
3675
4004
|
|
|
3676
|
-
.seed-contextual-floating-button:is(:focus, [data-focus]) {
|
|
3677
|
-
outline:
|
|
4005
|
+
.seed-contextual-floating-button:is(:focus-visible, [data-focus-visible]) {
|
|
4006
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4007
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3678
4008
|
}
|
|
3679
4009
|
|
|
3680
4010
|
.seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3702,7 +4032,7 @@
|
|
|
3702
4032
|
--seed-icon-size: 22px;
|
|
3703
4033
|
--size: 16px;
|
|
3704
4034
|
--thickness: 2px;
|
|
3705
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
4035
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3706
4036
|
}
|
|
3707
4037
|
|
|
3708
4038
|
.seed-contextual-floating-button--variant_solid {
|
|
@@ -3714,8 +4044,16 @@
|
|
|
3714
4044
|
--range-color: var(--seed-color-fg-neutral-inverted);
|
|
3715
4045
|
}
|
|
3716
4046
|
|
|
3717
|
-
|
|
3718
|
-
|
|
4047
|
+
@media (hover: hover) {
|
|
4048
|
+
.seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
|
|
4049
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
4050
|
+
}
|
|
4051
|
+
}
|
|
4052
|
+
|
|
4053
|
+
@media (hover: none) {
|
|
4054
|
+
.seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
|
|
4055
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
4056
|
+
}
|
|
3719
4057
|
}
|
|
3720
4058
|
|
|
3721
4059
|
.seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3738,8 +4076,16 @@
|
|
|
3738
4076
|
--range-color: var(--seed-color-fg-neutral);
|
|
3739
4077
|
}
|
|
3740
4078
|
|
|
3741
|
-
|
|
3742
|
-
|
|
4079
|
+
@media (hover: hover) {
|
|
4080
|
+
.seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
|
|
4081
|
+
background: var(--seed-color-bg-layer-floating-pressed);
|
|
4082
|
+
}
|
|
4083
|
+
}
|
|
4084
|
+
|
|
4085
|
+
@media (hover: none) {
|
|
4086
|
+
.seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
|
|
4087
|
+
background: var(--seed-color-bg-layer-floating-pressed);
|
|
4088
|
+
}
|
|
3743
4089
|
}
|
|
3744
4090
|
|
|
3745
4091
|
.seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -4379,6 +4725,8 @@
|
|
|
4379
4725
|
text-transform: none;
|
|
4380
4726
|
-webkit-font-smoothing: antialiased;
|
|
4381
4727
|
-moz-osx-font-smoothing: grayscale;
|
|
4728
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4729
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4382
4730
|
border: none;
|
|
4383
4731
|
justify-content: center;
|
|
4384
4732
|
align-items: center;
|
|
@@ -4387,8 +4735,9 @@
|
|
|
4387
4735
|
display: inline-flex;
|
|
4388
4736
|
}
|
|
4389
4737
|
|
|
4390
|
-
.seed-floating-action-button__root:is(:focus, [data-focus]) {
|
|
4391
|
-
outline:
|
|
4738
|
+
.seed-floating-action-button__root:is(:focus-visible, [data-focus-visible]) {
|
|
4739
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4740
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4392
4741
|
}
|
|
4393
4742
|
|
|
4394
4743
|
.seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -4403,13 +4752,21 @@
|
|
|
4403
4752
|
font-size: var(--seed-font-size-t5);
|
|
4404
4753
|
line-height: var(--seed-line-height-t5);
|
|
4405
4754
|
font-weight: var(--seed-font-weight-bold);
|
|
4406
|
-
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);
|
|
4755
|
+
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);
|
|
4407
4756
|
position: relative;
|
|
4408
4757
|
overflow: hidden;
|
|
4409
4758
|
}
|
|
4410
4759
|
|
|
4411
|
-
|
|
4412
|
-
|
|
4760
|
+
@media (hover: hover) {
|
|
4761
|
+
.seed-floating-action-button__root:is(:hover, [data-hover]) {
|
|
4762
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
4763
|
+
}
|
|
4764
|
+
}
|
|
4765
|
+
|
|
4766
|
+
@media (hover: none) {
|
|
4767
|
+
.seed-floating-action-button__root:is(:active, [data-active]) {
|
|
4768
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
4769
|
+
}
|
|
4413
4770
|
}
|
|
4414
4771
|
|
|
4415
4772
|
.seed-floating-action-button__icon {
|
|
@@ -4549,6 +4906,10 @@
|
|
|
4549
4906
|
color: var(--seed-color-fg-neutral-inverted);
|
|
4550
4907
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
4551
4908
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
4909
|
+
border-radius: var(--seed-radius-r3);
|
|
4910
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4911
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4912
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
4552
4913
|
background: none;
|
|
4553
4914
|
border: none;
|
|
4554
4915
|
justify-content: center;
|
|
@@ -4556,10 +4917,15 @@
|
|
|
4556
4917
|
display: flex;
|
|
4557
4918
|
}
|
|
4558
4919
|
|
|
4920
|
+
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
4921
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4922
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
4923
|
+
}
|
|
4924
|
+
|
|
4559
4925
|
.seed-identity-placeholder__root {
|
|
4560
4926
|
box-sizing: border-box;
|
|
4561
4927
|
vertical-align: top;
|
|
4562
|
-
background-color: var(--seed-color-palette-gray-
|
|
4928
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
4563
4929
|
justify-content: center;
|
|
4564
4930
|
align-items: center;
|
|
4565
4931
|
width: 100%;
|
|
@@ -4570,9 +4936,9 @@
|
|
|
4570
4936
|
|
|
4571
4937
|
.seed-identity-placeholder__image {
|
|
4572
4938
|
object-fit: cover;
|
|
4573
|
-
fill: #f7f8fa;
|
|
4574
4939
|
width: 100%;
|
|
4575
4940
|
height: 100%;
|
|
4941
|
+
fill: var(--seed-color-palette-static-white-alpha-800);
|
|
4576
4942
|
display: block;
|
|
4577
4943
|
overflow: hidden;
|
|
4578
4944
|
}
|
|
@@ -4650,13 +5016,22 @@
|
|
|
4650
5016
|
right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
4651
5017
|
bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
4652
5018
|
left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
5019
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5020
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5021
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4653
5022
|
position: absolute;
|
|
4654
5023
|
}
|
|
4655
5024
|
|
|
4656
|
-
.seed-image-frame-reaction-button:focus {
|
|
5025
|
+
.seed-image-frame-reaction-button:is(:focus, [data-focus]) {
|
|
4657
5026
|
outline: none;
|
|
4658
5027
|
}
|
|
4659
5028
|
|
|
5029
|
+
.seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
|
|
5030
|
+
border-radius: var(--seed-radius-r1);
|
|
5031
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5032
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5033
|
+
}
|
|
5034
|
+
|
|
4660
5035
|
.seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
|
|
4661
5036
|
--seed-icon-color: var(--seed-color-bg-transparent);
|
|
4662
5037
|
}
|
|
@@ -4840,7 +5215,7 @@
|
|
|
4840
5215
|
border-radius: var(--seed-radius-r3);
|
|
4841
5216
|
background-color: var(--seed-color-bg-transparent);
|
|
4842
5217
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
4843
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
5218
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4844
5219
|
border: none;
|
|
4845
5220
|
padding: 0;
|
|
4846
5221
|
position: absolute;
|
|
@@ -4862,8 +5237,16 @@
|
|
|
4862
5237
|
background-color: var(--seed-color-bg-disabled);
|
|
4863
5238
|
}
|
|
4864
5239
|
|
|
4865
|
-
|
|
4866
|
-
|
|
5240
|
+
@media (hover: hover) {
|
|
5241
|
+
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
|
|
5242
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5243
|
+
}
|
|
5244
|
+
}
|
|
5245
|
+
|
|
5246
|
+
@media (hover: none) {
|
|
5247
|
+
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
|
|
5248
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5249
|
+
}
|
|
4867
5250
|
}
|
|
4868
5251
|
|
|
4869
5252
|
.seed-input-button__button[data-readonly]:not([data-disabled]) {
|
|
@@ -4871,8 +5254,14 @@
|
|
|
4871
5254
|
background-color: var(--seed-color-bg-disabled);
|
|
4872
5255
|
}
|
|
4873
5256
|
|
|
4874
|
-
.seed-input-button__button
|
|
4875
|
-
outline:
|
|
5257
|
+
.seed-input-button__button {
|
|
5258
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5259
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5260
|
+
}
|
|
5261
|
+
|
|
5262
|
+
.seed-input-button__button:is(:focus-visible, [data-focus-visible]) {
|
|
5263
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5264
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4876
5265
|
}
|
|
4877
5266
|
|
|
4878
5267
|
.seed-input-button__button:is(:invalid, [data-invalid]):after {
|
|
@@ -4954,13 +5343,25 @@
|
|
|
4954
5343
|
|
|
4955
5344
|
.seed-input-button__clearButton {
|
|
4956
5345
|
cursor: pointer;
|
|
4957
|
-
--seed-
|
|
4958
|
-
--seed-
|
|
5346
|
+
border-radius: var(--seed-radius-full);
|
|
5347
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5348
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5349
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4959
5350
|
background-color: #0000;
|
|
4960
5351
|
border: none;
|
|
4961
5352
|
padding: 0;
|
|
4962
5353
|
}
|
|
4963
5354
|
|
|
5355
|
+
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
|
|
5356
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5357
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5358
|
+
}
|
|
5359
|
+
|
|
5360
|
+
.seed-input-button__clearButton {
|
|
5361
|
+
--seed-icon-size: 22px;
|
|
5362
|
+
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
5363
|
+
}
|
|
5364
|
+
|
|
4964
5365
|
.seed-link-content {
|
|
4965
5366
|
cursor: pointer;
|
|
4966
5367
|
box-sizing: border-box;
|
|
@@ -5054,6 +5455,7 @@
|
|
|
5054
5455
|
.seed-list-item__prefix {
|
|
5055
5456
|
--seed-box-padding-right: var(--seed-dimension-x3);
|
|
5056
5457
|
padding-right: var(--seed-box-padding-right);
|
|
5458
|
+
--seed-focus-ring: none;
|
|
5057
5459
|
--seed-icon-size: 22px;
|
|
5058
5460
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
5059
5461
|
flex-shrink: 0;
|
|
@@ -5071,6 +5473,7 @@
|
|
|
5071
5473
|
--seed-box-gap: var(--seed-dimension-x1);
|
|
5072
5474
|
align-items: center;
|
|
5073
5475
|
gap: var(--seed-box-gap);
|
|
5476
|
+
--seed-focus-ring: none;
|
|
5074
5477
|
font-size: var(--seed-font-size-t5);
|
|
5075
5478
|
line-height: var(--seed-line-height-t5);
|
|
5076
5479
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -5104,10 +5507,22 @@
|
|
|
5104
5507
|
|
|
5105
5508
|
.seed-list-item__content:after {
|
|
5106
5509
|
content: "";
|
|
5510
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5511
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5512
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5107
5513
|
position: absolute;
|
|
5108
5514
|
inset: 0;
|
|
5109
5515
|
}
|
|
5110
5516
|
|
|
5517
|
+
.seed-list-item__content:is(:focus, [data-focus]) {
|
|
5518
|
+
outline: none;
|
|
5519
|
+
}
|
|
5520
|
+
|
|
5521
|
+
.seed-list-item__content:is(:focus-visible, [data-focus-visible]):after {
|
|
5522
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5523
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5524
|
+
}
|
|
5525
|
+
|
|
5111
5526
|
.seed-list-item__content:before {
|
|
5112
5527
|
content: "";
|
|
5113
5528
|
z-index: -1;
|
|
@@ -5118,17 +5533,46 @@
|
|
|
5118
5533
|
inset: 0;
|
|
5119
5534
|
}
|
|
5120
5535
|
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5536
|
+
@media (hover: hover) {
|
|
5537
|
+
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
|
|
5538
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5539
|
+
left: var(--seed-dimension-x1_5);
|
|
5540
|
+
right: var(--seed-dimension-x1_5);
|
|
5541
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5542
|
+
}
|
|
5543
|
+
}
|
|
5544
|
+
|
|
5545
|
+
@media (hover: none) {
|
|
5546
|
+
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
|
|
5547
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5548
|
+
left: var(--seed-dimension-x1_5);
|
|
5549
|
+
right: var(--seed-dimension-x1_5);
|
|
5550
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5551
|
+
}
|
|
5552
|
+
}
|
|
5553
|
+
|
|
5554
|
+
@media (hover: hover) {
|
|
5555
|
+
.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
|
|
5556
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5557
|
+
left: var(--seed-dimension-x1_5);
|
|
5558
|
+
right: var(--seed-dimension-x1_5);
|
|
5559
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5560
|
+
}
|
|
5561
|
+
}
|
|
5562
|
+
|
|
5563
|
+
@media (hover: none) {
|
|
5564
|
+
.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
|
|
5565
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5566
|
+
left: var(--seed-dimension-x1_5);
|
|
5567
|
+
right: var(--seed-dimension-x1_5);
|
|
5568
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5569
|
+
}
|
|
5126
5570
|
}
|
|
5127
5571
|
|
|
5128
5572
|
.seed-list-item__title {
|
|
5129
5573
|
font-size: var(--seed-font-size-t5);
|
|
5130
5574
|
line-height: var(--seed-line-height-t5);
|
|
5131
|
-
font-weight: var(--seed-font-weight-
|
|
5575
|
+
font-weight: var(--seed-font-weight-regular);
|
|
5132
5576
|
color: var(--seed-color-fg-neutral);
|
|
5133
5577
|
flex-shrink: 0;
|
|
5134
5578
|
}
|
|
@@ -5152,8 +5596,28 @@
|
|
|
5152
5596
|
background-color: var(--seed-color-bg-brand-weak);
|
|
5153
5597
|
}
|
|
5154
5598
|
|
|
5155
|
-
|
|
5156
|
-
|
|
5599
|
+
@media (hover: hover) {
|
|
5600
|
+
.seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
|
|
5601
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5602
|
+
}
|
|
5603
|
+
}
|
|
5604
|
+
|
|
5605
|
+
@media (hover: none) {
|
|
5606
|
+
.seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
|
|
5607
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5608
|
+
}
|
|
5609
|
+
}
|
|
5610
|
+
|
|
5611
|
+
@media (hover: hover) {
|
|
5612
|
+
.seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
|
|
5613
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5614
|
+
}
|
|
5615
|
+
}
|
|
5616
|
+
|
|
5617
|
+
@media (hover: none) {
|
|
5618
|
+
.seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
|
|
5619
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5620
|
+
}
|
|
5157
5621
|
}
|
|
5158
5622
|
|
|
5159
5623
|
.seed-manner-temp {
|
|
@@ -5378,15 +5842,33 @@
|
|
|
5378
5842
|
font-size: var(--seed-font-size-t5);
|
|
5379
5843
|
line-height: var(--seed-line-height-t5);
|
|
5380
5844
|
font-weight: var(--seed-font-weight-medium);
|
|
5845
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5381
5846
|
border: none;
|
|
5382
|
-
outline: none;
|
|
5383
5847
|
justify-content: center;
|
|
5384
5848
|
align-items: center;
|
|
5385
5849
|
display: flex;
|
|
5386
5850
|
}
|
|
5387
5851
|
|
|
5388
|
-
|
|
5389
|
-
|
|
5852
|
+
@media (hover: hover) {
|
|
5853
|
+
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
|
|
5854
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5855
|
+
}
|
|
5856
|
+
}
|
|
5857
|
+
|
|
5858
|
+
@media (hover: none) {
|
|
5859
|
+
.seed-menu-sheet__closeButton:is(:active, [data-active]) {
|
|
5860
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5861
|
+
}
|
|
5862
|
+
}
|
|
5863
|
+
|
|
5864
|
+
.seed-menu-sheet__closeButton {
|
|
5865
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5866
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5867
|
+
}
|
|
5868
|
+
|
|
5869
|
+
.seed-menu-sheet__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
5870
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5871
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5390
5872
|
}
|
|
5391
5873
|
|
|
5392
5874
|
.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
|
|
@@ -5442,20 +5924,45 @@
|
|
|
5442
5924
|
gap: var(--seed-dimension-x3_5);
|
|
5443
5925
|
box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
|
|
5444
5926
|
border: none;
|
|
5445
|
-
outline: none;
|
|
5446
5927
|
margin: 0;
|
|
5447
5928
|
font-family: inherit;
|
|
5448
5929
|
display: flex;
|
|
5449
5930
|
}
|
|
5450
5931
|
|
|
5451
|
-
|
|
5452
|
-
|
|
5932
|
+
@media (hover: hover) {
|
|
5933
|
+
.seed-menu-sheet-item__root:is(:hover, [data-hover]) {
|
|
5934
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5935
|
+
}
|
|
5936
|
+
}
|
|
5937
|
+
|
|
5938
|
+
@media (hover: none) {
|
|
5939
|
+
.seed-menu-sheet-item__root:is(:active, [data-active]) {
|
|
5940
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5941
|
+
}
|
|
5942
|
+
}
|
|
5943
|
+
|
|
5944
|
+
.seed-menu-sheet-item__root:first-child {
|
|
5945
|
+
border-top-left-radius: var(--seed-radius-r4);
|
|
5946
|
+
border-top-right-radius: var(--seed-radius-r4);
|
|
5453
5947
|
}
|
|
5454
5948
|
|
|
5455
5949
|
.seed-menu-sheet-item__root:last-child {
|
|
5950
|
+
border-bottom-left-radius: var(--seed-radius-r4);
|
|
5951
|
+
border-bottom-right-radius: var(--seed-radius-r4);
|
|
5456
5952
|
box-shadow: none;
|
|
5457
5953
|
}
|
|
5458
5954
|
|
|
5955
|
+
.seed-menu-sheet-item__root {
|
|
5956
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5957
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5958
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5959
|
+
}
|
|
5960
|
+
|
|
5961
|
+
.seed-menu-sheet-item__root:is(:focus-visible, [data-focus-visible]) {
|
|
5962
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5963
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5964
|
+
}
|
|
5965
|
+
|
|
5459
5966
|
.seed-menu-sheet-item__root {
|
|
5460
5967
|
--seed-prefix-icon-size: 22px;
|
|
5461
5968
|
}
|
|
@@ -5599,6 +6106,14 @@
|
|
|
5599
6106
|
|
|
5600
6107
|
.seed-page-banner__root:is(button) {
|
|
5601
6108
|
cursor: pointer;
|
|
6109
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6110
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6111
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6112
|
+
}
|
|
6113
|
+
|
|
6114
|
+
.seed-page-banner__root:is(button):is(:focus-visible, [data-focus-visible]) {
|
|
6115
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6116
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5602
6117
|
}
|
|
5603
6118
|
|
|
5604
6119
|
.seed-page-banner__content {
|
|
@@ -5641,12 +6156,21 @@
|
|
|
5641
6156
|
font-size: var(--seed-font-size-t3);
|
|
5642
6157
|
line-height: var(--seed-line-height-t3);
|
|
5643
6158
|
font-weight: var(--seed-font-weight-bold);
|
|
6159
|
+
border-radius: var(--seed-radius-r1);
|
|
6160
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6161
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6162
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5644
6163
|
background-color: #0000;
|
|
5645
6164
|
border: none;
|
|
5646
6165
|
align-items: center;
|
|
5647
6166
|
display: flex;
|
|
5648
6167
|
}
|
|
5649
6168
|
|
|
6169
|
+
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
|
|
6170
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6171
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6172
|
+
}
|
|
6173
|
+
|
|
5650
6174
|
.seed-page-banner__closeButton {
|
|
5651
6175
|
width: var(--seed-dimension-x10);
|
|
5652
6176
|
height: var(--seed-dimension-x10);
|
|
@@ -5654,6 +6178,10 @@
|
|
|
5654
6178
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
5655
6179
|
--seed-suffix-icon-margin-left: initial;
|
|
5656
6180
|
cursor: pointer;
|
|
6181
|
+
border-radius: var(--seed-radius-r1);
|
|
6182
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6183
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6184
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5657
6185
|
background-color: #0000;
|
|
5658
6186
|
border: none;
|
|
5659
6187
|
flex-grow: 0;
|
|
@@ -5665,14 +6193,27 @@
|
|
|
5665
6193
|
display: flex;
|
|
5666
6194
|
}
|
|
5667
6195
|
|
|
6196
|
+
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6197
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6198
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6199
|
+
}
|
|
6200
|
+
|
|
5668
6201
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
5669
6202
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
5670
6203
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
5671
6204
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
5672
6205
|
}
|
|
5673
6206
|
|
|
5674
|
-
|
|
5675
|
-
|
|
6207
|
+
@media (hover: hover) {
|
|
6208
|
+
.seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6209
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6210
|
+
}
|
|
6211
|
+
}
|
|
6212
|
+
|
|
6213
|
+
@media (hover: none) {
|
|
6214
|
+
.seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
|
|
6215
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6216
|
+
}
|
|
5676
6217
|
}
|
|
5677
6218
|
|
|
5678
6219
|
.seed-page-banner__title--tone_neutral-variant_weak, .seed-page-banner__description--tone_neutral-variant_weak, .seed-page-banner__button--tone_neutral-variant_weak {
|
|
@@ -5685,8 +6226,16 @@
|
|
|
5685
6226
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
5686
6227
|
}
|
|
5687
6228
|
|
|
5688
|
-
|
|
5689
|
-
|
|
6229
|
+
@media (hover: hover) {
|
|
6230
|
+
.seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6231
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6232
|
+
}
|
|
6233
|
+
}
|
|
6234
|
+
|
|
6235
|
+
@media (hover: none) {
|
|
6236
|
+
.seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
|
|
6237
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6238
|
+
}
|
|
5690
6239
|
}
|
|
5691
6240
|
|
|
5692
6241
|
.seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
|
|
@@ -5699,8 +6248,16 @@
|
|
|
5699
6248
|
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
5700
6249
|
}
|
|
5701
6250
|
|
|
5702
|
-
|
|
5703
|
-
|
|
6251
|
+
@media (hover: hover) {
|
|
6252
|
+
.seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6253
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
6254
|
+
}
|
|
6255
|
+
}
|
|
6256
|
+
|
|
6257
|
+
@media (hover: none) {
|
|
6258
|
+
.seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
|
|
6259
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
6260
|
+
}
|
|
5704
6261
|
}
|
|
5705
6262
|
|
|
5706
6263
|
.seed-page-banner__title--tone_informative-variant_weak, .seed-page-banner__description--tone_informative-variant_weak, .seed-page-banner__button--tone_informative-variant_weak {
|
|
@@ -5713,8 +6270,16 @@
|
|
|
5713
6270
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5714
6271
|
}
|
|
5715
6272
|
|
|
5716
|
-
|
|
5717
|
-
|
|
6273
|
+
@media (hover: hover) {
|
|
6274
|
+
.seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6275
|
+
background-color: var(--seed-color-bg-informative-solid-pressed);
|
|
6276
|
+
}
|
|
6277
|
+
}
|
|
6278
|
+
|
|
6279
|
+
@media (hover: none) {
|
|
6280
|
+
.seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
|
|
6281
|
+
background-color: var(--seed-color-bg-informative-solid-pressed);
|
|
6282
|
+
}
|
|
5718
6283
|
}
|
|
5719
6284
|
|
|
5720
6285
|
.seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
|
|
@@ -5727,8 +6292,16 @@
|
|
|
5727
6292
|
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
5728
6293
|
}
|
|
5729
6294
|
|
|
5730
|
-
|
|
5731
|
-
|
|
6295
|
+
@media (hover: hover) {
|
|
6296
|
+
.seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6297
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
6298
|
+
}
|
|
6299
|
+
}
|
|
6300
|
+
|
|
6301
|
+
@media (hover: none) {
|
|
6302
|
+
.seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
|
|
6303
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
6304
|
+
}
|
|
5732
6305
|
}
|
|
5733
6306
|
|
|
5734
6307
|
.seed-page-banner__title--tone_positive-variant_weak, .seed-page-banner__description--tone_positive-variant_weak, .seed-page-banner__button--tone_positive-variant_weak {
|
|
@@ -5741,8 +6314,16 @@
|
|
|
5741
6314
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5742
6315
|
}
|
|
5743
6316
|
|
|
5744
|
-
|
|
5745
|
-
|
|
6317
|
+
@media (hover: hover) {
|
|
6318
|
+
.seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6319
|
+
background-color: var(--seed-color-bg-positive-solid-pressed);
|
|
6320
|
+
}
|
|
6321
|
+
}
|
|
6322
|
+
|
|
6323
|
+
@media (hover: none) {
|
|
6324
|
+
.seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
|
|
6325
|
+
background-color: var(--seed-color-bg-positive-solid-pressed);
|
|
6326
|
+
}
|
|
5746
6327
|
}
|
|
5747
6328
|
|
|
5748
6329
|
.seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
|
|
@@ -5755,8 +6336,16 @@
|
|
|
5755
6336
|
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
5756
6337
|
}
|
|
5757
6338
|
|
|
5758
|
-
|
|
5759
|
-
|
|
6339
|
+
@media (hover: hover) {
|
|
6340
|
+
.seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6341
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
6342
|
+
}
|
|
6343
|
+
}
|
|
6344
|
+
|
|
6345
|
+
@media (hover: none) {
|
|
6346
|
+
.seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
|
|
6347
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
6348
|
+
}
|
|
5760
6349
|
}
|
|
5761
6350
|
|
|
5762
6351
|
.seed-page-banner__title--tone_warning-variant_weak, .seed-page-banner__description--tone_warning-variant_weak, .seed-page-banner__button--tone_warning-variant_weak {
|
|
@@ -5769,8 +6358,16 @@
|
|
|
5769
6358
|
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
5770
6359
|
}
|
|
5771
6360
|
|
|
5772
|
-
|
|
5773
|
-
|
|
6361
|
+
@media (hover: hover) {
|
|
6362
|
+
.seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6363
|
+
background-color: var(--seed-color-bg-warning-solid-pressed);
|
|
6364
|
+
}
|
|
6365
|
+
}
|
|
6366
|
+
|
|
6367
|
+
@media (hover: none) {
|
|
6368
|
+
.seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
|
|
6369
|
+
background-color: var(--seed-color-bg-warning-solid-pressed);
|
|
6370
|
+
}
|
|
5774
6371
|
}
|
|
5775
6372
|
|
|
5776
6373
|
.seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
|
|
@@ -5783,8 +6380,16 @@
|
|
|
5783
6380
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
5784
6381
|
}
|
|
5785
6382
|
|
|
5786
|
-
|
|
5787
|
-
|
|
6383
|
+
@media (hover: hover) {
|
|
6384
|
+
.seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6385
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
6386
|
+
}
|
|
6387
|
+
}
|
|
6388
|
+
|
|
6389
|
+
@media (hover: none) {
|
|
6390
|
+
.seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
|
|
6391
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
6392
|
+
}
|
|
5788
6393
|
}
|
|
5789
6394
|
|
|
5790
6395
|
.seed-page-banner__title--tone_critical-variant_weak, .seed-page-banner__description--tone_critical-variant_weak, .seed-page-banner__button--tone_critical-variant_weak {
|
|
@@ -5797,8 +6402,16 @@
|
|
|
5797
6402
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5798
6403
|
}
|
|
5799
6404
|
|
|
5800
|
-
|
|
5801
|
-
|
|
6405
|
+
@media (hover: hover) {
|
|
6406
|
+
.seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6407
|
+
background-color: var(--seed-color-bg-critical-solid-pressed);
|
|
6408
|
+
}
|
|
6409
|
+
}
|
|
6410
|
+
|
|
6411
|
+
@media (hover: none) {
|
|
6412
|
+
.seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
|
|
6413
|
+
background-color: var(--seed-color-bg-critical-solid-pressed);
|
|
6414
|
+
}
|
|
5802
6415
|
}
|
|
5803
6416
|
|
|
5804
6417
|
.seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
|
|
@@ -5811,8 +6424,16 @@
|
|
|
5811
6424
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
5812
6425
|
}
|
|
5813
6426
|
|
|
5814
|
-
|
|
5815
|
-
|
|
6427
|
+
@media (hover: hover) {
|
|
6428
|
+
.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6429
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
6430
|
+
}
|
|
6431
|
+
}
|
|
6432
|
+
|
|
6433
|
+
@media (hover: none) {
|
|
6434
|
+
.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
|
|
6435
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
6436
|
+
}
|
|
5816
6437
|
}
|
|
5817
6438
|
|
|
5818
6439
|
.seed-page-banner__title--tone_magic-variant_weak, .seed-page-banner__description--tone_magic-variant_weak, .seed-page-banner__button--tone_magic-variant_weak {
|
|
@@ -5954,7 +6575,9 @@
|
|
|
5954
6575
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
5955
6576
|
border-radius: var(--seed-radius-full);
|
|
5956
6577
|
margin-top: var(--radiomark-margin-top, 0);
|
|
5957
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
6578
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6579
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
6580
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5958
6581
|
flex: none;
|
|
5959
6582
|
justify-content: center;
|
|
5960
6583
|
align-items: center;
|
|
@@ -5962,8 +6585,16 @@
|
|
|
5962
6585
|
position: relative;
|
|
5963
6586
|
}
|
|
5964
6587
|
|
|
5965
|
-
|
|
5966
|
-
|
|
6588
|
+
@media (hover: hover) {
|
|
6589
|
+
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
6590
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6591
|
+
}
|
|
6592
|
+
}
|
|
6593
|
+
|
|
6594
|
+
@media (hover: none) {
|
|
6595
|
+
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6596
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6597
|
+
}
|
|
5967
6598
|
}
|
|
5968
6599
|
|
|
5969
6600
|
.seed-radiomark__root:is(:checked, [data-checked]) {
|
|
@@ -5980,6 +6611,11 @@
|
|
|
5980
6611
|
border-color: var(--seed-color-palette-gray-300);
|
|
5981
6612
|
}
|
|
5982
6613
|
|
|
6614
|
+
.seed-radiomark__root:is(:focus-visible, [data-focus-visible]) {
|
|
6615
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
6616
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6617
|
+
}
|
|
6618
|
+
|
|
5983
6619
|
.seed-radiomark__icon {
|
|
5984
6620
|
border-radius: var(--seed-radius-full);
|
|
5985
6621
|
display: none;
|
|
@@ -5997,8 +6633,16 @@
|
|
|
5997
6633
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
5998
6634
|
}
|
|
5999
6635
|
|
|
6000
|
-
|
|
6001
|
-
|
|
6636
|
+
@media (hover: hover) {
|
|
6637
|
+
.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
|
|
6638
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6639
|
+
}
|
|
6640
|
+
}
|
|
6641
|
+
|
|
6642
|
+
@media (hover: none) {
|
|
6643
|
+
.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
6644
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6645
|
+
}
|
|
6002
6646
|
}
|
|
6003
6647
|
|
|
6004
6648
|
.seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
|
|
@@ -6009,8 +6653,16 @@
|
|
|
6009
6653
|
background-color: var(--seed-color-bg-brand-solid);
|
|
6010
6654
|
}
|
|
6011
6655
|
|
|
6012
|
-
|
|
6013
|
-
|
|
6656
|
+
@media (hover: hover) {
|
|
6657
|
+
.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
|
|
6658
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
6659
|
+
}
|
|
6660
|
+
}
|
|
6661
|
+
|
|
6662
|
+
@media (hover: none) {
|
|
6663
|
+
.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
6664
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
6665
|
+
}
|
|
6014
6666
|
}
|
|
6015
6667
|
|
|
6016
6668
|
.seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
|
|
@@ -6055,6 +6707,8 @@
|
|
|
6055
6707
|
vertical-align: middle;
|
|
6056
6708
|
-webkit-font-smoothing: antialiased;
|
|
6057
6709
|
-moz-osx-font-smoothing: grayscale;
|
|
6710
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6711
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6058
6712
|
border: none;
|
|
6059
6713
|
flex-shrink: 0;
|
|
6060
6714
|
justify-content: center;
|
|
@@ -6065,12 +6719,13 @@
|
|
|
6065
6719
|
position: relative;
|
|
6066
6720
|
}
|
|
6067
6721
|
|
|
6068
|
-
.seed-reaction-button:is(:focus, [data-focus]) {
|
|
6069
|
-
outline:
|
|
6722
|
+
.seed-reaction-button:is(:focus-visible, [data-focus-visible]) {
|
|
6723
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6724
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6070
6725
|
}
|
|
6071
6726
|
|
|
6072
6727
|
.seed-reaction-button {
|
|
6073
|
-
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);
|
|
6728
|
+
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);
|
|
6074
6729
|
background: var(--seed-color-bg-transparent);
|
|
6075
6730
|
font-weight: var(--seed-font-weight-medium);
|
|
6076
6731
|
color: var(--seed-color-fg-neutral);
|
|
@@ -6081,8 +6736,16 @@
|
|
|
6081
6736
|
--seed-count-color: var(--seed-color-fg-neutral);
|
|
6082
6737
|
}
|
|
6083
6738
|
|
|
6084
|
-
|
|
6085
|
-
|
|
6739
|
+
@media (hover: hover) {
|
|
6740
|
+
.seed-reaction-button:is(:hover, [data-hover]) {
|
|
6741
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6742
|
+
}
|
|
6743
|
+
}
|
|
6744
|
+
|
|
6745
|
+
@media (hover: none) {
|
|
6746
|
+
.seed-reaction-button:is(:active, [data-active]) {
|
|
6747
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6748
|
+
}
|
|
6086
6749
|
}
|
|
6087
6750
|
|
|
6088
6751
|
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -6093,8 +6756,16 @@
|
|
|
6093
6756
|
--seed-count-color: var(--seed-color-fg-brand);
|
|
6094
6757
|
}
|
|
6095
6758
|
|
|
6096
|
-
|
|
6097
|
-
|
|
6759
|
+
@media (hover: hover) {
|
|
6760
|
+
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
|
|
6761
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6762
|
+
}
|
|
6763
|
+
}
|
|
6764
|
+
|
|
6765
|
+
@media (hover: none) {
|
|
6766
|
+
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
|
|
6767
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6768
|
+
}
|
|
6098
6769
|
}
|
|
6099
6770
|
|
|
6100
6771
|
.seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -6228,7 +6899,7 @@
|
|
|
6228
6899
|
font-size: var(--seed-font-size-t5);
|
|
6229
6900
|
line-height: var(--seed-line-height-t5);
|
|
6230
6901
|
color: var(--seed-color-fg-neutral-subtle);
|
|
6231
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
6902
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), 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);
|
|
6232
6903
|
display: flex;
|
|
6233
6904
|
}
|
|
6234
6905
|
|
|
@@ -6236,6 +6907,16 @@
|
|
|
6236
6907
|
color: var(--seed-color-fg-neutral);
|
|
6237
6908
|
}
|
|
6238
6909
|
|
|
6910
|
+
.seed-segmented-control__item {
|
|
6911
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6912
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6913
|
+
}
|
|
6914
|
+
|
|
6915
|
+
.seed-segmented-control__item:is(:focus-visible, [data-focus-visible]) {
|
|
6916
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6917
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6918
|
+
}
|
|
6919
|
+
|
|
6239
6920
|
.seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
|
|
6240
6921
|
cursor: not-allowed;
|
|
6241
6922
|
color: var(--seed-color-fg-disabled);
|
|
@@ -6246,14 +6927,32 @@
|
|
|
6246
6927
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6247
6928
|
}
|
|
6248
6929
|
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
6930
|
+
@media (hover: hover) {
|
|
6931
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
|
|
6932
|
+
background-color: var(--seed-color-palette-gray-100);
|
|
6933
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6934
|
+
}
|
|
6252
6935
|
}
|
|
6253
6936
|
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6937
|
+
@media (hover: none) {
|
|
6938
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
6939
|
+
background-color: var(--seed-color-palette-gray-100);
|
|
6940
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6941
|
+
}
|
|
6942
|
+
}
|
|
6943
|
+
|
|
6944
|
+
@media (hover: hover) {
|
|
6945
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
|
|
6946
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6947
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6948
|
+
}
|
|
6949
|
+
}
|
|
6950
|
+
|
|
6951
|
+
@media (hover: none) {
|
|
6952
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
|
|
6953
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6954
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6955
|
+
}
|
|
6257
6956
|
}
|
|
6258
6957
|
|
|
6259
6958
|
.seed-select-box__root {
|
|
@@ -6261,7 +6960,7 @@
|
|
|
6261
6960
|
border-radius: var(--seed-radius-r3);
|
|
6262
6961
|
background-color: var(--seed-color-bg-transparent);
|
|
6263
6962
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6264
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
6963
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6265
6964
|
flex-direction: column;
|
|
6266
6965
|
display: flex;
|
|
6267
6966
|
position: relative;
|
|
@@ -6278,8 +6977,16 @@
|
|
|
6278
6977
|
inset: 0;
|
|
6279
6978
|
}
|
|
6280
6979
|
|
|
6281
|
-
|
|
6282
|
-
|
|
6980
|
+
@media (hover: hover) {
|
|
6981
|
+
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
6982
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6983
|
+
}
|
|
6984
|
+
}
|
|
6985
|
+
|
|
6986
|
+
@media (hover: none) {
|
|
6987
|
+
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6988
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6989
|
+
}
|
|
6283
6990
|
}
|
|
6284
6991
|
|
|
6285
6992
|
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
|
|
@@ -6296,9 +7003,20 @@
|
|
|
6296
7003
|
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
|
|
6297
7004
|
}
|
|
6298
7005
|
|
|
7006
|
+
.seed-select-box__root {
|
|
7007
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7008
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7009
|
+
}
|
|
7010
|
+
|
|
7011
|
+
.seed-select-box__root:is(:focus-visible, [data-focus-visible]) {
|
|
7012
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7013
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7014
|
+
}
|
|
7015
|
+
|
|
6299
7016
|
.seed-select-box__trigger {
|
|
6300
7017
|
justify-content: space-between;
|
|
6301
7018
|
gap: var(--seed-dimension-x1_5);
|
|
7019
|
+
--seed-focus-ring: none;
|
|
6302
7020
|
flex-grow: 1;
|
|
6303
7021
|
display: flex;
|
|
6304
7022
|
}
|
|
@@ -6405,8 +7123,16 @@
|
|
|
6405
7123
|
inset: 0;
|
|
6406
7124
|
}
|
|
6407
7125
|
|
|
6408
|
-
|
|
6409
|
-
|
|
7126
|
+
@media (hover: hover) {
|
|
7127
|
+
.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
7128
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
7129
|
+
}
|
|
7130
|
+
}
|
|
7131
|
+
|
|
7132
|
+
@media (hover: none) {
|
|
7133
|
+
.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
7134
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
7135
|
+
}
|
|
6410
7136
|
}
|
|
6411
7137
|
|
|
6412
7138
|
.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
|
|
@@ -6494,6 +7220,14 @@
|
|
|
6494
7220
|
display: flex;
|
|
6495
7221
|
}
|
|
6496
7222
|
|
|
7223
|
+
.seed-slider__root[data-dragging] {
|
|
7224
|
+
cursor: grabbing;
|
|
7225
|
+
}
|
|
7226
|
+
|
|
7227
|
+
.seed-slider__root:is(:disabled, [disabled], [data-disabled]) {
|
|
7228
|
+
cursor: not-allowed;
|
|
7229
|
+
}
|
|
7230
|
+
|
|
6497
7231
|
.seed-slider__control {
|
|
6498
7232
|
align-items: center;
|
|
6499
7233
|
height: 26px;
|
|
@@ -6562,14 +7296,18 @@
|
|
|
6562
7296
|
content: "";
|
|
6563
7297
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
6564
7298
|
border-radius: var(--seed-radius-full);
|
|
6565
|
-
|
|
7299
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7300
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7301
|
+
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6566
7302
|
will-change: transform;
|
|
7303
|
+
cursor: grab;
|
|
6567
7304
|
position: absolute;
|
|
6568
7305
|
inset: 0;
|
|
6569
7306
|
}
|
|
6570
7307
|
|
|
6571
7308
|
.seed-slider__thumb:is(:disabled, [disabled], [data-disabled]):after {
|
|
6572
7309
|
background-color: var(--seed-color-fg-disabled);
|
|
7310
|
+
cursor: not-allowed;
|
|
6573
7311
|
}
|
|
6574
7312
|
|
|
6575
7313
|
.seed-slider__thumb[data-dragging] {
|
|
@@ -6584,6 +7322,11 @@
|
|
|
6584
7322
|
outline: none;
|
|
6585
7323
|
}
|
|
6586
7324
|
|
|
7325
|
+
.seed-slider__thumb:is(:focus-visible, [data-focus-visible]):after {
|
|
7326
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7327
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7328
|
+
}
|
|
7329
|
+
|
|
6587
7330
|
.seed-slider__markers {
|
|
6588
7331
|
height: var(--seed-line-height-t3);
|
|
6589
7332
|
position: relative;
|
|
@@ -6591,6 +7334,8 @@
|
|
|
6591
7334
|
|
|
6592
7335
|
.seed-slider__valueIndicatorRoot {
|
|
6593
7336
|
box-sizing: border-box;
|
|
7337
|
+
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7338
|
+
will-change: left, right;
|
|
6594
7339
|
background: var(--seed-color-bg-neutral-inverted);
|
|
6595
7340
|
padding-left: var(--seed-dimension-x2);
|
|
6596
7341
|
padding-right: var(--seed-dimension-x2);
|
|
@@ -6664,6 +7409,10 @@
|
|
|
6664
7409
|
animation-fill-mode: forwards;
|
|
6665
7410
|
}
|
|
6666
7411
|
|
|
7412
|
+
.seed-slider__valueIndicatorRoot[data-dragging] {
|
|
7413
|
+
transition: none;
|
|
7414
|
+
}
|
|
7415
|
+
|
|
6667
7416
|
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
|
|
6668
7417
|
animation-duration: 0s;
|
|
6669
7418
|
}
|
|
@@ -6671,6 +7420,8 @@
|
|
|
6671
7420
|
.seed-slider__valueIndicatorArrow {
|
|
6672
7421
|
width: var(--seed-dimension-x2);
|
|
6673
7422
|
height: var(--seed-dimension-x2);
|
|
7423
|
+
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7424
|
+
will-change: left, right;
|
|
6674
7425
|
position: absolute;
|
|
6675
7426
|
top: 100%;
|
|
6676
7427
|
}
|
|
@@ -6685,6 +7436,10 @@
|
|
|
6685
7436
|
transform: translateX(50%);
|
|
6686
7437
|
}
|
|
6687
7438
|
|
|
7439
|
+
.seed-slider__valueIndicatorArrow[data-dragging] {
|
|
7440
|
+
transition: none;
|
|
7441
|
+
}
|
|
7442
|
+
|
|
6688
7443
|
.seed-slider__valueIndicatorArrowTip {
|
|
6689
7444
|
fill: var(--seed-color-bg-neutral-inverted);
|
|
6690
7445
|
width: var(--seed-dimension-x2);
|
|
@@ -6802,6 +7557,17 @@
|
|
|
6802
7557
|
animation-fill-mode: forwards;
|
|
6803
7558
|
}
|
|
6804
7559
|
|
|
7560
|
+
.seed-snackbar__root {
|
|
7561
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7562
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7563
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7564
|
+
}
|
|
7565
|
+
|
|
7566
|
+
.seed-snackbar__root:is(:focus-visible, [data-focus-visible]) {
|
|
7567
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7568
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7569
|
+
}
|
|
7570
|
+
|
|
6805
7571
|
.seed-snackbar__content {
|
|
6806
7572
|
padding-left: var(--seed-dimension-x1_5);
|
|
6807
7573
|
padding-right: var(--seed-dimension-x1_5);
|
|
@@ -6839,7 +7605,6 @@
|
|
|
6839
7605
|
line-height: var(--seed-line-height-t4);
|
|
6840
7606
|
font-weight: var(--seed-font-weight-bold);
|
|
6841
7607
|
border: none;
|
|
6842
|
-
outline: none;
|
|
6843
7608
|
flex-shrink: 0;
|
|
6844
7609
|
justify-content: center;
|
|
6845
7610
|
align-items: center;
|
|
@@ -6853,12 +7618,25 @@
|
|
|
6853
7618
|
top: 50%;
|
|
6854
7619
|
left: calc(-1 * var(--seed-dimension-x2));
|
|
6855
7620
|
right: calc(-1 * var(--seed-dimension-x2));
|
|
6856
|
-
|
|
7621
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7622
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6857
7623
|
min-height: 44px;
|
|
7624
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7625
|
+
background: none;
|
|
6858
7626
|
position: absolute;
|
|
6859
7627
|
transform: translateY(-50%);
|
|
6860
7628
|
}
|
|
6861
7629
|
|
|
7630
|
+
.seed-snackbar__actionButton:is(:focus, [data-focus]) {
|
|
7631
|
+
outline: none;
|
|
7632
|
+
}
|
|
7633
|
+
|
|
7634
|
+
.seed-snackbar__actionButton:is(:focus-visible, [data-focus-visible]):after {
|
|
7635
|
+
border-radius: var(--seed-radius-r1);
|
|
7636
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7637
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
7638
|
+
}
|
|
7639
|
+
|
|
6862
7640
|
.seed-snackbar__prefixIcon--variant_default {
|
|
6863
7641
|
display: none;
|
|
6864
7642
|
}
|
|
@@ -6954,7 +7732,7 @@
|
|
|
6954
7732
|
border-radius: var(--seed-radius-full);
|
|
6955
7733
|
background: var(--seed-color-palette-gray-600);
|
|
6956
7734
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
6957
|
-
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
|
|
7735
|
+
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);
|
|
6958
7736
|
display: block;
|
|
6959
7737
|
position: relative;
|
|
6960
7738
|
}
|
|
@@ -6963,6 +7741,16 @@
|
|
|
6963
7741
|
opacity: .38;
|
|
6964
7742
|
}
|
|
6965
7743
|
|
|
7744
|
+
.seed-switchmark__root {
|
|
7745
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
7746
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7747
|
+
}
|
|
7748
|
+
|
|
7749
|
+
.seed-switchmark__root:is(:focus-visible, [data-focus-visible]) {
|
|
7750
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
7751
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7752
|
+
}
|
|
7753
|
+
|
|
6966
7754
|
.seed-switchmark__thumb {
|
|
6967
7755
|
border-radius: var(--seed-radius-full);
|
|
6968
7756
|
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
|
|
@@ -7134,6 +7922,17 @@
|
|
|
7134
7922
|
bottom: 0;
|
|
7135
7923
|
}
|
|
7136
7924
|
|
|
7925
|
+
.seed-tabs__trigger {
|
|
7926
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7927
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7928
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
7929
|
+
}
|
|
7930
|
+
|
|
7931
|
+
.seed-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
|
|
7932
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7933
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
7934
|
+
}
|
|
7935
|
+
|
|
7137
7936
|
.seed-tabs__list--triggerLayout_fill {
|
|
7138
7937
|
justify-content: space-around;
|
|
7139
7938
|
padding-left: 0;
|
|
@@ -7808,7 +8607,12 @@
|
|
|
7808
8607
|
}
|
|
7809
8608
|
}
|
|
7810
8609
|
|
|
7811
|
-
.seed-text-input__value:is(:disabled, [disabled], [data-disabled])
|
|
8610
|
+
.seed-text-input__value:is(:disabled, [disabled], [data-disabled]) {
|
|
8611
|
+
color: var(--seed-color-fg-disabled);
|
|
8612
|
+
cursor: not-allowed;
|
|
8613
|
+
}
|
|
8614
|
+
|
|
8615
|
+
.seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
|
|
7812
8616
|
color: var(--seed-color-fg-disabled);
|
|
7813
8617
|
}
|
|
7814
8618
|
|
|
@@ -7992,6 +8796,8 @@
|
|
|
7992
8796
|
vertical-align: middle;
|
|
7993
8797
|
-webkit-font-smoothing: antialiased;
|
|
7994
8798
|
-moz-osx-font-smoothing: grayscale;
|
|
8799
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8800
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7995
8801
|
border: none;
|
|
7996
8802
|
flex-shrink: 0;
|
|
7997
8803
|
justify-content: center;
|
|
@@ -8002,8 +8808,9 @@
|
|
|
8002
8808
|
position: relative;
|
|
8003
8809
|
}
|
|
8004
8810
|
|
|
8005
|
-
.seed-toggle-button:is(:focus, [data-focus]) {
|
|
8006
|
-
outline:
|
|
8811
|
+
.seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
|
|
8812
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8813
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8007
8814
|
}
|
|
8008
8815
|
|
|
8009
8816
|
.seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -8011,7 +8818,7 @@
|
|
|
8011
8818
|
}
|
|
8012
8819
|
|
|
8013
8820
|
.seed-toggle-button {
|
|
8014
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
8821
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8015
8822
|
font-weight: var(--seed-font-weight-bold);
|
|
8016
8823
|
}
|
|
8017
8824
|
|
|
@@ -8022,8 +8829,16 @@
|
|
|
8022
8829
|
--range-color: var(--seed-color-palette-static-white);
|
|
8023
8830
|
}
|
|
8024
8831
|
|
|
8025
|
-
|
|
8026
|
-
|
|
8832
|
+
@media (hover: hover) {
|
|
8833
|
+
.seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
|
|
8834
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
8835
|
+
}
|
|
8836
|
+
}
|
|
8837
|
+
|
|
8838
|
+
@media (hover: none) {
|
|
8839
|
+
.seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
|
|
8840
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
8841
|
+
}
|
|
8027
8842
|
}
|
|
8028
8843
|
|
|
8029
8844
|
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -8035,8 +8850,16 @@
|
|
|
8035
8850
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8036
8851
|
}
|
|
8037
8852
|
|
|
8038
|
-
|
|
8039
|
-
|
|
8853
|
+
@media (hover: hover) {
|
|
8854
|
+
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
|
|
8855
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8856
|
+
}
|
|
8857
|
+
}
|
|
8858
|
+
|
|
8859
|
+
@media (hover: none) {
|
|
8860
|
+
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
|
|
8861
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8862
|
+
}
|
|
8040
8863
|
}
|
|
8041
8864
|
|
|
8042
8865
|
.seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -8066,8 +8889,16 @@
|
|
|
8066
8889
|
--range-color: var(--seed-color-fg-neutral);
|
|
8067
8890
|
}
|
|
8068
8891
|
|
|
8069
|
-
|
|
8070
|
-
|
|
8892
|
+
@media (hover: hover) {
|
|
8893
|
+
.seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
|
|
8894
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8895
|
+
}
|
|
8896
|
+
}
|
|
8897
|
+
|
|
8898
|
+
@media (hover: none) {
|
|
8899
|
+
.seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
|
|
8900
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8901
|
+
}
|
|
8071
8902
|
}
|
|
8072
8903
|
|
|
8073
8904
|
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -8079,8 +8910,16 @@
|
|
|
8079
8910
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8080
8911
|
}
|
|
8081
8912
|
|
|
8082
|
-
|
|
8083
|
-
|
|
8913
|
+
@media (hover: hover) {
|
|
8914
|
+
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
|
|
8915
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8916
|
+
}
|
|
8917
|
+
}
|
|
8918
|
+
|
|
8919
|
+
@media (hover: none) {
|
|
8920
|
+
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
|
|
8921
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8922
|
+
}
|
|
8084
8923
|
}
|
|
8085
8924
|
|
|
8086
8925
|
.seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
|