@itwin/itwinui-css 1.0.0-dev.9 → 1.1.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 (51) hide show
  1. package/CHANGELOG.md +36 -954
  2. package/README.md +50 -29
  3. package/css/alert.css +1 -387
  4. package/css/all.css +1 -9061
  5. package/css/anchor.css +1 -64
  6. package/css/avatar.css +1 -222
  7. package/css/backdrop.css +1 -22
  8. package/css/badge.css +1 -25
  9. package/css/blockquote.css +1 -22
  10. package/css/breadcrumbs.css +1 -372
  11. package/css/button.css +1 -381
  12. package/css/carousel.css +1 -121
  13. package/css/checkbox.css +1 -150
  14. package/css/code.css +1 -81
  15. package/css/color-picker.css +1 -203
  16. package/css/date-picker.css +1 -399
  17. package/css/dialog.css +1 -159
  18. package/css/expandable-block.css +1 -171
  19. package/css/fieldset.css +1 -27
  20. package/css/file-upload.css +1 -78
  21. package/css/footer.css +1 -91
  22. package/css/global.css +1 -59
  23. package/css/header.css +1 -432
  24. package/css/information-panel.css +1 -189
  25. package/css/input.css +1 -166
  26. package/css/keyboard.css +1 -27
  27. package/css/location-marker.css +1 -114
  28. package/css/menu.css +1 -171
  29. package/css/non-ideal-state.css +1 -61
  30. package/css/progress-indicator.css +1 -299
  31. package/css/radio-tile.css +1 -187
  32. package/css/radio.css +1 -157
  33. package/css/select.css +1 -235
  34. package/css/side-navigation.css +1 -198
  35. package/css/skip-to-content.css +1 -61
  36. package/css/slider.css +1 -258
  37. package/css/stepper.css +1 -137
  38. package/css/surface.css +1 -14
  39. package/css/table.css +1 -717
  40. package/css/tabs.css +1 -321
  41. package/css/tag.css +1 -140
  42. package/css/text.css +1 -115
  43. package/css/tile.css +1 -488
  44. package/css/time-picker.css +1 -128
  45. package/css/toast.css +1 -284
  46. package/css/toggle-switch.css +1 -212
  47. package/css/tooltip.css +1 -48
  48. package/css/tree.css +1 -124
  49. package/css/utils.css +1 -679
  50. package/css/workflow-diagram.css +1 -63
  51. package/package.json +8 -4
package/css/toast.css CHANGED
@@ -2,287 +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-toast-wrapper{
6
- pointer-events:none;
7
- position:fixed;
8
- display:flex;
9
- align-items:center;
10
- flex-direction:column;
11
- justify-content:center;
12
- z-index:99999;
13
- }
14
- @media screen and (max-width: 400px){
15
- .iui-toast-wrapper{
16
- width:calc(100vw - 36px);
17
- margin-top:var(--iui-size-s);
18
- }
19
- }
20
- @media screen and (min-width: 401px){
21
- .iui-toast-wrapper{
22
- min-width:400px;
23
- max-width:640px;
24
- margin:var(--iui-size-l) 0;
25
- }
26
- }
27
- @media (prefers-reduced-motion: no-preference){
28
- .iui-toast-wrapper .iui-toast-all{
29
- transition:all 240ms cubic-bezier(0, 0, 0.2, 1);
30
- }
31
- }
32
- .iui-toast-wrapper.iui-placement-top{
33
- margin-left:auto;
34
- margin-right:auto;
35
- left:0;
36
- top:0;
37
- right:0;
38
- }
39
- .iui-toast-wrapper.iui-placement-top-start{
40
- left:0;
41
- top:0;
42
- align-items:flex-start;
43
- }
44
- .iui-toast-wrapper.iui-placement-top-end{
45
- right:0;
46
- top:0;
47
- align-items:flex-end;
48
- }
49
- .iui-toast-wrapper.iui-placement-bottom{
50
- bottom:0;
51
- margin-left:auto;
52
- margin-right:auto;
53
- left:0;
54
- right:0;
55
- }
56
- .iui-toast-wrapper.iui-placement-bottom .iui-toast{
57
- margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
58
- }
59
- .iui-toast-wrapper.iui-placement-bottom-start{
60
- bottom:0;
61
- left:0;
62
- align-items:flex-start;
63
- }
64
- .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
65
- margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
66
- }
67
- .iui-toast-wrapper.iui-placement-bottom-end{
68
- bottom:0;
69
- right:0;
70
- align-items:flex-end;
71
- }
72
- .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
73
- margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
74
- }
75
-
76
- .iui-toast{
77
- margin:0;
78
- padding:0;
79
- border:none;
80
- vertical-align:baseline;
81
- display:inline-flex;
82
- align-items:center;
83
- pointer-events:all;
84
- margin:0 var(--iui-size-m) var(--iui-size-s) var(--iui-size-m);
85
- min-height:calc(var(--iui-size-s) * 4);
86
- border-radius:var(--iui-border-radius-1);
87
- background-color:var(--iui-color-background-1);
88
- border:1px solid var(--iui-color-foreground-1);
89
- box-shadow:0 0 0 1px rgba(255, 255, 255, var(--iui-opacity-4)), var(--iui-shadow-5);
90
- }
91
- .iui-toast > .iui-status-area{
92
- display:flex;
93
- align-self:stretch;
94
- justify-content:center;
95
- align-items:center;
96
- width:calc(var(--iui-size-l) * 2);
97
- flex-shrink:0;
98
- background-color:var(--iui-color-background-5);
99
- }
100
- .iui-toast > .iui-status-area > .iui-icon{
101
- display:flex;
102
- flex-shrink:0;
103
- width:var(--iui-size-m);
104
- height:var(--iui-size-m);
105
- fill:var(--iui-color-foreground-accessory);
106
- }
107
- .iui-toast > .iui-message{
108
- flex-grow:1;
109
- font-size:var(--iui-font-size-1);
110
- margin-top:calc(var(--iui-size-s) * 0.5);
111
- margin-bottom:calc(var(--iui-size-s) * 0.5);
112
- margin-right:var(--iui-size-l);
113
- margin-left:var(--iui-size-m);
114
- line-height:var(--iui-size-l);
115
- font-weight:var(--iui-font-weight-normal);
116
- font-style:normal;
117
- color:var(--iui-color-foreground-2);
118
- }
119
- .iui-toast-anchor{
120
- text-decoration:underline;
121
- border-radius:var(--iui-border-radius-1);
122
- cursor:pointer;
123
- font-size:var(--iui-font-size-0);
124
- margin-right:var(--iui-size-m);
125
- -webkit-user-select:none;
126
- -moz-user-select:none;
127
- -ms-user-select:none;
128
- user-select:none;
129
- white-space:nowrap;
130
- }
131
- .iui-toast-anchor:hover{
132
- text-decoration:none;
133
- }
134
- .iui-toast > .iui-button{
135
- margin-right:var(--iui-size-xs);
136
- }
137
- @media screen and (max-width: 400px){
138
- .iui-toast{
139
- width:calc(100vw - 36px);
140
- }
141
- }
142
- @media screen and (min-width: 401px){
143
- .iui-toast{
144
- min-width:400px;
145
- max-width:640px;
146
- }
147
- }
148
- .iui-toast.iui-informational{
149
- border-color:var(--iui-color-foreground-primary);
150
- }
151
- .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
152
- background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
153
- }
154
- .iui-toast.iui-informational > .iui-message::selection,
155
- .iui-toast.iui-informational > .iui-message *::selection{
156
- background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
157
- }
158
- .iui-toast.iui-informational > .iui-status-area{
159
- background-color:var(--iui-color-background-primary);
160
- }
161
- .iui-toast.iui-informational > .iui-toast-anchor{
162
- color:var(--iui-color-foreground-primary);
163
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
164
- }
165
- .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
166
- outline:1px solid var(--iui-color-foreground-primary);
167
- outline-offset:1px;
168
- }
169
- @supports not selector(*:focus-visible){
170
- .iui-toast.iui-informational > .iui-toast-anchor:focus{
171
- outline:1px solid var(--iui-color-foreground-primary);
172
- outline-offset:1px;
173
- }
174
- }
175
- .iui-toast.iui-informational > .iui-toast-anchor:hover{
176
- color:var(--iui-color-foreground-primary-hover);
177
- }
178
- .iui-toast.iui-positive{
179
- border-color:var(--iui-color-foreground-positive);
180
- }
181
- .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
182
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
183
- }
184
- .iui-toast.iui-positive > .iui-message::selection,
185
- .iui-toast.iui-positive > .iui-message *::selection{
186
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
187
- }
188
- .iui-toast.iui-positive > .iui-status-area{
189
- background-color:var(--iui-color-background-positive);
190
- }
191
- .iui-toast.iui-positive > .iui-toast-anchor{
192
- color:var(--iui-color-foreground-positive);
193
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
194
- }
195
- .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
196
- outline:1px solid var(--iui-color-foreground-positive);
197
- outline-offset:1px;
198
- }
199
- @supports not selector(*:focus-visible){
200
- .iui-toast.iui-positive > .iui-toast-anchor:focus{
201
- outline:1px solid var(--iui-color-foreground-positive);
202
- outline-offset:1px;
203
- }
204
- }
205
- .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
206
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
207
- }
208
- .iui-toast.iui-positive > .iui-toast-anchor::selection,
209
- .iui-toast.iui-positive > .iui-toast-anchor *::selection{
210
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
211
- }
212
- .iui-toast.iui-positive > .iui-toast-anchor:hover{
213
- color:var(--iui-color-foreground-positive-hover);
214
- }
215
- .iui-toast.iui-negative{
216
- border-color:var(--iui-color-foreground-negative);
217
- }
218
- .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
219
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
220
- }
221
- .iui-toast.iui-negative > .iui-message::selection,
222
- .iui-toast.iui-negative > .iui-message *::selection{
223
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
224
- }
225
- .iui-toast.iui-negative > .iui-status-area{
226
- background-color:var(--iui-color-background-negative);
227
- }
228
- .iui-toast.iui-negative > .iui-toast-anchor{
229
- color:var(--iui-color-foreground-negative);
230
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
231
- }
232
- .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
233
- outline:1px solid var(--iui-color-foreground-negative);
234
- outline-offset:1px;
235
- }
236
- @supports not selector(*:focus-visible){
237
- .iui-toast.iui-negative > .iui-toast-anchor:focus{
238
- outline:1px solid var(--iui-color-foreground-negative);
239
- outline-offset:1px;
240
- }
241
- }
242
- .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
243
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
244
- }
245
- .iui-toast.iui-negative > .iui-toast-anchor::selection,
246
- .iui-toast.iui-negative > .iui-toast-anchor *::selection{
247
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
248
- }
249
- .iui-toast.iui-negative > .iui-toast-anchor:hover{
250
- color:var(--iui-color-foreground-negative-hover);
251
- }
252
- .iui-toast.iui-warning{
253
- border-color:var(--iui-color-foreground-warning);
254
- }
255
- .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
256
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
257
- }
258
- .iui-toast.iui-warning > .iui-message::selection,
259
- .iui-toast.iui-warning > .iui-message *::selection{
260
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
261
- }
262
- .iui-toast.iui-warning > .iui-status-area{
263
- background-color:var(--iui-color-background-warning);
264
- }
265
- .iui-toast.iui-warning > .iui-toast-anchor{
266
- color:var(--iui-color-foreground-warning);
267
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
268
- }
269
- .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
270
- outline:1px solid var(--iui-color-foreground-warning);
271
- outline-offset:1px;
272
- }
273
- @supports not selector(*:focus-visible){
274
- .iui-toast.iui-warning > .iui-toast-anchor:focus{
275
- outline:1px solid var(--iui-color-foreground-warning);
276
- outline-offset:1px;
277
- }
278
- }
279
- .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
280
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
281
- }
282
- .iui-toast.iui-warning > .iui-toast-anchor::selection,
283
- .iui-toast.iui-warning > .iui-toast-anchor *::selection{
284
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
285
- }
286
- .iui-toast.iui-warning > .iui-toast-anchor:hover{
287
- color:var(--iui-color-foreground-warning-hover);
288
- }
5
+ .iui-toast-wrapper{pointer-events:none;z-index:99999;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed}@media screen and (max-width:400px){.iui-toast-wrapper{width:calc(100vw - 36px);margin-top:var(--iui-size-s)}}@media screen and (min-width:401px){.iui-toast-wrapper{min-width:400px;max-width:640px;margin:var(--iui-size-l)0}}@media (prefers-reduced-motion:no-preference){.iui-toast-wrapper .iui-toast-all{transition:all .24s cubic-bezier(0,0,.2,1)}}.iui-toast-wrapper.iui-placement-top{margin-left:auto;margin-right:auto;top:0;left:0;right:0}.iui-toast-wrapper.iui-placement-top-start{align-items:flex-start;top:0;left:0}.iui-toast-wrapper.iui-placement-top-end{align-items:flex-end;top:0;right:0}.iui-toast-wrapper.iui-placement-bottom{margin-left:auto;margin-right:auto;bottom:0;left:0;right:0}.iui-toast-wrapper.iui-placement-bottom .iui-toast{margin:var(--iui-size-s)var(--iui-size-m)0 var(--iui-size-m)}.iui-toast-wrapper.iui-placement-bottom-start{align-items:flex-start;bottom:0;left:0}.iui-toast-wrapper.iui-placement-bottom-start .iui-toast{margin:var(--iui-size-s)var(--iui-size-m)0 var(--iui-size-m)}.iui-toast-wrapper.iui-placement-bottom-end{align-items:flex-end;bottom:0;right:0}.iui-toast-wrapper.iui-placement-bottom-end .iui-toast{margin:var(--iui-size-s)var(--iui-size-m)0 var(--iui-size-m)}.iui-toast{vertical-align:baseline;pointer-events:all;margin:0;margin:0 var(--iui-size-m)var(--iui-size-s)var(--iui-size-m);min-height:calc(var(--iui-size-s)*4);border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border);box-shadow:0 0 0 1px rgba(255,255,255,var(--iui-opacity-4)),var(--iui-shadow-5);align-items:center;padding:0;display:inline-flex;overflow:hidden}.iui-toast>.iui-status-area{width:calc(var(--iui-size-l)*2);flex-shrink:0;justify-content:center;align-self:stretch;align-items:center;display:flex}.iui-toast>.iui-status-area>.iui-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}.iui-toast>.iui-message{font-size:var(--iui-font-size-1);margin-top:calc(var(--iui-size-s)*.5);margin-bottom:calc(var(--iui-size-s)*.5);margin-right:var(--iui-size-l);margin-left:var(--iui-size-m);line-height:var(--iui-size-l);font-weight:var(--iui-font-weight-normal);color:var(--iui-color-text);flex-grow:1;font-style:normal}.iui-toast-anchor{border-radius:var(--iui-border-radius-1);cursor:pointer;font-size:var(--iui-font-size-0);margin-right:var(--iui-size-m);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}.iui-toast-anchor:hover{text-decoration:none}.iui-toast>.iui-button{margin-right:var(--iui-size-xs)}@media screen and (max-width:400px){.iui-toast{width:calc(100vw - 36px)}}@media screen and (min-width:401px){.iui-toast{min-width:400px;max-width:640px}}.iui-toast.iui-informational{border-color:var(--iui-color-border-informational)}.iui-toast.iui-informational>.iui-message::selection,.iui-toast.iui-informational>.iui-message ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-toast.iui-informational>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-informational-muted),var(--iui-color-background))}.iui-toast.iui-informational>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-informational)}.iui-toast.iui-informational>.iui-toast-anchor{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}.iui-toast.iui-informational>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-informational>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}.iui-toast.iui-informational>.iui-toast-anchor::selection,.iui-toast.iui-informational>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-toast.iui-informational>.iui-toast-anchor:hover{color:var(--iui-color-text-informational-hover)}.iui-toast.iui-informational>button{outline-color:var(--iui-color-text-informational)}.iui-toast.iui-positive{border-color:var(--iui-color-border-positive)}.iui-toast.iui-positive>.iui-message::selection,.iui-toast.iui-positive>.iui-message ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-toast.iui-positive>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-positive-muted),var(--iui-color-background))}.iui-toast.iui-positive>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-positive)}.iui-toast.iui-positive>.iui-toast-anchor{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}.iui-toast.iui-positive>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-positive>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}.iui-toast.iui-positive>.iui-toast-anchor::selection,.iui-toast.iui-positive>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-toast.iui-positive>.iui-toast-anchor:hover{color:var(--iui-color-text-positive-hover)}.iui-toast.iui-positive>button{outline-color:var(--iui-color-text-positive)}.iui-toast.iui-warning{border-color:var(--iui-color-border-warning)}.iui-toast.iui-warning>.iui-message::selection,.iui-toast.iui-warning>.iui-message ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-toast.iui-warning>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-warning-muted),var(--iui-color-background))}.iui-toast.iui-warning>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-warning)}.iui-toast.iui-warning>.iui-toast-anchor{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}.iui-toast.iui-warning>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-warning>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}.iui-toast.iui-warning>.iui-toast-anchor::selection,.iui-toast.iui-warning>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-toast.iui-warning>.iui-toast-anchor:hover{color:var(--iui-color-text-warning-hover)}.iui-toast.iui-warning>button{outline-color:var(--iui-color-text-warning)}.iui-toast.iui-negative{border-color:var(--iui-color-border-negative)}.iui-toast.iui-negative>.iui-message::selection,.iui-toast.iui-negative>.iui-message ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-toast.iui-negative>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-negative-muted),var(--iui-color-background))}.iui-toast.iui-negative>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-negative)}.iui-toast.iui-negative>.iui-toast-anchor{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}.iui-toast.iui-negative>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-negative>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}.iui-toast.iui-negative>.iui-toast-anchor::selection,.iui-toast.iui-negative>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-toast.iui-negative>.iui-toast-anchor:hover{color:var(--iui-color-text-negative-hover)}.iui-toast.iui-negative>button{outline-color:var(--iui-color-text-negative)}
package/css/toggle-switch.css CHANGED
@@ -2,215 +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-toggle-switch-wrapper{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:grid;
11
- grid-template-areas:"toggle";
12
- align-items:center;
13
- gap:var(--iui-size-xs);
14
- font-size:var(--iui-font-size-1);
15
- width:-webkit-fit-content;
16
- width:-moz-fit-content;
17
- width:fit-content;
18
- -webkit-user-select:none;
19
- -moz-user-select:none;
20
- -ms-user-select:none;
21
- user-select:none;
22
- cursor:pointer;
23
- isolation:isolate;
24
- color:var(--iui-color-foreground-2);
25
- }
26
- .iui-toggle-switch-wrapper.iui-disabled{
27
- cursor:not-allowed;
28
- color:var(--iui-color-foreground-4);
29
- }
30
- @media (forced-colors: active){
31
- .iui-toggle-switch-wrapper.iui-disabled{
32
- color:GrayText;
33
- }
34
- }
35
- .iui-toggle-switch-wrapper.iui-label-on-left{
36
- grid-template-areas:"label toggle";
37
- }
38
- .iui-toggle-switch-wrapper.iui-label-on-right{
39
- grid-template-areas:"toggle label";
40
- }
41
-
42
- .iui-toggle-switch{
43
- margin:0;
44
- padding:0;
45
- border:none;
46
- vertical-align:baseline;
47
- grid-area:toggle;
48
- display:flex;
49
- position:relative;
50
- cursor:pointer;
51
- -webkit-appearance:none;
52
- -moz-appearance:none;
53
- appearance:none;
54
- width:calc((var(--iui-size-m) + var(--iui-size-2xs) * 2) * 2);
55
- border-radius:var(--iui-border-radius-round);
56
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
57
- background-color:var(--iui-color-background-1);
58
- border:1px solid var(--iui-color-foreground-4);
59
- background-color:var(--iui-color-background-1);
60
- border-color:var(--iui-color-foreground-4);
61
- }
62
- .iui-toggle-switch:focus-visible{
63
- outline:1px solid var(--iui-color-foreground-primary);
64
- outline-offset:1px;
65
- }
66
- @supports not selector(*:focus-visible){
67
- .iui-toggle-switch:focus{
68
- outline:1px solid var(--iui-color-foreground-primary);
69
- outline-offset:1px;
70
- }
71
- }
72
- .iui-toggle-switch-label{
73
- grid-area:label;
74
- }
75
- .iui-toggle-switch::after{
76
- content:"";
77
- height:var(--iui-size-m);
78
- width:var(--iui-size-m);
79
- margin:var(--iui-size-2xs);
80
- aspect-ratio:1/1;
81
- border-radius:50%;
82
- transition:background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
83
- z-index:2;
84
- }
85
- @media (prefers-reduced-motion: no-preference){
86
- .iui-toggle-switch::after{
87
- transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
88
- }
89
- }
90
- @media (forced-colors: active){
91
- .iui-toggle-switch{
92
- border-color:CanvasText;
93
- }
94
- }
95
- .iui-toggle-switch::after{
96
- background-color:var(--iui-color-foreground-1);
97
- opacity:var(--iui-opacity-2);
98
- }
99
- @media (forced-colors: active){
100
- .iui-toggle-switch::after{
101
- background-color:CanvasText;
102
- opacity:1;
103
- }
104
- }
105
- .iui-toggle-switch:hover{
106
- border-color:var(--iui-color-foreground-2);
107
- }
108
- @media (forced-colors: active){
109
- .iui-toggle-switch:hover{
110
- border-color:CanvasText;
111
- }
112
- }
113
- .iui-toggle-switch:focus-visible{
114
- border-color:var(--iui-color-foreground-2);
115
- }
116
- @supports not selector(*:focus-visible){
117
- .iui-toggle-switch:focus{
118
- border-color:var(--iui-color-foreground-2);
119
- }
120
- }
121
- .iui-toggle-switch:checked{
122
- background-color:var(--iui-color-background-primary);
123
- border-color:var(--iui-color-background-primary);
124
- }
125
- @media (forced-colors: active){
126
- .iui-toggle-switch:checked{
127
- background-color:Highlight;
128
- border-color:Highlight;
129
- }
130
- }
131
- .iui-toggle-switch:checked::after{
132
- transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));
133
- background-color:var(--iui-color-foreground-accessory);
134
- opacity:var(--iui-opacity-2);
135
- }
136
- @media (forced-colors: active){
137
- .iui-toggle-switch:checked::after{
138
- background-color:HighlightText;
139
- opacity:1;
140
- }
141
- }
142
- .iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
143
- opacity:var(--iui-opacity-1);
144
- }
145
- .iui-toggle-switch:hover::after{
146
- opacity:var(--iui-opacity-1);
147
- }
148
- .iui-toggle-switch:focus-visible::after{
149
- opacity:var(--iui-opacity-1);
150
- }
151
- @supports not selector(*:focus-visible){
152
- .iui-toggle-switch:focus::after{
153
- opacity:var(--iui-opacity-1);
154
- }
155
- }
156
- .iui-toggle-switch:disabled{
157
- cursor:not-allowed;
158
- background-color:var(--iui-color-background-disabled);
159
- border-color:var(--iui-color-background-disabled);
160
- }
161
- @media (forced-colors: active){
162
- .iui-toggle-switch:disabled{
163
- border-color:GrayText;
164
- }
165
- }
166
- .iui-toggle-switch:disabled::after{
167
- background-color:var(--iui-color-foreground-1);
168
- opacity:var(--iui-opacity-5);
169
- }
170
- @media (forced-colors: active){
171
- .iui-toggle-switch:disabled::after{
172
- background-color:GrayText;
173
- opacity:0.75;
174
- }
175
- }
176
- .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
177
- opacity:0;
178
- fill:var(--iui-color-foreground-2);
179
- }
180
- @media (forced-colors: active){
181
- .iui-toggle-switch:disabled:checked{
182
- background-color:GrayText;
183
- }
184
- }
185
- @media (forced-colors: active){
186
- .iui-toggle-switch:disabled:checked::after{
187
- background-color:Canvas;
188
- }
189
- }
190
- .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
191
- opacity:var(--iui-opacity-5);
192
- }
193
- @media (forced-colors: active){
194
- .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
195
- fill:Canvas;
196
- opacity:0.75;
197
- }
198
- }
199
- .iui-toggle-switch-icon{
200
- opacity:0;
201
- grid-area:toggle;
202
- width:var(--iui-size-m);
203
- height:var(--iui-size-m);
204
- padding:calc(var(--iui-size-m) * 0.125);
205
- margin:calc(var(--iui-size-2xs) + 1px);
206
- display:flex;
207
- z-index:1;
208
- transition:opacity var(--iui-duration-1) ease-out;
209
- pointer-events:none;
210
- fill:var(--iui-color-foreground-accessory);
211
- }
212
- @media (forced-colors: active){
213
- .iui-toggle-switch-icon{
214
- fill:HighlightText;
215
- }
216
- }
5
+ .iui-toggle-switch-wrapper{vertical-align:baseline;align-items:center;gap:var(--iui-size-xs);font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;isolation:isolate;color:var(--iui-color-text);border:none;grid-template-areas:"toggle";margin:0;padding:0;display:grid}.iui-toggle-switch-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}@media (forced-colors:active){.iui-toggle-switch-wrapper.iui-disabled{color:GrayText}}.iui-toggle-switch-wrapper.iui-label-on-left{grid-template-areas:"label toggle"}.iui-toggle-switch-wrapper.iui-label-on-right{grid-template-areas:"toggle label"}.iui-toggle-switch{vertical-align:baseline;cursor:pointer;-webkit-appearance:none;appearance:none;width:calc((var(--iui-size-m) + var(--iui-size-2xs)*2)*2);border-radius:var(--iui-border-radius-round);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border-foreground);background-color:var(--iui-color-background);border-color:var(--iui-color-border-foreground);grid-area:toggle;margin:0;padding:0;display:flex;position:relative}.iui-toggle-switch:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toggle-switch:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}}.iui-toggle-switch-label{grid-area:label}.iui-toggle-switch:after{content:"";height:var(--iui-size-m);width:var(--iui-size-m);margin:var(--iui-size-2xs);aspect-ratio:1/1;transition:background-color var(--iui-duration-1)ease-out;z-index:2;border-radius:50%}@media (prefers-reduced-motion:no-preference){.iui-toggle-switch:after{transition:transform var(--iui-duration-1)ease-out,background-color var(--iui-duration-1)ease-out}}@media (forced-colors:active){.iui-toggle-switch{border-color:CanvasText}}.iui-toggle-switch:after{background-color:var(--iui-color-icon)}@media (forced-colors:active){.iui-toggle-switch:after{background-color:CanvasText}}.iui-toggle-switch:hover{border-color:var(--iui-color-border-foreground-hover)}@media (forced-colors:active){.iui-toggle-switch:hover{border-color:CanvasText}}.iui-toggle-switch:hover:after,.iui-toggle-switch:hover:focus-visible:after{background-color:var(--iui-color-icon-hover)}@supports not selector(*:focus-visible){.iui-toggle-switch:hover:focus:after{background-color:var(--iui-color-icon-hover)}}.iui-toggle-switch:focus-visible{border-color:var(--iui-color-border-foreground-hover)}@supports not selector(*:focus-visible){.iui-toggle-switch:focus{border-color:var(--iui-color-border-foreground-hover)}}.iui-toggle-switch:checked{background-color:var(--iui-color-background-accent);border-color:var(--iui-color-background-accent)}@media (forced-colors:active){.iui-toggle-switch:checked{background-color:Highlight;border-color:Highlight}}.iui-toggle-switch:checked:after{transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));background-color:var(--iui-color-white)}@media (forced-colors:active){.iui-toggle-switch:checked:after{background-color:HighlightText}}.iui-toggle-switch:checked~.iui-toggle-switch-icon{opacity:var(--iui-opacity-1)}.iui-toggle-switch:disabled{cursor:not-allowed;background-color:var(--iui-color-background-disabled);border-color:var(--iui-color-border-disabled)}@media (forced-colors:active){.iui-toggle-switch:disabled{border-color:GrayText}}.iui-toggle-switch:disabled:after{background-color:var(--iui-color-icon-disabled)}@media (forced-colors:active){.iui-toggle-switch:disabled:after{background-color:GrayText;opacity:.75}}.iui-toggle-switch:disabled~.iui-toggle-switch-icon{opacity:0;fill:var(--iui-color-icon)}@media (forced-colors:active){.iui-toggle-switch:disabled:checked{background-color:GrayText}.iui-toggle-switch:disabled:checked:after{background-color:Canvas}}.iui-toggle-switch:disabled:checked~.iui-toggle-switch-icon{opacity:var(--iui-opacity-5)}@media (forced-colors:active){.iui-toggle-switch:disabled:checked~.iui-toggle-switch-icon{fill:Canvas;opacity:.75}}.iui-toggle-switch-icon{opacity:0;width:var(--iui-size-m);height:var(--iui-size-m);padding:calc(var(--iui-size-m)*.125);margin:calc(var(--iui-size-2xs) + 1px);z-index:1;transition:opacity var(--iui-duration-1)ease-out;pointer-events:none;fill:var(--iui-color-white);grid-area:toggle;display:flex}@media (forced-colors:active){.iui-toggle-switch-icon{fill:HighlightText}}
package/css/tooltip.css CHANGED
@@ -2,51 +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-tooltip-container{
6
- width:-webkit-fit-content;
7
- width:-moz-fit-content;
8
- width:fit-content;
9
- height:-webkit-fit-content;
10
- height:-moz-fit-content;
11
- height:fit-content;
12
- position:relative;
13
- }
14
- .iui-tooltip-container > .iui-tooltip{
15
- position:absolute;
16
- visibility:hidden;
17
- -webkit-user-select:none;
18
- -moz-user-select:none;
19
- -ms-user-select:none;
20
- user-select:none;
21
- opacity:0;
22
- transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
23
- }
24
- .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
25
- visibility:visible;
26
- opacity:1;
27
- }
28
-
29
- .iui-tooltip{
30
- margin:0;
31
- padding:0;
32
- border:none;
33
- vertical-align:baseline;
34
- display:block;
35
- text-align:center;
36
- border-radius:var(--iui-border-radius-1);
37
- font-size:var(--iui-font-size-0);
38
- overflow:hidden;
39
- max-width:400px;
40
- width:-webkit-max-content;
41
- width:-moz-max-content;
42
- width:max-content;
43
- overflow-wrap:break-word;
44
- box-sizing:content-box;
45
- padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
46
- z-index:999;
47
- box-shadow:var(--iui-shadow-3);
48
- pointer-events:none;
49
- background-color:rgba(0, 0, 0, var(--iui-opacity-3));
50
- color:var(--iui-color-foreground-accessory);
51
- border:1px solid rgba(255, 255, 255, var(--iui-opacity-4));
52
- }
5
+ .iui-tooltip-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.iui-tooltip-container>.iui-tooltip{visibility:hidden;-webkit-user-select:none;user-select:none;opacity:0;transition:visibility var(--iui-duration-0)linear var(--iui-duration-1),opacity var(--iui-duration-1)ease-out;position:absolute}.iui-tooltip-container>.iui-tooltip.iui-tooltip-visible,.iui-tooltip-container:hover>.iui-tooltip{visibility:visible;opacity:1}.iui-tooltip{vertical-align:baseline;text-align:center;border-radius:var(--iui-border-radius-1);font-size:var(--iui-font-size-0);max-width:400px;width:max-content;overflow-wrap:break-word;box-sizing:content-box;padding:0;padding:calc(var(--iui-size-s)*.33)var(--iui-size-xs);z-index:999;box-shadow:var(--iui-shadow-3);pointer-events:none;background-color:rgba(0,0,0,var(--iui-opacity-3));color:var(--iui-color-white);border:none;border:1px solid rgba(255,255,255,var(--iui-opacity-4));margin:0;display:block;overflow:hidden}