@itwin/itwinui-css 1.0.0-dev.8 → 1.0.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 +39 -969
  2. package/README.md +50 -29
  3. package/css/alert.css +1 -387
  4. package/css/all.css +1 -9049
  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 -705
  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
@@ -2,402 +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-date-picker{
6
- --iui-surface-background-color:var(--iui-color-background-1);
7
- --iui-surface-border-radius:var(--iui-border-radius-1);
8
- --iui-surface-elevation:var(--iui-shadow-1);
9
- background-color:var(--iui-surface-background-color);
10
- border-radius:var(--iui-surface-border-radius);
11
- box-shadow:var(--iui-surface-elevation);
12
- color:var(--iui-color-foreground-2);
13
- -webkit-user-select:none;
14
- -moz-user-select:none;
15
- -ms-user-select:none;
16
- user-select:none;
17
- display:inline-grid;
18
- grid-template-columns:1fr auto;
19
- }
20
- @media (forced-colors: active){
21
- .iui-date-picker{
22
- border:1px solid transparent;
23
- }
24
- }
25
- .iui-date-picker .iui-time-picker{
26
- height:0;
27
- min-height:100%;
28
- }
29
-
30
- .iui-calendar-month-year{
31
- display:inline-flex;
32
- width:100%;
33
- align-items:center;
34
- justify-content:space-between;
35
- padding:0 var(--iui-size-2xs);
36
- font-weight:var(--iui-font-weight-bold);
37
- gap:var(--iui-size-2xs);
38
- }
39
- .iui-calendar-month-year > span{
40
- width:156px;
41
- white-space:nowrap;
42
- display:inline-flex;
43
- flex-shrink:0;
44
- align-items:center;
45
- justify-content:center;
46
- line-height:calc(var(--iui-size-s) * 4);
47
- }
48
-
49
- .iui-calendar-month{
50
- overflow:hidden;
51
- max-width:15ch;
52
- text-overflow:ellipsis;
53
- white-space:nowrap;
54
- flex-shrink:0;
55
- }
56
-
57
- .iui-calendar-weekdays{
58
- line-height:36px;
59
- display:flex;
60
- padding:0 var(--iui-size-xs);
61
- font-weight:var(--iui-font-weight-bold);
62
- background-color:var(--iui-color-background-2);
63
- }
64
- .iui-calendar-weekdays > div{
65
- white-space:nowrap;
66
- overflow:hidden;
67
- width:40px;
68
- text-align:center;
69
- }
70
-
71
- .iui-calendar-week{
72
- white-space:nowrap;
73
- line-height:36px;
74
- display:flex;
75
- padding:0 var(--iui-size-xs);
76
- margin-bottom:var(--iui-size-3xs);
77
- }
78
-
79
- .iui-calendar-day, .iui-calendar-day-today{
80
- cursor:pointer;
81
- text-align:center;
82
- width:40px;
83
- height:36px;
84
- border-radius:var(--iui-border-radius-1);
85
- font-variant-numeric:tabular-nums;
86
- }
87
- .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
88
- outline:1px solid var(--iui-color-foreground-primary);
89
- outline-offset:-1px;
90
- }
91
- @supports not selector(*:focus-visible){
92
- .iui-calendar-day:focus, .iui-calendar-day-today:focus{
93
- outline:1px solid var(--iui-color-foreground-primary);
94
- outline-offset:-1px;
95
- }
96
- }
97
- .iui-calendar-day:hover, .iui-calendar-day-today:hover{
98
- font-weight:var(--iui-font-weight-semibold);
99
- background-color:var(--iui-color-background-transparent-hover);
100
- }
101
- .iui-calendar-day-today{
102
- position:relative;
103
- font-weight:var(--iui-font-weight-semibold);
104
- }
105
- .iui-calendar-day-today::before{
106
- content:"";
107
- position:absolute;
108
- display:block;
109
- width:32px;
110
- height:32px;
111
- border-radius:var(--iui-border-radius-round);
112
- top:50%;
113
- left:50%;
114
- transform:translate(-50%, -50%);
115
- border:2px solid var(--iui-color-foreground-5);
116
- }
117
- .iui-calendar-day-today:hover{
118
- background-color:var(--iui-color-background-transparent-hover);
119
- }
120
-
121
- .iui-calendar-day-selected, .iui-calendar-day-selected-today{
122
- cursor:pointer;
123
- text-align:center;
124
- width:40px;
125
- height:36px;
126
- border-radius:var(--iui-border-radius-1);
127
- font-variant-numeric:tabular-nums;
128
- font-weight:var(--iui-font-weight-semibold);
129
- background-color:var(--iui-color-background-primary);
130
- color:var(--iui-color-foreground-accessory);
131
- cursor:default;
132
- }
133
- .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
134
- outline:1px solid var(--iui-color-foreground-primary);
135
- outline-offset:-1px;
136
- }
137
- @supports not selector(*:focus-visible){
138
- .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
139
- outline:1px solid var(--iui-color-foreground-primary);
140
- outline-offset:-1px;
141
- }
142
- }
143
- .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
144
- outline:1px solid var(--iui-color-foreground-accessory);
145
- outline-offset:-3px;
146
- }
147
- @supports not selector(*:focus-visible){
148
- .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
149
- outline:1px solid var(--iui-color-foreground-accessory);
150
- outline-offset:-3px;
151
- }
152
- }
153
- .iui-calendar-day-selected-today{
154
- position:relative;
155
- font-weight:var(--iui-font-weight-semibold);
156
- }
157
- .iui-calendar-day-selected-today::before{
158
- content:"";
159
- position:absolute;
160
- display:block;
161
- width:32px;
162
- height:32px;
163
- border-radius:var(--iui-border-radius-round);
164
- top:50%;
165
- left:50%;
166
- transform:translate(-50%, -50%);
167
- border:2px solid var(--iui-color-foreground-5);
168
- }
169
- .iui-calendar-day-selected-today:hover{
170
- background-color:var(--iui-color-background-transparent-hover);
171
- }
172
- .iui-calendar-day-selected-today:hover{
173
- background-color:var(--iui-color-background-primary);
174
- color:var(--iui-color-foreground-accessory);
175
- }
176
- .iui-calendar-day-selected-today:hover::before{
177
- background-color:initial;
178
- }
179
- .iui-calendar-day-selected-today::before{
180
- border-color:rgba(255, 255, 255, var(--iui-opacity-4));
181
- }
182
-
183
- .iui-calendar-day-outside-month, .iui-calendar-day-outside-month-today{
184
- cursor:pointer;
185
- text-align:center;
186
- width:40px;
187
- height:36px;
188
- border-radius:var(--iui-border-radius-1);
189
- font-variant-numeric:tabular-nums;
190
- color:var(--iui-color-foreground-4);
191
- }
192
- .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today:focus-visible{
193
- outline:1px solid var(--iui-color-foreground-primary);
194
- outline-offset:-1px;
195
- }
196
- @supports not selector(*:focus-visible){
197
- .iui-calendar-day-outside-month:focus, .iui-calendar-day-outside-month-today:focus{
198
- outline:1px solid var(--iui-color-foreground-primary);
199
- outline-offset:-1px;
200
- }
201
- }
202
- .iui-calendar-day-outside-month:hover, .iui-calendar-day-outside-month-today:hover{
203
- font-weight:var(--iui-font-weight-semibold);
204
- background-color:var(--iui-color-background-transparent-hover);
205
- }
206
- .iui-calendar-day-outside-month-today{
207
- position:relative;
208
- font-weight:var(--iui-font-weight-semibold);
209
- }
210
- .iui-calendar-day-outside-month-today::before{
211
- content:"";
212
- position:absolute;
213
- display:block;
214
- width:32px;
215
- height:32px;
216
- border-radius:var(--iui-border-radius-round);
217
- top:50%;
218
- left:50%;
219
- transform:translate(-50%, -50%);
220
- border:2px solid var(--iui-color-foreground-5);
221
- }
222
- .iui-calendar-day-outside-month-today:hover{
223
- background-color:var(--iui-color-background-transparent-hover);
224
- }
225
-
226
- .iui-calendar-day-range-start, .iui-calendar-day-range-start-today{
227
- cursor:pointer;
228
- text-align:center;
229
- width:40px;
230
- height:36px;
231
- border-radius:var(--iui-border-radius-1);
232
- font-variant-numeric:tabular-nums;
233
- font-weight:var(--iui-font-weight-semibold);
234
- background-color:var(--iui-color-background-primary);
235
- color:var(--iui-color-foreground-accessory);
236
- border-top-right-radius:0;
237
- border-bottom-right-radius:0;
238
- cursor:pointer;
239
- }
240
- .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
241
- outline:1px solid var(--iui-color-foreground-primary);
242
- outline-offset:-1px;
243
- }
244
- @supports not selector(*:focus-visible){
245
- .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
246
- outline:1px solid var(--iui-color-foreground-primary);
247
- outline-offset:-1px;
248
- }
249
- }
250
- .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
251
- outline:1px solid var(--iui-color-foreground-accessory);
252
- outline-offset:-3px;
253
- }
254
- @supports not selector(*:focus-visible){
255
- .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
256
- outline:1px solid var(--iui-color-foreground-accessory);
257
- outline-offset:-3px;
258
- }
259
- }
260
- .iui-calendar-day-range-start-today{
261
- position:relative;
262
- font-weight:var(--iui-font-weight-semibold);
263
- }
264
- .iui-calendar-day-range-start-today::before{
265
- content:"";
266
- position:absolute;
267
- display:block;
268
- width:32px;
269
- height:32px;
270
- border-radius:var(--iui-border-radius-round);
271
- top:50%;
272
- left:50%;
273
- transform:translate(-50%, -50%);
274
- border:2px solid var(--iui-color-foreground-5);
275
- }
276
- .iui-calendar-day-range-start-today:hover{
277
- background-color:var(--iui-color-background-transparent-hover);
278
- }
279
- .iui-calendar-day-range-start-today:hover{
280
- background-color:var(--iui-color-background-primary);
281
- color:var(--iui-color-foreground-accessory);
282
- }
283
- .iui-calendar-day-range-start-today:hover::before{
284
- background-color:initial;
285
- }
286
- .iui-calendar-day-range-start-today::before{
287
- border-color:rgba(255, 255, 255, var(--iui-opacity-4));
288
- }
289
-
290
- .iui-calendar-day-range-end, .iui-calendar-day-range-end-today{
291
- cursor:pointer;
292
- text-align:center;
293
- width:40px;
294
- height:36px;
295
- border-radius:var(--iui-border-radius-1);
296
- font-variant-numeric:tabular-nums;
297
- font-weight:var(--iui-font-weight-semibold);
298
- background-color:var(--iui-color-background-primary);
299
- color:var(--iui-color-foreground-accessory);
300
- border-top-left-radius:0;
301
- border-bottom-left-radius:0;
302
- }
303
- .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
304
- outline:1px solid var(--iui-color-foreground-primary);
305
- outline-offset:-1px;
306
- }
307
- @supports not selector(*:focus-visible){
308
- .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
309
- outline:1px solid var(--iui-color-foreground-primary);
310
- outline-offset:-1px;
311
- }
312
- }
313
- .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
314
- outline:1px solid var(--iui-color-foreground-accessory);
315
- outline-offset:-3px;
316
- }
317
- @supports not selector(*:focus-visible){
318
- .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
319
- outline:1px solid var(--iui-color-foreground-accessory);
320
- outline-offset:-3px;
321
- }
322
- }
323
- .iui-calendar-day-range-end-today{
324
- position:relative;
325
- font-weight:var(--iui-font-weight-semibold);
326
- }
327
- .iui-calendar-day-range-end-today::before{
328
- content:"";
329
- position:absolute;
330
- display:block;
331
- width:32px;
332
- height:32px;
333
- border-radius:var(--iui-border-radius-round);
334
- top:50%;
335
- left:50%;
336
- transform:translate(-50%, -50%);
337
- border:2px solid var(--iui-color-foreground-5);
338
- }
339
- .iui-calendar-day-range-end-today:hover{
340
- background-color:var(--iui-color-background-transparent-hover);
341
- }
342
- .iui-calendar-day-range-end-today:hover{
343
- background-color:var(--iui-color-background-primary);
344
- color:var(--iui-color-foreground-accessory);
345
- }
346
- .iui-calendar-day-range-end-today:hover::before{
347
- background-color:initial;
348
- }
349
- .iui-calendar-day-range-end-today::before{
350
- border-color:rgba(255, 255, 255, var(--iui-opacity-4));
351
- }
352
-
353
- .iui-calendar-day-range, .iui-calendar-day-range-today{
354
- cursor:pointer;
355
- text-align:center;
356
- width:40px;
357
- height:36px;
358
- border-radius:var(--iui-border-radius-1);
359
- font-variant-numeric:tabular-nums;
360
- border-radius:0;
361
- background-color:var(--iui-color-background-subtle-primary);
362
- color:var(--iui-color-foreground-2);
363
- }
364
- .iui-calendar-day-range:focus-visible, .iui-calendar-day-range-today:focus-visible{
365
- outline:1px solid var(--iui-color-foreground-primary);
366
- outline-offset:-1px;
367
- }
368
- @supports not selector(*:focus-visible){
369
- .iui-calendar-day-range:focus, .iui-calendar-day-range-today:focus{
370
- outline:1px solid var(--iui-color-foreground-primary);
371
- outline-offset:-1px;
372
- }
373
- }
374
- .iui-calendar-day-range:hover, .iui-calendar-day-range-today:hover{
375
- font-weight:var(--iui-font-weight-semibold);
376
- background-color:var(--iui-color-background-transparent-hover);
377
- }
378
- .iui-calendar-day-range-today{
379
- position:relative;
380
- font-weight:var(--iui-font-weight-semibold);
381
- }
382
- .iui-calendar-day-range-today::before{
383
- content:"";
384
- position:absolute;
385
- display:block;
386
- width:32px;
387
- height:32px;
388
- border-radius:var(--iui-border-radius-round);
389
- top:50%;
390
- left:50%;
391
- transform:translate(-50%, -50%);
392
- border:2px solid var(--iui-color-foreground-5);
393
- }
394
- .iui-calendar-day-range-today:hover{
395
- background-color:var(--iui-color-background-transparent-hover);
396
- }
397
- .iui-calendar-day-range-today:hover{
398
- background-color:var(--iui-color-background-transparent-hover);
399
- color:var(--iui-color-foreground-2);
400
- }
401
- .iui-calendar-day-range-today::before{
402
- border-color:var(--iui-color-foreground-primary);
403
- }
5
+ .iui-date-picker{--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);-webkit-user-select:none;user-select:none;grid-template-columns:1fr auto;display:inline-grid}.iui-date-picker .iui-time-picker{height:0;min-height:100%}.iui-calendar-month-year{width:100%;padding:0 var(--iui-size-2xs);font-weight:var(--iui-font-weight-bold);justify-content:space-between;align-items:center;gap:var(--iui-size-2xs);display:inline-flex}.iui-calendar-month-year>span{width:156px;white-space:nowrap;line-height:calc(var(--iui-size-s)*4);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.iui-calendar-month{max-width:15ch;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.iui-calendar-weekdays{padding:0 var(--iui-size-xs);line-height:36px;font-weight:var(--iui-font-weight-bold);background-color:var(--iui-color-background-backdrop);display:flex}.iui-calendar-weekdays>div{white-space:nowrap;width:40px;text-align:center;overflow:hidden}.iui-calendar-week{white-space:nowrap;padding:0 var(--iui-size-xs);margin-bottom:var(--iui-size-3xs);line-height:36px;display:flex}.iui-calendar-day,.iui-calendar-day-today{cursor:pointer;text-align:center;width:40px;height:36px;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums}.iui-calendar-day:focus-visible,.iui-calendar-day-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-calendar-day:focus,.iui-calendar-day-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-calendar-day:hover,.iui-calendar-day-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-hover)}.iui-calendar-day-today{font-weight:var(--iui-font-weight-semibold);position:relative}.iui-calendar-day-today:before{content:"";width:32px;height:32px;border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.iui-calendar-day-today:hover{background-color:var(--iui-color-background-hover)}.iui-calendar-day-selected,.iui-calendar-day-selected-today{cursor:pointer;text-align:center;width:40px;height:36px;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);cursor:default}.iui-calendar-day-selected:focus-visible,.iui-calendar-day-selected-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-calendar-day-selected:focus,.iui-calendar-day-selected-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-calendar-day-selected:focus-visible,.iui-calendar-day-selected-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){.iui-calendar-day-selected:focus,.iui-calendar-day-selected-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}.iui-calendar-day-selected-today{font-weight:var(--iui-font-weight-semibold);position:relative}.iui-calendar-day-selected-today:before{content:"";width:32px;height:32px;border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.iui-calendar-day-selected-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}.iui-calendar-day-selected-today:hover:before{background-color:initial}.iui-calendar-day-selected-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-calendar-day-outside-month,.iui-calendar-day-outside-month-today{cursor:pointer;text-align:center;width:40px;height:36px;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;color:var(--iui-color-text-muted)}.iui-calendar-day-outside-month:focus-visible,.iui-calendar-day-outside-month-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-calendar-day-outside-month:focus,.iui-calendar-day-outside-month-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-calendar-day-outside-month:hover,.iui-calendar-day-outside-month-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-hover)}.iui-calendar-day-outside-month-today{font-weight:var(--iui-font-weight-semibold);position:relative}.iui-calendar-day-outside-month-today:before{content:"";width:32px;height:32px;border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.iui-calendar-day-outside-month-today:hover{background-color:var(--iui-color-background-hover)}.iui-calendar-day-range-start,.iui-calendar-day-range-start-today{cursor:pointer;text-align:center;width:40px;height:36px;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);cursor:pointer;border-top-right-radius:0;border-bottom-right-radius:0}.iui-calendar-day-range-start:focus-visible,.iui-calendar-day-range-start-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-calendar-day-range-start:focus,.iui-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-calendar-day-range-start:focus-visible,.iui-calendar-day-range-start-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){.iui-calendar-day-range-start:focus,.iui-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}.iui-calendar-day-range-start-today{font-weight:var(--iui-font-weight-semibold);position:relative}.iui-calendar-day-range-start-today:before{content:"";width:32px;height:32px;border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.iui-calendar-day-range-start-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}.iui-calendar-day-range-start-today:hover:before{background-color:initial}.iui-calendar-day-range-start-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-calendar-day-range-end,.iui-calendar-day-range-end-today{cursor:pointer;text-align:center;width:40px;height:36px;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);border-top-left-radius:0;border-bottom-left-radius:0}.iui-calendar-day-range-end:focus-visible,.iui-calendar-day-range-end-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-calendar-day-range-end:focus,.iui-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-calendar-day-range-end:focus-visible,.iui-calendar-day-range-end-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){.iui-calendar-day-range-end:focus,.iui-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}.iui-calendar-day-range-end-today{font-weight:var(--iui-font-weight-semibold);position:relative}.iui-calendar-day-range-end-today:before{content:"";width:32px;height:32px;border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.iui-calendar-day-range-end-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}.iui-calendar-day-range-end-today:hover:before{background-color:initial}.iui-calendar-day-range-end-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-calendar-day-range,.iui-calendar-day-range-today{cursor:pointer;text-align:center;width:40px;height:36px;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;background-color:var(--iui-color-background-accent-muted);border-radius:0}.iui-calendar-day-range:focus-visible,.iui-calendar-day-range-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-calendar-day-range:focus,.iui-calendar-day-range-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-calendar-day-range:hover,.iui-calendar-day-range-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}.iui-calendar-day-range-today{font-weight:var(--iui-font-weight-semibold);position:relative}.iui-calendar-day-range-today:before{content:"";width:32px;height:32px;border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.iui-calendar-day-range-today:hover{background-color:var(--iui-color-background-hover);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}.iui-calendar-day-range-today:before{border-color:var(--iui-color-border-accent)}
package/css/dialog.css CHANGED
@@ -2,162 +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-dialog-wrapper{
6
- position:fixed;
7
- overflow:hidden;
8
- top:0;
9
- left:0;
10
- width:100%;
11
- height:100%;
12
- pointer-events:none;
13
- transform:translateX(0);
14
- }
15
- .iui-dialog-wrapper[data-iui-relative=true]{
16
- position:absolute;
17
- }
18
-
19
- .iui-dialog{
20
- z-index:999;
21
- isolation:isolate;
22
- border-radius:var(--iui-border-radius-1);
23
- box-shadow:var(--iui-shadow-5);
24
- position:fixed;
25
- padding:var(--iui-size-s) var(--iui-size-m);
26
- pointer-events:auto;
27
- background-color:var(--iui-color-background-1);
28
- transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
29
- transition-delay:var(--iui-duration-1), var(--iui-duration-0);
30
- }
31
- @media (forced-colors: active){
32
- .iui-dialog{
33
- border:1px solid;
34
- }
35
- }
36
- .iui-dialog:not(.iui-dialog-visible){
37
- visibility:hidden;
38
- opacity:0;
39
- }
40
- .iui-dialog.iui-dialog-visible{
41
- transition-delay:var(--iui-duration-0);
42
- }
43
-
44
- .iui-dialog-default{
45
- max-width:max(50%, 380px);
46
- min-width:380px;
47
- max-height:100vh;
48
- }
49
- .iui-dialog-default:not([data-iui-placement]){
50
- left:50%;
51
- top:33%;
52
- transform:translate(-50%, -33%);
53
- }
54
- .iui-dialog-default[data-iui-placement=top-left]{
55
- top:0;
56
- left:0;
57
- margin-left:var(--iui-size-s);
58
- margin-top:var(--iui-size-m);
59
- }
60
- .iui-dialog-default[data-iui-placement=top-right]{
61
- top:0;
62
- right:0;
63
- margin-right:var(--iui-size-s);
64
- margin-top:var(--iui-size-m);
65
- }
66
- .iui-dialog-default[data-iui-placement=bottom-left]{
67
- bottom:0;
68
- left:0;
69
- margin-left:var(--iui-size-s);
70
- margin-bottom:var(--iui-size-m);
71
- }
72
- .iui-dialog-default[data-iui-placement=bottom-right]{
73
- bottom:0;
74
- right:0;
75
- margin-right:var(--iui-size-s);
76
- margin-bottom:var(--iui-size-m);
77
- }
78
-
79
- .iui-dialog-full-page{
80
- border-radius:0;
81
- height:100vh;
82
- height:100dvh;
83
- width:100vw;
84
- top:0;
85
- left:0;
86
- display:flex;
87
- flex-direction:column;
88
- will-change:transform;
89
- }
90
- .iui-dialog-full-page:not(.iui-dialog-visible){
91
- transform:translateY(100%);
92
- }
93
- @media (prefers-reduced-motion: no-preference){
94
- .iui-dialog-full-page{
95
- transition:visibility var(--iui-duration-0) linear var(--iui-duration-2), opacity var(--iui-duration-0) linear var(--iui-duration-2), transform var(--iui-duration-1) ease-in;
96
- }
97
- .iui-dialog-full-page.iui-dialog-visible{
98
- transition:transform var(--iui-duration-2) ease-out;
99
- }
100
- }
101
-
102
- .iui-dialog-draggable{
103
- display:flex;
104
- flex-direction:column;
105
- border:1px solid var(--iui-color-background-border);
106
- }
107
-
108
- .iui-dialog-title{
109
- display:flex;
110
- align-items:center;
111
- font-size:inherit;
112
- white-space:nowrap;
113
- overflow:hidden;
114
- text-overflow:ellipsis;
115
- line-height:1.5;
116
- margin-right:auto;
117
- }
118
-
119
- .iui-dialog-title-bar{
120
- display:flex;
121
- align-items:center;
122
- margin-bottom:var(--iui-size-s);
123
- font-size:var(--iui-font-size-3);
124
- }
125
-
126
- .iui-dialog-title-bar-filled{
127
- font-size:var(--iui-font-size-2);
128
- padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
129
- margin:calc(0px - var(--iui-size-s)) calc(0px - var(--iui-size-m)) var(--iui-size-s) calc(0px - var(--iui-size-m));
130
- cursor:-webkit-grab;
131
- cursor:grab;
132
- background-color:var(--iui-color-background-3);
133
- border-bottom:1px solid var(--iui-color-background-border);
134
- }
135
- .iui-dialog-title-bar-filled:active{
136
- cursor:-webkit-grabbing;
137
- cursor:grabbing;
138
- }
139
-
140
- .iui-dialog-content{
141
- flex-grow:2;
142
- margin:0 calc(0px - var(--iui-size-m));
143
- padding:0 var(--iui-size-m);
144
- overflow-y:auto;
145
- overflow-y:overlay;
146
- }
147
-
148
- .iui-dialog-button-bar{
149
- margin-top:var(--iui-size-s);
150
- display:flex;
151
- align-items:center;
152
- justify-content:flex-end;
153
- gap:var(--iui-size-xs);
154
- }
155
-
156
- .iui-dialog-animation-enter{
157
- transform:translateY(100%);
158
- opacity:0;
159
- }
160
- .iui-dialog-animation-enter-active{
161
- transform:translateY(0);
162
- opacity:1;
163
- }
5
+ .iui-dialog-wrapper{width:100%;height:100%;pointer-events:none;z-index:999;isolation:isolate;position:fixed;top:0;left:0;overflow:hidden;transform:translate(0)}.iui-dialog-wrapper[data-iui-relative=true]{position:absolute}.iui-dialog{z-index:999;isolation:isolate;border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-shadow-5);padding:var(--iui-size-s)var(--iui-size-m);pointer-events:auto;background-color:var(--iui-color-background);transition:visibility var(--iui-duration-0)linear,opacity var(--iui-duration-1)ease-out;transition-delay:var(--iui-duration-1),var(--iui-duration-0);position:fixed}@media (forced-colors:active){.iui-dialog{border:1px solid}}.iui-dialog:not(.iui-dialog-visible){visibility:hidden;opacity:0}.iui-dialog.iui-dialog-visible{transition-delay:var(--iui-duration-0)}.iui-dialog-default{max-width:max(50%,380px);min-width:380px;max-height:100vh}.iui-dialog-default:not([data-iui-placement]){top:33%;left:50%;transform:translate(-50%,-33%)}.iui-dialog-default[data-iui-placement=top-left]{margin-left:var(--iui-size-s);margin-top:var(--iui-size-m);top:0;left:0}.iui-dialog-default[data-iui-placement=top-right]{margin-right:var(--iui-size-s);margin-top:var(--iui-size-m);top:0;right:0}.iui-dialog-default[data-iui-placement=bottom-left]{margin-left:var(--iui-size-s);margin-bottom:var(--iui-size-m);bottom:0;left:0}.iui-dialog-default[data-iui-placement=bottom-right]{margin-right:var(--iui-size-s);margin-bottom:var(--iui-size-m);bottom:0;right:0}.iui-dialog-full-page{height:100vh;height:100dvh;width:100vw;will-change:transform;border-radius:0;flex-direction:column;display:flex;top:0;left:0}.iui-dialog-full-page:not(.iui-dialog-visible){transform:translateY(100%)}@media (prefers-reduced-motion:no-preference){.iui-dialog-full-page{transition:visibility var(--iui-duration-0)linear var(--iui-duration-2),opacity var(--iui-duration-0)linear var(--iui-duration-2),transform var(--iui-duration-1)ease-in}.iui-dialog-full-page.iui-dialog-visible{transition:transform var(--iui-duration-2)ease-out}}.iui-dialog-draggable{border:1px solid var(--iui-color-border);flex-direction:column;display:flex}.iui-dialog-title{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-right:auto;line-height:1.5;display:flex;overflow:hidden}.iui-dialog-title-bar{margin-bottom:var(--iui-size-s);font-size:var(--iui-font-size-3);align-items:center;display:flex}.iui-dialog-title-bar-filled{font-size:var(--iui-font-size-2);padding:calc(var(--iui-size-s)*.5)var(--iui-size-m);margin:calc(0px - var(--iui-size-s))calc(0px - var(--iui-size-m))var(--iui-size-s)calc(0px - var(--iui-size-m));cursor:grab;background-color:var(--iui-color-background-backdrop);border-bottom:1px solid var(--iui-color-border)}.iui-dialog-title-bar-filled:active{cursor:grabbing}.iui-dialog-content{margin:0 calc(0px - var(--iui-size-m));padding:0 var(--iui-size-m);overflow-y:auto;overflow-y:overlay;flex-grow:2}.iui-dialog-button-bar{margin-top:var(--iui-size-s);justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);display:flex}.iui-dialog-animation-enter{opacity:0;transform:translateY(100%)}.iui-dialog-animation-enter-active{opacity:1;transform:translateY(0)}