@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/date-picker.css CHANGED
@@ -3,25 +3,32 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-date-picker{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
11
- background-color:#FFF;
12
- color:rgba(0, 0, 0, 0.8);
13
- background-color:var(--iui-color-background-1);
6
+ --iui-surface-background-color:var(--iui-color-background-1);
7
+ --iui-surface-border-radius:0;
8
+ --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
9
+ background-color:var(--iui-surface-background-color);
10
+ border-radius:var(--iui-surface-border-radius);
11
+ box-shadow:var(--iui-surface-elevation);
12
+ box-sizing:border-box;
14
13
  color:var(--iui-text-color);
15
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
16
14
  -webkit-user-select:none;
17
15
  -moz-user-select:none;
18
16
  -ms-user-select:none;
19
17
  user-select:none;
20
- text-align:center;
21
- height:286px;
22
- display:inline-flex;
23
- background-color:#FFF;
24
- background-color:var(--iui-color-background-1); }
18
+ display:-ms-grid;
19
+ display:grid;
20
+ -ms-grid-columns:1fr auto;
21
+ grid-template-columns:1fr auto;
22
+ }
23
+ @media (forced-colors: active){
24
+ .iui-date-picker{
25
+ border:1px solid transparent;
26
+ }
27
+ }
28
+ .iui-date-picker .iui-time-picker{
29
+ height:0;
30
+ min-height:100%;
31
+ }
25
32
 
26
33
  .iui-calendar-month-year{
27
34
  display:inline-flex;
@@ -31,87 +38,454 @@
31
38
  padding:0 4px;
32
39
  box-sizing:border-box;
33
40
  font-weight:700;
34
- background-color:#FFF;
35
- background-color:var(--iui-color-background-1); }
36
- .iui-calendar-month-year > span{
37
- margin:0 4px;
38
- width:156px;
39
- white-space:nowrap;
40
- display:inline-flex;
41
- flex-shrink:0;
42
- align-items:center;
43
- justify-content:center;
44
- line-height:44px; }
41
+ gap:4px;
42
+ }
43
+ .iui-calendar-month-year > span{
44
+ width:156px;
45
+ white-space:nowrap;
46
+ display:inline-flex;
47
+ flex-shrink:0;
48
+ align-items:center;
49
+ justify-content:center;
50
+ line-height:44px;
51
+ }
45
52
 
46
53
  .iui-calendar-month{
47
54
  overflow:hidden;
48
55
  max-width:15ch;
49
56
  text-overflow:ellipsis;
50
57
  white-space:nowrap;
51
- flex-shrink:0; }
58
+ flex-shrink:0;
59
+ }
52
60
 
53
61
  .iui-calendar-weekdays{
54
- line-height:33px;
62
+ line-height:36px;
55
63
  display:flex;
56
- justify-content:space-evenly;
57
- align-items:center;
58
64
  padding:0 8px;
59
65
  font-weight:700;
60
- background-color:#F8F9FB;
61
- background-color:var(--iui-color-background-2); }
62
- .iui-calendar-weekdays > div{
63
- white-space:nowrap;
64
- overflow:hidden;
65
- width:32px;
66
- text-align:center; }
66
+ background-color:#f9f9fb;
67
+ background-color:var(--iui-color-background-2);
68
+ }
69
+ .iui-calendar-weekdays > div{
70
+ white-space:nowrap;
71
+ overflow:hidden;
72
+ width:40px;
73
+ text-align:center;
74
+ }
67
75
 
68
76
  .iui-calendar-week{
69
77
  white-space:nowrap;
70
- height:33px;
78
+ line-height:36px;
71
79
  display:flex;
72
- align-items:center;
73
- justify-content:space-evenly;
74
- padding:0 8px; }
80
+ padding:0 8px;
81
+ margin-bottom:2px;
82
+ }
75
83
 
76
- .iui-calendar-day{
84
+ .iui-calendar-day, .iui-calendar-day-today{
77
85
  cursor:pointer;
78
- display:inline-block;
79
- width:33px;
80
- line-height:33px;
81
- border-radius:3px; }
82
- .iui-calendar-day:focus-visible{
86
+ text-align:center;
87
+ width:40px;
88
+ height:36px;
89
+ border-radius:3px;
90
+ font-variant-numeric:tabular-nums;
91
+ }
92
+ .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
93
+ outline:1px solid var(--iui-color-foreground-primary);
94
+ outline-offset:-1px;
95
+ }
96
+ @supports not selector(*:focus-visible){
97
+ .iui-calendar-day:focus, .iui-calendar-day-today:focus{
83
98
  outline:1px solid var(--iui-color-foreground-primary);
84
- outline-offset:-1px; }
85
- @supports not selector(*:focus-visible){
86
- .iui-calendar-day:focus{
87
- outline:1px solid var(--iui-color-foreground-primary);
88
- outline-offset:-1px; } }
89
- .iui-calendar-day.iui-today{
90
- font-weight:600;
91
- border-radius:50%;
92
- background-color:rgba(0, 0, 0, 0.1);
93
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
94
- .iui-calendar-day:hover{
95
- font-weight:600;
96
- color:#008BE1;
97
- background-color:rgba(0, 139, 225, 0.1);
98
- color:var(--iui-color-foreground-primary);
99
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
100
- .iui-calendar-day.iui-selected{
101
- font-weight:600;
102
- border-radius:3px;
103
- cursor:default;
104
- background-color:#008BE1;
105
- color:#FFF;
106
- background-color:var(--iui-color-background-primary);
107
- color:var(--iui-color-foreground-accessory); }
108
- .iui-calendar-day.iui-selected:focus-visible{
109
- outline:1px solid var(--iui-color-foreground-accessory);
110
- outline-offset:-3px; }
111
- @supports not selector(*:focus-visible){
112
- .iui-calendar-day.iui-selected:focus{
113
- outline:1px solid var(--iui-color-foreground-accessory);
114
- outline-offset:-3px; } }
115
- .iui-calendar-day.iui-outside-month{
116
- color:rgba(0, 0, 0, 0.4);
117
- color:var(--iui-text-color-muted); }
99
+ outline-offset:-1px;
100
+ }
101
+ }
102
+ .iui-calendar-day:hover, .iui-calendar-day-today:hover{
103
+ font-weight:600;
104
+ color:#008ae0;
105
+ background-color:rgba(0, 138, 224, 0.1);
106
+ color:var(--iui-color-foreground-primary);
107
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
108
+ }
109
+ .iui-calendar-day-today{
110
+ position:relative;
111
+ font-weight:600;
112
+ }
113
+ .iui-calendar-day-today::before{
114
+ content:"";
115
+ position:absolute;
116
+ display:block;
117
+ width:32px;
118
+ height:32px;
119
+ border-radius:9999px;
120
+ box-sizing:border-box;
121
+ top:50%;
122
+ left:50%;
123
+ transform:translate(-50%, -50%);
124
+ border:2px solid rgba(0, 0, 0, 0.2);
125
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
126
+ }
127
+ .iui-calendar-day-today:hover{
128
+ background-color:initial;
129
+ color:#008ae0;
130
+ color:var(--iui-color-foreground-primary);
131
+ }
132
+ .iui-calendar-day-today:hover::before{
133
+ background-color:rgba(0, 138, 224, 0.1);
134
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
135
+ }
136
+
137
+ .iui-calendar-day-selected, .iui-calendar-day-selected-today{
138
+ cursor:pointer;
139
+ text-align:center;
140
+ width:40px;
141
+ height:36px;
142
+ border-radius:3px;
143
+ font-variant-numeric:tabular-nums;
144
+ font-weight:600;
145
+ background-color:#008ae0;
146
+ color:white;
147
+ background-color:var(--iui-color-background-primary);
148
+ color:var(--iui-color-foreground-accessory);
149
+ cursor:default;
150
+ }
151
+ .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
152
+ outline:1px solid var(--iui-color-foreground-primary);
153
+ outline-offset:-1px;
154
+ }
155
+ @supports not selector(*:focus-visible){
156
+ .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
157
+ outline:1px solid var(--iui-color-foreground-primary);
158
+ outline-offset:-1px;
159
+ }
160
+ }
161
+ .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
162
+ outline:1px solid var(--iui-color-foreground-accessory);
163
+ outline-offset:-3px;
164
+ }
165
+ @supports not selector(*:focus-visible){
166
+ .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
167
+ outline:1px solid var(--iui-color-foreground-accessory);
168
+ outline-offset:-3px;
169
+ }
170
+ }
171
+ .iui-calendar-day-selected-today{
172
+ position:relative;
173
+ font-weight:600;
174
+ }
175
+ .iui-calendar-day-selected-today::before{
176
+ content:"";
177
+ position:absolute;
178
+ display:block;
179
+ width:32px;
180
+ height:32px;
181
+ border-radius:9999px;
182
+ box-sizing:border-box;
183
+ top:50%;
184
+ left:50%;
185
+ transform:translate(-50%, -50%);
186
+ border:2px solid rgba(0, 0, 0, 0.2);
187
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
188
+ }
189
+ .iui-calendar-day-selected-today:hover{
190
+ background-color:initial;
191
+ color:#008ae0;
192
+ color:var(--iui-color-foreground-primary);
193
+ }
194
+ .iui-calendar-day-selected-today:hover::before{
195
+ background-color:rgba(0, 138, 224, 0.1);
196
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
197
+ }
198
+ .iui-calendar-day-selected-today:hover{
199
+ background-color:#008ae0;
200
+ color:white;
201
+ background-color:var(--iui-color-background-primary);
202
+ color:var(--iui-color-foreground-accessory);
203
+ }
204
+ .iui-calendar-day-selected-today:hover::before{
205
+ background-color:initial;
206
+ background-color:initial;
207
+ }
208
+ .iui-calendar-day-selected-today::before{
209
+ border-color:rgba(255, 255, 255, 0.4);
210
+ border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
211
+ }
212
+
213
+ .iui-calendar-day-outside-month, .iui-calendar-day-outside-month-today{
214
+ cursor:pointer;
215
+ text-align:center;
216
+ width:40px;
217
+ height:36px;
218
+ border-radius:3px;
219
+ font-variant-numeric:tabular-nums;
220
+ color:rgba(0, 0, 0, 0.4);
221
+ color:var(--iui-text-color-muted);
222
+ }
223
+ .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today:focus-visible{
224
+ outline:1px solid var(--iui-color-foreground-primary);
225
+ outline-offset:-1px;
226
+ }
227
+ @supports not selector(*:focus-visible){
228
+ .iui-calendar-day-outside-month:focus, .iui-calendar-day-outside-month-today:focus{
229
+ outline:1px solid var(--iui-color-foreground-primary);
230
+ outline-offset:-1px;
231
+ }
232
+ }
233
+ .iui-calendar-day-outside-month:hover, .iui-calendar-day-outside-month-today:hover{
234
+ font-weight:600;
235
+ color:#008ae0;
236
+ background-color:rgba(0, 138, 224, 0.1);
237
+ color:var(--iui-color-foreground-primary);
238
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
239
+ }
240
+ .iui-calendar-day-outside-month-today{
241
+ position:relative;
242
+ font-weight:600;
243
+ }
244
+ .iui-calendar-day-outside-month-today::before{
245
+ content:"";
246
+ position:absolute;
247
+ display:block;
248
+ width:32px;
249
+ height:32px;
250
+ border-radius:9999px;
251
+ box-sizing:border-box;
252
+ top:50%;
253
+ left:50%;
254
+ transform:translate(-50%, -50%);
255
+ border:2px solid rgba(0, 0, 0, 0.2);
256
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
257
+ }
258
+ .iui-calendar-day-outside-month-today:hover{
259
+ background-color:initial;
260
+ color:#008ae0;
261
+ color:var(--iui-color-foreground-primary);
262
+ }
263
+ .iui-calendar-day-outside-month-today:hover::before{
264
+ background-color:rgba(0, 138, 224, 0.1);
265
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
266
+ }
267
+
268
+ .iui-calendar-day-range-start, .iui-calendar-day-range-start-today{
269
+ cursor:pointer;
270
+ text-align:center;
271
+ width:40px;
272
+ height:36px;
273
+ border-radius:3px;
274
+ font-variant-numeric:tabular-nums;
275
+ font-weight:600;
276
+ background-color:#008ae0;
277
+ color:white;
278
+ background-color:var(--iui-color-background-primary);
279
+ color:var(--iui-color-foreground-accessory);
280
+ border-top-right-radius:0;
281
+ border-bottom-right-radius:0;
282
+ cursor:pointer;
283
+ }
284
+ .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
285
+ outline:1px solid var(--iui-color-foreground-primary);
286
+ outline-offset:-1px;
287
+ }
288
+ @supports not selector(*:focus-visible){
289
+ .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
290
+ outline:1px solid var(--iui-color-foreground-primary);
291
+ outline-offset:-1px;
292
+ }
293
+ }
294
+ .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
295
+ outline:1px solid var(--iui-color-foreground-accessory);
296
+ outline-offset:-3px;
297
+ }
298
+ @supports not selector(*:focus-visible){
299
+ .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
300
+ outline:1px solid var(--iui-color-foreground-accessory);
301
+ outline-offset:-3px;
302
+ }
303
+ }
304
+ .iui-calendar-day-range-start-today{
305
+ position:relative;
306
+ font-weight:600;
307
+ }
308
+ .iui-calendar-day-range-start-today::before{
309
+ content:"";
310
+ position:absolute;
311
+ display:block;
312
+ width:32px;
313
+ height:32px;
314
+ border-radius:9999px;
315
+ box-sizing:border-box;
316
+ top:50%;
317
+ left:50%;
318
+ transform:translate(-50%, -50%);
319
+ border:2px solid rgba(0, 0, 0, 0.2);
320
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
321
+ }
322
+ .iui-calendar-day-range-start-today:hover{
323
+ background-color:initial;
324
+ color:#008ae0;
325
+ color:var(--iui-color-foreground-primary);
326
+ }
327
+ .iui-calendar-day-range-start-today:hover::before{
328
+ background-color:rgba(0, 138, 224, 0.1);
329
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
330
+ }
331
+ .iui-calendar-day-range-start-today:hover{
332
+ background-color:#008ae0;
333
+ color:white;
334
+ background-color:var(--iui-color-background-primary);
335
+ color:var(--iui-color-foreground-accessory);
336
+ }
337
+ .iui-calendar-day-range-start-today:hover::before{
338
+ background-color:initial;
339
+ background-color:initial;
340
+ }
341
+ .iui-calendar-day-range-start-today::before{
342
+ border-color:rgba(255, 255, 255, 0.4);
343
+ border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
344
+ }
345
+
346
+ .iui-calendar-day-range-end, .iui-calendar-day-range-end-today{
347
+ cursor:pointer;
348
+ text-align:center;
349
+ width:40px;
350
+ height:36px;
351
+ border-radius:3px;
352
+ font-variant-numeric:tabular-nums;
353
+ font-weight:600;
354
+ background-color:#008ae0;
355
+ color:white;
356
+ background-color:var(--iui-color-background-primary);
357
+ color:var(--iui-color-foreground-accessory);
358
+ border-top-left-radius:0;
359
+ border-bottom-left-radius:0;
360
+ }
361
+ .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
362
+ outline:1px solid var(--iui-color-foreground-primary);
363
+ outline-offset:-1px;
364
+ }
365
+ @supports not selector(*:focus-visible){
366
+ .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
367
+ outline:1px solid var(--iui-color-foreground-primary);
368
+ outline-offset:-1px;
369
+ }
370
+ }
371
+ .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
372
+ outline:1px solid var(--iui-color-foreground-accessory);
373
+ outline-offset:-3px;
374
+ }
375
+ @supports not selector(*:focus-visible){
376
+ .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
377
+ outline:1px solid var(--iui-color-foreground-accessory);
378
+ outline-offset:-3px;
379
+ }
380
+ }
381
+ .iui-calendar-day-range-end-today{
382
+ position:relative;
383
+ font-weight:600;
384
+ }
385
+ .iui-calendar-day-range-end-today::before{
386
+ content:"";
387
+ position:absolute;
388
+ display:block;
389
+ width:32px;
390
+ height:32px;
391
+ border-radius:9999px;
392
+ box-sizing:border-box;
393
+ top:50%;
394
+ left:50%;
395
+ transform:translate(-50%, -50%);
396
+ border:2px solid rgba(0, 0, 0, 0.2);
397
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
398
+ }
399
+ .iui-calendar-day-range-end-today:hover{
400
+ background-color:initial;
401
+ color:#008ae0;
402
+ color:var(--iui-color-foreground-primary);
403
+ }
404
+ .iui-calendar-day-range-end-today:hover::before{
405
+ background-color:rgba(0, 138, 224, 0.1);
406
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
407
+ }
408
+ .iui-calendar-day-range-end-today:hover{
409
+ background-color:#008ae0;
410
+ color:white;
411
+ background-color:var(--iui-color-background-primary);
412
+ color:var(--iui-color-foreground-accessory);
413
+ }
414
+ .iui-calendar-day-range-end-today:hover::before{
415
+ background-color:initial;
416
+ background-color:initial;
417
+ }
418
+ .iui-calendar-day-range-end-today::before{
419
+ border-color:rgba(255, 255, 255, 0.4);
420
+ border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
421
+ }
422
+
423
+ .iui-calendar-day-range, .iui-calendar-day-range-today{
424
+ cursor:pointer;
425
+ text-align:center;
426
+ width:40px;
427
+ height:36px;
428
+ border-radius:3px;
429
+ font-variant-numeric:tabular-nums;
430
+ border-radius:0;
431
+ background-color:rgba(0, 138, 224, 0.2);
432
+ color:rgba(0, 0, 0, 0.8);
433
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
434
+ color:var(--iui-text-color);
435
+ }
436
+ .iui-calendar-day-range:focus-visible, .iui-calendar-day-range-today:focus-visible{
437
+ outline:1px solid var(--iui-color-foreground-primary);
438
+ outline-offset:-1px;
439
+ }
440
+ @supports not selector(*:focus-visible){
441
+ .iui-calendar-day-range:focus, .iui-calendar-day-range-today:focus{
442
+ outline:1px solid var(--iui-color-foreground-primary);
443
+ outline-offset:-1px;
444
+ }
445
+ }
446
+ .iui-calendar-day-range:hover, .iui-calendar-day-range-today:hover{
447
+ font-weight:600;
448
+ background-color:rgba(0, 138, 224, 0.4);
449
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
450
+ }
451
+ .iui-calendar-day-range-today{
452
+ position:relative;
453
+ font-weight:600;
454
+ }
455
+ .iui-calendar-day-range-today::before{
456
+ content:"";
457
+ position:absolute;
458
+ display:block;
459
+ width:32px;
460
+ height:32px;
461
+ border-radius:9999px;
462
+ box-sizing:border-box;
463
+ top:50%;
464
+ left:50%;
465
+ transform:translate(-50%, -50%);
466
+ border:2px solid rgba(0, 0, 0, 0.2);
467
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
468
+ }
469
+ .iui-calendar-day-range-today:hover{
470
+ background-color:initial;
471
+ color:#008ae0;
472
+ color:var(--iui-color-foreground-primary);
473
+ }
474
+ .iui-calendar-day-range-today:hover::before{
475
+ background-color:rgba(0, 138, 224, 0.1);
476
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
477
+ }
478
+ .iui-calendar-day-range-today:hover{
479
+ background-color:rgba(0, 138, 224, 0.2);
480
+ color:rgba(0, 0, 0, 0.8);
481
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
482
+ color:var(--iui-text-color);
483
+ }
484
+ .iui-calendar-day-range-today:hover::before{
485
+ background-color:rgba(0, 138, 224, 0.4);
486
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
487
+ }
488
+ .iui-calendar-day-range-today::before{
489
+ border-color:rgba(0, 138, 224, 0.4);
490
+ border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
491
+ }