@itwin/itwinui-css 0.59.2 → 1.0.0-dev.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 (202) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +1 -4
  3. package/css/alert.css +273 -139
  4. package/css/all.css +4046 -4967
  5. package/css/anchor.css +1 -5
  6. package/css/{user-icon.css → avatar.css} +51 -71
  7. package/css/backdrop.css +24 -0
  8. package/css/badge.css +2 -2
  9. package/css/blockquote.css +1 -4
  10. package/css/breadcrumbs.css +64 -137
  11. package/css/button.css +264 -349
  12. package/css/carousel.css +8 -16
  13. package/css/checkbox.css +149 -0
  14. package/css/code.css +5 -13
  15. package/css/color-picker.css +6 -44
  16. package/css/date-picker.css +6 -65
  17. package/css/dialog.css +63 -101
  18. package/css/expandable-block.css +1 -32
  19. package/css/fieldset.css +2 -7
  20. package/css/file-upload.css +0 -15
  21. package/css/footer.css +1 -9
  22. package/css/global.css +8 -63
  23. package/css/header.css +312 -398
  24. package/css/icon.css +0 -30
  25. package/css/information-panel.css +1 -15
  26. package/css/input.css +162 -0
  27. package/css/keyboard.css +2 -6
  28. package/css/location-marker.css +1 -12
  29. package/css/menu.css +1 -17
  30. package/css/progress-indicator.css +1 -93
  31. package/css/radio-tile.css +38 -65
  32. package/css/radio.css +156 -0
  33. package/css/select.css +230 -0
  34. package/css/side-navigation.css +5 -20
  35. package/css/skip-to-content.css +0 -3
  36. package/css/slider.css +2 -14
  37. package/css/stepper.css +141 -0
  38. package/css/surface.css +0 -1
  39. package/css/table.css +252 -339
  40. package/css/tabs.css +26 -65
  41. package/css/tag.css +7 -32
  42. package/css/text.css +1 -3
  43. package/css/textarea.css +96 -0
  44. package/css/tile.css +169 -155
  45. package/css/time-picker.css +2 -14
  46. package/css/{toast-notification.css → toast.css} +3 -45
  47. package/css/toggle-switch.css +13 -60
  48. package/css/tooltip.css +1 -4
  49. package/css/tree.css +0 -14
  50. package/css/utils.css +609 -0
  51. package/css/workflow-diagram.css +67 -0
  52. package/package.json +11 -7
  53. package/scss/alert/alert.scss +50 -44
  54. package/scss/alert/classes.scss +24 -4
  55. package/scss/anchor/anchor.scss +76 -1
  56. package/scss/{user-icon/sizes.scss → avatar/avatar-sizes.scss} +6 -5
  57. package/scss/{user-icon/user-icon.scss → avatar/avatar.scss} +35 -70
  58. package/scss/avatar/classes.scss +27 -0
  59. package/scss/{user-icon → avatar}/index.scss +1 -2
  60. package/scss/backdrop/backdrop.scss +27 -0
  61. package/scss/backdrop/classes.scss +7 -0
  62. package/scss/backdrop/index.scss +3 -0
  63. package/scss/badge/badge.scss +4 -2
  64. package/scss/blockquote/blockquote.scss +4 -9
  65. package/scss/breadcrumbs/breadcrumbs.scss +13 -18
  66. package/scss/button/borderless.scss +20 -32
  67. package/scss/button/button-group.scss +15 -7
  68. package/scss/button/button.scss +64 -42
  69. package/scss/button/classes.scss +47 -37
  70. package/scss/button/default.scss +33 -41
  71. package/scss/button/idea.scss +4 -2
  72. package/scss/button/index.scss +3 -6
  73. package/scss/button/split-button.scss +45 -0
  74. package/scss/button/variant.scss +44 -0
  75. package/scss/carousel/carousel.scss +12 -23
  76. package/scss/{inputs → checkbox}/checkbox.scss +50 -2
  77. package/scss/checkbox/classes.scss +7 -0
  78. package/scss/checkbox/index.scss +3 -0
  79. package/scss/classes.scss +11 -6
  80. package/scss/code/code.scss +3 -5
  81. package/scss/code/codeblock.scss +7 -21
  82. package/scss/color-picker/color-picker.scss +32 -61
  83. package/scss/date-picker/date-picker.scss +21 -55
  84. package/scss/dialog/classes.scss +7 -6
  85. package/scss/dialog/dialog.scss +95 -130
  86. package/scss/expandable-block/block.scss +22 -50
  87. package/scss/fieldset/fieldset.scss +6 -12
  88. package/scss/file-upload/file-upload.scss +13 -23
  89. package/scss/footer/footer.scss +5 -15
  90. package/scss/header/classes.scss +70 -2
  91. package/scss/header/header-buttons.scss +316 -0
  92. package/scss/header/header.scss +40 -408
  93. package/scss/header/index.scss +1 -0
  94. package/scss/icon/{mixins.scss → icon.scss} +5 -15
  95. package/scss/icon/index.scss +1 -2
  96. package/scss/index.scss +11 -6
  97. package/scss/information-panel/information-panel.scss +8 -26
  98. package/scss/input/classes.scss +15 -0
  99. package/scss/input/index.scss +4 -0
  100. package/scss/{inputs → input}/input-with-icon.scss +1 -0
  101. package/scss/{inputs → input}/input.scss +15 -25
  102. package/scss/keyboard/keyboard.scss +5 -9
  103. package/scss/location-marker/data-rich.scss +5 -14
  104. package/scss/location-marker/default.scss +1 -3
  105. package/scss/location-marker/location-marker.scss +1 -3
  106. package/scss/location-marker/me.scss +7 -14
  107. package/scss/menu/menu.scss +16 -36
  108. package/scss/non-ideal-state/non-ideal-state.scss +2 -1
  109. package/scss/progress-indicator/classes.scss +0 -4
  110. package/scss/progress-indicator/linear.scss +9 -27
  111. package/scss/progress-indicator/overlay.scss +4 -10
  112. package/scss/progress-indicator/radial.scss +10 -98
  113. package/scss/radio/classes.scss +7 -0
  114. package/scss/radio/index.scss +3 -0
  115. package/scss/{inputs → radio}/radio.scss +1 -1
  116. package/scss/radio-tile/radio-tile.scss +41 -83
  117. package/scss/select/classes.scss +27 -0
  118. package/scss/select/index.scss +3 -0
  119. package/scss/select/select.scss +124 -0
  120. package/scss/side-navigation/side-navigation.scss +26 -34
  121. package/scss/skip-to-content/skip-to-content.scss +2 -3
  122. package/scss/slider/slider.scss +12 -23
  123. package/scss/stepper/classes.scss +32 -0
  124. package/scss/stepper/index.scss +3 -0
  125. package/scss/stepper/stepper.scss +151 -0
  126. package/scss/style/{variables.scss → global-variables.scss} +4 -2
  127. package/scss/style/global.scss +9 -10
  128. package/scss/{icon/variables.scss → style/icon-sizes.scss} +1 -1
  129. package/scss/style/index.scss +6 -6
  130. package/scss/style/theme.scss +0 -39
  131. package/scss/style/typography.scss +5 -4
  132. package/scss/surface/surface.scss +0 -1
  133. package/scss/table/classes.scss +24 -23
  134. package/scss/table/column-filter.scss +2 -5
  135. package/scss/table/index.scss +1 -2
  136. package/scss/table/paginator.scss +22 -30
  137. package/scss/table/sizes.scss +31 -0
  138. package/scss/table/{variables.scss → table-densities.scss} +2 -1
  139. package/scss/table/table.scss +156 -228
  140. package/scss/tabs/borderless.scss +9 -22
  141. package/scss/tabs/classes.scss +4 -0
  142. package/scss/tabs/default.scss +11 -25
  143. package/scss/tabs/pill.scss +5 -15
  144. package/scss/tabs/tabs.scss +30 -57
  145. package/scss/tag/classes.scss +1 -0
  146. package/scss/tag/tag.scss +11 -21
  147. package/scss/text/mixins.scss +1 -0
  148. package/scss/text/muted.scss +2 -4
  149. package/scss/text/skeleton.scss +8 -11
  150. package/scss/textarea/classes.scss +7 -0
  151. package/scss/textarea/index.scss +3 -0
  152. package/scss/{inputs → textarea}/textarea.scss +2 -1
  153. package/scss/tile/classes.scss +14 -2
  154. package/scss/tile/tile.scss +99 -80
  155. package/scss/time-picker/time-picker.scss +8 -17
  156. package/scss/{toast-notification → toast}/categories.scss +3 -7
  157. package/scss/{toast-notification → toast}/classes.scss +0 -0
  158. package/scss/{toast-notification → toast}/index.scss +0 -0
  159. package/scss/{toast-notification → toast}/toast.scss +7 -16
  160. package/scss/toggle-switch/toggle-switch.scss +11 -30
  161. package/scss/tooltip/tooltip.scss +4 -5
  162. package/scss/tree/tree.scss +10 -22
  163. package/scss/utils/classes.scss +6 -0
  164. package/scss/utils/index.scss +6 -0
  165. package/scss/{inputs → utils/input-container}/classes.scss +0 -28
  166. package/scss/utils/input-container/index.scss +3 -0
  167. package/scss/{inputs/labeled-inputs.scss → utils/input-container/input-container.scss} +16 -113
  168. package/scss/{style → utils}/mixins.scss +26 -43
  169. package/scss/{notification-marker → utils/notification-marker}/classes.scss +0 -0
  170. package/scss/{notification-marker → utils/notification-marker}/index.scss +0 -0
  171. package/scss/{notification-marker → utils/notification-marker}/notification-marker.scss +11 -19
  172. package/scss/{popover → utils/popover}/classes.scss +0 -0
  173. package/scss/{popover → utils/popover}/index.scss +0 -0
  174. package/scss/{popover → utils/popover}/popover.scss +0 -1
  175. package/scss/workflow-diagram/classes.scss +15 -0
  176. package/scss/workflow-diagram/index.scss +3 -0
  177. package/scss/workflow-diagram/workflow-diagram.scss +64 -0
  178. package/src/index.scss +11 -6
  179. package/css/inputs.css +0 -1143
  180. package/css/notification-marker.css +0 -293
  181. package/css/popover.css +0 -14
  182. package/css/reset-global-styles.css +0 -50
  183. package/css/wizard.css +0 -190
  184. package/scss/button/button-icon.scss +0 -12
  185. package/scss/button/cta.scss +0 -31
  186. package/scss/button/disabled.scss +0 -13
  187. package/scss/button/high-visibility.scss +0 -31
  188. package/scss/button/split-menu.scss +0 -66
  189. package/scss/inputs/checkbox-radio.scss +0 -73
  190. package/scss/inputs/index.scss +0 -10
  191. package/scss/inputs/select.scss +0 -66
  192. package/scss/reset-global-styles.scss +0 -33
  193. package/scss/style/anchor.scss +0 -82
  194. package/scss/style/ripple.scss +0 -18
  195. package/scss/table/condensed.scss +0 -15
  196. package/scss/table/extra-condensed.scss +0 -19
  197. package/scss/user-icon/classes.scss +0 -27
  198. package/scss/wizard/classes.scss +0 -27
  199. package/scss/wizard/index.scss +0 -5
  200. package/scss/wizard/long.scss +0 -19
  201. package/scss/wizard/wizard.scss +0 -160
  202. package/scss/wizard/workflow.scss +0 -43
package/css/fieldset.css CHANGED
@@ -8,22 +8,18 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  padding:11px 12px;
11
- border-radius:3px;
12
- border:1px solid #c7ccd1;
13
- background-color:white;
11
+ border-radius:4px;
14
12
  border:1px solid var(--iui-color-background-border);
15
13
  background-color:var(--iui-color-background-1);
16
14
  }
17
15
  .iui-fieldset legend{
18
16
  font-size:16px;
19
17
  padding:1.5px 8px;
20
- border-radius:3px;
18
+ border-radius:4px;
21
19
  -webkit-user-select:none;
22
20
  -moz-user-select:none;
23
21
  -ms-user-select:none;
24
22
  user-select:none;
25
- background-color:#dde1e4;
26
- color:rgba(0, 0, 0, 0.8);
27
23
  background-color:var(--iui-color-background-4);
28
24
  color:var(--iui-text-color);
29
25
  }
@@ -31,6 +27,5 @@
31
27
  cursor:not-allowed;
32
28
  }
33
29
  .iui-fieldset[disabled] legend{
34
- color:rgba(0, 0, 0, 0.4);
35
30
  color:var(--iui-text-color-muted);
36
31
  }
package/css/file-upload.css CHANGED
@@ -23,14 +23,11 @@
23
23
  flex-direction:column;
24
24
  justify-content:center;
25
25
  align-items:center;
26
- box-sizing:border-box;
27
26
  -webkit-user-select:none;
28
27
  -moz-user-select:none;
29
28
  -ms-user-select:none;
30
29
  user-select:none;
31
30
  padding:6px 12px;
32
- background-color:#f9f9fb;
33
- border:1px solid #f9f9fb;
34
31
  background-color:var(--iui-color-background-2);
35
32
  border:1px solid var(--iui-color-background-2);
36
33
  }
@@ -40,11 +37,9 @@
40
37
  opacity:0;
41
38
  overflow:hidden;
42
39
  position:absolute;
43
- z-index:-1;
44
40
  }
45
41
  .iui-file-upload > .iui-content > svg,
46
42
  .iui-file-upload > .iui-content .iui-template-icon{
47
- fill:rgba(0, 0, 0, 0.4);
48
43
  fill:var(--iui-icons-color);
49
44
  display:inline-flex;
50
45
  width:64px;
@@ -54,22 +49,18 @@
54
49
  }
55
50
  .iui-file-upload > .iui-content > svg.iui-informational,
56
51
  .iui-file-upload > .iui-content .iui-template-icon.iui-informational{
57
- fill:#008ae0;
58
52
  fill:var(--iui-icons-color-primary);
59
53
  }
60
54
  .iui-file-upload > .iui-content > svg.iui-positive,
61
55
  .iui-file-upload > .iui-content .iui-template-icon.iui-positive{
62
- fill:#53a21a;
63
56
  fill:var(--iui-icons-color-positive);
64
57
  }
65
58
  .iui-file-upload > .iui-content > svg.iui-warning,
66
59
  .iui-file-upload > .iui-content .iui-template-icon.iui-warning{
67
- fill:#f18d13;
68
60
  fill:var(--iui-icons-color-warning);
69
61
  }
70
62
  .iui-file-upload > .iui-content > svg.iui-negative,
71
63
  .iui-file-upload > .iui-content .iui-template-icon.iui-negative{
72
- fill:#d10a0a;
73
64
  fill:var(--iui-icons-color-negative);
74
65
  }
75
66
  .iui-file-upload > .iui-content:only-child{
@@ -78,8 +69,6 @@
78
69
  flex-direction:row;
79
70
  }
80
71
  .iui-file-upload > .iui-content:only-child:focus-within{
81
- outline:2px solid #008ae0;
82
- outline-offset:-2px;
83
72
  outline:2px solid var(--iui-color-foreground-primary);
84
73
  outline-offset:-2px;
85
74
  }
@@ -90,9 +79,6 @@
90
79
  font-weight:700;
91
80
  }
92
81
  .iui-file-upload.iui-drag > .iui-content{
93
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
94
- border-color:#008ae0;
95
- color:#008ae0;
96
82
  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));
97
83
  border-color:var(--iui-color-foreground-primary);
98
84
  color:var(--iui-color-foreground-primary);
@@ -100,6 +86,5 @@
100
86
  }
101
87
  .iui-file-upload.iui-drag > .iui-content > svg,
102
88
  .iui-file-upload.iui-drag > .iui-content .iui-template-icon{
103
- fill:#008ae0;
104
89
  fill:var(--iui-icons-color-primary);
105
90
  }
package/css/footer.css CHANGED
@@ -29,7 +29,6 @@
29
29
  user-select:none;
30
30
  white-space:nowrap;
31
31
  word-break:keep-all;
32
- color:rgba(0, 0, 0, 0.4);
33
32
  color:var(--iui-text-color-muted);
34
33
  }
35
34
  .iui-legal-footer > ul > li .iui-separator{
@@ -37,16 +36,12 @@
37
36
  width:1px;
38
37
  height:11px;
39
38
  display:inline-table;
40
- background-color:rgba(0, 0, 0, 0.4);
41
39
  background-color:var(--iui-text-color-muted);
42
40
  }
43
41
  .iui-legal-footer > ul > li > a{
44
- color:#008ae0;
45
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
46
42
  color:var(--iui-color-foreground-primary);
47
43
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
48
- border-radius:3px;
49
- box-sizing:border-box;
44
+ border-radius:4px;
50
45
  cursor:pointer;
51
46
  text-decoration:none;
52
47
  }
@@ -61,7 +56,6 @@
61
56
  }
62
57
  }
63
58
  .iui-legal-footer > ul > li > a:hover{
64
- color:#006bad;
65
59
  color:var(--iui-color-foreground-primary-overlay);
66
60
  }
67
61
  .iui-legal-footer > ul > li > a:hover{
@@ -90,7 +84,6 @@
90
84
  }
91
85
 
92
86
  .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
93
- color:rgba(0, 0, 0, 0.4);
94
87
  color:var(--iui-text-color-muted);
95
88
  }
96
89
  .iui-legal-footer > .iui-legal-footer-developer{
@@ -98,6 +91,5 @@
98
91
  -webkit-user-select:all;
99
92
  -moz-user-select:all;
100
93
  user-select:all;
101
- color:rgba(0, 0, 0, 0.4);
102
94
  color:var(--iui-text-color-muted);
103
95
  }
package/css/global.css CHANGED
@@ -550,85 +550,30 @@ html.iui-theme-dark-hc{
550
550
  }
551
551
 
552
552
  .iui-body{
553
- background-color:#f9f9fb;
554
- color:rgba(0, 0, 0, 0.8);
555
553
  background-color:var(--iui-color-background-2);
556
554
  color:var(--iui-text-color);
557
555
  font-size:14px;
558
556
  line-height:22px;
559
- scrollbar-color:rgba(0, 0, 0, 0.4) transparent;
560
- scrollbar-width:thin;
561
557
  scrollbar-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)) transparent;
562
558
  scrollbar-width:thin;
563
- font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
559
+ font-family:"Noto Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
564
560
  }
565
561
  .iui-body::-webkit-scrollbar{
566
562
  width:8px;
567
563
  height:8px;
568
564
  }
569
565
  .iui-body::-webkit-scrollbar-thumb{
570
- background-color:rgba(0, 0, 0, 0.4);
571
566
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
572
567
  border-radius:4px;
573
568
  }
574
569
  .iui-body::-webkit-scrollbar-thumb:hover{
575
- background-color:rgba(0, 0, 0, 0.6);
576
570
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
577
571
  }
578
572
  .iui-body::-webkit-scrollbar-track, .iui-body::-webkit-scrollbar-corner{
579
573
  background-color:transparent;
580
574
  }
581
575
  .iui-body.iui-no-webfonts{
582
- font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
583
- }
584
-
585
- .iui-anchor{
586
- color:#008ae0;
587
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
588
- color:var(--iui-color-foreground-primary);
589
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
590
- border-radius:3px;
591
- box-sizing:border-box;
592
- cursor:pointer;
593
- text-decoration:none;
594
- }
595
- .iui-anchor:focus-visible{
596
- outline:1px solid var(--iui-color-foreground-primary);
597
- outline-offset:1px;
598
- }
599
- @supports not selector(*:focus-visible){
600
- .iui-anchor:focus{
601
- outline:1px solid var(--iui-color-foreground-primary);
602
- outline-offset:1px;
603
- }
604
- }
605
- .iui-anchor:hover{
606
- color:#006bad;
607
- color:var(--iui-color-foreground-primary-overlay);
608
- }
609
- .iui-anchor:hover{
610
- text-decoration:underline;
611
- }
612
- @media (prefers-contrast: more){
613
- .iui-anchor{
614
- text-decoration:underline;
615
- }
616
- .iui-anchor:hover{
617
- text-decoration:none;
618
- }
619
- }
620
- .iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
621
- text-decoration:none;
622
- }
623
- .iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
624
- text-decoration:underline;
625
- }
626
-
627
- .iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
628
- text-decoration:underline;
629
- }
630
- .iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
631
- text-decoration:none;
576
+ font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
632
577
  }
633
578
 
634
579
  .iui-visually-hidden{
@@ -646,20 +591,16 @@ html.iui-theme-dark-hc{
646
591
 
647
592
  [class*=iui-],
648
593
  [class*=iui-] *{
649
- scrollbar-color:rgba(0, 0, 0, 0.4) transparent;
650
- scrollbar-width:thin;
651
594
  scrollbar-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)) transparent;
652
595
  scrollbar-width:thin;
653
596
  }
654
597
  [class*=iui-]::-moz-selection, [class*=iui-] *::-moz-selection, [class*=iui-] *::-moz-selection, [class*=iui-] * *::-moz-selection{
655
- background-color:rgba(0, 138, 224, 0.2);
656
598
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
657
599
  }
658
600
  [class*=iui-]::selection,
659
601
  [class*=iui-] *::selection,
660
602
  [class*=iui-] *::selection,
661
603
  [class*=iui-] * *::selection{
662
- background-color:rgba(0, 138, 224, 0.2);
663
604
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
664
605
  }
665
606
  [class*=iui-]::-webkit-scrollbar,
@@ -669,17 +610,21 @@ html.iui-theme-dark-hc{
669
610
  }
670
611
  [class*=iui-]::-webkit-scrollbar-thumb,
671
612
  [class*=iui-] *::-webkit-scrollbar-thumb{
672
- background-color:rgba(0, 0, 0, 0.4);
673
613
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
674
614
  border-radius:4px;
675
615
  }
676
616
  [class*=iui-]::-webkit-scrollbar-thumb:hover,
677
617
  [class*=iui-] *::-webkit-scrollbar-thumb:hover{
678
- background-color:rgba(0, 0, 0, 0.6);
679
618
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
680
619
  }
681
620
  [class*=iui-]::-webkit-scrollbar-track, [class*=iui-]::-webkit-scrollbar-corner,
682
621
  [class*=iui-] *::-webkit-scrollbar-track,
683
622
  [class*=iui-] *::-webkit-scrollbar-corner{
684
623
  background-color:transparent;
624
+ }
625
+
626
+ [class*=iui-]:where(:not(.iui-body)),
627
+ [class*=iui-]:where(:not(.iui-body))::before,
628
+ [class*=iui-]:where(:not(.iui-body))::after{
629
+ box-sizing:border-box;
685
630
  }