@seed-design/css 1.2.2 → 1.2.4
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 +1033 -192
- package/all.layered.css +9070 -0
- package/all.layered.min.css +1 -0
- package/all.min.css +1 -1
- package/base.css +4 -0
- package/base.layered.css +858 -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 +9 -1
- 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.css +0 -2
- 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 +14 -3
- 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 -5
- 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 +41 -16
- 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/action-button.d.ts +61 -61
- package/vars/component/bottom-sheet.d.ts +3 -3
- package/vars/component/bottom-sheet.mjs +3 -3
- package/vars/component/callout.d.ts +7 -7
- package/vars/component/chip-tab.d.ts +2 -1
- package/vars/component/chip-tab.mjs +2 -1
- package/vars/component/contextual-floating-button.d.ts +2 -2
- 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/input-button.d.ts +1 -1
- 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/select-box.d.ts +1 -1
- package/vars/component/slider.d.ts +14 -10
- package/vars/component/slider.mjs +11 -10
- package/vars/component/text-input.d.ts +1 -1
package/all.css
CHANGED
|
@@ -236,10 +236,12 @@
|
|
|
236
236
|
|
|
237
237
|
[data-seed-color-mode="light-only"] {
|
|
238
238
|
color-scheme: light;
|
|
239
|
+
color-scheme: light only;
|
|
239
240
|
}
|
|
240
241
|
|
|
241
242
|
[data-seed-color-mode="dark-only"] {
|
|
242
243
|
color-scheme: dark;
|
|
244
|
+
color-scheme: dark only;
|
|
243
245
|
}
|
|
244
246
|
|
|
245
247
|
:root {
|
|
@@ -504,6 +506,7 @@
|
|
|
504
506
|
--seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
|
|
505
507
|
--seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
|
|
506
508
|
--seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
|
|
509
|
+
--seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
|
|
507
510
|
--seed-color-manner-temp-l1-bg: #f1f2f3;
|
|
508
511
|
--seed-color-manner-temp-l1-text: #757b85;
|
|
509
512
|
--seed-color-manner-temp-l10-bg: #ffebee;
|
|
@@ -714,6 +717,7 @@
|
|
|
714
717
|
--seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
|
|
715
718
|
--seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
|
|
716
719
|
--seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
|
|
720
|
+
--seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
|
|
717
721
|
--seed-color-manner-temp-l1-bg: #292929;
|
|
718
722
|
--seed-color-manner-temp-l1-text: #b8b8b9;
|
|
719
723
|
--seed-color-manner-temp-l10-bg: #34040a;
|
|
@@ -786,6 +790,8 @@
|
|
|
786
790
|
margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
|
|
787
791
|
margin-left: calc(var(--seed-box-bleed-left) * -1);
|
|
788
792
|
margin-right: calc(var(--seed-box-bleed-right) * -1);
|
|
793
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
794
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
789
795
|
border: none;
|
|
790
796
|
justify-content: center;
|
|
791
797
|
align-items: center;
|
|
@@ -795,8 +801,9 @@
|
|
|
795
801
|
position: relative;
|
|
796
802
|
}
|
|
797
803
|
|
|
798
|
-
.seed-action-button:is(:focus, [data-focus]) {
|
|
799
|
-
outline:
|
|
804
|
+
.seed-action-button:is(:focus-visible, [data-focus-visible]) {
|
|
805
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
806
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
800
807
|
}
|
|
801
808
|
|
|
802
809
|
.seed-action-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -804,7 +811,7 @@
|
|
|
804
811
|
}
|
|
805
812
|
|
|
806
813
|
.seed-action-button {
|
|
807
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
814
|
+
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
815
|
}
|
|
809
816
|
|
|
810
817
|
.seed-action-button--variant_brandSolid {
|
|
@@ -818,8 +825,16 @@
|
|
|
818
825
|
--range-color: var(--seed-color-palette-static-white);
|
|
819
826
|
}
|
|
820
827
|
|
|
821
|
-
|
|
822
|
-
|
|
828
|
+
@media (hover: hover) {
|
|
829
|
+
.seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
|
|
830
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
@media (hover: none) {
|
|
835
|
+
.seed-action-button--variant_brandSolid:is(:active, [data-active]) {
|
|
836
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
837
|
+
}
|
|
823
838
|
}
|
|
824
839
|
|
|
825
840
|
.seed-action-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -845,8 +860,16 @@
|
|
|
845
860
|
--range-color: var(--seed-color-palette-static-white);
|
|
846
861
|
}
|
|
847
862
|
|
|
848
|
-
|
|
849
|
-
|
|
863
|
+
@media (hover: hover) {
|
|
864
|
+
.seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
|
|
865
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
@media (hover: none) {
|
|
870
|
+
.seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
|
|
871
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
872
|
+
}
|
|
850
873
|
}
|
|
851
874
|
|
|
852
875
|
.seed-action-button--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -872,8 +895,16 @@
|
|
|
872
895
|
--range-color: var(--seed-color-fg-neutral);
|
|
873
896
|
}
|
|
874
897
|
|
|
875
|
-
|
|
876
|
-
|
|
898
|
+
@media (hover: hover) {
|
|
899
|
+
.seed-action-button--variant_neutralWeak:is(:hover, [data-hover]) {
|
|
900
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
901
|
+
}
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
@media (hover: none) {
|
|
905
|
+
.seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
|
|
906
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
907
|
+
}
|
|
877
908
|
}
|
|
878
909
|
|
|
879
910
|
.seed-action-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -899,8 +930,16 @@
|
|
|
899
930
|
--range-color: var(--seed-color-palette-static-white);
|
|
900
931
|
}
|
|
901
932
|
|
|
902
|
-
|
|
903
|
-
|
|
933
|
+
@media (hover: hover) {
|
|
934
|
+
.seed-action-button--variant_criticalSolid:is(:hover, [data-hover]) {
|
|
935
|
+
background: var(--seed-color-bg-critical-solid-pressed);
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
@media (hover: none) {
|
|
940
|
+
.seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
|
|
941
|
+
background: var(--seed-color-bg-critical-solid-pressed);
|
|
942
|
+
}
|
|
904
943
|
}
|
|
905
944
|
|
|
906
945
|
.seed-action-button--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -929,8 +968,16 @@
|
|
|
929
968
|
--range-color: var(--seed-color-bg-brand-solid);
|
|
930
969
|
}
|
|
931
970
|
|
|
932
|
-
|
|
933
|
-
|
|
971
|
+
@media (hover: hover) {
|
|
972
|
+
.seed-action-button--variant_brandOutline:is(:hover, [data-hover]) {
|
|
973
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
974
|
+
}
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
@media (hover: none) {
|
|
978
|
+
.seed-action-button--variant_brandOutline:is(:active, [data-active]) {
|
|
979
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
980
|
+
}
|
|
934
981
|
}
|
|
935
982
|
|
|
936
983
|
.seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -960,8 +1007,16 @@
|
|
|
960
1007
|
--range-color: var(--seed-color-fg-neutral);
|
|
961
1008
|
}
|
|
962
1009
|
|
|
963
|
-
|
|
964
|
-
|
|
1010
|
+
@media (hover: hover) {
|
|
1011
|
+
.seed-action-button--variant_neutralOutline:is(:hover, [data-hover]) {
|
|
1012
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1013
|
+
}
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
@media (hover: none) {
|
|
1017
|
+
.seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
|
|
1018
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1019
|
+
}
|
|
965
1020
|
}
|
|
966
1021
|
|
|
967
1022
|
.seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -990,8 +1045,16 @@
|
|
|
990
1045
|
background: #fff0;
|
|
991
1046
|
}
|
|
992
1047
|
|
|
993
|
-
|
|
994
|
-
|
|
1048
|
+
@media (hover: hover) {
|
|
1049
|
+
.seed-action-button--variant_ghost:is(:hover, [data-hover]) {
|
|
1050
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
@media (hover: none) {
|
|
1055
|
+
.seed-action-button--variant_ghost:is(:active, [data-active]) {
|
|
1056
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
1057
|
+
}
|
|
995
1058
|
}
|
|
996
1059
|
|
|
997
1060
|
.seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -1373,8 +1436,6 @@
|
|
|
1373
1436
|
|
|
1374
1437
|
.seed-aspect-ratio {
|
|
1375
1438
|
--seed-aspect-ratio-padding: 75%;
|
|
1376
|
-
position: relative;
|
|
1377
|
-
overflow: hidden;
|
|
1378
1439
|
}
|
|
1379
1440
|
|
|
1380
1441
|
.seed-aspect-ratio:before {
|
|
@@ -1430,6 +1491,10 @@
|
|
|
1430
1491
|
}
|
|
1431
1492
|
|
|
1432
1493
|
.seed-app-bar__iconButton {
|
|
1494
|
+
border-radius: var(--seed-radius-r1);
|
|
1495
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
1496
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
1497
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
1433
1498
|
background: none;
|
|
1434
1499
|
border: none;
|
|
1435
1500
|
justify-content: center;
|
|
@@ -1439,6 +1504,11 @@
|
|
|
1439
1504
|
display: flex;
|
|
1440
1505
|
}
|
|
1441
1506
|
|
|
1507
|
+
.seed-app-bar__iconButton:is(:focus-visible, [data-focus-visible]) {
|
|
1508
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
1509
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
1510
|
+
}
|
|
1511
|
+
|
|
1442
1512
|
.seed-app-bar__icon {
|
|
1443
1513
|
flex-shrink: 0;
|
|
1444
1514
|
display: inline-block;
|
|
@@ -1671,7 +1741,7 @@
|
|
|
1671
1741
|
}
|
|
1672
1742
|
|
|
1673
1743
|
.seed-app-bar__root--tone_layer:before {
|
|
1674
|
-
background
|
|
1744
|
+
background: var(--seed-box-background, var(--seed-color-bg-layer-default));
|
|
1675
1745
|
}
|
|
1676
1746
|
|
|
1677
1747
|
.seed-app-bar__icon--tone_layer {
|
|
@@ -2785,10 +2855,23 @@
|
|
|
2785
2855
|
|
|
2786
2856
|
.seed-bottom-sheet__closeButton:after {
|
|
2787
2857
|
content: "";
|
|
2858
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
2859
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
2860
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
2788
2861
|
position: absolute;
|
|
2789
2862
|
inset: -8px;
|
|
2790
2863
|
}
|
|
2791
2864
|
|
|
2865
|
+
.seed-bottom-sheet__closeButton:is(:focus, [data-focus]) {
|
|
2866
|
+
outline: none;
|
|
2867
|
+
}
|
|
2868
|
+
|
|
2869
|
+
.seed-bottom-sheet__closeButton:is(:focus-visible, [data-focus-visible]):after {
|
|
2870
|
+
border-radius: var(--seed-radius-r1);
|
|
2871
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
2872
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
2873
|
+
}
|
|
2874
|
+
|
|
2792
2875
|
.seed-bottom-sheet__header--headerAlign_left {
|
|
2793
2876
|
justify-content: flex-start;
|
|
2794
2877
|
}
|
|
@@ -2800,7 +2883,7 @@
|
|
|
2800
2883
|
|
|
2801
2884
|
.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
|
|
2802
2885
|
padding-left: var(--seed-dimension-spacing-x-global-gutter);
|
|
2803
|
-
padding-right:
|
|
2886
|
+
padding-right: 56px;
|
|
2804
2887
|
}
|
|
2805
2888
|
|
|
2806
2889
|
.seed-bottom-sheet__header--headerAlign_center {
|
|
@@ -2814,8 +2897,8 @@
|
|
|
2814
2897
|
}
|
|
2815
2898
|
|
|
2816
2899
|
.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
|
|
2817
|
-
padding-left:
|
|
2818
|
-
padding-right:
|
|
2900
|
+
padding-left: 56px;
|
|
2901
|
+
padding-right: 56px;
|
|
2819
2902
|
}
|
|
2820
2903
|
|
|
2821
2904
|
.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
|
|
@@ -2872,8 +2955,16 @@
|
|
|
2872
2955
|
transform: translateX(-50%);
|
|
2873
2956
|
}
|
|
2874
2957
|
|
|
2875
|
-
|
|
2876
|
-
|
|
2958
|
+
@media (hover: hover) {
|
|
2959
|
+
.seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
|
|
2960
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
2961
|
+
}
|
|
2962
|
+
}
|
|
2963
|
+
|
|
2964
|
+
@media (hover: none) {
|
|
2965
|
+
.seed-bottom-sheet-handle__root:is(:active, [data-active]) {
|
|
2966
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
2967
|
+
}
|
|
2877
2968
|
}
|
|
2878
2969
|
|
|
2879
2970
|
.seed-bottom-sheet-handle__touchArea {
|
|
@@ -2911,6 +3002,14 @@
|
|
|
2911
3002
|
|
|
2912
3003
|
.seed-callout__root:is(button, a) {
|
|
2913
3004
|
cursor: pointer;
|
|
3005
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3006
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3007
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3008
|
+
}
|
|
3009
|
+
|
|
3010
|
+
.seed-callout__root:is(button, a):is(:focus-visible, [data-focus-visible]) {
|
|
3011
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3012
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
2914
3013
|
}
|
|
2915
3014
|
|
|
2916
3015
|
.seed-callout__content {
|
|
@@ -2947,6 +3046,10 @@
|
|
|
2947
3046
|
line-height: var(--seed-line-height-t4);
|
|
2948
3047
|
font-weight: var(--seed-font-weight-regular);
|
|
2949
3048
|
text-underline-offset: 2px;
|
|
3049
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3050
|
+
border-radius: var(--seed-radius-r1);
|
|
3051
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3052
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
2950
3053
|
background-color: #0000;
|
|
2951
3054
|
border: none;
|
|
2952
3055
|
padding: 0;
|
|
@@ -2954,11 +3057,20 @@
|
|
|
2954
3057
|
display: inline-block;
|
|
2955
3058
|
}
|
|
2956
3059
|
|
|
3060
|
+
.seed-callout__link:is(:focus-visible, [data-focus-visible]) {
|
|
3061
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3062
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3063
|
+
}
|
|
3064
|
+
|
|
2957
3065
|
.seed-callout__closeButton {
|
|
2958
3066
|
cursor: pointer;
|
|
2959
3067
|
width: var(--seed-dimension-x10);
|
|
2960
3068
|
height: var(--seed-dimension-x10);
|
|
2961
3069
|
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
3070
|
+
border-radius: var(--seed-radius-r2_5);
|
|
3071
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3072
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3073
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
2962
3074
|
background-color: #0000;
|
|
2963
3075
|
border: none;
|
|
2964
3076
|
flex-grow: 0;
|
|
@@ -2969,14 +3081,27 @@
|
|
|
2969
3081
|
display: flex;
|
|
2970
3082
|
}
|
|
2971
3083
|
|
|
3084
|
+
.seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
3085
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3086
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3087
|
+
}
|
|
3088
|
+
|
|
2972
3089
|
.seed-callout__root--tone_neutral {
|
|
2973
3090
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
2974
3091
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
2975
3092
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
2976
3093
|
}
|
|
2977
3094
|
|
|
2978
|
-
|
|
2979
|
-
|
|
3095
|
+
@media (hover: hover) {
|
|
3096
|
+
.seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
|
|
3097
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3098
|
+
}
|
|
3099
|
+
}
|
|
3100
|
+
|
|
3101
|
+
@media (hover: none) {
|
|
3102
|
+
.seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
|
|
3103
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3104
|
+
}
|
|
2980
3105
|
}
|
|
2981
3106
|
|
|
2982
3107
|
.seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
|
|
@@ -2989,8 +3114,16 @@
|
|
|
2989
3114
|
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
2990
3115
|
}
|
|
2991
3116
|
|
|
2992
|
-
|
|
2993
|
-
|
|
3117
|
+
@media (hover: hover) {
|
|
3118
|
+
.seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
|
|
3119
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
3120
|
+
}
|
|
3121
|
+
}
|
|
3122
|
+
|
|
3123
|
+
@media (hover: none) {
|
|
3124
|
+
.seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
|
|
3125
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
3126
|
+
}
|
|
2994
3127
|
}
|
|
2995
3128
|
|
|
2996
3129
|
.seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
|
|
@@ -3003,8 +3136,16 @@
|
|
|
3003
3136
|
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
3004
3137
|
}
|
|
3005
3138
|
|
|
3006
|
-
|
|
3007
|
-
|
|
3139
|
+
@media (hover: hover) {
|
|
3140
|
+
.seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
|
|
3141
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
3142
|
+
}
|
|
3143
|
+
}
|
|
3144
|
+
|
|
3145
|
+
@media (hover: none) {
|
|
3146
|
+
.seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
|
|
3147
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
3148
|
+
}
|
|
3008
3149
|
}
|
|
3009
3150
|
|
|
3010
3151
|
.seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
|
|
@@ -3017,8 +3158,16 @@
|
|
|
3017
3158
|
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
3018
3159
|
}
|
|
3019
3160
|
|
|
3020
|
-
|
|
3021
|
-
|
|
3161
|
+
@media (hover: hover) {
|
|
3162
|
+
.seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
|
|
3163
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
3164
|
+
}
|
|
3165
|
+
}
|
|
3166
|
+
|
|
3167
|
+
@media (hover: none) {
|
|
3168
|
+
.seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
|
|
3169
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
3170
|
+
}
|
|
3022
3171
|
}
|
|
3023
3172
|
|
|
3024
3173
|
.seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
|
|
@@ -3031,8 +3180,16 @@
|
|
|
3031
3180
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
3032
3181
|
}
|
|
3033
3182
|
|
|
3034
|
-
|
|
3035
|
-
|
|
3183
|
+
@media (hover: hover) {
|
|
3184
|
+
.seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
|
|
3185
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
3186
|
+
}
|
|
3187
|
+
}
|
|
3188
|
+
|
|
3189
|
+
@media (hover: none) {
|
|
3190
|
+
.seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
|
|
3191
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
3192
|
+
}
|
|
3036
3193
|
}
|
|
3037
3194
|
|
|
3038
3195
|
.seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
|
|
@@ -3045,8 +3202,16 @@
|
|
|
3045
3202
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3046
3203
|
}
|
|
3047
3204
|
|
|
3048
|
-
|
|
3049
|
-
|
|
3205
|
+
@media (hover: hover) {
|
|
3206
|
+
.seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
|
|
3207
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
3208
|
+
}
|
|
3209
|
+
}
|
|
3210
|
+
|
|
3211
|
+
@media (hover: none) {
|
|
3212
|
+
.seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
|
|
3213
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
3214
|
+
}
|
|
3050
3215
|
}
|
|
3051
3216
|
|
|
3052
3217
|
.seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
|
|
@@ -3115,11 +3280,18 @@
|
|
|
3115
3280
|
.seed-checkmark__root {
|
|
3116
3281
|
box-sizing: border-box;
|
|
3117
3282
|
margin-top: var(--checkmark-margin-top, 0);
|
|
3118
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
3283
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3284
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
3285
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3119
3286
|
flex: none;
|
|
3120
3287
|
position: relative;
|
|
3121
3288
|
}
|
|
3122
3289
|
|
|
3290
|
+
.seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
|
|
3291
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
3292
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3293
|
+
}
|
|
3294
|
+
|
|
3123
3295
|
.seed-checkmark__icon {
|
|
3124
3296
|
content: "";
|
|
3125
3297
|
text-align: center;
|
|
@@ -3140,8 +3312,16 @@
|
|
|
3140
3312
|
border-width: 0;
|
|
3141
3313
|
}
|
|
3142
3314
|
|
|
3143
|
-
|
|
3144
|
-
|
|
3315
|
+
@media (hover: hover) {
|
|
3316
|
+
.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
3317
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3318
|
+
}
|
|
3319
|
+
}
|
|
3320
|
+
|
|
3321
|
+
@media (hover: none) {
|
|
3322
|
+
.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3323
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3324
|
+
}
|
|
3145
3325
|
}
|
|
3146
3326
|
|
|
3147
3327
|
.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3157,8 +3337,16 @@
|
|
|
3157
3337
|
color: var(--seed-color-fg-disabled);
|
|
3158
3338
|
}
|
|
3159
3339
|
|
|
3160
|
-
|
|
3161
|
-
|
|
3340
|
+
@media (hover: hover) {
|
|
3341
|
+
.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
3342
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3343
|
+
}
|
|
3344
|
+
}
|
|
3345
|
+
|
|
3346
|
+
@media (hover: none) {
|
|
3347
|
+
.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
3348
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3349
|
+
}
|
|
3162
3350
|
}
|
|
3163
3351
|
|
|
3164
3352
|
.seed-checkmark__icon--variant_ghost {
|
|
@@ -3187,8 +3375,16 @@
|
|
|
3187
3375
|
background: var(--seed-color-bg-neutral-inverted);
|
|
3188
3376
|
}
|
|
3189
3377
|
|
|
3190
|
-
|
|
3191
|
-
|
|
3378
|
+
@media (hover: hover) {
|
|
3379
|
+
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3380
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3381
|
+
}
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
@media (hover: none) {
|
|
3385
|
+
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3386
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3387
|
+
}
|
|
3192
3388
|
}
|
|
3193
3389
|
|
|
3194
3390
|
.seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
@@ -3199,24 +3395,48 @@
|
|
|
3199
3395
|
background: var(--seed-color-bg-brand-solid);
|
|
3200
3396
|
}
|
|
3201
3397
|
|
|
3202
|
-
|
|
3203
|
-
|
|
3398
|
+
@media (hover: hover) {
|
|
3399
|
+
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3400
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
3401
|
+
}
|
|
3402
|
+
}
|
|
3403
|
+
|
|
3404
|
+
@media (hover: none) {
|
|
3405
|
+
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3406
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
3407
|
+
}
|
|
3204
3408
|
}
|
|
3205
3409
|
|
|
3206
3410
|
.seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
3207
3411
|
color: var(--seed-color-palette-static-white);
|
|
3208
3412
|
}
|
|
3209
3413
|
|
|
3210
|
-
|
|
3211
|
-
|
|
3414
|
+
@media (hover: hover) {
|
|
3415
|
+
.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3416
|
+
background: var(--seed-color-palette-gray-200);
|
|
3417
|
+
}
|
|
3418
|
+
}
|
|
3419
|
+
|
|
3420
|
+
@media (hover: none) {
|
|
3421
|
+
.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3422
|
+
background: var(--seed-color-palette-gray-200);
|
|
3423
|
+
}
|
|
3212
3424
|
}
|
|
3213
3425
|
|
|
3214
3426
|
.seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
3215
3427
|
color: var(--seed-color-fg-neutral);
|
|
3216
3428
|
}
|
|
3217
3429
|
|
|
3218
|
-
|
|
3219
|
-
|
|
3430
|
+
@media (hover: hover) {
|
|
3431
|
+
.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
|
|
3432
|
+
background: var(--seed-color-palette-carrot-200);
|
|
3433
|
+
}
|
|
3434
|
+
}
|
|
3435
|
+
|
|
3436
|
+
@media (hover: none) {
|
|
3437
|
+
.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
|
|
3438
|
+
background: var(--seed-color-palette-carrot-200);
|
|
3439
|
+
}
|
|
3220
3440
|
}
|
|
3221
3441
|
|
|
3222
3442
|
.seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
@@ -3254,19 +3474,22 @@
|
|
|
3254
3474
|
border-radius: var(--seed-radius-full);
|
|
3255
3475
|
transition-duration: var(--seed-duration-color-transition);
|
|
3256
3476
|
transition-timing-function: var(--seed-timing-function-easing);
|
|
3477
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3478
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3257
3479
|
border: none;
|
|
3258
3480
|
flex-shrink: 0;
|
|
3259
3481
|
justify-content: center;
|
|
3260
3482
|
align-items: center;
|
|
3261
3483
|
font-family: inherit;
|
|
3262
3484
|
line-height: 1;
|
|
3263
|
-
transition-property: background-color, color, border-color, box-shadow;
|
|
3485
|
+
transition-property: background-color, color, border-color, box-shadow, outline-color;
|
|
3264
3486
|
display: inline-flex;
|
|
3265
3487
|
position: relative;
|
|
3266
3488
|
}
|
|
3267
3489
|
|
|
3268
|
-
.seed-chip__root:is(:focus, [data-focus]) {
|
|
3269
|
-
outline:
|
|
3490
|
+
.seed-chip__root:is(:focus-visible, [data-focus-visible]) {
|
|
3491
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3492
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3270
3493
|
}
|
|
3271
3494
|
|
|
3272
3495
|
.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3313,12 +3536,28 @@
|
|
|
3313
3536
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
3314
3537
|
}
|
|
3315
3538
|
|
|
3316
|
-
|
|
3317
|
-
|
|
3539
|
+
@media (hover: hover) {
|
|
3540
|
+
.seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3541
|
+
background: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3542
|
+
}
|
|
3318
3543
|
}
|
|
3319
3544
|
|
|
3320
|
-
|
|
3321
|
-
|
|
3545
|
+
@media (hover: none) {
|
|
3546
|
+
.seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3547
|
+
background: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3548
|
+
}
|
|
3549
|
+
}
|
|
3550
|
+
|
|
3551
|
+
@media (hover: hover) {
|
|
3552
|
+
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3553
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3554
|
+
}
|
|
3555
|
+
}
|
|
3556
|
+
|
|
3557
|
+
@media (hover: none) {
|
|
3558
|
+
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3559
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3560
|
+
}
|
|
3322
3561
|
}
|
|
3323
3562
|
|
|
3324
3563
|
.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3343,8 +3582,16 @@
|
|
|
3343
3582
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3344
3583
|
}
|
|
3345
3584
|
|
|
3346
|
-
|
|
3347
|
-
|
|
3585
|
+
@media (hover: hover) {
|
|
3586
|
+
.seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3587
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3588
|
+
}
|
|
3589
|
+
}
|
|
3590
|
+
|
|
3591
|
+
@media (hover: none) {
|
|
3592
|
+
.seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3593
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3594
|
+
}
|
|
3348
3595
|
}
|
|
3349
3596
|
|
|
3350
3597
|
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
|
|
@@ -3352,8 +3599,16 @@
|
|
|
3352
3599
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
3353
3600
|
}
|
|
3354
3601
|
|
|
3355
|
-
|
|
3356
|
-
|
|
3602
|
+
@media (hover: hover) {
|
|
3603
|
+
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3604
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3605
|
+
}
|
|
3606
|
+
}
|
|
3607
|
+
|
|
3608
|
+
@media (hover: none) {
|
|
3609
|
+
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3610
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3611
|
+
}
|
|
3357
3612
|
}
|
|
3358
3613
|
|
|
3359
3614
|
.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3378,8 +3633,16 @@
|
|
|
3378
3633
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3379
3634
|
}
|
|
3380
3635
|
|
|
3381
|
-
|
|
3382
|
-
|
|
3636
|
+
@media (hover: hover) {
|
|
3637
|
+
.seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3638
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3639
|
+
}
|
|
3640
|
+
}
|
|
3641
|
+
|
|
3642
|
+
@media (hover: none) {
|
|
3643
|
+
.seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3644
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
3645
|
+
}
|
|
3383
3646
|
}
|
|
3384
3647
|
|
|
3385
3648
|
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
|
|
@@ -3387,8 +3650,16 @@
|
|
|
3387
3650
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
|
|
3388
3651
|
}
|
|
3389
3652
|
|
|
3390
|
-
|
|
3391
|
-
|
|
3653
|
+
@media (hover: hover) {
|
|
3654
|
+
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3655
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
3656
|
+
}
|
|
3657
|
+
}
|
|
3658
|
+
|
|
3659
|
+
@media (hover: none) {
|
|
3660
|
+
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
|
|
3661
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
3662
|
+
}
|
|
3392
3663
|
}
|
|
3393
3664
|
|
|
3394
3665
|
.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3517,13 +3788,20 @@
|
|
|
3517
3788
|
padding-bottom: var(--seed-dimension-x2);
|
|
3518
3789
|
font-family: inherit;
|
|
3519
3790
|
font-weight: var(--seed-font-weight-medium);
|
|
3520
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
3791
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3792
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3793
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3521
3794
|
border: none;
|
|
3522
3795
|
justify-content: center;
|
|
3523
3796
|
align-items: center;
|
|
3524
3797
|
display: flex;
|
|
3525
3798
|
}
|
|
3526
3799
|
|
|
3800
|
+
.seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
|
|
3801
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
3802
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3803
|
+
}
|
|
3804
|
+
|
|
3527
3805
|
.seed-chip-tabs__list--size_medium {
|
|
3528
3806
|
gap: 8px;
|
|
3529
3807
|
}
|
|
@@ -3556,12 +3834,28 @@
|
|
|
3556
3834
|
color: var(--seed-color-fg-neutral-inverted);
|
|
3557
3835
|
}
|
|
3558
3836
|
|
|
3559
|
-
|
|
3560
|
-
|
|
3837
|
+
@media (hover: hover) {
|
|
3838
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
|
|
3839
|
+
background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3840
|
+
}
|
|
3561
3841
|
}
|
|
3562
3842
|
|
|
3563
|
-
|
|
3564
|
-
|
|
3843
|
+
@media (hover: none) {
|
|
3844
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
|
|
3845
|
+
background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
|
|
3846
|
+
}
|
|
3847
|
+
}
|
|
3848
|
+
|
|
3849
|
+
@media (hover: hover) {
|
|
3850
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
|
|
3851
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3852
|
+
}
|
|
3853
|
+
}
|
|
3854
|
+
|
|
3855
|
+
@media (hover: none) {
|
|
3856
|
+
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
|
|
3857
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3858
|
+
}
|
|
3565
3859
|
}
|
|
3566
3860
|
|
|
3567
3861
|
.seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3586,12 +3880,28 @@
|
|
|
3586
3880
|
border-color: #0000;
|
|
3587
3881
|
}
|
|
3588
3882
|
|
|
3589
|
-
|
|
3590
|
-
|
|
3883
|
+
@media (hover: hover) {
|
|
3884
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
|
|
3885
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3886
|
+
}
|
|
3591
3887
|
}
|
|
3592
3888
|
|
|
3593
|
-
|
|
3594
|
-
|
|
3889
|
+
@media (hover: none) {
|
|
3890
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
|
|
3891
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
3892
|
+
}
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
@media (hover: hover) {
|
|
3896
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
|
|
3897
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3898
|
+
}
|
|
3899
|
+
}
|
|
3900
|
+
|
|
3901
|
+
@media (hover: none) {
|
|
3902
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
|
|
3903
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3904
|
+
}
|
|
3595
3905
|
}
|
|
3596
3906
|
|
|
3597
3907
|
.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3614,12 +3924,28 @@
|
|
|
3614
3924
|
color: var(--seed-color-palette-static-white);
|
|
3615
3925
|
}
|
|
3616
3926
|
|
|
3617
|
-
|
|
3618
|
-
|
|
3927
|
+
@media (hover: hover) {
|
|
3928
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
|
|
3929
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3930
|
+
}
|
|
3619
3931
|
}
|
|
3620
3932
|
|
|
3621
|
-
|
|
3622
|
-
|
|
3933
|
+
@media (hover: none) {
|
|
3934
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
|
|
3935
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
3936
|
+
}
|
|
3937
|
+
}
|
|
3938
|
+
|
|
3939
|
+
@media (hover: hover) {
|
|
3940
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
|
|
3941
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
3942
|
+
}
|
|
3943
|
+
}
|
|
3944
|
+
|
|
3945
|
+
@media (hover: none) {
|
|
3946
|
+
.seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
|
|
3947
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
3948
|
+
}
|
|
3623
3949
|
}
|
|
3624
3950
|
|
|
3625
3951
|
.seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3667,6 +3993,8 @@
|
|
|
3667
3993
|
text-transform: none;
|
|
3668
3994
|
-webkit-font-smoothing: antialiased;
|
|
3669
3995
|
-moz-osx-font-smoothing: grayscale;
|
|
3996
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3997
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3670
3998
|
border: none;
|
|
3671
3999
|
justify-content: center;
|
|
3672
4000
|
align-items: center;
|
|
@@ -3675,8 +4003,9 @@
|
|
|
3675
4003
|
display: inline-flex;
|
|
3676
4004
|
}
|
|
3677
4005
|
|
|
3678
|
-
.seed-contextual-floating-button:is(:focus, [data-focus]) {
|
|
3679
|
-
outline:
|
|
4006
|
+
.seed-contextual-floating-button:is(:focus-visible, [data-focus-visible]) {
|
|
4007
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4008
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3680
4009
|
}
|
|
3681
4010
|
|
|
3682
4011
|
.seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3704,7 +4033,7 @@
|
|
|
3704
4033
|
--seed-icon-size: 22px;
|
|
3705
4034
|
--size: 16px;
|
|
3706
4035
|
--thickness: 2px;
|
|
3707
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
4036
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
3708
4037
|
}
|
|
3709
4038
|
|
|
3710
4039
|
.seed-contextual-floating-button--variant_solid {
|
|
@@ -3716,8 +4045,16 @@
|
|
|
3716
4045
|
--range-color: var(--seed-color-fg-neutral-inverted);
|
|
3717
4046
|
}
|
|
3718
4047
|
|
|
3719
|
-
|
|
3720
|
-
|
|
4048
|
+
@media (hover: hover) {
|
|
4049
|
+
.seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
|
|
4050
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
4051
|
+
}
|
|
4052
|
+
}
|
|
4053
|
+
|
|
4054
|
+
@media (hover: none) {
|
|
4055
|
+
.seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
|
|
4056
|
+
background: var(--seed-color-bg-neutral-inverted-pressed);
|
|
4057
|
+
}
|
|
3721
4058
|
}
|
|
3722
4059
|
|
|
3723
4060
|
.seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3740,8 +4077,16 @@
|
|
|
3740
4077
|
--range-color: var(--seed-color-fg-neutral);
|
|
3741
4078
|
}
|
|
3742
4079
|
|
|
3743
|
-
|
|
3744
|
-
|
|
4080
|
+
@media (hover: hover) {
|
|
4081
|
+
.seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
|
|
4082
|
+
background: var(--seed-color-bg-layer-floating-pressed);
|
|
4083
|
+
}
|
|
4084
|
+
}
|
|
4085
|
+
|
|
4086
|
+
@media (hover: none) {
|
|
4087
|
+
.seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
|
|
4088
|
+
background: var(--seed-color-bg-layer-floating-pressed);
|
|
4089
|
+
}
|
|
3745
4090
|
}
|
|
3746
4091
|
|
|
3747
4092
|
.seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -4381,6 +4726,8 @@
|
|
|
4381
4726
|
text-transform: none;
|
|
4382
4727
|
-webkit-font-smoothing: antialiased;
|
|
4383
4728
|
-moz-osx-font-smoothing: grayscale;
|
|
4729
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4730
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4384
4731
|
border: none;
|
|
4385
4732
|
justify-content: center;
|
|
4386
4733
|
align-items: center;
|
|
@@ -4389,8 +4736,9 @@
|
|
|
4389
4736
|
display: inline-flex;
|
|
4390
4737
|
}
|
|
4391
4738
|
|
|
4392
|
-
.seed-floating-action-button__root:is(:focus, [data-focus]) {
|
|
4393
|
-
outline:
|
|
4739
|
+
.seed-floating-action-button__root:is(:focus-visible, [data-focus-visible]) {
|
|
4740
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4741
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4394
4742
|
}
|
|
4395
4743
|
|
|
4396
4744
|
.seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -4405,13 +4753,21 @@
|
|
|
4405
4753
|
font-size: var(--seed-font-size-t5);
|
|
4406
4754
|
line-height: var(--seed-line-height-t5);
|
|
4407
4755
|
font-weight: var(--seed-font-weight-bold);
|
|
4408
|
-
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);
|
|
4756
|
+
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);
|
|
4409
4757
|
position: relative;
|
|
4410
4758
|
overflow: hidden;
|
|
4411
4759
|
}
|
|
4412
4760
|
|
|
4413
|
-
|
|
4414
|
-
|
|
4761
|
+
@media (hover: hover) {
|
|
4762
|
+
.seed-floating-action-button__root:is(:hover, [data-hover]) {
|
|
4763
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
4764
|
+
}
|
|
4765
|
+
}
|
|
4766
|
+
|
|
4767
|
+
@media (hover: none) {
|
|
4768
|
+
.seed-floating-action-button__root:is(:active, [data-active]) {
|
|
4769
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
4770
|
+
}
|
|
4415
4771
|
}
|
|
4416
4772
|
|
|
4417
4773
|
.seed-floating-action-button__icon {
|
|
@@ -4551,6 +4907,10 @@
|
|
|
4551
4907
|
color: var(--seed-color-fg-neutral-inverted);
|
|
4552
4908
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
4553
4909
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
4910
|
+
border-radius: var(--seed-radius-r3);
|
|
4911
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4912
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4913
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
4554
4914
|
background: none;
|
|
4555
4915
|
border: none;
|
|
4556
4916
|
justify-content: center;
|
|
@@ -4558,10 +4918,15 @@
|
|
|
4558
4918
|
display: flex;
|
|
4559
4919
|
}
|
|
4560
4920
|
|
|
4921
|
+
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
4922
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
4923
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
4924
|
+
}
|
|
4925
|
+
|
|
4561
4926
|
.seed-identity-placeholder__root {
|
|
4562
4927
|
box-sizing: border-box;
|
|
4563
4928
|
vertical-align: top;
|
|
4564
|
-
background-color: var(--seed-color-palette-gray-
|
|
4929
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
4565
4930
|
justify-content: center;
|
|
4566
4931
|
align-items: center;
|
|
4567
4932
|
width: 100%;
|
|
@@ -4572,9 +4937,9 @@
|
|
|
4572
4937
|
|
|
4573
4938
|
.seed-identity-placeholder__image {
|
|
4574
4939
|
object-fit: cover;
|
|
4575
|
-
fill: #f7f8fa;
|
|
4576
4940
|
width: 100%;
|
|
4577
4941
|
height: 100%;
|
|
4942
|
+
fill: var(--seed-color-palette-static-white-alpha-800);
|
|
4578
4943
|
display: block;
|
|
4579
4944
|
overflow: hidden;
|
|
4580
4945
|
}
|
|
@@ -4652,13 +5017,22 @@
|
|
|
4652
5017
|
right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
4653
5018
|
bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
4654
5019
|
left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
5020
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5021
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5022
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4655
5023
|
position: absolute;
|
|
4656
5024
|
}
|
|
4657
5025
|
|
|
4658
|
-
.seed-image-frame-reaction-button:focus {
|
|
5026
|
+
.seed-image-frame-reaction-button:is(:focus, [data-focus]) {
|
|
4659
5027
|
outline: none;
|
|
4660
5028
|
}
|
|
4661
5029
|
|
|
5030
|
+
.seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
|
|
5031
|
+
border-radius: var(--seed-radius-r1);
|
|
5032
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5033
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5034
|
+
}
|
|
5035
|
+
|
|
4662
5036
|
.seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
|
|
4663
5037
|
--seed-icon-color: var(--seed-color-bg-transparent);
|
|
4664
5038
|
}
|
|
@@ -4842,7 +5216,7 @@
|
|
|
4842
5216
|
border-radius: var(--seed-radius-r3);
|
|
4843
5217
|
background-color: var(--seed-color-bg-transparent);
|
|
4844
5218
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
4845
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
5219
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
4846
5220
|
border: none;
|
|
4847
5221
|
padding: 0;
|
|
4848
5222
|
position: absolute;
|
|
@@ -4864,8 +5238,16 @@
|
|
|
4864
5238
|
background-color: var(--seed-color-bg-disabled);
|
|
4865
5239
|
}
|
|
4866
5240
|
|
|
4867
|
-
|
|
4868
|
-
|
|
5241
|
+
@media (hover: hover) {
|
|
5242
|
+
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
|
|
5243
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5244
|
+
}
|
|
5245
|
+
}
|
|
5246
|
+
|
|
5247
|
+
@media (hover: none) {
|
|
5248
|
+
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
|
|
5249
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5250
|
+
}
|
|
4869
5251
|
}
|
|
4870
5252
|
|
|
4871
5253
|
.seed-input-button__button[data-readonly]:not([data-disabled]) {
|
|
@@ -4873,8 +5255,14 @@
|
|
|
4873
5255
|
background-color: var(--seed-color-bg-disabled);
|
|
4874
5256
|
}
|
|
4875
5257
|
|
|
4876
|
-
.seed-input-button__button
|
|
4877
|
-
outline:
|
|
5258
|
+
.seed-input-button__button {
|
|
5259
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5260
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5261
|
+
}
|
|
5262
|
+
|
|
5263
|
+
.seed-input-button__button:is(:focus-visible, [data-focus-visible]) {
|
|
5264
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5265
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4878
5266
|
}
|
|
4879
5267
|
|
|
4880
5268
|
.seed-input-button__button:is(:invalid, [data-invalid]):after {
|
|
@@ -4956,13 +5344,25 @@
|
|
|
4956
5344
|
|
|
4957
5345
|
.seed-input-button__clearButton {
|
|
4958
5346
|
cursor: pointer;
|
|
4959
|
-
--seed-
|
|
4960
|
-
--seed-
|
|
5347
|
+
border-radius: var(--seed-radius-full);
|
|
5348
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5349
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5350
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4961
5351
|
background-color: #0000;
|
|
4962
5352
|
border: none;
|
|
4963
5353
|
padding: 0;
|
|
4964
5354
|
}
|
|
4965
5355
|
|
|
5356
|
+
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
|
|
5357
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5358
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5359
|
+
}
|
|
5360
|
+
|
|
5361
|
+
.seed-input-button__clearButton {
|
|
5362
|
+
--seed-icon-size: 22px;
|
|
5363
|
+
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
5364
|
+
}
|
|
5365
|
+
|
|
4966
5366
|
.seed-link-content {
|
|
4967
5367
|
cursor: pointer;
|
|
4968
5368
|
box-sizing: border-box;
|
|
@@ -5056,6 +5456,7 @@
|
|
|
5056
5456
|
.seed-list-item__prefix {
|
|
5057
5457
|
--seed-box-padding-right: var(--seed-dimension-x3);
|
|
5058
5458
|
padding-right: var(--seed-box-padding-right);
|
|
5459
|
+
--seed-focus-ring: none;
|
|
5059
5460
|
--seed-icon-size: 22px;
|
|
5060
5461
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
5061
5462
|
flex-shrink: 0;
|
|
@@ -5073,6 +5474,7 @@
|
|
|
5073
5474
|
--seed-box-gap: var(--seed-dimension-x1);
|
|
5074
5475
|
align-items: center;
|
|
5075
5476
|
gap: var(--seed-box-gap);
|
|
5477
|
+
--seed-focus-ring: none;
|
|
5076
5478
|
font-size: var(--seed-font-size-t5);
|
|
5077
5479
|
line-height: var(--seed-line-height-t5);
|
|
5078
5480
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -5106,10 +5508,22 @@
|
|
|
5106
5508
|
|
|
5107
5509
|
.seed-list-item__content:after {
|
|
5108
5510
|
content: "";
|
|
5511
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5512
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5513
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5109
5514
|
position: absolute;
|
|
5110
5515
|
inset: 0;
|
|
5111
5516
|
}
|
|
5112
5517
|
|
|
5518
|
+
.seed-list-item__content:is(:focus, [data-focus]) {
|
|
5519
|
+
outline: none;
|
|
5520
|
+
}
|
|
5521
|
+
|
|
5522
|
+
.seed-list-item__content:is(:focus-visible, [data-focus-visible]):after {
|
|
5523
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5524
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5525
|
+
}
|
|
5526
|
+
|
|
5113
5527
|
.seed-list-item__content:before {
|
|
5114
5528
|
content: "";
|
|
5115
5529
|
z-index: -1;
|
|
@@ -5120,17 +5534,46 @@
|
|
|
5120
5534
|
inset: 0;
|
|
5121
5535
|
}
|
|
5122
5536
|
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5537
|
+
@media (hover: hover) {
|
|
5538
|
+
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
|
|
5539
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5540
|
+
left: var(--seed-dimension-x1_5);
|
|
5541
|
+
right: var(--seed-dimension-x1_5);
|
|
5542
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5543
|
+
}
|
|
5544
|
+
}
|
|
5545
|
+
|
|
5546
|
+
@media (hover: none) {
|
|
5547
|
+
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
|
|
5548
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5549
|
+
left: var(--seed-dimension-x1_5);
|
|
5550
|
+
right: var(--seed-dimension-x1_5);
|
|
5551
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5552
|
+
}
|
|
5553
|
+
}
|
|
5554
|
+
|
|
5555
|
+
@media (hover: hover) {
|
|
5556
|
+
.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
|
|
5557
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5558
|
+
left: var(--seed-dimension-x1_5);
|
|
5559
|
+
right: var(--seed-dimension-x1_5);
|
|
5560
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5561
|
+
}
|
|
5562
|
+
}
|
|
5563
|
+
|
|
5564
|
+
@media (hover: none) {
|
|
5565
|
+
.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
|
|
5566
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
5567
|
+
left: var(--seed-dimension-x1_5);
|
|
5568
|
+
right: var(--seed-dimension-x1_5);
|
|
5569
|
+
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
|
|
5570
|
+
}
|
|
5128
5571
|
}
|
|
5129
5572
|
|
|
5130
5573
|
.seed-list-item__title {
|
|
5131
5574
|
font-size: var(--seed-font-size-t5);
|
|
5132
5575
|
line-height: var(--seed-line-height-t5);
|
|
5133
|
-
font-weight: var(--seed-font-weight-
|
|
5576
|
+
font-weight: var(--seed-font-weight-regular);
|
|
5134
5577
|
color: var(--seed-color-fg-neutral);
|
|
5135
5578
|
flex-shrink: 0;
|
|
5136
5579
|
}
|
|
@@ -5154,8 +5597,28 @@
|
|
|
5154
5597
|
background-color: var(--seed-color-bg-brand-weak);
|
|
5155
5598
|
}
|
|
5156
5599
|
|
|
5157
|
-
|
|
5158
|
-
|
|
5600
|
+
@media (hover: hover) {
|
|
5601
|
+
.seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
|
|
5602
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5603
|
+
}
|
|
5604
|
+
}
|
|
5605
|
+
|
|
5606
|
+
@media (hover: none) {
|
|
5607
|
+
.seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
|
|
5608
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5609
|
+
}
|
|
5610
|
+
}
|
|
5611
|
+
|
|
5612
|
+
@media (hover: hover) {
|
|
5613
|
+
.seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
|
|
5614
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5615
|
+
}
|
|
5616
|
+
}
|
|
5617
|
+
|
|
5618
|
+
@media (hover: none) {
|
|
5619
|
+
.seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
|
|
5620
|
+
background-color: var(--seed-color-bg-brand-weak-pressed);
|
|
5621
|
+
}
|
|
5159
5622
|
}
|
|
5160
5623
|
|
|
5161
5624
|
.seed-manner-temp {
|
|
@@ -5380,15 +5843,33 @@
|
|
|
5380
5843
|
font-size: var(--seed-font-size-t5);
|
|
5381
5844
|
line-height: var(--seed-line-height-t5);
|
|
5382
5845
|
font-weight: var(--seed-font-weight-medium);
|
|
5846
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5383
5847
|
border: none;
|
|
5384
|
-
outline: none;
|
|
5385
5848
|
justify-content: center;
|
|
5386
5849
|
align-items: center;
|
|
5387
5850
|
display: flex;
|
|
5388
5851
|
}
|
|
5389
5852
|
|
|
5390
|
-
|
|
5391
|
-
|
|
5853
|
+
@media (hover: hover) {
|
|
5854
|
+
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
|
|
5855
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5856
|
+
}
|
|
5857
|
+
}
|
|
5858
|
+
|
|
5859
|
+
@media (hover: none) {
|
|
5860
|
+
.seed-menu-sheet__closeButton:is(:active, [data-active]) {
|
|
5861
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5862
|
+
}
|
|
5863
|
+
}
|
|
5864
|
+
|
|
5865
|
+
.seed-menu-sheet__closeButton {
|
|
5866
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5867
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5868
|
+
}
|
|
5869
|
+
|
|
5870
|
+
.seed-menu-sheet__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
5871
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5872
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5392
5873
|
}
|
|
5393
5874
|
|
|
5394
5875
|
.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
|
|
@@ -5444,20 +5925,45 @@
|
|
|
5444
5925
|
gap: var(--seed-dimension-x3_5);
|
|
5445
5926
|
box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
|
|
5446
5927
|
border: none;
|
|
5447
|
-
outline: none;
|
|
5448
5928
|
margin: 0;
|
|
5449
5929
|
font-family: inherit;
|
|
5450
5930
|
display: flex;
|
|
5451
5931
|
}
|
|
5452
5932
|
|
|
5453
|
-
|
|
5454
|
-
|
|
5933
|
+
@media (hover: hover) {
|
|
5934
|
+
.seed-menu-sheet-item__root:is(:hover, [data-hover]) {
|
|
5935
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5936
|
+
}
|
|
5937
|
+
}
|
|
5938
|
+
|
|
5939
|
+
@media (hover: none) {
|
|
5940
|
+
.seed-menu-sheet-item__root:is(:active, [data-active]) {
|
|
5941
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
5942
|
+
}
|
|
5943
|
+
}
|
|
5944
|
+
|
|
5945
|
+
.seed-menu-sheet-item__root:first-child {
|
|
5946
|
+
border-top-left-radius: var(--seed-radius-r4);
|
|
5947
|
+
border-top-right-radius: var(--seed-radius-r4);
|
|
5455
5948
|
}
|
|
5456
5949
|
|
|
5457
5950
|
.seed-menu-sheet-item__root:last-child {
|
|
5951
|
+
border-bottom-left-radius: var(--seed-radius-r4);
|
|
5952
|
+
border-bottom-right-radius: var(--seed-radius-r4);
|
|
5458
5953
|
box-shadow: none;
|
|
5459
5954
|
}
|
|
5460
5955
|
|
|
5956
|
+
.seed-menu-sheet-item__root {
|
|
5957
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5958
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
5959
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5960
|
+
}
|
|
5961
|
+
|
|
5962
|
+
.seed-menu-sheet-item__root:is(:focus-visible, [data-focus-visible]) {
|
|
5963
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
5964
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5965
|
+
}
|
|
5966
|
+
|
|
5461
5967
|
.seed-menu-sheet-item__root {
|
|
5462
5968
|
--seed-prefix-icon-size: 22px;
|
|
5463
5969
|
}
|
|
@@ -5601,6 +6107,14 @@
|
|
|
5601
6107
|
|
|
5602
6108
|
.seed-page-banner__root:is(button) {
|
|
5603
6109
|
cursor: pointer;
|
|
6110
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6111
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6112
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6113
|
+
}
|
|
6114
|
+
|
|
6115
|
+
.seed-page-banner__root:is(button):is(:focus-visible, [data-focus-visible]) {
|
|
6116
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6117
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5604
6118
|
}
|
|
5605
6119
|
|
|
5606
6120
|
.seed-page-banner__content {
|
|
@@ -5643,12 +6157,21 @@
|
|
|
5643
6157
|
font-size: var(--seed-font-size-t3);
|
|
5644
6158
|
line-height: var(--seed-line-height-t3);
|
|
5645
6159
|
font-weight: var(--seed-font-weight-bold);
|
|
6160
|
+
border-radius: var(--seed-radius-r1);
|
|
6161
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6162
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6163
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5646
6164
|
background-color: #0000;
|
|
5647
6165
|
border: none;
|
|
5648
6166
|
align-items: center;
|
|
5649
6167
|
display: flex;
|
|
5650
6168
|
}
|
|
5651
6169
|
|
|
6170
|
+
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
|
|
6171
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6172
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6173
|
+
}
|
|
6174
|
+
|
|
5652
6175
|
.seed-page-banner__closeButton {
|
|
5653
6176
|
width: var(--seed-dimension-x10);
|
|
5654
6177
|
height: var(--seed-dimension-x10);
|
|
@@ -5656,6 +6179,10 @@
|
|
|
5656
6179
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
5657
6180
|
--seed-suffix-icon-margin-left: initial;
|
|
5658
6181
|
cursor: pointer;
|
|
6182
|
+
border-radius: var(--seed-radius-r1);
|
|
6183
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6184
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6185
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
5659
6186
|
background-color: #0000;
|
|
5660
6187
|
border: none;
|
|
5661
6188
|
flex-grow: 0;
|
|
@@ -5667,14 +6194,27 @@
|
|
|
5667
6194
|
display: flex;
|
|
5668
6195
|
}
|
|
5669
6196
|
|
|
6197
|
+
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
|
|
6198
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6199
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6200
|
+
}
|
|
6201
|
+
|
|
5670
6202
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
5671
6203
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
5672
6204
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
5673
6205
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
5674
6206
|
}
|
|
5675
6207
|
|
|
5676
|
-
|
|
5677
|
-
|
|
6208
|
+
@media (hover: hover) {
|
|
6209
|
+
.seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6210
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6211
|
+
}
|
|
6212
|
+
}
|
|
6213
|
+
|
|
6214
|
+
@media (hover: none) {
|
|
6215
|
+
.seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
|
|
6216
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6217
|
+
}
|
|
5678
6218
|
}
|
|
5679
6219
|
|
|
5680
6220
|
.seed-page-banner__title--tone_neutral-variant_weak, .seed-page-banner__description--tone_neutral-variant_weak, .seed-page-banner__button--tone_neutral-variant_weak {
|
|
@@ -5687,8 +6227,16 @@
|
|
|
5687
6227
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
5688
6228
|
}
|
|
5689
6229
|
|
|
5690
|
-
|
|
5691
|
-
|
|
6230
|
+
@media (hover: hover) {
|
|
6231
|
+
.seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6232
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6233
|
+
}
|
|
6234
|
+
}
|
|
6235
|
+
|
|
6236
|
+
@media (hover: none) {
|
|
6237
|
+
.seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
|
|
6238
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6239
|
+
}
|
|
5692
6240
|
}
|
|
5693
6241
|
|
|
5694
6242
|
.seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
|
|
@@ -5701,8 +6249,16 @@
|
|
|
5701
6249
|
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
5702
6250
|
}
|
|
5703
6251
|
|
|
5704
|
-
|
|
5705
|
-
|
|
6252
|
+
@media (hover: hover) {
|
|
6253
|
+
.seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6254
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
6255
|
+
}
|
|
6256
|
+
}
|
|
6257
|
+
|
|
6258
|
+
@media (hover: none) {
|
|
6259
|
+
.seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
|
|
6260
|
+
background-color: var(--seed-color-bg-informative-weak-pressed);
|
|
6261
|
+
}
|
|
5706
6262
|
}
|
|
5707
6263
|
|
|
5708
6264
|
.seed-page-banner__title--tone_informative-variant_weak, .seed-page-banner__description--tone_informative-variant_weak, .seed-page-banner__button--tone_informative-variant_weak {
|
|
@@ -5715,8 +6271,16 @@
|
|
|
5715
6271
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5716
6272
|
}
|
|
5717
6273
|
|
|
5718
|
-
|
|
5719
|
-
|
|
6274
|
+
@media (hover: hover) {
|
|
6275
|
+
.seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6276
|
+
background-color: var(--seed-color-bg-informative-solid-pressed);
|
|
6277
|
+
}
|
|
6278
|
+
}
|
|
6279
|
+
|
|
6280
|
+
@media (hover: none) {
|
|
6281
|
+
.seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
|
|
6282
|
+
background-color: var(--seed-color-bg-informative-solid-pressed);
|
|
6283
|
+
}
|
|
5720
6284
|
}
|
|
5721
6285
|
|
|
5722
6286
|
.seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
|
|
@@ -5729,8 +6293,16 @@
|
|
|
5729
6293
|
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
5730
6294
|
}
|
|
5731
6295
|
|
|
5732
|
-
|
|
5733
|
-
|
|
6296
|
+
@media (hover: hover) {
|
|
6297
|
+
.seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6298
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
6299
|
+
}
|
|
6300
|
+
}
|
|
6301
|
+
|
|
6302
|
+
@media (hover: none) {
|
|
6303
|
+
.seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
|
|
6304
|
+
background-color: var(--seed-color-bg-positive-weak-pressed);
|
|
6305
|
+
}
|
|
5734
6306
|
}
|
|
5735
6307
|
|
|
5736
6308
|
.seed-page-banner__title--tone_positive-variant_weak, .seed-page-banner__description--tone_positive-variant_weak, .seed-page-banner__button--tone_positive-variant_weak {
|
|
@@ -5743,8 +6315,16 @@
|
|
|
5743
6315
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5744
6316
|
}
|
|
5745
6317
|
|
|
5746
|
-
|
|
5747
|
-
|
|
6318
|
+
@media (hover: hover) {
|
|
6319
|
+
.seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6320
|
+
background-color: var(--seed-color-bg-positive-solid-pressed);
|
|
6321
|
+
}
|
|
6322
|
+
}
|
|
6323
|
+
|
|
6324
|
+
@media (hover: none) {
|
|
6325
|
+
.seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
|
|
6326
|
+
background-color: var(--seed-color-bg-positive-solid-pressed);
|
|
6327
|
+
}
|
|
5748
6328
|
}
|
|
5749
6329
|
|
|
5750
6330
|
.seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
|
|
@@ -5757,8 +6337,16 @@
|
|
|
5757
6337
|
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
5758
6338
|
}
|
|
5759
6339
|
|
|
5760
|
-
|
|
5761
|
-
|
|
6340
|
+
@media (hover: hover) {
|
|
6341
|
+
.seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6342
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
6343
|
+
}
|
|
6344
|
+
}
|
|
6345
|
+
|
|
6346
|
+
@media (hover: none) {
|
|
6347
|
+
.seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
|
|
6348
|
+
background-color: var(--seed-color-bg-warning-weak-pressed);
|
|
6349
|
+
}
|
|
5762
6350
|
}
|
|
5763
6351
|
|
|
5764
6352
|
.seed-page-banner__title--tone_warning-variant_weak, .seed-page-banner__description--tone_warning-variant_weak, .seed-page-banner__button--tone_warning-variant_weak {
|
|
@@ -5771,8 +6359,16 @@
|
|
|
5771
6359
|
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
5772
6360
|
}
|
|
5773
6361
|
|
|
5774
|
-
|
|
5775
|
-
|
|
6362
|
+
@media (hover: hover) {
|
|
6363
|
+
.seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6364
|
+
background-color: var(--seed-color-bg-warning-solid-pressed);
|
|
6365
|
+
}
|
|
6366
|
+
}
|
|
6367
|
+
|
|
6368
|
+
@media (hover: none) {
|
|
6369
|
+
.seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
|
|
6370
|
+
background-color: var(--seed-color-bg-warning-solid-pressed);
|
|
6371
|
+
}
|
|
5776
6372
|
}
|
|
5777
6373
|
|
|
5778
6374
|
.seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
|
|
@@ -5785,8 +6381,16 @@
|
|
|
5785
6381
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
5786
6382
|
}
|
|
5787
6383
|
|
|
5788
|
-
|
|
5789
|
-
|
|
6384
|
+
@media (hover: hover) {
|
|
6385
|
+
.seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6386
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
6387
|
+
}
|
|
6388
|
+
}
|
|
6389
|
+
|
|
6390
|
+
@media (hover: none) {
|
|
6391
|
+
.seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
|
|
6392
|
+
background-color: var(--seed-color-bg-critical-weak-pressed);
|
|
6393
|
+
}
|
|
5790
6394
|
}
|
|
5791
6395
|
|
|
5792
6396
|
.seed-page-banner__title--tone_critical-variant_weak, .seed-page-banner__description--tone_critical-variant_weak, .seed-page-banner__button--tone_critical-variant_weak {
|
|
@@ -5799,8 +6403,16 @@
|
|
|
5799
6403
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5800
6404
|
}
|
|
5801
6405
|
|
|
5802
|
-
|
|
5803
|
-
|
|
6406
|
+
@media (hover: hover) {
|
|
6407
|
+
.seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
|
|
6408
|
+
background-color: var(--seed-color-bg-critical-solid-pressed);
|
|
6409
|
+
}
|
|
6410
|
+
}
|
|
6411
|
+
|
|
6412
|
+
@media (hover: none) {
|
|
6413
|
+
.seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
|
|
6414
|
+
background-color: var(--seed-color-bg-critical-solid-pressed);
|
|
6415
|
+
}
|
|
5804
6416
|
}
|
|
5805
6417
|
|
|
5806
6418
|
.seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
|
|
@@ -5813,8 +6425,16 @@
|
|
|
5813
6425
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
5814
6426
|
}
|
|
5815
6427
|
|
|
5816
|
-
|
|
5817
|
-
|
|
6428
|
+
@media (hover: hover) {
|
|
6429
|
+
.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
|
|
6430
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
6431
|
+
}
|
|
6432
|
+
}
|
|
6433
|
+
|
|
6434
|
+
@media (hover: none) {
|
|
6435
|
+
.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
|
|
6436
|
+
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
|
|
6437
|
+
}
|
|
5818
6438
|
}
|
|
5819
6439
|
|
|
5820
6440
|
.seed-page-banner__title--tone_magic-variant_weak, .seed-page-banner__description--tone_magic-variant_weak, .seed-page-banner__button--tone_magic-variant_weak {
|
|
@@ -5956,7 +6576,9 @@
|
|
|
5956
6576
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
5957
6577
|
border-radius: var(--seed-radius-full);
|
|
5958
6578
|
margin-top: var(--radiomark-margin-top, 0);
|
|
5959
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
6579
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6580
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
6581
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
5960
6582
|
flex: none;
|
|
5961
6583
|
justify-content: center;
|
|
5962
6584
|
align-items: center;
|
|
@@ -5964,8 +6586,16 @@
|
|
|
5964
6586
|
position: relative;
|
|
5965
6587
|
}
|
|
5966
6588
|
|
|
5967
|
-
|
|
5968
|
-
|
|
6589
|
+
@media (hover: hover) {
|
|
6590
|
+
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
6591
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6592
|
+
}
|
|
6593
|
+
}
|
|
6594
|
+
|
|
6595
|
+
@media (hover: none) {
|
|
6596
|
+
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6597
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6598
|
+
}
|
|
5969
6599
|
}
|
|
5970
6600
|
|
|
5971
6601
|
.seed-radiomark__root:is(:checked, [data-checked]) {
|
|
@@ -5982,6 +6612,11 @@
|
|
|
5982
6612
|
border-color: var(--seed-color-palette-gray-300);
|
|
5983
6613
|
}
|
|
5984
6614
|
|
|
6615
|
+
.seed-radiomark__root:is(:focus-visible, [data-focus-visible]) {
|
|
6616
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
6617
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6618
|
+
}
|
|
6619
|
+
|
|
5985
6620
|
.seed-radiomark__icon {
|
|
5986
6621
|
border-radius: var(--seed-radius-full);
|
|
5987
6622
|
display: none;
|
|
@@ -5999,8 +6634,16 @@
|
|
|
5999
6634
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
6000
6635
|
}
|
|
6001
6636
|
|
|
6002
|
-
|
|
6003
|
-
|
|
6637
|
+
@media (hover: hover) {
|
|
6638
|
+
.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
|
|
6639
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6640
|
+
}
|
|
6641
|
+
}
|
|
6642
|
+
|
|
6643
|
+
@media (hover: none) {
|
|
6644
|
+
.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
6645
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
6646
|
+
}
|
|
6004
6647
|
}
|
|
6005
6648
|
|
|
6006
6649
|
.seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
|
|
@@ -6011,8 +6654,16 @@
|
|
|
6011
6654
|
background-color: var(--seed-color-bg-brand-solid);
|
|
6012
6655
|
}
|
|
6013
6656
|
|
|
6014
|
-
|
|
6015
|
-
|
|
6657
|
+
@media (hover: hover) {
|
|
6658
|
+
.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
|
|
6659
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
6660
|
+
}
|
|
6661
|
+
}
|
|
6662
|
+
|
|
6663
|
+
@media (hover: none) {
|
|
6664
|
+
.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
6665
|
+
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
6666
|
+
}
|
|
6016
6667
|
}
|
|
6017
6668
|
|
|
6018
6669
|
.seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
|
|
@@ -6057,6 +6708,8 @@
|
|
|
6057
6708
|
vertical-align: middle;
|
|
6058
6709
|
-webkit-font-smoothing: antialiased;
|
|
6059
6710
|
-moz-osx-font-smoothing: grayscale;
|
|
6711
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6712
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6060
6713
|
border: none;
|
|
6061
6714
|
flex-shrink: 0;
|
|
6062
6715
|
justify-content: center;
|
|
@@ -6067,12 +6720,13 @@
|
|
|
6067
6720
|
position: relative;
|
|
6068
6721
|
}
|
|
6069
6722
|
|
|
6070
|
-
.seed-reaction-button:is(:focus, [data-focus]) {
|
|
6071
|
-
outline:
|
|
6723
|
+
.seed-reaction-button:is(:focus-visible, [data-focus-visible]) {
|
|
6724
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6725
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6072
6726
|
}
|
|
6073
6727
|
|
|
6074
6728
|
.seed-reaction-button {
|
|
6075
|
-
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);
|
|
6729
|
+
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);
|
|
6076
6730
|
background: var(--seed-color-bg-transparent);
|
|
6077
6731
|
font-weight: var(--seed-font-weight-medium);
|
|
6078
6732
|
color: var(--seed-color-fg-neutral);
|
|
@@ -6083,8 +6737,16 @@
|
|
|
6083
6737
|
--seed-count-color: var(--seed-color-fg-neutral);
|
|
6084
6738
|
}
|
|
6085
6739
|
|
|
6086
|
-
|
|
6087
|
-
|
|
6740
|
+
@media (hover: hover) {
|
|
6741
|
+
.seed-reaction-button:is(:hover, [data-hover]) {
|
|
6742
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6743
|
+
}
|
|
6744
|
+
}
|
|
6745
|
+
|
|
6746
|
+
@media (hover: none) {
|
|
6747
|
+
.seed-reaction-button:is(:active, [data-active]) {
|
|
6748
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6749
|
+
}
|
|
6088
6750
|
}
|
|
6089
6751
|
|
|
6090
6752
|
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -6095,8 +6757,16 @@
|
|
|
6095
6757
|
--seed-count-color: var(--seed-color-fg-brand);
|
|
6096
6758
|
}
|
|
6097
6759
|
|
|
6098
|
-
|
|
6099
|
-
|
|
6760
|
+
@media (hover: hover) {
|
|
6761
|
+
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
|
|
6762
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6763
|
+
}
|
|
6764
|
+
}
|
|
6765
|
+
|
|
6766
|
+
@media (hover: none) {
|
|
6767
|
+
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
|
|
6768
|
+
background: var(--seed-color-bg-transparent-pressed);
|
|
6769
|
+
}
|
|
6100
6770
|
}
|
|
6101
6771
|
|
|
6102
6772
|
.seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -6230,7 +6900,7 @@
|
|
|
6230
6900
|
font-size: var(--seed-font-size-t5);
|
|
6231
6901
|
line-height: var(--seed-line-height-t5);
|
|
6232
6902
|
color: var(--seed-color-fg-neutral-subtle);
|
|
6233
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
6903
|
+
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);
|
|
6234
6904
|
display: flex;
|
|
6235
6905
|
}
|
|
6236
6906
|
|
|
@@ -6238,6 +6908,16 @@
|
|
|
6238
6908
|
color: var(--seed-color-fg-neutral);
|
|
6239
6909
|
}
|
|
6240
6910
|
|
|
6911
|
+
.seed-segmented-control__item {
|
|
6912
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6913
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6914
|
+
}
|
|
6915
|
+
|
|
6916
|
+
.seed-segmented-control__item:is(:focus-visible, [data-focus-visible]) {
|
|
6917
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
6918
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6919
|
+
}
|
|
6920
|
+
|
|
6241
6921
|
.seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
|
|
6242
6922
|
cursor: not-allowed;
|
|
6243
6923
|
color: var(--seed-color-fg-disabled);
|
|
@@ -6248,12 +6928,32 @@
|
|
|
6248
6928
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6249
6929
|
}
|
|
6250
6930
|
|
|
6251
|
-
|
|
6252
|
-
|
|
6931
|
+
@media (hover: hover) {
|
|
6932
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
|
|
6933
|
+
background-color: var(--seed-color-palette-gray-100);
|
|
6934
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6935
|
+
}
|
|
6253
6936
|
}
|
|
6254
6937
|
|
|
6255
|
-
|
|
6256
|
-
|
|
6938
|
+
@media (hover: none) {
|
|
6939
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
6940
|
+
background-color: var(--seed-color-palette-gray-100);
|
|
6941
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6942
|
+
}
|
|
6943
|
+
}
|
|
6944
|
+
|
|
6945
|
+
@media (hover: hover) {
|
|
6946
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
|
|
6947
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6948
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6949
|
+
}
|
|
6950
|
+
}
|
|
6951
|
+
|
|
6952
|
+
@media (hover: none) {
|
|
6953
|
+
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
|
|
6954
|
+
background-color: var(--seed-color-bg-neutral-weak-pressed);
|
|
6955
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6956
|
+
}
|
|
6257
6957
|
}
|
|
6258
6958
|
|
|
6259
6959
|
.seed-select-box__root {
|
|
@@ -6261,7 +6961,7 @@
|
|
|
6261
6961
|
border-radius: var(--seed-radius-r3);
|
|
6262
6962
|
background-color: var(--seed-color-bg-transparent);
|
|
6263
6963
|
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);
|
|
6964
|
+
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
6965
|
flex-direction: column;
|
|
6266
6966
|
display: flex;
|
|
6267
6967
|
position: relative;
|
|
@@ -6278,8 +6978,16 @@
|
|
|
6278
6978
|
inset: 0;
|
|
6279
6979
|
}
|
|
6280
6980
|
|
|
6281
|
-
|
|
6282
|
-
|
|
6981
|
+
@media (hover: hover) {
|
|
6982
|
+
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
6983
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6984
|
+
}
|
|
6985
|
+
}
|
|
6986
|
+
|
|
6987
|
+
@media (hover: none) {
|
|
6988
|
+
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
6989
|
+
background-color: var(--seed-color-bg-transparent-pressed);
|
|
6990
|
+
}
|
|
6283
6991
|
}
|
|
6284
6992
|
|
|
6285
6993
|
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
|
|
@@ -6296,9 +7004,20 @@
|
|
|
6296
7004
|
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
|
|
6297
7005
|
}
|
|
6298
7006
|
|
|
7007
|
+
.seed-select-box__root {
|
|
7008
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7009
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7010
|
+
}
|
|
7011
|
+
|
|
7012
|
+
.seed-select-box__root:is(:focus-visible, [data-focus-visible]) {
|
|
7013
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7014
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7015
|
+
}
|
|
7016
|
+
|
|
6299
7017
|
.seed-select-box__trigger {
|
|
6300
7018
|
justify-content: space-between;
|
|
6301
7019
|
gap: var(--seed-dimension-x1_5);
|
|
7020
|
+
--seed-focus-ring: none;
|
|
6302
7021
|
flex-grow: 1;
|
|
6303
7022
|
display: flex;
|
|
6304
7023
|
}
|
|
@@ -6405,8 +7124,16 @@
|
|
|
6405
7124
|
inset: 0;
|
|
6406
7125
|
}
|
|
6407
7126
|
|
|
6408
|
-
|
|
6409
|
-
|
|
7127
|
+
@media (hover: hover) {
|
|
7128
|
+
.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
|
|
7129
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
7130
|
+
}
|
|
7131
|
+
}
|
|
7132
|
+
|
|
7133
|
+
@media (hover: none) {
|
|
7134
|
+
.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
|
|
7135
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
7136
|
+
}
|
|
6410
7137
|
}
|
|
6411
7138
|
|
|
6412
7139
|
.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
|
|
@@ -6494,6 +7221,14 @@
|
|
|
6494
7221
|
display: flex;
|
|
6495
7222
|
}
|
|
6496
7223
|
|
|
7224
|
+
.seed-slider__root[data-dragging] {
|
|
7225
|
+
cursor: grabbing;
|
|
7226
|
+
}
|
|
7227
|
+
|
|
7228
|
+
.seed-slider__root:is(:disabled, [disabled], [data-disabled]) {
|
|
7229
|
+
cursor: not-allowed;
|
|
7230
|
+
}
|
|
7231
|
+
|
|
6497
7232
|
.seed-slider__control {
|
|
6498
7233
|
align-items: center;
|
|
6499
7234
|
height: 26px;
|
|
@@ -6562,14 +7297,18 @@
|
|
|
6562
7297
|
content: "";
|
|
6563
7298
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
6564
7299
|
border-radius: var(--seed-radius-full);
|
|
6565
|
-
|
|
7300
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7301
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7302
|
+
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
6566
7303
|
will-change: transform;
|
|
7304
|
+
cursor: grab;
|
|
6567
7305
|
position: absolute;
|
|
6568
7306
|
inset: 0;
|
|
6569
7307
|
}
|
|
6570
7308
|
|
|
6571
7309
|
.seed-slider__thumb:is(:disabled, [disabled], [data-disabled]):after {
|
|
6572
7310
|
background-color: var(--seed-color-fg-disabled);
|
|
7311
|
+
cursor: not-allowed;
|
|
6573
7312
|
}
|
|
6574
7313
|
|
|
6575
7314
|
.seed-slider__thumb[data-dragging] {
|
|
@@ -6584,6 +7323,11 @@
|
|
|
6584
7323
|
outline: none;
|
|
6585
7324
|
}
|
|
6586
7325
|
|
|
7326
|
+
.seed-slider__thumb:is(:focus-visible, [data-focus-visible]):after {
|
|
7327
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7328
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7329
|
+
}
|
|
7330
|
+
|
|
6587
7331
|
.seed-slider__markers {
|
|
6588
7332
|
height: var(--seed-line-height-t3);
|
|
6589
7333
|
position: relative;
|
|
@@ -6591,21 +7335,24 @@
|
|
|
6591
7335
|
|
|
6592
7336
|
.seed-slider__valueIndicatorRoot {
|
|
6593
7337
|
box-sizing: border-box;
|
|
7338
|
+
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7339
|
+
will-change: left, right;
|
|
6594
7340
|
background: var(--seed-color-bg-neutral-inverted);
|
|
6595
|
-
padding-left: var(--seed-dimension-
|
|
6596
|
-
padding-right: var(--seed-dimension-
|
|
6597
|
-
padding-top: var(--seed-dimension-
|
|
6598
|
-
padding-bottom: var(--seed-dimension-
|
|
6599
|
-
border-radius: var(--seed-radius-
|
|
7341
|
+
padding-left: var(--seed-dimension-x2);
|
|
7342
|
+
padding-right: var(--seed-dimension-x2);
|
|
7343
|
+
padding-top: var(--seed-dimension-x1);
|
|
7344
|
+
padding-bottom: var(--seed-dimension-x1);
|
|
7345
|
+
border-radius: var(--seed-radius-r1_5);
|
|
6600
7346
|
color: var(--seed-color-fg-neutral-inverted);
|
|
6601
|
-
font-size: var(--seed-font-size-
|
|
6602
|
-
line-height: var(--seed-line-height-
|
|
7347
|
+
font-size: var(--seed-font-size-t3);
|
|
7348
|
+
line-height: var(--seed-line-height-t3);
|
|
6603
7349
|
font-weight: var(--seed-font-weight-medium);
|
|
6604
7350
|
white-space: pre-wrap;
|
|
6605
7351
|
text-align: center;
|
|
7352
|
+
width: max-content;
|
|
7353
|
+
min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
|
|
6606
7354
|
flex-direction: column;
|
|
6607
7355
|
align-items: center;
|
|
6608
|
-
width: max-content;
|
|
6609
7356
|
display: flex;
|
|
6610
7357
|
position: absolute;
|
|
6611
7358
|
top: 50%;
|
|
@@ -6626,7 +7373,7 @@
|
|
|
6626
7373
|
animation-timing-function: var(--seed-timing-function-enter);
|
|
6627
7374
|
animation-duration: var(--seed-duration-d4);
|
|
6628
7375
|
--seed-enter-translate-x: -50%;
|
|
6629
|
-
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
|
|
7376
|
+
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
|
|
6630
7377
|
--seed-enter-opacity: 0;
|
|
6631
7378
|
--seed-enter-scale: .9;
|
|
6632
7379
|
}
|
|
@@ -6636,7 +7383,7 @@
|
|
|
6636
7383
|
animation-timing-function: var(--seed-timing-function-enter);
|
|
6637
7384
|
animation-duration: var(--seed-duration-d4);
|
|
6638
7385
|
--seed-enter-translate-x: 50%;
|
|
6639
|
-
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
|
|
7386
|
+
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
|
|
6640
7387
|
--seed-enter-opacity: 0;
|
|
6641
7388
|
--seed-enter-scale: .9;
|
|
6642
7389
|
}
|
|
@@ -6646,7 +7393,7 @@
|
|
|
6646
7393
|
animation-timing-function: var(--seed-timing-function-easing);
|
|
6647
7394
|
animation-duration: var(--seed-duration-d4);
|
|
6648
7395
|
--seed-exit-translate-x: -50%;
|
|
6649
|
-
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
|
|
7396
|
+
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
|
|
6650
7397
|
--seed-exit-opacity: 0;
|
|
6651
7398
|
--seed-exit-scale: 1;
|
|
6652
7399
|
animation-fill-mode: forwards;
|
|
@@ -6657,19 +7404,25 @@
|
|
|
6657
7404
|
animation-timing-function: var(--seed-timing-function-easing);
|
|
6658
7405
|
animation-duration: var(--seed-duration-d4);
|
|
6659
7406
|
--seed-exit-translate-x: 50%;
|
|
6660
|
-
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
|
|
7407
|
+
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
|
|
6661
7408
|
--seed-exit-opacity: 0;
|
|
6662
7409
|
--seed-exit-scale: 1;
|
|
6663
7410
|
animation-fill-mode: forwards;
|
|
6664
7411
|
}
|
|
6665
7412
|
|
|
7413
|
+
.seed-slider__valueIndicatorRoot[data-dragging] {
|
|
7414
|
+
transition: none;
|
|
7415
|
+
}
|
|
7416
|
+
|
|
6666
7417
|
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
|
|
6667
7418
|
animation-duration: 0s;
|
|
6668
7419
|
}
|
|
6669
7420
|
|
|
6670
7421
|
.seed-slider__valueIndicatorArrow {
|
|
6671
|
-
width: var(--seed-dimension-
|
|
6672
|
-
height: var(--seed-dimension-
|
|
7422
|
+
width: var(--seed-dimension-x2);
|
|
7423
|
+
height: var(--seed-dimension-x2);
|
|
7424
|
+
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7425
|
+
will-change: left, right;
|
|
6673
7426
|
position: absolute;
|
|
6674
7427
|
top: 100%;
|
|
6675
7428
|
}
|
|
@@ -6684,10 +7437,14 @@
|
|
|
6684
7437
|
transform: translateX(50%);
|
|
6685
7438
|
}
|
|
6686
7439
|
|
|
7440
|
+
.seed-slider__valueIndicatorArrow[data-dragging] {
|
|
7441
|
+
transition: none;
|
|
7442
|
+
}
|
|
7443
|
+
|
|
6687
7444
|
.seed-slider__valueIndicatorArrowTip {
|
|
6688
7445
|
fill: var(--seed-color-bg-neutral-inverted);
|
|
6689
|
-
width: var(--seed-dimension-
|
|
6690
|
-
height:
|
|
7446
|
+
width: var(--seed-dimension-x2);
|
|
7447
|
+
height: var(--seed-dimension-x1_5);
|
|
6691
7448
|
display: block;
|
|
6692
7449
|
}
|
|
6693
7450
|
|
|
@@ -6801,6 +7558,17 @@
|
|
|
6801
7558
|
animation-fill-mode: forwards;
|
|
6802
7559
|
}
|
|
6803
7560
|
|
|
7561
|
+
.seed-snackbar__root {
|
|
7562
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7563
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7564
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7565
|
+
}
|
|
7566
|
+
|
|
7567
|
+
.seed-snackbar__root:is(:focus-visible, [data-focus-visible]) {
|
|
7568
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7569
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7570
|
+
}
|
|
7571
|
+
|
|
6804
7572
|
.seed-snackbar__content {
|
|
6805
7573
|
padding-left: var(--seed-dimension-x1_5);
|
|
6806
7574
|
padding-right: var(--seed-dimension-x1_5);
|
|
@@ -6838,7 +7606,6 @@
|
|
|
6838
7606
|
line-height: var(--seed-line-height-t4);
|
|
6839
7607
|
font-weight: var(--seed-font-weight-bold);
|
|
6840
7608
|
border: none;
|
|
6841
|
-
outline: none;
|
|
6842
7609
|
flex-shrink: 0;
|
|
6843
7610
|
justify-content: center;
|
|
6844
7611
|
align-items: center;
|
|
@@ -6852,12 +7619,25 @@
|
|
|
6852
7619
|
top: 50%;
|
|
6853
7620
|
left: calc(-1 * var(--seed-dimension-x2));
|
|
6854
7621
|
right: calc(-1 * var(--seed-dimension-x2));
|
|
6855
|
-
|
|
7622
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7623
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6856
7624
|
min-height: 44px;
|
|
7625
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7626
|
+
background: none;
|
|
6857
7627
|
position: absolute;
|
|
6858
7628
|
transform: translateY(-50%);
|
|
6859
7629
|
}
|
|
6860
7630
|
|
|
7631
|
+
.seed-snackbar__actionButton:is(:focus, [data-focus]) {
|
|
7632
|
+
outline: none;
|
|
7633
|
+
}
|
|
7634
|
+
|
|
7635
|
+
.seed-snackbar__actionButton:is(:focus-visible, [data-focus-visible]):after {
|
|
7636
|
+
border-radius: var(--seed-radius-r1);
|
|
7637
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7638
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
7639
|
+
}
|
|
7640
|
+
|
|
6861
7641
|
.seed-snackbar__prefixIcon--variant_default {
|
|
6862
7642
|
display: none;
|
|
6863
7643
|
}
|
|
@@ -6953,7 +7733,7 @@
|
|
|
6953
7733
|
border-radius: var(--seed-radius-full);
|
|
6954
7734
|
background: var(--seed-color-palette-gray-600);
|
|
6955
7735
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
6956
|
-
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
|
|
7736
|
+
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);
|
|
6957
7737
|
display: block;
|
|
6958
7738
|
position: relative;
|
|
6959
7739
|
}
|
|
@@ -6962,6 +7742,16 @@
|
|
|
6962
7742
|
opacity: .38;
|
|
6963
7743
|
}
|
|
6964
7744
|
|
|
7745
|
+
.seed-switchmark__root {
|
|
7746
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
|
|
7747
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7748
|
+
}
|
|
7749
|
+
|
|
7750
|
+
.seed-switchmark__root:is(:focus-visible, [data-focus-visible]) {
|
|
7751
|
+
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
|
|
7752
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7753
|
+
}
|
|
7754
|
+
|
|
6965
7755
|
.seed-switchmark__thumb {
|
|
6966
7756
|
border-radius: var(--seed-radius-full);
|
|
6967
7757
|
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
|
|
@@ -7133,6 +7923,17 @@
|
|
|
7133
7923
|
bottom: 0;
|
|
7134
7924
|
}
|
|
7135
7925
|
|
|
7926
|
+
.seed-tabs__trigger {
|
|
7927
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7928
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7929
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
7930
|
+
}
|
|
7931
|
+
|
|
7932
|
+
.seed-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
|
|
7933
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
7934
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
7935
|
+
}
|
|
7936
|
+
|
|
7136
7937
|
.seed-tabs__list--triggerLayout_fill {
|
|
7137
7938
|
justify-content: space-around;
|
|
7138
7939
|
padding-left: 0;
|
|
@@ -7807,7 +8608,12 @@
|
|
|
7807
8608
|
}
|
|
7808
8609
|
}
|
|
7809
8610
|
|
|
7810
|
-
.seed-text-input__value:is(:disabled, [disabled], [data-disabled])
|
|
8611
|
+
.seed-text-input__value:is(:disabled, [disabled], [data-disabled]) {
|
|
8612
|
+
color: var(--seed-color-fg-disabled);
|
|
8613
|
+
cursor: not-allowed;
|
|
8614
|
+
}
|
|
8615
|
+
|
|
8616
|
+
.seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
|
|
7811
8617
|
color: var(--seed-color-fg-disabled);
|
|
7812
8618
|
}
|
|
7813
8619
|
|
|
@@ -7991,6 +8797,8 @@
|
|
|
7991
8797
|
vertical-align: middle;
|
|
7992
8798
|
-webkit-font-smoothing: antialiased;
|
|
7993
8799
|
-moz-osx-font-smoothing: grayscale;
|
|
8800
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8801
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7994
8802
|
border: none;
|
|
7995
8803
|
flex-shrink: 0;
|
|
7996
8804
|
justify-content: center;
|
|
@@ -8001,8 +8809,9 @@
|
|
|
8001
8809
|
position: relative;
|
|
8002
8810
|
}
|
|
8003
8811
|
|
|
8004
|
-
.seed-toggle-button:is(:focus, [data-focus]) {
|
|
8005
|
-
outline:
|
|
8812
|
+
.seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
|
|
8813
|
+
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
|
|
8814
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
8006
8815
|
}
|
|
8007
8816
|
|
|
8008
8817
|
.seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -8010,7 +8819,7 @@
|
|
|
8010
8819
|
}
|
|
8011
8820
|
|
|
8012
8821
|
.seed-toggle-button {
|
|
8013
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
8822
|
+
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
8014
8823
|
font-weight: var(--seed-font-weight-bold);
|
|
8015
8824
|
}
|
|
8016
8825
|
|
|
@@ -8021,8 +8830,16 @@
|
|
|
8021
8830
|
--range-color: var(--seed-color-palette-static-white);
|
|
8022
8831
|
}
|
|
8023
8832
|
|
|
8024
|
-
|
|
8025
|
-
|
|
8833
|
+
@media (hover: hover) {
|
|
8834
|
+
.seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
|
|
8835
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
8836
|
+
}
|
|
8837
|
+
}
|
|
8838
|
+
|
|
8839
|
+
@media (hover: none) {
|
|
8840
|
+
.seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
|
|
8841
|
+
background: var(--seed-color-bg-brand-solid-pressed);
|
|
8842
|
+
}
|
|
8026
8843
|
}
|
|
8027
8844
|
|
|
8028
8845
|
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -8034,8 +8851,16 @@
|
|
|
8034
8851
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8035
8852
|
}
|
|
8036
8853
|
|
|
8037
|
-
|
|
8038
|
-
|
|
8854
|
+
@media (hover: hover) {
|
|
8855
|
+
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
|
|
8856
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8857
|
+
}
|
|
8858
|
+
}
|
|
8859
|
+
|
|
8860
|
+
@media (hover: none) {
|
|
8861
|
+
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
|
|
8862
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8863
|
+
}
|
|
8039
8864
|
}
|
|
8040
8865
|
|
|
8041
8866
|
.seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -8065,8 +8890,16 @@
|
|
|
8065
8890
|
--range-color: var(--seed-color-fg-neutral);
|
|
8066
8891
|
}
|
|
8067
8892
|
|
|
8068
|
-
|
|
8069
|
-
|
|
8893
|
+
@media (hover: hover) {
|
|
8894
|
+
.seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
|
|
8895
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8896
|
+
}
|
|
8897
|
+
}
|
|
8898
|
+
|
|
8899
|
+
@media (hover: none) {
|
|
8900
|
+
.seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
|
|
8901
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8902
|
+
}
|
|
8070
8903
|
}
|
|
8071
8904
|
|
|
8072
8905
|
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -8078,8 +8911,16 @@
|
|
|
8078
8911
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8079
8912
|
}
|
|
8080
8913
|
|
|
8081
|
-
|
|
8082
|
-
|
|
8914
|
+
@media (hover: hover) {
|
|
8915
|
+
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
|
|
8916
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8917
|
+
}
|
|
8918
|
+
}
|
|
8919
|
+
|
|
8920
|
+
@media (hover: none) {
|
|
8921
|
+
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
|
|
8922
|
+
background: var(--seed-color-bg-neutral-weak-pressed);
|
|
8923
|
+
}
|
|
8083
8924
|
}
|
|
8084
8925
|
|
|
8085
8926
|
.seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
|