@ebay/skin 19.14.0 → 19.14.2
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/accordion/accordion.css +2 -2
- package/dist/breadcrumbs/breadcrumbs.css +0 -1
- package/dist/bundles/skin-default.css +13 -23
- package/dist/bundles/skin-full.css +13 -23
- package/dist/bundles/skin-headless.css +13 -23
- package/dist/button/button.css +3 -0
- package/dist/checkbox/checkbox.css +1 -1
- package/dist/combobox/combobox.css +0 -2
- package/dist/file-input/file-input.css +0 -1
- package/dist/global/global.css +4 -16
- package/dist/listbox/listbox.css +1 -1
- package/dist/listbox-button/listbox-button.css +1 -2
- package/dist/menu-button/menu-button.css +0 -1
- package/dist/number-input/number-input.css +0 -1
- package/dist/radio/radio.css +1 -1
- package/dist/select/select.css +0 -1
- package/dist/svg/icon/icon-clock-12.svg +0 -1
- package/dist/svg/icons.svg +0 -1
- package/dist/textbox/textbox.css +1 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ Skin is [MIT](LICENSE) licensed.
|
|
|
12
12
|
|
|
13
13
|
## Install
|
|
14
14
|
|
|
15
|
-
Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/).
|
|
15
|
+
Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/).
|
|
16
16
|
|
|
17
17
|
## Versioning
|
|
18
18
|
|
|
@@ -52,12 +52,12 @@ ul.accordion details .details__content {
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
ul.accordion summary.details__summary span.details__icon svg {
|
|
55
|
+
animation: chevron-bounce-close var(--motion-duration-medium-1)
|
|
56
|
+
var(--motion-easing-standard);
|
|
55
57
|
fill: var(
|
|
56
58
|
--details-secondary-foreground-color,
|
|
57
59
|
var(--color-foreground-secondary)
|
|
58
60
|
);
|
|
59
|
-
animation: chevron-bounce-close var(--motion-duration-medium-1)
|
|
60
|
-
var(--motion-easing-standard);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
ul.accordion details[open] summary.details__summary span.details__icon svg {
|
|
@@ -466,16 +466,16 @@ legend{
|
|
|
466
466
|
}
|
|
467
467
|
|
|
468
468
|
a{
|
|
469
|
-
color:var(--
|
|
469
|
+
color:var(--color-foreground-link-primary);
|
|
470
470
|
}
|
|
471
471
|
a:visited{
|
|
472
|
-
color:var(--
|
|
472
|
+
color:var(--color-foreground-link-visited);
|
|
473
473
|
}
|
|
474
474
|
a:hover{
|
|
475
|
-
color:var(--
|
|
475
|
+
color:var(--color-foreground-secondary);
|
|
476
476
|
}
|
|
477
477
|
a:not([href]),a[aria-disabled=true]{
|
|
478
|
-
color:var(--
|
|
478
|
+
color:var(--color-foreground-disabled);
|
|
479
479
|
}
|
|
480
480
|
.clearfix:after,.clearfix:before{
|
|
481
481
|
content:" ";
|
|
@@ -639,8 +639,8 @@ ul.accordion details .details__content{
|
|
|
639
639
|
}
|
|
640
640
|
|
|
641
641
|
ul.accordion summary.details__summary span.details__icon svg{
|
|
642
|
-
fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
|
|
643
642
|
animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
|
|
643
|
+
fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
|
|
644
644
|
}
|
|
645
645
|
|
|
646
646
|
ul.accordion details[open] summary.details__summary span.details__icon svg{
|
|
@@ -985,7 +985,6 @@ ul.accordion--large summary.details__summary{
|
|
|
985
985
|
nav.breadcrumbs{
|
|
986
986
|
color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
|
|
987
987
|
font-size:var(--font-size-small);
|
|
988
|
-
height:-moz-fit-content;
|
|
989
988
|
height:fit-content;
|
|
990
989
|
margin:8px 0;
|
|
991
990
|
min-height:16px;
|
|
@@ -1154,7 +1153,7 @@ a.fake-btn--slim,button.btn--slim{
|
|
|
1154
1153
|
padding-right:var(--spacing-100);
|
|
1155
1154
|
}
|
|
1156
1155
|
|
|
1157
|
-
a.fake-btn:visited{
|
|
1156
|
+
a.fake-btn:hover,a.fake-btn:visited{
|
|
1158
1157
|
color:inherit;
|
|
1159
1158
|
}
|
|
1160
1159
|
|
|
@@ -1242,7 +1241,7 @@ a.fake-btn--primary{
|
|
|
1242
1241
|
outline-color:var(--color-foreground-primary);
|
|
1243
1242
|
}
|
|
1244
1243
|
|
|
1245
|
-
a.fake-btn--primary:visited{
|
|
1244
|
+
a.fake-btn--primary:hover,a.fake-btn--primary:visited{
|
|
1246
1245
|
color:var(--color-foreground-on-accent);
|
|
1247
1246
|
}
|
|
1248
1247
|
|
|
@@ -1354,7 +1353,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
|
|
|
1354
1353
|
background-color:var(--state-layer-pressed);
|
|
1355
1354
|
}
|
|
1356
1355
|
|
|
1357
|
-
a.fake-btn--secondary:visited{
|
|
1356
|
+
a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
|
|
1358
1357
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
1359
1358
|
}
|
|
1360
1359
|
|
|
@@ -2296,10 +2295,10 @@ input.checkbox__control[type=checkbox]{
|
|
|
2296
2295
|
.checkbox svg{
|
|
2297
2296
|
display:inline-block;
|
|
2298
2297
|
fill:currentColor;
|
|
2298
|
+
height:18px;
|
|
2299
2299
|
pointer-events:none;
|
|
2300
2300
|
stroke:currentColor;
|
|
2301
2301
|
stroke-width:0;
|
|
2302
|
-
height:18px;
|
|
2303
2302
|
vertical-align:middle;
|
|
2304
2303
|
width:18px;
|
|
2305
2304
|
}
|
|
@@ -2534,7 +2533,6 @@ span.combobox{
|
|
|
2534
2533
|
overflow-y:auto;
|
|
2535
2534
|
position:absolute;
|
|
2536
2535
|
top:0;
|
|
2537
|
-
width:-moz-fit-content;
|
|
2538
2536
|
width:fit-content;
|
|
2539
2537
|
z-index:2;
|
|
2540
2538
|
}
|
|
@@ -2656,7 +2654,6 @@ span.combobox{
|
|
|
2656
2654
|
|
|
2657
2655
|
.combobox__control>input{
|
|
2658
2656
|
-webkit-appearance:none;
|
|
2659
|
-
-moz-appearance:none;
|
|
2660
2657
|
appearance:none;
|
|
2661
2658
|
background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
|
|
2662
2659
|
border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
|
|
@@ -3968,7 +3965,6 @@ div.file-input__container{
|
|
|
3968
3965
|
display:flex;
|
|
3969
3966
|
flex-direction:row;
|
|
3970
3967
|
gap:var(--spacing-100);
|
|
3971
|
-
min-width:-moz-fit-content;
|
|
3972
3968
|
min-width:fit-content;
|
|
3973
3969
|
padding:var(--spacing-200);
|
|
3974
3970
|
pointer-events:none;
|
|
@@ -8040,8 +8036,8 @@ span.listbox__value{
|
|
|
8040
8036
|
|
|
8041
8037
|
div.listbox__option svg.icon{
|
|
8042
8038
|
align-self:center;
|
|
8043
|
-
margin-inline-start:var(--spacing-100);
|
|
8044
8039
|
fill:currentColor;
|
|
8040
|
+
margin-inline-start:var(--spacing-100);
|
|
8045
8041
|
margin:0 auto;
|
|
8046
8042
|
opacity:0;
|
|
8047
8043
|
stroke:currentColor;
|
|
@@ -8089,7 +8085,6 @@ div.listbox-button__listbox{
|
|
|
8089
8085
|
overflow-y:auto;
|
|
8090
8086
|
position:absolute;
|
|
8091
8087
|
top:0;
|
|
8092
|
-
width:-moz-fit-content;
|
|
8093
8088
|
width:fit-content;
|
|
8094
8089
|
z-index:2;
|
|
8095
8090
|
}
|
|
@@ -8189,10 +8184,10 @@ div.listbox-button__listbox--fixed{
|
|
|
8189
8184
|
align-self:center;
|
|
8190
8185
|
fill:currentColor;
|
|
8191
8186
|
margin:0 auto;
|
|
8187
|
+
margin-inline-start:var(--spacing-100);
|
|
8192
8188
|
opacity:0;
|
|
8193
8189
|
stroke:currentColor;
|
|
8194
8190
|
stroke-width:0;
|
|
8195
|
-
margin-inline-start:var(--spacing-100);
|
|
8196
8191
|
}
|
|
8197
8192
|
|
|
8198
8193
|
div.listbox-button__option[role=option][aria-selected=true] svg.icon{
|
|
@@ -8403,7 +8398,6 @@ span.listbox-button__value{
|
|
|
8403
8398
|
margin:0;
|
|
8404
8399
|
}
|
|
8405
8400
|
.number-input .textbox .textbox__control[type=number]{
|
|
8406
|
-
-moz-appearance:textfield;
|
|
8407
8401
|
-webkit-appearance:textfield;
|
|
8408
8402
|
appearance:textfield;
|
|
8409
8403
|
}
|
|
@@ -8632,7 +8626,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8632
8626
|
overflow-y:auto;
|
|
8633
8627
|
position:absolute;
|
|
8634
8628
|
top:0;
|
|
8635
|
-
width:-moz-fit-content;
|
|
8636
8629
|
width:fit-content;
|
|
8637
8630
|
z-index:2;
|
|
8638
8631
|
}
|
|
@@ -10056,10 +10049,10 @@ input.radio__control[type=radio]{
|
|
|
10056
10049
|
.radio svg{
|
|
10057
10050
|
display:inline-block;
|
|
10058
10051
|
fill:currentColor;
|
|
10052
|
+
height:18px;
|
|
10059
10053
|
pointer-events:none;
|
|
10060
10054
|
stroke:currentColor;
|
|
10061
10055
|
stroke-width:0;
|
|
10062
|
-
height:18px;
|
|
10063
10056
|
vertical-align:middle;
|
|
10064
10057
|
width:18px;
|
|
10065
10058
|
}
|
|
@@ -10397,7 +10390,6 @@ span.select{
|
|
|
10397
10390
|
|
|
10398
10391
|
.select select{
|
|
10399
10392
|
-webkit-appearance:none;
|
|
10400
|
-
-moz-appearance:none;
|
|
10401
10393
|
appearance:none;
|
|
10402
10394
|
background-color:var(--select-background-color, var(--color-background-secondary));
|
|
10403
10395
|
border-color:var(--select-border-color, var(--color-stroke-default));
|
|
@@ -11462,7 +11454,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
|
|
|
11462
11454
|
gap:var(--spacing-100);
|
|
11463
11455
|
overflow:hidden;
|
|
11464
11456
|
position:relative;
|
|
11465
|
-
width:-moz-fit-content;
|
|
11466
11457
|
width:fit-content;
|
|
11467
11458
|
}
|
|
11468
11459
|
.textbox button.icon-btn{
|
|
@@ -11518,7 +11509,6 @@ input.textbox__control:last-child:not([readonly]){
|
|
|
11518
11509
|
|
|
11519
11510
|
input.textbox__control,textarea.textbox__control{
|
|
11520
11511
|
-webkit-appearance:none;
|
|
11521
|
-
-moz-appearance:none;
|
|
11522
11512
|
appearance:none;
|
|
11523
11513
|
flex-grow:1;
|
|
11524
11514
|
font-size:1em;
|
|
@@ -11559,9 +11549,9 @@ input.textbox__control{
|
|
|
11559
11549
|
.textbox .icon-btn>svg,.textbox>svg{
|
|
11560
11550
|
color:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11561
11551
|
display:inline-flex;
|
|
11552
|
+
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11562
11553
|
height:1lh;
|
|
11563
11554
|
pointer-events:none;
|
|
11564
|
-
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11565
11555
|
}
|
|
11566
11556
|
|
|
11567
11557
|
.textbox>span:first-child,.textbox>svg:first-child{
|
|
@@ -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:" ";
|
|
@@ -842,8 +842,8 @@ ul.accordion details .details__content{
|
|
|
842
842
|
}
|
|
843
843
|
|
|
844
844
|
ul.accordion summary.details__summary span.details__icon svg{
|
|
845
|
-
fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
|
|
846
845
|
animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
|
|
846
|
+
fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
|
|
847
847
|
}
|
|
848
848
|
|
|
849
849
|
ul.accordion details[open] summary.details__summary span.details__icon svg{
|
|
@@ -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
|
|
|
@@ -1445,7 +1444,7 @@ a.fake-btn--primary{
|
|
|
1445
1444
|
outline-color:var(--color-foreground-primary);
|
|
1446
1445
|
}
|
|
1447
1446
|
|
|
1448
|
-
a.fake-btn--primary:visited{
|
|
1447
|
+
a.fake-btn--primary:hover,a.fake-btn--primary:visited{
|
|
1449
1448
|
color:var(--color-foreground-on-accent);
|
|
1450
1449
|
}
|
|
1451
1450
|
|
|
@@ -1557,7 +1556,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
|
|
|
1557
1556
|
background-color:var(--state-layer-pressed);
|
|
1558
1557
|
}
|
|
1559
1558
|
|
|
1560
|
-
a.fake-btn--secondary:visited{
|
|
1559
|
+
a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
|
|
1561
1560
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
1562
1561
|
}
|
|
1563
1562
|
|
|
@@ -2499,10 +2498,10 @@ input.checkbox__control[type=checkbox]{
|
|
|
2499
2498
|
.checkbox svg{
|
|
2500
2499
|
display:inline-block;
|
|
2501
2500
|
fill:currentColor;
|
|
2501
|
+
height:18px;
|
|
2502
2502
|
pointer-events:none;
|
|
2503
2503
|
stroke:currentColor;
|
|
2504
2504
|
stroke-width:0;
|
|
2505
|
-
height:18px;
|
|
2506
2505
|
vertical-align:middle;
|
|
2507
2506
|
width:18px;
|
|
2508
2507
|
}
|
|
@@ -2737,7 +2736,6 @@ span.combobox{
|
|
|
2737
2736
|
overflow-y:auto;
|
|
2738
2737
|
position:absolute;
|
|
2739
2738
|
top:0;
|
|
2740
|
-
width:-moz-fit-content;
|
|
2741
2739
|
width:fit-content;
|
|
2742
2740
|
z-index:2;
|
|
2743
2741
|
}
|
|
@@ -2859,7 +2857,6 @@ span.combobox{
|
|
|
2859
2857
|
|
|
2860
2858
|
.combobox__control>input{
|
|
2861
2859
|
-webkit-appearance:none;
|
|
2862
|
-
-moz-appearance:none;
|
|
2863
2860
|
appearance:none;
|
|
2864
2861
|
background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
|
|
2865
2862
|
border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
|
|
@@ -4171,7 +4168,6 @@ div.file-input__container{
|
|
|
4171
4168
|
display:flex;
|
|
4172
4169
|
flex-direction:row;
|
|
4173
4170
|
gap:var(--spacing-100);
|
|
4174
|
-
min-width:-moz-fit-content;
|
|
4175
4171
|
min-width:fit-content;
|
|
4176
4172
|
padding:var(--spacing-200);
|
|
4177
4173
|
pointer-events:none;
|
|
@@ -8243,8 +8239,8 @@ span.listbox__value{
|
|
|
8243
8239
|
|
|
8244
8240
|
div.listbox__option svg.icon{
|
|
8245
8241
|
align-self:center;
|
|
8246
|
-
margin-inline-start:var(--spacing-100);
|
|
8247
8242
|
fill:currentColor;
|
|
8243
|
+
margin-inline-start:var(--spacing-100);
|
|
8248
8244
|
margin:0 auto;
|
|
8249
8245
|
opacity:0;
|
|
8250
8246
|
stroke:currentColor;
|
|
@@ -8292,7 +8288,6 @@ div.listbox-button__listbox{
|
|
|
8292
8288
|
overflow-y:auto;
|
|
8293
8289
|
position:absolute;
|
|
8294
8290
|
top:0;
|
|
8295
|
-
width:-moz-fit-content;
|
|
8296
8291
|
width:fit-content;
|
|
8297
8292
|
z-index:2;
|
|
8298
8293
|
}
|
|
@@ -8392,10 +8387,10 @@ div.listbox-button__listbox--fixed{
|
|
|
8392
8387
|
align-self:center;
|
|
8393
8388
|
fill:currentColor;
|
|
8394
8389
|
margin:0 auto;
|
|
8390
|
+
margin-inline-start:var(--spacing-100);
|
|
8395
8391
|
opacity:0;
|
|
8396
8392
|
stroke:currentColor;
|
|
8397
8393
|
stroke-width:0;
|
|
8398
|
-
margin-inline-start:var(--spacing-100);
|
|
8399
8394
|
}
|
|
8400
8395
|
|
|
8401
8396
|
div.listbox-button__option[role=option][aria-selected=true] svg.icon{
|
|
@@ -8606,7 +8601,6 @@ span.listbox-button__value{
|
|
|
8606
8601
|
margin:0;
|
|
8607
8602
|
}
|
|
8608
8603
|
.number-input .textbox .textbox__control[type=number]{
|
|
8609
|
-
-moz-appearance:textfield;
|
|
8610
8604
|
-webkit-appearance:textfield;
|
|
8611
8605
|
appearance:textfield;
|
|
8612
8606
|
}
|
|
@@ -8835,7 +8829,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8835
8829
|
overflow-y:auto;
|
|
8836
8830
|
position:absolute;
|
|
8837
8831
|
top:0;
|
|
8838
|
-
width:-moz-fit-content;
|
|
8839
8832
|
width:fit-content;
|
|
8840
8833
|
z-index:2;
|
|
8841
8834
|
}
|
|
@@ -10259,10 +10252,10 @@ input.radio__control[type=radio]{
|
|
|
10259
10252
|
.radio svg{
|
|
10260
10253
|
display:inline-block;
|
|
10261
10254
|
fill:currentColor;
|
|
10255
|
+
height:18px;
|
|
10262
10256
|
pointer-events:none;
|
|
10263
10257
|
stroke:currentColor;
|
|
10264
10258
|
stroke-width:0;
|
|
10265
|
-
height:18px;
|
|
10266
10259
|
vertical-align:middle;
|
|
10267
10260
|
width:18px;
|
|
10268
10261
|
}
|
|
@@ -10600,7 +10593,6 @@ span.select{
|
|
|
10600
10593
|
|
|
10601
10594
|
.select select{
|
|
10602
10595
|
-webkit-appearance:none;
|
|
10603
|
-
-moz-appearance:none;
|
|
10604
10596
|
appearance:none;
|
|
10605
10597
|
background-color:var(--select-background-color, var(--color-background-secondary));
|
|
10606
10598
|
border-color:var(--select-border-color, var(--color-stroke-default));
|
|
@@ -11665,7 +11657,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
|
|
|
11665
11657
|
gap:var(--spacing-100);
|
|
11666
11658
|
overflow:hidden;
|
|
11667
11659
|
position:relative;
|
|
11668
|
-
width:-moz-fit-content;
|
|
11669
11660
|
width:fit-content;
|
|
11670
11661
|
}
|
|
11671
11662
|
.textbox button.icon-btn{
|
|
@@ -11721,7 +11712,6 @@ input.textbox__control:last-child:not([readonly]){
|
|
|
11721
11712
|
|
|
11722
11713
|
input.textbox__control,textarea.textbox__control{
|
|
11723
11714
|
-webkit-appearance:none;
|
|
11724
|
-
-moz-appearance:none;
|
|
11725
11715
|
appearance:none;
|
|
11726
11716
|
flex-grow:1;
|
|
11727
11717
|
font-size:1em;
|
|
@@ -11762,9 +11752,9 @@ input.textbox__control{
|
|
|
11762
11752
|
.textbox .icon-btn>svg,.textbox>svg{
|
|
11763
11753
|
color:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11764
11754
|
display:inline-flex;
|
|
11755
|
+
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11765
11756
|
height:1lh;
|
|
11766
11757
|
pointer-events:none;
|
|
11767
|
-
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11768
11758
|
}
|
|
11769
11759
|
|
|
11770
11760
|
.textbox>span:first-child,.textbox>svg:first-child{
|
|
@@ -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:" ";
|
|
@@ -209,8 +209,8 @@ ul.accordion details .details__content{
|
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
ul.accordion summary.details__summary span.details__icon svg{
|
|
212
|
-
fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
|
|
213
212
|
animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
|
|
213
|
+
fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
ul.accordion details[open] summary.details__summary span.details__icon svg{
|
|
@@ -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
|
|
|
@@ -812,7 +811,7 @@ a.fake-btn--primary{
|
|
|
812
811
|
outline-color:var(--color-foreground-primary);
|
|
813
812
|
}
|
|
814
813
|
|
|
815
|
-
a.fake-btn--primary:visited{
|
|
814
|
+
a.fake-btn--primary:hover,a.fake-btn--primary:visited{
|
|
816
815
|
color:var(--color-foreground-on-accent);
|
|
817
816
|
}
|
|
818
817
|
|
|
@@ -924,7 +923,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
|
|
|
924
923
|
background-color:var(--state-layer-pressed);
|
|
925
924
|
}
|
|
926
925
|
|
|
927
|
-
a.fake-btn--secondary:visited{
|
|
926
|
+
a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
|
|
928
927
|
color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
|
|
929
928
|
}
|
|
930
929
|
|
|
@@ -1866,10 +1865,10 @@ input.checkbox__control[type=checkbox]{
|
|
|
1866
1865
|
.checkbox svg{
|
|
1867
1866
|
display:inline-block;
|
|
1868
1867
|
fill:currentColor;
|
|
1868
|
+
height:18px;
|
|
1869
1869
|
pointer-events:none;
|
|
1870
1870
|
stroke:currentColor;
|
|
1871
1871
|
stroke-width:0;
|
|
1872
|
-
height:18px;
|
|
1873
1872
|
vertical-align:middle;
|
|
1874
1873
|
width:18px;
|
|
1875
1874
|
}
|
|
@@ -2104,7 +2103,6 @@ span.combobox{
|
|
|
2104
2103
|
overflow-y:auto;
|
|
2105
2104
|
position:absolute;
|
|
2106
2105
|
top:0;
|
|
2107
|
-
width:-moz-fit-content;
|
|
2108
2106
|
width:fit-content;
|
|
2109
2107
|
z-index:2;
|
|
2110
2108
|
}
|
|
@@ -2226,7 +2224,6 @@ span.combobox{
|
|
|
2226
2224
|
|
|
2227
2225
|
.combobox__control>input{
|
|
2228
2226
|
-webkit-appearance:none;
|
|
2229
|
-
-moz-appearance:none;
|
|
2230
2227
|
appearance:none;
|
|
2231
2228
|
background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
|
|
2232
2229
|
border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
|
|
@@ -3538,7 +3535,6 @@ div.file-input__container{
|
|
|
3538
3535
|
display:flex;
|
|
3539
3536
|
flex-direction:row;
|
|
3540
3537
|
gap:var(--spacing-100);
|
|
3541
|
-
min-width:-moz-fit-content;
|
|
3542
3538
|
min-width:fit-content;
|
|
3543
3539
|
padding:var(--spacing-200);
|
|
3544
3540
|
pointer-events:none;
|
|
@@ -7610,8 +7606,8 @@ span.listbox__value{
|
|
|
7610
7606
|
|
|
7611
7607
|
div.listbox__option svg.icon{
|
|
7612
7608
|
align-self:center;
|
|
7613
|
-
margin-inline-start:var(--spacing-100);
|
|
7614
7609
|
fill:currentColor;
|
|
7610
|
+
margin-inline-start:var(--spacing-100);
|
|
7615
7611
|
margin:0 auto;
|
|
7616
7612
|
opacity:0;
|
|
7617
7613
|
stroke:currentColor;
|
|
@@ -7659,7 +7655,6 @@ div.listbox-button__listbox{
|
|
|
7659
7655
|
overflow-y:auto;
|
|
7660
7656
|
position:absolute;
|
|
7661
7657
|
top:0;
|
|
7662
|
-
width:-moz-fit-content;
|
|
7663
7658
|
width:fit-content;
|
|
7664
7659
|
z-index:2;
|
|
7665
7660
|
}
|
|
@@ -7759,10 +7754,10 @@ div.listbox-button__listbox--fixed{
|
|
|
7759
7754
|
align-self:center;
|
|
7760
7755
|
fill:currentColor;
|
|
7761
7756
|
margin:0 auto;
|
|
7757
|
+
margin-inline-start:var(--spacing-100);
|
|
7762
7758
|
opacity:0;
|
|
7763
7759
|
stroke:currentColor;
|
|
7764
7760
|
stroke-width:0;
|
|
7765
|
-
margin-inline-start:var(--spacing-100);
|
|
7766
7761
|
}
|
|
7767
7762
|
|
|
7768
7763
|
div.listbox-button__option[role=option][aria-selected=true] svg.icon{
|
|
@@ -7973,7 +7968,6 @@ span.listbox-button__value{
|
|
|
7973
7968
|
margin:0;
|
|
7974
7969
|
}
|
|
7975
7970
|
.number-input .textbox .textbox__control[type=number]{
|
|
7976
|
-
-moz-appearance:textfield;
|
|
7977
7971
|
-webkit-appearance:textfield;
|
|
7978
7972
|
appearance:textfield;
|
|
7979
7973
|
}
|
|
@@ -8202,7 +8196,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
|
8202
8196
|
overflow-y:auto;
|
|
8203
8197
|
position:absolute;
|
|
8204
8198
|
top:0;
|
|
8205
|
-
width:-moz-fit-content;
|
|
8206
8199
|
width:fit-content;
|
|
8207
8200
|
z-index:2;
|
|
8208
8201
|
}
|
|
@@ -9626,10 +9619,10 @@ input.radio__control[type=radio]{
|
|
|
9626
9619
|
.radio svg{
|
|
9627
9620
|
display:inline-block;
|
|
9628
9621
|
fill:currentColor;
|
|
9622
|
+
height:18px;
|
|
9629
9623
|
pointer-events:none;
|
|
9630
9624
|
stroke:currentColor;
|
|
9631
9625
|
stroke-width:0;
|
|
9632
|
-
height:18px;
|
|
9633
9626
|
vertical-align:middle;
|
|
9634
9627
|
width:18px;
|
|
9635
9628
|
}
|
|
@@ -9967,7 +9960,6 @@ span.select{
|
|
|
9967
9960
|
|
|
9968
9961
|
.select select{
|
|
9969
9962
|
-webkit-appearance:none;
|
|
9970
|
-
-moz-appearance:none;
|
|
9971
9963
|
appearance:none;
|
|
9972
9964
|
background-color:var(--select-background-color, var(--color-background-secondary));
|
|
9973
9965
|
border-color:var(--select-border-color, var(--color-stroke-default));
|
|
@@ -11032,7 +11024,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
|
|
|
11032
11024
|
gap:var(--spacing-100);
|
|
11033
11025
|
overflow:hidden;
|
|
11034
11026
|
position:relative;
|
|
11035
|
-
width:-moz-fit-content;
|
|
11036
11027
|
width:fit-content;
|
|
11037
11028
|
}
|
|
11038
11029
|
.textbox button.icon-btn{
|
|
@@ -11088,7 +11079,6 @@ input.textbox__control:last-child:not([readonly]){
|
|
|
11088
11079
|
|
|
11089
11080
|
input.textbox__control,textarea.textbox__control{
|
|
11090
11081
|
-webkit-appearance:none;
|
|
11091
|
-
-moz-appearance:none;
|
|
11092
11082
|
appearance:none;
|
|
11093
11083
|
flex-grow:1;
|
|
11094
11084
|
font-size:1em;
|
|
@@ -11129,9 +11119,9 @@ input.textbox__control{
|
|
|
11129
11119
|
.textbox .icon-btn>svg,.textbox>svg{
|
|
11130
11120
|
color:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11131
11121
|
display:inline-flex;
|
|
11122
|
+
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11132
11123
|
height:1lh;
|
|
11133
11124
|
pointer-events:none;
|
|
11134
|
-
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
11135
11125
|
}
|
|
11136
11126
|
|
|
11137
11127
|
.textbox>span:first-child,.textbox>svg:first-child{
|
package/dist/button/button.css
CHANGED
|
@@ -94,6 +94,7 @@ button.btn--slim {
|
|
|
94
94
|
padding-right: var(--spacing-100);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
a.fake-btn:hover,
|
|
97
98
|
a.fake-btn:visited {
|
|
98
99
|
color: inherit;
|
|
99
100
|
}
|
|
@@ -210,6 +211,7 @@ a.fake-btn--primary {
|
|
|
210
211
|
outline-color: var(--color-foreground-primary);
|
|
211
212
|
}
|
|
212
213
|
|
|
214
|
+
a.fake-btn--primary:hover,
|
|
213
215
|
a.fake-btn--primary:visited {
|
|
214
216
|
color: var(--color-foreground-on-accent);
|
|
215
217
|
}
|
|
@@ -393,6 +395,7 @@ button.btn--secondary[href]:active:after {
|
|
|
393
395
|
background-color: var(--state-layer-pressed);
|
|
394
396
|
}
|
|
395
397
|
|
|
398
|
+
a.fake-btn--secondary:hover,
|
|
396
399
|
a.fake-btn--secondary:visited {
|
|
397
400
|
color: var(
|
|
398
401
|
--btn-secondary-foreground-color,
|
|
@@ -49,10 +49,10 @@ input.checkbox__control[type="checkbox"] {
|
|
|
49
49
|
.checkbox svg {
|
|
50
50
|
display: inline-block;
|
|
51
51
|
fill: currentColor;
|
|
52
|
+
height: 18px;
|
|
52
53
|
pointer-events: none;
|
|
53
54
|
stroke: currentColor;
|
|
54
55
|
stroke-width: 0;
|
|
55
|
-
height: 18px;
|
|
56
56
|
vertical-align: middle;
|
|
57
57
|
width: 18px;
|
|
58
58
|
}
|
|
@@ -34,7 +34,6 @@ span.combobox {
|
|
|
34
34
|
overflow-y: auto;
|
|
35
35
|
position: absolute;
|
|
36
36
|
top: 0;
|
|
37
|
-
width: -moz-fit-content;
|
|
38
37
|
width: fit-content;
|
|
39
38
|
z-index: 2;
|
|
40
39
|
}
|
|
@@ -174,7 +173,6 @@ span.combobox {
|
|
|
174
173
|
|
|
175
174
|
.combobox__control > input {
|
|
176
175
|
-webkit-appearance: none;
|
|
177
|
-
-moz-appearance: none;
|
|
178
176
|
appearance: none;
|
|
179
177
|
background-color: var(
|
|
180
178
|
--combobox-textbox-background-color,
|
package/dist/global/global.css
CHANGED
|
@@ -24,27 +24,15 @@ legend {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
a {
|
|
27
|
-
color: var(
|
|
28
|
-
--link-foreground-color-default,
|
|
29
|
-
var(--color-foreground-link-primary)
|
|
30
|
-
);
|
|
27
|
+
color: var(--color-foreground-link-primary);
|
|
31
28
|
}
|
|
32
29
|
a:visited {
|
|
33
|
-
color: var(
|
|
34
|
-
--link-foreground-color-visited,
|
|
35
|
-
var(--color-foreground-link-visited)
|
|
36
|
-
);
|
|
30
|
+
color: var(--color-foreground-link-visited);
|
|
37
31
|
}
|
|
38
32
|
a:hover {
|
|
39
|
-
color: var(
|
|
40
|
-
--link-foreground-color-hover,
|
|
41
|
-
var(--color-foreground-secondary)
|
|
42
|
-
);
|
|
33
|
+
color: var(--color-foreground-secondary);
|
|
43
34
|
}
|
|
44
35
|
a:not([href]),
|
|
45
36
|
a[aria-disabled="true"] {
|
|
46
|
-
color: var(
|
|
47
|
-
--link-forground-color-disabled,
|
|
48
|
-
var(--color-foreground-disabled)
|
|
49
|
-
);
|
|
37
|
+
color: var(--color-foreground-disabled);
|
|
50
38
|
}
|
package/dist/listbox/listbox.css
CHANGED
|
@@ -34,7 +34,6 @@ div.listbox-button__listbox {
|
|
|
34
34
|
overflow-y: auto;
|
|
35
35
|
position: absolute;
|
|
36
36
|
top: 0;
|
|
37
|
-
width: -moz-fit-content;
|
|
38
37
|
width: fit-content;
|
|
39
38
|
z-index: 2;
|
|
40
39
|
}
|
|
@@ -200,10 +199,10 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
|
|
|
200
199
|
align-self: center;
|
|
201
200
|
fill: currentColor;
|
|
202
201
|
margin: 0 auto;
|
|
202
|
+
margin-inline-start: var(--spacing-100);
|
|
203
203
|
opacity: 0;
|
|
204
204
|
stroke: currentColor;
|
|
205
205
|
stroke-width: 0;
|
|
206
|
-
margin-inline-start: var(--spacing-100);
|
|
207
206
|
}
|
|
208
207
|
|
|
209
208
|
div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
|
package/dist/radio/radio.css
CHANGED
|
@@ -49,10 +49,10 @@ input.radio__control[type="radio"] {
|
|
|
49
49
|
.radio svg {
|
|
50
50
|
display: inline-block;
|
|
51
51
|
fill: currentColor;
|
|
52
|
+
height: 18px;
|
|
52
53
|
pointer-events: none;
|
|
53
54
|
stroke: currentColor;
|
|
54
55
|
stroke-width: 0;
|
|
55
|
-
height: 18px;
|
|
56
56
|
vertical-align: middle;
|
|
57
57
|
width: 18px;
|
|
58
58
|
}
|
package/dist/select/select.css
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path
|
|
3
3
|
d="M6.75 3.75v1.942l1.275 1.283a.75.75 0 0 1-1.058 1.058l-1.5-1.5A.75.75 0 0 1 5.25 6V3.75a.75.75 0 0 1 1.5 0Z"
|
|
4
|
-
fill="#191919"
|
|
5
4
|
/>
|
|
6
5
|
<path
|
|
7
6
|
d="M6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0Zm0 10.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z"
|
package/dist/svg/icons.svg
CHANGED
|
@@ -2151,7 +2151,6 @@
|
|
|
2151
2151
|
<symbol viewBox="0 0 12 12" id="icon-clock-12">
|
|
2152
2152
|
<path
|
|
2153
2153
|
d="M6.75 3.75v1.942l1.275 1.283a.75.75 0 0 1-1.058 1.058l-1.5-1.5A.75.75 0 0 1 5.25 6V3.75a.75.75 0 0 1 1.5 0Z"
|
|
2154
|
-
fill="#191919"
|
|
2155
2154
|
/>
|
|
2156
2155
|
<path
|
|
2157
2156
|
d="M6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0Zm0 10.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z"
|
package/dist/textbox/textbox.css
CHANGED
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
gap: var(--spacing-100);
|
|
24
24
|
overflow: hidden;
|
|
25
25
|
position: relative;
|
|
26
|
-
width: -moz-fit-content;
|
|
27
26
|
width: fit-content;
|
|
28
27
|
}
|
|
29
28
|
.textbox button.icon-btn {
|
|
@@ -98,7 +97,6 @@ input.textbox__control:last-child:not([readonly]) {
|
|
|
98
97
|
input.textbox__control,
|
|
99
98
|
textarea.textbox__control {
|
|
100
99
|
-webkit-appearance: none;
|
|
101
|
-
-moz-appearance: none;
|
|
102
100
|
appearance: none;
|
|
103
101
|
flex-grow: 1;
|
|
104
102
|
font-size: 1em;
|
|
@@ -164,9 +162,9 @@ input.textbox__control {
|
|
|
164
162
|
.textbox > svg {
|
|
165
163
|
color: var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
166
164
|
display: inline-flex;
|
|
165
|
+
fill: var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
167
166
|
height: 1lh;
|
|
168
167
|
pointer-events: none;
|
|
169
|
-
fill: var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
170
168
|
}
|
|
171
169
|
|
|
172
170
|
.textbox > span:first-child,
|