@itwin/itwinui-css 0.33.1 → 0.35.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 (28) hide show
  1. package/css/alert.css +121 -99
  2. package/css/all.css +178 -126
  3. package/css/button.css +1 -0
  4. package/css/expandable-block.css +10 -1
  5. package/css/information-panel.css +20 -15
  6. package/css/side-navigation.css +9 -5
  7. package/css/slider.css +2 -1
  8. package/css/table.css +15 -5
  9. package/package.json +3 -2
  10. package/scss/alert/alert.scss +63 -9
  11. package/scss/alert/classes.scss +4 -14
  12. package/scss/alert/index.scss +0 -4
  13. package/scss/button/button.scss +1 -0
  14. package/scss/expandable-block/block.scss +18 -1
  15. package/scss/information-panel/classes.scss +4 -0
  16. package/scss/information-panel/information-panel.scss +24 -24
  17. package/scss/notification-marker/classes.scss +1 -1
  18. package/scss/side-navigation/side-navigation.scss +15 -6
  19. package/scss/slider/slider.scss +1 -0
  20. package/scss/style/mixins.scss +1 -1
  21. package/scss/table/condensed.scss +1 -1
  22. package/scss/table/extra-condensed.scss +1 -1
  23. package/scss/table/paginator.scss +7 -1
  24. package/scss/table/table.scss +8 -1
  25. package/scss/alert/informational.scss +0 -35
  26. package/scss/alert/negative.scss +0 -50
  27. package/scss/alert/positive.scss +0 -50
  28. package/scss/alert/warning.scss +0 -50
package/css/all.css CHANGED
@@ -306,9 +306,11 @@ html.iui-theme-dark{
306
306
  align-items:center;
307
307
  border:1px solid #C7CCD1;
308
308
  color:rgba(0, 0, 0, 0.8);
309
+ background-color:#FFF;
309
310
  border:1px solid var(--iui-color-background-5);
310
- color:var(--iui-text-color); }
311
- .iui-alert > .iui-icon{
311
+ color:var(--iui-text-color);
312
+ background-color:var(--iui-color-background-1); }
313
+ .iui-alert-icon{
312
314
  fill:rgba(0, 0, 0, 0.4);
313
315
  fill:var(--iui-icons-color);
314
316
  display:inline-flex;
@@ -316,30 +318,45 @@ html.iui-theme-dark{
316
318
  height:16px;
317
319
  flex-shrink:0;
318
320
  margin-left:16px; }
319
- .iui-alert > .iui-icon.iui-informational{
321
+ .iui-alert-icon.iui-informational{
320
322
  fill:#008BE1;
321
323
  fill:var(--iui-icons-color-primary); }
322
- .iui-alert > .iui-icon.iui-positive{
324
+ .iui-alert-icon.iui-positive{
323
325
  fill:#53A21A;
324
326
  fill:var(--iui-icons-color-positive); }
325
- .iui-alert > .iui-icon.iui-warning{
327
+ .iui-alert-icon.iui-warning{
326
328
  fill:#F18B12;
327
329
  fill:var(--iui-icons-color-warning); }
328
- .iui-alert > .iui-icon.iui-negative{
330
+ .iui-alert-icon.iui-negative{
329
331
  fill:#D30A0A;
330
332
  fill:var(--iui-icons-color-negative); }
331
- .iui-alert > .iui-message{
333
+ .iui-alert-message{
332
334
  margin:11px 16px; }
333
- .iui-alert > .iui-message > a{
334
- margin-left:8px;
335
- text-decoration:underline;
336
- -webkit-user-select:none;
337
- -moz-user-select:none;
338
- -ms-user-select:none;
339
- user-select:none;
340
- white-space:nowrap; }
341
- .iui-alert > .iui-message > a:hover{
342
- text-decoration:none; }
335
+ .iui-alert-link{
336
+ cursor:pointer;
337
+ margin-left:8px;
338
+ text-decoration:underline;
339
+ -webkit-user-select:none;
340
+ -moz-user-select:none;
341
+ -ms-user-select:none;
342
+ user-select:none;
343
+ white-space:nowrap;
344
+ color:#008BE1;
345
+ color:var(--iui-color-foreground-primary); }
346
+ .iui-alert-link:focus{
347
+ outline:0;
348
+ box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
349
+ box-shadow:var(--iui-focus-box-shadow); }
350
+ .iui-alert-link:focus:not(:focus-visible){
351
+ box-shadow:none; }
352
+ .iui-alert-link:focus-visible{
353
+ outline:0;
354
+ box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
355
+ box-shadow:var(--iui-focus-box-shadow); }
356
+ .iui-alert-link:hover{
357
+ text-decoration:none;
358
+ color:#006bae;
359
+ color:var(--iui-color-foreground-primary-overlay); }
343
360
  .iui-alert > .iui-button{
344
361
  margin-left:auto;
345
362
  margin-right:8px; }
@@ -349,133 +366,138 @@ html.iui-theme-dark{
349
366
  top:0;
350
367
  left:0;
351
368
  width:100vw; }
352
- .iui-alert.iui-informational{
353
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
354
- border-color:#008BE1;
355
- 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));
356
- border-color:var(--iui-color-foreground-primary); }
357
- .iui-alert.iui-informational > .iui-icon,
358
- .iui-alert.iui-informational > .iui-icon > *{
359
- fill:#008BE1;
360
- fill:var(--iui-icons-color-primary); }
361
- .iui-alert.iui-informational > .iui-message > a{
362
- color:#008BE1;
363
- color:var(--iui-color-foreground-primary); }
364
- .iui-alert.iui-informational > .iui-message > a:focus{
365
- outline:0;
366
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
367
- box-shadow:var(--iui-focus-box-shadow); }
368
- .iui-alert.iui-informational > .iui-message > a:focus:not(:focus-visible){
369
- box-shadow:none; }
370
- .iui-alert.iui-informational > .iui-message > a:focus-visible{
371
- outline:0;
372
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
373
- box-shadow:var(--iui-focus-box-shadow); }
374
- .iui-alert.iui-informational > .iui-message > a:hover{
375
- color:#006bae;
376
- color:var(--iui-color-foreground-primary-overlay); }
377
369
  .iui-alert.iui-positive{
378
370
  background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(#FFF, #FFF);
379
371
  border-color:#53A21A;
380
372
  background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
381
373
  border-color:var(--iui-color-foreground-positive); }
382
- .iui-alert.iui-positive > .iui-icon,
383
- .iui-alert.iui-positive > .iui-icon > *{
374
+ .iui-alert.iui-positive .iui-alert-icon{
384
375
  fill:#53A21A;
385
376
  fill:var(--iui-icons-color-positive); }
386
- .iui-alert.iui-positive > .iui-message > a{
387
- color:#53A21A;
388
- color:var(--iui-color-foreground-positive); }
389
- .iui-alert.iui-positive > .iui-message > a:hover{
390
- color:#3c7613;
391
- color:var(--iui-color-foreground-positive-overlay); }
392
- .iui-alert.iui-positive > .iui-message::-moz-selection{
377
+ .iui-alert.iui-positive .iui-alert-message::-moz-selection{
393
378
  background-color:rgba(83, 162, 26, 0.4);
394
379
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
395
- .iui-alert.iui-positive > .iui-message::selection{
380
+ .iui-alert.iui-positive .iui-alert-message::selection{
396
381
  background-color:rgba(83, 162, 26, 0.4);
397
382
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
398
- .iui-alert.iui-positive > .iui-message > a:focus,
383
+ .iui-alert.iui-positive .iui-alert-link{
384
+ color:#53A21A;
385
+ color:var(--iui-color-foreground-positive); }
386
+ .iui-alert.iui-positive .iui-alert-link:hover{
387
+ color:#3c7613;
388
+ color:var(--iui-color-foreground-positive-overlay); }
389
+ .iui-alert.iui-positive .iui-alert-link:focus,
399
390
  .iui-alert.iui-positive > .iui-button:focus{
400
391
  outline:0;
401
392
  box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
402
393
  box-shadow:var(--iui-focus-positive-box-shadow); }
403
- .iui-alert.iui-positive > .iui-message > a:focus:not(:focus-visible),
394
+ .iui-alert.iui-positive .iui-alert-link:focus:not(:focus-visible),
404
395
  .iui-alert.iui-positive > .iui-button:focus:not(:focus-visible){
405
396
  box-shadow:none; }
406
- .iui-alert.iui-positive > .iui-message > a:focus-visible,
397
+ .iui-alert.iui-positive .iui-alert-link:focus-visible,
407
398
  .iui-alert.iui-positive > .iui-button:focus-visible{
408
399
  outline:0;
409
400
  box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
410
401
  box-shadow:var(--iui-focus-positive-box-shadow); }
402
+ .iui-alert.iui-negative{
403
+ background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
404
+ border-color:#D30A0A;
405
+ background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
406
+ border-color:var(--iui-color-foreground-negative); }
407
+ .iui-alert.iui-negative .iui-alert-icon{
408
+ fill:#D30A0A;
409
+ fill:var(--iui-icons-color-negative); }
410
+ .iui-alert.iui-negative .iui-alert-message::-moz-selection{
411
+ background-color:rgba(211, 10, 10, 0.4);
412
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
413
+ .iui-alert.iui-negative .iui-alert-message::selection{
414
+ background-color:rgba(211, 10, 10, 0.4);
415
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
416
+ .iui-alert.iui-negative .iui-alert-link{
417
+ color:#D30A0A;
418
+ color:var(--iui-color-foreground-negative); }
419
+ .iui-alert.iui-negative .iui-alert-link:hover{
420
+ color:#a20808;
421
+ color:var(--iui-color-foreground-negative-overlay); }
422
+ .iui-alert.iui-negative .iui-alert-link:focus,
423
+ .iui-alert.iui-negative > .iui-button:focus{
424
+ outline:0;
425
+ box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
426
+ box-shadow:var(--iui-focus-negative-box-shadow); }
427
+ .iui-alert.iui-negative .iui-alert-link:focus:not(:focus-visible),
428
+ .iui-alert.iui-negative > .iui-button:focus:not(:focus-visible){
429
+ box-shadow:none; }
430
+ .iui-alert.iui-negative .iui-alert-link:focus-visible,
431
+ .iui-alert.iui-negative > .iui-button:focus-visible{
432
+ outline:0;
433
+ box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
434
+ box-shadow:var(--iui-focus-negative-box-shadow); }
411
435
  .iui-alert.iui-warning{
412
436
  background:linear-gradient(rgba(241, 139, 18, 0.1), rgba(241, 139, 18, 0.1)), linear-gradient(#FFF, #FFF);
413
437
  border-color:#F18B12;
414
438
  background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
415
439
  border-color:var(--iui-color-foreground-warning); }
416
- .iui-alert.iui-warning > .iui-icon,
417
- .iui-alert.iui-warning > .iui-icon > *{
440
+ .iui-alert.iui-warning .iui-alert-icon{
418
441
  fill:#F18B12;
419
442
  fill:var(--iui-icons-color-warning); }
420
- .iui-alert.iui-warning > .iui-message > a{
421
- color:#F18B12;
422
- color:var(--iui-color-foreground-warning); }
423
- .iui-alert.iui-warning > .iui-message > a:hover{
424
- color:#c4700c;
425
- color:var(--iui-color-foreground-warning-overlay); }
426
- .iui-alert.iui-warning > .iui-message::-moz-selection{
443
+ .iui-alert.iui-warning .iui-alert-message::-moz-selection{
427
444
  background-color:rgba(241, 139, 18, 0.4);
428
445
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
429
- .iui-alert.iui-warning > .iui-message::selection{
446
+ .iui-alert.iui-warning .iui-alert-message::selection{
430
447
  background-color:rgba(241, 139, 18, 0.4);
431
448
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
432
- .iui-alert.iui-warning > .iui-message > a:focus,
449
+ .iui-alert.iui-warning .iui-alert-link{
450
+ color:#F18B12;
451
+ color:var(--iui-color-foreground-warning); }
452
+ .iui-alert.iui-warning .iui-alert-link:hover{
453
+ color:#c4700c;
454
+ color:var(--iui-color-foreground-warning-overlay); }
455
+ .iui-alert.iui-warning .iui-alert-link:focus,
433
456
  .iui-alert.iui-warning > .iui-button:focus{
434
457
  outline:0;
435
458
  box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
436
459
  box-shadow:var(--iui-focus-warning-box-shadow); }
437
- .iui-alert.iui-warning > .iui-message > a:focus:not(:focus-visible),
460
+ .iui-alert.iui-warning .iui-alert-link:focus:not(:focus-visible),
438
461
  .iui-alert.iui-warning > .iui-button:focus:not(:focus-visible){
439
462
  box-shadow:none; }
440
- .iui-alert.iui-warning > .iui-message > a:focus-visible,
463
+ .iui-alert.iui-warning .iui-alert-link:focus-visible,
441
464
  .iui-alert.iui-warning > .iui-button:focus-visible{
442
465
  outline:0;
443
466
  box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
444
467
  box-shadow:var(--iui-focus-warning-box-shadow); }
445
- .iui-alert.iui-negative{
446
- background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
447
- border-color:#D30A0A;
448
- background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
449
- border-color:var(--iui-color-foreground-negative); }
450
- .iui-alert.iui-negative > .iui-icon,
451
- .iui-alert.iui-negative > .iui-icon > *{
452
- fill:#D30A0A;
453
- fill:var(--iui-icons-color-negative); }
454
- .iui-alert.iui-negative > .iui-message > a{
455
- color:#D30A0A;
456
- color:var(--iui-color-foreground-negative); }
457
- .iui-alert.iui-negative > .iui-message > a:hover{
458
- color:#a20808;
459
- color:var(--iui-color-foreground-negative-overlay); }
460
- .iui-alert.iui-negative > .iui-message::-moz-selection{
461
- background-color:rgba(211, 10, 10, 0.4);
462
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
463
- .iui-alert.iui-negative > .iui-message::selection{
464
- background-color:rgba(211, 10, 10, 0.4);
465
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
466
- .iui-alert.iui-negative > .iui-message > a:focus,
467
- .iui-alert.iui-negative > .iui-button:focus{
468
+ .iui-alert.iui-informational{
469
+ background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
470
+ border-color:#008BE1;
471
+ 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));
472
+ border-color:var(--iui-color-foreground-primary); }
473
+ .iui-alert.iui-informational .iui-alert-icon{
474
+ fill:#008BE1;
475
+ fill:var(--iui-icons-color-primary); }
476
+ .iui-alert.iui-informational .iui-alert-message::-moz-selection{
477
+ background-color:rgba(0, 139, 225, 0.4);
478
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
479
+ .iui-alert.iui-informational .iui-alert-message::selection{
480
+ background-color:rgba(0, 139, 225, 0.4);
481
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
482
+ .iui-alert.iui-informational .iui-alert-link{
483
+ color:#008BE1;
484
+ color:var(--iui-color-foreground-primary); }
485
+ .iui-alert.iui-informational .iui-alert-link:hover{
486
+ color:#006bae;
487
+ color:var(--iui-color-foreground-primary-overlay); }
488
+ .iui-alert.iui-informational .iui-alert-link:focus,
489
+ .iui-alert.iui-informational > .iui-button:focus{
468
490
  outline:0;
469
- box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
470
- box-shadow:var(--iui-focus-negative-box-shadow); }
471
- .iui-alert.iui-negative > .iui-message > a:focus:not(:focus-visible),
472
- .iui-alert.iui-negative > .iui-button:focus:not(:focus-visible){
491
+ box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
492
+ box-shadow:var(--iui-focus-box-shadow); }
493
+ .iui-alert.iui-informational .iui-alert-link:focus:not(:focus-visible),
494
+ .iui-alert.iui-informational > .iui-button:focus:not(:focus-visible){
473
495
  box-shadow:none; }
474
- .iui-alert.iui-negative > .iui-message > a:focus-visible,
475
- .iui-alert.iui-negative > .iui-button:focus-visible{
496
+ .iui-alert.iui-informational .iui-alert-link:focus-visible,
497
+ .iui-alert.iui-informational > .iui-button:focus-visible{
476
498
  outline:0;
477
- box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
478
- box-shadow:var(--iui-focus-negative-box-shadow); }
499
+ box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
500
+ box-shadow:var(--iui-focus-box-shadow); }
479
501
 
480
502
  .iui-badge{
481
503
  margin:0;
@@ -639,6 +661,7 @@ html.iui-theme-dark{
639
661
  padding:0;
640
662
  border:none;
641
663
  vertical-align:baseline;
664
+ font-family:inherit;
642
665
  display:inline-flex;
643
666
  align-items:center;
644
667
  vertical-align:middle;
@@ -1334,7 +1357,7 @@ html.iui-theme-dark{
1334
1357
  transition:background-color 0.2s ease-out; } }
1335
1358
  .iui-expandable-block > .iui-header > .iui-icon,
1336
1359
  .iui-expandable-block > .iui-header > .iui-status-icon{
1337
- display:block;
1360
+ display:inline-flex;
1338
1361
  flex-shrink:0;
1339
1362
  width:16px;
1340
1363
  height:16px; }
@@ -1441,6 +1464,15 @@ html.iui-theme-dark{
1441
1464
  background-color:var(--iui-color-background-4); }
1442
1465
  .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
1443
1466
  transform:rotate(90deg); }
1467
+ .iui-expandable-block.iui-small .iui-header{
1468
+ padding:5.5px 8px; }
1469
+ .iui-expandable-block.iui-small .iui-header > .iui-icon{
1470
+ width:12px;
1471
+ height:12px; }
1472
+ .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
1473
+ margin-left:8px; }
1474
+ .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
1475
+ margin-left:8px; }
1444
1476
 
1445
1477
  .iui-fieldset{
1446
1478
  margin:0;
@@ -2127,28 +2159,27 @@ html.iui-theme-dark{
2127
2159
  z-index:2;
2128
2160
  background-color:#FFF;
2129
2161
  background-color:var(--iui-color-background-1); }
2162
+ @media (prefers-reduced-motion: no-preference){
2163
+ .iui-information-panel{
2164
+ transition:transform 0.2s ease-out, opacity 0.2s ease; } }
2130
2165
  .iui-information-panel > .iui-resizer{
2131
2166
  display:none;
2132
2167
  position:absolute;
2133
- touch-action:none;
2134
- z-index:1000; }
2168
+ touch-action:none; }
2135
2169
  .iui-information-panel > .iui-resizer > .iui-resizer-bar{
2136
2170
  background-color:#C7CCD1;
2137
2171
  background-color:var(--iui-color-background-5); }
2138
2172
  .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
2139
2173
  background-color:#008BE1;
2140
2174
  background-color:var(--iui-color-foreground-primary); }
2141
- .iui-information-panel.iui-information-panel-visible{
2142
- opacity:1; }
2143
- .iui-information-panel.iui-information-panel-visible > .iui-resizer{
2144
- display:flex; }
2145
2175
  .iui-information-panel .iui-information-header,
2146
2176
  .iui-information-panel .iui-information-body{
2147
2177
  padding-left:12px;
2148
2178
  padding-right:12px;
2149
2179
  box-sizing:border-box; }
2150
2180
  .iui-information-panel .iui-information-header{
2151
- height:66px;
2181
+ height:55px;
2182
+ flex-shrink:0;
2152
2183
  display:flex;
2153
2184
  align-items:center;
2154
2185
  justify-content:space-between;
@@ -2180,18 +2211,21 @@ html.iui-theme-dark{
2180
2211
  padding-bottom:11px;
2181
2212
  height:100%;
2182
2213
  overflow-x:hidden;
2214
+ overflow-y:auto;
2183
2215
  overflow-y:overlay; }
2184
2216
  .iui-information-panel .iui-information-body > hr{
2185
2217
  border-color:#DCE0E3;
2186
2218
  border-color:var(--iui-color-background-4); }
2187
2219
  .iui-information-panel.iui-right{
2188
2220
  top:0;
2221
+ right:0;
2189
2222
  width:384px;
2190
2223
  min-width:192px;
2191
2224
  height:100%;
2192
- right:-384px;
2225
+ transform:translateX(100%);
2193
2226
  box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
2194
- transition:right 0.2s ease-out, opacity 0.2s ease; }
2227
+ -webkit-clip-path:inset(0 0 0 -15px);
2228
+ clip-path:inset(0 0 0 -15px); }
2195
2229
  .iui-information-panel.iui-right > .iui-resizer{
2196
2230
  height:100%;
2197
2231
  width:16px;
@@ -2208,16 +2242,16 @@ html.iui-theme-dark{
2208
2242
  width:4px; }
2209
2243
  .iui-information-panel.iui-right > .iui-resizer{
2210
2244
  left:-8px; }
2211
- .iui-information-panel.iui-right.iui-information-panel-visible{
2212
- right:0; }
2213
2245
  .iui-information-panel.iui-bottom{
2214
2246
  left:0;
2247
+ bottom:0;
2215
2248
  height:384px;
2216
2249
  min-height:192px;
2217
2250
  width:100%;
2218
- bottom:-384px;
2251
+ transform:translateY(100%);
2219
2252
  box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
2220
- transition:bottom 0.2s ease-out, opacity 0.2s ease; }
2253
+ -webkit-clip-path:inset(-15px 0 0 0);
2254
+ clip-path:inset(-15px 0 0 0); }
2221
2255
  .iui-information-panel.iui-bottom > .iui-resizer{
2222
2256
  width:100%;
2223
2257
  height:16px;
@@ -2234,8 +2268,11 @@ html.iui-theme-dark{
2234
2268
  height:4px; }
2235
2269
  .iui-information-panel.iui-bottom > .iui-resizer{
2236
2270
  top:-8px; }
2237
- .iui-information-panel.iui-bottom.iui-information-panel-visible{
2238
- bottom:0; }
2271
+ .iui-information-panel.iui-visible{
2272
+ opacity:1;
2273
+ transform:translate(0); }
2274
+ .iui-information-panel.iui-visible > .iui-resizer{
2275
+ display:flex; }
2239
2276
 
2240
2277
  .iui-input-container{
2241
2278
  margin:0;
@@ -4277,11 +4314,9 @@ html.iui-theme-dark{
4277
4314
 
4278
4315
  .iui-side-navigation-submenu{
4279
4316
  min-width:192px;
4280
- width:384px;
4281
4317
  max-width:50vw;
4282
4318
  height:100%;
4283
4319
  box-sizing:border-box;
4284
- padding:0 12px 11px;
4285
4320
  overflow-x:hidden;
4286
4321
  overflow-y:auto;
4287
4322
  overflow-y:overlay;
@@ -4297,6 +4332,12 @@ html.iui-theme-dark{
4297
4332
  @media (prefers-reduced-motion: no-preference){
4298
4333
  .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
4299
4334
  transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4335
+ .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
4336
+ display:flex; }
4337
+ .iui-side-navigation-submenu-content{
4338
+ padding:0 12px 11px;
4339
+ flex-shrink:0;
4340
+ box-sizing:border-box; }
4300
4341
  .iui-side-navigation-submenu-header{
4301
4342
  height:55px;
4302
4343
  display:flex;
@@ -4319,9 +4360,9 @@ html.iui-theme-dark{
4319
4360
  white-space:nowrap;
4320
4361
  overflow:hidden;
4321
4362
  text-overflow:ellipsis; }
4322
- .iui-side-navigation-submenu-header-label-actions{
4323
- flex-shrink:0;
4324
- margin-left:8px; }
4363
+ .iui-side-navigation-submenu-header-actions{
4364
+ flex-shrink:0;
4365
+ margin-left:8px; }
4325
4366
 
4326
4367
  .iui-side-navigation-wrapper{
4327
4368
  display:flex;
@@ -4329,7 +4370,8 @@ html.iui-theme-dark{
4329
4370
  height:100%; }
4330
4371
 
4331
4372
  .iui-slider-component-container{
4332
- display:flex; }
4373
+ display:flex;
4374
+ min-height:22px; }
4333
4375
  .iui-slider-component-container .iui-slider-min,
4334
4376
  .iui-slider-component-container .iui-slider-max{
4335
4377
  -webkit-user-select:all;
@@ -4497,11 +4539,11 @@ html.iui-theme-dark{
4497
4539
  margin-left:auto; }
4498
4540
  .iui-table.iui-condensed .iui-table-header .iui-cell,
4499
4541
  .iui-table.iui-condensed .iui-row .iui-cell,
4500
- .iui-table.iui-condensed + .iui-paginator{
4542
+ .iui-table.iui-condensed .iui-paginator{
4501
4543
  min-height:44px; }
4502
4544
  .iui-table.iui-extra-condensed .iui-table-header .iui-cell,
4503
4545
  .iui-table.iui-extra-condensed .iui-row .iui-cell,
4504
- .iui-table.iui-extra-condensed + .iui-paginator{
4546
+ .iui-table.iui-extra-condensed .iui-paginator{
4505
4547
  min-height:33px; }
4506
4548
 
4507
4549
  .iui-table-header{
@@ -4581,11 +4623,13 @@ html.iui-theme-dark{
4581
4623
  overflow-x:hidden;
4582
4624
  overflow-y:scroll;
4583
4625
  overflow-y:overlay;
4626
+ display:flex;
4627
+ flex-direction:column;
4628
+ flex-grow:1;
4584
4629
  background-color:#FFF;
4585
4630
  background-color:var(--iui-color-background-1); }
4586
4631
  .iui-table-body .iui-row{
4587
4632
  display:flex;
4588
- flex-grow:1;
4589
4633
  border:solid 1px transparent;
4590
4634
  border-bottom-color:#DCE0E3;
4591
4635
  border-bottom-color:var(--iui-color-background-4); }
@@ -4723,6 +4767,11 @@ html.iui-theme-dark{
4723
4767
  .iui-table-body > .iui-table-empty{
4724
4768
  text-align:center;
4725
4769
  padding:32px;
4770
+ display:flex;
4771
+ flex-direction:column;
4772
+ justify-content:center;
4773
+ align-items:center;
4774
+ flex-grow:1;
4726
4775
  color:rgba(0, 0, 0, 0.4);
4727
4776
  background-color:#FFF;
4728
4777
  color:var(--iui-text-color-muted);
@@ -4789,7 +4838,6 @@ html.iui-theme-dark{
4789
4838
  border:none;
4790
4839
  vertical-align:baseline;
4791
4840
  display:flex;
4792
- flex:1;
4793
4841
  justify-content:space-around;
4794
4842
  align-items:center;
4795
4843
  min-height:55px;
@@ -4806,9 +4854,11 @@ html.iui-theme-dark{
4806
4854
  display:flex;
4807
4855
  align-items:center;
4808
4856
  position:relative;
4809
- flex:1; }
4857
+ flex:1;
4858
+ min-width:0; }
4810
4859
  .iui-paginator > .iui-center{
4811
4860
  justify-content:center;
4861
+ flex:2 1;
4812
4862
  color:rgba(0, 0, 0, 0.8);
4813
4863
  color:var(--iui-text-color); }
4814
4864
  .iui-paginator > .iui-center .iui-button-group{
@@ -4819,6 +4869,8 @@ html.iui-theme-dark{
4819
4869
  .iui-paginator > .iui-center .iui-button-group > .iui-button.iui-small,
4820
4870
  .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis.iui-small{
4821
4871
  width:27px; }
4872
+ .iui-paginator > .iui-center .iui-button-group > .iui-button{
4873
+ transition:none; }
4822
4874
  .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
4823
4875
  display:flex;
4824
4876
  justify-content:center;
package/css/button.css CHANGED
@@ -7,6 +7,7 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
+ font-family:inherit;
10
11
  display:inline-flex;
11
12
  align-items:center;
12
13
  vertical-align:middle;
package/css/expandable-block.css CHANGED
@@ -34,7 +34,7 @@
34
34
  transition:background-color 0.2s ease-out; } }
35
35
  .iui-expandable-block > .iui-header > .iui-icon,
36
36
  .iui-expandable-block > .iui-header > .iui-status-icon{
37
- display:block;
37
+ display:inline-flex;
38
38
  flex-shrink:0;
39
39
  width:16px;
40
40
  height:16px; }
@@ -141,3 +141,12 @@
141
141
  background-color:var(--iui-color-background-4); }
142
142
  .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
143
143
  transform:rotate(90deg); }
144
+ .iui-expandable-block.iui-small .iui-header{
145
+ padding:5.5px 8px; }
146
+ .iui-expandable-block.iui-small .iui-header > .iui-icon{
147
+ width:12px;
148
+ height:12px; }
149
+ .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
150
+ margin-left:8px; }
151
+ .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
152
+ margin-left:8px; }
package/css/information-panel.css CHANGED
@@ -15,28 +15,27 @@
15
15
  z-index:2;
16
16
  background-color:#FFF;
17
17
  background-color:var(--iui-color-background-1); }
18
+ @media (prefers-reduced-motion: no-preference){
19
+ .iui-information-panel{
20
+ transition:transform 0.2s ease-out, opacity 0.2s ease; } }
18
21
  .iui-information-panel > .iui-resizer{
19
22
  display:none;
20
23
  position:absolute;
21
- touch-action:none;
22
- z-index:1000; }
24
+ touch-action:none; }
23
25
  .iui-information-panel > .iui-resizer > .iui-resizer-bar{
24
26
  background-color:#C7CCD1;
25
27
  background-color:var(--iui-color-background-5); }
26
28
  .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
27
29
  background-color:#008BE1;
28
30
  background-color:var(--iui-color-foreground-primary); }
29
- .iui-information-panel.iui-information-panel-visible{
30
- opacity:1; }
31
- .iui-information-panel.iui-information-panel-visible > .iui-resizer{
32
- display:flex; }
33
31
  .iui-information-panel .iui-information-header,
34
32
  .iui-information-panel .iui-information-body{
35
33
  padding-left:12px;
36
34
  padding-right:12px;
37
35
  box-sizing:border-box; }
38
36
  .iui-information-panel .iui-information-header{
39
- height:66px;
37
+ height:55px;
38
+ flex-shrink:0;
40
39
  display:flex;
41
40
  align-items:center;
42
41
  justify-content:space-between;
@@ -68,18 +67,21 @@
68
67
  padding-bottom:11px;
69
68
  height:100%;
70
69
  overflow-x:hidden;
70
+ overflow-y:auto;
71
71
  overflow-y:overlay; }
72
72
  .iui-information-panel .iui-information-body > hr{
73
73
  border-color:#DCE0E3;
74
74
  border-color:var(--iui-color-background-4); }
75
75
  .iui-information-panel.iui-right{
76
76
  top:0;
77
+ right:0;
77
78
  width:384px;
78
79
  min-width:192px;
79
80
  height:100%;
80
- right:-384px;
81
+ transform:translateX(100%);
81
82
  box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
82
- transition:right 0.2s ease-out, opacity 0.2s ease; }
83
+ -webkit-clip-path:inset(0 0 0 -15px);
84
+ clip-path:inset(0 0 0 -15px); }
83
85
  .iui-information-panel.iui-right > .iui-resizer{
84
86
  height:100%;
85
87
  width:16px;
@@ -96,16 +98,16 @@
96
98
  width:4px; }
97
99
  .iui-information-panel.iui-right > .iui-resizer{
98
100
  left:-8px; }
99
- .iui-information-panel.iui-right.iui-information-panel-visible{
100
- right:0; }
101
101
  .iui-information-panel.iui-bottom{
102
102
  left:0;
103
+ bottom:0;
103
104
  height:384px;
104
105
  min-height:192px;
105
106
  width:100%;
106
- bottom:-384px;
107
+ transform:translateY(100%);
107
108
  box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
108
- transition:bottom 0.2s ease-out, opacity 0.2s ease; }
109
+ -webkit-clip-path:inset(-15px 0 0 0);
110
+ clip-path:inset(-15px 0 0 0); }
109
111
  .iui-information-panel.iui-bottom > .iui-resizer{
110
112
  width:100%;
111
113
  height:16px;
@@ -122,5 +124,8 @@
122
124
  height:4px; }
123
125
  .iui-information-panel.iui-bottom > .iui-resizer{
124
126
  top:-8px; }
125
- .iui-information-panel.iui-bottom.iui-information-panel-visible{
126
- bottom:0; }
127
+ .iui-information-panel.iui-visible{
128
+ opacity:1;
129
+ transform:translate(0); }
130
+ .iui-information-panel.iui-visible > .iui-resizer{
131
+ display:flex; }