@itwin/itwinui-css 0.50.1 → 0.51.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.
Files changed (60) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7242 -5607
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +54 -43
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +204 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/carousel/carousel.scss +4 -1
  47. package/scss/code/codeblock.scss +1 -1
  48. package/scss/inputs/checkbox.scss +1 -0
  49. package/scss/inputs/labeled-inputs.scss +8 -8
  50. package/scss/inputs/radio.scss +0 -4
  51. package/scss/location-marker/data-rich.scss +1 -1
  52. package/scss/location-marker/me.scss +4 -4
  53. package/scss/popover/popover.scss +1 -2
  54. package/scss/progress-indicator/linear.scss +2 -10
  55. package/scss/style/global.scss +1 -5
  56. package/scss/style/mixins.scss +9 -0
  57. package/scss/table/table.scss +23 -14
  58. package/scss/toast-notification/categories.scss +1 -5
  59. package/scss/toggle-switch/classes.scss +4 -0
  60. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/tile.css CHANGED
@@ -16,63 +16,80 @@
16
16
  background-color:#FFF;
17
17
  color:rgba(0, 0, 0, 0.8);
18
18
  background-color:var(--iui-color-background-1);
19
- color:var(--iui-text-color); }
20
- .iui-tile:focus-visible{
19
+ color:var(--iui-text-color);
20
+ }
21
+ .iui-tile:focus-visible{
22
+ outline:2px solid var(--iui-color-foreground-primary);
23
+ outline-offset:2px;
24
+ }
25
+ @supports not selector(*:focus-visible){
26
+ .iui-tile:focus{
21
27
  outline:2px solid var(--iui-color-foreground-primary);
22
- outline-offset:2px; }
23
- @supports not selector(*:focus-visible){
24
- .iui-tile:focus{
25
- outline:2px solid var(--iui-color-foreground-primary);
26
- outline-offset:2px; } }
27
- .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
28
- -webkit-clip-path:revert;
29
- clip-path:revert;
30
- overflow:visible;
31
- position:static;
32
- white-space:normal;
33
- height:auto;
34
- width:auto;
35
- padding:0;
36
- margin:0;
37
- position:absolute; }
38
- .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
39
- width:calc(100% - 32px); }
40
- .iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
41
- transform:translateZ(0) scale(1.1); }
42
- .iui-tile.iui-new .iui-tile-name,
43
- .iui-tile.iui-new .iui-tile-description{
44
- font-weight:600; }
45
- .iui-tile.iui-selected{
46
- outline:solid 2px #008BE1;
47
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
48
- outline:solid 2px var(--iui-color-foreground-primary);
49
- 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)); }
50
- .iui-tile.iui-selected:focus-visible{
51
- outline:4px solid var(--iui-color-foreground-primary);
52
- outline-offset:0; }
53
- @supports not selector(*:focus-visible){
54
- .iui-tile.iui-selected:focus{
55
- outline:4px solid var(--iui-color-foreground-primary);
56
- outline-offset:0; } }
57
- .iui-tile.iui-selected .iui-tile-thumbnail-picture{
58
- transform:translateZ(0) scale(1.1); }
59
- .iui-tile.iui-folder{
60
- display:inline-flex;
61
- flex-direction:row;
62
- flex-wrap:nowrap; }
63
- .iui-tile.iui-folder .iui-tile-thumbnail{
64
- height:110px;
65
- flex:1;
66
- border-bottom:none;
67
- border-right:1px solid #DCE0E3;
68
- border-right:1px solid var(--iui-color-background-4); }
69
- .iui-tile.iui-folder .iui-tile-content{
70
- flex:2; }
71
- .iui-tile.iui-folder .iui-tile-description{
72
- height:100%;
73
- max-height:44px;
74
- margin-bottom:0;
75
- -webkit-line-clamp:2; }
28
+ outline-offset:2px;
29
+ }
30
+ }
31
+ .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
32
+ -webkit-clip-path:revert;
33
+ clip-path:revert;
34
+ overflow:visible;
35
+ position:static;
36
+ white-space:normal;
37
+ height:auto;
38
+ width:auto;
39
+ padding:0;
40
+ margin:0;
41
+ position:absolute;
42
+ }
43
+ .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
44
+ width:calc(100% - 32px);
45
+ }
46
+ .iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
47
+ transform:translateZ(0) scale(1.1);
48
+ }
49
+ .iui-tile.iui-new .iui-tile-name,
50
+ .iui-tile.iui-new .iui-tile-description{
51
+ font-weight:600;
52
+ }
53
+ .iui-tile.iui-selected{
54
+ outline:solid 2px #008BE1;
55
+ background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
56
+ outline:solid 2px var(--iui-color-foreground-primary);
57
+ 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));
58
+ }
59
+ .iui-tile.iui-selected:focus-visible{
60
+ outline:4px solid var(--iui-color-foreground-primary);
61
+ outline-offset:0;
62
+ }
63
+ @supports not selector(*:focus-visible){
64
+ .iui-tile.iui-selected:focus{
65
+ outline:4px solid var(--iui-color-foreground-primary);
66
+ outline-offset:0;
67
+ }
68
+ }
69
+ .iui-tile.iui-selected .iui-tile-thumbnail-picture{
70
+ transform:translateZ(0) scale(1.1);
71
+ }
72
+ .iui-tile.iui-folder{
73
+ display:inline-flex;
74
+ flex-direction:row;
75
+ flex-wrap:nowrap;
76
+ }
77
+ .iui-tile.iui-folder .iui-tile-thumbnail{
78
+ height:110px;
79
+ flex:1;
80
+ border-bottom:none;
81
+ border-right:1px solid #DCE0E3;
82
+ border-right:1px solid var(--iui-color-background-4);
83
+ }
84
+ .iui-tile.iui-folder .iui-tile-content{
85
+ flex:2;
86
+ }
87
+ .iui-tile.iui-folder .iui-tile-description{
88
+ height:100%;
89
+ max-height:44px;
90
+ margin-bottom:0;
91
+ -webkit-line-clamp:2;
92
+ }
76
93
 
77
94
  .iui-tile-thumbnail-type-indicator{
78
95
  border-color:transparent;
@@ -86,36 +103,42 @@
86
103
  position:absolute;
87
104
  border-radius:50%;
88
105
  top:6px;
89
- left:8px; }
90
- .iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
91
- margin-left:3px;
92
- margin-right:3px; }
93
- .iui-tile-thumbnail-type-indicator:hover{
94
- background-color:rgba(0, 0, 0, 0.1);
95
- border-color:transparent;
96
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
97
- border-color:transparent; }
98
- .iui-tile-thumbnail-type-indicator.iui-active{
99
- background-color:rgba(0, 139, 225, 0.1);
100
- color:#008BE1;
101
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
102
- color:var(--iui-color-foreground-primary);
103
- border-color:transparent; }
104
- .iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
105
- cursor:not-allowed;
106
- background:#EEF0F3;
107
- border-color:#EEF0F3;
108
- color:rgba(0, 0, 0, 0.2);
109
- background:var(--iui-color-background-disabled);
110
- border-color:var(--iui-color-background-disabled);
111
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
112
- background-color:transparent;
113
- border-color:transparent;
114
- background-color:transparent;
115
- border-color:transparent; }
116
- .iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
117
- background-color:rgba(0, 0, 0, 0.05);
118
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
106
+ left:8px;
107
+ }
108
+ .iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
109
+ margin-left:3px;
110
+ margin-right:3px;
111
+ }
112
+ .iui-tile-thumbnail-type-indicator:hover{
113
+ background-color:rgba(0, 0, 0, 0.1);
114
+ border-color:transparent;
115
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
116
+ border-color:transparent;
117
+ }
118
+ .iui-tile-thumbnail-type-indicator.iui-active{
119
+ background-color:rgba(0, 139, 225, 0.1);
120
+ color:#008BE1;
121
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
122
+ color:var(--iui-color-foreground-primary);
123
+ border-color:transparent;
124
+ }
125
+ .iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
126
+ cursor:not-allowed;
127
+ background:#EEF0F3;
128
+ border-color:#EEF0F3;
129
+ color:rgba(0, 0, 0, 0.2);
130
+ background:var(--iui-color-background-disabled);
131
+ border-color:var(--iui-color-background-disabled);
132
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
133
+ background-color:transparent;
134
+ border-color:transparent;
135
+ background-color:transparent;
136
+ border-color:transparent;
137
+ }
138
+ .iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
139
+ background-color:rgba(0, 0, 0, 0.05);
140
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
141
+ }
119
142
 
120
143
  .iui-tile-thumbnail-quick-action{
121
144
  border-color:transparent;
@@ -129,36 +152,42 @@
129
152
  position:absolute;
130
153
  border-radius:50%;
131
154
  top:6px;
132
- right:8px; }
133
- .iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
134
- margin-left:3px;
135
- margin-right:3px; }
136
- .iui-tile-thumbnail-quick-action:hover{
137
- background-color:rgba(0, 0, 0, 0.1);
138
- border-color:transparent;
139
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
140
- border-color:transparent; }
141
- .iui-tile-thumbnail-quick-action.iui-active{
142
- background-color:rgba(0, 139, 225, 0.1);
143
- color:#008BE1;
144
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
145
- color:var(--iui-color-foreground-primary);
146
- border-color:transparent; }
147
- .iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
148
- cursor:not-allowed;
149
- background:#EEF0F3;
150
- border-color:#EEF0F3;
151
- color:rgba(0, 0, 0, 0.2);
152
- background:var(--iui-color-background-disabled);
153
- border-color:var(--iui-color-background-disabled);
154
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
155
- background-color:transparent;
156
- border-color:transparent;
157
- background-color:transparent;
158
- border-color:transparent; }
159
- .iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
160
- background-color:rgba(0, 0, 0, 0.05);
161
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
155
+ right:8px;
156
+ }
157
+ .iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
158
+ margin-left:3px;
159
+ margin-right:3px;
160
+ }
161
+ .iui-tile-thumbnail-quick-action:hover{
162
+ background-color:rgba(0, 0, 0, 0.1);
163
+ border-color:transparent;
164
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
165
+ border-color:transparent;
166
+ }
167
+ .iui-tile-thumbnail-quick-action.iui-active{
168
+ background-color:rgba(0, 139, 225, 0.1);
169
+ color:#008BE1;
170
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
171
+ color:var(--iui-color-foreground-primary);
172
+ border-color:transparent;
173
+ }
174
+ .iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
175
+ cursor:not-allowed;
176
+ background:#EEF0F3;
177
+ border-color:#EEF0F3;
178
+ color:rgba(0, 0, 0, 0.2);
179
+ background:var(--iui-color-background-disabled);
180
+ border-color:var(--iui-color-background-disabled);
181
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
182
+ background-color:transparent;
183
+ border-color:transparent;
184
+ background-color:transparent;
185
+ border-color:transparent;
186
+ }
187
+ .iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
188
+ background-color:rgba(0, 0, 0, 0.05);
189
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
190
+ }
162
191
 
163
192
  .iui-tile-thumbnail-badge-container{
164
193
  position:absolute;
@@ -168,9 +197,11 @@
168
197
  right:12px;
169
198
  display:flex;
170
199
  justify-content:flex-end;
171
- overflow:hidden; }
172
- .iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
173
- margin-right:4px; }
200
+ overflow:hidden;
201
+ }
202
+ .iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
203
+ margin-right:4px;
204
+ }
174
205
 
175
206
  .iui-tile-buttons{
176
207
  display:flex;
@@ -179,27 +210,31 @@
179
210
  -moz-user-select:none;
180
211
  -ms-user-select:none;
181
212
  user-select:none;
182
- white-space:nowrap; }
183
- .iui-tile-buttons > .iui-button{
184
- font-size:14px;
185
- flex:1;
186
- height:auto;
187
- padding:11px 12px;
188
- overflow:hidden;
189
- white-space:nowrap;
190
- text-overflow:ellipsis;
191
- text-align:center;
192
- margin:0;
193
- border:initial;
194
- border-radius:0; }
195
- .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
196
- border-top:1px solid #DCE0E3;
197
- border-color:#DCE0E3;
198
- border-top:1px solid var(--iui-color-background-4);
199
- border-color:var(--iui-color-background-4); }
200
- .iui-tile-buttons > button:not(:last-child){
201
- border-right:1px solid #DCE0E3;
202
- border-right:1px solid var(--iui-color-background-4); }
213
+ white-space:nowrap;
214
+ }
215
+ .iui-tile-buttons > .iui-button{
216
+ font-size:14px;
217
+ flex:1;
218
+ height:auto;
219
+ padding:11px 12px;
220
+ overflow:hidden;
221
+ white-space:nowrap;
222
+ text-overflow:ellipsis;
223
+ text-align:center;
224
+ margin:0;
225
+ border:initial;
226
+ border-radius:0;
227
+ }
228
+ .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
229
+ border-top:1px solid #DCE0E3;
230
+ border-color:#DCE0E3;
231
+ border-top:1px solid var(--iui-color-background-4);
232
+ border-color:var(--iui-color-background-4);
233
+ }
234
+ .iui-tile-buttons > button:not(:last-child){
235
+ border-right:1px solid #DCE0E3;
236
+ border-right:1px solid var(--iui-color-background-4);
237
+ }
203
238
 
204
239
  .iui-tile-thumbnail{
205
240
  width:100%;
@@ -213,81 +248,102 @@
213
248
  background-color:#f2f2f2;
214
249
  border-bottom:1px solid #DCE0E3;
215
250
  background-color:var(--iui-color-background-1-overlay);
216
- border-bottom:1px solid var(--iui-color-background-4); }
217
- .iui-tile-thumbnail .iui-thumbnail-icon{
218
- fill:rgba(0, 0, 0, 0.4);
219
- fill:var(--iui-icons-color);
220
- display:inline-flex;
221
- width:64px;
222
- height:64px; }
223
- .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
224
- fill:#008BE1;
225
- fill:var(--iui-icons-color-primary); }
226
- .iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
227
- fill:#53A21A;
228
- fill:var(--iui-icons-color-positive); }
229
- .iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
230
- fill:#F18B12;
231
- fill:var(--iui-icons-color-warning); }
232
- .iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
233
- fill:#D30A0A;
234
- fill:var(--iui-icons-color-negative); }
251
+ border-bottom:1px solid var(--iui-color-background-4);
252
+ }
253
+ .iui-tile-thumbnail .iui-thumbnail-icon{
254
+ fill:rgba(0, 0, 0, 0.4);
255
+ fill:var(--iui-icons-color);
256
+ display:inline-flex;
257
+ width:64px;
258
+ height:64px;
259
+ }
260
+ .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
261
+ fill:#008BE1;
262
+ fill:var(--iui-icons-color-primary);
263
+ }
264
+ .iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
265
+ fill:#53A21A;
266
+ fill:var(--iui-icons-color-positive);
267
+ }
268
+ .iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
269
+ fill:#F18B12;
270
+ fill:var(--iui-icons-color-warning);
271
+ }
272
+ .iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
273
+ fill:#D30A0A;
274
+ fill:var(--iui-icons-color-negative);
275
+ }
235
276
 
236
277
  .iui-tile-thumbnail-picture{
237
278
  width:100%;
238
279
  height:100%;
239
280
  position:absolute;
240
281
  top:0;
241
- left:0; }
242
- @media (prefers-reduced-motion: no-preference){
243
- .iui-tile-thumbnail-picture{
244
- transition:transform 0.4s ease; } }
245
- div.iui-tile-thumbnail-picture{
246
- background-position:center;
247
- background-size:cover; }
282
+ left:0;
283
+ }
284
+ @media (prefers-reduced-motion: no-preference){
285
+ .iui-tile-thumbnail-picture{
286
+ transition:transform 0.4s ease;
287
+ }
288
+ }
289
+ div.iui-tile-thumbnail-picture{
290
+ background-position:center;
291
+ background-size:cover;
292
+ }
293
+
294
+ .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
295
+ z-index:1;
296
+ cursor:pointer;
297
+ fill:rgba(255, 255, 255, 0.6);
298
+ filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
299
+ fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
300
+ filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
301
+ }
302
+ @media (prefers-reduced-motion: no-preference){
248
303
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
249
- z-index:1;
250
- cursor:pointer;
251
- fill:rgba(255, 255, 255, 0.6);
252
- filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
253
- fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
254
- filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5))); }
255
- @media (prefers-reduced-motion: no-preference){
256
- .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
257
- transition:fill 0.2s ease; } }
258
- .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
259
- fill:rgba(255, 255, 255, 0.8);
260
- fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2)); }
304
+ transition:fill 0.2s ease;
305
+ }
306
+ }
307
+ .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
308
+ fill:rgba(255, 255, 255, 0.8);
309
+ fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
310
+ }
311
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
312
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
313
+ background-color:rgba(0, 0, 0, 0.4);
314
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
315
+ }
316
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
261
317
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
262
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
263
- background-color:rgba(0, 0, 0, 0.4);
264
- background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
265
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
266
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
267
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
268
- background-color:rgba(0, 0, 0, var(--iui-opacity-5));
269
- -webkit-backdrop-filter:blur(5px);
270
- backdrop-filter:blur(5px); } }
271
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
272
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
273
- fill:#FFF;
274
- filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
275
- fill:var(--iui-color-foreground-accessory);
276
- filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5))); }
277
- .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,
278
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
279
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
280
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
281
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
282
- background-color:rgba(0, 0, 0, 0.4);
283
- background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
284
- .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,
285
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
286
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
287
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
288
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
289
- fill:#FFF;
290
- fill:var(--iui-color-foreground-accessory); }
318
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
319
+ background-color:rgba(0, 0, 0, var(--iui-opacity-5));
320
+ -webkit-backdrop-filter:blur(5px);
321
+ backdrop-filter:blur(5px);
322
+ }
323
+ }
324
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
325
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
326
+ fill:#FFF;
327
+ filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
328
+ fill:var(--iui-color-foreground-accessory);
329
+ filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
330
+ }
331
+ .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,
332
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
333
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
334
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
335
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
336
+ background-color:rgba(0, 0, 0, 0.4);
337
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
338
+ }
339
+ .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,
340
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
341
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
342
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
343
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
344
+ fill:#FFF;
345
+ fill:var(--iui-color-foreground-accessory);
346
+ }
291
347
 
292
348
  .iui-tile-content{
293
349
  padding:11px 12px;
@@ -295,112 +351,132 @@
295
351
  display:flex;
296
352
  flex-direction:column;
297
353
  flex-grow:2;
298
- min-width:0; }
299
- .iui-tile-content .iui-tile-name{
300
- display:flex;
301
- flex-shrink:0;
302
- align-items:center;
303
- font-size:16px;
304
- -webkit-user-select:all;
305
- -moz-user-select:all;
306
- user-select:all;
307
- margin-bottom:5.5px;
308
- color:rgba(0, 0, 0, 0.8);
309
- color:var(--iui-text-color); }
310
- .iui-tile-content .iui-tile-status-icon{
311
- fill:rgba(0, 0, 0, 0.4);
312
- fill:var(--iui-icons-color);
313
- display:inline-flex;
314
- width:16px;
315
- height:16px;
316
- margin-right:8px;
317
- flex-shrink:0; }
318
- .iui-tile-content .iui-tile-status-icon.iui-informational{
319
- fill:#008BE1;
320
- fill:var(--iui-icons-color-primary); }
321
- .iui-tile-content .iui-tile-status-icon.iui-positive{
322
- fill:#53A21A;
323
- fill:var(--iui-icons-color-positive); }
324
- .iui-tile-content .iui-tile-status-icon.iui-warning{
325
- fill:#F18B12;
326
- fill:var(--iui-icons-color-warning); }
327
- .iui-tile-content .iui-tile-status-icon.iui-negative{
328
- fill:#D30A0A;
329
- fill:var(--iui-icons-color-negative); }
330
- .iui-tile-content .iui-tile-name-label{
331
- overflow:hidden;
332
- white-space:nowrap;
333
- text-overflow:ellipsis; }
354
+ min-width:0;
355
+ }
356
+ .iui-tile-content .iui-tile-name{
357
+ display:flex;
358
+ flex-shrink:0;
359
+ align-items:center;
360
+ font-size:16px;
361
+ -webkit-user-select:all;
362
+ -moz-user-select:all;
363
+ user-select:all;
364
+ margin-bottom:5.5px;
365
+ color:rgba(0, 0, 0, 0.8);
366
+ color:var(--iui-text-color);
367
+ }
368
+ .iui-tile-content .iui-tile-status-icon{
369
+ fill:rgba(0, 0, 0, 0.4);
370
+ fill:var(--iui-icons-color);
371
+ display:inline-flex;
372
+ width:16px;
373
+ height:16px;
374
+ margin-right:8px;
375
+ flex-shrink:0;
376
+ }
377
+ .iui-tile-content .iui-tile-status-icon.iui-informational{
378
+ fill:#008BE1;
379
+ fill:var(--iui-icons-color-primary);
380
+ }
381
+ .iui-tile-content .iui-tile-status-icon.iui-positive{
382
+ fill:#53A21A;
383
+ fill:var(--iui-icons-color-positive);
384
+ }
385
+ .iui-tile-content .iui-tile-status-icon.iui-warning{
386
+ fill:#F18B12;
387
+ fill:var(--iui-icons-color-warning);
388
+ }
389
+ .iui-tile-content .iui-tile-status-icon.iui-negative{
390
+ fill:#D30A0A;
391
+ fill:var(--iui-icons-color-negative);
392
+ }
393
+ .iui-tile-content .iui-tile-name-label{
394
+ overflow:hidden;
395
+ white-space:nowrap;
396
+ text-overflow:ellipsis;
397
+ }
398
+ .iui-tile-content .iui-tile-description{
399
+ margin-bottom:11px;
400
+ font-size:14px;
401
+ height:100%;
402
+ max-height:66px;
403
+ overflow:hidden;
404
+ white-space:nowrap;
405
+ text-overflow:ellipsis;
406
+ color:rgba(0, 0, 0, 0.4);
407
+ color:var(--iui-text-color-muted);
408
+ }
409
+ @supports (-webkit-line-clamp: 1){
334
410
  .iui-tile-content .iui-tile-description{
335
- margin-bottom:11px;
336
- font-size:14px;
337
- height:100%;
338
- max-height:66px;
339
- overflow:hidden;
340
- white-space:nowrap;
341
- text-overflow:ellipsis;
342
- color:rgba(0, 0, 0, 0.4);
343
- color:var(--iui-text-color-muted); }
344
- @supports (-webkit-line-clamp: 1){
345
- .iui-tile-content .iui-tile-description{
346
- white-space:unset;
347
- display:-webkit-box;
348
- -webkit-line-clamp:3;
349
- -webkit-box-orient:vertical; } }
350
- .iui-tile-content .iui-tile-metadata{
351
- font-size:12px;
352
- flex-shrink:0;
353
- overflow:hidden;
354
- text-overflow:ellipsis;
355
- height:22px;
356
- width:100%;
357
- display:flex;
358
- align-items:center;
359
- margin-top:auto;
360
- color:rgba(0, 0, 0, 0.4);
361
- color:var(--iui-text-color-muted); }
362
- .iui-tile-content .iui-tile-metadata > svg,
363
- .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
364
- fill:rgba(0, 0, 0, 0.4);
365
- fill:var(--iui-icons-color);
366
- display:inline-flex;
367
- width:16px;
368
- height:16px;
369
- margin-right:8px;
370
- flex-shrink:0; }
371
- .iui-tile-content .iui-tile-metadata > svg.iui-informational,
372
- .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
373
- fill:#008BE1;
374
- fill:var(--iui-icons-color-primary); }
375
- .iui-tile-content .iui-tile-metadata > svg.iui-positive,
376
- .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
377
- fill:#53A21A;
378
- fill:var(--iui-icons-color-positive); }
379
- .iui-tile-content .iui-tile-metadata > svg.iui-warning,
380
- .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
381
- fill:#F18B12;
382
- fill:var(--iui-icons-color-warning); }
383
- .iui-tile-content .iui-tile-metadata > svg.iui-negative,
384
- .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
385
- fill:#D30A0A;
386
- fill:var(--iui-icons-color-negative); }
387
- .iui-tile-content .iui-tile-metadata > *{
388
- white-space:nowrap;
389
- overflow:hidden;
390
- text-overflow:ellipsis; }
411
+ white-space:unset;
412
+ display:-webkit-box;
413
+ -webkit-line-clamp:3;
414
+ -webkit-box-orient:vertical;
415
+ }
416
+ }
417
+ .iui-tile-content .iui-tile-metadata{
418
+ font-size:12px;
419
+ flex-shrink:0;
420
+ overflow:hidden;
421
+ text-overflow:ellipsis;
422
+ height:22px;
423
+ width:100%;
424
+ display:flex;
425
+ align-items:center;
426
+ margin-top:auto;
427
+ color:rgba(0, 0, 0, 0.4);
428
+ color:var(--iui-text-color-muted);
429
+ }
430
+ .iui-tile-content .iui-tile-metadata > svg,
431
+ .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
432
+ fill:rgba(0, 0, 0, 0.4);
433
+ fill:var(--iui-icons-color);
434
+ display:inline-flex;
435
+ width:16px;
436
+ height:16px;
437
+ margin-right:8px;
438
+ flex-shrink:0;
439
+ }
440
+ .iui-tile-content .iui-tile-metadata > svg.iui-informational,
441
+ .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
442
+ fill:#008BE1;
443
+ fill:var(--iui-icons-color-primary);
444
+ }
445
+ .iui-tile-content .iui-tile-metadata > svg.iui-positive,
446
+ .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
447
+ fill:#53A21A;
448
+ fill:var(--iui-icons-color-positive);
449
+ }
450
+ .iui-tile-content .iui-tile-metadata > svg.iui-warning,
451
+ .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
452
+ fill:#F18B12;
453
+ fill:var(--iui-icons-color-warning);
454
+ }
455
+ .iui-tile-content .iui-tile-metadata > svg.iui-negative,
456
+ .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
457
+ fill:#D30A0A;
458
+ fill:var(--iui-icons-color-negative);
459
+ }
460
+ .iui-tile-content .iui-tile-metadata > *{
461
+ white-space:nowrap;
462
+ overflow:hidden;
463
+ text-overflow:ellipsis;
464
+ }
391
465
 
392
466
  .iui-tile-more-options{
393
467
  position:absolute;
394
468
  bottom:5.5px;
395
- right:8px; }
396
- .iui-tile-more-options:not(.iui-visible){
397
- -webkit-clip-path:inset(50%);
398
- clip-path:inset(50%);
399
- overflow:hidden;
400
- position:absolute;
401
- white-space:nowrap;
402
- height:1px;
403
- width:1px;
404
- padding:0;
405
- margin:-1px;
406
- border-width:0; }
469
+ right:8px;
470
+ }
471
+ .iui-tile-more-options:not(.iui-visible){
472
+ -webkit-clip-path:inset(50%);
473
+ clip-path:inset(50%);
474
+ overflow:hidden;
475
+ position:absolute;
476
+ white-space:nowrap;
477
+ height:1px;
478
+ width:1px;
479
+ padding:0;
480
+ margin:-1px;
481
+ border-width:0;
482
+ }