@itwin/itwinui-css 0.44.2 → 0.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/css/all.css +870 -744
  2. package/css/badge.css +4 -2
  3. package/css/button.css +31 -96
  4. package/css/carousel.css +97 -0
  5. package/css/color-picker.css +11 -8
  6. package/css/expandable-block.css +12 -0
  7. package/css/inputs.css +216 -224
  8. package/css/popover.css +12 -0
  9. package/css/side-navigation.css +2 -4
  10. package/css/skip-to-content.css +51 -0
  11. package/css/table.css +11 -50
  12. package/css/tile.css +368 -301
  13. package/css/tree.css +19 -14
  14. package/package.json +2 -2
  15. package/scss/badge/badge.scss +5 -2
  16. package/scss/button/button-group.scss +19 -41
  17. package/scss/button/button.scss +19 -1
  18. package/scss/button/classes.scss +0 -1
  19. package/scss/button/default.scss +1 -0
  20. package/scss/carousel/carousel.scss +119 -0
  21. package/scss/carousel/classes.scss +15 -0
  22. package/scss/carousel/index.scss +3 -0
  23. package/scss/classes.scss +3 -0
  24. package/scss/color-picker/color-picker.scss +13 -6
  25. package/scss/expandable-block/block.scss +23 -0
  26. package/scss/index.scss +3 -0
  27. package/scss/inputs/classes.scss +15 -9
  28. package/scss/inputs/index.scss +1 -0
  29. package/scss/inputs/input-with-icon.scss +36 -0
  30. package/scss/inputs/input.scss +1 -0
  31. package/scss/inputs/labeled-inputs.scss +47 -12
  32. package/scss/inputs/select.scss +44 -93
  33. package/scss/popover/classes.scss +7 -0
  34. package/scss/popover/index.scss +3 -0
  35. package/scss/popover/popover.scss +23 -0
  36. package/scss/side-navigation/side-navigation.scss +3 -6
  37. package/scss/skip-to-content/classes.scss +7 -0
  38. package/scss/skip-to-content/index.scss +3 -0
  39. package/scss/skip-to-content/skip-to-content.scss +36 -0
  40. package/scss/style/mixins.scss +29 -4
  41. package/scss/style/variables.scss +1 -0
  42. package/scss/table/paginator.scss +5 -10
  43. package/scss/table/table.scss +1 -1
  44. package/scss/tile/classes.scss +32 -0
  45. package/scss/tile/tile.scss +231 -235
  46. package/scss/tree/classes.scss +4 -0
  47. package/scss/tree/tree.scss +16 -4
package/css/table.css CHANGED
@@ -128,7 +128,7 @@
128
128
  scroll-snap-type:y mandatory; }
129
129
  .iui-table-body.iui-scroll-snapping .iui-row{
130
130
  scroll-snap-align:start none; }
131
- .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
131
+ .iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected){
132
132
  background-color:rgba(0, 0, 0, 0.02);
133
133
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
134
134
  .iui-table-body .iui-row{
@@ -398,56 +398,10 @@
398
398
  .iui-paginator-pages-group{
399
399
  display:inline-flex;
400
400
  align-items:center;
401
- isolation:isolate;
402
401
  margin:0 8px; }
403
- .iui-paginator-pages-group > *{
404
- display:flex; }
405
- .iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
406
- position:relative;
407
- transition-duration:0ms; }
408
- .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
409
- z-index:1; }
410
- .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
411
- z-index:2; }
412
- .iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
413
- z-index:revert; }
414
- .iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
415
- z-index:-1; }
416
- .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
417
- transition-duration:0.2s; }
418
- .iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
419
- content:'';
420
- position:absolute;
421
- height:2px;
422
- opacity:1;
423
- top:2px;
424
- left:2px;
425
- width:calc(100% - 4px);
426
- background-color:#008BE1;
427
- background-color:var(--iui-color-foreground-primary); }
428
- .iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
429
- background-color:rgba(0, 0, 0, 0.2);
430
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
431
- .iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
432
- border-radius:0; }
433
- .iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
434
- border-top-left-radius:3px;
435
- border-bottom-left-radius:3px; }
436
- .iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
437
- border-top-right-radius:3px;
438
- border-bottom-right-radius:3px; }
439
- .iui-paginator-pages-group > * + *{
440
- margin-left:-1px; }
441
- .iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
442
- border-left-color:#DCE0E3;
443
- border-left-color:var(--iui-color-background-4); }
444
- .iui-paginator-pages-group > * + *{
445
- margin-left:0; }
446
- .iui-paginator-pages-group button.iui-active::after{
447
- top:auto;
448
- bottom:2px; }
449
402
 
450
403
  .iui-paginator-page-button{
404
+ --_iui-button-active-stripe-inset:initial;
451
405
  margin:0;
452
406
  padding:0;
453
407
  border:none;
@@ -461,7 +415,6 @@
461
415
  box-sizing:border-box;
462
416
  border-radius:3px;
463
417
  line-height:22px;
464
- outline:none;
465
418
  box-shadow:none;
466
419
  font-size:14px;
467
420
  font-weight:400;
@@ -480,7 +433,8 @@
480
433
  padding:0 8px;
481
434
  height:38px;
482
435
  gap:8px;
483
- width:38px; }
436
+ width:38px;
437
+ --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px; }
484
438
  @media (prefers-reduced-motion: no-preference){
485
439
  .iui-paginator-page-button{
486
440
  transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
@@ -503,6 +457,13 @@
503
457
  background:var(--iui-color-background-disabled);
504
458
  border-color:var(--iui-color-background-disabled);
505
459
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
460
+ .iui-paginator-page-button.iui-active::after{
461
+ content:'';
462
+ position:absolute;
463
+ inset:var(--_iui-button-active-stripe-inset);
464
+ background-color:var(--iui-color-foreground-primary); }
465
+ .iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
466
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
506
467
  .iui-paginator-page-button > .iui-button-icon:only-child{
507
468
  margin-left:3px;
508
469
  margin-right:3px; }