@ebay/skin 19.11.0 → 19.12.1
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/dist/bundles/skin-default.css +158 -98
- package/dist/bundles/skin-full.css +169 -116
- package/dist/bundles/skin-headless.css +147 -80
- package/dist/button/button.css +164 -130
- package/dist/cta-button/cta-button.css +4 -1
- package/dist/drawer-dialog/drawer-dialog.css +1 -0
- package/dist/fullscreen-dialog/fullscreen-dialog.css +1 -0
- package/dist/mixins/_animation-mixins.scss +2 -41
- package/dist/mixins/_animation.scss +41 -0
- package/dist/mixins/_title.scss +42 -0
- package/dist/mixins/_typography-mixins.scss +3 -136
- package/dist/mixins/_typography.scss +92 -0
- package/dist/mixins/_utility-mixins.scss +2 -97
- package/dist/mixins/_utility.scss +98 -0
- package/dist/mixins/typography-mixins.less +2 -0
- package/dist/mixins/utility-mixins.less +2 -0
- package/dist/tokens/evo-dark.css +11 -18
- package/dist/tokens/evo-light.css +11 -18
- package/dist/variables/_variables.scss +20 -1
- package/mixins.scss +4 -0
- package/package.json +2 -2
|
@@ -244,6 +244,11 @@ ul.accordion--large summary.details__summary{
|
|
|
244
244
|
opacity:1;
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
|
+
:root{
|
|
248
|
+
--dialog-scrim-color-hide:rgb(17 24 32 / 0);
|
|
249
|
+
--dialog-scrim-color-show:rgb(17 24 32 / 0.7);
|
|
250
|
+
--dialog-lightbox-max-width:616px;
|
|
251
|
+
}
|
|
247
252
|
.alert-dialog[role=alertdialog]{
|
|
248
253
|
background-color:var(--dialog-scrim-color-show);
|
|
249
254
|
bottom:0;
|
|
@@ -532,6 +537,7 @@ ul.accordion--large summary.details__summary{
|
|
|
532
537
|
line-height:128px;
|
|
533
538
|
width:128px;
|
|
534
539
|
}
|
|
540
|
+
|
|
535
541
|
.badge{
|
|
536
542
|
align-items:center;
|
|
537
543
|
background-color:var(--badge-background-color, var(--color-background-attention));
|
|
@@ -546,6 +552,7 @@ ul.accordion--large summary.details__summary{
|
|
|
546
552
|
padding:2px 6px;
|
|
547
553
|
white-space:nowrap;
|
|
548
554
|
}
|
|
555
|
+
|
|
549
556
|
nav.breadcrumbs{
|
|
550
557
|
color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
|
|
551
558
|
font-size:var(--font-size-small);
|
|
@@ -652,6 +659,8 @@ nav.breadcrumbs .fake-menu-button__menu,nav.breadcrumbs .menu-button__menu{
|
|
|
652
659
|
}
|
|
653
660
|
}
|
|
654
661
|
a.fake-btn,button.btn{
|
|
662
|
+
align-content:center;
|
|
663
|
+
align-items:center;
|
|
655
664
|
background-color:initial;
|
|
656
665
|
border:1px solid;
|
|
657
666
|
border-radius:var(--btn-border-radius, 20px);
|
|
@@ -663,7 +672,7 @@ a.fake-btn,button.btn{
|
|
|
663
672
|
margin:0;
|
|
664
673
|
min-height:40px;
|
|
665
674
|
min-width:88px;
|
|
666
|
-
padding:
|
|
675
|
+
padding:0 20px;
|
|
667
676
|
text-align:center;
|
|
668
677
|
text-decoration:none;
|
|
669
678
|
vertical-align:bottom;
|
|
@@ -774,11 +783,29 @@ a.fake-btn--primary,button.btn--primary{
|
|
|
774
783
|
border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
|
|
775
784
|
color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
|
|
776
785
|
font-weight:700;
|
|
786
|
+
overflow:hidden;
|
|
787
|
+
position:relative;
|
|
777
788
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
778
789
|
}
|
|
779
790
|
a.fake-btn--primary:active,button.btn--primary:active{
|
|
780
791
|
transform:scale(.97);
|
|
781
792
|
}
|
|
793
|
+
a.fake-btn--primary:after,button.btn--primary:after{
|
|
794
|
+
background-color:var(--state-layer-neutral);
|
|
795
|
+
content:"";
|
|
796
|
+
inset:0;
|
|
797
|
+
pointer-events:none;
|
|
798
|
+
position:absolute;
|
|
799
|
+
}
|
|
800
|
+
a.fake-btn--primary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--primary[href]:hover:after,button.btn--primary:not([disabled],[aria-disabled=true]):hover:after,button.btn--primary[href]:hover:after{
|
|
801
|
+
background-color:var(--state-layer-hover);
|
|
802
|
+
}
|
|
803
|
+
a.fake-btn--primary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--primary[href]:focus:after,button.btn--primary:not([disabled],[aria-disabled=true]):focus:after,button.btn--primary[href]:focus:after{
|
|
804
|
+
background-color:var(--state-layer-focus);
|
|
805
|
+
}
|
|
806
|
+
a.fake-btn--primary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--primary[href]:active:after,button.btn--primary:not([disabled],[aria-disabled=true]):active:after,button.btn--primary[href]:active:after{
|
|
807
|
+
background-color:var(--state-layer-pressed);
|
|
808
|
+
}
|
|
782
809
|
|
|
783
810
|
a.fake-btn--primary{
|
|
784
811
|
outline-color:var(--color-foreground-primary);
|
|
@@ -788,19 +815,29 @@ a.fake-btn--primary:visited{
|
|
|
788
815
|
color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
|
|
789
816
|
}
|
|
790
817
|
|
|
791
|
-
a.fake-btn--primary[href]:focus,a.fake-btn--primary[href]:hover,button.btn--primary:not([disabled],[aria-disabled=true]):focus,button.btn--primary:not([disabled],[aria-disabled=true]):hover{
|
|
792
|
-
background-blend-mode:multiply;
|
|
793
|
-
filter:brightness(96%);
|
|
794
|
-
}
|
|
795
|
-
a.fake-btn--primary[href]:active,button.btn--primary:not([disabled],[aria-disabled=true]):active{
|
|
796
|
-
filter:brightness(92%);
|
|
797
|
-
}
|
|
798
|
-
|
|
799
818
|
a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
|
|
800
819
|
background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
|
|
801
820
|
border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
|
|
802
821
|
color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
|
|
803
822
|
font-weight:700;
|
|
823
|
+
overflow:hidden;
|
|
824
|
+
position:relative;
|
|
825
|
+
}
|
|
826
|
+
a.fake-btn--primary.fake-btn--destructive:after,button.btn--primary.btn--destructive:after{
|
|
827
|
+
background-color:var(--state-layer-neutral);
|
|
828
|
+
content:"";
|
|
829
|
+
inset:0;
|
|
830
|
+
pointer-events:none;
|
|
831
|
+
position:absolute;
|
|
832
|
+
}
|
|
833
|
+
a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--primary.fake-btn--destructive[href]:hover:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):hover:after,button.btn--primary.btn--destructive[href]:hover:after{
|
|
834
|
+
background-color:var(--state-layer-hover);
|
|
835
|
+
}
|
|
836
|
+
a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--primary.fake-btn--destructive[href]:focus:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):focus:after,button.btn--primary.btn--destructive[href]:focus:after{
|
|
837
|
+
background-color:var(--state-layer-focus);
|
|
838
|
+
}
|
|
839
|
+
a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--primary.fake-btn--destructive[href]:active:after,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):active:after,button.btn--primary.btn--destructive[href]:active:after{
|
|
840
|
+
background-color:var(--state-layer-pressed);
|
|
804
841
|
}
|
|
805
842
|
|
|
806
843
|
button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
|
|
@@ -808,13 +845,6 @@ button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn
|
|
|
808
845
|
border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
|
|
809
846
|
}
|
|
810
847
|
|
|
811
|
-
a.fake-btn--primary.fake-btn--destructive[href]:focus,a.fake-btn--primary.fake-btn--destructive[href]:hover,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
|
|
812
|
-
background-color:var(--color-state-attention-hover);
|
|
813
|
-
}
|
|
814
|
-
a.fake-btn--primary.fake-btn--destructive[href]:active,button.btn--primary.btn--destructive:not([disabled],[aria-disabled=true]):active{
|
|
815
|
-
background-color:var(--color-state-attention-active);
|
|
816
|
-
}
|
|
817
|
-
|
|
818
848
|
button.btn .progress-spinner{
|
|
819
849
|
height:24px;
|
|
820
850
|
margin:-4px 0;
|
|
@@ -841,11 +871,11 @@ a.fake-btn[aria-expanded=true] svg.icon--12,button.btn[aria-expanded=true] svg.i
|
|
|
841
871
|
}
|
|
842
872
|
|
|
843
873
|
a.fake-btn--large svg.icon,button.btn--large svg.icon{
|
|
844
|
-
max-height:
|
|
874
|
+
max-height:48px;
|
|
845
875
|
}
|
|
846
876
|
|
|
847
877
|
a.fake-btn--small svg.icon,button.btn--small svg.icon{
|
|
848
|
-
max-height:
|
|
878
|
+
max-height:32px;
|
|
849
879
|
}
|
|
850
880
|
|
|
851
881
|
button.btn--primary[aria-disabled=true],button.btn--primary[disabled]{
|
|
@@ -867,44 +897,40 @@ a.fake-btn--secondary,button.btn--secondary{
|
|
|
867
897
|
background-color:var(--btn-secondary-background-color, transparent);
|
|
868
898
|
border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
|
|
869
899
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
900
|
+
overflow:hidden;
|
|
901
|
+
position:relative;
|
|
870
902
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
871
903
|
}
|
|
872
904
|
a.fake-btn--secondary:active,button.btn--secondary:active{
|
|
873
905
|
transform:scale(.97);
|
|
874
906
|
}
|
|
907
|
+
a.fake-btn--secondary:after,button.btn--secondary:after{
|
|
908
|
+
background-color:var(--state-layer-neutral);
|
|
909
|
+
content:"";
|
|
910
|
+
inset:0;
|
|
911
|
+
pointer-events:none;
|
|
912
|
+
position:absolute;
|
|
913
|
+
}
|
|
914
|
+
a.fake-btn--secondary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--secondary[href]:hover:after,button.btn--secondary:not([disabled],[aria-disabled=true]):hover:after,button.btn--secondary[href]:hover:after{
|
|
915
|
+
background-color:var(--state-layer-hover);
|
|
916
|
+
}
|
|
917
|
+
a.fake-btn--secondary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--secondary[href]:focus:after,button.btn--secondary:not([disabled],[aria-disabled=true]):focus:after,button.btn--secondary[href]:focus:after{
|
|
918
|
+
background-color:var(--state-layer-focus);
|
|
919
|
+
}
|
|
920
|
+
a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--secondary[href]:active:after,button.btn--secondary:not([disabled],[aria-disabled=true]):active:after,button.btn--secondary[href]:active:after{
|
|
921
|
+
background-color:var(--state-layer-pressed);
|
|
922
|
+
}
|
|
875
923
|
|
|
876
924
|
a.fake-btn--secondary:visited{
|
|
877
925
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
878
926
|
}
|
|
879
927
|
|
|
880
|
-
a.fake-btn--secondary[href]:active,button.btn--secondary:not([disabled],[aria-disabled=true]):active{
|
|
881
|
-
background-color:var(--color-state-primary-active);
|
|
882
|
-
border-color:var(--color-state-active-foreground-on-secondary);
|
|
883
|
-
color:var(--color-state-active-foreground-on-secondary);
|
|
884
|
-
}
|
|
885
|
-
a.fake-btn--secondary[href]:focus,a.fake-btn--secondary[href]:hover,button.btn--secondary:not([disabled],[aria-disabled=true]):focus,button.btn--secondary:not([disabled],[aria-disabled=true]):hover{
|
|
886
|
-
background-color:var(--color-state-primary-hover);
|
|
887
|
-
border-color:var(--color-state-hover-foreground-on-secondary);
|
|
888
|
-
color:var(--color-state-hover-foreground-on-secondary);
|
|
889
|
-
}
|
|
890
|
-
|
|
891
928
|
a.fake-btn--secondary.fake-btn--destructive,button.btn--secondary.btn--destructive{
|
|
892
929
|
background-color:var(--btn-secondary-destructive-background-color, transparent);
|
|
893
930
|
border-color:var(--btn-secondary-destructive-border-color, var(--color-stroke-attention));
|
|
894
931
|
color:var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
|
|
895
932
|
}
|
|
896
933
|
|
|
897
|
-
a.fake-btn--secondary.fake-btn--destructive[href]:focus,a.fake-btn--secondary.fake-btn--destructive[href]:hover,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
|
|
898
|
-
background-color:var(--color-state-primary-hover);
|
|
899
|
-
border-color:var(--color-state-hover-foreground-on-secondary-desctructive);
|
|
900
|
-
color:var(--color-state-hover-foreground-on-secondary-desctructive);
|
|
901
|
-
}
|
|
902
|
-
a.fake-btn--secondary.fake-btn--destructive[href]:active,button.btn--secondary.btn--destructive:not([disabled],[aria-disabled=true]):active{
|
|
903
|
-
background-color:var(--color-state-primary-active);
|
|
904
|
-
border-color:var(--color-state-active-foreground-on-secondary-desctructive);
|
|
905
|
-
color:var(--color-state-active-foreground-on-secondary-desctructive);
|
|
906
|
-
}
|
|
907
|
-
|
|
908
934
|
button.btn--secondary.btn--destructive .progress-spinner{
|
|
909
935
|
--color-spinner-icon-background:#f39fb0;
|
|
910
936
|
--color-spinner-icon-foreground:#e0103a;
|
|
@@ -926,17 +952,28 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
|
|
|
926
952
|
|
|
927
953
|
a.fake-btn--tertiary,button.btn--tertiary{
|
|
928
954
|
border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
|
|
955
|
+
overflow:hidden;
|
|
956
|
+
position:relative;
|
|
929
957
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
930
958
|
}
|
|
931
959
|
a.fake-btn--tertiary:active,button.btn--tertiary:active{
|
|
932
960
|
transform:scale(.97);
|
|
933
961
|
}
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
962
|
+
a.fake-btn--tertiary:after,button.btn--tertiary:after{
|
|
963
|
+
background-color:var(--state-layer-neutral);
|
|
964
|
+
content:"";
|
|
965
|
+
inset:0;
|
|
966
|
+
pointer-events:none;
|
|
967
|
+
position:absolute;
|
|
937
968
|
}
|
|
938
|
-
a.fake-btn--tertiary[href]:
|
|
939
|
-
background-color:var(--
|
|
969
|
+
a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--tertiary[href]:hover:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):hover:after,button.btn--tertiary[href]:hover:after{
|
|
970
|
+
background-color:var(--state-layer-hover);
|
|
971
|
+
}
|
|
972
|
+
a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--tertiary[href]:focus:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):focus:after,button.btn--tertiary[href]:focus:after{
|
|
973
|
+
background-color:var(--state-layer-focus);
|
|
974
|
+
}
|
|
975
|
+
a.fake-btn--tertiary:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--tertiary[href]:active:after,button.btn--tertiary:not([disabled],[aria-disabled=true]):active:after,button.btn--tertiary[href]:active:after{
|
|
976
|
+
background-color:var(--state-layer-pressed);
|
|
940
977
|
}
|
|
941
978
|
|
|
942
979
|
a.fake-btn--tertiary:not([href]),a.fake-btn--tertiary[aria-disabled=true],button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
|
|
@@ -948,13 +985,6 @@ a.fake-btn--tertiary.fake-btn--destructive,button.btn--tertiary.btn--destructive
|
|
|
948
985
|
border-color:var(--btn-tertiary-destructive-foreground-color, var(--color-stroke-subtle));
|
|
949
986
|
}
|
|
950
987
|
|
|
951
|
-
a.fake-btn--tertiary.fake-btn--destructive[href]:focus,a.fake-btn--tertiary.fake-btn--destructive[href]:hover,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):focus,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):hover{
|
|
952
|
-
background-color:var(--color-state-secondary-hover);
|
|
953
|
-
}
|
|
954
|
-
a.fake-btn--tertiary.fake-btn--destructive[href]:active,button.btn--tertiary.btn--destructive:not([disabled],[aria-disabled=true]):active{
|
|
955
|
-
background-color:var(--color-state-secondary-active);
|
|
956
|
-
}
|
|
957
|
-
|
|
958
988
|
button.btn--tertiary.btn--destructive[aria-disabled=true],button.btn--tertiary.btn--destructive[disabled]{
|
|
959
989
|
color:var(--btn-tertiary-destructive-disabled-foreground-color, var(--color-foreground-disabled));
|
|
960
990
|
}
|
|
@@ -968,48 +998,54 @@ a.fake-btn--large,button.btn--large{
|
|
|
968
998
|
border-radius:var(--btn-border-radius, 24px);
|
|
969
999
|
font-size:var(--font-size-medium);
|
|
970
1000
|
min-height:48px;
|
|
971
|
-
padding:
|
|
1001
|
+
padding:0 20px;
|
|
972
1002
|
}
|
|
973
1003
|
|
|
974
1004
|
a.fake-btn--small,button.btn--small{
|
|
975
1005
|
border-radius:var(--btn-border-radius, 16px);
|
|
976
1006
|
font-size:var(--font-size-default);
|
|
977
1007
|
min-height:32px;
|
|
978
|
-
padding:
|
|
1008
|
+
padding:0 16px;
|
|
979
1009
|
}
|
|
980
1010
|
|
|
981
1011
|
a.fake-btn--form,button.btn--form{
|
|
982
1012
|
border-color:inherit;
|
|
983
1013
|
border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
|
|
984
1014
|
max-width:100%;
|
|
1015
|
+
overflow:hidden;
|
|
1016
|
+
position:relative;
|
|
985
1017
|
}
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
1018
|
+
a.fake-btn--form:after,button.btn--form:after{
|
|
1019
|
+
background-color:var(--state-layer-neutral);
|
|
1020
|
+
content:"";
|
|
1021
|
+
inset:0;
|
|
1022
|
+
pointer-events:none;
|
|
1023
|
+
position:absolute;
|
|
989
1024
|
}
|
|
990
|
-
a.fake-btn--form:not([
|
|
991
|
-
background-color:var(--
|
|
1025
|
+
a.fake-btn--form:not([disabled],[aria-disabled=true]):hover:after,a.fake-btn--form[href]:hover:after,button.btn--form:not([disabled],[aria-disabled=true]):hover:after,button.btn--form[href]:hover:after{
|
|
1026
|
+
background-color:var(--state-layer-hover);
|
|
1027
|
+
}
|
|
1028
|
+
a.fake-btn--form:not([disabled],[aria-disabled=true]):focus:after,a.fake-btn--form[href]:focus:after,button.btn--form:not([disabled],[aria-disabled=true]):focus:after,button.btn--form[href]:focus:after{
|
|
1029
|
+
background-color:var(--state-layer-focus);
|
|
1030
|
+
}
|
|
1031
|
+
a.fake-btn--form:not([disabled],[aria-disabled=true]):active:after,a.fake-btn--form[href]:active:after,button.btn--form:not([disabled],[aria-disabled=true]):active:after,button.btn--form[href]:active:after{
|
|
1032
|
+
background-color:var(--state-layer-pressed);
|
|
992
1033
|
}
|
|
993
1034
|
|
|
994
1035
|
button.btn--form.btn--large{
|
|
995
|
-
padding:
|
|
1036
|
+
padding:0 20px;
|
|
996
1037
|
}
|
|
997
1038
|
|
|
998
1039
|
button.btn--form.btn--small{
|
|
999
|
-
padding:
|
|
1040
|
+
padding:0 16px;
|
|
1000
1041
|
}
|
|
1001
1042
|
a.fake-btn--transparent,a.fake-btn--transparent:focus,a.fake-btn--transparent:hover,button.btn--transparent,button.btn--transparent:focus,button.btn--transparent:hover{
|
|
1002
1043
|
background-color:initial;
|
|
1003
1044
|
}
|
|
1004
1045
|
|
|
1005
|
-
a.fake-btn--fixed-height,button.btn--fixed-height{
|
|
1006
|
-
padding-top:calc(21.5px - .75em);
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
1046
|
a.fake-btn--large-fixed-height,button.btn--large-fixed-height{
|
|
1010
1047
|
height:48px;
|
|
1011
1048
|
min-height:48px;
|
|
1012
|
-
padding-top:calc(27px - .75em);
|
|
1013
1049
|
}
|
|
1014
1050
|
|
|
1015
1051
|
a.fake-btn--truncated,a.fake-btn--truncated span,button.btn--truncated,button.btn--truncated span{
|
|
@@ -1023,7 +1059,7 @@ a.fake-btn--large-truncated,button.btn--large-truncated{
|
|
|
1023
1059
|
font-size:var(--font-size-medium);
|
|
1024
1060
|
height:48px;
|
|
1025
1061
|
min-height:48px;
|
|
1026
|
-
padding:
|
|
1062
|
+
padding:0 20px;
|
|
1027
1063
|
}
|
|
1028
1064
|
a.fake-btn--large-truncated,a.fake-btn--large-truncated span,button.btn--large-truncated,button.btn--large-truncated span{
|
|
1029
1065
|
line-height:1.4em;
|
|
@@ -1043,10 +1079,6 @@ a.fake-btn--split-end,button.btn--split-end{
|
|
|
1043
1079
|
padding-left:8px;
|
|
1044
1080
|
padding-right:8px;
|
|
1045
1081
|
}
|
|
1046
|
-
|
|
1047
|
-
a.fake-btn.fake-btn--tertiary.fake-btn--split-end,button.btn.btn--tertiary.btn--split-end{
|
|
1048
|
-
margin-left:-2px;
|
|
1049
|
-
}
|
|
1050
1082
|
a.fake-btn.fake-btn--primary.fake-btn--split-end,a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,button.btn.btn--primary.btn--split-end,button.btn.btn--primary.btn--split-end:focus,button.btn.btn--primary.btn--split-end:hover{
|
|
1051
1083
|
border-left-color:var(--btn-primary-border-split-color, var(--color-background-primary));
|
|
1052
1084
|
}
|
|
@@ -1527,6 +1559,7 @@ span.carousel,span.carousel__container{
|
|
|
1527
1559
|
.carousel--hidden-scrollbar .carousel__control--next{
|
|
1528
1560
|
right:0;
|
|
1529
1561
|
}
|
|
1562
|
+
|
|
1530
1563
|
@font-face{
|
|
1531
1564
|
font-family:Reddit Sans Condensed Bold;
|
|
1532
1565
|
src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
|
|
@@ -1569,6 +1602,7 @@ span.carousel,span.carousel__container{
|
|
|
1569
1602
|
text-align:center;
|
|
1570
1603
|
width:39px;
|
|
1571
1604
|
}
|
|
1605
|
+
|
|
1572
1606
|
.calendar{
|
|
1573
1607
|
color:var(--calendar-color-token, var(--color-foreground-primary));
|
|
1574
1608
|
display:table;
|
|
@@ -1867,6 +1901,7 @@ input.checkbox__control[type=checkbox]:focus+span.checkbox__icon{
|
|
|
1867
1901
|
input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__icon{
|
|
1868
1902
|
outline:none;
|
|
1869
1903
|
}
|
|
1904
|
+
|
|
1870
1905
|
.chip{
|
|
1871
1906
|
align-items:center;
|
|
1872
1907
|
background-color:var(--color-background-strong);
|
|
@@ -1920,6 +1955,7 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
|
|
|
1920
1955
|
.chip button.chip__button:hover{
|
|
1921
1956
|
background-color:var(--state-layer-hover);
|
|
1922
1957
|
}
|
|
1958
|
+
|
|
1923
1959
|
.chips-combobox{
|
|
1924
1960
|
background-color:var(--color-background-secondary);
|
|
1925
1961
|
border:1px solid var(--color-stroke-default);
|
|
@@ -2027,6 +2063,9 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
|
|
|
2027
2063
|
[dir=rtl] .chips-combobox .combobox__control>input{
|
|
2028
2064
|
padding:var(--spacing-75) 0;
|
|
2029
2065
|
}
|
|
2066
|
+
:root{
|
|
2067
|
+
--bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
|
|
2068
|
+
}
|
|
2030
2069
|
.combobox{
|
|
2031
2070
|
box-sizing:border-box;
|
|
2032
2071
|
line-height:normal;
|
|
@@ -2279,6 +2318,7 @@ span.combobox{
|
|
|
2279
2318
|
left:1px;
|
|
2280
2319
|
right:inherit;
|
|
2281
2320
|
}
|
|
2321
|
+
|
|
2282
2322
|
.confirm-dialog[role=dialog]{
|
|
2283
2323
|
background-color:var(--dialog-scrim-color-show);
|
|
2284
2324
|
bottom:0;
|
|
@@ -2428,6 +2468,8 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
|
2428
2468
|
}
|
|
2429
2469
|
}
|
|
2430
2470
|
a.cta-btn{
|
|
2471
|
+
align-content:center;
|
|
2472
|
+
align-items:center;
|
|
2431
2473
|
background-color:var(--cta-btn-background-color, var(--color-background-primary));
|
|
2432
2474
|
border:1px solid;
|
|
2433
2475
|
border-radius:var(--cta-btn-border-radius, 20px);
|
|
@@ -2438,7 +2480,8 @@ a.cta-btn{
|
|
|
2438
2480
|
font-size:var(--font-size-default);
|
|
2439
2481
|
margin:0;
|
|
2440
2482
|
max-width:100%;
|
|
2441
|
-
|
|
2483
|
+
min-height:40px;
|
|
2484
|
+
padding:0 20px;
|
|
2442
2485
|
text-align:center;
|
|
2443
2486
|
text-decoration:none;
|
|
2444
2487
|
vertical-align:bottom;
|
|
@@ -2536,6 +2579,7 @@ a.cta-btn--large{
|
|
|
2536
2579
|
[dir=rtl] a.cta-btn svg.icon--arrow-right-24{
|
|
2537
2580
|
transform:rotate(180deg);
|
|
2538
2581
|
}
|
|
2582
|
+
|
|
2539
2583
|
.date-textbox{
|
|
2540
2584
|
--calendar-month-width:311px;
|
|
2541
2585
|
display:inline-block;
|
|
@@ -2618,6 +2662,7 @@ details.details[open] summary.details__summary:before{
|
|
|
2618
2662
|
details.details summary:focus:not(:focus-visible){
|
|
2619
2663
|
outline:none;
|
|
2620
2664
|
}
|
|
2665
|
+
|
|
2621
2666
|
:root{
|
|
2622
2667
|
--donut-chart-max-width:600px;
|
|
2623
2668
|
--donut-chart-graph-size-sm:140px;
|
|
@@ -2865,6 +2910,7 @@ button.icon-btn.drawer-dialog__close{
|
|
|
2865
2910
|
.drawer-dialog__handle:focus:not(:focus-visible){
|
|
2866
2911
|
outline:none;
|
|
2867
2912
|
}
|
|
2913
|
+
|
|
2868
2914
|
.education-notice{
|
|
2869
2915
|
background-color:var(--education-notice-default-background-color, var(--color-background-secondary));
|
|
2870
2916
|
border-radius:var(--education-notice-border-radius, var(--border-radius-100));
|
|
@@ -3237,6 +3283,7 @@ div.field__description{
|
|
|
3237
3283
|
[dir=rtl] .field__description--group>:last-child{
|
|
3238
3284
|
text-align:left;
|
|
3239
3285
|
}
|
|
3286
|
+
|
|
3240
3287
|
.file-preview-card{
|
|
3241
3288
|
display:flex;
|
|
3242
3289
|
flex-direction:column;
|
|
@@ -3365,6 +3412,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
|
|
|
3365
3412
|
color:var(--color-foreground-secondary);
|
|
3366
3413
|
font-size:var(--font-size-small);
|
|
3367
3414
|
}
|
|
3415
|
+
|
|
3368
3416
|
div.file-preview-card-group{
|
|
3369
3417
|
container:file-preview-cards-container/inline-size;
|
|
3370
3418
|
}
|
|
@@ -3798,6 +3846,7 @@ button.filter-chip[aria-expanded=true] .filter-chip__trailing{
|
|
|
3798
3846
|
.filter-input--large .textbox__control{
|
|
3799
3847
|
height:48px;
|
|
3800
3848
|
}
|
|
3849
|
+
|
|
3801
3850
|
.filter-menu,.filter-menu-form{
|
|
3802
3851
|
background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
|
|
3803
3852
|
min-width:144px;
|
|
@@ -5257,6 +5306,7 @@ For complete information visit: www.freakflagsprite.com
|
|
|
5257
5306
|
height:37px;
|
|
5258
5307
|
width:60px;
|
|
5259
5308
|
}
|
|
5309
|
+
|
|
5260
5310
|
.floating-label{
|
|
5261
5311
|
position:relative;
|
|
5262
5312
|
}
|
|
@@ -5500,6 +5550,7 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
|
|
|
5500
5550
|
.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,.fullscreen-dialog--show .fullscreen-dialog__window--slide,.fullscreen-dialog--show .fullscreen-dialog__window--slide-end{
|
|
5501
5551
|
transform:translateX(0);
|
|
5502
5552
|
}
|
|
5553
|
+
|
|
5503
5554
|
.signal{
|
|
5504
5555
|
border:1px solid;
|
|
5505
5556
|
border-radius:var(--border-radius-100);
|
|
@@ -5530,6 +5581,7 @@ button.fullscreen-dialog__back,button.fullscreen-dialog__close{
|
|
|
5530
5581
|
.signal--neutral{
|
|
5531
5582
|
color:var(--signal-neutral-color, var(--color-foreground-secondary));
|
|
5532
5583
|
}
|
|
5584
|
+
|
|
5533
5585
|
svg.icon{
|
|
5534
5586
|
display:inline-block;
|
|
5535
5587
|
fill:currentColor;
|
|
@@ -5613,6 +5665,7 @@ svg.icon--confirmation-filled{
|
|
|
5613
5665
|
svg.icon--information-filled{
|
|
5614
5666
|
color:var(--color-foreground-information);
|
|
5615
5667
|
}
|
|
5668
|
+
|
|
5616
5669
|
a.icon-link{
|
|
5617
5670
|
align-items:center;
|
|
5618
5671
|
display:inline-flex;
|
|
@@ -5793,12 +5846,14 @@ a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.ico
|
|
|
5793
5846
|
a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):active,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):active{
|
|
5794
5847
|
background-color:var(--color-state-secondary-active);
|
|
5795
5848
|
}
|
|
5849
|
+
|
|
5796
5850
|
svg.image-placeholder{
|
|
5797
5851
|
color:var(--color-foreground-primary);
|
|
5798
5852
|
fill:currentColor;
|
|
5799
5853
|
height:inherit;
|
|
5800
5854
|
width:inherit;
|
|
5801
5855
|
}
|
|
5856
|
+
|
|
5802
5857
|
.infotip{
|
|
5803
5858
|
position:relative;
|
|
5804
5859
|
}
|
|
@@ -7360,6 +7415,7 @@ a.legal-link,button.legal-link{
|
|
|
7360
7415
|
a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.legal-link:hover,button.legal-link:visited{
|
|
7361
7416
|
color:var(--legal-link-foreground-color, var(--color-foreground-link-legal));
|
|
7362
7417
|
}
|
|
7418
|
+
|
|
7363
7419
|
.list{
|
|
7364
7420
|
max-width:480px;
|
|
7365
7421
|
}
|
|
@@ -7434,6 +7490,7 @@ a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.le
|
|
|
7434
7490
|
[dir=rtl] .list li>a,[dir=rtl] .list li>button{
|
|
7435
7491
|
text-align:right;
|
|
7436
7492
|
}
|
|
7493
|
+
|
|
7437
7494
|
div.listbox{
|
|
7438
7495
|
margin:var(--spacing-200) 0;
|
|
7439
7496
|
}
|
|
@@ -7529,6 +7586,7 @@ div.listbox__option[aria-selected=true] svg.icon{
|
|
|
7529
7586
|
.listbox__options:focus:not(:focus-visible){
|
|
7530
7587
|
outline:none;
|
|
7531
7588
|
}
|
|
7589
|
+
|
|
7532
7590
|
.listbox-button{
|
|
7533
7591
|
line-height:normal;
|
|
7534
7592
|
position:relative;
|
|
@@ -7903,6 +7961,7 @@ span.listbox-button__value{
|
|
|
7903
7961
|
.number-input__increment:disabled{
|
|
7904
7962
|
animation:number-increment-disabled var(--motion-duration-short-2) var(--motion-easing-standard);
|
|
7905
7963
|
}
|
|
7964
|
+
|
|
7906
7965
|
.fake-menu__items,.menu__items{
|
|
7907
7966
|
background-color:var(--menu-background-color, var(--color-background-primary));
|
|
7908
7967
|
cursor:default;
|
|
@@ -8083,6 +8142,7 @@ hr.menu__separator{
|
|
|
8083
8142
|
div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
8084
8143
|
outline:none;
|
|
8085
8144
|
}
|
|
8145
|
+
|
|
8086
8146
|
.fake-menu-button,.menu-button{
|
|
8087
8147
|
line-height:normal;
|
|
8088
8148
|
position:relative;
|
|
@@ -8347,6 +8407,7 @@ hr.menu-button__separator{
|
|
|
8347
8407
|
div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
|
|
8348
8408
|
outline:none;
|
|
8349
8409
|
}
|
|
8410
|
+
|
|
8350
8411
|
:root{
|
|
8351
8412
|
--page-grid-number-cols:8;
|
|
8352
8413
|
--page-grid-outside-margins:16px;
|
|
@@ -8404,6 +8465,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8404
8465
|
--debug-grid-gutter-color:transparent;
|
|
8405
8466
|
background:repeating-linear-gradient(90deg, var(--debug-grid-col-color) 0, var(--debug-grid-col-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps)));
|
|
8406
8467
|
}
|
|
8468
|
+
|
|
8407
8469
|
.page-notice{
|
|
8408
8470
|
background-color:var(--page-notice-general-background-color, var(--color-background-inverse));
|
|
8409
8471
|
border-color:var(--page-notice-general-border-color, var(--color-background-inverse));
|
|
@@ -8556,6 +8618,7 @@ p.page-notice__cta{
|
|
|
8556
8618
|
padding-left:0;
|
|
8557
8619
|
padding-right:16px;
|
|
8558
8620
|
}
|
|
8621
|
+
|
|
8559
8622
|
nav.pagination{
|
|
8560
8623
|
align-items:center;
|
|
8561
8624
|
color:var(--pagination-item-foreground-color, var(--color-foreground-secondary));
|
|
@@ -8960,6 +9023,7 @@ button.icon-btn.panel-dialog__prev{
|
|
|
8960
9023
|
[dir=rtl] .phone-input .listbox-button__value span:last-child,[dir=rtl] .phone-input .listbox__value span:last-child{
|
|
8961
9024
|
direction:ltr;
|
|
8962
9025
|
}
|
|
9026
|
+
|
|
8963
9027
|
.progress-bar{
|
|
8964
9028
|
border:none;
|
|
8965
9029
|
color:var(--progress-bar-foreground-color, var(--color-foreground-accent));
|
|
@@ -9560,6 +9624,7 @@ input.radio__control[type=radio]:focus+span.radio__icon{
|
|
|
9560
9624
|
input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
|
|
9561
9625
|
outline:none;
|
|
9562
9626
|
}
|
|
9627
|
+
|
|
9563
9628
|
.section-notice{
|
|
9564
9629
|
background-color:var(--section-notice-default-background-color, var(--color-background-secondary));
|
|
9565
9630
|
border-radius:var(--section-notice-border-radius, var(--border-radius-50));
|
|
@@ -9693,6 +9758,7 @@ p.section-notice__cta{
|
|
|
9693
9758
|
.section-notice__header:has(svg[class*="24"])+.section-notice__main{
|
|
9694
9759
|
padding-top:2px;
|
|
9695
9760
|
}
|
|
9761
|
+
|
|
9696
9762
|
.section-title{
|
|
9697
9763
|
align-items:baseline;
|
|
9698
9764
|
display:flex;
|
|
@@ -9853,6 +9919,7 @@ p.section-notice__cta{
|
|
|
9853
9919
|
.segmented-buttons__button:not([aria-current]):focus,.segmented-buttons__button:not([aria-current]):hover{
|
|
9854
9920
|
background-color:var(--color-state-primary-hover);
|
|
9855
9921
|
}
|
|
9922
|
+
|
|
9856
9923
|
.select{
|
|
9857
9924
|
color:var(--select-foreground-color, var(--color-foreground-primary));
|
|
9858
9925
|
font-size:var(--font-size-default);
|
|
@@ -10026,6 +10093,7 @@ span.select{
|
|
|
10026
10093
|
text-overflow:ellipsis;
|
|
10027
10094
|
white-space:nowrap;
|
|
10028
10095
|
}
|
|
10096
|
+
|
|
10029
10097
|
@keyframes skeleton-fade-out{
|
|
10030
10098
|
0%{
|
|
10031
10099
|
opacity:1;
|
|
@@ -10199,6 +10267,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
|
|
|
10199
10267
|
[dir=rtl] .skeleton__text--multiline:after{
|
|
10200
10268
|
left:var(--spacing-700);
|
|
10201
10269
|
}
|
|
10270
|
+
|
|
10202
10271
|
.snackbar-dialog{
|
|
10203
10272
|
background-color:var(--snackbar-dialog-background-color, var(--color-background-inverse));
|
|
10204
10273
|
border-radius:var(--snackbar-dialog-border-radius, var(--border-radius-100));
|
|
@@ -10278,6 +10347,7 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
|
|
|
10278
10347
|
left:auto;
|
|
10279
10348
|
right:0;
|
|
10280
10349
|
}
|
|
10350
|
+
|
|
10281
10351
|
.split-button{
|
|
10282
10352
|
display:inline-flex;
|
|
10283
10353
|
}
|
|
@@ -10401,6 +10471,7 @@ div.star-rating-select input.star-rating-select__control--filled+span.star-ratin
|
|
|
10401
10471
|
var(--color-foreground-primary)
|
|
10402
10472
|
);
|
|
10403
10473
|
}
|
|
10474
|
+
|
|
10404
10475
|
.switch{
|
|
10405
10476
|
box-sizing:border-box;
|
|
10406
10477
|
height:40px;
|
|
@@ -10791,6 +10862,7 @@ span.switch__control:focus:not(:focus-visible){
|
|
|
10791
10862
|
[dir=rtl] .table-cell--numeric{
|
|
10792
10863
|
text-align:left;
|
|
10793
10864
|
}
|
|
10865
|
+
|
|
10794
10866
|
.fake-tabs,.tabs{
|
|
10795
10867
|
margin-top:var(--spacing-200);
|
|
10796
10868
|
}
|
|
@@ -10867,6 +10939,7 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
|
|
|
10867
10939
|
.fake-tabs__cell,.tabs__cell{
|
|
10868
10940
|
margin:var(--spacing-200) 0;
|
|
10869
10941
|
}
|
|
10942
|
+
|
|
10870
10943
|
:root{
|
|
10871
10944
|
--input-default-height:40px;
|
|
10872
10945
|
--input-large-height:48px;
|
|
@@ -11012,11 +11085,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
|
|
|
11012
11085
|
.textbox--fluid,.textbox--fluid .textbox__control{
|
|
11013
11086
|
width:100%;
|
|
11014
11087
|
}
|
|
11015
|
-
|
|
11016
|
-
--dialog-scrim-color-hide:rgb(17 24 32 / 0);
|
|
11017
|
-
--dialog-scrim-color-show:rgb(17 24 32 / 0.7);
|
|
11018
|
-
--dialog-lightbox-max-width:616px;
|
|
11019
|
-
}
|
|
11088
|
+
|
|
11020
11089
|
.toast-dialog{
|
|
11021
11090
|
background-color:var(--toast-dialog-background-color, var(--color-background-information));
|
|
11022
11091
|
border-top-left-radius:var(--toast-dialog-border-radius, var(--border-radius-100));
|
|
@@ -11345,6 +11414,7 @@ button.toast-dialog__close>svg{
|
|
|
11345
11414
|
.toggle-button--gallery-layout .toggle-button__icon~.toggle-button__content{
|
|
11346
11415
|
align-self:flex-start;
|
|
11347
11416
|
}
|
|
11417
|
+
|
|
11348
11418
|
:root{
|
|
11349
11419
|
--row-min-toggle-buttons-min:2;
|
|
11350
11420
|
--row-min-toggle-buttons-xs:4;
|
|
@@ -12115,9 +12185,6 @@ button.tooltip__close{
|
|
|
12115
12185
|
max-width:400px;
|
|
12116
12186
|
}
|
|
12117
12187
|
}
|
|
12118
|
-
:root{
|
|
12119
|
-
--bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
|
|
12120
|
-
}
|
|
12121
12188
|
.tourtip{
|
|
12122
12189
|
position:relative;
|
|
12123
12190
|
}
|