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