@itwin/itwinui-css 0.46.1 → 0.47.0
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/css/all.css +185 -188
- package/css/badge.css +4 -2
- package/css/button.css +31 -95
- package/css/color-picker.css +11 -8
- package/css/expandable-block.css +12 -0
- package/css/inputs.css +6 -2
- package/css/side-navigation.css +2 -4
- package/css/skip-to-content.css +51 -0
- package/css/table.css +10 -48
- package/css/tile.css +42 -15
- package/css/tree.css +19 -14
- package/package.json +2 -2
- package/scss/badge/badge.scss +5 -2
- package/scss/button/button-group.scss +19 -41
- package/scss/button/button.scss +19 -0
- package/scss/button/classes.scss +0 -1
- package/scss/button/default.scss +1 -0
- package/scss/classes.scss +1 -0
- package/scss/color-picker/color-picker.scss +13 -6
- package/scss/expandable-block/block.scss +23 -0
- package/scss/index.scss +1 -0
- package/scss/inputs/labeled-inputs.scss +2 -0
- package/scss/side-navigation/side-navigation.scss +3 -6
- package/scss/skip-to-content/classes.scss +7 -0
- package/scss/skip-to-content/index.scss +3 -0
- package/scss/skip-to-content/skip-to-content.scss +36 -0
- package/scss/style/mixins.scss +29 -4
- package/scss/style/variables.scss +1 -0
- package/scss/table/paginator.scss +5 -10
- package/scss/tile/classes.scss +4 -0
- package/scss/tile/tile.scss +17 -16
- package/scss/tree/classes.scss +4 -0
- package/scss/tree/tree.scss +16 -4
package/css/all.css
CHANGED
|
@@ -483,6 +483,8 @@ html.iui-theme-dark{
|
|
|
483
483
|
outline-color:var(--iui-color-foreground-primary); }
|
|
484
484
|
|
|
485
485
|
.iui-badge{
|
|
486
|
+
--iui-badge-background-color:#C7CCD1;
|
|
487
|
+
--_iui-badge-text-color:rgba(0, 0, 0, 0.6);
|
|
486
488
|
margin:0;
|
|
487
489
|
padding:0;
|
|
488
490
|
border:none;
|
|
@@ -492,8 +494,8 @@ html.iui-theme-dark{
|
|
|
492
494
|
padding:0 6px;
|
|
493
495
|
margin:6px 0;
|
|
494
496
|
border-radius:3px;
|
|
495
|
-
background-color:var(--badge-color
|
|
496
|
-
color:var(--badge-text-color
|
|
497
|
+
background-color:var(--iui-badge-background-color);
|
|
498
|
+
color:var(--_iui-badge-text-color);
|
|
497
499
|
text-transform:uppercase;
|
|
498
500
|
-webkit-user-select:none;
|
|
499
501
|
-moz-user-select:none;
|
|
@@ -643,6 +645,7 @@ html.iui-theme-dark{
|
|
|
643
645
|
fill:var(--iui-icons-color-negative); }
|
|
644
646
|
|
|
645
647
|
.iui-button{
|
|
648
|
+
--_iui-button-active-stripe-inset:initial;
|
|
646
649
|
margin:0;
|
|
647
650
|
padding:0;
|
|
648
651
|
border:none;
|
|
@@ -697,6 +700,13 @@ html.iui-theme-dark{
|
|
|
697
700
|
background:var(--iui-color-background-disabled);
|
|
698
701
|
border-color:var(--iui-color-background-disabled);
|
|
699
702
|
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
703
|
+
.iui-button.iui-active::after{
|
|
704
|
+
content:'';
|
|
705
|
+
position:absolute;
|
|
706
|
+
inset:var(--_iui-button-active-stripe-inset);
|
|
707
|
+
background-color:var(--iui-color-foreground-primary); }
|
|
708
|
+
.iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
|
|
709
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
700
710
|
.iui-button.iui-default{
|
|
701
711
|
background-color:#FFF;
|
|
702
712
|
border-color:rgba(0, 0, 0, 0.4);
|
|
@@ -903,133 +913,61 @@ html.iui-theme-dark{
|
|
|
903
913
|
isolation:isolate; }
|
|
904
914
|
.iui-button-group > *{
|
|
905
915
|
display:flex; }
|
|
906
|
-
.iui-button-group > * input, .iui-button-group > * button{
|
|
916
|
+
.iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
|
|
907
917
|
position:relative;
|
|
908
|
-
|
|
909
|
-
.iui-button-group > * input:hover, .iui-button-group > * button:hover{
|
|
918
|
+
--_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
|
|
919
|
+
.iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
|
|
910
920
|
z-index:1; }
|
|
911
|
-
.iui-button-group > * input:focus, .iui-button-group > * button:focus{
|
|
921
|
+
.iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
|
|
912
922
|
z-index:2; }
|
|
913
|
-
|
|
914
|
-
z-index:revert; }
|
|
915
|
-
.iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
|
|
923
|
+
.iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled="true"], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled="true"], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
|
|
916
924
|
z-index:-1; }
|
|
917
|
-
|
|
925
|
+
.iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
|
|
926
|
+
border-radius:0;
|
|
927
|
+
transition-duration:0ms; }
|
|
928
|
+
.iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
|
|
918
929
|
transition-duration:0.2s; }
|
|
919
|
-
|
|
920
|
-
content:'';
|
|
921
|
-
position:absolute;
|
|
922
|
-
height:2px;
|
|
923
|
-
opacity:1;
|
|
924
|
-
top:2px;
|
|
925
|
-
left:2px;
|
|
926
|
-
width:calc(100% - 4px);
|
|
927
|
-
background-color:#008BE1;
|
|
928
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
929
|
-
.iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
|
|
930
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
931
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
932
|
-
.iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
|
|
933
|
-
border-radius:0; }
|
|
934
|
-
.iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
|
|
930
|
+
.iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
|
|
935
931
|
border-top-left-radius:3px;
|
|
936
932
|
border-bottom-left-radius:3px; }
|
|
937
|
-
.iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
|
|
933
|
+
.iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
|
|
938
934
|
border-top-right-radius:3px;
|
|
939
935
|
border-bottom-right-radius:3px; }
|
|
940
936
|
.iui-button-group > * + *{
|
|
941
937
|
margin-left:-1px; }
|
|
942
|
-
.iui-button-group > *:not(:first-child) .iui-default:disabled{
|
|
938
|
+
.iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
|
|
943
939
|
border-left-color:#DCE0E3;
|
|
944
940
|
border-left-color:var(--iui-color-background-4); }
|
|
945
941
|
|
|
946
942
|
.iui-button-split-menu{
|
|
947
|
-
display:inline-flex;
|
|
948
|
-
align-items:center;
|
|
949
|
-
isolation:isolate;
|
|
950
943
|
display:inline-flex;
|
|
951
944
|
align-items:center;
|
|
952
945
|
isolation:isolate; }
|
|
953
946
|
.iui-button-split-menu > *{
|
|
954
947
|
display:flex; }
|
|
955
|
-
.iui-button-split-menu > * input, .iui-button-split-menu > * button{
|
|
948
|
+
.iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
|
|
956
949
|
position:relative;
|
|
957
|
-
|
|
958
|
-
.iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
|
|
950
|
+
--_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
|
|
951
|
+
.iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
|
|
959
952
|
z-index:1; }
|
|
960
|
-
.iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
|
|
953
|
+
.iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
|
|
961
954
|
z-index:2; }
|
|
962
|
-
|
|
963
|
-
z-index:revert; }
|
|
964
|
-
.iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
|
|
955
|
+
.iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled="true"], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled="true"], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
|
|
965
956
|
z-index:-1; }
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
.iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
|
|
969
|
-
content:'';
|
|
970
|
-
position:absolute;
|
|
971
|
-
height:2px;
|
|
972
|
-
opacity:1;
|
|
973
|
-
top:2px;
|
|
974
|
-
left:2px;
|
|
975
|
-
width:calc(100% - 4px);
|
|
976
|
-
background-color:#008BE1;
|
|
977
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
978
|
-
.iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
|
|
979
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
980
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
981
|
-
.iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
|
|
982
|
-
border-radius:0; }
|
|
983
|
-
.iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
|
|
984
|
-
border-top-left-radius:3px;
|
|
985
|
-
border-bottom-left-radius:3px; }
|
|
986
|
-
.iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
|
|
987
|
-
border-top-right-radius:3px;
|
|
988
|
-
border-bottom-right-radius:3px; }
|
|
989
|
-
.iui-button-split-menu > * + *{
|
|
990
|
-
margin-left:-1px; }
|
|
991
|
-
.iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
|
|
992
|
-
border-left-color:#DCE0E3;
|
|
993
|
-
border-left-color:var(--iui-color-background-4); }
|
|
994
|
-
.iui-button-split-menu > *{
|
|
995
|
-
display:flex; }
|
|
996
|
-
.iui-button-split-menu > * input, .iui-button-split-menu > * button{
|
|
997
|
-
position:relative;
|
|
957
|
+
.iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
|
|
958
|
+
border-radius:0;
|
|
998
959
|
transition-duration:0ms; }
|
|
999
|
-
.iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
|
|
1000
|
-
z-index:1; }
|
|
1001
|
-
.iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
|
|
1002
|
-
z-index:2; }
|
|
1003
|
-
.iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
|
|
1004
|
-
z-index:revert; }
|
|
1005
|
-
.iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
|
|
1006
|
-
z-index:-1; }
|
|
1007
|
-
.iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
|
|
960
|
+
.iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
|
|
1008
961
|
transition-duration:0.2s; }
|
|
1009
|
-
|
|
1010
|
-
content:'';
|
|
1011
|
-
position:absolute;
|
|
1012
|
-
height:2px;
|
|
1013
|
-
opacity:1;
|
|
1014
|
-
top:2px;
|
|
1015
|
-
left:2px;
|
|
1016
|
-
width:calc(100% - 4px);
|
|
1017
|
-
background-color:#008BE1;
|
|
1018
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
1019
|
-
.iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
|
|
1020
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
1021
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
1022
|
-
.iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
|
|
1023
|
-
border-radius:0; }
|
|
1024
|
-
.iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
|
|
962
|
+
.iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
|
|
1025
963
|
border-top-left-radius:3px;
|
|
1026
964
|
border-bottom-left-radius:3px; }
|
|
1027
|
-
.iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
|
|
965
|
+
.iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
|
|
1028
966
|
border-top-right-radius:3px;
|
|
1029
967
|
border-bottom-right-radius:3px; }
|
|
1030
968
|
.iui-button-split-menu > * + *{
|
|
1031
969
|
margin-left:-1px; }
|
|
1032
|
-
.iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
|
|
970
|
+
.iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
|
|
1033
971
|
border-left-color:#DCE0E3;
|
|
1034
972
|
border-left-color:var(--iui-color-background-4); }
|
|
1035
973
|
.iui-button-split-menu:hover{
|
|
@@ -1243,6 +1181,7 @@ html.iui-theme-dark{
|
|
|
1243
1181
|
color:var(--iui-text-color-muted); }
|
|
1244
1182
|
|
|
1245
1183
|
.iui-color-picker{
|
|
1184
|
+
--iui-color-picker-selected-color:initial;
|
|
1246
1185
|
margin:0;
|
|
1247
1186
|
padding:0;
|
|
1248
1187
|
border:none;
|
|
@@ -1323,11 +1262,12 @@ html.iui-theme-dark{
|
|
|
1323
1262
|
appearance:none; }
|
|
1324
1263
|
|
|
1325
1264
|
.iui-color-swatch{
|
|
1265
|
+
--iui-color-swatch-background:initial;
|
|
1326
1266
|
height:24px;
|
|
1327
1267
|
width:24px;
|
|
1328
1268
|
cursor:pointer;
|
|
1329
1269
|
border-radius:5px;
|
|
1330
|
-
background-color:var(--swatch-
|
|
1270
|
+
background-color:var(--iui-color-swatch-background);
|
|
1331
1271
|
margin-bottom:4px;
|
|
1332
1272
|
margin-right:4px;
|
|
1333
1273
|
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
@@ -1366,12 +1306,13 @@ html.iui-theme-dark{
|
|
|
1366
1306
|
min-width:280px; }
|
|
1367
1307
|
|
|
1368
1308
|
.iui-color-field{
|
|
1309
|
+
--iui-color-field-hue:initial;
|
|
1369
1310
|
position:relative;
|
|
1370
1311
|
cursor:crosshair;
|
|
1371
1312
|
width:100%;
|
|
1372
1313
|
height:209px;
|
|
1373
|
-
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
|
|
1374
|
-
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
|
|
1314
|
+
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
|
|
1315
|
+
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
|
|
1375
1316
|
.iui-color-field:not(:last-child){
|
|
1376
1317
|
margin-bottom:6px; }
|
|
1377
1318
|
|
|
@@ -1396,24 +1337,24 @@ html.iui-theme-dark{
|
|
|
1396
1337
|
content:'';
|
|
1397
1338
|
width:100%;
|
|
1398
1339
|
height:100%;
|
|
1399
|
-
background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
|
|
1340
|
+
background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
|
|
1400
1341
|
|
|
1401
1342
|
.iui-opacity-slider .iui-slider-thumb{
|
|
1402
1343
|
top:7px; }
|
|
1403
1344
|
|
|
1404
1345
|
.iui-color-dot{
|
|
1346
|
+
--iui-color-dot-inset:initial;
|
|
1405
1347
|
position:absolute;
|
|
1406
|
-
|
|
1407
|
-
left:var(--left, 0%);
|
|
1348
|
+
inset:var(--iui-color-dot-inset);
|
|
1408
1349
|
width:16px;
|
|
1409
1350
|
height:16px;
|
|
1410
1351
|
border-radius:50%;
|
|
1411
1352
|
transform:translate(-8px, -8px);
|
|
1412
1353
|
cursor:crosshair;
|
|
1413
1354
|
box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
1414
|
-
background-color:var(--selected-color);
|
|
1355
|
+
background-color:var(--iui-color-picker-selected-color);
|
|
1415
1356
|
box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
|
|
1416
|
-
background-color:var(--selected-color); }
|
|
1357
|
+
background-color:var(--iui-color-picker-selected-color); }
|
|
1417
1358
|
.iui-color-dot:hover{
|
|
1418
1359
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
1419
1360
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
@@ -1698,6 +1639,18 @@ html.iui-theme-dark{
|
|
|
1698
1639
|
margin-left:8px; }
|
|
1699
1640
|
.iui-expandable-block.iui-small .iui-header > .iui-status-icon{
|
|
1700
1641
|
margin-left:8px; }
|
|
1642
|
+
.iui-expandable-block.iui-borderless,
|
|
1643
|
+
.iui-expandable-block.iui-borderless .iui-header,
|
|
1644
|
+
.iui-expandable-block.iui-borderless .iui-expandable-content{
|
|
1645
|
+
background-color:transparent;
|
|
1646
|
+
border:initial; }
|
|
1647
|
+
.iui-expandable-block.iui-borderless .iui-header{
|
|
1648
|
+
border-radius:3px; }
|
|
1649
|
+
.iui-expandable-block.iui-borderless .iui-header:hover{
|
|
1650
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
1651
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
|
|
1652
|
+
.iui-expandable-block.iui-borderless .iui-expandable-content > div{
|
|
1653
|
+
padding:0; }
|
|
1701
1654
|
|
|
1702
1655
|
.iui-fieldset{
|
|
1703
1656
|
margin:0;
|
|
@@ -2681,7 +2634,9 @@ html.iui-theme-dark{
|
|
|
2681
2634
|
width:fit-content;
|
|
2682
2635
|
margin-right:0;
|
|
2683
2636
|
border-top-left-radius:0;
|
|
2684
|
-
border-bottom-left-radius:0;
|
|
2637
|
+
border-bottom-left-radius:0;
|
|
2638
|
+
border-top-right-radius:inherit;
|
|
2639
|
+
border-bottom-right-radius:inherit; }
|
|
2685
2640
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
|
|
2686
2641
|
align-items:center;
|
|
2687
2642
|
height:90%;
|
|
@@ -3169,7 +3124,9 @@ html.iui-theme-dark{
|
|
|
3169
3124
|
width:fit-content;
|
|
3170
3125
|
margin-right:0;
|
|
3171
3126
|
border-top-left-radius:0;
|
|
3172
|
-
border-bottom-left-radius:0;
|
|
3127
|
+
border-bottom-left-radius:0;
|
|
3128
|
+
border-top-right-radius:inherit;
|
|
3129
|
+
border-bottom-right-radius:inherit; }
|
|
3173
3130
|
.iui-end-icon.iui-actionable{
|
|
3174
3131
|
align-items:center;
|
|
3175
3132
|
height:90%;
|
|
@@ -4578,7 +4535,8 @@ html.iui-theme-dark{
|
|
|
4578
4535
|
border-left:none;
|
|
4579
4536
|
border-right:none;
|
|
4580
4537
|
overflow:hidden;
|
|
4581
|
-
justify-content:flex-start;
|
|
4538
|
+
justify-content:flex-start;
|
|
4539
|
+
--_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
|
|
4582
4540
|
.iui-side-navigation .iui-sidenav-button:not(.iui-expand){
|
|
4583
4541
|
height:55px; }
|
|
4584
4542
|
@supports (padding: max(0px)){
|
|
@@ -4598,9 +4556,6 @@ html.iui-theme-dark{
|
|
|
4598
4556
|
.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
|
|
4599
4557
|
fill:#008BE1;
|
|
4600
4558
|
fill:var(--iui-color-foreground-primary); }
|
|
4601
|
-
.iui-side-navigation .iui-sidenav-button.iui-active{
|
|
4602
|
-
box-shadow:inset 2px 0 0 0 #008BE1;
|
|
4603
|
-
box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
4604
4559
|
.iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
|
|
4605
4560
|
background-color:#F8F9FB;
|
|
4606
4561
|
background-color:var(--iui-color-background-2); }
|
|
@@ -5226,56 +5181,10 @@ html.iui-theme-dark{
|
|
|
5226
5181
|
.iui-paginator-pages-group{
|
|
5227
5182
|
display:inline-flex;
|
|
5228
5183
|
align-items:center;
|
|
5229
|
-
isolation:isolate;
|
|
5230
5184
|
margin:0 8px; }
|
|
5231
|
-
.iui-paginator-pages-group > *{
|
|
5232
|
-
display:flex; }
|
|
5233
|
-
.iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
|
|
5234
|
-
position:relative;
|
|
5235
|
-
transition-duration:0ms; }
|
|
5236
|
-
.iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
|
|
5237
|
-
z-index:1; }
|
|
5238
|
-
.iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
|
|
5239
|
-
z-index:2; }
|
|
5240
|
-
.iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
|
|
5241
|
-
z-index:revert; }
|
|
5242
|
-
.iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
|
|
5243
|
-
z-index:-1; }
|
|
5244
|
-
.iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
|
|
5245
|
-
transition-duration:0.2s; }
|
|
5246
|
-
.iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
|
|
5247
|
-
content:'';
|
|
5248
|
-
position:absolute;
|
|
5249
|
-
height:2px;
|
|
5250
|
-
opacity:1;
|
|
5251
|
-
top:2px;
|
|
5252
|
-
left:2px;
|
|
5253
|
-
width:calc(100% - 4px);
|
|
5254
|
-
background-color:#008BE1;
|
|
5255
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
5256
|
-
.iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
|
|
5257
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
5258
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
5259
|
-
.iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
|
|
5260
|
-
border-radius:0; }
|
|
5261
|
-
.iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
|
|
5262
|
-
border-top-left-radius:3px;
|
|
5263
|
-
border-bottom-left-radius:3px; }
|
|
5264
|
-
.iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
|
|
5265
|
-
border-top-right-radius:3px;
|
|
5266
|
-
border-bottom-right-radius:3px; }
|
|
5267
|
-
.iui-paginator-pages-group > * + *{
|
|
5268
|
-
margin-left:-1px; }
|
|
5269
|
-
.iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
|
|
5270
|
-
border-left-color:#DCE0E3;
|
|
5271
|
-
border-left-color:var(--iui-color-background-4); }
|
|
5272
|
-
.iui-paginator-pages-group > * + *{
|
|
5273
|
-
margin-left:0; }
|
|
5274
|
-
.iui-paginator-pages-group button.iui-active::after{
|
|
5275
|
-
top:auto;
|
|
5276
|
-
bottom:2px; }
|
|
5277
5185
|
|
|
5278
5186
|
.iui-paginator-page-button{
|
|
5187
|
+
--_iui-button-active-stripe-inset:initial;
|
|
5279
5188
|
margin:0;
|
|
5280
5189
|
padding:0;
|
|
5281
5190
|
border:none;
|
|
@@ -5307,7 +5216,8 @@ html.iui-theme-dark{
|
|
|
5307
5216
|
padding:0 8px;
|
|
5308
5217
|
height:38px;
|
|
5309
5218
|
gap:8px;
|
|
5310
|
-
width:38px;
|
|
5219
|
+
width:38px;
|
|
5220
|
+
--_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px; }
|
|
5311
5221
|
@media (prefers-reduced-motion: no-preference){
|
|
5312
5222
|
.iui-paginator-page-button{
|
|
5313
5223
|
transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
|
|
@@ -5330,6 +5240,13 @@ html.iui-theme-dark{
|
|
|
5330
5240
|
background:var(--iui-color-background-disabled);
|
|
5331
5241
|
border-color:var(--iui-color-background-disabled);
|
|
5332
5242
|
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
5243
|
+
.iui-paginator-page-button.iui-active::after{
|
|
5244
|
+
content:'';
|
|
5245
|
+
position:absolute;
|
|
5246
|
+
inset:var(--_iui-button-active-stripe-inset);
|
|
5247
|
+
background-color:var(--iui-color-foreground-primary); }
|
|
5248
|
+
.iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
|
|
5249
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
5333
5250
|
.iui-paginator-page-button > .iui-button-icon:only-child{
|
|
5334
5251
|
margin-left:3px;
|
|
5335
5252
|
margin-right:3px; }
|
|
@@ -5865,10 +5782,26 @@ a.iui-tag{
|
|
|
5865
5782
|
color:rgba(0, 0, 0, 0.8);
|
|
5866
5783
|
background-color:var(--iui-color-background-1);
|
|
5867
5784
|
color:var(--iui-text-color); }
|
|
5785
|
+
.iui-tile:focus-visible{
|
|
5786
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
5787
|
+
outline-offset:2px; }
|
|
5788
|
+
@supports not selector(*:focus-visible){
|
|
5789
|
+
.iui-tile:focus{
|
|
5790
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
5791
|
+
outline-offset:2px; } }
|
|
5792
|
+
.iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
|
|
5793
|
+
-webkit-clip-path:revert;
|
|
5794
|
+
clip-path:revert;
|
|
5795
|
+
overflow:visible;
|
|
5796
|
+
position:static;
|
|
5797
|
+
white-space:normal;
|
|
5798
|
+
height:auto;
|
|
5799
|
+
width:auto;
|
|
5800
|
+
padding:0;
|
|
5801
|
+
margin:0;
|
|
5802
|
+
position:absolute; }
|
|
5868
5803
|
.iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
|
|
5869
5804
|
width:calc(100% - 32px); }
|
|
5870
|
-
.iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
|
|
5871
|
-
visibility:visible; }
|
|
5872
5805
|
.iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
|
|
5873
5806
|
transform:translateZ(0) scale(1.1); }
|
|
5874
5807
|
.iui-tile.iui-new .iui-tile-name,
|
|
@@ -5879,6 +5812,13 @@ a.iui-tag{
|
|
|
5879
5812
|
background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
|
|
5880
5813
|
outline:solid 2px var(--iui-color-foreground-primary);
|
|
5881
5814
|
background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
|
|
5815
|
+
.iui-tile.iui-selected:focus-visible{
|
|
5816
|
+
outline:4px solid var(--iui-color-foreground-primary);
|
|
5817
|
+
outline-offset:0; }
|
|
5818
|
+
@supports not selector(*:focus-visible){
|
|
5819
|
+
.iui-tile.iui-selected:focus{
|
|
5820
|
+
outline:4px solid var(--iui-color-foreground-primary);
|
|
5821
|
+
outline-offset:0; } }
|
|
5882
5822
|
.iui-tile.iui-selected .iui-tile-thumbnail-picture{
|
|
5883
5823
|
transform:translateZ(0) scale(1.1); }
|
|
5884
5824
|
.iui-tile.iui-folder{
|
|
@@ -6090,11 +6030,9 @@ a.iui-tag{
|
|
|
6090
6030
|
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
|
|
6091
6031
|
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
|
|
6092
6032
|
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
|
|
6093
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
6094
|
-
-webkit-backdrop-filter:blur(5px);
|
|
6095
|
-
backdrop-filter:blur(5px);
|
|
6096
6033
|
background-color:rgba(0, 0, 0, var(--iui-opacity-5));
|
|
6097
|
-
backdrop-filter:blur(5px);
|
|
6034
|
+
-webkit-backdrop-filter:blur(5px);
|
|
6035
|
+
backdrop-filter:blur(5px); } }
|
|
6098
6036
|
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
|
|
6099
6037
|
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
|
|
6100
6038
|
fill:#FFF;
|
|
@@ -6215,16 +6153,22 @@ a.iui-tag{
|
|
|
6215
6153
|
white-space:nowrap;
|
|
6216
6154
|
overflow:hidden;
|
|
6217
6155
|
text-overflow:ellipsis; }
|
|
6218
|
-
|
|
6219
|
-
|
|
6220
|
-
|
|
6221
|
-
|
|
6156
|
+
|
|
6157
|
+
.iui-tile-more-options{
|
|
6158
|
+
position:absolute;
|
|
6159
|
+
bottom:5.5px;
|
|
6160
|
+
right:8px; }
|
|
6161
|
+
.iui-tile-more-options:not(.iui-visible){
|
|
6162
|
+
-webkit-clip-path:inset(50%);
|
|
6163
|
+
clip-path:inset(50%);
|
|
6164
|
+
overflow:hidden;
|
|
6222
6165
|
position:absolute;
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
|
|
6226
|
-
|
|
6227
|
-
|
|
6166
|
+
white-space:nowrap;
|
|
6167
|
+
height:1px;
|
|
6168
|
+
width:1px;
|
|
6169
|
+
padding:0;
|
|
6170
|
+
margin:-1px;
|
|
6171
|
+
border-width:0; }
|
|
6228
6172
|
|
|
6229
6173
|
.iui-time-picker{
|
|
6230
6174
|
margin:0;
|
|
@@ -6730,6 +6674,25 @@ a.iui-tag{
|
|
|
6730
6674
|
vertical-align:baseline;
|
|
6731
6675
|
list-style:none; }
|
|
6732
6676
|
|
|
6677
|
+
.iui-tree-item:focus-visible{
|
|
6678
|
+
outline:none; }
|
|
6679
|
+
.iui-tree-item:focus-visible > .iui-tree-node{
|
|
6680
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
6681
|
+
outline-offset:-1px; }
|
|
6682
|
+
.iui-tree-item:focus-visible > .iui-tree-node.iui-active{
|
|
6683
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
6684
|
+
outline-offset:-2px; }
|
|
6685
|
+
|
|
6686
|
+
@supports not selector(*:focus-visible){
|
|
6687
|
+
.iui-tree-item:focus{
|
|
6688
|
+
outline:none; }
|
|
6689
|
+
.iui-tree-item:focus > .iui-tree-node{
|
|
6690
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
6691
|
+
outline-offset:-1px; }
|
|
6692
|
+
.iui-tree-item:focus > .iui-tree-node.iui-active{
|
|
6693
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
6694
|
+
outline-offset:-2px; } }
|
|
6695
|
+
|
|
6733
6696
|
.iui-tree-node{
|
|
6734
6697
|
display:flex;
|
|
6735
6698
|
cursor:pointer;
|
|
@@ -6786,13 +6749,6 @@ a.iui-tag{
|
|
|
6786
6749
|
font-size:12px;
|
|
6787
6750
|
color:rgba(0, 0, 0, 0.4);
|
|
6788
6751
|
color:var(--iui-text-color-muted); }
|
|
6789
|
-
.iui-tree-node:focus-visible{
|
|
6790
|
-
outline:1px solid var(--iui-color-foreground-primary);
|
|
6791
|
-
outline-offset:-1px; }
|
|
6792
|
-
@supports not selector(*:focus-visible){
|
|
6793
|
-
.iui-tree-node:focus{
|
|
6794
|
-
outline:1px solid var(--iui-color-foreground-primary);
|
|
6795
|
-
outline-offset:-1px; } }
|
|
6796
6752
|
.iui-tree-node:hover{
|
|
6797
6753
|
background-color:rgba(0, 139, 225, 0.1);
|
|
6798
6754
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
@@ -6807,13 +6763,6 @@ a.iui-tag{
|
|
|
6807
6763
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
6808
6764
|
outline:thin solid var(--iui-color-foreground-primary);
|
|
6809
6765
|
outline-offset:-1px; }
|
|
6810
|
-
.iui-tree-node.iui-active:focus-visible{
|
|
6811
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
6812
|
-
outline-offset:-2px; }
|
|
6813
|
-
@supports not selector(*:focus-visible){
|
|
6814
|
-
.iui-tree-node.iui-active:focus{
|
|
6815
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
6816
|
-
outline-offset:-2px; } }
|
|
6817
6766
|
.iui-tree-node.iui-disabled{
|
|
6818
6767
|
cursor:not-allowed;
|
|
6819
6768
|
outline:none;
|
|
@@ -7164,3 +7113,51 @@ a.iui-tag{
|
|
|
7164
7113
|
user-select:all;
|
|
7165
7114
|
color:#53A21A;
|
|
7166
7115
|
color:var(--iui-color-foreground-positive); }
|
|
7116
|
+
|
|
7117
|
+
.iui-skip-to-content-link{
|
|
7118
|
+
background-color:rgba(0, 0, 0, 0.8);
|
|
7119
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-2));
|
|
7120
|
+
color:#FFF;
|
|
7121
|
+
color:var(--iui-color-foreground-accessory);
|
|
7122
|
+
border-radius:9999px;
|
|
7123
|
+
text-decoration:none;
|
|
7124
|
+
-webkit-user-select:none;
|
|
7125
|
+
-moz-user-select:none;
|
|
7126
|
+
-ms-user-select:none;
|
|
7127
|
+
user-select:none;
|
|
7128
|
+
padding:8.25px 16px;
|
|
7129
|
+
position:fixed;
|
|
7130
|
+
text-align:center;
|
|
7131
|
+
left:50%;
|
|
7132
|
+
top:22px;
|
|
7133
|
+
transform:translateX(-50%) translateY(-170%);
|
|
7134
|
+
transition:background-color 0.2s ease-in-out; }
|
|
7135
|
+
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
|
|
7136
|
+
.iui-skip-to-content-link{
|
|
7137
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-3));
|
|
7138
|
+
-webkit-backdrop-filter:blur(5px);
|
|
7139
|
+
backdrop-filter:blur(5px); } }
|
|
7140
|
+
.iui-skip-to-content-link:focus-visible{
|
|
7141
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
7142
|
+
outline-offset:2px; }
|
|
7143
|
+
@supports not selector(*:focus-visible){
|
|
7144
|
+
.iui-skip-to-content-link:focus{
|
|
7145
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
7146
|
+
outline-offset:2px; } }
|
|
7147
|
+
@media (prefers-reduced-motion: no-preference){
|
|
7148
|
+
.iui-skip-to-content-link{
|
|
7149
|
+
transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } }
|
|
7150
|
+
.iui-skip-to-content-link:hover{
|
|
7151
|
+
background-color:black;
|
|
7152
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-1)); }
|
|
7153
|
+
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
|
|
7154
|
+
.iui-skip-to-content-link:hover{
|
|
7155
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-2));
|
|
7156
|
+
-webkit-backdrop-filter:blur(5px);
|
|
7157
|
+
backdrop-filter:blur(5px); } }
|
|
7158
|
+
.iui-skip-to-content-link:focus{
|
|
7159
|
+
transform:translateX(-50%) translateY(0);
|
|
7160
|
+
box-shadow:0 6px 30px rgba(0, 0, 0, 0.25); }
|
|
7161
|
+
@media (prefers-reduced-motion: no-preference){
|
|
7162
|
+
.iui-skip-to-content-link:focus{
|
|
7163
|
+
transition:transform 0.2s ease-in-out; } }
|
package/css/badge.css
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
.iui-badge{
|
|
6
|
+
--iui-badge-background-color:#C7CCD1;
|
|
7
|
+
--_iui-badge-text-color:rgba(0, 0, 0, 0.6);
|
|
6
8
|
margin:0;
|
|
7
9
|
padding:0;
|
|
8
10
|
border:none;
|
|
@@ -12,8 +14,8 @@
|
|
|
12
14
|
padding:0 6px;
|
|
13
15
|
margin:6px 0;
|
|
14
16
|
border-radius:3px;
|
|
15
|
-
background-color:var(--badge-color
|
|
16
|
-
color:var(--badge-text-color
|
|
17
|
+
background-color:var(--iui-badge-background-color);
|
|
18
|
+
color:var(--_iui-badge-text-color);
|
|
17
19
|
text-transform:uppercase;
|
|
18
20
|
-webkit-user-select:none;
|
|
19
21
|
-moz-user-select:none;
|