@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  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/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/wizard.css CHANGED
@@ -2,189 +2,191 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-wizard{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- }
11
- .iui-wizard > ol{
12
- margin:0;
13
- padding:0;
14
- border:none;
15
- vertical-align:baseline;
16
- display:flex;
17
- justify-content:space-around;
18
- align-items:flex-start;
19
- width:100%;
20
- margin-bottom:5.5px;
21
- }
22
- .iui-wizard.iui-long .iui-wizard-steps-label{
23
- display:block;
24
- font-size:18px;
25
- text-align:center;
26
- }
27
- .iui-wizard.iui-long .iui-steps-count{
28
- -webkit-user-select:none;
29
- -moz-user-select:none;
30
- -ms-user-select:none;
31
- user-select:none;
32
- margin-right:8px;
33
- color:rgba(0, 0, 0, 0.4);
34
- color:var(--iui-text-color-muted);
35
- }
36
- .iui-wizard.iui-workflow > ol{
37
- align-items:center;
38
- }
39
- .iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
40
- padding-left:16px;
41
- padding-right:16px;
42
- height:100%;
43
- width:auto;
44
- border-radius:0;
45
- font-weight:400;
46
- text-align:center;
47
- background-color:#53a21a;
48
- border-color:#53a21a;
49
- color:white;
50
- background-color:var(--iui-color-background-positive);
51
- border-color:var(--iui-color-background-positive);
52
- color:var(--iui-color-foreground-accessory);
53
- }
54
- .iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
55
- border-radius:12px;
56
- background-color:white;
57
- border-color:#53a21a;
58
- color:#53a21a;
59
- background-color:var(--iui-color-background-1);
60
- border-color:var(--iui-color-foreground-positive);
61
- color:var(--iui-color-foreground-positive);
62
- }
63
- .iui-wizard.iui-workflow .iui-wizard-track-content::before,
5
+ @layer itwinui-v1{
6
+ .iui-wizard{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ }
12
+ .iui-wizard > ol{
13
+ margin:0;
14
+ padding:0;
15
+ border:none;
16
+ vertical-align:baseline;
17
+ display:flex;
18
+ justify-content:space-around;
19
+ align-items:flex-start;
20
+ width:100%;
21
+ margin-bottom:5.5px;
22
+ }
23
+ .iui-wizard.iui-long .iui-wizard-steps-label{
24
+ display:block;
25
+ font-size:18px;
26
+ text-align:center;
27
+ }
28
+ .iui-wizard.iui-long .iui-steps-count{
29
+ -webkit-user-select:none;
30
+ -moz-user-select:none;
31
+ -ms-user-select:none;
32
+ user-select:none;
33
+ margin-right:8px;
34
+ color:rgba(0, 0, 0, 0.4);
35
+ color:var(--iui-text-color-muted);
36
+ }
37
+ .iui-wizard.iui-workflow > ol{
38
+ align-items:center;
39
+ }
40
+ .iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
41
+ padding-left:16px;
42
+ padding-right:16px;
43
+ height:100%;
44
+ width:auto;
45
+ border-radius:0;
46
+ font-weight:400;
47
+ text-align:center;
48
+ background-color:#53a21a;
49
+ border-color:#53a21a;
50
+ color:white;
51
+ background-color:var(--iui-color-background-positive);
52
+ border-color:var(--iui-color-background-positive);
53
+ color:var(--iui-color-foreground-accessory);
54
+ }
55
+ .iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
56
+ border-radius:12px;
57
+ background-color:white;
58
+ border-color:#53a21a;
59
+ color:#53a21a;
60
+ background-color:var(--iui-color-background-1);
61
+ border-color:var(--iui-color-foreground-positive);
62
+ color:var(--iui-color-foreground-positive);
63
+ }
64
+ .iui-wizard.iui-workflow .iui-wizard-track-content::before,
64
65
  .iui-wizard.iui-workflow .iui-wizard-track-content::after{
65
- background-color:#53a21a;
66
- background-color:var(--iui-color-foreground-positive);
67
- }
66
+ background-color:#53a21a;
67
+ background-color:var(--iui-color-foreground-positive);
68
+ }
68
69
 
69
- .iui-wizard-step{
70
- flex:1;
71
- align-items:center;
72
- display:flex;
73
- flex-direction:column;
74
- margin:0;
75
- padding:0;
76
- border:none;
77
- vertical-align:baseline;
78
- font-size:12px;
79
- font-weight:400;
80
- line-height:22px;
81
- color:#53a21a;
82
- color:var(--iui-color-background-positive);
83
- }
84
- .iui-wizard-step .iui-wizard-circle{
85
- align-items:center;
86
- border-radius:50%;
87
- display:flex;
88
- width:24px;
89
- height:24px;
90
- justify-content:center;
91
- overflow-wrap:break-word;
92
- -webkit-user-select:none;
93
- -moz-user-select:none;
94
- -ms-user-select:none;
95
- user-select:none;
96
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
97
- border:1px solid #53a21a;
98
- background-color:white;
99
- color:#53a21a;
100
- border:1px solid var(--iui-color-foreground-positive);
101
- background-color:var(--iui-color-background-1);
102
- color:var(--iui-color-foreground-positive);
103
- }
104
- .iui-wizard-step.iui-current{
105
- font-weight:600;
106
- }
107
- .iui-wizard-step.iui-current .iui-wizard-step-name{
108
- color:#53a21a;
109
- color:var(--iui-color-foreground-positive);
110
- }
111
- .iui-wizard-step.iui-current .iui-wizard-circle{
112
- color:white;
113
- border-color:#53a21a;
114
- background-color:#53a21a;
115
- color:var(--iui-color-foreground-accessory);
116
- border-color:var(--iui-color-background-positive);
117
- background-color:var(--iui-color-background-positive);
118
- }
119
- .iui-wizard-step.iui-current .iui-wizard-track-content::after{
120
- background-color:#c7ccd1;
121
- background-color:var(--iui-color-background-5);
122
- }
123
- .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
124
- border:1px solid #c7ccd1;
125
- background-color:white;
126
- color:rgba(0, 0, 0, 0.4);
127
- border:1px solid var(--iui-color-background-border);
128
- background-color:var(--iui-color-background-1);
129
- color:var(--iui-text-color-muted);
130
- }
131
- .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
132
- color:rgba(0, 0, 0, 0.4);
133
- color:var(--iui-text-color-muted);
134
- }
135
- .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
136
- background-color:#c7ccd1;
137
- background-color:var(--iui-color-background-5);
138
- }
139
- .iui-wizard-step.iui-clickable .iui-wizard-circle{
140
- cursor:pointer;
141
- }
142
- @media (prefers-reduced-motion: no-preference){
70
+ .iui-wizard-step{
71
+ flex:1;
72
+ align-items:center;
73
+ display:flex;
74
+ flex-direction:column;
75
+ margin:0;
76
+ padding:0;
77
+ border:none;
78
+ vertical-align:baseline;
79
+ font-size:12px;
80
+ font-weight:400;
81
+ line-height:22px;
82
+ color:#53a21a;
83
+ color:var(--iui-color-background-positive);
84
+ }
85
+ .iui-wizard-step .iui-wizard-circle{
86
+ align-items:center;
87
+ border-radius:50%;
88
+ display:flex;
89
+ width:24px;
90
+ height:24px;
91
+ justify-content:center;
92
+ overflow-wrap:break-word;
93
+ -webkit-user-select:none;
94
+ -moz-user-select:none;
95
+ -ms-user-select:none;
96
+ user-select:none;
97
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
98
+ border:1px solid #53a21a;
99
+ background-color:white;
100
+ color:#53a21a;
101
+ border:1px solid var(--iui-color-foreground-positive);
102
+ background-color:var(--iui-color-background-1);
103
+ color:var(--iui-color-foreground-positive);
104
+ }
105
+ .iui-wizard-step.iui-current{
106
+ font-weight:600;
107
+ }
108
+ .iui-wizard-step.iui-current .iui-wizard-step-name{
109
+ color:#53a21a;
110
+ color:var(--iui-color-foreground-positive);
111
+ }
112
+ .iui-wizard-step.iui-current .iui-wizard-circle{
113
+ color:white;
114
+ border-color:#53a21a;
115
+ background-color:#53a21a;
116
+ color:var(--iui-color-foreground-accessory);
117
+ border-color:var(--iui-color-background-positive);
118
+ background-color:var(--iui-color-background-positive);
119
+ }
120
+ .iui-wizard-step.iui-current .iui-wizard-track-content::after{
121
+ background-color:#c7ccd1;
122
+ background-color:var(--iui-color-background-5);
123
+ }
124
+ .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
125
+ border:1px solid #c7ccd1;
126
+ background-color:white;
127
+ color:rgba(0, 0, 0, 0.4);
128
+ border:1px solid var(--iui-color-background-border);
129
+ background-color:var(--iui-color-background-1);
130
+ color:var(--iui-text-color-muted);
131
+ }
132
+ .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
133
+ color:rgba(0, 0, 0, 0.4);
134
+ color:var(--iui-text-color-muted);
135
+ }
136
+ .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
137
+ background-color:#c7ccd1;
138
+ background-color:var(--iui-color-background-5);
139
+ }
143
140
  .iui-wizard-step.iui-clickable .iui-wizard-circle{
144
- transition:background-color 0.2s ease-out;
145
- }
146
- }
147
- .iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
148
- color:white;
149
- border:1px solid #53a21a;
150
- background-color:#53a21a;
151
- color:var(--iui-color-foreground-accessory);
152
- border:1px solid var(--iui-color-background-positive);
153
- background-color:var(--iui-color-background-positive);
154
- }
155
- .iui-wizard-step.iui-clickable:focus{
156
- outline:0;
157
- }
158
- .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
159
- outline:2px solid #53a21a;
160
- outline:2px solid var(--iui-color-foreground-positive);
161
- outline-offset:-1px;
162
- }
163
- .iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
164
- outline:none;
165
- }
166
- .iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
167
- background-color:transparent;
168
- }
141
+ cursor:pointer;
142
+ }
143
+ @media (prefers-reduced-motion: no-preference){
144
+ .iui-wizard-step.iui-clickable .iui-wizard-circle{
145
+ transition:background-color 0.2s ease-out;
146
+ }
147
+ }
148
+ .iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
149
+ color:white;
150
+ border:1px solid #53a21a;
151
+ background-color:#53a21a;
152
+ color:var(--iui-color-foreground-accessory);
153
+ border:1px solid var(--iui-color-background-positive);
154
+ background-color:var(--iui-color-background-positive);
155
+ }
156
+ .iui-wizard-step.iui-clickable:focus{
157
+ outline:0;
158
+ }
159
+ .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
160
+ outline:2px solid #53a21a;
161
+ outline:2px solid var(--iui-color-foreground-positive);
162
+ outline-offset:-1px;
163
+ }
164
+ .iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
165
+ outline:none;
166
+ }
167
+ .iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
168
+ background-color:transparent;
169
+ }
169
170
 
170
- .iui-wizard-track-content{
171
- display:flex;
172
- align-items:center;
173
- width:100%;
174
- }
175
- .iui-wizard-track-content::before, .iui-wizard-track-content::after{
176
- content:"";
177
- height:2px;
178
- flex:1 2 auto;
179
- background-color:#53a21a;
180
- background-color:var(--iui-color-foreground-positive);
181
- }
171
+ .iui-wizard-track-content{
172
+ display:flex;
173
+ align-items:center;
174
+ width:100%;
175
+ }
176
+ .iui-wizard-track-content::before, .iui-wizard-track-content::after{
177
+ content:"";
178
+ height:2px;
179
+ flex:1 2 auto;
180
+ background-color:#53a21a;
181
+ background-color:var(--iui-color-foreground-positive);
182
+ }
182
183
 
183
- .iui-wizard-step-name{
184
- text-align:center;
185
- -webkit-user-select:all;
186
- -moz-user-select:all;
187
- user-select:all;
188
- color:#53a21a;
189
- color:var(--iui-color-foreground-positive);
184
+ .iui-wizard-step-name{
185
+ text-align:center;
186
+ -webkit-user-select:all;
187
+ -moz-user-select:all;
188
+ user-select:all;
189
+ color:#53a21a;
190
+ color:var(--iui-color-foreground-positive);
191
+ }
190
192
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.63.1",
3
+ "version": "0.63.2-dev.1",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/alert/classes.scss CHANGED
@@ -2,12 +2,14 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-alert {
6
- @include iui-alert;
5
+ @layer itwinui-v1 {
6
+ .iui-alert {
7
+ @include iui-alert;
7
8
 
8
- @each $status in positive, negative, warning, informational {
9
- &.iui-#{$status} {
10
- @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
9
+ @each $status in positive, negative, warning, informational {
10
+ &.iui-#{$status} {
11
+ @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
12
+ }
11
13
  }
12
14
  }
13
15
  }
package/scss/anchor/classes.scss CHANGED
@@ -2,10 +2,12 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-anchor {
6
- @include iui-anchor;
5
+ @layer itwinui-v1 {
6
+ .iui-anchor {
7
+ @include iui-anchor;
7
8
 
8
- &-external {
9
- @include iui-anchor-external;
9
+ &-external {
10
+ @include iui-anchor-external;
11
+ }
10
12
  }
11
13
  }
package/scss/backdrop/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-backdrop {
6
- @include iui-backdrop;
5
+ @layer itwinui-v1 {
6
+ .iui-backdrop {
7
+ @include iui-backdrop;
8
+ }
7
9
  }
package/scss/badge/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-badge {
6
- @include iui-badge;
5
+ @layer itwinui-v1 {
6
+ .iui-badge {
7
+ @include iui-badge;
8
+ }
7
9
  }
package/scss/blockquote/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-blockquote {
6
- @include iui-blockquote;
5
+ @layer itwinui-v1 {
6
+ .iui-blockquote {
7
+ @include iui-blockquote;
8
+ }
7
9
  }
package/scss/breadcrumbs/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-breadcrumbs {
6
- @include iui-breadcrumbs;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-breadcrumbs {
7
+ @include iui-breadcrumbs;
8
+ }
8
9
 
9
- .iui-breadcrumbs-list {
10
- @include iui-breadcrumbs-list;
11
- }
10
+ .iui-breadcrumbs-list {
11
+ @include iui-breadcrumbs-list;
12
+ }
12
13
 
13
- .iui-breadcrumbs-item {
14
- @include iui-breadcrumbs-item;
15
- }
14
+ .iui-breadcrumbs-item {
15
+ @include iui-breadcrumbs-item;
16
+ }
16
17
 
17
- .iui-breadcrumbs-item-overrides {
18
- @include iui-breadcrumbs-item-overrides;
19
- }
18
+ .iui-breadcrumbs-item-overrides {
19
+ @include iui-breadcrumbs-item-overrides;
20
+ }
20
21
 
21
- .iui-breadcrumbs-text {
22
- @include iui-breadcrumbs-text;
23
- }
22
+ .iui-breadcrumbs-text {
23
+ @include iui-breadcrumbs-text;
24
+ }
24
25
 
25
- .iui-breadcrumbs-button {
26
- @include iui-breadcrumbs-button;
27
- }
26
+ .iui-breadcrumbs-button {
27
+ @include iui-breadcrumbs-button;
28
+ }
28
29
 
29
- .iui-breadcrumbs-separator {
30
- @include iui-breadcrumbs-separator;
30
+ .iui-breadcrumbs-separator {
31
+ @include iui-breadcrumbs-separator;
32
+ }
31
33
  }
package/scss/button/classes.scss CHANGED
@@ -2,69 +2,71 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-button {
6
- @include iui-button;
7
- @include iui-button-size;
5
+ @layer itwinui-v1 {
6
+ .iui-button {
7
+ @include iui-button;
8
+ @include iui-button-size;
8
9
 
9
- &.iui-active {
10
- @include iui-button-active;
11
- }
10
+ &.iui-active {
11
+ @include iui-button-active;
12
+ }
12
13
 
13
- &.iui-default {
14
- @include iui-button-default;
15
- }
14
+ &.iui-default {
15
+ @include iui-button-default;
16
+ }
16
17
 
17
- &.iui-high-visibility {
18
- @include iui-button-high-visibility;
19
- }
18
+ &.iui-high-visibility {
19
+ @include iui-button-high-visibility;
20
+ }
20
21
 
21
- &.iui-cta {
22
- @include iui-button-cta;
23
- }
22
+ &.iui-cta {
23
+ @include iui-button-cta;
24
+ }
24
25
 
25
- &.iui-idea {
26
- @include iui-button-idea;
27
- }
26
+ &.iui-idea {
27
+ @include iui-button-idea;
28
+ }
28
29
 
29
- &.iui-borderless {
30
- @include iui-button-borderless;
31
- }
30
+ &.iui-borderless {
31
+ @include iui-button-borderless;
32
+ }
32
33
 
33
- @include iui-button-size(medium);
34
+ @include iui-button-size(medium);
34
35
 
35
- &.iui-small {
36
- @include iui-button-size(small);
36
+ &.iui-small {
37
+ @include iui-button-size(small);
37
38
 
38
- &.iui-borderless {
39
- @include iui-button-size(small, borderless);
39
+ &.iui-borderless {
40
+ @include iui-button-size(small, borderless);
41
+ }
40
42
  }
41
- }
42
43
 
43
- &.iui-large {
44
- @include iui-button-size(large);
44
+ &.iui-large {
45
+ @include iui-button-size(large);
45
46
 
46
- &.iui-borderless {
47
- @include iui-button-size(large, borderless);
47
+ &.iui-borderless {
48
+ @include iui-button-size(large, borderless);
49
+ }
48
50
  }
49
51
  }
50
- }
51
52
 
52
- .iui-button-group {
53
- @include iui-button-group;
53
+ .iui-button-group {
54
+ @include iui-button-group;
54
55
 
55
- &-vertical {
56
- @include iui-button-group(vertical);
57
- }
56
+ &-vertical {
57
+ @include iui-button-group(vertical);
58
+ }
58
59
 
59
- &-overflow-x {
60
- @include iui-button-group-overflow-x;
60
+ &-overflow-x {
61
+ @include iui-button-group-overflow-x;
62
+ }
61
63
  }
62
- }
63
64
 
64
- .iui-button-split-menu {
65
- @include iui-button-split-menu;
66
- }
65
+ .iui-button-split-menu {
66
+ @include iui-button-split-menu;
67
+ }
67
68
 
68
- .iui-button-icon {
69
- @include iui-button-icon;
69
+ .iui-button-icon {
70
+ @include iui-button-icon;
71
+ }
70
72
  }
package/scss/carousel/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-carousel {
6
- @include iui-carousel;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-carousel {
7
+ @include iui-carousel;
8
+ }
8
9
 
9
- .iui-carousel-slider {
10
- @include iui-carousel-slider;
11
- }
10
+ .iui-carousel-slider {
11
+ @include iui-carousel-slider;
12
+ }
12
13
 
13
- .iui-carousel-navigation {
14
- @include iui-carousel-navigation;
14
+ .iui-carousel-navigation {
15
+ @include iui-carousel-navigation;
16
+ }
15
17
  }