@mantine-vue/dates 1.1.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.
@@ -0,0 +1,520 @@
1
+ @layer mantine {
2
+ ._calendar_5kwje_1 {
3
+ display: flex;
4
+ gap: var(--mantine-spacing-md);
5
+ width: max-content;
6
+ }
7
+
8
+ ._calendar_5kwje_1[data-full-width] {
9
+ width: 100%;
10
+ }
11
+
12
+ ._calendar_5kwje_1[data-full-width] > * {
13
+ flex: 1;
14
+ }
15
+
16
+ ._calendarLevel_5kwje_15 {
17
+ min-width: 16.25rem;
18
+ }
19
+
20
+ ._calendarHeader_5kwje_19 {
21
+ --dch-control-size: 2.25rem;
22
+
23
+ display: flex;
24
+ max-width: calc(var(--dch-control-size) * 8 + 0.4375rem);
25
+ margin-bottom: var(--mantine-spacing-xs);
26
+ }
27
+
28
+ ._calendarHeader_5kwje_19[data-full-width] {
29
+ max-width: none;
30
+ width: 100%;
31
+ }
32
+
33
+ ._calendarHeaderLevel_5kwje_32,
34
+ ._calendarHeaderControl_5kwje_33 {
35
+ height: var(--dch-control-size);
36
+ border-radius: var(--mantine-radius-default);
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ user-select: none;
41
+ opacity: 1;
42
+ cursor: pointer;
43
+ color: var(--mantine-color-text);
44
+ }
45
+
46
+ ._calendarHeaderLevel_5kwje_32[data-static],
47
+ ._calendarHeaderControl_5kwje_33[data-static] {
48
+ cursor: default;
49
+ }
50
+
51
+ ._calendarHeaderLevel_5kwje_32:not(:disabled):not([data-disabled]):not([data-static]):hover,
52
+ ._calendarHeaderControl_5kwje_33:not(:disabled):not([data-disabled]):not([data-static]):hover {
53
+ background-color: var(--mantine-color-gray-light-hover);
54
+ }
55
+
56
+ ._calendarHeaderLevel_5kwje_32:disabled,
57
+ ._calendarHeaderLevel_5kwje_32[data-disabled],
58
+ ._calendarHeaderControl_5kwje_33:disabled,
59
+ ._calendarHeaderControl_5kwje_33[data-disabled] {
60
+ opacity: 0.2;
61
+ cursor: not-allowed;
62
+ }
63
+
64
+ ._calendarHeaderControl_5kwje_33 {
65
+ width: var(--dch-control-size);
66
+ }
67
+
68
+ ._calendarHeaderLevel_5kwje_32 {
69
+ flex: 1;
70
+ font-size: var(--mantine-font-size-sm);
71
+ font-weight: 500;
72
+ text-transform: capitalize;
73
+ }
74
+
75
+ ._calendarHeaderControlIcon_5kwje_74 {
76
+ width: 45%;
77
+ height: 45%;
78
+ }
79
+
80
+ ._calendarHeaderControlIcon_5kwje_74[data-direction='next'] {
81
+ transform: rotate(270deg);
82
+ }
83
+
84
+ ._calendarHeaderControlIcon_5kwje_74[data-direction='previous'] {
85
+ transform: rotate(90deg);
86
+ }
87
+
88
+ ._month_5kwje_87 {
89
+ table-layout: fixed;
90
+ border-collapse: separate;
91
+ border-spacing: 0;
92
+ }
93
+
94
+ ._month_5kwje_87[data-full-width] {
95
+ width: 100%;
96
+ }
97
+
98
+ ._monthRow_5kwje_97 {
99
+ border: 0;
100
+ }
101
+
102
+ ._monthCell_5kwje_101 {
103
+ padding: 0;
104
+ text-align: center;
105
+ }
106
+
107
+ ._monthCell_5kwje_101[data-with-spacing] {
108
+ padding: 0.125rem;
109
+ }
110
+
111
+ ._weekday_5kwje_110 {
112
+ height: 1.75rem;
113
+ color: var(--mantine-color-dimmed);
114
+ font-size: var(--mantine-font-size-xs);
115
+ font-weight: 500;
116
+ text-align: center;
117
+ }
118
+
119
+ ._weekday_5kwje_110[data-weekend] {
120
+ color: var(--mantine-color-red-filled);
121
+ }
122
+
123
+ ._weekNumber_5kwje_122 {
124
+ color: var(--mantine-color-dimmed);
125
+ font-size: var(--mantine-font-size-xs);
126
+ text-align: center;
127
+ }
128
+
129
+ ._day_5kwje_128 {
130
+ --day-size: 2.25rem;
131
+ position: relative;
132
+ display: inline-flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ width: var(--day-size);
136
+ height: var(--day-size);
137
+ border-radius: var(--mantine-radius-sm);
138
+ color: var(--mantine-color-text);
139
+ font-size: var(--mantine-font-size-sm);
140
+ line-height: 1;
141
+ user-select: none;
142
+ }
143
+
144
+ ._day_5kwje_128[data-full-width] {
145
+ width: 100%;
146
+ height: auto;
147
+ min-height: var(--day-size);
148
+ aspect-ratio: 1;
149
+ }
150
+
151
+ ._day_5kwje_128:not(:disabled):not([data-static]):not([data-selected]):not([data-in-range]):hover {
152
+ background-color: var(--mantine-color-gray-light-hover);
153
+ }
154
+
155
+ ._day_5kwje_128[data-outside] {
156
+ color: var(--mantine-color-dimmed);
157
+ opacity: 0.65;
158
+ }
159
+
160
+ ._day_5kwje_128[data-weekend] {
161
+ color: var(--mantine-color-red-filled);
162
+ }
163
+
164
+ ._day_5kwje_128[data-today][data-highlight-today] {
165
+ border: 1px solid var(--mantine-primary-color-filled);
166
+ }
167
+
168
+ ._day_5kwje_128[data-in-range] {
169
+ background-color: var(--mantine-primary-color-light);
170
+ color: var(--mantine-primary-color-light-color);
171
+ border-radius: 0;
172
+ }
173
+
174
+ ._day_5kwje_128[data-in-range]:not(:disabled):not([data-static]):hover {
175
+ background-color: var(--mantine-primary-color-light);
176
+ }
177
+
178
+ ._day_5kwje_128[data-selected],
179
+ ._day_5kwje_128[data-first-in-range],
180
+ ._day_5kwje_128[data-last-in-range] {
181
+ background-color: var(--mantine-primary-color-filled);
182
+ color: var(--mantine-color-white);
183
+ }
184
+
185
+ ._day_5kwje_128[data-selected]:not(:disabled):not([data-static]):hover {
186
+ background-color: var(--mantine-primary-color-filled-hover);
187
+ }
188
+
189
+ ._day_5kwje_128:disabled,
190
+ ._pickerControl_5kwje_189:disabled {
191
+ cursor: not-allowed;
192
+ color: var(--mantine-color-dimmed);
193
+ opacity: 0.55;
194
+ }
195
+
196
+ ._controlsGrid_5kwje_195[data-full-width] {
197
+ width: 100%;
198
+ }
199
+
200
+ ._pickerControl_5kwje_189 {
201
+ height: 2.25rem;
202
+ width: calc(2.25rem * 7 / 3 + 0.09375rem);
203
+ display: flex;
204
+ justify-content: center;
205
+ align-items: center;
206
+ padding-inline: var(--mantine-spacing-xs);
207
+ border-radius: var(--mantine-radius-sm);
208
+ color: var(--mantine-color-text);
209
+ font-size: var(--mantine-font-size-sm);
210
+ user-select: none;
211
+ background-color: transparent;
212
+ }
213
+
214
+ ._pickerControl_5kwje_189[data-full-width] {
215
+ width: 100%;
216
+ }
217
+
218
+ ._pickerControl_5kwje_189:not(:disabled):not([data-selected]):not([data-in-range]):hover {
219
+ background-color: var(--mantine-color-gray-light-hover);
220
+ }
221
+
222
+ ._pickerControl_5kwje_189[data-selected] {
223
+ background-color: var(--mantine-primary-color-filled);
224
+ color: var(--mantine-color-white);
225
+ }
226
+
227
+ ._pickerControl_5kwje_189[data-selected]:hover {
228
+ background-color: var(--mantine-primary-color-filled-hover);
229
+ }
230
+
231
+ ._pickerControl_5kwje_189[data-in-range] {
232
+ background-color: var(--mantine-primary-color-light-hover);
233
+ color: var(--mantine-primary-color-light-color);
234
+ }
235
+
236
+ ._pickerControl_5kwje_189[data-in-range]:hover {
237
+ background-color: var(--mantine-primary-color-light);
238
+ }
239
+
240
+ ._pickerControl_5kwje_189[data-first-in-range] {
241
+ border-radius: 0;
242
+ border-start-start-radius: var(--mantine-radius-default);
243
+ border-end-start-radius: var(--mantine-radius-default);
244
+ }
245
+
246
+ ._pickerControl_5kwje_189[data-last-in-range] {
247
+ border-radius: 0;
248
+ border-end-end-radius: var(--mantine-radius-default);
249
+ border-start-end-radius: var(--mantine-radius-default);
250
+ }
251
+
252
+ ._pickerControl_5kwje_189[data-first-in-range][data-last-in-range] {
253
+ border-radius: var(--mantine-radius-default);
254
+ }
255
+
256
+ ._timePicker_5kwje_255,
257
+ ._dateTimePicker_5kwje_256 {
258
+ width: max-content;
259
+ }
260
+
261
+ ._datePickerRoot_5kwje_260 {
262
+ display: flex;
263
+ font-size: var(--mantine-font-size-sm);
264
+ }
265
+
266
+ ._dateTimePicker_5kwje_256 {
267
+ display: grid;
268
+ gap: var(--mantine-spacing-sm);
269
+ }
270
+
271
+ ._timeWrapper_5kwje_270 {
272
+ display: flex;
273
+ align-items: stretch;
274
+ margin-top: var(--mantine-spacing-md);
275
+ }
276
+
277
+ ._timeInput_5kwje_276 {
278
+ flex: 1;
279
+ margin-inline-end: var(--mantine-spacing-md);
280
+ }
281
+
282
+ ._presetsList_5kwje_281 {
283
+ display: flex;
284
+ flex-direction: column;
285
+ border-inline-end: 1px solid var(--mantine-color-default-border);
286
+ padding-inline-end: 0.5em;
287
+ margin-inline-end: 0.5em;
288
+ }
289
+
290
+ ._presetButton_5kwje_289 {
291
+ padding: 0.52em 0.8em;
292
+ border-radius: var(--mantine-radius-default);
293
+ font-size: inherit;
294
+ white-space: nowrap;
295
+ }
296
+
297
+ ._presetButton_5kwje_289:hover {
298
+ background-color: var(--mantine-color-gray-light-hover);
299
+ }
300
+
301
+ ._timePickerPresetsGroup_5kwje_300 {
302
+ margin-bottom: var(--mantine-spacing-xs);
303
+ }
304
+
305
+ ._dropdown_5kwje_304 {
306
+ padding: var(--mantine-spacing-xs);
307
+ }
308
+
309
+ ._placeholder_5kwje_308 {
310
+ color: var(--mantine-color-placeholder);
311
+ }
312
+
313
+ ._timeGridControl_5kwje_312 {
314
+ text-align: center;
315
+ padding-inline: 1em;
316
+ padding-block: 0.25em;
317
+ border: 1px solid var(--mantine-color-default-border);
318
+ background-color: var(--mantine-color-default);
319
+ color: var(--mantine-color-default-color);
320
+ border-radius: var(--mantine-radius-default);
321
+ font-size: var(--mantine-font-size-sm);
322
+ }
323
+
324
+ ._timeGridControl_5kwje_312:not(:disabled):not([data-disabled]):not([data-active]):hover {
325
+ background-color: var(--mantine-color-default-hover);
326
+ }
327
+
328
+ ._timeGridControl_5kwje_312[data-active] {
329
+ background-color: var(--mantine-primary-color-filled);
330
+ color: var(--mantine-color-white);
331
+ border-color: transparent;
332
+ }
333
+
334
+ ._timeGridControl_5kwje_312[data-active]:not(:disabled):not([data-disabled]):hover {
335
+ background-color: var(--mantine-primary-color-filled-hover);
336
+ }
337
+
338
+ ._timeGridControl_5kwje_312:disabled,
339
+ ._timeGridControl_5kwje_312[data-disabled] {
340
+ opacity: 0.5;
341
+ cursor: not-allowed;
342
+ }
343
+
344
+ ._timePickerFieldsRoot_5kwje_343 {
345
+ display: flex;
346
+ align-items: center;
347
+ height: 100%;
348
+ overflow: hidden;
349
+ }
350
+
351
+ ._timePickerFieldsGroup_5kwje_350 {
352
+ display: flex;
353
+ align-items: center;
354
+ height: calc(var(--input-height) - 15px);
355
+ }
356
+
357
+ ._timePickerField_5kwje_343 {
358
+ width: calc(2ch + 0.3em);
359
+ caret-color: transparent;
360
+ font-variant-numeric: tabular-nums;
361
+ position: relative;
362
+ height: 100%;
363
+ line-height: 1;
364
+ padding-inline: 0.15em;
365
+ border: 0;
366
+ text-align: center;
367
+ text-align-last: center;
368
+ background-color: transparent;
369
+ color: var(--input-color);
370
+ border-radius: calc(0.125rem * var(--mantine-scale));
371
+ appearance: none;
372
+ }
373
+
374
+ ._timePickerField_5kwje_343[data-am-pm] {
375
+ width: auto;
376
+ }
377
+
378
+ ._timePickerField_5kwje_343:disabled {
379
+ cursor: not-allowed;
380
+ }
381
+
382
+ ._timePickerField_5kwje_343::selection {
383
+ background-color: transparent;
384
+ }
385
+
386
+ ._timePickerField_5kwje_343::placeholder {
387
+ opacity: 1;
388
+ color: inherit;
389
+ }
390
+
391
+ ._timePickerField_5kwje_343:focus {
392
+ background-color: var(--mantine-primary-color-filled);
393
+ color: var(--mantine-color-white);
394
+ outline: 0;
395
+ }
396
+
397
+ ._timePickerField_5kwje_343:focus::placeholder {
398
+ color: var(--mantine-color-white);
399
+ }
400
+
401
+ ._timePickerDropdown_5kwje_400 {
402
+ padding: calc(0.25rem * var(--mantine-scale));
403
+ }
404
+
405
+ ._timePickerControlsListGroup_5kwje_404 {
406
+ display: flex;
407
+ gap: calc(0.25rem * var(--mantine-scale));
408
+ }
409
+
410
+ ._timePickerControlsList_5kwje_404 {
411
+ display: flex;
412
+ flex-direction: column;
413
+ }
414
+
415
+ ._timePickerControl_5kwje_404 {
416
+ text-align: center;
417
+ min-width: 2.5em;
418
+ width: max-content;
419
+ height: 2em;
420
+ border-radius: var(--mantine-radius-default);
421
+ font-size: var(--mantine-font-size-sm);
422
+ }
423
+
424
+ ._timePickerControl_5kwje_404[data-active] {
425
+ background-color: var(--mantine-primary-color-filled);
426
+ color: var(--mantine-color-white);
427
+ }
428
+
429
+ ._timePickerControl_5kwje_404:not([data-active]):hover {
430
+ color: var(--mantine-color-bright);
431
+ background-color: var(--mantine-color-gray-light-hover);
432
+ }
433
+
434
+ ._miniCalendarRoot_5kwje_433 {
435
+ width: fit-content;
436
+ display: flex;
437
+ align-items: center;
438
+ font-size: var(--mantine-font-size-sm);
439
+ }
440
+
441
+ ._miniCalendarDays_5kwje_440 {
442
+ display: flex;
443
+ font-size: inherit;
444
+ }
445
+
446
+ ._miniCalendarDay_5kwje_440 {
447
+ display: flex;
448
+ min-width: 3em;
449
+ gap: 0.5em;
450
+ font-size: inherit;
451
+ flex-direction: column;
452
+ align-items: center;
453
+ line-height: 1;
454
+ padding: 0.75em;
455
+ border-radius: var(--mantine-radius-default);
456
+ }
457
+
458
+ ._miniCalendarDay_5kwje_440[data-selected] {
459
+ color: var(--mantine-primary-color-contrast);
460
+ background-color: var(--mantine-primary-color-filled);
461
+ }
462
+
463
+ ._miniCalendarDay_5kwje_440[data-selected]:not([data-disabled]):hover {
464
+ background-color: var(--mantine-primary-color-filled-hover);
465
+ }
466
+
467
+ ._miniCalendarDay_5kwje_440[data-disabled] {
468
+ opacity: 0.3;
469
+ cursor: not-allowed;
470
+ }
471
+
472
+ ._miniCalendarDay_5kwje_440:not([data-disabled]):not([data-selected]):hover {
473
+ background-color: var(--mantine-color-gray-light-hover);
474
+ }
475
+
476
+ ._miniCalendarDayMonth_5kwje_475 {
477
+ font-size: 0.75em;
478
+ font-weight: var(--mantine-font-weight-medium);
479
+ opacity: 0.65;
480
+ }
481
+
482
+ ._miniCalendarDayNumber_5kwje_481 {
483
+ font-size: 0.9em;
484
+ font-weight: var(--mantine-font-weight-medium);
485
+ }
486
+
487
+ ._miniCalendarControl_5kwje_486 {
488
+ align-self: stretch;
489
+ font-size: inherit;
490
+ width: 2em;
491
+ border-radius: var(--mantine-radius-default);
492
+ display: flex;
493
+ align-items: center;
494
+ justify-content: center;
495
+ color: var(--mantine-color-bright);
496
+ }
497
+
498
+ ._miniCalendarControl_5kwje_486[data-disabled] {
499
+ opacity: 0.3;
500
+ cursor: not-allowed;
501
+ }
502
+
503
+ ._miniCalendarControl_5kwje_486:not([data-disabled]):hover {
504
+ background-color: var(--mantine-color-gray-light-hover);
505
+ }
506
+
507
+ ._miniCalendarControl_5kwje_486 [data-chevron] {
508
+ font-size: inherit;
509
+ width: 60%;
510
+ }
511
+
512
+ ._miniCalendarControl_5kwje_486[data-direction='previous'] [data-chevron] {
513
+ transform: rotate(90deg);
514
+ }
515
+
516
+ ._miniCalendarControl_5kwje_486[data-direction='next'] [data-chevron] {
517
+ transform: rotate(-90deg);
518
+ }
519
+ /*$vite$:1*/
520
+ }