@ebay/skin 19.13.0 → 19.14.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/README.md +1 -1
- package/dist/alert-dialog/alert-dialog.css +2 -2
- package/dist/breadcrumbs/breadcrumbs.css +0 -1
- package/dist/bundles/skin-default.css +103 -106
- package/dist/bundles/skin-full.css +103 -106
- package/dist/bundles/skin-headless.css +103 -106
- package/dist/button/button.css +29 -44
- package/dist/combobox/combobox.css +5 -22
- package/dist/confirm-dialog/confirm-dialog.css +2 -2
- package/dist/drawer-dialog/drawer-dialog.css +2 -2
- package/dist/file-input/file-input.css +0 -1
- package/dist/filter-button/filter-button.css +2 -12
- package/dist/filter-chip/filter-chip.css +6 -3
- package/dist/filter-menu-button/filter-menu-button.css +10 -20
- package/dist/global/global.css +4 -16
- package/dist/icon-button/icon-button.css +22 -68
- package/dist/lightbox-dialog/lightbox-dialog.css +2 -2
- package/dist/listbox/listbox.css +4 -13
- package/dist/listbox-button/listbox-button.css +5 -21
- package/dist/menu-button/menu-button.css +2 -9
- package/dist/number-input/number-input.css +0 -1
- package/dist/panel-dialog/panel-dialog.css +2 -2
- package/dist/progress-stepper/progress-stepper.css +1 -0
- package/dist/section-notice/section-notice.css +3 -10
- package/dist/select/select.css +0 -1
- package/dist/selection-chip/selection-chip.css +4 -2
- package/dist/svg/icon/icon-ai-camera-16.svg +5 -0
- package/dist/svg/icon/icon-ai-camera-20.svg +5 -0
- package/dist/svg/icon/icon-ai-camera-24.svg +5 -0
- package/dist/svg/icon/icon-attention-triangle-16.svg +5 -0
- package/dist/svg/icon/icon-attention-triangle-24.svg +5 -0
- package/dist/svg/icon/icon-attention-triangle-filled-16.svg +5 -0
- package/dist/svg/icon/icon-attention-triangle-filled-24.svg +5 -0
- package/dist/svg/icon/icon-clock-12.svg +9 -0
- package/dist/svg/icon/icon-closed-caption-16.svg +2 -7
- package/dist/svg/icon/icon-closed-caption-24.svg +5 -0
- package/dist/svg/icon/icon-closed-caption-filled-16.svg +2 -4
- package/dist/svg/icon/icon-closed-caption-filled-24.svg +5 -0
- package/dist/svg/icon/icon-fingerprint-16.svg +5 -0
- package/dist/svg/icons.svg +61 -9
- package/dist/textbox/textbox.css +0 -2
- package/package.json +8 -7
|
@@ -36,16 +36,16 @@ legend{
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
a{
|
|
39
|
-
color:var(--
|
|
39
|
+
color:var(--color-foreground-link-primary);
|
|
40
40
|
}
|
|
41
41
|
a:visited{
|
|
42
|
-
color:var(--
|
|
42
|
+
color:var(--color-foreground-link-visited);
|
|
43
43
|
}
|
|
44
44
|
a:hover{
|
|
45
|
-
color:var(--
|
|
45
|
+
color:var(--color-foreground-secondary);
|
|
46
46
|
}
|
|
47
47
|
a:not([href]),a[aria-disabled=true]{
|
|
48
|
-
color:var(--
|
|
48
|
+
color:var(--color-foreground-disabled);
|
|
49
49
|
}
|
|
50
50
|
.clearfix:after,.clearfix:before{
|
|
51
51
|
content:" ";
|
|
@@ -250,12 +250,12 @@ ul.accordion--large summary.details__summary{
|
|
|
250
250
|
--dialog-lightbox-max-width:616px;
|
|
251
251
|
}
|
|
252
252
|
.alert-dialog[role=alertdialog]{
|
|
253
|
+
align-items:flex-start;
|
|
253
254
|
background-color:var(--dialog-scrim-color-show);
|
|
254
255
|
bottom:0;
|
|
256
|
+
justify-content:center;
|
|
255
257
|
left:0;
|
|
256
258
|
-webkit-overflow-scrolling:touch;
|
|
257
|
-
align-items:flex-start;
|
|
258
|
-
justify-content:center;
|
|
259
259
|
position:fixed;
|
|
260
260
|
right:0;
|
|
261
261
|
top:0;
|
|
@@ -555,7 +555,6 @@ ul.accordion--large summary.details__summary{
|
|
|
555
555
|
nav.breadcrumbs{
|
|
556
556
|
color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
|
|
557
557
|
font-size:var(--font-size-small);
|
|
558
|
-
height:-moz-fit-content;
|
|
559
558
|
height:fit-content;
|
|
560
559
|
margin:8px 0;
|
|
561
560
|
min-height:16px;
|
|
@@ -724,7 +723,7 @@ a.fake-btn--slim,button.btn--slim{
|
|
|
724
723
|
padding-right:var(--spacing-100);
|
|
725
724
|
}
|
|
726
725
|
|
|
727
|
-
a.fake-btn:visited{
|
|
726
|
+
a.fake-btn:hover,a.fake-btn:visited{
|
|
728
727
|
color:inherit;
|
|
729
728
|
}
|
|
730
729
|
|
|
@@ -778,17 +777,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
|
|
|
778
777
|
}
|
|
779
778
|
|
|
780
779
|
a.fake-btn--primary,button.btn--primary{
|
|
781
|
-
background-color:var(--
|
|
782
|
-
border-color:var(--
|
|
783
|
-
color:var(--
|
|
780
|
+
background-color:var(--color-background-accent);
|
|
781
|
+
border-color:var(--color-stroke-accent);
|
|
782
|
+
color:var(--color-foreground-on-accent);
|
|
784
783
|
font-weight:700;
|
|
785
|
-
overflow:hidden;
|
|
786
|
-
position:relative;
|
|
787
784
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
788
785
|
}
|
|
789
786
|
a.fake-btn--primary:active,button.btn--primary:active{
|
|
790
787
|
transform:scale(.97);
|
|
791
788
|
}
|
|
789
|
+
a.fake-btn--primary,button.btn--primary{
|
|
790
|
+
overflow:hidden;
|
|
791
|
+
position:relative;
|
|
792
|
+
}
|
|
792
793
|
a.fake-btn--primary:after,button.btn--primary:after{
|
|
793
794
|
background-color:var(--state-layer-neutral);
|
|
794
795
|
content:"";
|
|
@@ -810,14 +811,14 @@ a.fake-btn--primary{
|
|
|
810
811
|
outline-color:var(--color-foreground-primary);
|
|
811
812
|
}
|
|
812
813
|
|
|
813
|
-
a.fake-btn--primary:visited{
|
|
814
|
-
color:var(--
|
|
814
|
+
a.fake-btn--primary:hover,a.fake-btn--primary:visited{
|
|
815
|
+
color:var(--color-foreground-on-accent);
|
|
815
816
|
}
|
|
816
817
|
|
|
817
818
|
a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
|
|
818
|
-
background-color:var(--
|
|
819
|
-
border-color:var(--
|
|
820
|
-
color:var(--
|
|
819
|
+
background-color:var(--color-background-attention);
|
|
820
|
+
border-color:var(--color-stroke-attention);
|
|
821
|
+
color:var(--color-foreground-on-attention);
|
|
821
822
|
font-weight:700;
|
|
822
823
|
overflow:hidden;
|
|
823
824
|
position:relative;
|
|
@@ -840,8 +841,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
|
|
|
840
841
|
}
|
|
841
842
|
|
|
842
843
|
button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
|
|
843
|
-
background-color:var(--
|
|
844
|
-
border-color:var(--
|
|
844
|
+
background-color:var(--color-background-disabled);
|
|
845
|
+
border-color:var(--color-stroke-disabled);
|
|
845
846
|
}
|
|
846
847
|
|
|
847
848
|
button.btn .progress-spinner{
|
|
@@ -894,15 +895,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
|
|
|
894
895
|
|
|
895
896
|
a.fake-btn--secondary,button.btn--secondary{
|
|
896
897
|
background-color:var(--btn-secondary-background-color, transparent);
|
|
897
|
-
border-color:var(--
|
|
898
|
-
color:var(--
|
|
899
|
-
overflow:hidden;
|
|
900
|
-
position:relative;
|
|
898
|
+
border-color:var(--color-stroke-accent);
|
|
899
|
+
color:var(--color-foreground-accent);
|
|
901
900
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
902
901
|
}
|
|
903
902
|
a.fake-btn--secondary:active,button.btn--secondary:active{
|
|
904
903
|
transform:scale(.97);
|
|
905
904
|
}
|
|
905
|
+
a.fake-btn--secondary,button.btn--secondary{
|
|
906
|
+
overflow:hidden;
|
|
907
|
+
position:relative;
|
|
908
|
+
}
|
|
906
909
|
a.fake-btn--secondary:after,button.btn--secondary:after{
|
|
907
910
|
background-color:var(--state-layer-neutral);
|
|
908
911
|
content:"";
|
|
@@ -920,7 +923,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
|
|
|
920
923
|
background-color:var(--state-layer-pressed);
|
|
921
924
|
}
|
|
922
925
|
|
|
923
|
-
a.fake-btn--secondary:visited{
|
|
926
|
+
a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
|
|
924
927
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
925
928
|
}
|
|
926
929
|
|
|
@@ -951,13 +954,15 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
|
|
|
951
954
|
|
|
952
955
|
a.fake-btn--tertiary,button.btn--tertiary{
|
|
953
956
|
border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
|
|
954
|
-
overflow:hidden;
|
|
955
|
-
position:relative;
|
|
956
957
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
957
958
|
}
|
|
958
959
|
a.fake-btn--tertiary:active,button.btn--tertiary:active{
|
|
959
960
|
transform:scale(.97);
|
|
960
961
|
}
|
|
962
|
+
a.fake-btn--tertiary,button.btn--tertiary{
|
|
963
|
+
overflow:hidden;
|
|
964
|
+
position:relative;
|
|
965
|
+
}
|
|
961
966
|
a.fake-btn--tertiary:after,button.btn--tertiary:after{
|
|
962
967
|
background-color:var(--state-layer-neutral);
|
|
963
968
|
content:"";
|
|
@@ -2088,8 +2093,8 @@ span.combobox{
|
|
|
2088
2093
|
}
|
|
2089
2094
|
|
|
2090
2095
|
.combobox__listbox{
|
|
2091
|
-
background-color:var(--
|
|
2092
|
-
border-radius:var(--
|
|
2096
|
+
background-color:var(--color-background-elevated);
|
|
2097
|
+
border-radius:var(--border-radius-50);
|
|
2093
2098
|
box-shadow:var(--bubble-shadow);
|
|
2094
2099
|
box-sizing:border-box;
|
|
2095
2100
|
display:none;
|
|
@@ -2098,7 +2103,6 @@ span.combobox{
|
|
|
2098
2103
|
overflow-y:auto;
|
|
2099
2104
|
position:absolute;
|
|
2100
2105
|
top:0;
|
|
2101
|
-
width:-moz-fit-content;
|
|
2102
2106
|
width:fit-content;
|
|
2103
2107
|
z-index:2;
|
|
2104
2108
|
}
|
|
@@ -2126,11 +2130,11 @@ span.combobox{
|
|
|
2126
2130
|
|
|
2127
2131
|
.combobox__option[role^=option]{
|
|
2128
2132
|
background-color:initial;
|
|
2129
|
-
border-color:var(--
|
|
2133
|
+
border-color:var(--color-background-primary);
|
|
2130
2134
|
border-style:solid;
|
|
2131
2135
|
border-width:1px;
|
|
2132
2136
|
box-sizing:border-box;
|
|
2133
|
-
color:var(--
|
|
2137
|
+
color:var(--color-foreground-primary);
|
|
2134
2138
|
cursor:default;
|
|
2135
2139
|
display:inline-grid;
|
|
2136
2140
|
font-family:inherit;
|
|
@@ -2147,7 +2151,7 @@ span.combobox{
|
|
|
2147
2151
|
display:none;
|
|
2148
2152
|
}
|
|
2149
2153
|
.combobox__option[role^=option]:hover{
|
|
2150
|
-
color:var(--
|
|
2154
|
+
color:var(--color-foreground-primary);
|
|
2151
2155
|
}
|
|
2152
2156
|
.combobox__option[role^=option]:active{
|
|
2153
2157
|
font-weight:700;
|
|
@@ -2220,7 +2224,6 @@ span.combobox{
|
|
|
2220
2224
|
|
|
2221
2225
|
.combobox__control>input{
|
|
2222
2226
|
-webkit-appearance:none;
|
|
2223
|
-
-moz-appearance:none;
|
|
2224
2227
|
appearance:none;
|
|
2225
2228
|
background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
|
|
2226
2229
|
border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
|
|
@@ -2319,12 +2322,12 @@ span.combobox{
|
|
|
2319
2322
|
}
|
|
2320
2323
|
|
|
2321
2324
|
.confirm-dialog[role=dialog]{
|
|
2325
|
+
align-items:flex-start;
|
|
2322
2326
|
background-color:var(--dialog-scrim-color-show);
|
|
2323
2327
|
bottom:0;
|
|
2328
|
+
justify-content:center;
|
|
2324
2329
|
left:0;
|
|
2325
2330
|
-webkit-overflow-scrolling:touch;
|
|
2326
|
-
align-items:flex-start;
|
|
2327
|
-
justify-content:center;
|
|
2328
2331
|
position:fixed;
|
|
2329
2332
|
right:0;
|
|
2330
2333
|
top:0;
|
|
@@ -2749,12 +2752,12 @@ details.details summary:focus:not(:focus-visible){
|
|
|
2749
2752
|
}
|
|
2750
2753
|
/*! DEPRECATED COMPONENT. Will be removed next major version */
|
|
2751
2754
|
.drawer-dialog[role=dialog]{
|
|
2755
|
+
align-items:flex-end;
|
|
2752
2756
|
background-color:var(--dialog-scrim-color-show);
|
|
2753
2757
|
bottom:0;
|
|
2754
2758
|
left:0;
|
|
2755
|
-
-webkit-overflow-scrolling:touch;
|
|
2756
|
-
align-items:flex-end;
|
|
2757
2759
|
overflow:hidden;
|
|
2760
|
+
-webkit-overflow-scrolling:touch;
|
|
2758
2761
|
position:fixed;
|
|
2759
2762
|
right:0;
|
|
2760
2763
|
top:0;
|
|
@@ -3532,7 +3535,6 @@ div.file-input__container{
|
|
|
3532
3535
|
display:flex;
|
|
3533
3536
|
flex-direction:row;
|
|
3534
3537
|
gap:var(--spacing-100);
|
|
3535
|
-
min-width:-moz-fit-content;
|
|
3536
3538
|
min-width:fit-content;
|
|
3537
3539
|
padding:var(--spacing-200);
|
|
3538
3540
|
pointer-events:none;
|
|
@@ -3603,12 +3605,11 @@ span.file-input__content-cta{
|
|
|
3603
3605
|
|
|
3604
3606
|
a.filter-link,button.filter-button{
|
|
3605
3607
|
align-items:center;
|
|
3606
|
-
background-color:var(--
|
|
3608
|
+
background-color:var(--color-background-secondary);
|
|
3607
3609
|
border:1px solid transparent;
|
|
3608
|
-
border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
|
|
3609
3610
|
border-radius:16px;
|
|
3610
3611
|
box-sizing:border-box;
|
|
3611
|
-
color:var(--
|
|
3612
|
+
color:var(--color-foreground-primary);
|
|
3612
3613
|
display:inline-flex;
|
|
3613
3614
|
flex:0 1 auto;
|
|
3614
3615
|
flex-direction:column;
|
|
@@ -3707,9 +3708,7 @@ a.filter-chip,button.filter-chip{
|
|
|
3707
3708
|
justify-content:space-between;
|
|
3708
3709
|
max-width:296px;
|
|
3709
3710
|
min-width:32px;
|
|
3710
|
-
overflow:hidden;
|
|
3711
3711
|
padding:0 var(--spacing-150);
|
|
3712
|
-
position:relative;
|
|
3713
3712
|
text-decoration:none;
|
|
3714
3713
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
3715
3714
|
vertical-align:bottom;
|
|
@@ -3717,6 +3716,10 @@ a.filter-chip,button.filter-chip{
|
|
|
3717
3716
|
a.filter-chip:active,button.filter-chip:active{
|
|
3718
3717
|
transform:scale(.97);
|
|
3719
3718
|
}
|
|
3719
|
+
a.filter-chip,button.filter-chip{
|
|
3720
|
+
overflow:hidden;
|
|
3721
|
+
position:relative;
|
|
3722
|
+
}
|
|
3720
3723
|
a.filter-chip:after,button.filter-chip:after{
|
|
3721
3724
|
background-color:var(--state-layer-neutral);
|
|
3722
3725
|
content:"";
|
|
@@ -3741,8 +3744,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
|
|
|
3741
3744
|
|
|
3742
3745
|
.filter-chip__media{
|
|
3743
3746
|
align-items:center;
|
|
3744
|
-
border-radius:8px;
|
|
3745
3747
|
border-radius:var(--spacing-400);
|
|
3748
|
+
border-radius:8px;
|
|
3746
3749
|
display:flex;
|
|
3747
3750
|
justify-content:center;
|
|
3748
3751
|
margin-inline-start:-8px;
|
|
@@ -4056,12 +4059,11 @@ span.filter-menu-button+span.filter-menu-button{
|
|
|
4056
4059
|
|
|
4057
4060
|
button.filter-menu-button__button{
|
|
4058
4061
|
align-items:center;
|
|
4059
|
-
background-color:var(--
|
|
4062
|
+
background-color:var(--color-background-secondary);
|
|
4060
4063
|
border:1px solid transparent;
|
|
4061
|
-
border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
|
|
4062
4064
|
border-radius:16px;
|
|
4063
4065
|
box-sizing:border-box;
|
|
4064
|
-
color:var(--
|
|
4066
|
+
color:var(--color-foreground-primary);
|
|
4065
4067
|
display:inline-flex;
|
|
4066
4068
|
flex:0 1 auto;
|
|
4067
4069
|
flex-direction:column;
|
|
@@ -4081,7 +4083,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
|
|
|
4081
4083
|
margin-left:8px;
|
|
4082
4084
|
}
|
|
4083
4085
|
button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
|
|
4084
|
-
background-color:var(--
|
|
4086
|
+
background-color:var(--color-state-secondary-hover);
|
|
4085
4087
|
}
|
|
4086
4088
|
|
|
4087
4089
|
.filter-menu-button__button-cell{
|
|
@@ -4203,8 +4205,6 @@ span.filter-menu-button__radio svg.icon--checked{
|
|
|
4203
4205
|
justify-content:space-between;
|
|
4204
4206
|
line-height:1.4em;
|
|
4205
4207
|
margin:0;
|
|
4206
|
-
outline-offset:-4px;
|
|
4207
|
-
padding:8px 16px;
|
|
4208
4208
|
width:100%;
|
|
4209
4209
|
}
|
|
4210
4210
|
.filter-menu-button__item:hover{
|
|
@@ -4219,6 +4219,10 @@ span.filter-menu-button__radio svg.icon--checked{
|
|
|
4219
4219
|
.filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
|
|
4220
4220
|
background-color:inherit;
|
|
4221
4221
|
}
|
|
4222
|
+
.filter-menu-button__item{
|
|
4223
|
+
outline-offset:-4px;
|
|
4224
|
+
padding:8px 16px;
|
|
4225
|
+
}
|
|
4222
4226
|
.filter-menu-button__item:hover{
|
|
4223
4227
|
background-color:var(--color-state-primary-hover);
|
|
4224
4228
|
}
|
|
@@ -4251,8 +4255,9 @@ span.filter-menu-button__item{
|
|
|
4251
4255
|
button.filter-menu-button__footer{
|
|
4252
4256
|
background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
|
|
4253
4257
|
border:none;
|
|
4254
|
-
border-
|
|
4255
|
-
border-
|
|
4258
|
+
border-color:var(--color-stroke-subtle);
|
|
4259
|
+
border-top-style:solid;
|
|
4260
|
+
border-top-width:1px;
|
|
4256
4261
|
bottom:0;
|
|
4257
4262
|
box-sizing:border-box;
|
|
4258
4263
|
color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
|
|
@@ -5707,10 +5712,12 @@ a.icon-link>svg{
|
|
|
5707
5712
|
}
|
|
5708
5713
|
|
|
5709
5714
|
a.icon-link,button.icon-btn{
|
|
5710
|
-
|
|
5715
|
+
align-items:center;
|
|
5716
|
+
background-color:var(--color-background-secondary);
|
|
5711
5717
|
border:2px solid transparent;
|
|
5712
5718
|
border-radius:50px;
|
|
5713
5719
|
box-sizing:border-box;
|
|
5720
|
+
display:inline-flex;
|
|
5714
5721
|
font-family:inherit;
|
|
5715
5722
|
height:40px;
|
|
5716
5723
|
justify-content:center;
|
|
@@ -5720,7 +5727,7 @@ a.icon-link,button.icon-btn{
|
|
|
5720
5727
|
width:40px;
|
|
5721
5728
|
}
|
|
5722
5729
|
a.icon-link>svg,button.icon-btn>svg{
|
|
5723
|
-
fill:var(--
|
|
5730
|
+
fill:var(--color-foreground-primary);
|
|
5724
5731
|
max-width:75%;
|
|
5725
5732
|
position:relative;
|
|
5726
5733
|
}
|
|
@@ -5735,17 +5742,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
|
|
|
5735
5742
|
}
|
|
5736
5743
|
|
|
5737
5744
|
a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
|
|
5738
|
-
background-color:var(--
|
|
5739
|
-
border-color:var(--
|
|
5740
|
-
color:var(--
|
|
5745
|
+
background-color:var(--color-background-accent);
|
|
5746
|
+
border-color:var(--color-stroke-accent);
|
|
5747
|
+
color:var(--color-foreground-on-accent);
|
|
5741
5748
|
}
|
|
5742
5749
|
|
|
5743
5750
|
a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
|
|
5744
|
-
fill:var(--
|
|
5751
|
+
fill:var(--color-foreground-on-accent);
|
|
5745
5752
|
}
|
|
5746
5753
|
|
|
5747
5754
|
a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
|
|
5748
|
-
fill:var(--
|
|
5755
|
+
fill:var(--color-foreground-accent);
|
|
5749
5756
|
}
|
|
5750
5757
|
|
|
5751
5758
|
a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
|
|
@@ -5771,7 +5778,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
|
|
|
5771
5778
|
}
|
|
5772
5779
|
|
|
5773
5780
|
a.icon-link:visited>svg{
|
|
5774
|
-
fill:var(--
|
|
5781
|
+
fill:var(--color-foreground-primary);
|
|
5775
5782
|
}
|
|
5776
5783
|
|
|
5777
5784
|
a:not([href]).icon-link>svg,a[aria-disabled=true].icon-link>svg,button[aria-disabled=true].icon-btn>svg,button[disabled].icon-btn>svg{
|
|
@@ -5783,11 +5790,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
|
|
|
5783
5790
|
}
|
|
5784
5791
|
|
|
5785
5792
|
a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
|
|
5786
|
-
fill:var(--
|
|
5793
|
+
fill:var(--color-foreground-primary);
|
|
5787
5794
|
}
|
|
5788
5795
|
|
|
5789
5796
|
a.icon-link.icon-link--primary:visited>svg{
|
|
5790
|
-
fill:var(--
|
|
5797
|
+
fill:var(--color-foreground-on-accent);
|
|
5791
5798
|
}
|
|
5792
5799
|
|
|
5793
5800
|
a.icon-link--badged,button.icon-btn--badged{
|
|
@@ -5816,12 +5823,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
|
|
|
5816
5823
|
}
|
|
5817
5824
|
|
|
5818
5825
|
a:not([href]).icon-link.icon-link--primary,a[aria-disabled=true].icon-link.icon-link--primary,button[aria-disabled=true].icon-btn.icon-btn--primary,button[disabled].icon-btn.icon-btn--primary{
|
|
5819
|
-
background-color:var(--
|
|
5820
|
-
border-color:var(--
|
|
5826
|
+
background-color:var(--color-background-disabled);
|
|
5827
|
+
border-color:var(--color-stroke-disabled);
|
|
5821
5828
|
}
|
|
5822
5829
|
|
|
5823
5830
|
a:not([href]).icon-link.icon-link--primary>svg,a[aria-disabled=true].icon-link.icon-link--primary>svg,button[aria-disabled=true].icon-btn.icon-btn--primary>svg,button[disabled].icon-btn.icon-btn--primary>svg{
|
|
5824
|
-
fill:var(--
|
|
5831
|
+
fill:var(--color-foreground-on-accent);
|
|
5825
5832
|
}
|
|
5826
5833
|
|
|
5827
5834
|
a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
|
|
@@ -5831,8 +5838,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
|
|
|
5831
5838
|
|
|
5832
5839
|
a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
|
|
5833
5840
|
background-color:initial;
|
|
5834
|
-
border-color:var(--
|
|
5835
|
-
color:var(--
|
|
5841
|
+
border-color:var(--color-stroke-accent);
|
|
5842
|
+
color:var(--color-foreground-accent);
|
|
5836
5843
|
}
|
|
5837
5844
|
|
|
5838
5845
|
a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):hover{
|
|
@@ -5848,11 +5855,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
|
|
|
5848
5855
|
}
|
|
5849
5856
|
|
|
5850
5857
|
a:not([href]).icon-link.icon-link--secondary,a[aria-disabled=true].icon-link.icon-link--secondary,button[aria-disabled=true].icon-btn.icon-btn--secondary,button[disabled].icon-btn.icon-btn--secondary{
|
|
5851
|
-
border-color:var(--
|
|
5858
|
+
border-color:var(--color-stroke-disabled);
|
|
5852
5859
|
}
|
|
5853
5860
|
|
|
5854
5861
|
a:not([href]).icon-link.icon-blinktn--secondary>svg,a[aria-disabled=true].icon-link.icon-link--secondary>svg,button[aria-disabled=true].icon-btn.icon-btn--secondary>svg,button[disabled].icon-btn.icon-btn--secondary>svg{
|
|
5855
|
-
fill:var(--
|
|
5862
|
+
fill:var(--color-foreground-disabled);
|
|
5856
5863
|
}
|
|
5857
5864
|
|
|
5858
5865
|
a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):hover{
|
|
@@ -5864,12 +5871,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
|
|
|
5864
5871
|
|
|
5865
5872
|
a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
|
|
5866
5873
|
background-color:initial;
|
|
5867
|
-
border-color:var(--
|
|
5868
|
-
color:var(--
|
|
5874
|
+
border-color:var(--color-stroke-default);
|
|
5875
|
+
color:var(--color-foreground-accent);
|
|
5869
5876
|
}
|
|
5870
5877
|
|
|
5871
5878
|
a:not([href]).icon-link.icon-link--tertiary,a[aria-disabled=true].icon-link.icon-link--tertiary,button[aria-disabled=true].icon-btn.icon-btn--tertiary,button[disabled].icon-btn.icon-btn--tertiary{
|
|
5872
|
-
border-color:var(--
|
|
5879
|
+
border-color:var(--color-stroke-disabled);
|
|
5873
5880
|
}
|
|
5874
5881
|
|
|
5875
5882
|
a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):hover{
|
|
@@ -7125,12 +7132,12 @@ span.inline-notice{
|
|
|
7125
7132
|
}
|
|
7126
7133
|
|
|
7127
7134
|
.lightbox-dialog[role=dialog]{
|
|
7135
|
+
align-items:flex-start;
|
|
7128
7136
|
background-color:var(--dialog-scrim-color-show);
|
|
7129
7137
|
bottom:0;
|
|
7138
|
+
justify-content:center;
|
|
7130
7139
|
left:0;
|
|
7131
7140
|
-webkit-overflow-scrolling:touch;
|
|
7132
|
-
align-items:flex-start;
|
|
7133
|
-
justify-content:center;
|
|
7134
7141
|
position:fixed;
|
|
7135
7142
|
right:0;
|
|
7136
7143
|
top:0;
|
|
@@ -7558,11 +7565,11 @@ div.listbox__options--reverse[role=listbox]{
|
|
|
7558
7565
|
|
|
7559
7566
|
div.listbox__option[role=option]{
|
|
7560
7567
|
background-color:initial;
|
|
7561
|
-
border-color:var(--
|
|
7568
|
+
border-color:var(--color-background-primary);
|
|
7562
7569
|
border-style:solid;
|
|
7563
7570
|
border-width:1px;
|
|
7564
7571
|
box-sizing:border-box;
|
|
7565
|
-
color:var(--
|
|
7572
|
+
color:var(--color-foreground-primary);
|
|
7566
7573
|
display:inline-grid;
|
|
7567
7574
|
font-family:inherit;
|
|
7568
7575
|
grid-template-columns:auto auto;
|
|
@@ -7581,7 +7588,7 @@ div.listbox__option[role=option][hidden]{
|
|
|
7581
7588
|
}
|
|
7582
7589
|
div.listbox__option[role=option]:hover{
|
|
7583
7590
|
background-color:var(--color-state-primary-hover);
|
|
7584
|
-
color:var(--
|
|
7591
|
+
color:var(--color-foreground-primary);
|
|
7585
7592
|
}
|
|
7586
7593
|
div.listbox__option[role=option]:active{
|
|
7587
7594
|
font-weight:700;
|
|
@@ -7599,12 +7606,12 @@ span.listbox__value{
|
|
|
7599
7606
|
|
|
7600
7607
|
div.listbox__option svg.icon{
|
|
7601
7608
|
align-self:center;
|
|
7609
|
+
margin-inline-start:var(--spacing-100);
|
|
7602
7610
|
fill:currentColor;
|
|
7603
7611
|
margin:0 auto;
|
|
7604
7612
|
opacity:0;
|
|
7605
7613
|
stroke:currentColor;
|
|
7606
7614
|
stroke-width:0;
|
|
7607
|
-
margin-inline-start:var(--spacing-100);
|
|
7608
7615
|
}
|
|
7609
7616
|
|
|
7610
7617
|
div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
|
|
@@ -7638,8 +7645,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
|
|
|
7638
7645
|
}
|
|
7639
7646
|
|
|
7640
7647
|
div.listbox-button__listbox{
|
|
7641
|
-
background-color:var(--
|
|
7642
|
-
border-radius:var(--
|
|
7648
|
+
background-color:var(--color-background-elevated);
|
|
7649
|
+
border-radius:var(--border-radius-50);
|
|
7643
7650
|
box-shadow:var(--bubble-shadow);
|
|
7644
7651
|
box-sizing:border-box;
|
|
7645
7652
|
display:none;
|
|
@@ -7648,7 +7655,6 @@ div.listbox-button__listbox{
|
|
|
7648
7655
|
overflow-y:auto;
|
|
7649
7656
|
position:absolute;
|
|
7650
7657
|
top:0;
|
|
7651
|
-
width:-moz-fit-content;
|
|
7652
7658
|
width:fit-content;
|
|
7653
7659
|
z-index:2;
|
|
7654
7660
|
}
|
|
@@ -7768,11 +7774,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
|
|
|
7768
7774
|
|
|
7769
7775
|
div.listbox-button__option[role=option]{
|
|
7770
7776
|
background-color:initial;
|
|
7771
|
-
border-color:var(--
|
|
7777
|
+
border-color:var(--color-background-primary);
|
|
7772
7778
|
border-style:solid;
|
|
7773
7779
|
border-width:1px;
|
|
7774
7780
|
box-sizing:border-box;
|
|
7775
|
-
color:var(--
|
|
7781
|
+
color:var(--color-foreground-primary);
|
|
7776
7782
|
cursor:default;
|
|
7777
7783
|
display:inline-grid;
|
|
7778
7784
|
font-family:inherit;
|
|
@@ -7792,7 +7798,7 @@ div.listbox-button__option[role=option][hidden]{
|
|
|
7792
7798
|
}
|
|
7793
7799
|
div.listbox-button__option[role=option]:hover{
|
|
7794
7800
|
background-color:var(--color-state-primary-hover);
|
|
7795
|
-
color:var(--
|
|
7801
|
+
color:var(--color-foreground-primary);
|
|
7796
7802
|
}
|
|
7797
7803
|
div.listbox-button__option[role=option]:active{
|
|
7798
7804
|
font-weight:700;
|
|
@@ -7962,7 +7968,6 @@ span.listbox-button__value{
|
|
|
7962
7968
|
margin:0;
|
|
7963
7969
|
}
|
|
7964
7970
|
.number-input .textbox .textbox__control[type=number]{
|
|
7965
|
-
-moz-appearance:textfield;
|
|
7966
7971
|
-webkit-appearance:textfield;
|
|
7967
7972
|
appearance:textfield;
|
|
7968
7973
|
}
|
|
@@ -8180,8 +8185,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8180
8185
|
}
|
|
8181
8186
|
|
|
8182
8187
|
.fake-menu-button__menu,.menu-button__menu{
|
|
8183
|
-
background-color:var(--
|
|
8184
|
-
border-radius:var(--
|
|
8188
|
+
background-color:var(--color-background-elevated);
|
|
8189
|
+
border-radius:var(--border-radius-50);
|
|
8185
8190
|
box-shadow:var(--bubble-shadow);
|
|
8186
8191
|
box-sizing:border-box;
|
|
8187
8192
|
display:none;
|
|
@@ -8191,7 +8196,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8191
8196
|
overflow-y:auto;
|
|
8192
8197
|
position:absolute;
|
|
8193
8198
|
top:0;
|
|
8194
|
-
width:-moz-fit-content;
|
|
8195
8199
|
width:fit-content;
|
|
8196
8200
|
z-index:2;
|
|
8197
8201
|
}
|
|
@@ -8782,10 +8786,10 @@ nav.pagination--fluid ol.pagination__items li{
|
|
|
8782
8786
|
.panel-dialog[role=dialog]{
|
|
8783
8787
|
background-color:var(--dialog-scrim-color-show);
|
|
8784
8788
|
bottom:0;
|
|
8785
|
-
left:0;
|
|
8786
|
-
-webkit-overflow-scrolling:touch;
|
|
8787
8789
|
flex-direction:column;
|
|
8790
|
+
left:0;
|
|
8788
8791
|
overflow:hidden;
|
|
8792
|
+
-webkit-overflow-scrolling:touch;
|
|
8789
8793
|
position:fixed;
|
|
8790
8794
|
right:0;
|
|
8791
8795
|
top:0;
|
|
@@ -9531,6 +9535,7 @@ hr.progress-stepper__separator{
|
|
|
9531
9535
|
min-width:inherit;
|
|
9532
9536
|
width:4px;
|
|
9533
9537
|
}
|
|
9538
|
+
|
|
9534
9539
|
[dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
|
|
9535
9540
|
text-align:right;
|
|
9536
9541
|
}
|
|
@@ -9665,7 +9670,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
|
|
|
9665
9670
|
|
|
9666
9671
|
div[role=region].section-notice,section.section-notice{
|
|
9667
9672
|
display:grid;
|
|
9668
|
-
grid-template-columns:32px auto
|
|
9673
|
+
grid-template-columns:32px auto min-content min-content;
|
|
9669
9674
|
}
|
|
9670
9675
|
.section-notice--education{
|
|
9671
9676
|
background-color:var(--section-notice-education-background-color, var(--color-background-education));
|
|
@@ -9757,15 +9762,13 @@ p.section-notice__cta{
|
|
|
9757
9762
|
grid-column:4;
|
|
9758
9763
|
grid-row:1;
|
|
9759
9764
|
justify-self:flex-end;
|
|
9760
|
-
margin-right:var(--spacing-200);
|
|
9761
9765
|
margin-top:0;
|
|
9762
|
-
padding-right:var(--spacing-200);
|
|
9763
9766
|
}
|
|
9764
9767
|
.section-notice__header~.section-notice__cta{
|
|
9765
|
-
grid-column:
|
|
9768
|
+
grid-column:3;
|
|
9766
9769
|
}
|
|
9767
9770
|
.section-notice__footer{
|
|
9768
|
-
padding-
|
|
9771
|
+
padding-inline-start:var(--spacing-200);
|
|
9769
9772
|
}
|
|
9770
9773
|
}
|
|
9771
9774
|
[dir=rtl] .section-notice__footer{
|
|
@@ -9773,15 +9776,10 @@ p.section-notice__cta{
|
|
|
9773
9776
|
margin-left:0;
|
|
9774
9777
|
margin-right:auto;
|
|
9775
9778
|
padding-left:0;
|
|
9776
|
-
padding-right:0;
|
|
9777
9779
|
}
|
|
9778
9780
|
[dir=rtl] .section-notice__main{
|
|
9779
9781
|
padding-right:0;
|
|
9780
9782
|
}
|
|
9781
|
-
[dir=rtl] p.section-notice__cta{
|
|
9782
|
-
margin-left:16px;
|
|
9783
|
-
padding-left:16px;
|
|
9784
|
-
}
|
|
9785
9783
|
.section-notice__header:has(svg[class*="24"]){
|
|
9786
9784
|
height:var(--spacing-300);
|
|
9787
9785
|
}
|
|
@@ -9962,7 +9960,6 @@ span.select{
|
|
|
9962
9960
|
|
|
9963
9961
|
.select select{
|
|
9964
9962
|
-webkit-appearance:none;
|
|
9965
|
-
-moz-appearance:none;
|
|
9966
9963
|
appearance:none;
|
|
9967
9964
|
background-color:var(--select-background-color, var(--color-background-secondary));
|
|
9968
9965
|
border-color:var(--select-border-color, var(--color-stroke-default));
|
|
@@ -10085,9 +10082,7 @@ span.select{
|
|
|
10085
10082
|
justify-content:space-between;
|
|
10086
10083
|
max-width:296px;
|
|
10087
10084
|
min-width:32px;
|
|
10088
|
-
overflow:hidden;
|
|
10089
10085
|
padding:0 var(--spacing-150);
|
|
10090
|
-
position:relative;
|
|
10091
10086
|
text-decoration:none;
|
|
10092
10087
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
10093
10088
|
vertical-align:bottom;
|
|
@@ -10095,6 +10090,10 @@ span.select{
|
|
|
10095
10090
|
.selection-chip:active{
|
|
10096
10091
|
transform:scale(.97);
|
|
10097
10092
|
}
|
|
10093
|
+
.selection-chip{
|
|
10094
|
+
overflow:hidden;
|
|
10095
|
+
position:relative;
|
|
10096
|
+
}
|
|
10098
10097
|
.selection-chip:after{
|
|
10099
10098
|
background-color:var(--state-layer-neutral);
|
|
10100
10099
|
content:"";
|
|
@@ -11025,7 +11024,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
|
|
|
11025
11024
|
gap:var(--spacing-100);
|
|
11026
11025
|
overflow:hidden;
|
|
11027
11026
|
position:relative;
|
|
11028
|
-
width:-moz-fit-content;
|
|
11029
11027
|
width:fit-content;
|
|
11030
11028
|
}
|
|
11031
11029
|
.textbox button.icon-btn{
|
|
@@ -11081,7 +11079,6 @@ input.textbox__control:last-child:not([readonly]){
|
|
|
11081
11079
|
|
|
11082
11080
|
input.textbox__control,textarea.textbox__control{
|
|
11083
11081
|
-webkit-appearance:none;
|
|
11084
|
-
-moz-appearance:none;
|
|
11085
11082
|
appearance:none;
|
|
11086
11083
|
flex-grow:1;
|
|
11087
11084
|
font-size:1em;
|