@seed-design/css 1.2.3 → 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 +1012 -172
- 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 +8 -0
- package/recipes/app-bar.layered.css +302 -0
- package/recipes/app-bar.layered.mjs +70 -0
- package/recipes/app-screen.layered.css +332 -0
- package/recipes/app-screen.layered.mjs +98 -0
- package/recipes/article.layered.css +12 -0
- package/recipes/article.layered.mjs +22 -0
- package/recipes/aspect-ratio.layered.css +26 -0
- package/recipes/aspect-ratio.layered.mjs +22 -0
- package/recipes/avatar-stack.layered.css +94 -0
- package/recipes/avatar-stack.layered.mjs +50 -0
- package/recipes/avatar.layered.css +222 -0
- package/recipes/avatar.layered.mjs +65 -0
- package/recipes/badge.layered.css +140 -0
- package/recipes/badge.layered.mjs +131 -0
- package/recipes/bottom-sheet-handle.css +9 -2
- package/recipes/bottom-sheet-handle.layered.css +36 -0
- package/recipes/bottom-sheet-handle.layered.mjs +36 -0
- package/recipes/bottom-sheet.css +11 -0
- package/recipes/bottom-sheet.layered.css +224 -0
- package/recipes/bottom-sheet.layered.mjs +75 -0
- package/recipes/callout.css +77 -12
- package/recipes/callout.layered.css +242 -0
- package/recipes/callout.layered.mjs +63 -0
- package/recipes/checkbox-group.layered.css +7 -0
- package/recipes/checkbox-group.layered.mjs +22 -0
- package/recipes/checkbox.layered.css +54 -0
- package/recipes/checkbox.layered.mjs +48 -0
- package/recipes/checkmark.css +61 -13
- package/recipes/checkmark.layered.css +187 -0
- package/recipes/checkmark.layered.mjs +86 -0
- package/recipes/chip-tabs.css +62 -14
- package/recipes/chip-tabs.layered.css +254 -0
- package/recipes/chip-tabs.layered.mjs +75 -0
- package/recipes/chip.css +60 -15
- package/recipes/chip.layered.css +272 -0
- package/recipes/chip.layered.mjs +80 -0
- package/recipes/contextual-floating-button.css +24 -7
- package/recipes/contextual-floating-button.layered.css +130 -0
- package/recipes/contextual-floating-button.layered.mjs +34 -0
- package/recipes/control-chip.layered.css +99 -0
- package/recipes/control-chip.layered.mjs +51 -0
- package/recipes/dialog.layered.css +111 -0
- package/recipes/dialog.layered.mjs +66 -0
- package/recipes/extended-action-sheet-item.layered.css +38 -0
- package/recipes/extended-action-sheet-item.layered.mjs +29 -0
- package/recipes/extended-action-sheet.layered.css +132 -0
- package/recipes/extended-action-sheet.layered.mjs +64 -0
- package/recipes/extended-fab.layered.css +79 -0
- package/recipes/extended-fab.layered.mjs +34 -0
- package/recipes/fab.layered.css +37 -0
- package/recipes/fab.layered.mjs +22 -0
- package/recipes/field-label.layered.css +35 -0
- package/recipes/field-label.layered.mjs +47 -0
- package/recipes/field.layered.css +81 -0
- package/recipes/field.layered.mjs +60 -0
- package/recipes/floating-action-button.css +15 -5
- package/recipes/floating-action-button.layered.css +101 -0
- package/recipes/floating-action-button.layered.mjs +47 -0
- package/recipes/help-bubble.css +8 -0
- package/recipes/help-bubble.layered.css +104 -0
- package/recipes/help-bubble.layered.mjs +60 -0
- package/recipes/identity-placeholder.css +2 -2
- package/recipes/identity-placeholder.d.ts +1 -1
- package/recipes/identity-placeholder.layered.css +22 -0
- package/recipes/identity-placeholder.layered.mjs +43 -0
- package/recipes/identity-placeholder.mjs +2 -1
- package/recipes/image-frame-icon.layered.css +8 -0
- package/recipes/image-frame-icon.layered.mjs +22 -0
- package/recipes/image-frame-indicator.layered.css +18 -0
- package/recipes/image-frame-indicator.layered.mjs +22 -0
- package/recipes/image-frame-reaction-button.css +9 -1
- package/recipes/image-frame-reaction-button.layered.css +43 -0
- package/recipes/image-frame-reaction-button.layered.mjs +22 -0
- package/recipes/image-frame.layered.css +28 -0
- package/recipes/image-frame.layered.mjs +34 -0
- package/recipes/inline-banner.layered.css +161 -0
- package/recipes/inline-banner.layered.mjs +64 -0
- package/recipes/input-button.css +27 -5
- package/recipes/input-button.layered.css +167 -0
- package/recipes/input-button.layered.mjs +64 -0
- package/recipes/link-content.layered.css +48 -0
- package/recipes/link-content.layered.mjs +35 -0
- package/recipes/list-header.layered.css +26 -0
- package/recipes/list-header.layered.mjs +29 -0
- package/recipes/list-item.css +63 -17
- package/recipes/list-item.layered.css +187 -0
- package/recipes/list-item.layered.mjs +59 -0
- package/recipes/manner-temp-badge.layered.css +72 -0
- package/recipes/manner-temp-badge.layered.mjs +37 -0
- package/recipes/manner-temp.layered.css +57 -0
- package/recipes/manner-temp.layered.mjs +37 -0
- package/recipes/menu-sheet-item.css +24 -3
- package/recipes/menu-sheet-item.layered.css +102 -0
- package/recipes/menu-sheet-item.layered.mjs +56 -0
- package/recipes/menu-sheet.css +18 -3
- package/recipes/menu-sheet.layered.css +167 -0
- package/recipes/menu-sheet.layered.mjs +74 -0
- package/recipes/notification-badge-positioner.layered.css +35 -0
- package/recipes/notification-badge-positioner.layered.mjs +51 -0
- package/recipes/notification-badge.layered.css +33 -0
- package/recipes/notification-badge.layered.mjs +29 -0
- package/recipes/page-banner.css +122 -22
- package/recipes/page-banner.layered.css +361 -0
- package/recipes/page-banner.layered.mjs +117 -0
- package/recipes/progress-circle.layered.css +52 -0
- package/recipes/progress-circle.layered.mjs +55 -0
- package/recipes/pull-to-refresh.layered.css +19 -0
- package/recipes/pull-to-refresh.layered.mjs +36 -0
- package/recipes/radio-group.layered.css +7 -0
- package/recipes/radio-group.layered.mjs +22 -0
- package/recipes/radio.layered.css +54 -0
- package/recipes/radio.layered.mjs +48 -0
- package/recipes/radiomark.css +34 -7
- package/recipes/radiomark.layered.css +132 -0
- package/recipes/radiomark.layered.mjs +48 -0
- package/recipes/reaction-button.css +24 -7
- package/recipes/reaction-button.layered.css +124 -0
- package/recipes/reaction-button.layered.mjs +29 -0
- package/recipes/scroll-fog.layered.css +27 -0
- package/recipes/scroll-fog.layered.mjs +28 -0
- package/recipes/segmented-control.css +31 -7
- package/recipes/segmented-control.layered.css +108 -0
- package/recipes/segmented-control.layered.mjs +40 -0
- package/recipes/select-box-group.layered.css +13 -0
- package/recipes/select-box-group.layered.mjs +22 -0
- package/recipes/select-box.css +19 -3
- package/recipes/select-box.layered.css +148 -0
- package/recipes/select-box.layered.mjs +63 -0
- package/recipes/selectBoxCheckmark.css +9 -2
- package/recipes/selectBoxCheckmark.layered.css +42 -0
- package/recipes/selectBoxCheckmark.layered.mjs +36 -0
- package/recipes/skeleton.layered.css +56 -0
- package/recipes/skeleton.layered.mjs +36 -0
- package/recipes/slider-marker.layered.css +54 -0
- package/recipes/slider-marker.layered.mjs +30 -0
- package/recipes/slider-tick.layered.css +25 -0
- package/recipes/slider-tick.layered.mjs +29 -0
- package/recipes/slider.css +25 -1
- package/recipes/slider.layered.css +238 -0
- package/recipes/slider.layered.mjs +68 -0
- package/recipes/snackbar-region.layered.css +18 -0
- package/recipes/snackbar-region.layered.mjs +22 -0
- package/recipes/snackbar.css +20 -1
- package/recipes/snackbar.layered.css +126 -0
- package/recipes/snackbar.layered.mjs +56 -0
- package/recipes/switch.layered.css +62 -0
- package/recipes/switch.layered.mjs +44 -0
- package/recipes/switchmark.css +9 -1
- package/recipes/switchmark.layered.css +100 -0
- package/recipes/switchmark.layered.mjs +49 -0
- package/recipes/tabs.css +9 -0
- package/recipes/tabs.layered.css +211 -0
- package/recipes/tabs.layered.mjs +78 -0
- package/recipes/tag-group-item.layered.css +98 -0
- package/recipes/tag-group-item.layered.mjs +55 -0
- package/recipes/tag-group.layered.css +58 -0
- package/recipes/tag-group.layered.mjs +62 -0
- package/recipes/text-input.css +1 -0
- package/recipes/text-input.layered.css +236 -0
- package/recipes/text-input.layered.mjs +73 -0
- package/recipes/text.layered.css +364 -0
- package/recipes/text.layered.mjs +90 -0
- package/recipes/toggle-button.css +42 -11
- package/recipes/toggle-button.layered.css +183 -0
- package/recipes/toggle-button.layered.mjs +34 -0
- package/vars/color/stroke.d.ts +2 -1
- package/vars/color/stroke.mjs +2 -1
- package/vars/component/identity-placeholder.d.ts +2 -2
- package/vars/component/identity-placeholder.mjs +2 -2
- package/vars/component/image-frame-floater.d.ts +1 -1
- package/vars/component/image-frame.d.ts +11 -17
- package/vars/component/image-frame.mjs +7 -12
- package/vars/component/index.d.ts +1 -0
- package/vars/component/index.mjs +1 -0
- package/vars/component/list-item.d.ts +1 -1
- package/vars/component/list-item.mjs +1 -1
- package/vars/component/segmented-control-indicator.d.ts +24 -0
- package/vars/component/segmented-control-indicator.mjs +24 -0
- package/vars/component/segmented-control-item.d.ts +3 -11
- package/vars/component/segmented-control-item.mjs +3 -11
- package/vars/component/segmented-control.d.ts +0 -8
- package/vars/component/segmented-control.mjs +0 -8
- package/vars/component/slider.d.ts +3 -1
- package/vars/component/slider.mjs +3 -1
package/all.css
CHANGED
|
@@ -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]) {
|
|
@@ -1428,6 +1491,10 @@
|
|
|
1428
1491
|
}
|
|
1429
1492
|
|
|
1430
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);
|
|
1431
1498
|
background: none;
|
|
1432
1499
|
border: none;
|
|
1433
1500
|
justify-content: center;
|
|
@@ -1437,6 +1504,11 @@
|
|
|
1437
1504
|
display: flex;
|
|
1438
1505
|
}
|
|
1439
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
|
+
|
|
1440
1512
|
.seed-app-bar__icon {
|
|
1441
1513
|
flex-shrink: 0;
|
|
1442
1514
|
display: inline-block;
|
|
@@ -2783,10 +2855,23 @@
|
|
|
2783
2855
|
|
|
2784
2856
|
.seed-bottom-sheet__closeButton:after {
|
|
2785
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);
|
|
2786
2861
|
position: absolute;
|
|
2787
2862
|
inset: -8px;
|
|
2788
2863
|
}
|
|
2789
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
|
+
|
|
2790
2875
|
.seed-bottom-sheet__header--headerAlign_left {
|
|
2791
2876
|
justify-content: flex-start;
|
|
2792
2877
|
}
|
|
@@ -2870,8 +2955,16 @@
|
|
|
2870
2955
|
transform: translateX(-50%);
|
|
2871
2956
|
}
|
|
2872
2957
|
|
|
2873
|
-
|
|
2874
|
-
|
|
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
|
+
}
|
|
2875
2968
|
}
|
|
2876
2969
|
|
|
2877
2970
|
.seed-bottom-sheet-handle__touchArea {
|
|
@@ -2909,6 +3002,14 @@
|
|
|
2909
3002
|
|
|
2910
3003
|
.seed-callout__root:is(button, a) {
|
|
2911
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);
|
|
2912
3013
|
}
|
|
2913
3014
|
|
|
2914
3015
|
.seed-callout__content {
|
|
@@ -2945,6 +3046,10 @@
|
|
|
2945
3046
|
line-height: var(--seed-line-height-t4);
|
|
2946
3047
|
font-weight: var(--seed-font-weight-regular);
|
|
2947
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);
|
|
2948
3053
|
background-color: #0000;
|
|
2949
3054
|
border: none;
|
|
2950
3055
|
padding: 0;
|
|
@@ -2952,11 +3057,20 @@
|
|
|
2952
3057
|
display: inline-block;
|
|
2953
3058
|
}
|
|
2954
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
|
+
|
|
2955
3065
|
.seed-callout__closeButton {
|
|
2956
3066
|
cursor: pointer;
|
|
2957
3067
|
width: var(--seed-dimension-x10);
|
|
2958
3068
|
height: var(--seed-dimension-x10);
|
|
2959
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);
|
|
2960
3074
|
background-color: #0000;
|
|
2961
3075
|
border: none;
|
|
2962
3076
|
flex-grow: 0;
|
|
@@ -2967,14 +3081,27 @@
|
|
|
2967
3081
|
display: flex;
|
|
2968
3082
|
}
|
|
2969
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
|
+
|
|
2970
3089
|
.seed-callout__root--tone_neutral {
|
|
2971
3090
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
2972
3091
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
2973
3092
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
2974
3093
|
}
|
|
2975
3094
|
|
|
2976
|
-
|
|
2977
|
-
|
|
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
|
+
}
|
|
2978
3105
|
}
|
|
2979
3106
|
|
|
2980
3107
|
.seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
|
|
@@ -2987,8 +3114,16 @@
|
|
|
2987
3114
|
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
2988
3115
|
}
|
|
2989
3116
|
|
|
2990
|
-
|
|
2991
|
-
|
|
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
|
+
}
|
|
2992
3127
|
}
|
|
2993
3128
|
|
|
2994
3129
|
.seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
|
|
@@ -3001,8 +3136,16 @@
|
|
|
3001
3136
|
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
3002
3137
|
}
|
|
3003
3138
|
|
|
3004
|
-
|
|
3005
|
-
|
|
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
|
+
}
|
|
3006
3149
|
}
|
|
3007
3150
|
|
|
3008
3151
|
.seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
|
|
@@ -3015,8 +3158,16 @@
|
|
|
3015
3158
|
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
3016
3159
|
}
|
|
3017
3160
|
|
|
3018
|
-
|
|
3019
|
-
|
|
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
|
+
}
|
|
3020
3171
|
}
|
|
3021
3172
|
|
|
3022
3173
|
.seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
|
|
@@ -3029,8 +3180,16 @@
|
|
|
3029
3180
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
3030
3181
|
}
|
|
3031
3182
|
|
|
3032
|
-
|
|
3033
|
-
|
|
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
|
+
}
|
|
3034
3193
|
}
|
|
3035
3194
|
|
|
3036
3195
|
.seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
|
|
@@ -3043,8 +3202,16 @@
|
|
|
3043
3202
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
3044
3203
|
}
|
|
3045
3204
|
|
|
3046
|
-
|
|
3047
|
-
|
|
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
|
+
}
|
|
3048
3215
|
}
|
|
3049
3216
|
|
|
3050
3217
|
.seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
|
|
@@ -3113,11 +3280,18 @@
|
|
|
3113
3280
|
.seed-checkmark__root {
|
|
3114
3281
|
box-sizing: border-box;
|
|
3115
3282
|
margin-top: var(--checkmark-margin-top, 0);
|
|
3116
|
-
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);
|
|
3117
3286
|
flex: none;
|
|
3118
3287
|
position: relative;
|
|
3119
3288
|
}
|
|
3120
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
|
+
|
|
3121
3295
|
.seed-checkmark__icon {
|
|
3122
3296
|
content: "";
|
|
3123
3297
|
text-align: center;
|
|
@@ -3138,8 +3312,16 @@
|
|
|
3138
3312
|
border-width: 0;
|
|
3139
3313
|
}
|
|
3140
3314
|
|
|
3141
|
-
|
|
3142
|
-
|
|
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
|
+
}
|
|
3143
3325
|
}
|
|
3144
3326
|
|
|
3145
3327
|
.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3155,8 +3337,16 @@
|
|
|
3155
3337
|
color: var(--seed-color-fg-disabled);
|
|
3156
3338
|
}
|
|
3157
3339
|
|
|
3158
|
-
|
|
3159
|
-
|
|
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
|
+
}
|
|
3160
3350
|
}
|
|
3161
3351
|
|
|
3162
3352
|
.seed-checkmark__icon--variant_ghost {
|
|
@@ -3185,8 +3375,16 @@
|
|
|
3185
3375
|
background: var(--seed-color-bg-neutral-inverted);
|
|
3186
3376
|
}
|
|
3187
3377
|
|
|
3188
|
-
|
|
3189
|
-
|
|
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
|
+
}
|
|
3190
3388
|
}
|
|
3191
3389
|
|
|
3192
3390
|
.seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
@@ -3197,24 +3395,48 @@
|
|
|
3197
3395
|
background: var(--seed-color-bg-brand-solid);
|
|
3198
3396
|
}
|
|
3199
3397
|
|
|
3200
|
-
|
|
3201
|
-
|
|
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
|
+
}
|
|
3202
3408
|
}
|
|
3203
3409
|
|
|
3204
3410
|
.seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
3205
3411
|
color: var(--seed-color-palette-static-white);
|
|
3206
3412
|
}
|
|
3207
3413
|
|
|
3208
|
-
|
|
3209
|
-
|
|
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
|
+
}
|
|
3210
3424
|
}
|
|
3211
3425
|
|
|
3212
3426
|
.seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
3213
3427
|
color: var(--seed-color-fg-neutral);
|
|
3214
3428
|
}
|
|
3215
3429
|
|
|
3216
|
-
|
|
3217
|
-
|
|
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
|
+
}
|
|
3218
3440
|
}
|
|
3219
3441
|
|
|
3220
3442
|
.seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
@@ -3252,19 +3474,22 @@
|
|
|
3252
3474
|
border-radius: var(--seed-radius-full);
|
|
3253
3475
|
transition-duration: var(--seed-duration-color-transition);
|
|
3254
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);
|
|
3255
3479
|
border: none;
|
|
3256
3480
|
flex-shrink: 0;
|
|
3257
3481
|
justify-content: center;
|
|
3258
3482
|
align-items: center;
|
|
3259
3483
|
font-family: inherit;
|
|
3260
3484
|
line-height: 1;
|
|
3261
|
-
transition-property: background-color, color, border-color, box-shadow;
|
|
3485
|
+
transition-property: background-color, color, border-color, box-shadow, outline-color;
|
|
3262
3486
|
display: inline-flex;
|
|
3263
3487
|
position: relative;
|
|
3264
3488
|
}
|
|
3265
3489
|
|
|
3266
|
-
.seed-chip__root:is(:focus, [data-focus]) {
|
|
3267
|
-
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);
|
|
3268
3493
|
}
|
|
3269
3494
|
|
|
3270
3495
|
.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3311,12 +3536,28 @@
|
|
|
3311
3536
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
3312
3537
|
}
|
|
3313
3538
|
|
|
3314
|
-
|
|
3315
|
-
|
|
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
|
+
}
|
|
3316
3543
|
}
|
|
3317
3544
|
|
|
3318
|
-
|
|
3319
|
-
|
|
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
|
+
}
|
|
3320
3561
|
}
|
|
3321
3562
|
|
|
3322
3563
|
.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3341,8 +3582,16 @@
|
|
|
3341
3582
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3342
3583
|
}
|
|
3343
3584
|
|
|
3344
|
-
|
|
3345
|
-
|
|
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
|
+
}
|
|
3346
3595
|
}
|
|
3347
3596
|
|
|
3348
3597
|
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
|
|
@@ -3350,8 +3599,16 @@
|
|
|
3350
3599
|
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
3351
3600
|
}
|
|
3352
3601
|
|
|
3353
|
-
|
|
3354
|
-
|
|
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
|
+
}
|
|
3355
3612
|
}
|
|
3356
3613
|
|
|
3357
3614
|
.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3376,8 +3633,16 @@
|
|
|
3376
3633
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
3377
3634
|
}
|
|
3378
3635
|
|
|
3379
|
-
|
|
3380
|
-
|
|
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
|
+
}
|
|
3381
3646
|
}
|
|
3382
3647
|
|
|
3383
3648
|
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
|
|
@@ -3385,8 +3650,16 @@
|
|
|
3385
3650
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
|
|
3386
3651
|
}
|
|
3387
3652
|
|
|
3388
|
-
|
|
3389
|
-
|
|
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
|
+
}
|
|
3390
3663
|
}
|
|
3391
3664
|
|
|
3392
3665
|
.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3515,13 +3788,20 @@
|
|
|
3515
3788
|
padding-bottom: var(--seed-dimension-x2);
|
|
3516
3789
|
font-family: inherit;
|
|
3517
3790
|
font-weight: var(--seed-font-weight-medium);
|
|
3518
|
-
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);
|
|
3519
3794
|
border: none;
|
|
3520
3795
|
justify-content: center;
|
|
3521
3796
|
align-items: center;
|
|
3522
3797
|
display: flex;
|
|
3523
3798
|
}
|
|
3524
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
|
+
|
|
3525
3805
|
.seed-chip-tabs__list--size_medium {
|
|
3526
3806
|
gap: 8px;
|
|
3527
3807
|
}
|
|
@@ -3554,12 +3834,28 @@
|
|
|
3554
3834
|
color: var(--seed-color-fg-neutral-inverted);
|
|
3555
3835
|
}
|
|
3556
3836
|
|
|
3557
|
-
|
|
3558
|
-
|
|
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
|
+
}
|
|
3841
|
+
}
|
|
3842
|
+
|
|
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
|
+
}
|
|
3559
3853
|
}
|
|
3560
3854
|
|
|
3561
|
-
|
|
3562
|
-
|
|
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
|
+
}
|
|
3563
3859
|
}
|
|
3564
3860
|
|
|
3565
3861
|
.seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3584,12 +3880,28 @@
|
|
|
3584
3880
|
border-color: #0000;
|
|
3585
3881
|
}
|
|
3586
3882
|
|
|
3587
|
-
|
|
3588
|
-
|
|
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
|
+
}
|
|
3887
|
+
}
|
|
3888
|
+
|
|
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
|
+
}
|
|
3589
3899
|
}
|
|
3590
3900
|
|
|
3591
|
-
|
|
3592
|
-
|
|
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
|
+
}
|
|
3593
3905
|
}
|
|
3594
3906
|
|
|
3595
3907
|
.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3612,12 +3924,28 @@
|
|
|
3612
3924
|
color: var(--seed-color-palette-static-white);
|
|
3613
3925
|
}
|
|
3614
3926
|
|
|
3615
|
-
|
|
3616
|
-
|
|
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
|
+
}
|
|
3931
|
+
}
|
|
3932
|
+
|
|
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
|
+
}
|
|
3617
3937
|
}
|
|
3618
3938
|
|
|
3619
|
-
|
|
3620
|
-
|
|
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
|
+
}
|
|
3621
3949
|
}
|
|
3622
3950
|
|
|
3623
3951
|
.seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3665,6 +3993,8 @@
|
|
|
3665
3993
|
text-transform: none;
|
|
3666
3994
|
-webkit-font-smoothing: antialiased;
|
|
3667
3995
|
-moz-osx-font-smoothing: grayscale;
|
|
3996
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
3997
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
3668
3998
|
border: none;
|
|
3669
3999
|
justify-content: center;
|
|
3670
4000
|
align-items: center;
|
|
@@ -3673,8 +4003,9 @@
|
|
|
3673
4003
|
display: inline-flex;
|
|
3674
4004
|
}
|
|
3675
4005
|
|
|
3676
|
-
.seed-contextual-floating-button:is(:focus, [data-focus]) {
|
|
3677
|
-
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);
|
|
3678
4009
|
}
|
|
3679
4010
|
|
|
3680
4011
|
.seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3702,7 +4033,7 @@
|
|
|
3702
4033
|
--seed-icon-size: 22px;
|
|
3703
4034
|
--size: 16px;
|
|
3704
4035
|
--thickness: 2px;
|
|
3705
|
-
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);
|
|
3706
4037
|
}
|
|
3707
4038
|
|
|
3708
4039
|
.seed-contextual-floating-button--variant_solid {
|
|
@@ -3714,8 +4045,16 @@
|
|
|
3714
4045
|
--range-color: var(--seed-color-fg-neutral-inverted);
|
|
3715
4046
|
}
|
|
3716
4047
|
|
|
3717
|
-
|
|
3718
|
-
|
|
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
|
+
}
|
|
3719
4058
|
}
|
|
3720
4059
|
|
|
3721
4060
|
.seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -3738,8 +4077,16 @@
|
|
|
3738
4077
|
--range-color: var(--seed-color-fg-neutral);
|
|
3739
4078
|
}
|
|
3740
4079
|
|
|
3741
|
-
|
|
3742
|
-
|
|
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
|
+
}
|
|
3743
4090
|
}
|
|
3744
4091
|
|
|
3745
4092
|
.seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -4379,6 +4726,8 @@
|
|
|
4379
4726
|
text-transform: none;
|
|
4380
4727
|
-webkit-font-smoothing: antialiased;
|
|
4381
4728
|
-moz-osx-font-smoothing: grayscale;
|
|
4729
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
4730
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
4382
4731
|
border: none;
|
|
4383
4732
|
justify-content: center;
|
|
4384
4733
|
align-items: center;
|
|
@@ -4387,8 +4736,9 @@
|
|
|
4387
4736
|
display: inline-flex;
|
|
4388
4737
|
}
|
|
4389
4738
|
|
|
4390
|
-
.seed-floating-action-button__root:is(:focus, [data-focus]) {
|
|
4391
|
-
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);
|
|
4392
4742
|
}
|
|
4393
4743
|
|
|
4394
4744
|
.seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -4403,13 +4753,21 @@
|
|
|
4403
4753
|
font-size: var(--seed-font-size-t5);
|
|
4404
4754
|
line-height: var(--seed-line-height-t5);
|
|
4405
4755
|
font-weight: var(--seed-font-weight-bold);
|
|
4406
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing);
|
|
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);
|
|
4407
4757
|
position: relative;
|
|
4408
4758
|
overflow: hidden;
|
|
4409
4759
|
}
|
|
4410
4760
|
|
|
4411
|
-
|
|
4412
|
-
|
|
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
|
+
}
|
|
4413
4771
|
}
|
|
4414
4772
|
|
|
4415
4773
|
.seed-floating-action-button__icon {
|
|
@@ -4549,6 +4907,10 @@
|
|
|
4549
4907
|
color: var(--seed-color-fg-neutral-inverted);
|
|
4550
4908
|
--seed-icon-size: var(--seed-dimension-x3_5);
|
|
4551
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);
|
|
4552
4914
|
background: none;
|
|
4553
4915
|
border: none;
|
|
4554
4916
|
justify-content: center;
|
|
@@ -4556,10 +4918,15 @@
|
|
|
4556
4918
|
display: flex;
|
|
4557
4919
|
}
|
|
4558
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
|
+
|
|
4559
4926
|
.seed-identity-placeholder__root {
|
|
4560
4927
|
box-sizing: border-box;
|
|
4561
4928
|
vertical-align: top;
|
|
4562
|
-
background-color: var(--seed-color-palette-gray-
|
|
4929
|
+
background-color: var(--seed-color-palette-gray-500);
|
|
4563
4930
|
justify-content: center;
|
|
4564
4931
|
align-items: center;
|
|
4565
4932
|
width: 100%;
|
|
@@ -4570,9 +4937,9 @@
|
|
|
4570
4937
|
|
|
4571
4938
|
.seed-identity-placeholder__image {
|
|
4572
4939
|
object-fit: cover;
|
|
4573
|
-
fill: #f7f8fa;
|
|
4574
4940
|
width: 100%;
|
|
4575
4941
|
height: 100%;
|
|
4942
|
+
fill: var(--seed-color-palette-static-white-alpha-800);
|
|
4576
4943
|
display: block;
|
|
4577
4944
|
overflow: hidden;
|
|
4578
4945
|
}
|
|
@@ -4650,13 +5017,22 @@
|
|
|
4650
5017
|
right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
4651
5018
|
bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
|
|
4652
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);
|
|
4653
5023
|
position: absolute;
|
|
4654
5024
|
}
|
|
4655
5025
|
|
|
4656
|
-
.seed-image-frame-reaction-button:focus {
|
|
5026
|
+
.seed-image-frame-reaction-button:is(:focus, [data-focus]) {
|
|
4657
5027
|
outline: none;
|
|
4658
5028
|
}
|
|
4659
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
|
+
|
|
4660
5036
|
.seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
|
|
4661
5037
|
--seed-icon-color: var(--seed-color-bg-transparent);
|
|
4662
5038
|
}
|
|
@@ -4840,7 +5216,7 @@
|
|
|
4840
5216
|
border-radius: var(--seed-radius-r3);
|
|
4841
5217
|
background-color: var(--seed-color-bg-transparent);
|
|
4842
5218
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
|
|
4843
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
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);
|
|
4844
5220
|
border: none;
|
|
4845
5221
|
padding: 0;
|
|
4846
5222
|
position: absolute;
|
|
@@ -4862,8 +5238,16 @@
|
|
|
4862
5238
|
background-color: var(--seed-color-bg-disabled);
|
|
4863
5239
|
}
|
|
4864
5240
|
|
|
4865
|
-
|
|
4866
|
-
|
|
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
|
+
}
|
|
4867
5251
|
}
|
|
4868
5252
|
|
|
4869
5253
|
.seed-input-button__button[data-readonly]:not([data-disabled]) {
|
|
@@ -4871,8 +5255,14 @@
|
|
|
4871
5255
|
background-color: var(--seed-color-bg-disabled);
|
|
4872
5256
|
}
|
|
4873
5257
|
|
|
4874
|
-
.seed-input-button__button
|
|
4875
|
-
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);
|
|
4876
5266
|
}
|
|
4877
5267
|
|
|
4878
5268
|
.seed-input-button__button:is(:invalid, [data-invalid]):after {
|
|
@@ -4954,13 +5344,25 @@
|
|
|
4954
5344
|
|
|
4955
5345
|
.seed-input-button__clearButton {
|
|
4956
5346
|
cursor: pointer;
|
|
4957
|
-
--seed-
|
|
4958
|
-
--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);
|
|
4959
5351
|
background-color: #0000;
|
|
4960
5352
|
border: none;
|
|
4961
5353
|
padding: 0;
|
|
4962
5354
|
}
|
|
4963
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
|
+
|
|
4964
5366
|
.seed-link-content {
|
|
4965
5367
|
cursor: pointer;
|
|
4966
5368
|
box-sizing: border-box;
|
|
@@ -5054,6 +5456,7 @@
|
|
|
5054
5456
|
.seed-list-item__prefix {
|
|
5055
5457
|
--seed-box-padding-right: var(--seed-dimension-x3);
|
|
5056
5458
|
padding-right: var(--seed-box-padding-right);
|
|
5459
|
+
--seed-focus-ring: none;
|
|
5057
5460
|
--seed-icon-size: 22px;
|
|
5058
5461
|
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
5059
5462
|
flex-shrink: 0;
|
|
@@ -5071,6 +5474,7 @@
|
|
|
5071
5474
|
--seed-box-gap: var(--seed-dimension-x1);
|
|
5072
5475
|
align-items: center;
|
|
5073
5476
|
gap: var(--seed-box-gap);
|
|
5477
|
+
--seed-focus-ring: none;
|
|
5074
5478
|
font-size: var(--seed-font-size-t5);
|
|
5075
5479
|
line-height: var(--seed-line-height-t5);
|
|
5076
5480
|
font-weight: var(--seed-font-weight-regular);
|
|
@@ -5104,10 +5508,22 @@
|
|
|
5104
5508
|
|
|
5105
5509
|
.seed-list-item__content:after {
|
|
5106
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);
|
|
5107
5514
|
position: absolute;
|
|
5108
5515
|
inset: 0;
|
|
5109
5516
|
}
|
|
5110
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
|
+
|
|
5111
5527
|
.seed-list-item__content:before {
|
|
5112
5528
|
content: "";
|
|
5113
5529
|
z-index: -1;
|
|
@@ -5118,17 +5534,46 @@
|
|
|
5118
5534
|
inset: 0;
|
|
5119
5535
|
}
|
|
5120
5536
|
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
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
|
+
}
|
|
5126
5571
|
}
|
|
5127
5572
|
|
|
5128
5573
|
.seed-list-item__title {
|
|
5129
5574
|
font-size: var(--seed-font-size-t5);
|
|
5130
5575
|
line-height: var(--seed-line-height-t5);
|
|
5131
|
-
font-weight: var(--seed-font-weight-
|
|
5576
|
+
font-weight: var(--seed-font-weight-regular);
|
|
5132
5577
|
color: var(--seed-color-fg-neutral);
|
|
5133
5578
|
flex-shrink: 0;
|
|
5134
5579
|
}
|
|
@@ -5152,8 +5597,28 @@
|
|
|
5152
5597
|
background-color: var(--seed-color-bg-brand-weak);
|
|
5153
5598
|
}
|
|
5154
5599
|
|
|
5155
|
-
|
|
5156
|
-
|
|
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
|
+
}
|
|
5157
5622
|
}
|
|
5158
5623
|
|
|
5159
5624
|
.seed-manner-temp {
|
|
@@ -5378,15 +5843,33 @@
|
|
|
5378
5843
|
font-size: var(--seed-font-size-t5);
|
|
5379
5844
|
line-height: var(--seed-line-height-t5);
|
|
5380
5845
|
font-weight: var(--seed-font-weight-medium);
|
|
5846
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
5381
5847
|
border: none;
|
|
5382
|
-
outline: none;
|
|
5383
5848
|
justify-content: center;
|
|
5384
5849
|
align-items: center;
|
|
5385
5850
|
display: flex;
|
|
5386
5851
|
}
|
|
5387
5852
|
|
|
5388
|
-
|
|
5389
|
-
|
|
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);
|
|
5390
5873
|
}
|
|
5391
5874
|
|
|
5392
5875
|
.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
|
|
@@ -5442,20 +5925,45 @@
|
|
|
5442
5925
|
gap: var(--seed-dimension-x3_5);
|
|
5443
5926
|
box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
|
|
5444
5927
|
border: none;
|
|
5445
|
-
outline: none;
|
|
5446
5928
|
margin: 0;
|
|
5447
5929
|
font-family: inherit;
|
|
5448
5930
|
display: flex;
|
|
5449
5931
|
}
|
|
5450
5932
|
|
|
5451
|
-
|
|
5452
|
-
|
|
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);
|
|
5453
5948
|
}
|
|
5454
5949
|
|
|
5455
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);
|
|
5456
5953
|
box-shadow: none;
|
|
5457
5954
|
}
|
|
5458
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
|
+
|
|
5459
5967
|
.seed-menu-sheet-item__root {
|
|
5460
5968
|
--seed-prefix-icon-size: 22px;
|
|
5461
5969
|
}
|
|
@@ -5599,6 +6107,14 @@
|
|
|
5599
6107
|
|
|
5600
6108
|
.seed-page-banner__root:is(button) {
|
|
5601
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);
|
|
5602
6118
|
}
|
|
5603
6119
|
|
|
5604
6120
|
.seed-page-banner__content {
|
|
@@ -5641,12 +6157,21 @@
|
|
|
5641
6157
|
font-size: var(--seed-font-size-t3);
|
|
5642
6158
|
line-height: var(--seed-line-height-t3);
|
|
5643
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);
|
|
5644
6164
|
background-color: #0000;
|
|
5645
6165
|
border: none;
|
|
5646
6166
|
align-items: center;
|
|
5647
6167
|
display: flex;
|
|
5648
6168
|
}
|
|
5649
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
|
+
|
|
5650
6175
|
.seed-page-banner__closeButton {
|
|
5651
6176
|
width: var(--seed-dimension-x10);
|
|
5652
6177
|
height: var(--seed-dimension-x10);
|
|
@@ -5654,6 +6179,10 @@
|
|
|
5654
6179
|
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
|
|
5655
6180
|
--seed-suffix-icon-margin-left: initial;
|
|
5656
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);
|
|
5657
6186
|
background-color: #0000;
|
|
5658
6187
|
border: none;
|
|
5659
6188
|
flex-grow: 0;
|
|
@@ -5665,14 +6194,27 @@
|
|
|
5665
6194
|
display: flex;
|
|
5666
6195
|
}
|
|
5667
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
|
+
|
|
5668
6202
|
.seed-page-banner__root--tone_neutral-variant_weak {
|
|
5669
6203
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
5670
6204
|
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
5671
6205
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
5672
6206
|
}
|
|
5673
6207
|
|
|
5674
|
-
|
|
5675
|
-
|
|
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
|
+
}
|
|
5676
6218
|
}
|
|
5677
6219
|
|
|
5678
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 {
|
|
@@ -5685,8 +6227,16 @@
|
|
|
5685
6227
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
|
|
5686
6228
|
}
|
|
5687
6229
|
|
|
5688
|
-
|
|
5689
|
-
|
|
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
|
+
}
|
|
5690
6240
|
}
|
|
5691
6241
|
|
|
5692
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 {
|
|
@@ -5699,8 +6249,16 @@
|
|
|
5699
6249
|
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
5700
6250
|
}
|
|
5701
6251
|
|
|
5702
|
-
|
|
5703
|
-
|
|
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
|
+
}
|
|
5704
6262
|
}
|
|
5705
6263
|
|
|
5706
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 {
|
|
@@ -5713,8 +6271,16 @@
|
|
|
5713
6271
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5714
6272
|
}
|
|
5715
6273
|
|
|
5716
|
-
|
|
5717
|
-
|
|
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
|
+
}
|
|
5718
6284
|
}
|
|
5719
6285
|
|
|
5720
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 {
|
|
@@ -5727,8 +6293,16 @@
|
|
|
5727
6293
|
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
5728
6294
|
}
|
|
5729
6295
|
|
|
5730
|
-
|
|
5731
|
-
|
|
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
|
+
}
|
|
5732
6306
|
}
|
|
5733
6307
|
|
|
5734
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 {
|
|
@@ -5741,8 +6315,16 @@
|
|
|
5741
6315
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5742
6316
|
}
|
|
5743
6317
|
|
|
5744
|
-
|
|
5745
|
-
|
|
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
|
+
}
|
|
5746
6328
|
}
|
|
5747
6329
|
|
|
5748
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 {
|
|
@@ -5755,8 +6337,16 @@
|
|
|
5755
6337
|
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
5756
6338
|
}
|
|
5757
6339
|
|
|
5758
|
-
|
|
5759
|
-
|
|
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
|
+
}
|
|
5760
6350
|
}
|
|
5761
6351
|
|
|
5762
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 {
|
|
@@ -5769,8 +6359,16 @@
|
|
|
5769
6359
|
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
|
|
5770
6360
|
}
|
|
5771
6361
|
|
|
5772
|
-
|
|
5773
|
-
|
|
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
|
+
}
|
|
5774
6372
|
}
|
|
5775
6373
|
|
|
5776
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 {
|
|
@@ -5783,8 +6381,16 @@
|
|
|
5783
6381
|
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
5784
6382
|
}
|
|
5785
6383
|
|
|
5786
|
-
|
|
5787
|
-
|
|
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
|
+
}
|
|
5788
6394
|
}
|
|
5789
6395
|
|
|
5790
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 {
|
|
@@ -5797,8 +6403,16 @@
|
|
|
5797
6403
|
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
5798
6404
|
}
|
|
5799
6405
|
|
|
5800
|
-
|
|
5801
|
-
|
|
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
|
+
}
|
|
5802
6416
|
}
|
|
5803
6417
|
|
|
5804
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 {
|
|
@@ -5811,8 +6425,16 @@
|
|
|
5811
6425
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
5812
6426
|
}
|
|
5813
6427
|
|
|
5814
|
-
|
|
5815
|
-
|
|
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
|
+
}
|
|
5816
6438
|
}
|
|
5817
6439
|
|
|
5818
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 {
|
|
@@ -5954,7 +6576,9 @@
|
|
|
5954
6576
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
5955
6577
|
border-radius: var(--seed-radius-full);
|
|
5956
6578
|
margin-top: var(--radiomark-margin-top, 0);
|
|
5957
|
-
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);
|
|
5958
6582
|
flex: none;
|
|
5959
6583
|
justify-content: center;
|
|
5960
6584
|
align-items: center;
|
|
@@ -5962,8 +6586,16 @@
|
|
|
5962
6586
|
position: relative;
|
|
5963
6587
|
}
|
|
5964
6588
|
|
|
5965
|
-
|
|
5966
|
-
|
|
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
|
+
}
|
|
5967
6599
|
}
|
|
5968
6600
|
|
|
5969
6601
|
.seed-radiomark__root:is(:checked, [data-checked]) {
|
|
@@ -5980,6 +6612,11 @@
|
|
|
5980
6612
|
border-color: var(--seed-color-palette-gray-300);
|
|
5981
6613
|
}
|
|
5982
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
|
+
|
|
5983
6620
|
.seed-radiomark__icon {
|
|
5984
6621
|
border-radius: var(--seed-radius-full);
|
|
5985
6622
|
display: none;
|
|
@@ -5997,8 +6634,16 @@
|
|
|
5997
6634
|
background-color: var(--seed-color-bg-neutral-inverted);
|
|
5998
6635
|
}
|
|
5999
6636
|
|
|
6000
|
-
|
|
6001
|
-
|
|
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
|
+
}
|
|
6002
6647
|
}
|
|
6003
6648
|
|
|
6004
6649
|
.seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
|
|
@@ -6009,8 +6654,16 @@
|
|
|
6009
6654
|
background-color: var(--seed-color-bg-brand-solid);
|
|
6010
6655
|
}
|
|
6011
6656
|
|
|
6012
|
-
|
|
6013
|
-
|
|
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
|
+
}
|
|
6014
6667
|
}
|
|
6015
6668
|
|
|
6016
6669
|
.seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
|
|
@@ -6055,6 +6708,8 @@
|
|
|
6055
6708
|
vertical-align: middle;
|
|
6056
6709
|
-webkit-font-smoothing: antialiased;
|
|
6057
6710
|
-moz-osx-font-smoothing: grayscale;
|
|
6711
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
6712
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
6058
6713
|
border: none;
|
|
6059
6714
|
flex-shrink: 0;
|
|
6060
6715
|
justify-content: center;
|
|
@@ -6065,12 +6720,13 @@
|
|
|
6065
6720
|
position: relative;
|
|
6066
6721
|
}
|
|
6067
6722
|
|
|
6068
|
-
.seed-reaction-button:is(:focus, [data-focus]) {
|
|
6069
|
-
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);
|
|
6070
6726
|
}
|
|
6071
6727
|
|
|
6072
6728
|
.seed-reaction-button {
|
|
6073
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
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);
|
|
6074
6730
|
background: var(--seed-color-bg-transparent);
|
|
6075
6731
|
font-weight: var(--seed-font-weight-medium);
|
|
6076
6732
|
color: var(--seed-color-fg-neutral);
|
|
@@ -6081,8 +6737,16 @@
|
|
|
6081
6737
|
--seed-count-color: var(--seed-color-fg-neutral);
|
|
6082
6738
|
}
|
|
6083
6739
|
|
|
6084
|
-
|
|
6085
|
-
|
|
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
|
+
}
|
|
6086
6750
|
}
|
|
6087
6751
|
|
|
6088
6752
|
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -6093,8 +6757,16 @@
|
|
|
6093
6757
|
--seed-count-color: var(--seed-color-fg-brand);
|
|
6094
6758
|
}
|
|
6095
6759
|
|
|
6096
|
-
|
|
6097
|
-
|
|
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
|
+
}
|
|
6098
6770
|
}
|
|
6099
6771
|
|
|
6100
6772
|
.seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -6228,7 +6900,7 @@
|
|
|
6228
6900
|
font-size: var(--seed-font-size-t5);
|
|
6229
6901
|
line-height: var(--seed-line-height-t5);
|
|
6230
6902
|
color: var(--seed-color-fg-neutral-subtle);
|
|
6231
|
-
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
|
|
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);
|
|
6232
6904
|
display: flex;
|
|
6233
6905
|
}
|
|
6234
6906
|
|
|
@@ -6236,6 +6908,16 @@
|
|
|
6236
6908
|
color: var(--seed-color-fg-neutral);
|
|
6237
6909
|
}
|
|
6238
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
|
+
|
|
6239
6921
|
.seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
|
|
6240
6922
|
cursor: not-allowed;
|
|
6241
6923
|
color: var(--seed-color-fg-disabled);
|
|
@@ -6246,14 +6928,32 @@
|
|
|
6246
6928
|
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
|
|
6247
6929
|
}
|
|
6248
6930
|
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
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
|
+
}
|
|
6252
6936
|
}
|
|
6253
6937
|
|
|
6254
|
-
|
|
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,6 +7335,8 @@
|
|
|
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
7341
|
padding-left: var(--seed-dimension-x2);
|
|
6596
7342
|
padding-right: var(--seed-dimension-x2);
|
|
@@ -6664,6 +7410,10 @@
|
|
|
6664
7410
|
animation-fill-mode: forwards;
|
|
6665
7411
|
}
|
|
6666
7412
|
|
|
7413
|
+
.seed-slider__valueIndicatorRoot[data-dragging] {
|
|
7414
|
+
transition: none;
|
|
7415
|
+
}
|
|
7416
|
+
|
|
6667
7417
|
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
|
|
6668
7418
|
animation-duration: 0s;
|
|
6669
7419
|
}
|
|
@@ -6671,6 +7421,8 @@
|
|
|
6671
7421
|
.seed-slider__valueIndicatorArrow {
|
|
6672
7422
|
width: var(--seed-dimension-x2);
|
|
6673
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;
|
|
6674
7426
|
position: absolute;
|
|
6675
7427
|
top: 100%;
|
|
6676
7428
|
}
|
|
@@ -6685,6 +7437,10 @@
|
|
|
6685
7437
|
transform: translateX(50%);
|
|
6686
7438
|
}
|
|
6687
7439
|
|
|
7440
|
+
.seed-slider__valueIndicatorArrow[data-dragging] {
|
|
7441
|
+
transition: none;
|
|
7442
|
+
}
|
|
7443
|
+
|
|
6688
7444
|
.seed-slider__valueIndicatorArrowTip {
|
|
6689
7445
|
fill: var(--seed-color-bg-neutral-inverted);
|
|
6690
7446
|
width: var(--seed-dimension-x2);
|
|
@@ -6802,6 +7558,17 @@
|
|
|
6802
7558
|
animation-fill-mode: forwards;
|
|
6803
7559
|
}
|
|
6804
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
|
+
|
|
6805
7572
|
.seed-snackbar__content {
|
|
6806
7573
|
padding-left: var(--seed-dimension-x1_5);
|
|
6807
7574
|
padding-right: var(--seed-dimension-x1_5);
|
|
@@ -6839,7 +7606,6 @@
|
|
|
6839
7606
|
line-height: var(--seed-line-height-t4);
|
|
6840
7607
|
font-weight: var(--seed-font-weight-bold);
|
|
6841
7608
|
border: none;
|
|
6842
|
-
outline: none;
|
|
6843
7609
|
flex-shrink: 0;
|
|
6844
7610
|
justify-content: center;
|
|
6845
7611
|
align-items: center;
|
|
@@ -6853,12 +7619,25 @@
|
|
|
6853
7619
|
top: 50%;
|
|
6854
7620
|
left: calc(-1 * var(--seed-dimension-x2));
|
|
6855
7621
|
right: calc(-1 * var(--seed-dimension-x2));
|
|
6856
|
-
|
|
7622
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
7623
|
+
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
|
|
6857
7624
|
min-height: 44px;
|
|
7625
|
+
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
|
|
7626
|
+
background: none;
|
|
6858
7627
|
position: absolute;
|
|
6859
7628
|
transform: translateY(-50%);
|
|
6860
7629
|
}
|
|
6861
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
|
+
|
|
6862
7641
|
.seed-snackbar__prefixIcon--variant_default {
|
|
6863
7642
|
display: none;
|
|
6864
7643
|
}
|
|
@@ -6954,7 +7733,7 @@
|
|
|
6954
7733
|
border-radius: var(--seed-radius-full);
|
|
6955
7734
|
background: var(--seed-color-palette-gray-600);
|
|
6956
7735
|
margin: var(--switchmark-margin-top, 0) 0;
|
|
6957
|
-
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
|
|
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);
|
|
6958
7737
|
display: block;
|
|
6959
7738
|
position: relative;
|
|
6960
7739
|
}
|
|
@@ -6963,6 +7742,16 @@
|
|
|
6963
7742
|
opacity: .38;
|
|
6964
7743
|
}
|
|
6965
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
|
+
|
|
6966
7755
|
.seed-switchmark__thumb {
|
|
6967
7756
|
border-radius: var(--seed-radius-full);
|
|
6968
7757
|
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
|
|
@@ -7134,6 +7923,17 @@
|
|
|
7134
7923
|
bottom: 0;
|
|
7135
7924
|
}
|
|
7136
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
|
+
|
|
7137
7937
|
.seed-tabs__list--triggerLayout_fill {
|
|
7138
7938
|
justify-content: space-around;
|
|
7139
7939
|
padding-left: 0;
|
|
@@ -7808,7 +8608,12 @@
|
|
|
7808
8608
|
}
|
|
7809
8609
|
}
|
|
7810
8610
|
|
|
7811
|
-
.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 {
|
|
7812
8617
|
color: var(--seed-color-fg-disabled);
|
|
7813
8618
|
}
|
|
7814
8619
|
|
|
@@ -7992,6 +8797,8 @@
|
|
|
7992
8797
|
vertical-align: middle;
|
|
7993
8798
|
-webkit-font-smoothing: antialiased;
|
|
7994
8799
|
-moz-osx-font-smoothing: grayscale;
|
|
8800
|
+
outline: var(--seed-dimension-x0_5) solid transparent;
|
|
8801
|
+
outline-offset: var(--seed-dimension-x0_5);
|
|
7995
8802
|
border: none;
|
|
7996
8803
|
flex-shrink: 0;
|
|
7997
8804
|
justify-content: center;
|
|
@@ -8002,8 +8809,9 @@
|
|
|
8002
8809
|
position: relative;
|
|
8003
8810
|
}
|
|
8004
8811
|
|
|
8005
|
-
.seed-toggle-button:is(:focus, [data-focus]) {
|
|
8006
|
-
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);
|
|
8007
8815
|
}
|
|
8008
8816
|
|
|
8009
8817
|
.seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -8011,7 +8819,7 @@
|
|
|
8011
8819
|
}
|
|
8012
8820
|
|
|
8013
8821
|
.seed-toggle-button {
|
|
8014
|
-
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);
|
|
8015
8823
|
font-weight: var(--seed-font-weight-bold);
|
|
8016
8824
|
}
|
|
8017
8825
|
|
|
@@ -8022,8 +8830,16 @@
|
|
|
8022
8830
|
--range-color: var(--seed-color-palette-static-white);
|
|
8023
8831
|
}
|
|
8024
8832
|
|
|
8025
|
-
|
|
8026
|
-
|
|
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
|
+
}
|
|
8027
8843
|
}
|
|
8028
8844
|
|
|
8029
8845
|
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -8035,8 +8851,16 @@
|
|
|
8035
8851
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8036
8852
|
}
|
|
8037
8853
|
|
|
8038
|
-
|
|
8039
|
-
|
|
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
|
+
}
|
|
8040
8864
|
}
|
|
8041
8865
|
|
|
8042
8866
|
.seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -8066,8 +8890,16 @@
|
|
|
8066
8890
|
--range-color: var(--seed-color-fg-neutral);
|
|
8067
8891
|
}
|
|
8068
8892
|
|
|
8069
|
-
|
|
8070
|
-
|
|
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
|
+
}
|
|
8071
8903
|
}
|
|
8072
8904
|
|
|
8073
8905
|
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
|
|
@@ -8079,8 +8911,16 @@
|
|
|
8079
8911
|
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
8080
8912
|
}
|
|
8081
8913
|
|
|
8082
|
-
|
|
8083
|
-
|
|
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
|
+
}
|
|
8084
8924
|
}
|
|
8085
8925
|
|
|
8086
8926
|
.seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
|