@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

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