@itwin/itwinui-css 0.52.0 → 0.53.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/css/alert.css +44 -44
  2. package/css/all.css +2170 -1431
  3. package/css/badge.css +1 -1
  4. package/css/blockquote.css +2 -2
  5. package/css/breadcrumbs.css +12 -12
  6. package/css/button.css +40 -39
  7. package/css/carousel.css +24 -36
  8. package/css/code.css +5 -5
  9. package/css/color-picker.css +14 -10
  10. package/css/date-picker.css +402 -46
  11. package/css/expandable-block.css +19 -19
  12. package/css/fieldset.css +4 -4
  13. package/css/file-upload.css +11 -11
  14. package/css/footer.css +2 -2
  15. package/css/global.css +539 -208
  16. package/css/header.css +50 -38
  17. package/css/icon.css +24 -24
  18. package/css/information-panel.css +15 -8
  19. package/css/inputs.css +72 -72
  20. package/css/keyboard.css +4 -4
  21. package/css/location-marker.css +9 -9
  22. package/css/menu.css +25 -12
  23. package/css/modal.css +14 -14
  24. package/css/notification-marker.css +28 -28
  25. package/css/progress-indicator.css +32 -32
  26. package/css/side-navigation.css +18 -18
  27. package/css/skip-to-content.css +5 -3
  28. package/css/slider.css +13 -13
  29. package/css/surface.css +19 -0
  30. package/css/table.css +78 -74
  31. package/css/tabs.css +23 -23
  32. package/css/tag.css +4 -4
  33. package/css/text.css +1 -1
  34. package/css/tile.css +35 -35
  35. package/css/time-picker.css +15 -15
  36. package/css/toast-notification.css +34 -34
  37. package/css/tooltip.css +3 -1
  38. package/css/tree.css +7 -7
  39. package/css/user-icon.css +21 -18
  40. package/css/wizard.css +26 -26
  41. package/package.json +1 -1
  42. package/scss/button/button-group.scss +5 -3
  43. package/scss/button/classes.scss +4 -0
  44. package/scss/carousel/carousel.scss +22 -28
  45. package/scss/classes.scss +1 -0
  46. package/scss/color-picker/color-picker.scss +2 -2
  47. package/scss/date-picker/classes.scss +20 -0
  48. package/scss/date-picker/date-picker.scss +194 -33
  49. package/scss/fieldset/fieldset.scss +1 -1
  50. package/scss/header/header.scss +15 -10
  51. package/scss/index.scss +1 -0
  52. package/scss/information-panel/information-panel.scss +10 -3
  53. package/scss/menu/classes.scss +2 -1
  54. package/scss/menu/menu.scss +8 -11
  55. package/scss/modal/classes.scss +4 -0
  56. package/scss/modal/modal.scss +23 -19
  57. package/scss/progress-indicator/linear.scss +1 -1
  58. package/scss/progress-indicator/radial.scss +1 -1
  59. package/scss/side-navigation/side-navigation.scss +5 -5
  60. package/scss/skip-to-content/skip-to-content.scss +6 -3
  61. package/scss/slider/slider.scss +2 -2
  62. package/scss/style/elevation.scss +5 -5
  63. package/scss/style/global.scss +32 -21
  64. package/scss/style/mixins.scss +1 -1
  65. package/scss/style/theme.scss +248 -65
  66. package/scss/surface/classes.scss +7 -0
  67. package/scss/surface/index.scss +3 -0
  68. package/scss/surface/surface.scss +18 -0
  69. package/scss/table/column-filter.scss +2 -2
  70. package/scss/table/table.scss +3 -3
  71. package/scss/tile/tile.scss +5 -5
  72. package/scss/time-picker/time-picker.scss +2 -2
  73. package/scss/tooltip/tooltip.scss +1 -0
  74. package/scss/user-icon/sizes.scss +8 -0
  75. package/scss/user-icon/user-icon.scss +2 -2
  76. package/scss/wizard/wizard.scss +1 -1
package/css/header.css CHANGED
@@ -17,11 +17,11 @@
17
17
  user-select:none;
18
18
  box-sizing:border-box;
19
19
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
20
- background-color:#FFF;
21
- border-bottom:2px solid #C7CCD1;
20
+ background-color:white;
21
+ border-bottom:2px solid #c7ccd1;
22
22
  color:rgba(0, 0, 0, 0.8);
23
23
  background-color:var(--iui-color-background-1);
24
- border-bottom:2px solid var(--iui-color-background-5);
24
+ border-bottom:2px solid var(--iui-color-background-border);
25
25
  color:var(--iui-text-color);
26
26
  }
27
27
  @media (prefers-reduced-motion: no-preference){
@@ -61,7 +61,7 @@
61
61
  .iui-page-header .iui-header-button.iui-header-button:focus{
62
62
  box-shadow:none;
63
63
  outline-offset:-1px;
64
- outline:1px solid #008BE1;
64
+ outline:1px solid #008ae0;
65
65
  outline:1px solid var(--iui-color-foreground-primary);
66
66
  }
67
67
  .iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
@@ -76,13 +76,14 @@
76
76
  overflow:hidden;
77
77
  text-overflow:ellipsis;
78
78
  }
79
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
79
+ .iui-page-header .iui-header-button.iui-header-button .iui-description{
80
80
  height:22px;
81
+ font-size:12px;
81
82
  opacity:0.6;
82
83
  opacity:var(--iui-opacity-3);
83
84
  }
84
85
  @media (prefers-reduced-motion: no-preference){
85
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
86
+ .iui-page-header .iui-header-button.iui-header-button .iui-description{
86
87
  transition:all 0.2s ease;
87
88
  }
88
89
  }
@@ -97,7 +98,7 @@
97
98
  width:16px;
98
99
  height:16px;
99
100
  border-radius:3px;
100
- background-color:#EEF0F3;
101
+ background-color:#edeff2;
101
102
  fill:rgba(0, 0, 0, 0.4);
102
103
  background-color:var(--iui-color-background-3);
103
104
  fill:var(--iui-icons-color);
@@ -108,23 +109,26 @@
108
109
  }
109
110
  }
110
111
  .iui-page-header .iui-header-button.iui-header-button.iui-active svg{
111
- fill:#008BE1;
112
+ fill:#008ae0;
112
113
  fill:var(--iui-icons-color-primary);
113
114
  }
115
+ .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-description{
116
+ opacity:1;
117
+ }
114
118
  .iui-page-header .iui-header-button.iui-header-button.iui-active, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover{
115
- box-shadow:0 2px 0 0 #008BE1;
116
- background-color:rgba(0, 139, 225, 0.1);
119
+ box-shadow:0 2px 0 0 #008ae0;
120
+ background-color:rgba(0, 138, 224, 0.1);
117
121
  box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
118
122
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
119
123
  }
120
124
  .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover .iui-header-button-icon{
121
- fill:#008BE1;
122
- background-color:rgba(0, 139, 225, 0.1);
125
+ fill:#008ae0;
126
+ background-color:rgba(0, 138, 224, 0.1);
123
127
  fill:var(--iui-icons-color-primary);
124
128
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
125
129
  }
126
130
  .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
127
- color:#008BE1;
131
+ color:#008ae0;
128
132
  color:var(--iui-color-foreground-primary);
129
133
  }
130
134
  .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled{
@@ -188,7 +192,7 @@
188
192
  .iui-page-header .iui-header-split-button .iui-button:focus{
189
193
  box-shadow:none;
190
194
  outline-offset:-1px;
191
- outline:1px solid #008BE1;
195
+ outline:1px solid #008ae0;
192
196
  outline:1px solid var(--iui-color-foreground-primary);
193
197
  }
194
198
  .iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
@@ -203,13 +207,14 @@
203
207
  overflow:hidden;
204
208
  text-overflow:ellipsis;
205
209
  }
206
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
210
+ .iui-page-header .iui-header-split-button .iui-button .iui-description{
207
211
  height:22px;
212
+ font-size:12px;
208
213
  opacity:0.6;
209
214
  opacity:var(--iui-opacity-3);
210
215
  }
211
216
  @media (prefers-reduced-motion: no-preference){
212
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
217
+ .iui-page-header .iui-header-split-button .iui-button .iui-description{
213
218
  transition:all 0.2s ease;
214
219
  }
215
220
  }
@@ -224,7 +229,7 @@
224
229
  width:16px;
225
230
  height:16px;
226
231
  border-radius:3px;
227
- background-color:#EEF0F3;
232
+ background-color:#edeff2;
228
233
  fill:rgba(0, 0, 0, 0.4);
229
234
  background-color:var(--iui-color-background-3);
230
235
  fill:var(--iui-icons-color);
@@ -235,23 +240,26 @@
235
240
  }
236
241
  }
237
242
  .iui-page-header .iui-header-split-button .iui-button.iui-active svg{
238
- fill:#008BE1;
243
+ fill:#008ae0;
239
244
  fill:var(--iui-icons-color-primary);
240
245
  }
246
+ .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-description{
247
+ opacity:1;
248
+ }
241
249
  .iui-page-header .iui-header-split-button .iui-button.iui-active, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover{
242
- box-shadow:0 2px 0 0 #008BE1;
243
- background-color:rgba(0, 139, 225, 0.1);
250
+ box-shadow:0 2px 0 0 #008ae0;
251
+ background-color:rgba(0, 138, 224, 0.1);
244
252
  box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
245
253
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
246
254
  }
247
255
  .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover .iui-header-button-icon{
248
- fill:#008BE1;
249
- background-color:rgba(0, 139, 225, 0.1);
256
+ fill:#008ae0;
257
+ background-color:rgba(0, 138, 224, 0.1);
250
258
  fill:var(--iui-icons-color-primary);
251
259
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
252
260
  }
253
261
  .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
254
- color:#008BE1;
262
+ color:#008ae0;
255
263
  color:var(--iui-color-foreground-primary);
256
264
  }
257
265
  .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled{
@@ -294,23 +302,26 @@
294
302
  padding-left:12px;
295
303
  }
296
304
  .iui-page-header .iui-header-split-button.iui-active svg{
297
- fill:#008BE1;
305
+ fill:#008ae0;
298
306
  fill:var(--iui-icons-color-primary);
299
307
  }
308
+ .iui-page-header .iui-header-split-button.iui-active .iui-description{
309
+ opacity:1;
310
+ }
300
311
  .iui-page-header .iui-header-split-button.iui-active, .iui-page-header .iui-header-split-button.iui-active:hover{
301
- box-shadow:0 2px 0 0 #008BE1;
302
- background-color:rgba(0, 139, 225, 0.1);
312
+ box-shadow:0 2px 0 0 #008ae0;
313
+ background-color:rgba(0, 138, 224, 0.1);
303
314
  box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
304
315
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
305
316
  }
306
317
  .iui-page-header .iui-header-split-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:hover .iui-header-button-icon{
307
- fill:#008BE1;
308
- background-color:rgba(0, 139, 225, 0.1);
318
+ fill:#008ae0;
319
+ background-color:rgba(0, 138, 224, 0.1);
309
320
  fill:var(--iui-icons-color-primary);
310
321
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
311
322
  }
312
323
  .iui-page-header .iui-header-split-button.iui-active .iui-button-label{
313
- color:#008BE1;
324
+ color:#008ae0;
314
325
  color:var(--iui-color-foreground-primary);
315
326
  }
316
327
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button.iui-active:disabled{
@@ -340,7 +351,7 @@
340
351
  display:none;
341
352
  }
342
353
  .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
343
- background-color:rgba(0, 139, 225, 0.1);
354
+ background-color:rgba(0, 138, 224, 0.1);
344
355
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
345
356
  }
346
357
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
@@ -369,19 +380,19 @@
369
380
  margin:0 4px;
370
381
  }
371
382
  .iui-page-header > .iui-left .iui-chevron.iui-informational{
372
- fill:#008BE1;
383
+ fill:#008ae0;
373
384
  fill:var(--iui-icons-color-primary);
374
385
  }
375
386
  .iui-page-header > .iui-left .iui-chevron.iui-positive{
376
- fill:#53A21A;
387
+ fill:#53a21a;
377
388
  fill:var(--iui-icons-color-positive);
378
389
  }
379
390
  .iui-page-header > .iui-left .iui-chevron.iui-warning{
380
- fill:#F18B12;
391
+ fill:#f18d13;
381
392
  fill:var(--iui-icons-color-warning);
382
393
  }
383
394
  .iui-page-header > .iui-left .iui-chevron.iui-negative{
384
- fill:#D30A0A;
395
+ fill:#d10a0a;
385
396
  fill:var(--iui-icons-color-negative);
386
397
  }
387
398
  .iui-page-header > .iui-center{
@@ -403,8 +414,8 @@
403
414
  .iui-page-header .iui-divider{
404
415
  width:1px;
405
416
  height:22px;
406
- background-color:#DCE0E3;
407
- background-color:var(--iui-color-background-4);
417
+ background-color:#c7ccd1;
418
+ background-color:var(--iui-color-background-border);
408
419
  }
409
420
  .iui-page-header.iui-slim{
410
421
  height:30px;
@@ -424,6 +435,7 @@
424
435
  .iui-page-header.iui-slim > .iui-right .iui-user-icon{
425
436
  width:24px;
426
437
  height:24px;
438
+ --_iui-user-icon-status-size:12px;
427
439
  }
428
440
  .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
429
441
  line-height:24px;
@@ -468,7 +480,7 @@ a.iui-header-logo:focus,
468
480
  button.iui-header-logo:focus, .iui-header-logo[role=button]:focus{
469
481
  box-shadow:none;
470
482
  outline-offset:-1px;
471
- outline:1px solid #008BE1;
483
+ outline:1px solid #008ae0;
472
484
  outline:1px solid var(--iui-color-foreground-primary);
473
485
  }
474
486
  a.iui-header-logo:focus:not(:focus-visible),
@@ -482,7 +494,7 @@ button.iui-header-logo:hover, .iui-header-logo[role=button]:hover{
482
494
  }
483
495
  a.iui-header-logo:hover:not(:focus-visible):not(:hover),
484
496
  button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[role=button]:hover:not(:focus-visible):not(:hover){
485
- background-color:#FFF;
497
+ background-color:white;
486
498
  background-color:var(--iui-color-background-1);
487
499
  }
488
500
 
package/css/icon.css CHANGED
@@ -10,19 +10,19 @@
10
10
  height:16px;
11
11
  }
12
12
  .iui-icons-default.iui-informational{
13
- fill:#008BE1;
13
+ fill:#008ae0;
14
14
  fill:var(--iui-icons-color-primary);
15
15
  }
16
16
  .iui-icons-default.iui-positive{
17
- fill:#53A21A;
17
+ fill:#53a21a;
18
18
  fill:var(--iui-icons-color-positive);
19
19
  }
20
20
  .iui-icons-default.iui-warning{
21
- fill:#F18B12;
21
+ fill:#f18d13;
22
22
  fill:var(--iui-icons-color-warning);
23
23
  }
24
24
  .iui-icons-default.iui-negative{
25
- fill:#D30A0A;
25
+ fill:#d10a0a;
26
26
  fill:var(--iui-icons-color-negative);
27
27
  }
28
28
 
@@ -34,19 +34,19 @@
34
34
  height:12px;
35
35
  }
36
36
  .iui-icons-small.iui-informational{
37
- fill:#008BE1;
37
+ fill:#008ae0;
38
38
  fill:var(--iui-icons-color-primary);
39
39
  }
40
40
  .iui-icons-small.iui-positive{
41
- fill:#53A21A;
41
+ fill:#53a21a;
42
42
  fill:var(--iui-icons-color-positive);
43
43
  }
44
44
  .iui-icons-small.iui-warning{
45
- fill:#F18B12;
45
+ fill:#f18d13;
46
46
  fill:var(--iui-icons-color-warning);
47
47
  }
48
48
  .iui-icons-small.iui-negative{
49
- fill:#D30A0A;
49
+ fill:#d10a0a;
50
50
  fill:var(--iui-icons-color-negative);
51
51
  }
52
52
 
@@ -58,19 +58,19 @@
58
58
  height:24px;
59
59
  }
60
60
  .iui-icons-large.iui-informational{
61
- fill:#008BE1;
61
+ fill:#008ae0;
62
62
  fill:var(--iui-icons-color-primary);
63
63
  }
64
64
  .iui-icons-large.iui-positive{
65
- fill:#53A21A;
65
+ fill:#53a21a;
66
66
  fill:var(--iui-icons-color-positive);
67
67
  }
68
68
  .iui-icons-large.iui-warning{
69
- fill:#F18B12;
69
+ fill:#f18d13;
70
70
  fill:var(--iui-icons-color-warning);
71
71
  }
72
72
  .iui-icons-large.iui-negative{
73
- fill:#D30A0A;
73
+ fill:#d10a0a;
74
74
  fill:var(--iui-icons-color-negative);
75
75
  }
76
76
 
@@ -82,19 +82,19 @@
82
82
  height:32px;
83
83
  }
84
84
  .iui-icons-xl.iui-informational{
85
- fill:#008BE1;
85
+ fill:#008ae0;
86
86
  fill:var(--iui-icons-color-primary);
87
87
  }
88
88
  .iui-icons-xl.iui-positive{
89
- fill:#53A21A;
89
+ fill:#53a21a;
90
90
  fill:var(--iui-icons-color-positive);
91
91
  }
92
92
  .iui-icons-xl.iui-warning{
93
- fill:#F18B12;
93
+ fill:#f18d13;
94
94
  fill:var(--iui-icons-color-warning);
95
95
  }
96
96
  .iui-icons-xl.iui-negative{
97
- fill:#D30A0A;
97
+ fill:#d10a0a;
98
98
  fill:var(--iui-icons-color-negative);
99
99
  }
100
100
 
@@ -106,19 +106,19 @@
106
106
  height:48px;
107
107
  }
108
108
  .iui-icons-xxl.iui-informational{
109
- fill:#008BE1;
109
+ fill:#008ae0;
110
110
  fill:var(--iui-icons-color-primary);
111
111
  }
112
112
  .iui-icons-xxl.iui-positive{
113
- fill:#53A21A;
113
+ fill:#53a21a;
114
114
  fill:var(--iui-icons-color-positive);
115
115
  }
116
116
  .iui-icons-xxl.iui-warning{
117
- fill:#F18B12;
117
+ fill:#f18d13;
118
118
  fill:var(--iui-icons-color-warning);
119
119
  }
120
120
  .iui-icons-xxl.iui-negative{
121
- fill:#D30A0A;
121
+ fill:#d10a0a;
122
122
  fill:var(--iui-icons-color-negative);
123
123
  }
124
124
 
@@ -130,18 +130,18 @@
130
130
  height:64px;
131
131
  }
132
132
  .iui-icons-3xl.iui-informational{
133
- fill:#008BE1;
133
+ fill:#008ae0;
134
134
  fill:var(--iui-icons-color-primary);
135
135
  }
136
136
  .iui-icons-3xl.iui-positive{
137
- fill:#53A21A;
137
+ fill:#53a21a;
138
138
  fill:var(--iui-icons-color-positive);
139
139
  }
140
140
  .iui-icons-3xl.iui-warning{
141
- fill:#F18B12;
141
+ fill:#f18d13;
142
142
  fill:var(--iui-icons-color-warning);
143
143
  }
144
144
  .iui-icons-3xl.iui-negative{
145
- fill:#D30A0A;
145
+ fill:#d10a0a;
146
146
  fill:var(--iui-icons-color-negative);
147
147
  }
package/css/information-panel.css CHANGED
@@ -10,18 +10,19 @@
10
10
  .iui-information-panel{
11
11
  position:absolute;
12
12
  opacity:0;
13
+ visibility:hidden;
13
14
  display:flex;
14
15
  flex-direction:column;
15
16
  box-sizing:border-box;
16
17
  max-width:100%;
17
18
  max-height:100%;
18
19
  z-index:2;
19
- background-color:#FFF;
20
+ background-color:white;
20
21
  background-color:var(--iui-color-background-1);
21
22
  }
22
23
  @media (prefers-reduced-motion: no-preference){
23
24
  .iui-information-panel{
24
- transition:transform 0.2s ease-out, opacity 0.2s ease;
25
+ transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
25
26
  }
26
27
  }
27
28
  .iui-information-panel > .iui-resizer{
@@ -30,11 +31,11 @@
30
31
  touch-action:none;
31
32
  }
32
33
  .iui-information-panel > .iui-resizer > .iui-resizer-bar{
33
- background-color:#C7CCD1;
34
- background-color:var(--iui-color-background-5);
34
+ background-color:#c7ccd1;
35
+ background-color:var(--iui-color-background-border);
35
36
  }
36
37
  .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
37
- background-color:#008BE1;
38
+ background-color:#008ae0;
38
39
  background-color:var(--iui-color-foreground-primary);
39
40
  }
40
41
  .iui-information-panel .iui-information-header,
@@ -49,7 +50,7 @@
49
50
  display:flex;
50
51
  align-items:center;
51
52
  justify-content:space-between;
52
- background-color:#EEF0F3;
53
+ background-color:#edeff2;
53
54
  background-color:var(--iui-color-background-3);
54
55
  }
55
56
  .iui-information-panel .iui-information-header .iui-information-header-label{
@@ -87,8 +88,8 @@
87
88
  overflow-y:overlay;
88
89
  }
89
90
  .iui-information-panel .iui-information-body > hr{
90
- border-color:#DCE0E3;
91
- border-color:var(--iui-color-background-4);
91
+ border-color:#c7ccd1;
92
+ border-color:var(--iui-color-background-border);
92
93
  }
93
94
  .iui-information-panel.iui-right{
94
95
  top:0;
@@ -158,8 +159,14 @@
158
159
  }
159
160
  .iui-information-panel.iui-visible{
160
161
  opacity:1;
162
+ visibility:visible;
161
163
  transform:translate(0);
162
164
  }
165
+ @media (prefers-reduced-motion: no-preference){
166
+ .iui-information-panel.iui-visible{
167
+ transition:transform 0.2s ease-out, opacity 0.2s ease;
168
+ }
169
+ }
163
170
  .iui-information-panel.iui-visible > .iui-resizer{
164
171
  display:flex;
165
172
  }