@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
|
@@ -669,16 +669,16 @@ legend{
|
|
|
669
669
|
}
|
|
670
670
|
|
|
671
671
|
a{
|
|
672
|
-
color:var(--
|
|
672
|
+
color:var(--color-foreground-link-primary);
|
|
673
673
|
}
|
|
674
674
|
a:visited{
|
|
675
|
-
color:var(--
|
|
675
|
+
color:var(--color-foreground-link-visited);
|
|
676
676
|
}
|
|
677
677
|
a:hover{
|
|
678
|
-
color:var(--
|
|
678
|
+
color:var(--color-foreground-secondary);
|
|
679
679
|
}
|
|
680
680
|
a:not([href]),a[aria-disabled=true]{
|
|
681
|
-
color:var(--
|
|
681
|
+
color:var(--color-foreground-disabled);
|
|
682
682
|
}
|
|
683
683
|
.clearfix:after,.clearfix:before{
|
|
684
684
|
content:" ";
|
|
@@ -883,12 +883,12 @@ ul.accordion--large summary.details__summary{
|
|
|
883
883
|
--dialog-lightbox-max-width:616px;
|
|
884
884
|
}
|
|
885
885
|
.alert-dialog[role=alertdialog]{
|
|
886
|
+
align-items:flex-start;
|
|
886
887
|
background-color:var(--dialog-scrim-color-show);
|
|
887
888
|
bottom:0;
|
|
889
|
+
justify-content:center;
|
|
888
890
|
left:0;
|
|
889
891
|
-webkit-overflow-scrolling:touch;
|
|
890
|
-
align-items:flex-start;
|
|
891
|
-
justify-content:center;
|
|
892
892
|
position:fixed;
|
|
893
893
|
right:0;
|
|
894
894
|
top:0;
|
|
@@ -1188,7 +1188,6 @@ ul.accordion--large summary.details__summary{
|
|
|
1188
1188
|
nav.breadcrumbs{
|
|
1189
1189
|
color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
|
|
1190
1190
|
font-size:var(--font-size-small);
|
|
1191
|
-
height:-moz-fit-content;
|
|
1192
1191
|
height:fit-content;
|
|
1193
1192
|
margin:8px 0;
|
|
1194
1193
|
min-height:16px;
|
|
@@ -1357,7 +1356,7 @@ a.fake-btn--slim,button.btn--slim{
|
|
|
1357
1356
|
padding-right:var(--spacing-100);
|
|
1358
1357
|
}
|
|
1359
1358
|
|
|
1360
|
-
a.fake-btn:visited{
|
|
1359
|
+
a.fake-btn:hover,a.fake-btn:visited{
|
|
1361
1360
|
color:inherit;
|
|
1362
1361
|
}
|
|
1363
1362
|
|
|
@@ -1411,17 +1410,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
|
|
|
1411
1410
|
}
|
|
1412
1411
|
|
|
1413
1412
|
a.fake-btn--primary,button.btn--primary{
|
|
1414
|
-
background-color:var(--
|
|
1415
|
-
border-color:var(--
|
|
1416
|
-
color:var(--
|
|
1413
|
+
background-color:var(--color-background-accent);
|
|
1414
|
+
border-color:var(--color-stroke-accent);
|
|
1415
|
+
color:var(--color-foreground-on-accent);
|
|
1417
1416
|
font-weight:700;
|
|
1418
|
-
overflow:hidden;
|
|
1419
|
-
position:relative;
|
|
1420
1417
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
1421
1418
|
}
|
|
1422
1419
|
a.fake-btn--primary:active,button.btn--primary:active{
|
|
1423
1420
|
transform:scale(.97);
|
|
1424
1421
|
}
|
|
1422
|
+
a.fake-btn--primary,button.btn--primary{
|
|
1423
|
+
overflow:hidden;
|
|
1424
|
+
position:relative;
|
|
1425
|
+
}
|
|
1425
1426
|
a.fake-btn--primary:after,button.btn--primary:after{
|
|
1426
1427
|
background-color:var(--state-layer-neutral);
|
|
1427
1428
|
content:"";
|
|
@@ -1443,14 +1444,14 @@ a.fake-btn--primary{
|
|
|
1443
1444
|
outline-color:var(--color-foreground-primary);
|
|
1444
1445
|
}
|
|
1445
1446
|
|
|
1446
|
-
a.fake-btn--primary:visited{
|
|
1447
|
-
color:var(--
|
|
1447
|
+
a.fake-btn--primary:hover,a.fake-btn--primary:visited{
|
|
1448
|
+
color:var(--color-foreground-on-accent);
|
|
1448
1449
|
}
|
|
1449
1450
|
|
|
1450
1451
|
a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
|
|
1451
|
-
background-color:var(--
|
|
1452
|
-
border-color:var(--
|
|
1453
|
-
color:var(--
|
|
1452
|
+
background-color:var(--color-background-attention);
|
|
1453
|
+
border-color:var(--color-stroke-attention);
|
|
1454
|
+
color:var(--color-foreground-on-attention);
|
|
1454
1455
|
font-weight:700;
|
|
1455
1456
|
overflow:hidden;
|
|
1456
1457
|
position:relative;
|
|
@@ -1473,8 +1474,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
|
|
|
1473
1474
|
}
|
|
1474
1475
|
|
|
1475
1476
|
button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
|
|
1476
|
-
background-color:var(--
|
|
1477
|
-
border-color:var(--
|
|
1477
|
+
background-color:var(--color-background-disabled);
|
|
1478
|
+
border-color:var(--color-stroke-disabled);
|
|
1478
1479
|
}
|
|
1479
1480
|
|
|
1480
1481
|
button.btn .progress-spinner{
|
|
@@ -1527,15 +1528,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
|
|
|
1527
1528
|
|
|
1528
1529
|
a.fake-btn--secondary,button.btn--secondary{
|
|
1529
1530
|
background-color:var(--btn-secondary-background-color, transparent);
|
|
1530
|
-
border-color:var(--
|
|
1531
|
-
color:var(--
|
|
1532
|
-
overflow:hidden;
|
|
1533
|
-
position:relative;
|
|
1531
|
+
border-color:var(--color-stroke-accent);
|
|
1532
|
+
color:var(--color-foreground-accent);
|
|
1534
1533
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
1535
1534
|
}
|
|
1536
1535
|
a.fake-btn--secondary:active,button.btn--secondary:active{
|
|
1537
1536
|
transform:scale(.97);
|
|
1538
1537
|
}
|
|
1538
|
+
a.fake-btn--secondary,button.btn--secondary{
|
|
1539
|
+
overflow:hidden;
|
|
1540
|
+
position:relative;
|
|
1541
|
+
}
|
|
1539
1542
|
a.fake-btn--secondary:after,button.btn--secondary:after{
|
|
1540
1543
|
background-color:var(--state-layer-neutral);
|
|
1541
1544
|
content:"";
|
|
@@ -1553,7 +1556,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
|
|
|
1553
1556
|
background-color:var(--state-layer-pressed);
|
|
1554
1557
|
}
|
|
1555
1558
|
|
|
1556
|
-
a.fake-btn--secondary:visited{
|
|
1559
|
+
a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
|
|
1557
1560
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
1558
1561
|
}
|
|
1559
1562
|
|
|
@@ -1584,13 +1587,15 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
|
|
|
1584
1587
|
|
|
1585
1588
|
a.fake-btn--tertiary,button.btn--tertiary{
|
|
1586
1589
|
border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
|
|
1587
|
-
overflow:hidden;
|
|
1588
|
-
position:relative;
|
|
1589
1590
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
1590
1591
|
}
|
|
1591
1592
|
a.fake-btn--tertiary:active,button.btn--tertiary:active{
|
|
1592
1593
|
transform:scale(.97);
|
|
1593
1594
|
}
|
|
1595
|
+
a.fake-btn--tertiary,button.btn--tertiary{
|
|
1596
|
+
overflow:hidden;
|
|
1597
|
+
position:relative;
|
|
1598
|
+
}
|
|
1594
1599
|
a.fake-btn--tertiary:after,button.btn--tertiary:after{
|
|
1595
1600
|
background-color:var(--state-layer-neutral);
|
|
1596
1601
|
content:"";
|
|
@@ -2721,8 +2726,8 @@ span.combobox{
|
|
|
2721
2726
|
}
|
|
2722
2727
|
|
|
2723
2728
|
.combobox__listbox{
|
|
2724
|
-
background-color:var(--
|
|
2725
|
-
border-radius:var(--
|
|
2729
|
+
background-color:var(--color-background-elevated);
|
|
2730
|
+
border-radius:var(--border-radius-50);
|
|
2726
2731
|
box-shadow:var(--bubble-shadow);
|
|
2727
2732
|
box-sizing:border-box;
|
|
2728
2733
|
display:none;
|
|
@@ -2731,7 +2736,6 @@ span.combobox{
|
|
|
2731
2736
|
overflow-y:auto;
|
|
2732
2737
|
position:absolute;
|
|
2733
2738
|
top:0;
|
|
2734
|
-
width:-moz-fit-content;
|
|
2735
2739
|
width:fit-content;
|
|
2736
2740
|
z-index:2;
|
|
2737
2741
|
}
|
|
@@ -2759,11 +2763,11 @@ span.combobox{
|
|
|
2759
2763
|
|
|
2760
2764
|
.combobox__option[role^=option]{
|
|
2761
2765
|
background-color:initial;
|
|
2762
|
-
border-color:var(--
|
|
2766
|
+
border-color:var(--color-background-primary);
|
|
2763
2767
|
border-style:solid;
|
|
2764
2768
|
border-width:1px;
|
|
2765
2769
|
box-sizing:border-box;
|
|
2766
|
-
color:var(--
|
|
2770
|
+
color:var(--color-foreground-primary);
|
|
2767
2771
|
cursor:default;
|
|
2768
2772
|
display:inline-grid;
|
|
2769
2773
|
font-family:inherit;
|
|
@@ -2780,7 +2784,7 @@ span.combobox{
|
|
|
2780
2784
|
display:none;
|
|
2781
2785
|
}
|
|
2782
2786
|
.combobox__option[role^=option]:hover{
|
|
2783
|
-
color:var(--
|
|
2787
|
+
color:var(--color-foreground-primary);
|
|
2784
2788
|
}
|
|
2785
2789
|
.combobox__option[role^=option]:active{
|
|
2786
2790
|
font-weight:700;
|
|
@@ -2853,7 +2857,6 @@ span.combobox{
|
|
|
2853
2857
|
|
|
2854
2858
|
.combobox__control>input{
|
|
2855
2859
|
-webkit-appearance:none;
|
|
2856
|
-
-moz-appearance:none;
|
|
2857
2860
|
appearance:none;
|
|
2858
2861
|
background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
|
|
2859
2862
|
border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
|
|
@@ -2952,12 +2955,12 @@ span.combobox{
|
|
|
2952
2955
|
}
|
|
2953
2956
|
|
|
2954
2957
|
.confirm-dialog[role=dialog]{
|
|
2958
|
+
align-items:flex-start;
|
|
2955
2959
|
background-color:var(--dialog-scrim-color-show);
|
|
2956
2960
|
bottom:0;
|
|
2961
|
+
justify-content:center;
|
|
2957
2962
|
left:0;
|
|
2958
2963
|
-webkit-overflow-scrolling:touch;
|
|
2959
|
-
align-items:flex-start;
|
|
2960
|
-
justify-content:center;
|
|
2961
2964
|
position:fixed;
|
|
2962
2965
|
right:0;
|
|
2963
2966
|
top:0;
|
|
@@ -3382,12 +3385,12 @@ details.details summary:focus:not(:focus-visible){
|
|
|
3382
3385
|
}
|
|
3383
3386
|
/*! DEPRECATED COMPONENT. Will be removed next major version */
|
|
3384
3387
|
.drawer-dialog[role=dialog]{
|
|
3388
|
+
align-items:flex-end;
|
|
3385
3389
|
background-color:var(--dialog-scrim-color-show);
|
|
3386
3390
|
bottom:0;
|
|
3387
3391
|
left:0;
|
|
3388
|
-
-webkit-overflow-scrolling:touch;
|
|
3389
|
-
align-items:flex-end;
|
|
3390
3392
|
overflow:hidden;
|
|
3393
|
+
-webkit-overflow-scrolling:touch;
|
|
3391
3394
|
position:fixed;
|
|
3392
3395
|
right:0;
|
|
3393
3396
|
top:0;
|
|
@@ -4165,7 +4168,6 @@ div.file-input__container{
|
|
|
4165
4168
|
display:flex;
|
|
4166
4169
|
flex-direction:row;
|
|
4167
4170
|
gap:var(--spacing-100);
|
|
4168
|
-
min-width:-moz-fit-content;
|
|
4169
4171
|
min-width:fit-content;
|
|
4170
4172
|
padding:var(--spacing-200);
|
|
4171
4173
|
pointer-events:none;
|
|
@@ -4236,12 +4238,11 @@ span.file-input__content-cta{
|
|
|
4236
4238
|
|
|
4237
4239
|
a.filter-link,button.filter-button{
|
|
4238
4240
|
align-items:center;
|
|
4239
|
-
background-color:var(--
|
|
4241
|
+
background-color:var(--color-background-secondary);
|
|
4240
4242
|
border:1px solid transparent;
|
|
4241
|
-
border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
|
|
4242
4243
|
border-radius:16px;
|
|
4243
4244
|
box-sizing:border-box;
|
|
4244
|
-
color:var(--
|
|
4245
|
+
color:var(--color-foreground-primary);
|
|
4245
4246
|
display:inline-flex;
|
|
4246
4247
|
flex:0 1 auto;
|
|
4247
4248
|
flex-direction:column;
|
|
@@ -4340,9 +4341,7 @@ a.filter-chip,button.filter-chip{
|
|
|
4340
4341
|
justify-content:space-between;
|
|
4341
4342
|
max-width:296px;
|
|
4342
4343
|
min-width:32px;
|
|
4343
|
-
overflow:hidden;
|
|
4344
4344
|
padding:0 var(--spacing-150);
|
|
4345
|
-
position:relative;
|
|
4346
4345
|
text-decoration:none;
|
|
4347
4346
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
4348
4347
|
vertical-align:bottom;
|
|
@@ -4350,6 +4349,10 @@ a.filter-chip,button.filter-chip{
|
|
|
4350
4349
|
a.filter-chip:active,button.filter-chip:active{
|
|
4351
4350
|
transform:scale(.97);
|
|
4352
4351
|
}
|
|
4352
|
+
a.filter-chip,button.filter-chip{
|
|
4353
|
+
overflow:hidden;
|
|
4354
|
+
position:relative;
|
|
4355
|
+
}
|
|
4353
4356
|
a.filter-chip:after,button.filter-chip:after{
|
|
4354
4357
|
background-color:var(--state-layer-neutral);
|
|
4355
4358
|
content:"";
|
|
@@ -4374,8 +4377,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
|
|
|
4374
4377
|
|
|
4375
4378
|
.filter-chip__media{
|
|
4376
4379
|
align-items:center;
|
|
4377
|
-
border-radius:8px;
|
|
4378
4380
|
border-radius:var(--spacing-400);
|
|
4381
|
+
border-radius:8px;
|
|
4379
4382
|
display:flex;
|
|
4380
4383
|
justify-content:center;
|
|
4381
4384
|
margin-inline-start:-8px;
|
|
@@ -4689,12 +4692,11 @@ span.filter-menu-button+span.filter-menu-button{
|
|
|
4689
4692
|
|
|
4690
4693
|
button.filter-menu-button__button{
|
|
4691
4694
|
align-items:center;
|
|
4692
|
-
background-color:var(--
|
|
4695
|
+
background-color:var(--color-background-secondary);
|
|
4693
4696
|
border:1px solid transparent;
|
|
4694
|
-
border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
|
|
4695
4697
|
border-radius:16px;
|
|
4696
4698
|
box-sizing:border-box;
|
|
4697
|
-
color:var(--
|
|
4699
|
+
color:var(--color-foreground-primary);
|
|
4698
4700
|
display:inline-flex;
|
|
4699
4701
|
flex:0 1 auto;
|
|
4700
4702
|
flex-direction:column;
|
|
@@ -4714,7 +4716,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
|
|
|
4714
4716
|
margin-left:8px;
|
|
4715
4717
|
}
|
|
4716
4718
|
button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
|
|
4717
|
-
background-color:var(--
|
|
4719
|
+
background-color:var(--color-state-secondary-hover);
|
|
4718
4720
|
}
|
|
4719
4721
|
|
|
4720
4722
|
.filter-menu-button__button-cell{
|
|
@@ -4836,8 +4838,6 @@ span.filter-menu-button__radio svg.icon--checked{
|
|
|
4836
4838
|
justify-content:space-between;
|
|
4837
4839
|
line-height:1.4em;
|
|
4838
4840
|
margin:0;
|
|
4839
|
-
outline-offset:-4px;
|
|
4840
|
-
padding:8px 16px;
|
|
4841
4841
|
width:100%;
|
|
4842
4842
|
}
|
|
4843
4843
|
.filter-menu-button__item:hover{
|
|
@@ -4852,6 +4852,10 @@ span.filter-menu-button__radio svg.icon--checked{
|
|
|
4852
4852
|
.filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
|
|
4853
4853
|
background-color:inherit;
|
|
4854
4854
|
}
|
|
4855
|
+
.filter-menu-button__item{
|
|
4856
|
+
outline-offset:-4px;
|
|
4857
|
+
padding:8px 16px;
|
|
4858
|
+
}
|
|
4855
4859
|
.filter-menu-button__item:hover{
|
|
4856
4860
|
background-color:var(--color-state-primary-hover);
|
|
4857
4861
|
}
|
|
@@ -4884,8 +4888,9 @@ span.filter-menu-button__item{
|
|
|
4884
4888
|
button.filter-menu-button__footer{
|
|
4885
4889
|
background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
|
|
4886
4890
|
border:none;
|
|
4887
|
-
border-
|
|
4888
|
-
border-
|
|
4891
|
+
border-color:var(--color-stroke-subtle);
|
|
4892
|
+
border-top-style:solid;
|
|
4893
|
+
border-top-width:1px;
|
|
4889
4894
|
bottom:0;
|
|
4890
4895
|
box-sizing:border-box;
|
|
4891
4896
|
color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
|
|
@@ -6340,10 +6345,12 @@ a.icon-link>svg{
|
|
|
6340
6345
|
}
|
|
6341
6346
|
|
|
6342
6347
|
a.icon-link,button.icon-btn{
|
|
6343
|
-
|
|
6348
|
+
align-items:center;
|
|
6349
|
+
background-color:var(--color-background-secondary);
|
|
6344
6350
|
border:2px solid transparent;
|
|
6345
6351
|
border-radius:50px;
|
|
6346
6352
|
box-sizing:border-box;
|
|
6353
|
+
display:inline-flex;
|
|
6347
6354
|
font-family:inherit;
|
|
6348
6355
|
height:40px;
|
|
6349
6356
|
justify-content:center;
|
|
@@ -6353,7 +6360,7 @@ a.icon-link,button.icon-btn{
|
|
|
6353
6360
|
width:40px;
|
|
6354
6361
|
}
|
|
6355
6362
|
a.icon-link>svg,button.icon-btn>svg{
|
|
6356
|
-
fill:var(--
|
|
6363
|
+
fill:var(--color-foreground-primary);
|
|
6357
6364
|
max-width:75%;
|
|
6358
6365
|
position:relative;
|
|
6359
6366
|
}
|
|
@@ -6368,17 +6375,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
|
|
|
6368
6375
|
}
|
|
6369
6376
|
|
|
6370
6377
|
a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
|
|
6371
|
-
background-color:var(--
|
|
6372
|
-
border-color:var(--
|
|
6373
|
-
color:var(--
|
|
6378
|
+
background-color:var(--color-background-accent);
|
|
6379
|
+
border-color:var(--color-stroke-accent);
|
|
6380
|
+
color:var(--color-foreground-on-accent);
|
|
6374
6381
|
}
|
|
6375
6382
|
|
|
6376
6383
|
a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
|
|
6377
|
-
fill:var(--
|
|
6384
|
+
fill:var(--color-foreground-on-accent);
|
|
6378
6385
|
}
|
|
6379
6386
|
|
|
6380
6387
|
a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
|
|
6381
|
-
fill:var(--
|
|
6388
|
+
fill:var(--color-foreground-accent);
|
|
6382
6389
|
}
|
|
6383
6390
|
|
|
6384
6391
|
a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
|
|
@@ -6404,7 +6411,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
|
|
|
6404
6411
|
}
|
|
6405
6412
|
|
|
6406
6413
|
a.icon-link:visited>svg{
|
|
6407
|
-
fill:var(--
|
|
6414
|
+
fill:var(--color-foreground-primary);
|
|
6408
6415
|
}
|
|
6409
6416
|
|
|
6410
6417
|
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{
|
|
@@ -6416,11 +6423,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
|
|
|
6416
6423
|
}
|
|
6417
6424
|
|
|
6418
6425
|
a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
|
|
6419
|
-
fill:var(--
|
|
6426
|
+
fill:var(--color-foreground-primary);
|
|
6420
6427
|
}
|
|
6421
6428
|
|
|
6422
6429
|
a.icon-link.icon-link--primary:visited>svg{
|
|
6423
|
-
fill:var(--
|
|
6430
|
+
fill:var(--color-foreground-on-accent);
|
|
6424
6431
|
}
|
|
6425
6432
|
|
|
6426
6433
|
a.icon-link--badged,button.icon-btn--badged{
|
|
@@ -6449,12 +6456,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
|
|
|
6449
6456
|
}
|
|
6450
6457
|
|
|
6451
6458
|
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{
|
|
6452
|
-
background-color:var(--
|
|
6453
|
-
border-color:var(--
|
|
6459
|
+
background-color:var(--color-background-disabled);
|
|
6460
|
+
border-color:var(--color-stroke-disabled);
|
|
6454
6461
|
}
|
|
6455
6462
|
|
|
6456
6463
|
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{
|
|
6457
|
-
fill:var(--
|
|
6464
|
+
fill:var(--color-foreground-on-accent);
|
|
6458
6465
|
}
|
|
6459
6466
|
|
|
6460
6467
|
a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
|
|
@@ -6464,8 +6471,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
|
|
|
6464
6471
|
|
|
6465
6472
|
a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
|
|
6466
6473
|
background-color:initial;
|
|
6467
|
-
border-color:var(--
|
|
6468
|
-
color:var(--
|
|
6474
|
+
border-color:var(--color-stroke-accent);
|
|
6475
|
+
color:var(--color-foreground-accent);
|
|
6469
6476
|
}
|
|
6470
6477
|
|
|
6471
6478
|
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{
|
|
@@ -6481,11 +6488,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
|
|
|
6481
6488
|
}
|
|
6482
6489
|
|
|
6483
6490
|
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{
|
|
6484
|
-
border-color:var(--
|
|
6491
|
+
border-color:var(--color-stroke-disabled);
|
|
6485
6492
|
}
|
|
6486
6493
|
|
|
6487
6494
|
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{
|
|
6488
|
-
fill:var(--
|
|
6495
|
+
fill:var(--color-foreground-disabled);
|
|
6489
6496
|
}
|
|
6490
6497
|
|
|
6491
6498
|
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{
|
|
@@ -6497,12 +6504,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
|
|
|
6497
6504
|
|
|
6498
6505
|
a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
|
|
6499
6506
|
background-color:initial;
|
|
6500
|
-
border-color:var(--
|
|
6501
|
-
color:var(--
|
|
6507
|
+
border-color:var(--color-stroke-default);
|
|
6508
|
+
color:var(--color-foreground-accent);
|
|
6502
6509
|
}
|
|
6503
6510
|
|
|
6504
6511
|
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{
|
|
6505
|
-
border-color:var(--
|
|
6512
|
+
border-color:var(--color-stroke-disabled);
|
|
6506
6513
|
}
|
|
6507
6514
|
|
|
6508
6515
|
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{
|
|
@@ -7758,12 +7765,12 @@ span.inline-notice{
|
|
|
7758
7765
|
}
|
|
7759
7766
|
|
|
7760
7767
|
.lightbox-dialog[role=dialog]{
|
|
7768
|
+
align-items:flex-start;
|
|
7761
7769
|
background-color:var(--dialog-scrim-color-show);
|
|
7762
7770
|
bottom:0;
|
|
7771
|
+
justify-content:center;
|
|
7763
7772
|
left:0;
|
|
7764
7773
|
-webkit-overflow-scrolling:touch;
|
|
7765
|
-
align-items:flex-start;
|
|
7766
|
-
justify-content:center;
|
|
7767
7774
|
position:fixed;
|
|
7768
7775
|
right:0;
|
|
7769
7776
|
top:0;
|
|
@@ -8191,11 +8198,11 @@ div.listbox__options--reverse[role=listbox]{
|
|
|
8191
8198
|
|
|
8192
8199
|
div.listbox__option[role=option]{
|
|
8193
8200
|
background-color:initial;
|
|
8194
|
-
border-color:var(--
|
|
8201
|
+
border-color:var(--color-background-primary);
|
|
8195
8202
|
border-style:solid;
|
|
8196
8203
|
border-width:1px;
|
|
8197
8204
|
box-sizing:border-box;
|
|
8198
|
-
color:var(--
|
|
8205
|
+
color:var(--color-foreground-primary);
|
|
8199
8206
|
display:inline-grid;
|
|
8200
8207
|
font-family:inherit;
|
|
8201
8208
|
grid-template-columns:auto auto;
|
|
@@ -8214,7 +8221,7 @@ div.listbox__option[role=option][hidden]{
|
|
|
8214
8221
|
}
|
|
8215
8222
|
div.listbox__option[role=option]:hover{
|
|
8216
8223
|
background-color:var(--color-state-primary-hover);
|
|
8217
|
-
color:var(--
|
|
8224
|
+
color:var(--color-foreground-primary);
|
|
8218
8225
|
}
|
|
8219
8226
|
div.listbox__option[role=option]:active{
|
|
8220
8227
|
font-weight:700;
|
|
@@ -8232,12 +8239,12 @@ span.listbox__value{
|
|
|
8232
8239
|
|
|
8233
8240
|
div.listbox__option svg.icon{
|
|
8234
8241
|
align-self:center;
|
|
8242
|
+
margin-inline-start:var(--spacing-100);
|
|
8235
8243
|
fill:currentColor;
|
|
8236
8244
|
margin:0 auto;
|
|
8237
8245
|
opacity:0;
|
|
8238
8246
|
stroke:currentColor;
|
|
8239
8247
|
stroke-width:0;
|
|
8240
|
-
margin-inline-start:var(--spacing-100);
|
|
8241
8248
|
}
|
|
8242
8249
|
|
|
8243
8250
|
div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
|
|
@@ -8271,8 +8278,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
|
|
|
8271
8278
|
}
|
|
8272
8279
|
|
|
8273
8280
|
div.listbox-button__listbox{
|
|
8274
|
-
background-color:var(--
|
|
8275
|
-
border-radius:var(--
|
|
8281
|
+
background-color:var(--color-background-elevated);
|
|
8282
|
+
border-radius:var(--border-radius-50);
|
|
8276
8283
|
box-shadow:var(--bubble-shadow);
|
|
8277
8284
|
box-sizing:border-box;
|
|
8278
8285
|
display:none;
|
|
@@ -8281,7 +8288,6 @@ div.listbox-button__listbox{
|
|
|
8281
8288
|
overflow-y:auto;
|
|
8282
8289
|
position:absolute;
|
|
8283
8290
|
top:0;
|
|
8284
|
-
width:-moz-fit-content;
|
|
8285
8291
|
width:fit-content;
|
|
8286
8292
|
z-index:2;
|
|
8287
8293
|
}
|
|
@@ -8401,11 +8407,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
|
|
|
8401
8407
|
|
|
8402
8408
|
div.listbox-button__option[role=option]{
|
|
8403
8409
|
background-color:initial;
|
|
8404
|
-
border-color:var(--
|
|
8410
|
+
border-color:var(--color-background-primary);
|
|
8405
8411
|
border-style:solid;
|
|
8406
8412
|
border-width:1px;
|
|
8407
8413
|
box-sizing:border-box;
|
|
8408
|
-
color:var(--
|
|
8414
|
+
color:var(--color-foreground-primary);
|
|
8409
8415
|
cursor:default;
|
|
8410
8416
|
display:inline-grid;
|
|
8411
8417
|
font-family:inherit;
|
|
@@ -8425,7 +8431,7 @@ div.listbox-button__option[role=option][hidden]{
|
|
|
8425
8431
|
}
|
|
8426
8432
|
div.listbox-button__option[role=option]:hover{
|
|
8427
8433
|
background-color:var(--color-state-primary-hover);
|
|
8428
|
-
color:var(--
|
|
8434
|
+
color:var(--color-foreground-primary);
|
|
8429
8435
|
}
|
|
8430
8436
|
div.listbox-button__option[role=option]:active{
|
|
8431
8437
|
font-weight:700;
|
|
@@ -8595,7 +8601,6 @@ span.listbox-button__value{
|
|
|
8595
8601
|
margin:0;
|
|
8596
8602
|
}
|
|
8597
8603
|
.number-input .textbox .textbox__control[type=number]{
|
|
8598
|
-
-moz-appearance:textfield;
|
|
8599
8604
|
-webkit-appearance:textfield;
|
|
8600
8605
|
appearance:textfield;
|
|
8601
8606
|
}
|
|
@@ -8813,8 +8818,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8813
8818
|
}
|
|
8814
8819
|
|
|
8815
8820
|
.fake-menu-button__menu,.menu-button__menu{
|
|
8816
|
-
background-color:var(--
|
|
8817
|
-
border-radius:var(--
|
|
8821
|
+
background-color:var(--color-background-elevated);
|
|
8822
|
+
border-radius:var(--border-radius-50);
|
|
8818
8823
|
box-shadow:var(--bubble-shadow);
|
|
8819
8824
|
box-sizing:border-box;
|
|
8820
8825
|
display:none;
|
|
@@ -8824,7 +8829,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8824
8829
|
overflow-y:auto;
|
|
8825
8830
|
position:absolute;
|
|
8826
8831
|
top:0;
|
|
8827
|
-
width:-moz-fit-content;
|
|
8828
8832
|
width:fit-content;
|
|
8829
8833
|
z-index:2;
|
|
8830
8834
|
}
|
|
@@ -9415,10 +9419,10 @@ nav.pagination--fluid ol.pagination__items li{
|
|
|
9415
9419
|
.panel-dialog[role=dialog]{
|
|
9416
9420
|
background-color:var(--dialog-scrim-color-show);
|
|
9417
9421
|
bottom:0;
|
|
9418
|
-
left:0;
|
|
9419
|
-
-webkit-overflow-scrolling:touch;
|
|
9420
9422
|
flex-direction:column;
|
|
9423
|
+
left:0;
|
|
9421
9424
|
overflow:hidden;
|
|
9425
|
+
-webkit-overflow-scrolling:touch;
|
|
9422
9426
|
position:fixed;
|
|
9423
9427
|
right:0;
|
|
9424
9428
|
top:0;
|
|
@@ -10164,6 +10168,7 @@ hr.progress-stepper__separator{
|
|
|
10164
10168
|
min-width:inherit;
|
|
10165
10169
|
width:4px;
|
|
10166
10170
|
}
|
|
10171
|
+
|
|
10167
10172
|
[dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
|
|
10168
10173
|
text-align:right;
|
|
10169
10174
|
}
|
|
@@ -10298,7 +10303,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
|
|
|
10298
10303
|
|
|
10299
10304
|
div[role=region].section-notice,section.section-notice{
|
|
10300
10305
|
display:grid;
|
|
10301
|
-
grid-template-columns:32px auto
|
|
10306
|
+
grid-template-columns:32px auto min-content min-content;
|
|
10302
10307
|
}
|
|
10303
10308
|
.section-notice--education{
|
|
10304
10309
|
background-color:var(--section-notice-education-background-color, var(--color-background-education));
|
|
@@ -10390,15 +10395,13 @@ p.section-notice__cta{
|
|
|
10390
10395
|
grid-column:4;
|
|
10391
10396
|
grid-row:1;
|
|
10392
10397
|
justify-self:flex-end;
|
|
10393
|
-
margin-right:var(--spacing-200);
|
|
10394
10398
|
margin-top:0;
|
|
10395
|
-
padding-right:var(--spacing-200);
|
|
10396
10399
|
}
|
|
10397
10400
|
.section-notice__header~.section-notice__cta{
|
|
10398
|
-
grid-column:
|
|
10401
|
+
grid-column:3;
|
|
10399
10402
|
}
|
|
10400
10403
|
.section-notice__footer{
|
|
10401
|
-
padding-
|
|
10404
|
+
padding-inline-start:var(--spacing-200);
|
|
10402
10405
|
}
|
|
10403
10406
|
}
|
|
10404
10407
|
[dir=rtl] .section-notice__footer{
|
|
@@ -10406,15 +10409,10 @@ p.section-notice__cta{
|
|
|
10406
10409
|
margin-left:0;
|
|
10407
10410
|
margin-right:auto;
|
|
10408
10411
|
padding-left:0;
|
|
10409
|
-
padding-right:0;
|
|
10410
10412
|
}
|
|
10411
10413
|
[dir=rtl] .section-notice__main{
|
|
10412
10414
|
padding-right:0;
|
|
10413
10415
|
}
|
|
10414
|
-
[dir=rtl] p.section-notice__cta{
|
|
10415
|
-
margin-left:16px;
|
|
10416
|
-
padding-left:16px;
|
|
10417
|
-
}
|
|
10418
10416
|
.section-notice__header:has(svg[class*="24"]){
|
|
10419
10417
|
height:var(--spacing-300);
|
|
10420
10418
|
}
|
|
@@ -10595,7 +10593,6 @@ span.select{
|
|
|
10595
10593
|
|
|
10596
10594
|
.select select{
|
|
10597
10595
|
-webkit-appearance:none;
|
|
10598
|
-
-moz-appearance:none;
|
|
10599
10596
|
appearance:none;
|
|
10600
10597
|
background-color:var(--select-background-color, var(--color-background-secondary));
|
|
10601
10598
|
border-color:var(--select-border-color, var(--color-stroke-default));
|
|
@@ -10718,9 +10715,7 @@ span.select{
|
|
|
10718
10715
|
justify-content:space-between;
|
|
10719
10716
|
max-width:296px;
|
|
10720
10717
|
min-width:32px;
|
|
10721
|
-
overflow:hidden;
|
|
10722
10718
|
padding:0 var(--spacing-150);
|
|
10723
|
-
position:relative;
|
|
10724
10719
|
text-decoration:none;
|
|
10725
10720
|
transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
|
|
10726
10721
|
vertical-align:bottom;
|
|
@@ -10728,6 +10723,10 @@ span.select{
|
|
|
10728
10723
|
.selection-chip:active{
|
|
10729
10724
|
transform:scale(.97);
|
|
10730
10725
|
}
|
|
10726
|
+
.selection-chip{
|
|
10727
|
+
overflow:hidden;
|
|
10728
|
+
position:relative;
|
|
10729
|
+
}
|
|
10731
10730
|
.selection-chip:after{
|
|
10732
10731
|
background-color:var(--state-layer-neutral);
|
|
10733
10732
|
content:"";
|
|
@@ -11658,7 +11657,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
|
|
|
11658
11657
|
gap:var(--spacing-100);
|
|
11659
11658
|
overflow:hidden;
|
|
11660
11659
|
position:relative;
|
|
11661
|
-
width:-moz-fit-content;
|
|
11662
11660
|
width:fit-content;
|
|
11663
11661
|
}
|
|
11664
11662
|
.textbox button.icon-btn{
|
|
@@ -11714,7 +11712,6 @@ input.textbox__control:last-child:not([readonly]){
|
|
|
11714
11712
|
|
|
11715
11713
|
input.textbox__control,textarea.textbox__control{
|
|
11716
11714
|
-webkit-appearance:none;
|
|
11717
|
-
-moz-appearance:none;
|
|
11718
11715
|
appearance:none;
|
|
11719
11716
|
flex-grow:1;
|
|
11720
11717
|
font-size:1em;
|