@itwin/itwinui-css 1.0.0-dev.15 → 1.0.0-dev.16

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 (49) hide show
  1. package/css/alert.css +1 -295
  2. package/css/all.css +1 -8825
  3. package/css/anchor.css +1 -56
  4. package/css/avatar.css +1 -225
  5. package/css/backdrop.css +1 -22
  6. package/css/badge.css +1 -25
  7. package/css/blockquote.css +1 -28
  8. package/css/breadcrumbs.css +1 -346
  9. package/css/button.css +1 -388
  10. package/css/carousel.css +1 -121
  11. package/css/checkbox.css +1 -148
  12. package/css/code.css +1 -85
  13. package/css/color-picker.css +1 -200
  14. package/css/date-picker.css +1 -394
  15. package/css/dialog.css +1 -161
  16. package/css/expandable-block.css +1 -171
  17. package/css/fieldset.css +1 -28
  18. package/css/file-upload.css +1 -78
  19. package/css/footer.css +1 -83
  20. package/css/global.css +1 -59
  21. package/css/header.css +1 -437
  22. package/css/information-panel.css +1 -190
  23. package/css/input.css +1 -167
  24. package/css/keyboard.css +1 -27
  25. package/css/location-marker.css +1 -114
  26. package/css/menu.css +1 -169
  27. package/css/non-ideal-state.css +1 -59
  28. package/css/progress-indicator.css +1 -299
  29. package/css/radio-tile.css +1 -188
  30. package/css/radio.css +1 -155
  31. package/css/select.css +1 -239
  32. package/css/side-navigation.css +1 -211
  33. package/css/skip-to-content.css +1 -61
  34. package/css/slider.css +1 -261
  35. package/css/stepper.css +1 -137
  36. package/css/surface.css +1 -11
  37. package/css/table.css +1 -723
  38. package/css/tabs.css +1 -324
  39. package/css/tag.css +1 -132
  40. package/css/text.css +1 -115
  41. package/css/tile.css +1 -491
  42. package/css/time-picker.css +1 -128
  43. package/css/toast.css +1 -315
  44. package/css/toggle-switch.css +1 -207
  45. package/css/tooltip.css +1 -48
  46. package/css/tree.css +1 -126
  47. package/css/utils.css +1 -513
  48. package/css/workflow-diagram.css +1 -63
  49. package/package.json +8 -4
package/css/slider.css CHANGED
@@ -2,264 +2,4 @@
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-slider-horizontal{
6
- min-height:calc(var(--iui-size-s) * 2);
7
- }
8
- .iui-slider-horizontal .iui-slider-rail{
9
- width:100%;
10
- height:var(--iui-size-2xs);
11
- top:var(--iui-size-s);
12
- }
13
- .iui-slider-horizontal .iui-slider-thumb{
14
- top:calc(var(--iui-size-2xs) + 1px);
15
- transform:translateX(-50%);
16
- }
17
- .iui-slider-horizontal .iui-slider-track{
18
- height:var(--iui-size-2xs);
19
- left:0;
20
- }
21
- .iui-slider-horizontal .iui-slider-ticks{
22
- padding-top:var(--iui-size-m);
23
- }
24
- .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{
25
- flex-direction:column;
26
- width:1px;
27
- }
28
- .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
29
- content:"";
30
- width:1px;
31
- height:var(--iui-size-s);
32
- }
33
- .iui-slider-horizontal .iui-slider-min,
34
- .iui-slider-horizontal .iui-slider-max{
35
- margin-top:var(--iui-size-3xs);
36
- min-width:var(--iui-size-l);
37
- flex-direction:row;
38
- }
39
- .iui-slider-horizontal .iui-slider-min svg,
40
- .iui-slider-horizontal .iui-slider-max svg{
41
- margin-top:var(--iui-size-2xs);
42
- }
43
- .iui-slider-horizontal .iui-slider-min{
44
- margin-right:var(--iui-size-s);
45
- text-align:right;
46
- }
47
- .iui-slider-horizontal .iui-slider-max{
48
- margin-left:var(--iui-size-s);
49
- }
50
-
51
- .iui-slider-vertical{
52
- flex-direction:column-reverse;
53
- min-width:calc(var(--iui-size-s) * 2);
54
- height:100%;
55
- }
56
- .iui-slider-vertical .iui-slider-rail{
57
- width:var(--iui-size-2xs);
58
- height:100%;
59
- left:var(--iui-size-s);
60
- }
61
- .iui-slider-vertical .iui-slider-thumb{
62
- transform:translateY(50%);
63
- left:calc(var(--iui-size-2xs) + 1px);
64
- }
65
- .iui-slider-vertical .iui-slider-track{
66
- width:var(--iui-size-2xs);
67
- bottom:0;
68
- left:var(--iui-size-s);
69
- }
70
- .iui-slider-vertical .iui-slider-ticks{
71
- padding-left:var(--iui-size-m);
72
- flex-direction:column-reverse;
73
- align-items:flex-start;
74
- height:100%;
75
- }
76
- .iui-slider-vertical .iui-slider-ticks .iui-slider-tick{
77
- flex:row;
78
- height:1px;
79
- }
80
- .iui-slider-vertical .iui-slider-ticks .iui-slider-tick::before{
81
- content:"";
82
- width:var(--iui-size-s);
83
- height:1px;
84
- margin-right:var(--iui-size-s);
85
- }
86
- .iui-slider-vertical .iui-slider-min,
87
- .iui-slider-vertical .iui-slider-max{
88
- margin-left:calc(var(--iui-size-3xs) + var(--iui-size-s));
89
- text-align:center;
90
- transform:translate(-50%, 0);
91
- min-height:var(--iui-size-l);
92
- flex-direction:column;
93
- }
94
- .iui-slider-vertical .iui-slider-min{
95
- margin-top:var(--iui-size-s);
96
- }
97
- .iui-slider-vertical .iui-slider-max{
98
- margin-bottom:var(--iui-size-s);
99
- }
100
-
101
- .iui-slider-component-container{
102
- display:flex;
103
- align-items:start;
104
- }
105
- .iui-slider-component-container.iui-disabled{
106
- cursor:not-allowed;
107
- }
108
- .iui-slider-component-container.iui-disabled .iui-slider-container{
109
- cursor:not-allowed;
110
- pointer-events:none;
111
- }
112
- .iui-slider-component-container.iui-disabled .iui-slider-rail{
113
- background-color:var(--iui-color-background-disabled);
114
- }
115
- .iui-slider-component-container.iui-disabled .iui-slider-thumb{
116
- cursor:not-allowed;
117
- background-color:var(--iui-color-border);
118
- border-color:var(--iui-color-border);
119
- }
120
- @media (forced-colors: active){
121
- .iui-slider-component-container.iui-disabled .iui-slider-thumb{
122
- background-color:GrayText;
123
- border-color:GrayText;
124
- }
125
- }
126
- .iui-slider-component-container.iui-disabled .iui-slider-track{
127
- background-color:var(--iui-color-border);
128
- }
129
- @media (forced-colors: active){
130
- .iui-slider-component-container.iui-disabled .iui-slider-track{
131
- background-color:GrayText;
132
- }
133
- }
134
- .iui-slider-component-container.iui-disabled .iui-slider-min,
135
- .iui-slider-component-container.iui-disabled .iui-slider-max,
136
- .iui-slider-component-container.iui-disabled .iui-slider-tick{
137
- -webkit-user-select:none;
138
- -moz-user-select:none;
139
- -ms-user-select:none;
140
- user-select:none;
141
- color:var(--iui-color-text-disabled);
142
- }
143
- @media (forced-colors: active){
144
- .iui-slider-component-container.iui-disabled .iui-slider-min,
145
- .iui-slider-component-container.iui-disabled .iui-slider-max,
146
- .iui-slider-component-container.iui-disabled .iui-slider-tick{
147
- color:GrayText;
148
- }
149
- }
150
-
151
- .iui-slider-container{
152
- position:relative;
153
- flex-grow:1;
154
- cursor:pointer;
155
- touch-action:pan-y;
156
- isolation:isolate;
157
- }
158
- .iui-slider-container.iui-grabbing{
159
- cursor:-webkit-grabbing;
160
- cursor:grabbing;
161
- }
162
-
163
- .iui-slider-ticks{
164
- position:relative;
165
- display:flex;
166
- pointer-events:none;
167
- justify-content:space-between;
168
- -webkit-user-select:none;
169
- -moz-user-select:none;
170
- -ms-user-select:none;
171
- user-select:none;
172
- }
173
- .iui-slider-ticks .iui-slider-tick{
174
- position:relative;
175
- display:flex;
176
- pointer-events:none;
177
- justify-content:center;
178
- align-items:center;
179
- }
180
- .iui-slider-ticks .iui-slider-tick::before{
181
- background-color:var(--iui-color-border);
182
- }
183
- @media (forced-colors: active){
184
- .iui-slider-ticks .iui-slider-tick::before{
185
- background-color:CanvasText;
186
- }
187
- }
188
-
189
- .iui-slider-rail{
190
- position:absolute;
191
- background-color:var(--iui-color-border);
192
- }
193
- @media (forced-colors: active){
194
- .iui-slider-rail{
195
- background-color:CanvasText;
196
- }
197
- }
198
-
199
- .iui-slider-thumb{
200
- box-sizing:content-box;
201
- position:absolute;
202
- height:var(--iui-size-m);
203
- width:var(--iui-size-m);
204
- border-radius:100%;
205
- z-index:1;
206
- cursor:-webkit-grab;
207
- cursor:grab;
208
- background:var(--iui-color-background);
209
- border:1px solid var(--iui-color-border-foreground);
210
- }
211
- .iui-slider-thumb:focus-visible{
212
- outline:2px solid var(--iui-color-border-accent);
213
- outline-offset:-1px;
214
- }
215
- @supports not selector(*:focus-visible){
216
- .iui-slider-thumb:focus{
217
- outline:2px solid var(--iui-color-border-accent);
218
- outline-offset:-1px;
219
- }
220
- }
221
- @media (forced-colors: active){
222
- .iui-slider-thumb{
223
- background:Canvas;
224
- border:1px solid CanvasText;
225
- }
226
- }
227
- .iui-slider-thumb:active{
228
- cursor:-webkit-grabbing;
229
- cursor:grabbing;
230
- }
231
-
232
- .iui-slider-track{
233
- pointer-events:none;
234
- position:absolute;
235
- top:var(--iui-size-s);
236
- background-color:var(--iui-color-border-accent);
237
- }
238
- @media (forced-colors: active){
239
- .iui-slider-track{
240
- background-color:Highlight;
241
- }
242
- }
243
-
244
- .iui-slider-min,
245
- .iui-slider-max{
246
- -webkit-user-select:all;
247
- -moz-user-select:all;
248
- user-select:all;
249
- display:flex;
250
- justify-content:center;
251
- }
252
- .iui-slider-min svg,
253
- .iui-slider-max svg{
254
- display:flex;
255
- flex-shrink:0;
256
- width:var(--iui-size-m);
257
- height:var(--iui-size-m);
258
- fill:var(--iui-color-icon-muted);
259
- }
260
- @media (forced-colors: active){
261
- .iui-slider-min svg,
262
- .iui-slider-max svg{
263
- fill:CanvasText;
264
- }
265
- }
5
+ .iui-slider-horizontal{min-height:calc(var(--iui-size-s)*2)}.iui-slider-horizontal .iui-slider-rail{width:100%;height:var(--iui-size-2xs);top:var(--iui-size-s)}.iui-slider-horizontal .iui-slider-thumb{top:calc(var(--iui-size-2xs) + 1px);transform:translate(-50%)}.iui-slider-horizontal .iui-slider-track{height:var(--iui-size-2xs);left:0}.iui-slider-horizontal .iui-slider-ticks{padding-top:var(--iui-size-m)}.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{width:1px;flex-direction:column}.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick:before{content:"";width:1px;height:var(--iui-size-s)}.iui-slider-horizontal .iui-slider-min,.iui-slider-horizontal .iui-slider-max{margin-top:var(--iui-size-3xs);min-width:var(--iui-size-l);flex-direction:row}.iui-slider-horizontal .iui-slider-min svg,.iui-slider-horizontal .iui-slider-max svg{margin-top:var(--iui-size-2xs)}.iui-slider-horizontal .iui-slider-min{margin-right:var(--iui-size-s);text-align:right}.iui-slider-horizontal .iui-slider-max{margin-left:var(--iui-size-s)}.iui-slider-vertical{min-width:calc(var(--iui-size-s)*2);height:100%;flex-direction:column-reverse}.iui-slider-vertical .iui-slider-rail{width:var(--iui-size-2xs);height:100%;left:var(--iui-size-s)}.iui-slider-vertical .iui-slider-thumb{left:calc(var(--iui-size-2xs) + 1px);transform:translateY(50%)}.iui-slider-vertical .iui-slider-track{width:var(--iui-size-2xs);bottom:0;left:var(--iui-size-s)}.iui-slider-vertical .iui-slider-ticks{padding-left:var(--iui-size-m);height:100%;flex-direction:column-reverse;align-items:flex-start}.iui-slider-vertical .iui-slider-ticks .iui-slider-tick{flex:row;height:1px}.iui-slider-vertical .iui-slider-ticks .iui-slider-tick:before{content:"";width:var(--iui-size-s);height:1px;margin-right:var(--iui-size-s)}.iui-slider-vertical .iui-slider-min,.iui-slider-vertical .iui-slider-max{margin-left:calc(var(--iui-size-3xs) + var(--iui-size-s));text-align:center;min-height:var(--iui-size-l);flex-direction:column;transform:translate(-50%)}.iui-slider-vertical .iui-slider-min{margin-top:var(--iui-size-s)}.iui-slider-vertical .iui-slider-max{margin-bottom:var(--iui-size-s)}.iui-slider-component-container{align-items:start;display:flex}.iui-slider-component-container.iui-disabled{cursor:not-allowed}.iui-slider-component-container.iui-disabled .iui-slider-container{cursor:not-allowed;pointer-events:none}.iui-slider-component-container.iui-disabled .iui-slider-rail{background-color:var(--iui-color-background-disabled)}.iui-slider-component-container.iui-disabled .iui-slider-thumb{cursor:not-allowed;background-color:var(--iui-color-border);border-color:var(--iui-color-border)}@media (forced-colors:active){.iui-slider-component-container.iui-disabled .iui-slider-thumb{background-color:GrayText;border-color:GrayText}}.iui-slider-component-container.iui-disabled .iui-slider-track{background-color:var(--iui-color-border)}@media (forced-colors:active){.iui-slider-component-container.iui-disabled .iui-slider-track{background-color:GrayText}}.iui-slider-component-container.iui-disabled .iui-slider-min,.iui-slider-component-container.iui-disabled .iui-slider-max,.iui-slider-component-container.iui-disabled .iui-slider-tick{-webkit-user-select:none;user-select:none;color:var(--iui-color-text-disabled)}@media (forced-colors:active){.iui-slider-component-container.iui-disabled .iui-slider-min,.iui-slider-component-container.iui-disabled .iui-slider-max,.iui-slider-component-container.iui-disabled .iui-slider-tick{color:GrayText}}.iui-slider-container{cursor:pointer;touch-action:pan-y;isolation:isolate;flex-grow:1;position:relative}.iui-slider-container.iui-grabbing{cursor:grabbing}.iui-slider-ticks{pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:space-between;display:flex;position:relative}.iui-slider-ticks .iui-slider-tick{pointer-events:none;justify-content:center;align-items:center;display:flex;position:relative}.iui-slider-ticks .iui-slider-tick:before{background-color:var(--iui-color-border)}@media (forced-colors:active){.iui-slider-ticks .iui-slider-tick:before{background-color:CanvasText}}.iui-slider-rail{background-color:var(--iui-color-border);position:absolute}@media (forced-colors:active){.iui-slider-rail{background-color:CanvasText}}.iui-slider-thumb{box-sizing:content-box;height:var(--iui-size-m);width:var(--iui-size-m);z-index:1;cursor:grab;background:var(--iui-color-background);border:1px solid var(--iui-color-border-foreground);border-radius:100%;position:absolute}.iui-slider-thumb:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-slider-thumb:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}@media (forced-colors:active){.iui-slider-thumb{background:Canvas;border:1px solid CanvasText}}.iui-slider-thumb:active{cursor:grabbing}.iui-slider-track{pointer-events:none;top:var(--iui-size-s);background-color:var(--iui-color-border-accent);position:absolute}@media (forced-colors:active){.iui-slider-track{background-color:Highlight}}.iui-slider-min,.iui-slider-max{-webkit-user-select:all;user-select:all;justify-content:center;display:flex}.iui-slider-min svg,.iui-slider-max svg{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-slider-min svg,.iui-slider-max svg{fill:CanvasText}}
package/css/stepper.css CHANGED
@@ -2,140 +2,4 @@
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-stepper{
6
- display:flex;
7
- flex-direction:column;
8
- row-gap:calc(var(--iui-size-s) * 0.5);
9
- }
10
- .iui-stepper > ol{
11
- margin:0;
12
- padding:0;
13
- border:none;
14
- vertical-align:baseline;
15
- display:flex;
16
- justify-content:space-around;
17
- align-items:flex-start;
18
- width:100%;
19
- }
20
-
21
- .iui-stepper-step{
22
- --_iui-stepper-step-background-color:var(--iui-color-background);
23
- --_iui-stepper-step-border-color:var(--iui-color-border-positive);
24
- --_iui-stepper-step-number-color:var(--iui-color-text-positive);
25
- --_iui-stepper-step-text-color:var(--iui-color-text-positive);
26
- --_iui-stepper-step-track-before-color:var(--iui-color-border-positive);
27
- --_iui-stepper-step-track-after-color:var(--iui-color-border-positive);
28
- flex:1;
29
- align-items:center;
30
- display:flex;
31
- flex-direction:column;
32
- margin:0;
33
- padding:0;
34
- border:none;
35
- vertical-align:baseline;
36
- font-size:var(--iui-font-size-0);
37
- font-weight:var(--iui-font-weight-normal);
38
- line-height:var(--iui-size-l);
39
- color:var(--_iui-stepper-step-text-color);
40
- }
41
- .iui-stepper-step:first-of-type{
42
- --_iui-stepper-step-track-before-color:transparent;
43
- }
44
- .iui-stepper-step:last-of-type{
45
- --_iui-stepper-step-track-after-color:transparent;
46
- }
47
- .iui-stepper-step.iui-current{
48
- --_iui-stepper-step-background-color:var(--iui-color-background-positive);
49
- --_iui-stepper-step-border-color:var(--iui-color-background-positive);
50
- --_iui-stepper-step-number-color:var(--iui-color-white);
51
- --_iui-stepper-step-track-after-color:var(--iui-color-border);
52
- font-weight:var(--iui-font-weight-semibold);
53
- }
54
- .iui-stepper-step.iui-current ~ .iui-stepper-step{
55
- --_iui-stepper-step-background-color:var(--iui-color-background);
56
- --_iui-stepper-step-border-color:var(--iui-color-border);
57
- --_iui-stepper-step-number-color:var(--iui-color-text-muted);
58
- --_iui-stepper-step-text-color:var(--iui-color-text-muted);
59
- --_iui-stepper-step-track-before-color:var(--iui-color-border);
60
- }
61
- .iui-stepper-step.iui-current ~ .iui-stepper-step:not(:last-of-type){
62
- --_iui-stepper-step-track-after-color:var(--iui-color-border);
63
- }
64
- .iui-stepper-step.iui-clickable:focus{
65
- outline:0;
66
- }
67
-
68
- .iui-stepper-circle{
69
- align-items:center;
70
- border-radius:var(--iui-border-radius-round);
71
- display:flex;
72
- width:var(--iui-size-l);
73
- height:var(--iui-size-l);
74
- justify-content:center;
75
- overflow-wrap:break-word;
76
- -webkit-user-select:none;
77
- -moz-user-select:none;
78
- -ms-user-select:none;
79
- user-select:none;
80
- border:1px solid var(--_iui-stepper-step-border-color);
81
- background-color:var(--_iui-stepper-step-background-color);
82
- color:var(--_iui-stepper-step-number-color);
83
- }
84
- .iui-clickable .iui-stepper-circle{
85
- cursor:pointer;
86
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out, color var(--iui-duration-1) ease-out;
87
- }
88
- .iui-clickable .iui-stepper-circle:hover{
89
- --_iui-stepper-step-background-color:var(--iui-color-background-positive);
90
- --_iui-stepper-step-border-color:var(--iui-color-background-positive);
91
- --_iui-stepper-step-number-color:var(--iui-color-white);
92
- }
93
-
94
- .iui-clickable:focus .iui-stepper-circle{
95
- outline:2px solid var(--iui-color-border-positive);
96
- outline-offset:-1px;
97
- }
98
-
99
- .iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{
100
- outline:none;
101
- }
102
-
103
- .iui-stepper-track-content{
104
- display:flex;
105
- align-items:center;
106
- width:100%;
107
- }
108
- .iui-stepper-track-content::before, .iui-stepper-track-content::after{
109
- content:"";
110
- height:var(--iui-size-3xs);
111
- flex:1 2 auto;
112
- }
113
- .iui-stepper-track-content::before{
114
- background-color:var(--_iui-stepper-step-track-before-color);
115
- }
116
- .iui-stepper-track-content::after{
117
- background-color:var(--_iui-stepper-step-track-after-color);
118
- }
119
-
120
- .iui-stepper-step-name{
121
- text-align:center;
122
- -webkit-user-select:all;
123
- -moz-user-select:all;
124
- user-select:all;
125
- color:var(--_iui-stepper-step-text-color);
126
- }
127
-
128
- .iui-stepper-steps-label{
129
- display:block;
130
- font-size:var(--iui-font-size-3);
131
- text-align:center;
132
- }
133
-
134
- .iui-stepper-steps-label-count{
135
- -webkit-user-select:none;
136
- -moz-user-select:none;
137
- -ms-user-select:none;
138
- user-select:none;
139
- margin-right:var(--iui-size-xs);
140
- color:var(--iui-color-text-muted);
141
- }
5
+ .iui-stepper{row-gap:calc(var(--iui-size-s)*.5);flex-direction:column;display:flex}.iui-stepper>ol{vertical-align:baseline;width:100%;border:none;justify-content:space-around;align-items:flex-start;margin:0;padding:0;display:flex}.iui-stepper-step{--_iui-stepper-step-background-color:var(--iui-color-background);--_iui-stepper-step-border-color:var(--iui-color-border-positive);--_iui-stepper-step-number-color:var(--iui-color-text-positive);--_iui-stepper-step-text-color:var(--iui-color-text-positive);--_iui-stepper-step-track-before-color:var(--iui-color-border-positive);--_iui-stepper-step-track-after-color:var(--iui-color-border-positive);vertical-align:baseline;font-size:var(--iui-font-size-0);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);color:var(--_iui-stepper-step-text-color);border:none;flex-direction:column;flex:1;align-items:center;margin:0;padding:0;display:flex}.iui-stepper-step:first-of-type{--_iui-stepper-step-track-before-color:transparent}.iui-stepper-step:last-of-type{--_iui-stepper-step-track-after-color:transparent}.iui-stepper-step.iui-current{--_iui-stepper-step-background-color:var(--iui-color-background-positive);--_iui-stepper-step-border-color:var(--iui-color-background-positive);--_iui-stepper-step-number-color:var(--iui-color-white);--_iui-stepper-step-track-after-color:var(--iui-color-border);font-weight:var(--iui-font-weight-semibold)}.iui-stepper-step.iui-current~.iui-stepper-step{--_iui-stepper-step-background-color:var(--iui-color-background);--_iui-stepper-step-border-color:var(--iui-color-border);--_iui-stepper-step-number-color:var(--iui-color-text-muted);--_iui-stepper-step-text-color:var(--iui-color-text-muted);--_iui-stepper-step-track-before-color:var(--iui-color-border)}.iui-stepper-step.iui-current~.iui-stepper-step:not(:last-of-type){--_iui-stepper-step-track-after-color:var(--iui-color-border)}.iui-stepper-step.iui-clickable:focus{outline:0}.iui-stepper-circle{border-radius:var(--iui-border-radius-round);width:var(--iui-size-l);height:var(--iui-size-l);overflow-wrap:break-word;-webkit-user-select:none;user-select:none;border:1px solid var(--_iui-stepper-step-border-color);background-color:var(--_iui-stepper-step-background-color);color:var(--_iui-stepper-step-number-color);justify-content:center;align-items:center;display:flex}.iui-clickable .iui-stepper-circle{cursor:pointer;transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out,color var(--iui-duration-1)ease-out}.iui-clickable .iui-stepper-circle:hover{--_iui-stepper-step-background-color:var(--iui-color-background-positive);--_iui-stepper-step-border-color:var(--iui-color-background-positive);--_iui-stepper-step-number-color:var(--iui-color-white)}.iui-clickable:focus .iui-stepper-circle{outline:2px solid var(--iui-color-border-positive);outline-offset:-1px}.iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{outline:none}.iui-stepper-track-content{width:100%;align-items:center;display:flex}.iui-stepper-track-content:before,.iui-stepper-track-content:after{content:"";height:var(--iui-size-3xs);flex:1 2 auto}.iui-stepper-track-content:before{background-color:var(--_iui-stepper-step-track-before-color)}.iui-stepper-track-content:after{background-color:var(--_iui-stepper-step-track-after-color)}.iui-stepper-step-name{text-align:center;-webkit-user-select:all;user-select:all;color:var(--_iui-stepper-step-text-color)}.iui-stepper-steps-label{font-size:var(--iui-font-size-3);text-align:center;display:block}.iui-stepper-steps-label-count{-webkit-user-select:none;user-select:none;margin-right:var(--iui-size-xs);color:var(--iui-color-text-muted)}
package/css/surface.css CHANGED
@@ -2,14 +2,4 @@
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-surface{
6
- --iui-surface-background-color:var(--iui-color-background);
7
- --iui-surface-border-color:var(--iui-color-border-subtle);
8
- --iui-surface-border-radius:var(--iui-border-radius-1);
9
- --iui-surface-elevation:var(--iui-shadow-1);
10
- background-color:var(--iui-surface-background-color);
11
- border:1px solid var(--iui-surface-border-color);
12
- border-radius:var(--iui-surface-border-radius);
13
- box-shadow:var(--iui-surface-elevation);
14
- color:var(--iui-color-text);
15
- }
5
+ .iui-surface{--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text)}