@itwin/itwinui-css 0.44.2 → 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 +870 -744
- package/css/badge.css +4 -2
- package/css/button.css +31 -96
- package/css/carousel.css +97 -0
- package/css/color-picker.css +11 -8
- package/css/expandable-block.css +12 -0
- package/css/inputs.css +216 -224
- package/css/popover.css +12 -0
- package/css/side-navigation.css +2 -4
- package/css/skip-to-content.css +51 -0
- package/css/table.css +11 -50
- package/css/tile.css +368 -301
- 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 -1
- package/scss/button/classes.scss +0 -1
- package/scss/button/default.scss +1 -0
- package/scss/carousel/carousel.scss +119 -0
- package/scss/carousel/classes.scss +15 -0
- package/scss/carousel/index.scss +3 -0
- package/scss/classes.scss +3 -0
- package/scss/color-picker/color-picker.scss +13 -6
- package/scss/expandable-block/block.scss +23 -0
- package/scss/index.scss +3 -0
- package/scss/inputs/classes.scss +15 -9
- package/scss/inputs/index.scss +1 -0
- package/scss/inputs/input-with-icon.scss +36 -0
- package/scss/inputs/input.scss +1 -0
- package/scss/inputs/labeled-inputs.scss +47 -12
- package/scss/inputs/select.scss +44 -93
- package/scss/popover/classes.scss +7 -0
- package/scss/popover/index.scss +3 -0
- package/scss/popover/popover.scss +23 -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/table/table.scss +1 -1
- package/scss/tile/classes.scss +32 -0
- package/scss/tile/tile.scss +231 -235
- 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;
|
|
@@ -656,7 +659,6 @@ html.iui-theme-dark{
|
|
|
656
659
|
box-sizing:border-box;
|
|
657
660
|
border-radius:3px;
|
|
658
661
|
line-height:22px;
|
|
659
|
-
outline:none;
|
|
660
662
|
box-shadow:none;
|
|
661
663
|
font-size:14px;
|
|
662
664
|
font-weight:400;
|
|
@@ -698,6 +700,13 @@ html.iui-theme-dark{
|
|
|
698
700
|
background:var(--iui-color-background-disabled);
|
|
699
701
|
border-color:var(--iui-color-background-disabled);
|
|
700
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)); }
|
|
701
710
|
.iui-button.iui-default{
|
|
702
711
|
background-color:#FFF;
|
|
703
712
|
border-color:rgba(0, 0, 0, 0.4);
|
|
@@ -904,133 +913,61 @@ html.iui-theme-dark{
|
|
|
904
913
|
isolation:isolate; }
|
|
905
914
|
.iui-button-group > *{
|
|
906
915
|
display:flex; }
|
|
907
|
-
.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)){
|
|
908
917
|
position:relative;
|
|
909
|
-
|
|
910
|
-
.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{
|
|
911
920
|
z-index:1; }
|
|
912
|
-
.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{
|
|
913
922
|
z-index:2; }
|
|
914
|
-
|
|
915
|
-
z-index:revert; }
|
|
916
|
-
.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"]{
|
|
917
924
|
z-index:-1; }
|
|
918
|
-
|
|
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{
|
|
919
929
|
transition-duration:0.2s; }
|
|
920
|
-
|
|
921
|
-
content:'';
|
|
922
|
-
position:absolute;
|
|
923
|
-
height:2px;
|
|
924
|
-
opacity:1;
|
|
925
|
-
top:2px;
|
|
926
|
-
left:2px;
|
|
927
|
-
width:calc(100% - 4px);
|
|
928
|
-
background-color:#008BE1;
|
|
929
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
930
|
-
.iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
|
|
931
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
932
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
933
|
-
.iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
|
|
934
|
-
border-radius:0; }
|
|
935
|
-
.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)){
|
|
936
931
|
border-top-left-radius:3px;
|
|
937
932
|
border-bottom-left-radius:3px; }
|
|
938
|
-
.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)){
|
|
939
934
|
border-top-right-radius:3px;
|
|
940
935
|
border-bottom-right-radius:3px; }
|
|
941
936
|
.iui-button-group > * + *{
|
|
942
937
|
margin-left:-1px; }
|
|
943
|
-
.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"]{
|
|
944
939
|
border-left-color:#DCE0E3;
|
|
945
940
|
border-left-color:var(--iui-color-background-4); }
|
|
946
941
|
|
|
947
942
|
.iui-button-split-menu{
|
|
948
|
-
display:inline-flex;
|
|
949
|
-
align-items:center;
|
|
950
|
-
isolation:isolate;
|
|
951
943
|
display:inline-flex;
|
|
952
944
|
align-items:center;
|
|
953
945
|
isolation:isolate; }
|
|
954
946
|
.iui-button-split-menu > *{
|
|
955
947
|
display:flex; }
|
|
956
|
-
.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)){
|
|
957
949
|
position:relative;
|
|
958
|
-
|
|
959
|
-
.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{
|
|
960
952
|
z-index:1; }
|
|
961
|
-
.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{
|
|
962
954
|
z-index:2; }
|
|
963
|
-
|
|
964
|
-
z-index:revert; }
|
|
965
|
-
.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"]{
|
|
966
956
|
z-index:-1; }
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
.iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
|
|
970
|
-
content:'';
|
|
971
|
-
position:absolute;
|
|
972
|
-
height:2px;
|
|
973
|
-
opacity:1;
|
|
974
|
-
top:2px;
|
|
975
|
-
left:2px;
|
|
976
|
-
width:calc(100% - 4px);
|
|
977
|
-
background-color:#008BE1;
|
|
978
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
979
|
-
.iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
|
|
980
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
981
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
982
|
-
.iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
|
|
983
|
-
border-radius:0; }
|
|
984
|
-
.iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
|
|
985
|
-
border-top-left-radius:3px;
|
|
986
|
-
border-bottom-left-radius:3px; }
|
|
987
|
-
.iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
|
|
988
|
-
border-top-right-radius:3px;
|
|
989
|
-
border-bottom-right-radius:3px; }
|
|
990
|
-
.iui-button-split-menu > * + *{
|
|
991
|
-
margin-left:-1px; }
|
|
992
|
-
.iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
|
|
993
|
-
border-left-color:#DCE0E3;
|
|
994
|
-
border-left-color:var(--iui-color-background-4); }
|
|
995
|
-
.iui-button-split-menu > *{
|
|
996
|
-
display:flex; }
|
|
997
|
-
.iui-button-split-menu > * input, .iui-button-split-menu > * button{
|
|
998
|
-
position:relative;
|
|
957
|
+
.iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
|
|
958
|
+
border-radius:0;
|
|
999
959
|
transition-duration:0ms; }
|
|
1000
|
-
.iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
|
|
1001
|
-
z-index:1; }
|
|
1002
|
-
.iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
|
|
1003
|
-
z-index:2; }
|
|
1004
|
-
.iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
|
|
1005
|
-
z-index:revert; }
|
|
1006
|
-
.iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
|
|
1007
|
-
z-index:-1; }
|
|
1008
|
-
.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{
|
|
1009
961
|
transition-duration:0.2s; }
|
|
1010
|
-
|
|
1011
|
-
content:'';
|
|
1012
|
-
position:absolute;
|
|
1013
|
-
height:2px;
|
|
1014
|
-
opacity:1;
|
|
1015
|
-
top:2px;
|
|
1016
|
-
left:2px;
|
|
1017
|
-
width:calc(100% - 4px);
|
|
1018
|
-
background-color:#008BE1;
|
|
1019
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
1020
|
-
.iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
|
|
1021
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
1022
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
1023
|
-
.iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
|
|
1024
|
-
border-radius:0; }
|
|
1025
|
-
.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)){
|
|
1026
963
|
border-top-left-radius:3px;
|
|
1027
964
|
border-bottom-left-radius:3px; }
|
|
1028
|
-
.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)){
|
|
1029
966
|
border-top-right-radius:3px;
|
|
1030
967
|
border-bottom-right-radius:3px; }
|
|
1031
968
|
.iui-button-split-menu > * + *{
|
|
1032
969
|
margin-left:-1px; }
|
|
1033
|
-
.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"]{
|
|
1034
971
|
border-left-color:#DCE0E3;
|
|
1035
972
|
border-left-color:var(--iui-color-background-4); }
|
|
1036
973
|
.iui-button-split-menu:hover{
|
|
@@ -1070,6 +1007,100 @@ html.iui-theme-dark{
|
|
|
1070
1007
|
transition:fill 0.2s ease-out;
|
|
1071
1008
|
fill:currentColor; }
|
|
1072
1009
|
|
|
1010
|
+
.iui-carousel{
|
|
1011
|
+
overflow:hidden;
|
|
1012
|
+
border-radius:3px; }
|
|
1013
|
+
.iui-carousel:focus-visible{
|
|
1014
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1015
|
+
outline-offset:4px; }
|
|
1016
|
+
@supports not selector(*:focus-visible){
|
|
1017
|
+
.iui-carousel:focus{
|
|
1018
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1019
|
+
outline-offset:4px; } }
|
|
1020
|
+
|
|
1021
|
+
.iui-carousel-slider{
|
|
1022
|
+
display:flex;
|
|
1023
|
+
list-style:none;
|
|
1024
|
+
margin:0;
|
|
1025
|
+
padding:0; }
|
|
1026
|
+
@media (prefers-reduced-motion: no-preference){
|
|
1027
|
+
.iui-carousel-slider{
|
|
1028
|
+
transition:transform 0.8s ease-in-out; } }
|
|
1029
|
+
.iui-carousel-slider-item{
|
|
1030
|
+
width:100%;
|
|
1031
|
+
flex-shrink:0;
|
|
1032
|
+
box-sizing:border-box; }
|
|
1033
|
+
|
|
1034
|
+
.iui-carousel-navigation{
|
|
1035
|
+
display:flex;
|
|
1036
|
+
align-items:center;
|
|
1037
|
+
height:33px;
|
|
1038
|
+
box-sizing:border-box;
|
|
1039
|
+
border-top:2px solid #DCE0E3;
|
|
1040
|
+
border-top:2px solid var(--iui-color-background-4); }
|
|
1041
|
+
.iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
|
|
1042
|
+
display:flex;
|
|
1043
|
+
align-items:center;
|
|
1044
|
+
flex:1; }
|
|
1045
|
+
.iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
|
|
1046
|
+
outline-offset:-1px;
|
|
1047
|
+
outline:1px solid #008BE1;
|
|
1048
|
+
outline:1px solid var(--iui-color-foreground-primary); }
|
|
1049
|
+
.iui-carousel-navigation-dots{
|
|
1050
|
+
margin:0;
|
|
1051
|
+
padding:0;
|
|
1052
|
+
border:none;
|
|
1053
|
+
vertical-align:baseline;
|
|
1054
|
+
border-radius:3px;
|
|
1055
|
+
white-space:nowrap;
|
|
1056
|
+
overflow:hidden;
|
|
1057
|
+
justify-content:center;
|
|
1058
|
+
list-style:none; }
|
|
1059
|
+
.iui-carousel-navigation-dots:focus-visible{
|
|
1060
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1061
|
+
outline-offset:-1px; }
|
|
1062
|
+
@supports not selector(*:focus-visible){
|
|
1063
|
+
.iui-carousel-navigation-dots:focus{
|
|
1064
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1065
|
+
outline-offset:-1px; } }
|
|
1066
|
+
.iui-carousel-navigation-dot{
|
|
1067
|
+
padding:0 8px;
|
|
1068
|
+
height:27px;
|
|
1069
|
+
gap:4px;
|
|
1070
|
+
background-color:transparent;
|
|
1071
|
+
border:none;
|
|
1072
|
+
cursor:pointer; }
|
|
1073
|
+
.iui-carousel-navigation-dot:hover::after{
|
|
1074
|
+
background-color:rgba(0, 0, 0, 0.6);
|
|
1075
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
|
|
1076
|
+
.iui-carousel-navigation-dot.iui-invisible{
|
|
1077
|
+
display:none; }
|
|
1078
|
+
.iui-carousel-navigation-dot::after{
|
|
1079
|
+
content:'';
|
|
1080
|
+
display:block;
|
|
1081
|
+
width:12px;
|
|
1082
|
+
height:12px;
|
|
1083
|
+
border-radius:50%;
|
|
1084
|
+
transition:background-color 0.2s ease;
|
|
1085
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
1086
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
1087
|
+
@media (prefers-reduced-motion: no-preference){
|
|
1088
|
+
.iui-carousel-navigation-dot::after{
|
|
1089
|
+
transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
|
|
1090
|
+
.iui-carousel-navigation-dot.iui-first::after{
|
|
1091
|
+
transform:scale(0.5); }
|
|
1092
|
+
.iui-carousel-navigation-dot.iui-second::after{
|
|
1093
|
+
transform:scale(0.75); }
|
|
1094
|
+
.iui-carousel-navigation-dot.iui-invisible::after{
|
|
1095
|
+
transform:scale(0);
|
|
1096
|
+
background-color:rgba(0, 0, 0, 0);
|
|
1097
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
|
|
1098
|
+
.iui-carousel-navigation-dot.iui-active::after{
|
|
1099
|
+
background-color:#008BE1;
|
|
1100
|
+
background-color:var(--iui-color-foreground-primary); }
|
|
1101
|
+
.iui-carousel-navigation-right{
|
|
1102
|
+
justify-content:flex-end; }
|
|
1103
|
+
|
|
1073
1104
|
.iui-code{
|
|
1074
1105
|
margin:0;
|
|
1075
1106
|
padding:0;
|
|
@@ -1150,6 +1181,7 @@ html.iui-theme-dark{
|
|
|
1150
1181
|
color:var(--iui-text-color-muted); }
|
|
1151
1182
|
|
|
1152
1183
|
.iui-color-picker{
|
|
1184
|
+
--iui-color-picker-selected-color:initial;
|
|
1153
1185
|
margin:0;
|
|
1154
1186
|
padding:0;
|
|
1155
1187
|
border:none;
|
|
@@ -1230,11 +1262,12 @@ html.iui-theme-dark{
|
|
|
1230
1262
|
appearance:none; }
|
|
1231
1263
|
|
|
1232
1264
|
.iui-color-swatch{
|
|
1265
|
+
--iui-color-swatch-background:initial;
|
|
1233
1266
|
height:24px;
|
|
1234
1267
|
width:24px;
|
|
1235
1268
|
cursor:pointer;
|
|
1236
1269
|
border-radius:5px;
|
|
1237
|
-
background-color:var(--swatch-
|
|
1270
|
+
background-color:var(--iui-color-swatch-background);
|
|
1238
1271
|
margin-bottom:4px;
|
|
1239
1272
|
margin-right:4px;
|
|
1240
1273
|
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
@@ -1273,12 +1306,13 @@ html.iui-theme-dark{
|
|
|
1273
1306
|
min-width:280px; }
|
|
1274
1307
|
|
|
1275
1308
|
.iui-color-field{
|
|
1309
|
+
--iui-color-field-hue:initial;
|
|
1276
1310
|
position:relative;
|
|
1277
1311
|
cursor:crosshair;
|
|
1278
1312
|
width:100%;
|
|
1279
1313
|
height:209px;
|
|
1280
|
-
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
|
|
1281
|
-
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)); }
|
|
1282
1316
|
.iui-color-field:not(:last-child){
|
|
1283
1317
|
margin-bottom:6px; }
|
|
1284
1318
|
|
|
@@ -1303,24 +1337,24 @@ html.iui-theme-dark{
|
|
|
1303
1337
|
content:'';
|
|
1304
1338
|
width:100%;
|
|
1305
1339
|
height:100%;
|
|
1306
|
-
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%); }
|
|
1307
1341
|
|
|
1308
1342
|
.iui-opacity-slider .iui-slider-thumb{
|
|
1309
1343
|
top:7px; }
|
|
1310
1344
|
|
|
1311
1345
|
.iui-color-dot{
|
|
1346
|
+
--iui-color-dot-inset:initial;
|
|
1312
1347
|
position:absolute;
|
|
1313
|
-
|
|
1314
|
-
left:var(--left, 0%);
|
|
1348
|
+
inset:var(--iui-color-dot-inset);
|
|
1315
1349
|
width:16px;
|
|
1316
1350
|
height:16px;
|
|
1317
1351
|
border-radius:50%;
|
|
1318
1352
|
transform:translate(-8px, -8px);
|
|
1319
1353
|
cursor:crosshair;
|
|
1320
1354
|
box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
1321
|
-
background-color:var(--selected-color);
|
|
1355
|
+
background-color:var(--iui-color-picker-selected-color);
|
|
1322
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));
|
|
1323
|
-
background-color:var(--selected-color); }
|
|
1357
|
+
background-color:var(--iui-color-picker-selected-color); }
|
|
1324
1358
|
.iui-color-dot:hover{
|
|
1325
1359
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
1326
1360
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
@@ -1605,6 +1639,18 @@ html.iui-theme-dark{
|
|
|
1605
1639
|
margin-left:8px; }
|
|
1606
1640
|
.iui-expandable-block.iui-small .iui-header > .iui-status-icon{
|
|
1607
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; }
|
|
1608
1654
|
|
|
1609
1655
|
.iui-fieldset{
|
|
1610
1656
|
margin:0;
|
|
@@ -2472,9 +2518,9 @@ html.iui-theme-dark{
|
|
|
2472
2518
|
.iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
|
|
2473
2519
|
margin-top:3px; }
|
|
2474
2520
|
.iui-input-container .iui-input,
|
|
2521
|
+
.iui-input-container .iui-input-with-icon,
|
|
2475
2522
|
.iui-input-container .iui-textarea,
|
|
2476
|
-
.iui-input-container .iui-input-group
|
|
2477
|
-
.iui-input-container .iui-select{
|
|
2523
|
+
.iui-input-container .iui-input-group{
|
|
2478
2524
|
-ms-grid-row:2;
|
|
2479
2525
|
-ms-grid-column:1;
|
|
2480
2526
|
-ms-grid-column-span:2;
|
|
@@ -2498,9 +2544,9 @@ html.iui-theme-dark{
|
|
|
2498
2544
|
div.iui-input-container.iui-inline-label{
|
|
2499
2545
|
-ms-grid-columns:auto min-content auto; }
|
|
2500
2546
|
.iui-input-container.iui-inline-label .iui-input,
|
|
2547
|
+
.iui-input-container.iui-inline-label .iui-input-with-icon,
|
|
2501
2548
|
.iui-input-container.iui-inline-label .iui-textarea,
|
|
2502
|
-
.iui-input-container.iui-inline-label .iui-input-group
|
|
2503
|
-
.iui-input-container.iui-inline-label .iui-select{
|
|
2549
|
+
.iui-input-container.iui-inline-label .iui-input-group{
|
|
2504
2550
|
-ms-grid-row:1;
|
|
2505
2551
|
-ms-grid-column:2; }
|
|
2506
2552
|
.iui-input-container.iui-inline-label .iui-input-icon{
|
|
@@ -2544,7 +2590,7 @@ html.iui-theme-dark{
|
|
|
2544
2590
|
margin-left:4px;
|
|
2545
2591
|
color:#D30A0A;
|
|
2546
2592
|
color:var(--iui-color-foreground-negative); }
|
|
2547
|
-
.iui-input-container
|
|
2593
|
+
.iui-input-container .iui-input-icon{
|
|
2548
2594
|
-ms-grid-row:3;
|
|
2549
2595
|
-ms-grid-column:1;
|
|
2550
2596
|
display:flex;
|
|
@@ -2555,7 +2601,7 @@ html.iui-theme-dark{
|
|
|
2555
2601
|
align-self:center;
|
|
2556
2602
|
fill:rgba(0, 0, 0, 0.4);
|
|
2557
2603
|
fill:var(--iui-icons-color); }
|
|
2558
|
-
.iui-input-container
|
|
2604
|
+
.iui-input-container .iui-input-icon:not(:last-child){
|
|
2559
2605
|
margin-right:4px; }
|
|
2560
2606
|
.iui-input-container .iui-message{
|
|
2561
2607
|
-ms-grid-row:3;
|
|
@@ -2570,19 +2616,17 @@ html.iui-theme-dark{
|
|
|
2570
2616
|
-moz-user-select:none;
|
|
2571
2617
|
-ms-user-select:none;
|
|
2572
2618
|
user-select:none; }
|
|
2573
|
-
.iui-input-container.iui-inline-label > .iui-label{
|
|
2574
|
-
margin:0 16px 0 0;
|
|
2575
|
-
-ms-grid-column-span:1; }
|
|
2576
|
-
.iui-input-container.iui-inline-label > .iui-label.iui-required{
|
|
2577
|
-
margin-right:6px; }
|
|
2578
2619
|
.iui-input-container.iui-inline-icon > .iui-input-icon{
|
|
2579
2620
|
-ms-grid-row:1;
|
|
2580
2621
|
-ms-grid-column:3;
|
|
2581
2622
|
grid-area:inputs;
|
|
2582
2623
|
-ms-grid-column-align:end;
|
|
2583
2624
|
justify-self:end;
|
|
2584
|
-
margin:0
|
|
2625
|
+
margin:0 14px 0 0;
|
|
2585
2626
|
position:relative; }
|
|
2627
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon svg{
|
|
2628
|
+
width:16px;
|
|
2629
|
+
height:16px; }
|
|
2586
2630
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
|
|
2587
2631
|
height:100%;
|
|
2588
2632
|
width:-webkit-fit-content;
|
|
@@ -2590,11 +2634,13 @@ html.iui-theme-dark{
|
|
|
2590
2634
|
width:fit-content;
|
|
2591
2635
|
margin-right:0;
|
|
2592
2636
|
border-top-left-radius:0;
|
|
2593
|
-
border-bottom-left-radius:0;
|
|
2637
|
+
border-bottom-left-radius:0;
|
|
2638
|
+
border-top-right-radius:inherit;
|
|
2639
|
+
border-bottom-right-radius:inherit; }
|
|
2594
2640
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
|
|
2595
2641
|
align-items:center;
|
|
2596
2642
|
height:90%;
|
|
2597
|
-
margin-right:
|
|
2643
|
+
margin-right:2px;
|
|
2598
2644
|
padding:0 12px;
|
|
2599
2645
|
cursor:pointer;
|
|
2600
2646
|
background-position:center;
|
|
@@ -2606,13 +2652,21 @@ html.iui-theme-dark{
|
|
|
2606
2652
|
background-size:100%;
|
|
2607
2653
|
transition:background 0s; }
|
|
2608
2654
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
|
|
2609
|
-
width:16px;
|
|
2610
|
-
height:16px;
|
|
2611
2655
|
fill:rgba(0, 0, 0, 0.4);
|
|
2612
2656
|
fill:var(--iui-icons-color);
|
|
2613
2657
|
transition:transform 0.2s ease-out; }
|
|
2614
2658
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
|
|
2615
2659
|
transform:rotate(180deg); }
|
|
2660
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
|
|
2661
|
+
cursor:not-allowed; }
|
|
2662
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
|
|
2663
|
+
fill:rgba(0, 0, 0, 0.2);
|
|
2664
|
+
fill:var(--iui-icons-color-actionable-disabled); }
|
|
2665
|
+
.iui-input-container.iui-inline-label > .iui-label{
|
|
2666
|
+
margin:0 16px 0 0;
|
|
2667
|
+
-ms-grid-column-span:1; }
|
|
2668
|
+
.iui-input-container.iui-inline-label > .iui-label.iui-required{
|
|
2669
|
+
margin-right:6px; }
|
|
2616
2670
|
.iui-input-container.iui-positive *::-moz-selection{
|
|
2617
2671
|
background-color:rgba(83, 162, 26, 0.4);
|
|
2618
2672
|
background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
|
|
@@ -2633,29 +2687,39 @@ html.iui-theme-dark{
|
|
|
2633
2687
|
text-decoration:none;
|
|
2634
2688
|
color:#3c7613;
|
|
2635
2689
|
color:var(--iui-color-foreground-positive-overlay); }
|
|
2636
|
-
.iui-input-container.iui-positive
|
|
2637
|
-
.iui-input-container.iui-positive
|
|
2638
|
-
.iui-input-container.iui-positive > .iui-select > .iui-select-button{
|
|
2690
|
+
.iui-input-container.iui-positive .iui-input,
|
|
2691
|
+
.iui-input-container.iui-positive .iui-textarea{
|
|
2639
2692
|
padding-bottom:6px;
|
|
2640
2693
|
border-bottom:2px solid #53A21A;
|
|
2641
2694
|
border-bottom:2px solid var(--iui-color-foreground-positive); }
|
|
2642
|
-
.iui-input-container.iui-positive
|
|
2643
|
-
.iui-input-container.iui-positive
|
|
2644
|
-
.iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
|
|
2695
|
+
.iui-input-container.iui-positive .iui-input.iui-small,
|
|
2696
|
+
.iui-input-container.iui-positive .iui-textarea.iui-small{
|
|
2645
2697
|
padding-bottom:0.5px; }
|
|
2646
|
-
.iui-input-container.iui-positive
|
|
2647
|
-
.iui-input-container.iui-positive
|
|
2648
|
-
.iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
|
|
2698
|
+
.iui-input-container.iui-positive .iui-input.iui-large,
|
|
2699
|
+
.iui-input-container.iui-positive .iui-textarea.iui-large{
|
|
2649
2700
|
padding-bottom:11.5px; }
|
|
2650
|
-
.iui-input-container.iui-positive
|
|
2651
|
-
.iui-input-container.iui-positive
|
|
2652
|
-
.iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
|
|
2701
|
+
.iui-input-container.iui-positive .iui-input:focus,
|
|
2702
|
+
.iui-input-container.iui-positive .iui-textarea:focus{
|
|
2653
2703
|
border-bottom:2px solid #53A21A;
|
|
2654
2704
|
outline:2px solid #53A21A;
|
|
2655
2705
|
outline-offset:-2px;
|
|
2656
2706
|
border-bottom:2px solid var(--iui-color-foreground-positive);
|
|
2657
2707
|
outline:2px solid var(--iui-color-foreground-positive);
|
|
2658
2708
|
outline-offset:-2px; }
|
|
2709
|
+
.iui-input-container.iui-positive .iui-input-with-icon{
|
|
2710
|
+
--_hover-color:var(--iui-color-foreground-positive);
|
|
2711
|
+
--_focus-color:var(--iui-color-foreground-positive); }
|
|
2712
|
+
.iui-input-container.iui-positive .iui-select-button{
|
|
2713
|
+
border-bottom:transparent; }
|
|
2714
|
+
.iui-input-container.iui-positive .iui-select-button::after{
|
|
2715
|
+
content:'';
|
|
2716
|
+
width:100%;
|
|
2717
|
+
position:absolute;
|
|
2718
|
+
bottom:0;
|
|
2719
|
+
left:0;
|
|
2720
|
+
height:2px;
|
|
2721
|
+
background-color:#53A21A;
|
|
2722
|
+
background-color:var(--iui-color-foreground-positive); }
|
|
2659
2723
|
.iui-input-container.iui-negative *::-moz-selection{
|
|
2660
2724
|
background-color:rgba(211, 10, 10, 0.4);
|
|
2661
2725
|
background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
|
|
@@ -2676,29 +2740,39 @@ html.iui-theme-dark{
|
|
|
2676
2740
|
text-decoration:none;
|
|
2677
2741
|
color:#a20808;
|
|
2678
2742
|
color:var(--iui-color-foreground-negative-overlay); }
|
|
2679
|
-
.iui-input-container.iui-negative
|
|
2680
|
-
.iui-input-container.iui-negative
|
|
2681
|
-
.iui-input-container.iui-negative > .iui-select > .iui-select-button{
|
|
2743
|
+
.iui-input-container.iui-negative .iui-input,
|
|
2744
|
+
.iui-input-container.iui-negative .iui-textarea{
|
|
2682
2745
|
padding-bottom:6px;
|
|
2683
2746
|
border-bottom:2px solid #D30A0A;
|
|
2684
2747
|
border-bottom:2px solid var(--iui-color-foreground-negative); }
|
|
2685
|
-
.iui-input-container.iui-negative
|
|
2686
|
-
.iui-input-container.iui-negative
|
|
2687
|
-
.iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
|
|
2748
|
+
.iui-input-container.iui-negative .iui-input.iui-small,
|
|
2749
|
+
.iui-input-container.iui-negative .iui-textarea.iui-small{
|
|
2688
2750
|
padding-bottom:0.5px; }
|
|
2689
|
-
.iui-input-container.iui-negative
|
|
2690
|
-
.iui-input-container.iui-negative
|
|
2691
|
-
.iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
|
|
2751
|
+
.iui-input-container.iui-negative .iui-input.iui-large,
|
|
2752
|
+
.iui-input-container.iui-negative .iui-textarea.iui-large{
|
|
2692
2753
|
padding-bottom:11.5px; }
|
|
2693
|
-
.iui-input-container.iui-negative
|
|
2694
|
-
.iui-input-container.iui-negative
|
|
2695
|
-
.iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
|
|
2754
|
+
.iui-input-container.iui-negative .iui-input:focus,
|
|
2755
|
+
.iui-input-container.iui-negative .iui-textarea:focus{
|
|
2696
2756
|
border-bottom:2px solid #D30A0A;
|
|
2697
2757
|
outline:2px solid #D30A0A;
|
|
2698
2758
|
outline-offset:-2px;
|
|
2699
2759
|
border-bottom:2px solid var(--iui-color-foreground-negative);
|
|
2700
2760
|
outline:2px solid var(--iui-color-foreground-negative);
|
|
2701
2761
|
outline-offset:-2px; }
|
|
2762
|
+
.iui-input-container.iui-negative .iui-input-with-icon{
|
|
2763
|
+
--_hover-color:var(--iui-color-foreground-negative);
|
|
2764
|
+
--_focus-color:var(--iui-color-foreground-negative); }
|
|
2765
|
+
.iui-input-container.iui-negative .iui-select-button{
|
|
2766
|
+
border-bottom:transparent; }
|
|
2767
|
+
.iui-input-container.iui-negative .iui-select-button::after{
|
|
2768
|
+
content:'';
|
|
2769
|
+
width:100%;
|
|
2770
|
+
position:absolute;
|
|
2771
|
+
bottom:0;
|
|
2772
|
+
left:0;
|
|
2773
|
+
height:2px;
|
|
2774
|
+
background-color:#D30A0A;
|
|
2775
|
+
background-color:var(--iui-color-foreground-negative); }
|
|
2702
2776
|
.iui-input-container.iui-warning *::-moz-selection{
|
|
2703
2777
|
background-color:rgba(241, 139, 18, 0.4);
|
|
2704
2778
|
background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
|
|
@@ -2719,29 +2793,39 @@ html.iui-theme-dark{
|
|
|
2719
2793
|
text-decoration:none;
|
|
2720
2794
|
color:#c4700c;
|
|
2721
2795
|
color:var(--iui-color-foreground-warning-overlay); }
|
|
2722
|
-
.iui-input-container.iui-warning
|
|
2723
|
-
.iui-input-container.iui-warning
|
|
2724
|
-
.iui-input-container.iui-warning > .iui-select > .iui-select-button{
|
|
2796
|
+
.iui-input-container.iui-warning .iui-input,
|
|
2797
|
+
.iui-input-container.iui-warning .iui-textarea{
|
|
2725
2798
|
padding-bottom:6px;
|
|
2726
2799
|
border-bottom:2px solid #F18B12;
|
|
2727
2800
|
border-bottom:2px solid var(--iui-color-foreground-warning); }
|
|
2728
|
-
.iui-input-container.iui-warning
|
|
2729
|
-
.iui-input-container.iui-warning
|
|
2730
|
-
.iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
|
|
2801
|
+
.iui-input-container.iui-warning .iui-input.iui-small,
|
|
2802
|
+
.iui-input-container.iui-warning .iui-textarea.iui-small{
|
|
2731
2803
|
padding-bottom:0.5px; }
|
|
2732
|
-
.iui-input-container.iui-warning
|
|
2733
|
-
.iui-input-container.iui-warning
|
|
2734
|
-
.iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
|
|
2804
|
+
.iui-input-container.iui-warning .iui-input.iui-large,
|
|
2805
|
+
.iui-input-container.iui-warning .iui-textarea.iui-large{
|
|
2735
2806
|
padding-bottom:11.5px; }
|
|
2736
|
-
.iui-input-container.iui-warning
|
|
2737
|
-
.iui-input-container.iui-warning
|
|
2738
|
-
.iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
|
|
2807
|
+
.iui-input-container.iui-warning .iui-input:focus,
|
|
2808
|
+
.iui-input-container.iui-warning .iui-textarea:focus{
|
|
2739
2809
|
border-bottom:2px solid #F18B12;
|
|
2740
2810
|
outline:2px solid #F18B12;
|
|
2741
2811
|
outline-offset:-2px;
|
|
2742
2812
|
border-bottom:2px solid var(--iui-color-foreground-warning);
|
|
2743
2813
|
outline:2px solid var(--iui-color-foreground-warning);
|
|
2744
2814
|
outline-offset:-2px; }
|
|
2815
|
+
.iui-input-container.iui-warning .iui-input-with-icon{
|
|
2816
|
+
--_hover-color:var(--iui-color-foreground-warning);
|
|
2817
|
+
--_focus-color:var(--iui-color-foreground-warning); }
|
|
2818
|
+
.iui-input-container.iui-warning .iui-select-button{
|
|
2819
|
+
border-bottom:transparent; }
|
|
2820
|
+
.iui-input-container.iui-warning .iui-select-button::after{
|
|
2821
|
+
content:'';
|
|
2822
|
+
width:100%;
|
|
2823
|
+
position:absolute;
|
|
2824
|
+
bottom:0;
|
|
2825
|
+
left:0;
|
|
2826
|
+
height:2px;
|
|
2827
|
+
background-color:#F18B12;
|
|
2828
|
+
background-color:var(--iui-color-foreground-warning); }
|
|
2745
2829
|
|
|
2746
2830
|
.iui-input-label{
|
|
2747
2831
|
font-weight:600;
|
|
@@ -2849,7 +2933,70 @@ html.iui-theme-dark{
|
|
|
2849
2933
|
border-color:#EEF0F3;
|
|
2850
2934
|
background-color:var(--iui-color-background-disabled);
|
|
2851
2935
|
border-color:var(--iui-color-background-disabled);
|
|
2936
|
+
cursor:not-allowed;
|
|
2937
|
+
--_hover-color:var(--iui-color-background-disabled); }
|
|
2938
|
+
|
|
2939
|
+
.iui-select-button{
|
|
2940
|
+
width:100%;
|
|
2941
|
+
margin:0;
|
|
2942
|
+
border-radius:3px;
|
|
2943
|
+
box-sizing:border-box;
|
|
2944
|
+
padding:7px 12px;
|
|
2945
|
+
min-height:38px;
|
|
2946
|
+
transition:border-color 0.2s ease-out;
|
|
2947
|
+
display:flex;
|
|
2948
|
+
align-items:center;
|
|
2949
|
+
-webkit-user-select:none;
|
|
2950
|
+
-moz-user-select:none;
|
|
2951
|
+
-ms-user-select:none;
|
|
2952
|
+
user-select:none;
|
|
2953
|
+
position:relative;
|
|
2954
|
+
overflow:hidden;
|
|
2955
|
+
color:rgba(0, 0, 0, 0.8);
|
|
2956
|
+
background-color:#FFF;
|
|
2957
|
+
border:1px solid rgba(0, 0, 0, 0.4);
|
|
2958
|
+
color:var(--iui-text-color);
|
|
2959
|
+
background-color:var(--iui-color-background-1);
|
|
2960
|
+
border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
2961
|
+
.iui-select-button:focus-visible{
|
|
2962
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
2963
|
+
outline-offset:-2px; }
|
|
2964
|
+
@supports not selector(*:focus-visible){
|
|
2965
|
+
.iui-select-button:focus{
|
|
2966
|
+
outline:2px solid var(--iui-color-foreground-primary);
|
|
2967
|
+
outline-offset:-2px; } }
|
|
2968
|
+
.iui-select-button.iui-small{
|
|
2969
|
+
padding-top:1.5px;
|
|
2970
|
+
padding-bottom:1.5px;
|
|
2971
|
+
min-height:27px; }
|
|
2972
|
+
.iui-select-button.iui-large{
|
|
2973
|
+
padding-top:12.5px;
|
|
2974
|
+
padding-bottom:12.5px;
|
|
2975
|
+
min-height:49px;
|
|
2976
|
+
font-size:16px; }
|
|
2977
|
+
.iui-select-button.iui-disabled{
|
|
2978
|
+
background-color:#EEF0F3;
|
|
2979
|
+
border-color:#EEF0F3;
|
|
2980
|
+
background-color:var(--iui-color-background-disabled);
|
|
2981
|
+
border-color:var(--iui-color-background-disabled);
|
|
2982
|
+
--_hover-color:var(--iui-color-background-disabled);
|
|
2852
2983
|
cursor:not-allowed; }
|
|
2984
|
+
.iui-select-button .iui-icon{
|
|
2985
|
+
width:16px;
|
|
2986
|
+
height:16px;
|
|
2987
|
+
flex:0 0 auto;
|
|
2988
|
+
fill:rgba(0, 0, 0, 0.8);
|
|
2989
|
+
fill:var(--iui-icons-color-actionable);
|
|
2990
|
+
fill:currentColor; }
|
|
2991
|
+
.iui-select-button .iui-icon + .iui-content{
|
|
2992
|
+
margin-left:8px; }
|
|
2993
|
+
.iui-select-button .iui-content{
|
|
2994
|
+
overflow:hidden;
|
|
2995
|
+
white-space:nowrap;
|
|
2996
|
+
text-overflow:ellipsis; }
|
|
2997
|
+
.iui-select-button.iui-placeholder{
|
|
2998
|
+
color:rgba(0, 0, 0, 0.2);
|
|
2999
|
+
color:var(--iui-text-color-placeholder); }
|
|
2853
3000
|
|
|
2854
3001
|
.iui-textarea{
|
|
2855
3002
|
margin:0;
|
|
@@ -2937,221 +3084,112 @@ html.iui-theme-dark{
|
|
|
2937
3084
|
border-color:#EEF0F3;
|
|
2938
3085
|
background-color:var(--iui-color-background-disabled);
|
|
2939
3086
|
border-color:var(--iui-color-background-disabled);
|
|
2940
|
-
cursor:not-allowed;
|
|
3087
|
+
cursor:not-allowed;
|
|
3088
|
+
--_hover-color:var(--iui-color-background-disabled); }
|
|
2941
3089
|
.iui-textarea[disabled], .iui-textarea[readonly]{
|
|
2942
3090
|
resize:none; }
|
|
2943
3091
|
|
|
2944
|
-
.iui-
|
|
3092
|
+
.iui-input-with-icon{
|
|
3093
|
+
display:-ms-grid;
|
|
3094
|
+
display:grid;
|
|
3095
|
+
align-items:center;
|
|
3096
|
+
cursor:pointer; }
|
|
3097
|
+
.iui-input-with-icon > :first-child{
|
|
3098
|
+
-ms-grid-row:1;
|
|
3099
|
+
grid-area:1 / -1;
|
|
3100
|
+
padding-right:40px; }
|
|
3101
|
+
.iui-input-with-icon:focus-within > :first-child{
|
|
3102
|
+
outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
|
|
3103
|
+
outline-offset:-2px; }
|
|
3104
|
+
.iui-input-with-icon:hover > :first-child{
|
|
3105
|
+
border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2))); }
|
|
3106
|
+
|
|
3107
|
+
.iui-end-icon{
|
|
3108
|
+
-ms-grid-row:1;
|
|
3109
|
+
-ms-grid-column:3;
|
|
3110
|
+
grid-area:inputs;
|
|
3111
|
+
-ms-grid-column-align:end;
|
|
3112
|
+
justify-self:end;
|
|
3113
|
+
margin:0 14px 0 0;
|
|
3114
|
+
position:relative;
|
|
3115
|
+
display:flex;
|
|
3116
|
+
grid-area:1 / -1; }
|
|
3117
|
+
.iui-end-icon svg{
|
|
3118
|
+
width:16px;
|
|
3119
|
+
height:16px; }
|
|
3120
|
+
.iui-end-icon.iui-button{
|
|
3121
|
+
height:100%;
|
|
3122
|
+
width:-webkit-fit-content;
|
|
3123
|
+
width:-moz-fit-content;
|
|
3124
|
+
width:fit-content;
|
|
3125
|
+
margin-right:0;
|
|
3126
|
+
border-top-left-radius:0;
|
|
3127
|
+
border-bottom-left-radius:0;
|
|
3128
|
+
border-top-right-radius:inherit;
|
|
3129
|
+
border-bottom-right-radius:inherit; }
|
|
3130
|
+
.iui-end-icon.iui-actionable{
|
|
3131
|
+
align-items:center;
|
|
3132
|
+
height:90%;
|
|
3133
|
+
margin-right:2px;
|
|
3134
|
+
padding:0 12px;
|
|
3135
|
+
cursor:pointer;
|
|
3136
|
+
background-position:center;
|
|
3137
|
+
transition:background 0.4s ease-out; }
|
|
3138
|
+
.iui-end-icon.iui-actionable:hover{
|
|
3139
|
+
background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
|
|
3140
|
+
.iui-end-icon.iui-actionable:active{
|
|
3141
|
+
background-color:var(--iui-color-background-2);
|
|
3142
|
+
background-size:100%;
|
|
3143
|
+
transition:background 0s; }
|
|
3144
|
+
.iui-end-icon.iui-actionable svg{
|
|
3145
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
3146
|
+
fill:var(--iui-icons-color);
|
|
3147
|
+
transition:transform 0.2s ease-out; }
|
|
3148
|
+
.iui-end-icon.iui-actionable.iui-open svg{
|
|
3149
|
+
transform:rotate(180deg); }
|
|
3150
|
+
.iui-end-icon.iui-disabled{
|
|
3151
|
+
cursor:not-allowed; }
|
|
3152
|
+
.iui-end-icon.iui-disabled svg{
|
|
3153
|
+
fill:rgba(0, 0, 0, 0.2);
|
|
3154
|
+
fill:var(--iui-icons-color-actionable-disabled); }
|
|
3155
|
+
|
|
3156
|
+
.iui-checkbox{
|
|
2945
3157
|
margin:0;
|
|
2946
3158
|
padding:0;
|
|
2947
3159
|
border:none;
|
|
2948
3160
|
vertical-align:baseline;
|
|
2949
3161
|
display:flex;
|
|
2950
|
-
|
|
3162
|
+
align-items:center;
|
|
3163
|
+
font-size:14px;
|
|
3164
|
+
width:-webkit-fit-content;
|
|
3165
|
+
width:-moz-fit-content;
|
|
3166
|
+
width:fit-content;
|
|
3167
|
+
-webkit-user-select:none;
|
|
3168
|
+
-moz-user-select:none;
|
|
3169
|
+
-ms-user-select:none;
|
|
3170
|
+
user-select:none;
|
|
2951
3171
|
position:relative;
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
vertical-align:baseline;
|
|
2959
|
-
width:100%;
|
|
2960
|
-
font-family:inherit;
|
|
2961
|
-
font-size:14px;
|
|
2962
|
-
font-weight:400;
|
|
2963
|
-
line-height:22px;
|
|
2964
|
-
border-radius:3px;
|
|
3172
|
+
cursor:pointer;
|
|
3173
|
+
color:rgba(0, 0, 0, 0.8);
|
|
3174
|
+
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
|
|
3175
|
+
.iui-checkbox > input{
|
|
3176
|
+
width:0;
|
|
3177
|
+
height:0;
|
|
2965
3178
|
-webkit-appearance:none;
|
|
2966
3179
|
-moz-appearance:none;
|
|
2967
3180
|
appearance:none;
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
3181
|
+
opacity:0;
|
|
3182
|
+
position:absolute; }
|
|
3183
|
+
.iui-checkbox.iui-disabled{
|
|
3184
|
+
cursor:not-allowed; }
|
|
3185
|
+
.iui-checkbox .iui-checkbox-checkmark,
|
|
3186
|
+
.iui-checkbox .iui-radio-dot{
|
|
3187
|
+
width:16px;
|
|
3188
|
+
height:16px;
|
|
3189
|
+
margin:0;
|
|
2977
3190
|
display:flex;
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
padding-right:32px;
|
|
2981
|
-
-webkit-user-select:none;
|
|
2982
|
-
-moz-user-select:none;
|
|
2983
|
-
-ms-user-select:none;
|
|
2984
|
-
user-select:none;
|
|
2985
|
-
position:relative; }
|
|
2986
|
-
.iui-select > .iui-select-button:focus-visible{
|
|
2987
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
2988
|
-
outline-offset:-2px; }
|
|
2989
|
-
@supports not selector(*:focus-visible){
|
|
2990
|
-
.iui-select > .iui-select-button:focus{
|
|
2991
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
2992
|
-
outline-offset:-2px; } }
|
|
2993
|
-
@media (prefers-reduced-motion: no-preference){
|
|
2994
|
-
.iui-select > .iui-select-button{
|
|
2995
|
-
transition:border-color 0.2s ease-out; } }
|
|
2996
|
-
.iui-select > .iui-select-button.iui-small{
|
|
2997
|
-
padding-top:1.5px;
|
|
2998
|
-
padding-bottom:1.5px;
|
|
2999
|
-
min-height:27px; }
|
|
3000
|
-
.iui-select > .iui-select-button.iui-large{
|
|
3001
|
-
padding-top:12.5px;
|
|
3002
|
-
padding-bottom:12.5px;
|
|
3003
|
-
min-height:49px;
|
|
3004
|
-
font-size:16px; }
|
|
3005
|
-
.iui-select > .iui-select-button::-moz-placeholder{
|
|
3006
|
-
-moz-user-select:none;
|
|
3007
|
-
user-select:none;
|
|
3008
|
-
color:rgba(0, 0, 0, 0.2);
|
|
3009
|
-
color:var(--iui-text-color-placeholder); }
|
|
3010
|
-
.iui-select > .iui-select-button:-ms-input-placeholder{
|
|
3011
|
-
-ms-user-select:none;
|
|
3012
|
-
user-select:none;
|
|
3013
|
-
color:rgba(0, 0, 0, 0.2);
|
|
3014
|
-
color:var(--iui-text-color-placeholder); }
|
|
3015
|
-
.iui-select > .iui-select-button::placeholder{
|
|
3016
|
-
-webkit-user-select:none;
|
|
3017
|
-
-moz-user-select:none;
|
|
3018
|
-
-ms-user-select:none;
|
|
3019
|
-
user-select:none;
|
|
3020
|
-
color:rgba(0, 0, 0, 0.2);
|
|
3021
|
-
color:var(--iui-text-color-placeholder); }
|
|
3022
|
-
.iui-select > .iui-select-button:-webkit-autofill{
|
|
3023
|
-
border-color:#008be1;
|
|
3024
|
-
color:#008be1;
|
|
3025
|
-
background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
|
|
3026
|
-
border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
|
|
3027
|
-
color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
|
|
3028
|
-
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)); }
|
|
3029
|
-
.iui-select > .iui-select-button:autofill{
|
|
3030
|
-
border-color:#008be1;
|
|
3031
|
-
color:#008be1;
|
|
3032
|
-
background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
|
|
3033
|
-
border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
|
|
3034
|
-
color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
|
|
3035
|
-
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)); }
|
|
3036
|
-
.iui-select > .iui-select-button:hover{
|
|
3037
|
-
border-color:rgba(0, 0, 0, 0.8);
|
|
3038
|
-
border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
|
|
3039
|
-
@media (prefers-reduced-motion: no-preference){
|
|
3040
|
-
.iui-select > .iui-select-button:hover{
|
|
3041
|
-
transition:border-color 0.2s ease-out; } }
|
|
3042
|
-
.iui-select > .iui-select-button[disabled]{
|
|
3043
|
-
background-color:#EEF0F3;
|
|
3044
|
-
border-color:#EEF0F3;
|
|
3045
|
-
background-color:var(--iui-color-background-disabled);
|
|
3046
|
-
border-color:var(--iui-color-background-disabled);
|
|
3047
|
-
cursor:not-allowed; }
|
|
3048
|
-
.iui-select > .iui-select-button:focus-visible{
|
|
3049
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
3050
|
-
outline-offset:-2px; }
|
|
3051
|
-
@supports not selector(*:focus-visible){
|
|
3052
|
-
.iui-select > .iui-select-button:focus{
|
|
3053
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
3054
|
-
outline-offset:-2px; } }
|
|
3055
|
-
@media (prefers-reduced-motion: no-preference){
|
|
3056
|
-
.iui-select > .iui-select-button{
|
|
3057
|
-
transition:border-color 0.2s ease-out; } }
|
|
3058
|
-
.iui-select > .iui-select-button > .iui-icon{
|
|
3059
|
-
width:16px;
|
|
3060
|
-
height:16px;
|
|
3061
|
-
flex:0 0 auto;
|
|
3062
|
-
fill:rgba(0, 0, 0, 0.8);
|
|
3063
|
-
fill:var(--iui-icons-color-actionable); }
|
|
3064
|
-
.iui-select > .iui-select-button > .iui-icon + .iui-content{
|
|
3065
|
-
margin-left:8px; }
|
|
3066
|
-
.iui-select > .iui-select-button > .iui-content{
|
|
3067
|
-
overflow:hidden;
|
|
3068
|
-
white-space:nowrap;
|
|
3069
|
-
text-overflow:ellipsis; }
|
|
3070
|
-
.iui-select > .iui-select-button.iui-placeholder{
|
|
3071
|
-
color:rgba(0, 0, 0, 0.2);
|
|
3072
|
-
color:var(--iui-text-color-placeholder); }
|
|
3073
|
-
.iui-select > .iui-select-button::after{
|
|
3074
|
-
content:'';
|
|
3075
|
-
position:absolute;
|
|
3076
|
-
top:50%;
|
|
3077
|
-
right:16px;
|
|
3078
|
-
transform:translateY(-50%);
|
|
3079
|
-
width:0;
|
|
3080
|
-
height:0;
|
|
3081
|
-
border-left:5px solid transparent;
|
|
3082
|
-
border-right:5px solid transparent;
|
|
3083
|
-
border-top:5px solid rgba(0, 0, 0, 0.8);
|
|
3084
|
-
border-top:5px solid var(--iui-icons-color-actionable); }
|
|
3085
|
-
.iui-select > .iui-select-button:hover{
|
|
3086
|
-
border-color:rgba(0, 0, 0, 0.8);
|
|
3087
|
-
border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
|
|
3088
|
-
.iui-select > .iui-select-button:hover::after{
|
|
3089
|
-
border-bottom:none;
|
|
3090
|
-
border-top:5px solid black;
|
|
3091
|
-
border-top:5px solid var(--iui-icons-color-actionable-hover); }
|
|
3092
|
-
.iui-select > .iui-select-button.iui-active::after{
|
|
3093
|
-
border-top:none;
|
|
3094
|
-
border-bottom:5px solid rgba(0, 0, 0, 0.8);
|
|
3095
|
-
border-bottom:5px solid var(--iui-icons-color-actionable); }
|
|
3096
|
-
.iui-select > .iui-select-button.iui-active:hover::after{
|
|
3097
|
-
border-bottom:5px solid black;
|
|
3098
|
-
border-bottom:5px solid var(--iui-icons-color-actionable-hover); }
|
|
3099
|
-
.iui-select > .iui-select-button.iui-disabled{
|
|
3100
|
-
cursor:not-allowed;
|
|
3101
|
-
background-color:#EEF0F3;
|
|
3102
|
-
border-color:#EEF0F3;
|
|
3103
|
-
background-color:var(--iui-color-background-disabled);
|
|
3104
|
-
border-color:var(--iui-color-background-disabled); }
|
|
3105
|
-
.iui-select > .iui-select-button.iui-disabled::after{
|
|
3106
|
-
border-top:5px solid rgba(0, 0, 0, 0.2);
|
|
3107
|
-
border-top:5px solid var(--iui-icons-color-actionable-disabled); }
|
|
3108
|
-
.iui-select.iui-small .iui-select-button{
|
|
3109
|
-
padding-top:1.5px;
|
|
3110
|
-
padding-bottom:1.5px;
|
|
3111
|
-
min-height:27px; }
|
|
3112
|
-
.iui-select.iui-large .iui-select-button{
|
|
3113
|
-
padding-top:12.5px;
|
|
3114
|
-
padding-bottom:12.5px;
|
|
3115
|
-
min-height:49px;
|
|
3116
|
-
font-size:16px; }
|
|
3117
|
-
|
|
3118
|
-
.iui-checkbox{
|
|
3119
|
-
margin:0;
|
|
3120
|
-
padding:0;
|
|
3121
|
-
border:none;
|
|
3122
|
-
vertical-align:baseline;
|
|
3123
|
-
display:flex;
|
|
3124
|
-
align-items:center;
|
|
3125
|
-
font-size:14px;
|
|
3126
|
-
width:-webkit-fit-content;
|
|
3127
|
-
width:-moz-fit-content;
|
|
3128
|
-
width:fit-content;
|
|
3129
|
-
-webkit-user-select:none;
|
|
3130
|
-
-moz-user-select:none;
|
|
3131
|
-
-ms-user-select:none;
|
|
3132
|
-
user-select:none;
|
|
3133
|
-
position:relative;
|
|
3134
|
-
cursor:pointer;
|
|
3135
|
-
color:rgba(0, 0, 0, 0.8);
|
|
3136
|
-
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
|
|
3137
|
-
.iui-checkbox > input{
|
|
3138
|
-
width:0;
|
|
3139
|
-
height:0;
|
|
3140
|
-
-webkit-appearance:none;
|
|
3141
|
-
-moz-appearance:none;
|
|
3142
|
-
appearance:none;
|
|
3143
|
-
opacity:0;
|
|
3144
|
-
position:absolute; }
|
|
3145
|
-
.iui-checkbox.iui-disabled{
|
|
3146
|
-
cursor:not-allowed; }
|
|
3147
|
-
.iui-checkbox .iui-checkbox-checkmark,
|
|
3148
|
-
.iui-checkbox .iui-radio-dot{
|
|
3149
|
-
width:16px;
|
|
3150
|
-
height:16px;
|
|
3151
|
-
margin:0;
|
|
3152
|
-
display:flex;
|
|
3153
|
-
flex-shrink:0;
|
|
3154
|
-
justify-content:center;
|
|
3191
|
+
flex-shrink:0;
|
|
3192
|
+
justify-content:center;
|
|
3155
3193
|
align-items:center;
|
|
3156
3194
|
position:relative;
|
|
3157
3195
|
isolation:isolate;
|
|
@@ -4123,6 +4161,15 @@ html.iui-theme-dark{
|
|
|
4123
4161
|
box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
|
|
4124
4162
|
box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } } }
|
|
4125
4163
|
|
|
4164
|
+
.iui-popover{ }
|
|
4165
|
+
.iui-popover.tippy-box{
|
|
4166
|
+
all:revert; }
|
|
4167
|
+
.iui-popover.tippy-box[data-reference-hidden]{
|
|
4168
|
+
visibility:visible;
|
|
4169
|
+
pointer-events:auto; }
|
|
4170
|
+
.iui-popover .tippy-content{
|
|
4171
|
+
all:revert; }
|
|
4172
|
+
|
|
4126
4173
|
.iui-progress-indicator-linear{
|
|
4127
4174
|
margin:0;
|
|
4128
4175
|
padding:0;
|
|
@@ -4488,7 +4535,8 @@ html.iui-theme-dark{
|
|
|
4488
4535
|
border-left:none;
|
|
4489
4536
|
border-right:none;
|
|
4490
4537
|
overflow:hidden;
|
|
4491
|
-
justify-content:flex-start;
|
|
4538
|
+
justify-content:flex-start;
|
|
4539
|
+
--_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
|
|
4492
4540
|
.iui-side-navigation .iui-sidenav-button:not(.iui-expand){
|
|
4493
4541
|
height:55px; }
|
|
4494
4542
|
@supports (padding: max(0px)){
|
|
@@ -4508,9 +4556,6 @@ html.iui-theme-dark{
|
|
|
4508
4556
|
.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
|
|
4509
4557
|
fill:#008BE1;
|
|
4510
4558
|
fill:var(--iui-color-foreground-primary); }
|
|
4511
|
-
.iui-side-navigation .iui-sidenav-button.iui-active{
|
|
4512
|
-
box-shadow:inset 2px 0 0 0 #008BE1;
|
|
4513
|
-
box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
4514
4559
|
.iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
|
|
4515
4560
|
background-color:#F8F9FB;
|
|
4516
4561
|
background-color:var(--iui-color-background-2); }
|
|
@@ -4866,7 +4911,7 @@ html.iui-theme-dark{
|
|
|
4866
4911
|
scroll-snap-type:y mandatory; }
|
|
4867
4912
|
.iui-table-body.iui-scroll-snapping .iui-row{
|
|
4868
4913
|
scroll-snap-align:start none; }
|
|
4869
|
-
.iui-table-body.iui-zebra-striping
|
|
4914
|
+
.iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected){
|
|
4870
4915
|
background-color:rgba(0, 0, 0, 0.02);
|
|
4871
4916
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
|
|
4872
4917
|
.iui-table-body .iui-row{
|
|
@@ -5136,56 +5181,10 @@ html.iui-theme-dark{
|
|
|
5136
5181
|
.iui-paginator-pages-group{
|
|
5137
5182
|
display:inline-flex;
|
|
5138
5183
|
align-items:center;
|
|
5139
|
-
isolation:isolate;
|
|
5140
5184
|
margin:0 8px; }
|
|
5141
|
-
.iui-paginator-pages-group > *{
|
|
5142
|
-
display:flex; }
|
|
5143
|
-
.iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
|
|
5144
|
-
position:relative;
|
|
5145
|
-
transition-duration:0ms; }
|
|
5146
|
-
.iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
|
|
5147
|
-
z-index:1; }
|
|
5148
|
-
.iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
|
|
5149
|
-
z-index:2; }
|
|
5150
|
-
.iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
|
|
5151
|
-
z-index:revert; }
|
|
5152
|
-
.iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
|
|
5153
|
-
z-index:-1; }
|
|
5154
|
-
.iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
|
|
5155
|
-
transition-duration:0.2s; }
|
|
5156
|
-
.iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
|
|
5157
|
-
content:'';
|
|
5158
|
-
position:absolute;
|
|
5159
|
-
height:2px;
|
|
5160
|
-
opacity:1;
|
|
5161
|
-
top:2px;
|
|
5162
|
-
left:2px;
|
|
5163
|
-
width:calc(100% - 4px);
|
|
5164
|
-
background-color:#008BE1;
|
|
5165
|
-
background-color:var(--iui-color-foreground-primary); }
|
|
5166
|
-
.iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
|
|
5167
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
5168
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
5169
|
-
.iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
|
|
5170
|
-
border-radius:0; }
|
|
5171
|
-
.iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
|
|
5172
|
-
border-top-left-radius:3px;
|
|
5173
|
-
border-bottom-left-radius:3px; }
|
|
5174
|
-
.iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
|
|
5175
|
-
border-top-right-radius:3px;
|
|
5176
|
-
border-bottom-right-radius:3px; }
|
|
5177
|
-
.iui-paginator-pages-group > * + *{
|
|
5178
|
-
margin-left:-1px; }
|
|
5179
|
-
.iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
|
|
5180
|
-
border-left-color:#DCE0E3;
|
|
5181
|
-
border-left-color:var(--iui-color-background-4); }
|
|
5182
|
-
.iui-paginator-pages-group > * + *{
|
|
5183
|
-
margin-left:0; }
|
|
5184
|
-
.iui-paginator-pages-group button.iui-active::after{
|
|
5185
|
-
top:auto;
|
|
5186
|
-
bottom:2px; }
|
|
5187
5185
|
|
|
5188
5186
|
.iui-paginator-page-button{
|
|
5187
|
+
--_iui-button-active-stripe-inset:initial;
|
|
5189
5188
|
margin:0;
|
|
5190
5189
|
padding:0;
|
|
5191
5190
|
border:none;
|
|
@@ -5199,7 +5198,6 @@ html.iui-theme-dark{
|
|
|
5199
5198
|
box-sizing:border-box;
|
|
5200
5199
|
border-radius:3px;
|
|
5201
5200
|
line-height:22px;
|
|
5202
|
-
outline:none;
|
|
5203
5201
|
box-shadow:none;
|
|
5204
5202
|
font-size:14px;
|
|
5205
5203
|
font-weight:400;
|
|
@@ -5218,7 +5216,8 @@ html.iui-theme-dark{
|
|
|
5218
5216
|
padding:0 8px;
|
|
5219
5217
|
height:38px;
|
|
5220
5218
|
gap:8px;
|
|
5221
|
-
width:38px;
|
|
5219
|
+
width:38px;
|
|
5220
|
+
--_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px; }
|
|
5222
5221
|
@media (prefers-reduced-motion: no-preference){
|
|
5223
5222
|
.iui-paginator-page-button{
|
|
5224
5223
|
transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
|
|
@@ -5241,6 +5240,13 @@ html.iui-theme-dark{
|
|
|
5241
5240
|
background:var(--iui-color-background-disabled);
|
|
5242
5241
|
border-color:var(--iui-color-background-disabled);
|
|
5243
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)); }
|
|
5244
5250
|
.iui-paginator-page-button > .iui-button-icon:only-child{
|
|
5245
5251
|
margin-left:3px;
|
|
5246
5252
|
margin-right:3px; }
|
|
@@ -5776,326 +5782,393 @@ a.iui-tag{
|
|
|
5776
5782
|
color:rgba(0, 0, 0, 0.8);
|
|
5777
5783
|
background-color:var(--iui-color-background-1);
|
|
5778
5784
|
color:var(--iui-text-color); }
|
|
5779
|
-
.iui-tile
|
|
5780
|
-
|
|
5781
|
-
|
|
5782
|
-
|
|
5783
|
-
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
|
|
5787
|
-
|
|
5788
|
-
|
|
5789
|
-
|
|
5790
|
-
|
|
5791
|
-
|
|
5792
|
-
|
|
5793
|
-
|
|
5794
|
-
|
|
5795
|
-
|
|
5796
|
-
|
|
5797
|
-
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5805
|
-
|
|
5806
|
-
|
|
5807
|
-
|
|
5808
|
-
|
|
5809
|
-
|
|
5810
|
-
|
|
5811
|
-
|
|
5812
|
-
|
|
5813
|
-
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
|
|
5826
|
-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
5832
|
-
background-color:transparent;
|
|
5833
|
-
border-color:transparent;
|
|
5834
|
-
background-color:transparent;
|
|
5835
|
-
border-color:transparent; }
|
|
5836
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator:disabled.iui-active,
|
|
5837
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled].iui-active,
|
|
5838
|
-
.iui-tile .iui-thumbnail > .iui-quick-action:disabled.iui-active{
|
|
5839
|
-
background-color:rgba(0, 0, 0, 0.05);
|
|
5840
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
5841
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator{
|
|
5842
|
-
left:8px; }
|
|
5843
|
-
.iui-tile .iui-thumbnail > .iui-quick-action{
|
|
5844
|
-
right:8px; }
|
|
5845
|
-
.iui-tile .iui-thumbnail > .iui-badge-container{
|
|
5846
|
-
position:absolute;
|
|
5847
|
-
bottom:6px;
|
|
5848
|
-
width:calc(100% - 2 * 12px);
|
|
5849
|
-
height:auto;
|
|
5850
|
-
right:12px;
|
|
5851
|
-
display:flex;
|
|
5852
|
-
justify-content:flex-end;
|
|
5853
|
-
overflow:hidden; }
|
|
5854
|
-
.iui-tile .iui-thumbnail > .iui-badge-container > .iui-badge:not(:last-child){
|
|
5855
|
-
margin-right:4px; }
|
|
5856
|
-
.iui-tile .iui-thumbnail .iui-thumbnail-icon{
|
|
5857
|
-
fill:rgba(0, 0, 0, 0.4);
|
|
5858
|
-
fill:var(--iui-icons-color);
|
|
5859
|
-
display:inline-flex;
|
|
5860
|
-
width:64px;
|
|
5861
|
-
height:64px; }
|
|
5862
|
-
.iui-tile .iui-thumbnail .iui-thumbnail-icon.iui-informational{
|
|
5863
|
-
fill:#008BE1;
|
|
5864
|
-
fill:var(--iui-icons-color-primary); }
|
|
5865
|
-
.iui-tile .iui-thumbnail .iui-thumbnail-icon.iui-positive{
|
|
5866
|
-
fill:#53A21A;
|
|
5867
|
-
fill:var(--iui-icons-color-positive); }
|
|
5868
|
-
.iui-tile .iui-thumbnail .iui-thumbnail-icon.iui-warning{
|
|
5869
|
-
fill:#F18B12;
|
|
5870
|
-
fill:var(--iui-icons-color-warning); }
|
|
5871
|
-
.iui-tile .iui-thumbnail .iui-thumbnail-icon.iui-negative{
|
|
5872
|
-
fill:#D30A0A;
|
|
5873
|
-
fill:var(--iui-icons-color-negative); }
|
|
5874
|
-
.iui-tile .iui-thumbnail > .iui-picture ~ .iui-thumbnail-icon{
|
|
5875
|
-
z-index:1;
|
|
5876
|
-
cursor:pointer;
|
|
5877
|
-
fill:rgba(255, 255, 255, 0.6);
|
|
5878
|
-
filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
|
|
5879
|
-
fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
|
|
5880
|
-
filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5))); }
|
|
5881
|
-
@media (prefers-reduced-motion: no-preference){
|
|
5882
|
-
.iui-tile .iui-thumbnail > .iui-picture ~ .iui-thumbnail-icon{
|
|
5883
|
-
transition:fill 0.2s ease; } }
|
|
5884
|
-
.iui-tile .iui-thumbnail > .iui-picture ~ .iui-thumbnail-icon:hover{
|
|
5885
|
-
fill:rgba(255, 255, 255, 0.8);
|
|
5886
|
-
fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2)); }
|
|
5887
|
-
.iui-tile .iui-thumbnail > .iui-picture{
|
|
5888
|
-
width:100%;
|
|
5889
|
-
height:100%;
|
|
5890
|
-
position:absolute;
|
|
5891
|
-
top:0;
|
|
5892
|
-
left:0; }
|
|
5893
|
-
@media (prefers-reduced-motion: no-preference){
|
|
5894
|
-
.iui-tile .iui-thumbnail > .iui-picture{
|
|
5895
|
-
transition:transform 0.4s ease; } }
|
|
5896
|
-
div.iui-tile .iui-thumbnail > .iui-picture{
|
|
5897
|
-
background-position:center;
|
|
5898
|
-
background-size:cover; }
|
|
5899
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button,
|
|
5900
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button{
|
|
5901
|
-
background-color:rgba(0, 0, 0, 0.4);
|
|
5902
|
-
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
5903
|
-
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
|
|
5904
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button,
|
|
5905
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button{
|
|
5906
|
-
background-color:rgba(0, 0, 0, 0.2);
|
|
5907
|
-
-webkit-backdrop-filter:blur(5px);
|
|
5908
|
-
backdrop-filter:blur(5px);
|
|
5909
|
-
background-color:rgba(0, 0, 0, var(--iui-opacity-5));
|
|
5910
|
-
backdrop-filter:blur(5px); } }
|
|
5911
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-button-icon,
|
|
5912
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-button-icon{
|
|
5913
|
-
fill:#FFF;
|
|
5914
|
-
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
|
|
5915
|
-
fill:var(--iui-color-foreground-accessory);
|
|
5916
|
-
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5))); }
|
|
5917
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active,
|
|
5918
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover,
|
|
5919
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled,
|
|
5920
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover,
|
|
5921
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active{
|
|
5922
|
-
background-color:rgba(0, 0, 0, 0.4);
|
|
5923
|
-
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
5924
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active .iui-button-icon,
|
|
5925
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover .iui-button-icon,
|
|
5926
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled .iui-button-icon,
|
|
5927
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover .iui-button-icon,
|
|
5928
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active .iui-button-icon{
|
|
5929
|
-
fill:#FFF;
|
|
5930
|
-
fill:var(--iui-color-foreground-accessory); }
|
|
5931
|
-
.iui-tile > .iui-content{
|
|
5932
|
-
padding:11px 12px;
|
|
5933
|
-
position:relative;
|
|
5934
|
-
display:flex;
|
|
5935
|
-
flex-direction:column;
|
|
5936
|
-
flex-grow:2;
|
|
5937
|
-
min-width:0; }
|
|
5938
|
-
.iui-tile > .iui-content > .iui-name{
|
|
5939
|
-
display:flex;
|
|
5940
|
-
flex-shrink:0;
|
|
5941
|
-
align-items:center;
|
|
5942
|
-
font-size:16px;
|
|
5943
|
-
-webkit-user-select:all;
|
|
5944
|
-
-moz-user-select:all;
|
|
5945
|
-
user-select:all;
|
|
5946
|
-
margin-bottom:5.5px;
|
|
5947
|
-
color:rgba(0, 0, 0, 0.8);
|
|
5948
|
-
color:var(--iui-text-color); }
|
|
5949
|
-
.iui-tile > .iui-content > .iui-name .iui-tile-status-icon{
|
|
5950
|
-
fill:rgba(0, 0, 0, 0.4);
|
|
5951
|
-
fill:var(--iui-icons-color);
|
|
5952
|
-
display:inline-flex;
|
|
5953
|
-
width:16px;
|
|
5954
|
-
height:16px;
|
|
5955
|
-
margin-right:8px;
|
|
5956
|
-
flex-shrink:0; }
|
|
5957
|
-
.iui-tile > .iui-content > .iui-name .iui-tile-status-icon.iui-informational{
|
|
5958
|
-
fill:#008BE1;
|
|
5959
|
-
fill:var(--iui-icons-color-primary); }
|
|
5960
|
-
.iui-tile > .iui-content > .iui-name .iui-tile-status-icon.iui-positive{
|
|
5961
|
-
fill:#53A21A;
|
|
5962
|
-
fill:var(--iui-icons-color-positive); }
|
|
5963
|
-
.iui-tile > .iui-content > .iui-name .iui-tile-status-icon.iui-warning{
|
|
5964
|
-
fill:#F18B12;
|
|
5965
|
-
fill:var(--iui-icons-color-warning); }
|
|
5966
|
-
.iui-tile > .iui-content > .iui-name .iui-tile-status-icon.iui-negative{
|
|
5967
|
-
fill:#D30A0A;
|
|
5968
|
-
fill:var(--iui-icons-color-negative); }
|
|
5969
|
-
.iui-tile > .iui-content > .iui-name > .iui-name-label{
|
|
5970
|
-
overflow:hidden;
|
|
5971
|
-
white-space:nowrap;
|
|
5972
|
-
text-overflow:ellipsis; }
|
|
5973
|
-
.iui-tile > .iui-content > .iui-description{
|
|
5974
|
-
margin-bottom:11px;
|
|
5975
|
-
font-size:14px;
|
|
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; }
|
|
5803
|
+
.iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
|
|
5804
|
+
width:calc(100% - 32px); }
|
|
5805
|
+
.iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
|
|
5806
|
+
transform:translateZ(0) scale(1.1); }
|
|
5807
|
+
.iui-tile.iui-new .iui-tile-name,
|
|
5808
|
+
.iui-tile.iui-new .iui-tile-description{
|
|
5809
|
+
font-weight:600; }
|
|
5810
|
+
.iui-tile.iui-selected{
|
|
5811
|
+
outline:solid 2px #008BE1;
|
|
5812
|
+
background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
|
|
5813
|
+
outline:solid 2px var(--iui-color-foreground-primary);
|
|
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; } }
|
|
5822
|
+
.iui-tile.iui-selected .iui-tile-thumbnail-picture{
|
|
5823
|
+
transform:translateZ(0) scale(1.1); }
|
|
5824
|
+
.iui-tile.iui-folder{
|
|
5825
|
+
display:inline-flex;
|
|
5826
|
+
flex-direction:row;
|
|
5827
|
+
flex-wrap:nowrap; }
|
|
5828
|
+
.iui-tile.iui-folder .iui-tile-thumbnail{
|
|
5829
|
+
height:110px;
|
|
5830
|
+
flex:1;
|
|
5831
|
+
border-bottom:none;
|
|
5832
|
+
border-right:1px solid #DCE0E3;
|
|
5833
|
+
border-right:1px solid var(--iui-color-background-4); }
|
|
5834
|
+
.iui-tile.iui-folder .iui-tile-content{
|
|
5835
|
+
flex:2; }
|
|
5836
|
+
.iui-tile.iui-folder .iui-tile-description{
|
|
5976
5837
|
height:100%;
|
|
5977
|
-
max-height:
|
|
5978
|
-
|
|
5979
|
-
|
|
5980
|
-
|
|
5981
|
-
|
|
5982
|
-
|
|
5983
|
-
|
|
5984
|
-
|
|
5985
|
-
|
|
5986
|
-
|
|
5987
|
-
|
|
5988
|
-
|
|
5989
|
-
|
|
5990
|
-
|
|
5991
|
-
|
|
5992
|
-
|
|
5993
|
-
|
|
5994
|
-
|
|
5995
|
-
|
|
5996
|
-
|
|
5997
|
-
|
|
5998
|
-
|
|
5999
|
-
|
|
6000
|
-
|
|
6001
|
-
|
|
6002
|
-
|
|
6003
|
-
|
|
6004
|
-
|
|
6005
|
-
|
|
6006
|
-
|
|
6007
|
-
|
|
6008
|
-
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
|
|
6012
|
-
|
|
6013
|
-
|
|
6014
|
-
|
|
6015
|
-
|
|
6016
|
-
|
|
6017
|
-
|
|
6018
|
-
|
|
6019
|
-
|
|
6020
|
-
|
|
6021
|
-
|
|
6022
|
-
|
|
6023
|
-
|
|
6024
|
-
|
|
6025
|
-
|
|
6026
|
-
|
|
6027
|
-
|
|
6028
|
-
|
|
6029
|
-
|
|
6030
|
-
|
|
6031
|
-
|
|
6032
|
-
|
|
6033
|
-
|
|
6034
|
-
|
|
6035
|
-
|
|
6036
|
-
|
|
6037
|
-
|
|
6038
|
-
|
|
6039
|
-
|
|
6040
|
-
.iui-tile
|
|
5838
|
+
max-height:44px;
|
|
5839
|
+
margin-bottom:0;
|
|
5840
|
+
-webkit-line-clamp:2; }
|
|
5841
|
+
|
|
5842
|
+
.iui-tile-thumbnail-type-indicator{
|
|
5843
|
+
border-color:transparent;
|
|
5844
|
+
background-color:transparent;
|
|
5845
|
+
padding:0 8px;
|
|
5846
|
+
height:38px;
|
|
5847
|
+
gap:8px;
|
|
5848
|
+
padding:0 2px;
|
|
5849
|
+
height:27px;
|
|
5850
|
+
gap:4px;
|
|
5851
|
+
position:absolute;
|
|
5852
|
+
border-radius:50%;
|
|
5853
|
+
top:6px;
|
|
5854
|
+
left:8px; }
|
|
5855
|
+
.iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
|
|
5856
|
+
margin-left:3px;
|
|
5857
|
+
margin-right:3px; }
|
|
5858
|
+
.iui-tile-thumbnail-type-indicator:hover{
|
|
5859
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
5860
|
+
border-color:transparent;
|
|
5861
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
|
|
5862
|
+
border-color:transparent; }
|
|
5863
|
+
.iui-tile-thumbnail-type-indicator.iui-active{
|
|
5864
|
+
background-color:rgba(0, 139, 225, 0.1);
|
|
5865
|
+
color:#008BE1;
|
|
5866
|
+
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
5867
|
+
color:var(--iui-color-foreground-primary);
|
|
5868
|
+
border-color:transparent; }
|
|
5869
|
+
.iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
|
|
5870
|
+
cursor:not-allowed;
|
|
5871
|
+
background:#EEF0F3;
|
|
5872
|
+
border-color:#EEF0F3;
|
|
5873
|
+
color:rgba(0, 0, 0, 0.2);
|
|
5874
|
+
background:var(--iui-color-background-disabled);
|
|
5875
|
+
border-color:var(--iui-color-background-disabled);
|
|
5876
|
+
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
5877
|
+
background-color:transparent;
|
|
5878
|
+
border-color:transparent;
|
|
5879
|
+
background-color:transparent;
|
|
5880
|
+
border-color:transparent; }
|
|
5881
|
+
.iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
|
|
5882
|
+
background-color:rgba(0, 0, 0, 0.05);
|
|
5883
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
5884
|
+
|
|
5885
|
+
.iui-tile-thumbnail-quick-action{
|
|
5886
|
+
border-color:transparent;
|
|
5887
|
+
background-color:transparent;
|
|
5888
|
+
padding:0 8px;
|
|
5889
|
+
height:38px;
|
|
5890
|
+
gap:8px;
|
|
5891
|
+
padding:0 2px;
|
|
5892
|
+
height:27px;
|
|
5893
|
+
gap:4px;
|
|
5894
|
+
position:absolute;
|
|
5895
|
+
border-radius:50%;
|
|
5896
|
+
top:6px;
|
|
5897
|
+
right:8px; }
|
|
5898
|
+
.iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
|
|
5899
|
+
margin-left:3px;
|
|
5900
|
+
margin-right:3px; }
|
|
5901
|
+
.iui-tile-thumbnail-quick-action:hover{
|
|
5902
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
5903
|
+
border-color:transparent;
|
|
5904
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
|
|
5905
|
+
border-color:transparent; }
|
|
5906
|
+
.iui-tile-thumbnail-quick-action.iui-active{
|
|
5907
|
+
background-color:rgba(0, 139, 225, 0.1);
|
|
5908
|
+
color:#008BE1;
|
|
5909
|
+
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
5910
|
+
color:var(--iui-color-foreground-primary);
|
|
5911
|
+
border-color:transparent; }
|
|
5912
|
+
.iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
|
|
5913
|
+
cursor:not-allowed;
|
|
5914
|
+
background:#EEF0F3;
|
|
5915
|
+
border-color:#EEF0F3;
|
|
5916
|
+
color:rgba(0, 0, 0, 0.2);
|
|
5917
|
+
background:var(--iui-color-background-disabled);
|
|
5918
|
+
border-color:var(--iui-color-background-disabled);
|
|
5919
|
+
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
5920
|
+
background-color:transparent;
|
|
5921
|
+
border-color:transparent;
|
|
5922
|
+
background-color:transparent;
|
|
5923
|
+
border-color:transparent; }
|
|
5924
|
+
.iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
|
|
5925
|
+
background-color:rgba(0, 0, 0, 0.05);
|
|
5926
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
5927
|
+
|
|
5928
|
+
.iui-tile-thumbnail-badge-container{
|
|
5929
|
+
position:absolute;
|
|
5930
|
+
bottom:6px;
|
|
5931
|
+
width:calc(100% - 2 * 12px);
|
|
5932
|
+
height:auto;
|
|
5933
|
+
right:12px;
|
|
5934
|
+
display:flex;
|
|
5935
|
+
justify-content:flex-end;
|
|
5936
|
+
overflow:hidden; }
|
|
5937
|
+
.iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
|
|
5938
|
+
margin-right:4px; }
|
|
5939
|
+
|
|
5940
|
+
.iui-tile-buttons{
|
|
5941
|
+
display:flex;
|
|
5942
|
+
flex-shrink:0;
|
|
5943
|
+
-webkit-user-select:none;
|
|
5944
|
+
-moz-user-select:none;
|
|
5945
|
+
-ms-user-select:none;
|
|
5946
|
+
user-select:none;
|
|
5947
|
+
white-space:nowrap; }
|
|
5948
|
+
.iui-tile-buttons > .iui-button{
|
|
5949
|
+
font-size:14px;
|
|
5950
|
+
flex:1;
|
|
5951
|
+
height:auto;
|
|
5952
|
+
padding:11px 12px;
|
|
5953
|
+
overflow:hidden;
|
|
5954
|
+
white-space:nowrap;
|
|
5955
|
+
text-overflow:ellipsis;
|
|
5956
|
+
text-align:center;
|
|
5957
|
+
margin:0;
|
|
5958
|
+
border:initial;
|
|
5959
|
+
border-radius:0; }
|
|
5960
|
+
.iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
|
|
5961
|
+
border-top:1px solid #DCE0E3;
|
|
5962
|
+
border-color:#DCE0E3;
|
|
5963
|
+
border-top:1px solid var(--iui-color-background-4);
|
|
5964
|
+
border-color:var(--iui-color-background-4); }
|
|
5965
|
+
.iui-tile-buttons > button:not(:last-child){
|
|
5966
|
+
border-right:1px solid #DCE0E3;
|
|
5967
|
+
border-right:1px solid var(--iui-color-background-4); }
|
|
5968
|
+
|
|
5969
|
+
.iui-tile-thumbnail{
|
|
5970
|
+
width:100%;
|
|
5971
|
+
height:154px;
|
|
5972
|
+
flex-shrink:0;
|
|
5973
|
+
overflow:hidden;
|
|
5974
|
+
position:relative;
|
|
5975
|
+
display:flex;
|
|
5976
|
+
align-items:center;
|
|
5977
|
+
justify-content:center;
|
|
5978
|
+
background-color:#f2f2f2;
|
|
5979
|
+
border-bottom:1px solid #DCE0E3;
|
|
5980
|
+
background-color:var(--iui-color-background-1-overlay);
|
|
5981
|
+
border-bottom:1px solid var(--iui-color-background-4); }
|
|
5982
|
+
.iui-tile-thumbnail .iui-thumbnail-icon{
|
|
5983
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
5984
|
+
fill:var(--iui-icons-color);
|
|
5985
|
+
display:inline-flex;
|
|
5986
|
+
width:64px;
|
|
5987
|
+
height:64px; }
|
|
5988
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
|
|
5989
|
+
fill:#008BE1;
|
|
5990
|
+
fill:var(--iui-icons-color-primary); }
|
|
5991
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
|
|
5992
|
+
fill:#53A21A;
|
|
5993
|
+
fill:var(--iui-icons-color-positive); }
|
|
5994
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
|
|
5995
|
+
fill:#F18B12;
|
|
5996
|
+
fill:var(--iui-icons-color-warning); }
|
|
5997
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
|
|
5998
|
+
fill:#D30A0A;
|
|
5999
|
+
fill:var(--iui-icons-color-negative); }
|
|
6000
|
+
|
|
6001
|
+
.iui-tile-thumbnail-picture{
|
|
6002
|
+
width:100%;
|
|
6003
|
+
height:100%;
|
|
6004
|
+
position:absolute;
|
|
6005
|
+
top:0;
|
|
6006
|
+
left:0; }
|
|
6007
|
+
@media (prefers-reduced-motion: no-preference){
|
|
6008
|
+
.iui-tile-thumbnail-picture{
|
|
6009
|
+
transition:transform 0.4s ease; } }
|
|
6010
|
+
div.iui-tile-thumbnail-picture{
|
|
6011
|
+
background-position:center;
|
|
6012
|
+
background-size:cover; }
|
|
6013
|
+
.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
|
|
6014
|
+
z-index:1;
|
|
6015
|
+
cursor:pointer;
|
|
6016
|
+
fill:rgba(255, 255, 255, 0.6);
|
|
6017
|
+
filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
|
|
6018
|
+
fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
|
|
6019
|
+
filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5))); }
|
|
6020
|
+
@media (prefers-reduced-motion: no-preference){
|
|
6021
|
+
.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
|
|
6022
|
+
transition:fill 0.2s ease; } }
|
|
6023
|
+
.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
|
|
6024
|
+
fill:rgba(255, 255, 255, 0.8);
|
|
6025
|
+
fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2)); }
|
|
6026
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
|
|
6027
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
|
|
6028
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
6029
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
6030
|
+
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
|
|
6031
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
|
|
6032
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
|
|
6033
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-5));
|
|
6034
|
+
-webkit-backdrop-filter:blur(5px);
|
|
6035
|
+
backdrop-filter:blur(5px); } }
|
|
6036
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
|
|
6037
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
|
|
6038
|
+
fill:#FFF;
|
|
6039
|
+
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
|
|
6040
|
+
fill:var(--iui-color-foreground-accessory);
|
|
6041
|
+
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5))); }
|
|
6042
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active,
|
|
6043
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
|
|
6044
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
|
|
6045
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
|
|
6046
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
|
|
6047
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
6048
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
6049
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active .iui-button-icon,
|
|
6050
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
|
|
6051
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
|
|
6052
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
|
|
6053
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
|
|
6054
|
+
fill:#FFF;
|
|
6055
|
+
fill:var(--iui-color-foreground-accessory); }
|
|
6056
|
+
|
|
6057
|
+
.iui-tile-content{
|
|
6058
|
+
padding:11px 12px;
|
|
6059
|
+
position:relative;
|
|
6060
|
+
display:flex;
|
|
6061
|
+
flex-direction:column;
|
|
6062
|
+
flex-grow:2;
|
|
6063
|
+
min-width:0; }
|
|
6064
|
+
.iui-tile-content .iui-tile-name{
|
|
6041
6065
|
display:flex;
|
|
6042
6066
|
flex-shrink:0;
|
|
6043
|
-
-
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
|
|
6048
|
-
|
|
6049
|
-
|
|
6050
|
-
|
|
6051
|
-
|
|
6052
|
-
|
|
6053
|
-
|
|
6054
|
-
white-space:nowrap;
|
|
6055
|
-
text-overflow:ellipsis;
|
|
6056
|
-
text-align:center;
|
|
6057
|
-
margin:0;
|
|
6058
|
-
border:initial;
|
|
6059
|
-
border-radius:0; }
|
|
6060
|
-
.iui-tile .iui-tile-buttons > .iui-button, .iui-tile .iui-tile-buttons > .iui-button:hover{
|
|
6061
|
-
border-top:1px solid #DCE0E3;
|
|
6062
|
-
border-top:1px solid var(--iui-color-background-4); }
|
|
6063
|
-
.iui-tile .iui-tile-buttons > button:not(:last-child){
|
|
6064
|
-
border-right:1px solid #DCE0E3;
|
|
6065
|
-
border-right:1px solid var(--iui-color-background-4); }
|
|
6066
|
-
.iui-tile:hover .iui-metadata:not(:last-child), .iui-tile:focus-within .iui-metadata:not(:last-child){
|
|
6067
|
-
width:calc(100% - 32px); }
|
|
6068
|
-
.iui-tile:hover .iui-more-options, .iui-tile:focus-within .iui-more-options{
|
|
6069
|
-
visibility:visible; }
|
|
6070
|
-
.iui-tile:hover .iui-picture, .iui-tile:focus-within .iui-picture{
|
|
6071
|
-
transform:translateZ(0) scale(1.1); }
|
|
6072
|
-
.iui-tile.iui-new .iui-name,
|
|
6073
|
-
.iui-tile.iui-new .iui-description{
|
|
6074
|
-
font-weight:600; }
|
|
6075
|
-
.iui-tile.iui-selected{
|
|
6076
|
-
outline:solid 2px #008BE1;
|
|
6077
|
-
background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
|
|
6078
|
-
outline:solid 2px var(--iui-color-foreground-primary);
|
|
6079
|
-
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)); }
|
|
6080
|
-
.iui-tile.iui-selected .iui-picture{
|
|
6081
|
-
transform:translateZ(0) scale(1.1); }
|
|
6082
|
-
.iui-tile.iui-folder{
|
|
6067
|
+
align-items:center;
|
|
6068
|
+
font-size:16px;
|
|
6069
|
+
-webkit-user-select:all;
|
|
6070
|
+
-moz-user-select:all;
|
|
6071
|
+
user-select:all;
|
|
6072
|
+
margin-bottom:5.5px;
|
|
6073
|
+
color:rgba(0, 0, 0, 0.8);
|
|
6074
|
+
color:var(--iui-text-color); }
|
|
6075
|
+
.iui-tile-content .iui-tile-status-icon{
|
|
6076
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
6077
|
+
fill:var(--iui-icons-color);
|
|
6083
6078
|
display:inline-flex;
|
|
6084
|
-
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
|
|
6095
|
-
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
|
|
6079
|
+
width:16px;
|
|
6080
|
+
height:16px;
|
|
6081
|
+
margin-right:8px;
|
|
6082
|
+
flex-shrink:0; }
|
|
6083
|
+
.iui-tile-content .iui-tile-status-icon.iui-informational{
|
|
6084
|
+
fill:#008BE1;
|
|
6085
|
+
fill:var(--iui-icons-color-primary); }
|
|
6086
|
+
.iui-tile-content .iui-tile-status-icon.iui-positive{
|
|
6087
|
+
fill:#53A21A;
|
|
6088
|
+
fill:var(--iui-icons-color-positive); }
|
|
6089
|
+
.iui-tile-content .iui-tile-status-icon.iui-warning{
|
|
6090
|
+
fill:#F18B12;
|
|
6091
|
+
fill:var(--iui-icons-color-warning); }
|
|
6092
|
+
.iui-tile-content .iui-tile-status-icon.iui-negative{
|
|
6093
|
+
fill:#D30A0A;
|
|
6094
|
+
fill:var(--iui-icons-color-negative); }
|
|
6095
|
+
.iui-tile-content .iui-tile-name-label{
|
|
6096
|
+
overflow:hidden;
|
|
6097
|
+
white-space:nowrap;
|
|
6098
|
+
text-overflow:ellipsis; }
|
|
6099
|
+
.iui-tile-content .iui-tile-description{
|
|
6100
|
+
margin-bottom:11px;
|
|
6101
|
+
font-size:14px;
|
|
6102
|
+
height:100%;
|
|
6103
|
+
max-height:66px;
|
|
6104
|
+
overflow:hidden;
|
|
6105
|
+
white-space:nowrap;
|
|
6106
|
+
text-overflow:ellipsis;
|
|
6107
|
+
color:rgba(0, 0, 0, 0.4);
|
|
6108
|
+
color:var(--iui-text-color-muted); }
|
|
6109
|
+
@supports (-webkit-line-clamp: 1){
|
|
6110
|
+
.iui-tile-content .iui-tile-description{
|
|
6111
|
+
white-space:unset;
|
|
6112
|
+
display:-webkit-box;
|
|
6113
|
+
-webkit-line-clamp:3;
|
|
6114
|
+
-webkit-box-orient:vertical; } }
|
|
6115
|
+
.iui-tile-content .iui-tile-metadata{
|
|
6116
|
+
font-size:12px;
|
|
6117
|
+
flex-shrink:0;
|
|
6118
|
+
overflow:hidden;
|
|
6119
|
+
text-overflow:ellipsis;
|
|
6120
|
+
height:22px;
|
|
6121
|
+
width:100%;
|
|
6122
|
+
display:flex;
|
|
6123
|
+
align-items:center;
|
|
6124
|
+
margin-top:auto;
|
|
6125
|
+
color:rgba(0, 0, 0, 0.4);
|
|
6126
|
+
color:var(--iui-text-color-muted); }
|
|
6127
|
+
.iui-tile-content .iui-tile-metadata > svg,
|
|
6128
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
|
|
6129
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
6130
|
+
fill:var(--iui-icons-color);
|
|
6131
|
+
display:inline-flex;
|
|
6132
|
+
width:16px;
|
|
6133
|
+
height:16px;
|
|
6134
|
+
margin-right:8px;
|
|
6135
|
+
flex-shrink:0; }
|
|
6136
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-informational,
|
|
6137
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
|
|
6138
|
+
fill:#008BE1;
|
|
6139
|
+
fill:var(--iui-icons-color-primary); }
|
|
6140
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-positive,
|
|
6141
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
|
|
6142
|
+
fill:#53A21A;
|
|
6143
|
+
fill:var(--iui-icons-color-positive); }
|
|
6144
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-warning,
|
|
6145
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
|
|
6146
|
+
fill:#F18B12;
|
|
6147
|
+
fill:var(--iui-icons-color-warning); }
|
|
6148
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-negative,
|
|
6149
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
|
|
6150
|
+
fill:#D30A0A;
|
|
6151
|
+
fill:var(--iui-icons-color-negative); }
|
|
6152
|
+
.iui-tile-content .iui-tile-metadata > *{
|
|
6153
|
+
white-space:nowrap;
|
|
6154
|
+
overflow:hidden;
|
|
6155
|
+
text-overflow:ellipsis; }
|
|
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;
|
|
6165
|
+
position:absolute;
|
|
6166
|
+
white-space:nowrap;
|
|
6167
|
+
height:1px;
|
|
6168
|
+
width:1px;
|
|
6169
|
+
padding:0;
|
|
6170
|
+
margin:-1px;
|
|
6171
|
+
border-width:0; }
|
|
6099
6172
|
|
|
6100
6173
|
.iui-time-picker{
|
|
6101
6174
|
margin:0;
|
|
@@ -6601,6 +6674,25 @@ a.iui-tag{
|
|
|
6601
6674
|
vertical-align:baseline;
|
|
6602
6675
|
list-style:none; }
|
|
6603
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
|
+
|
|
6604
6696
|
.iui-tree-node{
|
|
6605
6697
|
display:flex;
|
|
6606
6698
|
cursor:pointer;
|
|
@@ -6657,13 +6749,6 @@ a.iui-tag{
|
|
|
6657
6749
|
font-size:12px;
|
|
6658
6750
|
color:rgba(0, 0, 0, 0.4);
|
|
6659
6751
|
color:var(--iui-text-color-muted); }
|
|
6660
|
-
.iui-tree-node:focus-visible{
|
|
6661
|
-
outline:1px solid var(--iui-color-foreground-primary);
|
|
6662
|
-
outline-offset:-1px; }
|
|
6663
|
-
@supports not selector(*:focus-visible){
|
|
6664
|
-
.iui-tree-node:focus{
|
|
6665
|
-
outline:1px solid var(--iui-color-foreground-primary);
|
|
6666
|
-
outline-offset:-1px; } }
|
|
6667
6752
|
.iui-tree-node:hover{
|
|
6668
6753
|
background-color:rgba(0, 139, 225, 0.1);
|
|
6669
6754
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
@@ -6678,13 +6763,6 @@ a.iui-tag{
|
|
|
6678
6763
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
6679
6764
|
outline:thin solid var(--iui-color-foreground-primary);
|
|
6680
6765
|
outline-offset:-1px; }
|
|
6681
|
-
.iui-tree-node.iui-active:focus-visible{
|
|
6682
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
6683
|
-
outline-offset:-2px; }
|
|
6684
|
-
@supports not selector(*:focus-visible){
|
|
6685
|
-
.iui-tree-node.iui-active:focus{
|
|
6686
|
-
outline:2px solid var(--iui-color-foreground-primary);
|
|
6687
|
-
outline-offset:-2px; } }
|
|
6688
6766
|
.iui-tree-node.iui-disabled{
|
|
6689
6767
|
cursor:not-allowed;
|
|
6690
6768
|
outline:none;
|
|
@@ -7035,3 +7113,51 @@ a.iui-tag{
|
|
|
7035
7113
|
user-select:all;
|
|
7036
7114
|
color:#53A21A;
|
|
7037
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; } }
|