@itwin/itwinui-css 0.63.2-dev.0 → 0.63.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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/scss/inputs/classes.scss CHANGED
@@ -2,86 +2,88 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-input-container {
6
- @include iui-input-container;
5
+ @layer itwinui-v1 {
6
+ .iui-input-container {
7
+ @include iui-input-container;
7
8
 
8
- > .iui-label {
9
- @include iui-input-container-label;
10
- }
9
+ > .iui-label {
10
+ @include iui-input-container-label;
11
+ }
11
12
 
12
- .iui-input-icon {
13
- @include iui-input-icon;
14
- }
13
+ .iui-input-icon {
14
+ @include iui-input-icon;
15
+ }
15
16
 
16
- .iui-message {
17
- @include iui-input-message;
18
- }
17
+ .iui-message {
18
+ @include iui-input-message;
19
+ }
19
20
 
20
- &.iui-inline-icon > .iui-input-icon {
21
- @include iui-input-icon-inline;
22
- }
21
+ &.iui-inline-icon > .iui-input-icon {
22
+ @include iui-input-icon-inline;
23
+ }
23
24
 
24
- &.iui-inline-label {
25
- > .iui-label {
26
- @include iui-input-label-inline;
25
+ &.iui-inline-label {
26
+ > .iui-label {
27
+ @include iui-input-label-inline;
28
+ }
27
29
  }
28
- }
29
30
 
30
- @each $status in positive, negative, warning {
31
- &.iui-#{$status} {
32
- @include iui-input-status($status: $status);
31
+ @each $status in positive, negative, warning {
32
+ &.iui-#{$status} {
33
+ @include iui-input-status($status: $status);
34
+ }
33
35
  }
34
36
  }
35
- }
36
37
 
37
- .iui-input-label {
38
- @include iui-input-label;
39
- }
38
+ .iui-input-label {
39
+ @include iui-input-label;
40
+ }
40
41
 
41
- .iui-input {
42
- @include iui-input;
43
- }
42
+ .iui-input {
43
+ @include iui-input;
44
+ }
44
45
 
45
- .iui-select-button {
46
- @include iui-select-button;
47
- }
46
+ .iui-select-button {
47
+ @include iui-select-button;
48
+ }
48
49
 
49
- .iui-select-tag-container {
50
- @include iui-select-tag-container;
51
- }
50
+ .iui-select-tag-container {
51
+ @include iui-select-tag-container;
52
+ }
52
53
 
53
- .iui-select-tag {
54
- @include iui-select-tag;
55
- }
54
+ .iui-select-tag {
55
+ @include iui-select-tag;
56
+ }
56
57
 
57
- .iui-select-tag-label {
58
- @include iui-select-tag-label;
59
- }
58
+ .iui-select-tag-label {
59
+ @include iui-select-tag-label;
60
+ }
60
61
 
61
- .iui-select-tag-button {
62
- @include iui-select-tag-button;
63
- }
62
+ .iui-select-tag-button {
63
+ @include iui-select-tag-button;
64
+ }
64
65
 
65
- .iui-select-tag-button-icon {
66
- @include iui-select-tag-button-icon;
67
- }
66
+ .iui-select-tag-button-icon {
67
+ @include iui-select-tag-button-icon;
68
+ }
68
69
 
69
- .iui-textarea {
70
- @include iui-textarea;
71
- }
70
+ .iui-textarea {
71
+ @include iui-textarea;
72
+ }
72
73
 
73
- .iui-input-with-icon {
74
- @include iui-input-with-icon;
75
- }
74
+ .iui-input-with-icon {
75
+ @include iui-input-with-icon;
76
+ }
76
77
 
77
- .iui-end-icon {
78
- @include iui-end-icon;
79
- }
78
+ .iui-end-icon {
79
+ @include iui-end-icon;
80
+ }
80
81
 
81
- .iui-checkbox {
82
- @include iui-checkbox;
83
- }
82
+ .iui-checkbox {
83
+ @include iui-checkbox;
84
+ }
84
85
 
85
- .iui-radio {
86
- @include iui-radio;
86
+ .iui-radio {
87
+ @include iui-radio;
88
+ }
87
89
  }
package/scss/keyboard/classes.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-keyboard {
6
- @include iui-keyboard;
5
+ @layer itwinui-v1 {
6
+ .iui-keyboard {
7
+ @include iui-keyboard;
8
+ }
7
9
  }
package/scss/location-marker/classes.scss CHANGED
@@ -2,14 +2,16 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-location-marker-default {
6
- @include iui-location-marker-default;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-location-marker-default {
7
+ @include iui-location-marker-default;
8
+ }
8
9
 
9
- .iui-location-marker-data-rich {
10
- @include iui-location-marker-data-rich;
11
- }
10
+ .iui-location-marker-data-rich {
11
+ @include iui-location-marker-data-rich;
12
+ }
12
13
 
13
- .iui-location-marker-me {
14
- @include iui-location-marker-me;
14
+ .iui-location-marker-me {
15
+ @include iui-location-marker-me;
16
+ }
15
17
  }
package/scss/menu/classes.scss CHANGED
@@ -3,19 +3,21 @@
3
3
  @import './index';
4
4
  @import '../surface/index';
5
5
 
6
- .iui-menu {
7
- @include iui-surface;
8
- @include iui-list-menu;
9
- }
6
+ @layer itwinui-v1 {
7
+ .iui-menu {
8
+ @include iui-surface;
9
+ @include iui-list-menu;
10
+ }
10
11
 
11
- .iui-menu-item {
12
- @include iui-menu-item;
13
- }
12
+ .iui-menu-item {
13
+ @include iui-menu-item;
14
+ }
14
15
 
15
- .iui-menu-content {
16
- @include iui-menu-content;
17
- }
16
+ .iui-menu-content {
17
+ @include iui-menu-content;
18
+ }
18
19
 
19
- .iui-menu-divider {
20
- @include iui-menu-divider;
20
+ .iui-menu-divider {
21
+ @include iui-menu-divider;
22
+ }
21
23
  }
package/scss/non-ideal-state/classes.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-non-ideal-state {
6
- @include iui-non-ideal-state;
5
+ @layer itwinui-v1 {
6
+ .iui-non-ideal-state {
7
+ @include iui-non-ideal-state;
8
+ }
7
9
  }
package/scss/notification-marker/classes.scss CHANGED
@@ -2,8 +2,10 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- @each $status in primary, positive, warning, negative, accessory {
6
- .iui-notification-#{$status} {
7
- @include iui-notification-marker($status: $status);
5
+ @layer itwinui-v1 {
6
+ @each $status in primary, positive, warning, negative, accessory {
7
+ .iui-notification-#{$status} {
8
+ @include iui-notification-marker($status: $status);
9
+ }
8
10
  }
9
11
  }
package/scss/popover/classes.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-popover {
6
- @include iui-popover;
5
+ @layer itwinui-v1 {
6
+ .iui-popover {
7
+ @include iui-popover;
8
+ }
7
9
  }
package/scss/progress-indicator/classes.scss CHANGED
@@ -2,34 +2,36 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-progress-indicator-linear {
6
- @include iui-progress-indicator-linear;
5
+ @layer itwinui-v1 {
6
+ .iui-progress-indicator-linear {
7
+ @include iui-progress-indicator-linear;
7
8
 
8
- > .iui-track > .iui-determinate {
9
- @include iui-progress-indicator-linear-determinate;
9
+ > .iui-track > .iui-determinate {
10
+ @include iui-progress-indicator-linear-determinate;
11
+ }
12
+
13
+ &:not(.iui-negative):not(.iui-positive) > .iui-track > .iui-indeterminate {
14
+ @include iui-progress-indicator-linear-indeterminate;
15
+ }
10
16
  }
11
17
 
12
- &:not(.iui-negative):not(.iui-positive) > .iui-track > .iui-indeterminate {
13
- @include iui-progress-indicator-linear-indeterminate;
18
+ .iui-progress-indicator-radial-ie {
19
+ @include iui-progress-indicator-radial-ie;
14
20
  }
15
- }
16
21
 
17
- .iui-progress-indicator-radial-ie {
18
- @include iui-progress-indicator-radial-ie;
19
- }
22
+ .iui-progress-indicator-radial {
23
+ @include iui-progress-indicator-radial;
20
24
 
21
- .iui-progress-indicator-radial {
22
- @include iui-progress-indicator-radial;
25
+ &.iui-determinate:not(.iui-positive) {
26
+ @include iui-progress-indicator-radial-determinate;
27
+ }
23
28
 
24
- &.iui-determinate:not(.iui-positive) {
25
- @include iui-progress-indicator-radial-determinate;
29
+ &.iui-indeterminate:not(.iui-negative):not(.iui-positive) {
30
+ @include iui-progress-indicator-radial-indeterminate;
31
+ }
26
32
  }
27
33
 
28
- &.iui-indeterminate:not(.iui-negative):not(.iui-positive) {
29
- @include iui-progress-indicator-radial-indeterminate;
34
+ .iui-progress-indicator-overlay {
35
+ @include iui-progress-indicator-overlay;
30
36
  }
31
37
  }
32
-
33
- .iui-progress-indicator-overlay {
34
- @include iui-progress-indicator-overlay;
35
- }
package/scss/radio-tile/classes.scss CHANGED
@@ -2,30 +2,32 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-radio-tile {
6
- @include iui-radio-tile;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-radio-tile {
7
+ @include iui-radio-tile;
8
+ }
8
9
 
9
- .iui-radio-tile-content {
10
- @include iui-radio-tile-content;
11
- }
10
+ .iui-radio-tile-content {
11
+ @include iui-radio-tile-content;
12
+ }
12
13
 
13
- .iui-radio-tile-container {
14
- @include iui-radio-tile-container;
15
- }
14
+ .iui-radio-tile-container {
15
+ @include iui-radio-tile-container;
16
+ }
16
17
 
17
- .iui-radio-tile-input {
18
- @include iui-radio-tile-input;
19
- }
18
+ .iui-radio-tile-input {
19
+ @include iui-radio-tile-input;
20
+ }
20
21
 
21
- .iui-radio-tile-icon {
22
- @include iui-radio-tile-icon;
23
- }
22
+ .iui-radio-tile-icon {
23
+ @include iui-radio-tile-icon;
24
+ }
24
25
 
25
- .iui-radio-tile-label {
26
- @include iui-radio-tile-label;
27
- }
26
+ .iui-radio-tile-label {
27
+ @include iui-radio-tile-label;
28
+ }
28
29
 
29
- .iui-radio-tile-sublabel {
30
- @include iui-radio-tile-sublabel;
30
+ .iui-radio-tile-sublabel {
31
+ @include iui-radio-tile-sublabel;
32
+ }
31
33
  }
package/scss/reset-global-styles.scss CHANGED
@@ -3,31 +3,33 @@
3
3
  @import './style/index';
4
4
  @import './text/mixins';
5
5
 
6
- html,
7
- body {
8
- @include iui-font-family;
9
- @include iui-text(body);
10
- }
6
+ @layer itwinui-v1 {
7
+ html,
8
+ body {
9
+ @include iui-font-family;
10
+ @include iui-text(body);
11
+ }
11
12
 
12
- b,
13
- strong {
14
- font-weight: $iui-font-weight-bold;
15
- }
13
+ b,
14
+ strong {
15
+ font-weight: $iui-font-weight-bold;
16
+ }
16
17
 
17
- caption,
18
- small {
19
- @include iui-text(small);
20
- }
18
+ caption,
19
+ small {
20
+ @include iui-text(small);
21
+ }
21
22
 
22
- p {
23
- margin-bottom: $iui-line-height;
24
- }
23
+ p {
24
+ margin-bottom: $iui-line-height;
25
+ }
25
26
 
26
- h1,
27
- h2,
28
- h3,
29
- h4,
30
- h5,
31
- h6 {
32
- @include iui-text(body);
27
+ h1,
28
+ h2,
29
+ h3,
30
+ h4,
31
+ h5,
32
+ h6 {
33
+ @include iui-text(body);
34
+ }
33
35
  }
package/scss/side-navigation/classes.scss CHANGED
@@ -2,14 +2,16 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-side-navigation {
6
- @include iui-side-navigation;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-side-navigation {
7
+ @include iui-side-navigation;
8
+ }
8
9
 
9
- .iui-side-navigation-submenu {
10
- @include iui-side-navigation-submenu;
11
- }
10
+ .iui-side-navigation-submenu {
11
+ @include iui-side-navigation-submenu;
12
+ }
12
13
 
13
- .iui-side-navigation-wrapper {
14
- @include iui-side-navigation-wrapper;
14
+ .iui-side-navigation-wrapper {
15
+ @include iui-side-navigation-wrapper;
16
+ }
15
17
  }
package/scss/skip-to-content/classes.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-skip-to-content-link {
6
- @include iui-skip-to-content-link;
5
+ @layer itwinui-v1 {
6
+ .iui-skip-to-content-link {
7
+ @include iui-skip-to-content-link;
8
+ }
7
9
  }
package/scss/slider/classes.scss CHANGED
@@ -2,39 +2,41 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-slider-horizontal {
6
- @include iui-slider-horizontal;
7
- }
8
-
9
- .iui-slider-vertical {
10
- @include iui-slider-vertical;
11
- }
12
-
13
- .iui-slider-component-container {
14
- @include iui-slider-component-container;
15
- }
16
-
17
- .iui-slider-container {
18
- @include iui-slider-container;
19
- }
20
-
21
- .iui-slider-ticks {
22
- @include iui-slider-ticks;
23
- }
24
-
25
- .iui-slider-rail {
26
- @include iui-slider-rail;
27
- }
28
-
29
- .iui-slider-thumb {
30
- @include iui-slider-thumb;
31
- }
32
-
33
- .iui-slider-track {
34
- @include iui-slider-track;
35
- }
36
-
37
- .iui-slider-min,
38
- .iui-slider-max {
39
- @include iui-slider-endpoints;
5
+ @layer itwinui-v1 {
6
+ .iui-slider-horizontal {
7
+ @include iui-slider-horizontal;
8
+ }
9
+
10
+ .iui-slider-vertical {
11
+ @include iui-slider-vertical;
12
+ }
13
+
14
+ .iui-slider-component-container {
15
+ @include iui-slider-component-container;
16
+ }
17
+
18
+ .iui-slider-container {
19
+ @include iui-slider-container;
20
+ }
21
+
22
+ .iui-slider-ticks {
23
+ @include iui-slider-ticks;
24
+ }
25
+
26
+ .iui-slider-rail {
27
+ @include iui-slider-rail;
28
+ }
29
+
30
+ .iui-slider-thumb {
31
+ @include iui-slider-thumb;
32
+ }
33
+
34
+ .iui-slider-track {
35
+ @include iui-slider-track;
36
+ }
37
+
38
+ .iui-slider-min,
39
+ .iui-slider-max {
40
+ @include iui-slider-endpoints;
41
+ }
40
42
  }
package/scss/style/global.scss CHANGED
@@ -3,68 +3,70 @@
3
3
  @import './index';
4
4
  @import './anchor';
5
5
 
6
- html {
7
- @include theme-variables(light);
6
+ @layer itwinui-v1 {
7
+ html {
8
+ @include theme-variables(light);
8
9
 
9
- @media (prefers-color-scheme: dark) {
10
- @include theme-variables(dark);
11
- }
10
+ @media (prefers-color-scheme: dark) {
11
+ @include theme-variables(dark);
12
+ }
12
13
 
13
- @media (prefers-color-scheme: light) and (prefers-contrast: more) {
14
- @include theme-variables(light-hc);
15
- }
14
+ @media (prefers-color-scheme: light) and (prefers-contrast: more) {
15
+ @include theme-variables(light-hc);
16
+ }
16
17
 
17
- @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
18
- @include theme-variables(dark-hc);
19
- }
18
+ @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
19
+ @include theme-variables(dark-hc);
20
+ }
20
21
 
21
- &.iui-theme-light {
22
- @include theme-variables(light);
23
- }
22
+ &.iui-theme-light {
23
+ @include theme-variables(light);
24
+ }
24
25
 
25
- &.iui-theme-dark {
26
- @include theme-variables(dark);
27
- }
26
+ &.iui-theme-dark {
27
+ @include theme-variables(dark);
28
+ }
28
29
 
29
- &.iui-theme-light-hc {
30
- @include theme-variables(light-hc);
31
- }
30
+ &.iui-theme-light-hc {
31
+ @include theme-variables(light-hc);
32
+ }
32
33
 
33
- &.iui-theme-dark-hc {
34
- @include theme-variables(dark-hc);
34
+ &.iui-theme-dark-hc {
35
+ @include theme-variables(dark-hc);
36
+ }
35
37
  }
36
- }
37
38
 
38
- .iui-body {
39
- @include themed {
40
- background-color: t(iui-color-background-2);
41
- color: t(iui-text-color);
42
- }
39
+ .iui-body {
40
+ @include themed {
41
+ background-color: t(iui-color-background-2);
42
+ color: t(iui-text-color);
43
+ }
43
44
 
44
- font-size: $iui-font-size;
45
- line-height: $iui-line-height;
45
+ font-size: $iui-font-size;
46
+ line-height: $iui-line-height;
46
47
 
47
- @include iui-scrollbar;
48
- @include iui-font-family;
48
+ @include iui-scrollbar;
49
+ @include iui-font-family;
49
50
 
50
- &.iui-no-webfonts {
51
- font-family: $iui-sans-fallback;
51
+ &.iui-no-webfonts {
52
+ font-family: $iui-sans-fallback;
53
+ }
52
54
  }
53
- }
54
55
 
55
- .iui-anchor {
56
- @include iui-anchor;
57
- }
56
+ .iui-anchor {
57
+ @include iui-anchor;
58
+ }
58
59
 
59
- .iui-visually-hidden {
60
- @include visually-hidden;
61
- }
60
+ .iui-visually-hidden {
61
+ @include visually-hidden;
62
+ }
62
63
 
63
- [class*='iui-'],
64
- [class*='iui-'] * {
65
- // Text highlight
66
- @include iui-text-selection;
64
+ [class*='iui-'],
65
+ [class*='iui-'] * {
66
+ // Text highlight
67
+ @include iui-text-selection;
67
68
 
68
- // Scrollbar
69
- @include iui-scrollbar;
69
+ // Scrollbar
70
+ @include iui-scrollbar;
71
+ }
70
72
  }
package/scss/surface/classes.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-surface {
6
- @include iui-surface;
5
+ @layer itwinui-v1 {
6
+ .iui-surface {
7
+ @include iui-surface;
8
+ }
7
9
  }