@itwin/itwinui-css 0.44.2 → 0.45.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 +444 -301
- package/css/carousel.css +97 -0
- package/css/popover.css +12 -0
- package/css/table.css +1 -1
- package/css/tile.css +340 -300
- package/package.json +1 -1
- 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 +2 -0
- package/scss/index.scss +2 -0
- package/scss/popover/classes.scss +7 -0
- package/scss/popover/index.scss +3 -0
- package/scss/popover/popover.scss +22 -0
- package/scss/table/table.scss +1 -1
- package/scss/tile/classes.scss +28 -0
- package/scss/tile/tile.scss +230 -235
package/css/all.css
CHANGED
|
@@ -1070,6 +1070,100 @@ html.iui-theme-dark{
|
|
|
1070
1070
|
transition:fill 0.2s ease-out;
|
|
1071
1071
|
fill:currentColor; }
|
|
1072
1072
|
|
|
1073
|
+
.iui-carousel{
|
|
1074
|
+
overflow:hidden;
|
|
1075
|
+
border-radius:3px; }
|
|
1076
|
+
.iui-carousel:focus-visible{
|
|
1077
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1078
|
+
outline-offset:4px; }
|
|
1079
|
+
@supports not selector(*:focus-visible){
|
|
1080
|
+
.iui-carousel:focus{
|
|
1081
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1082
|
+
outline-offset:4px; } }
|
|
1083
|
+
|
|
1084
|
+
.iui-carousel-slider{
|
|
1085
|
+
display:flex;
|
|
1086
|
+
list-style:none;
|
|
1087
|
+
margin:0;
|
|
1088
|
+
padding:0; }
|
|
1089
|
+
@media (prefers-reduced-motion: no-preference){
|
|
1090
|
+
.iui-carousel-slider{
|
|
1091
|
+
transition:transform 0.8s ease-in-out; } }
|
|
1092
|
+
.iui-carousel-slider-item{
|
|
1093
|
+
width:100%;
|
|
1094
|
+
flex-shrink:0;
|
|
1095
|
+
box-sizing:border-box; }
|
|
1096
|
+
|
|
1097
|
+
.iui-carousel-navigation{
|
|
1098
|
+
display:flex;
|
|
1099
|
+
align-items:center;
|
|
1100
|
+
height:33px;
|
|
1101
|
+
box-sizing:border-box;
|
|
1102
|
+
border-top:2px solid #DCE0E3;
|
|
1103
|
+
border-top:2px solid var(--iui-color-background-4); }
|
|
1104
|
+
.iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
|
|
1105
|
+
display:flex;
|
|
1106
|
+
align-items:center;
|
|
1107
|
+
flex:1; }
|
|
1108
|
+
.iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
|
|
1109
|
+
outline-offset:-1px;
|
|
1110
|
+
outline:1px solid #008BE1;
|
|
1111
|
+
outline:1px solid var(--iui-color-foreground-primary); }
|
|
1112
|
+
.iui-carousel-navigation-dots{
|
|
1113
|
+
margin:0;
|
|
1114
|
+
padding:0;
|
|
1115
|
+
border:none;
|
|
1116
|
+
vertical-align:baseline;
|
|
1117
|
+
border-radius:3px;
|
|
1118
|
+
white-space:nowrap;
|
|
1119
|
+
overflow:hidden;
|
|
1120
|
+
justify-content:center;
|
|
1121
|
+
list-style:none; }
|
|
1122
|
+
.iui-carousel-navigation-dots:focus-visible{
|
|
1123
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1124
|
+
outline-offset:-1px; }
|
|
1125
|
+
@supports not selector(*:focus-visible){
|
|
1126
|
+
.iui-carousel-navigation-dots:focus{
|
|
1127
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
1128
|
+
outline-offset:-1px; } }
|
|
1129
|
+
.iui-carousel-navigation-dot{
|
|
1130
|
+
padding:0 8px;
|
|
1131
|
+
height:27px;
|
|
1132
|
+
gap:4px;
|
|
1133
|
+
background-color:transparent;
|
|
1134
|
+
border:none;
|
|
1135
|
+
cursor:pointer; }
|
|
1136
|
+
.iui-carousel-navigation-dot:hover::after{
|
|
1137
|
+
background-color:rgba(0, 0, 0, 0.6);
|
|
1138
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
|
|
1139
|
+
.iui-carousel-navigation-dot.iui-invisible{
|
|
1140
|
+
display:none; }
|
|
1141
|
+
.iui-carousel-navigation-dot::after{
|
|
1142
|
+
content:'';
|
|
1143
|
+
display:block;
|
|
1144
|
+
width:12px;
|
|
1145
|
+
height:12px;
|
|
1146
|
+
border-radius:50%;
|
|
1147
|
+
transition:background-color 0.2s ease;
|
|
1148
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
1149
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
1150
|
+
@media (prefers-reduced-motion: no-preference){
|
|
1151
|
+
.iui-carousel-navigation-dot::after{
|
|
1152
|
+
transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
|
|
1153
|
+
.iui-carousel-navigation-dot.iui-first::after{
|
|
1154
|
+
transform:scale(0.5); }
|
|
1155
|
+
.iui-carousel-navigation-dot.iui-second::after{
|
|
1156
|
+
transform:scale(0.75); }
|
|
1157
|
+
.iui-carousel-navigation-dot.iui-invisible::after{
|
|
1158
|
+
transform:scale(0);
|
|
1159
|
+
background-color:rgba(0, 0, 0, 0);
|
|
1160
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
|
|
1161
|
+
.iui-carousel-navigation-dot.iui-active::after{
|
|
1162
|
+
background-color:#008BE1;
|
|
1163
|
+
background-color:var(--iui-color-foreground-primary); }
|
|
1164
|
+
.iui-carousel-navigation-right{
|
|
1165
|
+
justify-content:flex-end; }
|
|
1166
|
+
|
|
1073
1167
|
.iui-code{
|
|
1074
1168
|
margin:0;
|
|
1075
1169
|
padding:0;
|
|
@@ -4123,6 +4217,15 @@ html.iui-theme-dark{
|
|
|
4123
4217
|
box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
|
|
4124
4218
|
box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } } }
|
|
4125
4219
|
|
|
4220
|
+
.iui-popover{ }
|
|
4221
|
+
.iui-popover[data-reference-hidden]{
|
|
4222
|
+
visibility:hidden;
|
|
4223
|
+
pointer-events:none; }
|
|
4224
|
+
.iui-popover.tippy-box{
|
|
4225
|
+
all:revert; }
|
|
4226
|
+
.iui-popover .tippy-content{
|
|
4227
|
+
all:revert; }
|
|
4228
|
+
|
|
4126
4229
|
.iui-progress-indicator-linear{
|
|
4127
4230
|
margin:0;
|
|
4128
4231
|
padding:0;
|
|
@@ -4866,7 +4969,7 @@ html.iui-theme-dark{
|
|
|
4866
4969
|
scroll-snap-type:y mandatory; }
|
|
4867
4970
|
.iui-table-body.iui-scroll-snapping .iui-row{
|
|
4868
4971
|
scroll-snap-align:start none; }
|
|
4869
|
-
.iui-table-body.iui-zebra-striping
|
|
4972
|
+
.iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected){
|
|
4870
4973
|
background-color:rgba(0, 0, 0, 0.02);
|
|
4871
4974
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
|
|
4872
4975
|
.iui-table-body .iui-row{
|
|
@@ -5776,326 +5879,366 @@ a.iui-tag{
|
|
|
5776
5879
|
color:rgba(0, 0, 0, 0.8);
|
|
5777
5880
|
background-color:var(--iui-color-background-1);
|
|
5778
5881
|
color:var(--iui-text-color); }
|
|
5779
|
-
.iui-tile .iui-
|
|
5780
|
-
width:100%;
|
|
5781
|
-
height:154px;
|
|
5782
|
-
flex-shrink:0;
|
|
5783
|
-
overflow:hidden;
|
|
5784
|
-
position:relative;
|
|
5785
|
-
display:flex;
|
|
5786
|
-
align-items:center;
|
|
5787
|
-
justify-content:center;
|
|
5788
|
-
background-color:#f2f2f2;
|
|
5789
|
-
border-bottom:1px solid #DCE0E3;
|
|
5790
|
-
background-color:var(--iui-color-background-1-overlay);
|
|
5791
|
-
border-bottom:1px solid var(--iui-color-background-4); }
|
|
5792
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator,
|
|
5793
|
-
.iui-tile .iui-thumbnail > .iui-quick-action{
|
|
5794
|
-
border-color:transparent;
|
|
5795
|
-
background-color:transparent;
|
|
5796
|
-
padding:0 8px;
|
|
5797
|
-
height:38px;
|
|
5798
|
-
gap:8px;
|
|
5799
|
-
padding:0 2px;
|
|
5800
|
-
height:27px;
|
|
5801
|
-
gap:4px;
|
|
5802
|
-
position:absolute;
|
|
5803
|
-
border-radius:50%;
|
|
5804
|
-
top:6px; }
|
|
5805
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator > .iui-button-icon:only-child,
|
|
5806
|
-
.iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
|
|
5807
|
-
margin-left:3px;
|
|
5808
|
-
margin-right:3px; }
|
|
5809
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator:hover,
|
|
5810
|
-
.iui-tile .iui-thumbnail > .iui-quick-action:hover{
|
|
5811
|
-
background-color:rgba(0, 0, 0, 0.1);
|
|
5812
|
-
border-color:transparent;
|
|
5813
|
-
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
|
|
5814
|
-
border-color:transparent; }
|
|
5815
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator.iui-active,
|
|
5816
|
-
.iui-tile .iui-thumbnail > .iui-quick-action.iui-active{
|
|
5817
|
-
background-color:rgba(0, 139, 225, 0.1);
|
|
5818
|
-
color:#008BE1;
|
|
5819
|
-
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
5820
|
-
color:var(--iui-color-foreground-primary);
|
|
5821
|
-
border-color:transparent; }
|
|
5822
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator:disabled,
|
|
5823
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled],
|
|
5824
|
-
.iui-tile .iui-thumbnail > .iui-quick-action:disabled{
|
|
5825
|
-
cursor:not-allowed;
|
|
5826
|
-
background:#EEF0F3;
|
|
5827
|
-
border-color:#EEF0F3;
|
|
5828
|
-
color:rgba(0, 0, 0, 0.2);
|
|
5829
|
-
background:var(--iui-color-background-disabled);
|
|
5830
|
-
border-color:var(--iui-color-background-disabled);
|
|
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;
|
|
5976
|
-
height:100%;
|
|
5977
|
-
max-height:66px;
|
|
5978
|
-
overflow:hidden;
|
|
5979
|
-
white-space:nowrap;
|
|
5980
|
-
text-overflow:ellipsis;
|
|
5981
|
-
color:rgba(0, 0, 0, 0.4);
|
|
5982
|
-
color:var(--iui-text-color-muted); }
|
|
5983
|
-
@supports (-webkit-line-clamp: 1){
|
|
5984
|
-
.iui-tile > .iui-content > .iui-description{
|
|
5985
|
-
white-space:unset;
|
|
5986
|
-
display:-webkit-box;
|
|
5987
|
-
-webkit-line-clamp:3;
|
|
5988
|
-
-webkit-box-orient:vertical; } }
|
|
5989
|
-
.iui-tile > .iui-content > .iui-metadata{
|
|
5990
|
-
font-size:12px;
|
|
5991
|
-
flex-shrink:0;
|
|
5992
|
-
overflow:hidden;
|
|
5993
|
-
text-overflow:ellipsis;
|
|
5994
|
-
height:22px;
|
|
5995
|
-
width:100%;
|
|
5996
|
-
display:flex;
|
|
5997
|
-
align-items:center;
|
|
5998
|
-
margin-top:auto;
|
|
5999
|
-
color:rgba(0, 0, 0, 0.4);
|
|
6000
|
-
color:var(--iui-text-color-muted); }
|
|
6001
|
-
.iui-tile > .iui-content > .iui-metadata > svg,
|
|
6002
|
-
.iui-tile > .iui-content > .iui-metadata .iui-metadata-icon{
|
|
6003
|
-
fill:rgba(0, 0, 0, 0.4);
|
|
6004
|
-
fill:var(--iui-icons-color);
|
|
6005
|
-
display:inline-flex;
|
|
6006
|
-
width:16px;
|
|
6007
|
-
height:16px;
|
|
6008
|
-
margin-right:8px;
|
|
6009
|
-
flex-shrink:0; }
|
|
6010
|
-
.iui-tile > .iui-content > .iui-metadata > svg.iui-informational,
|
|
6011
|
-
.iui-tile > .iui-content > .iui-metadata .iui-metadata-icon.iui-informational{
|
|
6012
|
-
fill:#008BE1;
|
|
6013
|
-
fill:var(--iui-icons-color-primary); }
|
|
6014
|
-
.iui-tile > .iui-content > .iui-metadata > svg.iui-positive,
|
|
6015
|
-
.iui-tile > .iui-content > .iui-metadata .iui-metadata-icon.iui-positive{
|
|
6016
|
-
fill:#53A21A;
|
|
6017
|
-
fill:var(--iui-icons-color-positive); }
|
|
6018
|
-
.iui-tile > .iui-content > .iui-metadata > svg.iui-warning,
|
|
6019
|
-
.iui-tile > .iui-content > .iui-metadata .iui-metadata-icon.iui-warning{
|
|
6020
|
-
fill:#F18B12;
|
|
6021
|
-
fill:var(--iui-icons-color-warning); }
|
|
6022
|
-
.iui-tile > .iui-content > .iui-metadata > svg.iui-negative,
|
|
6023
|
-
.iui-tile > .iui-content > .iui-metadata .iui-metadata-icon.iui-negative{
|
|
6024
|
-
fill:#D30A0A;
|
|
6025
|
-
fill:var(--iui-icons-color-negative); }
|
|
6026
|
-
.iui-tile > .iui-content > .iui-metadata > *{
|
|
6027
|
-
white-space:nowrap;
|
|
6028
|
-
overflow:hidden;
|
|
6029
|
-
text-overflow:ellipsis; }
|
|
6030
|
-
.iui-tile > .iui-content > .iui-more-options{
|
|
6031
|
-
padding:0 2px;
|
|
6032
|
-
height:27px;
|
|
6033
|
-
gap:4px;
|
|
6034
|
-
position:absolute;
|
|
6035
|
-
bottom:5.5px;
|
|
6036
|
-
right:8px;
|
|
6037
|
-
visibility:hidden; }
|
|
6038
|
-
.iui-tile > .iui-content > .iui-more-options.iui-visible{
|
|
6039
|
-
visibility:visible; }
|
|
6040
|
-
.iui-tile .iui-tile-buttons{
|
|
6041
|
-
display:flex;
|
|
6042
|
-
flex-shrink:0;
|
|
6043
|
-
-webkit-user-select:none;
|
|
6044
|
-
-moz-user-select:none;
|
|
6045
|
-
-ms-user-select:none;
|
|
6046
|
-
user-select:none;
|
|
6047
|
-
white-space:nowrap; }
|
|
6048
|
-
.iui-tile .iui-tile-buttons > .iui-button{
|
|
6049
|
-
font-size:14px;
|
|
6050
|
-
flex:1;
|
|
6051
|
-
height:auto;
|
|
6052
|
-
padding:11px 12px;
|
|
6053
|
-
overflow:hidden;
|
|
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){
|
|
5882
|
+
.iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
|
|
6067
5883
|
width:calc(100% - 32px); }
|
|
6068
|
-
.iui-tile:hover .iui-more-options, .iui-tile:focus-within .iui-more-options{
|
|
5884
|
+
.iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
|
|
6069
5885
|
visibility:visible; }
|
|
6070
|
-
.iui-tile:hover .iui-picture, .iui-tile:focus-within .iui-picture{
|
|
5886
|
+
.iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
|
|
6071
5887
|
transform:translateZ(0) scale(1.1); }
|
|
6072
|
-
.iui-tile.iui-new .iui-name,
|
|
6073
|
-
.iui-tile.iui-new .iui-description{
|
|
5888
|
+
.iui-tile.iui-new .iui-tile-name,
|
|
5889
|
+
.iui-tile.iui-new .iui-tile-description{
|
|
6074
5890
|
font-weight:600; }
|
|
6075
5891
|
.iui-tile.iui-selected{
|
|
6076
5892
|
outline:solid 2px #008BE1;
|
|
6077
5893
|
background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
|
|
6078
5894
|
outline:solid 2px var(--iui-color-foreground-primary);
|
|
6079
5895
|
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{
|
|
5896
|
+
.iui-tile.iui-selected .iui-tile-thumbnail-picture{
|
|
6081
5897
|
transform:translateZ(0) scale(1.1); }
|
|
6082
5898
|
.iui-tile.iui-folder{
|
|
6083
5899
|
display:inline-flex;
|
|
6084
5900
|
flex-direction:row;
|
|
6085
5901
|
flex-wrap:nowrap; }
|
|
6086
|
-
.iui-tile.iui-folder
|
|
5902
|
+
.iui-tile.iui-folder .iui-tile-thumbnail{
|
|
6087
5903
|
height:110px;
|
|
6088
5904
|
flex:1;
|
|
6089
5905
|
border-bottom:none;
|
|
6090
5906
|
border-right:1px solid #DCE0E3;
|
|
6091
5907
|
border-right:1px solid var(--iui-color-background-4); }
|
|
6092
|
-
.iui-tile.iui-folder
|
|
5908
|
+
.iui-tile.iui-folder .iui-tile-content{
|
|
6093
5909
|
flex:2; }
|
|
6094
|
-
|
|
6095
|
-
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
|
|
5910
|
+
.iui-tile.iui-folder .iui-tile-description{
|
|
5911
|
+
height:100%;
|
|
5912
|
+
max-height:44px;
|
|
5913
|
+
margin-bottom:0;
|
|
5914
|
+
-webkit-line-clamp:2; }
|
|
5915
|
+
|
|
5916
|
+
.iui-tile-thumbnail-type-indicator{
|
|
5917
|
+
border-color:transparent;
|
|
5918
|
+
background-color:transparent;
|
|
5919
|
+
padding:0 8px;
|
|
5920
|
+
height:38px;
|
|
5921
|
+
gap:8px;
|
|
5922
|
+
padding:0 2px;
|
|
5923
|
+
height:27px;
|
|
5924
|
+
gap:4px;
|
|
5925
|
+
position:absolute;
|
|
5926
|
+
border-radius:50%;
|
|
5927
|
+
top:6px;
|
|
5928
|
+
left:8px; }
|
|
5929
|
+
.iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
|
|
5930
|
+
margin-left:3px;
|
|
5931
|
+
margin-right:3px; }
|
|
5932
|
+
.iui-tile-thumbnail-type-indicator:hover{
|
|
5933
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
5934
|
+
border-color:transparent;
|
|
5935
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
|
|
5936
|
+
border-color:transparent; }
|
|
5937
|
+
.iui-tile-thumbnail-type-indicator.iui-active{
|
|
5938
|
+
background-color:rgba(0, 139, 225, 0.1);
|
|
5939
|
+
color:#008BE1;
|
|
5940
|
+
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
5941
|
+
color:var(--iui-color-foreground-primary);
|
|
5942
|
+
border-color:transparent; }
|
|
5943
|
+
.iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
|
|
5944
|
+
cursor:not-allowed;
|
|
5945
|
+
background:#EEF0F3;
|
|
5946
|
+
border-color:#EEF0F3;
|
|
5947
|
+
color:rgba(0, 0, 0, 0.2);
|
|
5948
|
+
background:var(--iui-color-background-disabled);
|
|
5949
|
+
border-color:var(--iui-color-background-disabled);
|
|
5950
|
+
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
5951
|
+
background-color:transparent;
|
|
5952
|
+
border-color:transparent;
|
|
5953
|
+
background-color:transparent;
|
|
5954
|
+
border-color:transparent; }
|
|
5955
|
+
.iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
|
|
5956
|
+
background-color:rgba(0, 0, 0, 0.05);
|
|
5957
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
5958
|
+
|
|
5959
|
+
.iui-tile-thumbnail-quick-action{
|
|
5960
|
+
border-color:transparent;
|
|
5961
|
+
background-color:transparent;
|
|
5962
|
+
padding:0 8px;
|
|
5963
|
+
height:38px;
|
|
5964
|
+
gap:8px;
|
|
5965
|
+
padding:0 2px;
|
|
5966
|
+
height:27px;
|
|
5967
|
+
gap:4px;
|
|
5968
|
+
position:absolute;
|
|
5969
|
+
border-radius:50%;
|
|
5970
|
+
top:6px;
|
|
5971
|
+
right:8px; }
|
|
5972
|
+
.iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
|
|
5973
|
+
margin-left:3px;
|
|
5974
|
+
margin-right:3px; }
|
|
5975
|
+
.iui-tile-thumbnail-quick-action:hover{
|
|
5976
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
5977
|
+
border-color:transparent;
|
|
5978
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
|
|
5979
|
+
border-color:transparent; }
|
|
5980
|
+
.iui-tile-thumbnail-quick-action.iui-active{
|
|
5981
|
+
background-color:rgba(0, 139, 225, 0.1);
|
|
5982
|
+
color:#008BE1;
|
|
5983
|
+
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
5984
|
+
color:var(--iui-color-foreground-primary);
|
|
5985
|
+
border-color:transparent; }
|
|
5986
|
+
.iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
|
|
5987
|
+
cursor:not-allowed;
|
|
5988
|
+
background:#EEF0F3;
|
|
5989
|
+
border-color:#EEF0F3;
|
|
5990
|
+
color:rgba(0, 0, 0, 0.2);
|
|
5991
|
+
background:var(--iui-color-background-disabled);
|
|
5992
|
+
border-color:var(--iui-color-background-disabled);
|
|
5993
|
+
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
5994
|
+
background-color:transparent;
|
|
5995
|
+
border-color:transparent;
|
|
5996
|
+
background-color:transparent;
|
|
5997
|
+
border-color:transparent; }
|
|
5998
|
+
.iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
|
|
5999
|
+
background-color:rgba(0, 0, 0, 0.05);
|
|
6000
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
6001
|
+
|
|
6002
|
+
.iui-tile-thumbnail-badge-container{
|
|
6003
|
+
position:absolute;
|
|
6004
|
+
bottom:6px;
|
|
6005
|
+
width:calc(100% - 2 * 12px);
|
|
6006
|
+
height:auto;
|
|
6007
|
+
right:12px;
|
|
6008
|
+
display:flex;
|
|
6009
|
+
justify-content:flex-end;
|
|
6010
|
+
overflow:hidden; }
|
|
6011
|
+
.iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
|
|
6012
|
+
margin-right:4px; }
|
|
6013
|
+
|
|
6014
|
+
.iui-tile-buttons{
|
|
6015
|
+
display:flex;
|
|
6016
|
+
flex-shrink:0;
|
|
6017
|
+
-webkit-user-select:none;
|
|
6018
|
+
-moz-user-select:none;
|
|
6019
|
+
-ms-user-select:none;
|
|
6020
|
+
user-select:none;
|
|
6021
|
+
white-space:nowrap; }
|
|
6022
|
+
.iui-tile-buttons > .iui-button{
|
|
6023
|
+
font-size:14px;
|
|
6024
|
+
flex:1;
|
|
6025
|
+
height:auto;
|
|
6026
|
+
padding:11px 12px;
|
|
6027
|
+
overflow:hidden;
|
|
6028
|
+
white-space:nowrap;
|
|
6029
|
+
text-overflow:ellipsis;
|
|
6030
|
+
text-align:center;
|
|
6031
|
+
margin:0;
|
|
6032
|
+
border:initial;
|
|
6033
|
+
border-radius:0; }
|
|
6034
|
+
.iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
|
|
6035
|
+
border-top:1px solid #DCE0E3;
|
|
6036
|
+
border-color:#DCE0E3;
|
|
6037
|
+
border-top:1px solid var(--iui-color-background-4);
|
|
6038
|
+
border-color:var(--iui-color-background-4); }
|
|
6039
|
+
.iui-tile-buttons > button:not(:last-child){
|
|
6040
|
+
border-right:1px solid #DCE0E3;
|
|
6041
|
+
border-right:1px solid var(--iui-color-background-4); }
|
|
6042
|
+
|
|
6043
|
+
.iui-tile-thumbnail{
|
|
6044
|
+
width:100%;
|
|
6045
|
+
height:154px;
|
|
6046
|
+
flex-shrink:0;
|
|
6047
|
+
overflow:hidden;
|
|
6048
|
+
position:relative;
|
|
6049
|
+
display:flex;
|
|
6050
|
+
align-items:center;
|
|
6051
|
+
justify-content:center;
|
|
6052
|
+
background-color:#f2f2f2;
|
|
6053
|
+
border-bottom:1px solid #DCE0E3;
|
|
6054
|
+
background-color:var(--iui-color-background-1-overlay);
|
|
6055
|
+
border-bottom:1px solid var(--iui-color-background-4); }
|
|
6056
|
+
.iui-tile-thumbnail .iui-thumbnail-icon{
|
|
6057
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
6058
|
+
fill:var(--iui-icons-color);
|
|
6059
|
+
display:inline-flex;
|
|
6060
|
+
width:64px;
|
|
6061
|
+
height:64px; }
|
|
6062
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
|
|
6063
|
+
fill:#008BE1;
|
|
6064
|
+
fill:var(--iui-icons-color-primary); }
|
|
6065
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
|
|
6066
|
+
fill:#53A21A;
|
|
6067
|
+
fill:var(--iui-icons-color-positive); }
|
|
6068
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
|
|
6069
|
+
fill:#F18B12;
|
|
6070
|
+
fill:var(--iui-icons-color-warning); }
|
|
6071
|
+
.iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
|
|
6072
|
+
fill:#D30A0A;
|
|
6073
|
+
fill:var(--iui-icons-color-negative); }
|
|
6074
|
+
|
|
6075
|
+
.iui-tile-thumbnail-picture{
|
|
6076
|
+
width:100%;
|
|
6077
|
+
height:100%;
|
|
6078
|
+
position:absolute;
|
|
6079
|
+
top:0;
|
|
6080
|
+
left:0; }
|
|
6081
|
+
@media (prefers-reduced-motion: no-preference){
|
|
6082
|
+
.iui-tile-thumbnail-picture{
|
|
6083
|
+
transition:transform 0.4s ease; } }
|
|
6084
|
+
div.iui-tile-thumbnail-picture{
|
|
6085
|
+
background-position:center;
|
|
6086
|
+
background-size:cover; }
|
|
6087
|
+
.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
|
|
6088
|
+
z-index:1;
|
|
6089
|
+
cursor:pointer;
|
|
6090
|
+
fill:rgba(255, 255, 255, 0.6);
|
|
6091
|
+
filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
|
|
6092
|
+
fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
|
|
6093
|
+
filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5))); }
|
|
6094
|
+
@media (prefers-reduced-motion: no-preference){
|
|
6095
|
+
.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
|
|
6096
|
+
transition:fill 0.2s ease; } }
|
|
6097
|
+
.iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
|
|
6098
|
+
fill:rgba(255, 255, 255, 0.8);
|
|
6099
|
+
fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2)); }
|
|
6100
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
|
|
6101
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
|
|
6102
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
6103
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
6104
|
+
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
|
|
6105
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
|
|
6106
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
|
|
6107
|
+
background-color:rgba(0, 0, 0, 0.2);
|
|
6108
|
+
-webkit-backdrop-filter:blur(5px);
|
|
6109
|
+
backdrop-filter:blur(5px);
|
|
6110
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-5));
|
|
6111
|
+
backdrop-filter:blur(5px); } }
|
|
6112
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
|
|
6113
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
|
|
6114
|
+
fill:#FFF;
|
|
6115
|
+
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
|
|
6116
|
+
fill:var(--iui-color-foreground-accessory);
|
|
6117
|
+
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5))); }
|
|
6118
|
+
.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,
|
|
6119
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
|
|
6120
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
|
|
6121
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
|
|
6122
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
|
|
6123
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
6124
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
6125
|
+
.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,
|
|
6126
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
|
|
6127
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
|
|
6128
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
|
|
6129
|
+
.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
|
|
6130
|
+
fill:#FFF;
|
|
6131
|
+
fill:var(--iui-color-foreground-accessory); }
|
|
6132
|
+
|
|
6133
|
+
.iui-tile-content{
|
|
6134
|
+
padding:11px 12px;
|
|
6135
|
+
position:relative;
|
|
6136
|
+
display:flex;
|
|
6137
|
+
flex-direction:column;
|
|
6138
|
+
flex-grow:2;
|
|
6139
|
+
min-width:0; }
|
|
6140
|
+
.iui-tile-content .iui-tile-name{
|
|
6141
|
+
display:flex;
|
|
6142
|
+
flex-shrink:0;
|
|
6143
|
+
align-items:center;
|
|
6144
|
+
font-size:16px;
|
|
6145
|
+
-webkit-user-select:all;
|
|
6146
|
+
-moz-user-select:all;
|
|
6147
|
+
user-select:all;
|
|
6148
|
+
margin-bottom:5.5px;
|
|
6149
|
+
color:rgba(0, 0, 0, 0.8);
|
|
6150
|
+
color:var(--iui-text-color); }
|
|
6151
|
+
.iui-tile-content .iui-tile-status-icon{
|
|
6152
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
6153
|
+
fill:var(--iui-icons-color);
|
|
6154
|
+
display:inline-flex;
|
|
6155
|
+
width:16px;
|
|
6156
|
+
height:16px;
|
|
6157
|
+
margin-right:8px;
|
|
6158
|
+
flex-shrink:0; }
|
|
6159
|
+
.iui-tile-content .iui-tile-status-icon.iui-informational{
|
|
6160
|
+
fill:#008BE1;
|
|
6161
|
+
fill:var(--iui-icons-color-primary); }
|
|
6162
|
+
.iui-tile-content .iui-tile-status-icon.iui-positive{
|
|
6163
|
+
fill:#53A21A;
|
|
6164
|
+
fill:var(--iui-icons-color-positive); }
|
|
6165
|
+
.iui-tile-content .iui-tile-status-icon.iui-warning{
|
|
6166
|
+
fill:#F18B12;
|
|
6167
|
+
fill:var(--iui-icons-color-warning); }
|
|
6168
|
+
.iui-tile-content .iui-tile-status-icon.iui-negative{
|
|
6169
|
+
fill:#D30A0A;
|
|
6170
|
+
fill:var(--iui-icons-color-negative); }
|
|
6171
|
+
.iui-tile-content .iui-tile-name-label{
|
|
6172
|
+
overflow:hidden;
|
|
6173
|
+
white-space:nowrap;
|
|
6174
|
+
text-overflow:ellipsis; }
|
|
6175
|
+
.iui-tile-content .iui-tile-description{
|
|
6176
|
+
margin-bottom:11px;
|
|
6177
|
+
font-size:14px;
|
|
6178
|
+
height:100%;
|
|
6179
|
+
max-height:66px;
|
|
6180
|
+
overflow:hidden;
|
|
6181
|
+
white-space:nowrap;
|
|
6182
|
+
text-overflow:ellipsis;
|
|
6183
|
+
color:rgba(0, 0, 0, 0.4);
|
|
6184
|
+
color:var(--iui-text-color-muted); }
|
|
6185
|
+
@supports (-webkit-line-clamp: 1){
|
|
6186
|
+
.iui-tile-content .iui-tile-description{
|
|
6187
|
+
white-space:unset;
|
|
6188
|
+
display:-webkit-box;
|
|
6189
|
+
-webkit-line-clamp:3;
|
|
6190
|
+
-webkit-box-orient:vertical; } }
|
|
6191
|
+
.iui-tile-content .iui-tile-metadata{
|
|
6192
|
+
font-size:12px;
|
|
6193
|
+
flex-shrink:0;
|
|
6194
|
+
overflow:hidden;
|
|
6195
|
+
text-overflow:ellipsis;
|
|
6196
|
+
height:22px;
|
|
6197
|
+
width:100%;
|
|
6198
|
+
display:flex;
|
|
6199
|
+
align-items:center;
|
|
6200
|
+
margin-top:auto;
|
|
6201
|
+
color:rgba(0, 0, 0, 0.4);
|
|
6202
|
+
color:var(--iui-text-color-muted); }
|
|
6203
|
+
.iui-tile-content .iui-tile-metadata > svg,
|
|
6204
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
|
|
6205
|
+
fill:rgba(0, 0, 0, 0.4);
|
|
6206
|
+
fill:var(--iui-icons-color);
|
|
6207
|
+
display:inline-flex;
|
|
6208
|
+
width:16px;
|
|
6209
|
+
height:16px;
|
|
6210
|
+
margin-right:8px;
|
|
6211
|
+
flex-shrink:0; }
|
|
6212
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-informational,
|
|
6213
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
|
|
6214
|
+
fill:#008BE1;
|
|
6215
|
+
fill:var(--iui-icons-color-primary); }
|
|
6216
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-positive,
|
|
6217
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
|
|
6218
|
+
fill:#53A21A;
|
|
6219
|
+
fill:var(--iui-icons-color-positive); }
|
|
6220
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-warning,
|
|
6221
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
|
|
6222
|
+
fill:#F18B12;
|
|
6223
|
+
fill:var(--iui-icons-color-warning); }
|
|
6224
|
+
.iui-tile-content .iui-tile-metadata > svg.iui-negative,
|
|
6225
|
+
.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
|
|
6226
|
+
fill:#D30A0A;
|
|
6227
|
+
fill:var(--iui-icons-color-negative); }
|
|
6228
|
+
.iui-tile-content .iui-tile-metadata > *{
|
|
6229
|
+
white-space:nowrap;
|
|
6230
|
+
overflow:hidden;
|
|
6231
|
+
text-overflow:ellipsis; }
|
|
6232
|
+
.iui-tile-content .iui-tile-more-options{
|
|
6233
|
+
padding:0 2px;
|
|
6234
|
+
height:27px;
|
|
6235
|
+
gap:4px;
|
|
6236
|
+
position:absolute;
|
|
6237
|
+
bottom:5.5px;
|
|
6238
|
+
right:8px;
|
|
6239
|
+
visibility:hidden; }
|
|
6240
|
+
.iui-tile-content .iui-tile-more-options.iui-visible{
|
|
6241
|
+
visibility:visible; }
|
|
6099
6242
|
|
|
6100
6243
|
.iui-time-picker{
|
|
6101
6244
|
margin:0;
|