igniteui-theming 8.2.0-beta.1 → 8.2.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.
- package/package.json +1 -1
- package/sass/themes/schemas/components/dark/_calendar.scss +85 -28
- package/sass/themes/schemas/components/dark/_divider.scss +15 -19
- package/sass/themes/schemas/components/dark/_progress.scss +13 -1
- package/sass/themes/schemas/components/light/_calendar.scss +536 -178
- package/sass/themes/schemas/components/light/_chip.scss +3 -3
- package/sass/themes/schemas/components/light/_progress.scss +2 -2
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
/// @prop {Map} inactive-color [color: ('gray', 500)] - The foreground color of the previous and next month dates.
|
|
20
20
|
/// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
|
|
21
21
|
/// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
|
|
22
|
+
/// @prop {Map} year-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the year in years view.
|
|
22
23
|
/// @prop {Map} navigation-color [color: ('gray', 800)] - the color of the buttons responsible for navigation.
|
|
23
24
|
/// @prop {Map} navigation-hover-color [color: ('secondary', 500)] - The :hover color of the buttons responsible for navigation.
|
|
24
25
|
/// @prop {Map} navigation-focus-color [color: ('secondary', 500)] - The :focus color of the buttons responsible for navigation.
|
|
@@ -38,11 +39,11 @@
|
|
|
38
39
|
/// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
|
|
39
40
|
/// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
|
|
40
41
|
/// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus outline color of the current selected date.
|
|
41
|
-
/// @prop {Map}
|
|
42
|
-
/// @prop {Map}
|
|
43
|
-
/// @prop {Color}
|
|
44
|
-
/// @prop {Color}
|
|
45
|
-
/// @prop {Color}
|
|
42
|
+
/// @prop {Map} current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the current year/month in year/month views.
|
|
43
|
+
/// @prop {Map} current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the current year/month in year/month views.
|
|
44
|
+
/// @prop {Color} selected-outline-color [transparent] - The outline color of the selected year/month in year/month views.
|
|
45
|
+
/// @prop {Color} selected-hover-outline-color [transparent] - The :hover outline color of the selected year/month in year/month views.
|
|
46
|
+
/// @prop {Color} selected-focus-outline-color [transparent] - The :focus outline color of the selected year/month in year/month views.
|
|
46
47
|
/// @prop {Color} border-color [transparent] - The calendar border color.
|
|
47
48
|
/// @prop {Color} date-border-color [transparent] - The border color around a date.
|
|
48
49
|
/// @prop {Color} date-hover-border-color [transparent] - The :hover border color around a date.
|
|
@@ -57,7 +58,7 @@
|
|
|
57
58
|
/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
|
|
58
59
|
/// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the date.
|
|
59
60
|
/// @prop {List} date-range-border-radius [(rem(20px), rem(0), rem(20px))] -The border radius used for the date in range selection.
|
|
60
|
-
/// @prop {List}
|
|
61
|
+
/// @prop {List} month-year-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the month/year in month/year view.
|
|
61
62
|
/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size of the days, months, and years views..
|
|
62
63
|
/// @prop {List} inner-size [(rem(24px), rem(26px), rem(30px))] - The size of the inner element of a date(often used to outline the special date)
|
|
63
64
|
/// @prop {Number} default-size [2] - The default size used for the calendar component.
|
|
@@ -102,6 +103,12 @@ $light-calendar: (
|
|
|
102
103
|
500,
|
|
103
104
|
),
|
|
104
105
|
),
|
|
106
|
+
year-hover-foreground: (
|
|
107
|
+
color: (
|
|
108
|
+
'gray',
|
|
109
|
+
900,
|
|
110
|
+
),
|
|
111
|
+
),
|
|
105
112
|
navigation-color: (
|
|
106
113
|
color: (
|
|
107
114
|
'gray',
|
|
@@ -120,21 +127,21 @@ $light-calendar: (
|
|
|
120
127
|
500,
|
|
121
128
|
),
|
|
122
129
|
),
|
|
123
|
-
|
|
130
|
+
current-outline-hover-color: (
|
|
124
131
|
color: (
|
|
125
132
|
'gray',
|
|
126
133
|
900,
|
|
127
134
|
),
|
|
128
135
|
),
|
|
129
|
-
|
|
136
|
+
current-outline-focus-color: (
|
|
130
137
|
color: (
|
|
131
138
|
'gray',
|
|
132
139
|
900,
|
|
133
140
|
),
|
|
134
141
|
),
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
142
|
+
selected-outline-color: transparent,
|
|
143
|
+
selected-hover-outline-color: transparent,
|
|
144
|
+
selected-focus-outline-color: transparent,
|
|
138
145
|
date-hover-foreground: (
|
|
139
146
|
color: (
|
|
140
147
|
'gray',
|
|
@@ -261,7 +268,7 @@ $light-calendar: (
|
|
|
261
268
|
rem(20px),
|
|
262
269
|
),
|
|
263
270
|
),
|
|
264
|
-
|
|
271
|
+
month-year-border-radius: (
|
|
265
272
|
border-radius: (
|
|
266
273
|
rem(20px),
|
|
267
274
|
rem(0),
|
|
@@ -305,22 +312,33 @@ $light-calendar: (
|
|
|
305
312
|
/// @prop {Map} header-foreground [contrast-color: ('secondary', 900)] - The header foreground color.
|
|
306
313
|
/// @prop {Map} header-background [color: ('secondary', 500)] - The header background color.
|
|
307
314
|
/// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
|
|
308
|
-
/// @prop {Map}
|
|
309
|
-
/// @prop {Map}
|
|
310
|
-
/// @prop {Map}
|
|
311
|
-
/// @prop {Map}
|
|
312
|
-
/// @prop {Map}
|
|
313
|
-
/// @prop {Map}
|
|
314
|
-
/// @prop {Map}
|
|
315
|
-
/// @prop {Map}
|
|
316
|
-
/// @prop {Map}
|
|
317
|
-
/// @prop {Map}
|
|
318
|
-
/// @prop {Map}
|
|
319
|
-
/// @prop {Map}
|
|
320
|
-
/// @prop {Map}
|
|
321
|
-
/// @prop {Map}
|
|
322
|
-
/// @prop {Map}
|
|
323
|
-
/// @prop {Map}
|
|
315
|
+
/// @prop {Map} year-hover-background [color: ('gray', 100)] - The :hover background color of the year in years view.
|
|
316
|
+
/// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
|
|
317
|
+
/// @prop {Map} year-current-background [color: ('surface')] - The background color of the current year in years view.
|
|
318
|
+
/// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
|
|
319
|
+
/// @prop {Map} year-current-hover-background [color: ('gray', 100)] - The :hover background color of the current year in years view.
|
|
320
|
+
/// @prop {Map} year-selected-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected year.
|
|
321
|
+
/// @prop {Map} year-selected-background [color: ('secondary', 500)] - The background color of the selected year in years view.
|
|
322
|
+
/// @prop {Map} year-selected-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected year in years view.
|
|
323
|
+
/// @prop {Map} year-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected year in years view.
|
|
324
|
+
/// @prop {Map} year-selected-current-foreground [contrast-color: ('secondary', 600)] - The foreground color of the current/selected year.
|
|
325
|
+
/// @prop {Map} year-selected-current-background [color: ('secondary', 500)] - The foreground color of the current/selected year.
|
|
326
|
+
/// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected year.
|
|
327
|
+
/// @prop {Map} year-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected year.
|
|
328
|
+
/// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month inside the months view.
|
|
329
|
+
/// @prop {Map} month-hover-background [color: ('gray', 100)] - The :hover background color of the month inside the months view.
|
|
330
|
+
/// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
|
|
331
|
+
/// @prop {Map} month-current-background [color: ('surface')] - The background color of the current month in month view.
|
|
332
|
+
/// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
|
|
333
|
+
/// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in month view.
|
|
334
|
+
/// @prop {Map} month-selected-foreground [contrast-color: ('secondary', 600)] - The foreground color of the selected month in month view.
|
|
335
|
+
/// @prop {Map} month-selected-background [color: ('secondary', 500)] - The background color of the selected month in month view.
|
|
336
|
+
/// @prop {Map} month-selected-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the selected month in month view.
|
|
337
|
+
/// @prop {Map} month-selected-hover-background [color: ('secondary', 700)] - The :hover background color of the selected month in month view.
|
|
338
|
+
/// @prop {Map} month-selected-current-foreground [contrast-color: ('secondary', 500)] - The foreground color of the current/selected month in month view.
|
|
339
|
+
/// @prop {Map} month-selected-current-background [color: ('secondary', 500)] - The background color of the current/selected month in month view.
|
|
340
|
+
/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected month in month view.
|
|
341
|
+
/// @prop {Map} month-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected month in month view.
|
|
324
342
|
/// @prop {Map} date-hover-background [color: ('gray', 100)] - The :hover background color of a date.
|
|
325
343
|
/// @prop {Map} date-focus-background [color: ('gray', 100)] - The :focus background color of date.
|
|
326
344
|
/// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
|
|
@@ -353,10 +371,10 @@ $light-calendar: (
|
|
|
353
371
|
/// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
|
|
354
372
|
/// @prop {Map} date-special-border-color [color: ('secondary', 500)] - The outline color around a special date.
|
|
355
373
|
/// @prop {Map} date-special-hover-border-color [color: ('secondary', 700)] - The outline color around a special date.
|
|
356
|
-
/// @prop {Map}
|
|
357
|
-
/// @prop {Map}
|
|
358
|
-
/// @prop {Map}
|
|
359
|
-
/// @prop {Map}
|
|
374
|
+
/// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
|
|
375
|
+
/// @prop {Map} selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current year/month in year/month views.
|
|
376
|
+
/// @prop {Map} selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
|
|
377
|
+
/// @prop {Map} selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
|
|
360
378
|
/// @prop {Map} date-current-border-color [color: ('gray', 900)] - The border color of the current date.
|
|
361
379
|
/// @prop {Map} date-current-hover-border-color [color: ('gray', 900)] - The :hover border color of the current date.
|
|
362
380
|
/// @prop {Map} date-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the current date.
|
|
@@ -388,87 +406,162 @@ $material-calendar: extend(
|
|
|
388
406
|
900,
|
|
389
407
|
),
|
|
390
408
|
),
|
|
391
|
-
|
|
409
|
+
year-hover-background: (
|
|
410
|
+
color: (
|
|
411
|
+
'gray',
|
|
412
|
+
100,
|
|
413
|
+
),
|
|
414
|
+
),
|
|
415
|
+
year-current-foreground: (
|
|
416
|
+
color: (
|
|
417
|
+
'gray',
|
|
418
|
+
900,
|
|
419
|
+
),
|
|
420
|
+
),
|
|
421
|
+
year-current-background: (
|
|
422
|
+
color: 'surface',
|
|
423
|
+
),
|
|
424
|
+
year-current-hover-foreground: (
|
|
425
|
+
color: (
|
|
426
|
+
'gray',
|
|
427
|
+
900,
|
|
428
|
+
),
|
|
429
|
+
),
|
|
430
|
+
year-current-hover-background: (
|
|
431
|
+
color: (
|
|
432
|
+
'gray',
|
|
433
|
+
100,
|
|
434
|
+
),
|
|
435
|
+
),
|
|
436
|
+
year-selected-foreground: (
|
|
437
|
+
contrast-color: (
|
|
438
|
+
'secondary',
|
|
439
|
+
600,
|
|
440
|
+
),
|
|
441
|
+
),
|
|
442
|
+
year-selected-background: (
|
|
443
|
+
color: (
|
|
444
|
+
'secondary',
|
|
445
|
+
500,
|
|
446
|
+
),
|
|
447
|
+
),
|
|
448
|
+
year-selected-hover-foreground: (
|
|
449
|
+
contrast-color: (
|
|
450
|
+
'secondary',
|
|
451
|
+
700,
|
|
452
|
+
),
|
|
453
|
+
),
|
|
454
|
+
year-selected-hover-background: (
|
|
455
|
+
color: (
|
|
456
|
+
'secondary',
|
|
457
|
+
700,
|
|
458
|
+
),
|
|
459
|
+
),
|
|
460
|
+
year-selected-current-foreground: (
|
|
461
|
+
contrast-color: (
|
|
462
|
+
'secondary',
|
|
463
|
+
600,
|
|
464
|
+
),
|
|
465
|
+
),
|
|
466
|
+
year-selected-current-background: (
|
|
467
|
+
color: (
|
|
468
|
+
'secondary',
|
|
469
|
+
500,
|
|
470
|
+
),
|
|
471
|
+
),
|
|
472
|
+
year-selected-current-hover-foreground: (
|
|
392
473
|
contrast-color: (
|
|
393
474
|
'secondary',
|
|
394
475
|
700,
|
|
395
476
|
),
|
|
396
477
|
),
|
|
397
|
-
|
|
478
|
+
year-selected-current-hover-background: (
|
|
398
479
|
color: (
|
|
399
480
|
'secondary',
|
|
400
481
|
700,
|
|
401
482
|
),
|
|
402
483
|
),
|
|
403
|
-
|
|
484
|
+
month-hover-foreground: (
|
|
404
485
|
color: (
|
|
405
486
|
'gray',
|
|
406
487
|
900,
|
|
407
488
|
),
|
|
408
489
|
),
|
|
409
|
-
|
|
490
|
+
month-hover-background: (
|
|
410
491
|
color: (
|
|
411
492
|
'gray',
|
|
412
493
|
100,
|
|
413
494
|
),
|
|
414
495
|
),
|
|
415
|
-
|
|
496
|
+
month-current-foreground: (
|
|
416
497
|
color: (
|
|
417
498
|
'gray',
|
|
418
499
|
900,
|
|
419
500
|
),
|
|
420
501
|
),
|
|
421
|
-
|
|
502
|
+
month-current-background: (
|
|
422
503
|
color: 'surface',
|
|
423
504
|
),
|
|
424
|
-
|
|
505
|
+
month-current-hover-foreground: (
|
|
425
506
|
color: (
|
|
426
507
|
'gray',
|
|
427
508
|
900,
|
|
428
509
|
),
|
|
429
510
|
),
|
|
430
|
-
|
|
511
|
+
month-current-hover-background: (
|
|
431
512
|
color: (
|
|
432
513
|
'gray',
|
|
433
514
|
100,
|
|
434
515
|
),
|
|
435
516
|
),
|
|
436
|
-
|
|
517
|
+
month-selected-foreground: (
|
|
437
518
|
contrast-color: (
|
|
438
519
|
'secondary',
|
|
439
520
|
600,
|
|
440
521
|
),
|
|
441
522
|
),
|
|
442
|
-
|
|
523
|
+
month-selected-background: (
|
|
443
524
|
color: (
|
|
444
525
|
'secondary',
|
|
445
526
|
500,
|
|
446
527
|
),
|
|
447
528
|
),
|
|
448
|
-
|
|
529
|
+
month-selected-hover-foreground: (
|
|
449
530
|
contrast-color: (
|
|
450
531
|
'secondary',
|
|
451
532
|
700,
|
|
452
533
|
),
|
|
453
534
|
),
|
|
454
|
-
|
|
535
|
+
month-selected-hover-background: (
|
|
455
536
|
color: (
|
|
456
537
|
'secondary',
|
|
457
538
|
700,
|
|
458
539
|
),
|
|
459
540
|
),
|
|
460
|
-
|
|
541
|
+
month-selected-current-foreground: (
|
|
461
542
|
contrast-color: (
|
|
462
543
|
'secondary',
|
|
463
544
|
500,
|
|
464
545
|
),
|
|
465
546
|
),
|
|
466
|
-
|
|
547
|
+
month-selected-current-background: (
|
|
467
548
|
color: (
|
|
468
549
|
'secondary',
|
|
469
550
|
500,
|
|
470
551
|
),
|
|
471
552
|
),
|
|
553
|
+
month-selected-current-hover-foreground: (
|
|
554
|
+
contrast-color: (
|
|
555
|
+
'secondary',
|
|
556
|
+
700,
|
|
557
|
+
),
|
|
558
|
+
),
|
|
559
|
+
month-selected-current-hover-background: (
|
|
560
|
+
color: (
|
|
561
|
+
'secondary',
|
|
562
|
+
700,
|
|
563
|
+
),
|
|
564
|
+
),
|
|
472
565
|
date-hover-background: (
|
|
473
566
|
color: (
|
|
474
567
|
'gray',
|
|
@@ -657,25 +750,25 @@ $material-calendar: extend(
|
|
|
657
750
|
700,
|
|
658
751
|
),
|
|
659
752
|
),
|
|
660
|
-
|
|
753
|
+
selected-current-outline-color: (
|
|
661
754
|
color: (
|
|
662
755
|
'gray',
|
|
663
756
|
900,
|
|
664
757
|
),
|
|
665
758
|
),
|
|
666
|
-
|
|
759
|
+
current-outline-color: (
|
|
667
760
|
color: (
|
|
668
761
|
'gray',
|
|
669
762
|
900,
|
|
670
763
|
),
|
|
671
764
|
),
|
|
672
|
-
|
|
765
|
+
selected-current-outline-hover-color: (
|
|
673
766
|
color: (
|
|
674
767
|
'gray',
|
|
675
768
|
900,
|
|
676
769
|
),
|
|
677
770
|
),
|
|
678
|
-
|
|
771
|
+
selected-current-outline-focus-color: (
|
|
679
772
|
color: (
|
|
680
773
|
'gray',
|
|
681
774
|
900,
|
|
@@ -741,7 +834,8 @@ $material-calendar: extend(
|
|
|
741
834
|
|
|
742
835
|
/// Generates a fluent calendar schema.
|
|
743
836
|
/// @type {Map}
|
|
744
|
-
/// @prop {Map}
|
|
837
|
+
/// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month inside the months view.
|
|
838
|
+
/// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the year in years view.
|
|
745
839
|
/// @prop {Map} picker-hover-foreground [color: ('primary', 500)] - The :hover foreground color of the month and year pickers.
|
|
746
840
|
/// @prop {Map} picker-focus-foreground [color: ('primary', 500)] - The :focus foreground color of the month and year pickers.
|
|
747
841
|
/// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the buttons responsible for navigation.
|
|
@@ -756,21 +850,31 @@ $material-calendar: extend(
|
|
|
756
850
|
/// @prop {Map} date-selected-current-border-color [color: ('gray', 700)] - The border color of the selected current date.
|
|
757
851
|
/// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected current date.
|
|
758
852
|
/// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected current date.
|
|
759
|
-
/// @prop {Map}
|
|
760
|
-
/// @prop {Map}
|
|
761
|
-
/// @prop {Map}
|
|
762
|
-
/// @prop {Map}
|
|
763
|
-
/// @prop {Map}
|
|
764
|
-
/// @prop {Map}
|
|
765
|
-
/// @prop {Map}
|
|
766
|
-
/// @prop {Map}
|
|
767
|
-
/// @prop {Map}
|
|
768
|
-
/// @prop {Map}
|
|
769
|
-
/// @prop {Map}
|
|
770
|
-
/// @prop {Map}
|
|
771
|
-
/// @prop {Map}
|
|
772
|
-
/// @prop {Map}
|
|
773
|
-
/// @prop {Map}
|
|
853
|
+
/// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
|
|
854
|
+
/// @prop {Map} year-current-background [color: ('gray', 100)] - The background color of the current year in years view.
|
|
855
|
+
/// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
|
|
856
|
+
/// @prop {Map} year-current-hover-background [color: ('gray', 200)] - The :hover background color of the current year in years view.
|
|
857
|
+
/// @prop {Map} year-selected-foreground [color: ('gray', 900)] - The foreground color of the selected year.
|
|
858
|
+
/// @prop {Map} year-selected-background [color: ('primary', 50, .3)] - The background color of the selected year.
|
|
859
|
+
/// @prop {Map} year-selected-hover-foreground [color: ('gray', 900)] - The foreground color of the selected year on :hover.
|
|
860
|
+
/// @prop {Map} year-selected-hover-background [color: ('primary', 100, .5)] - The background color of the selected year on :hover.
|
|
861
|
+
/// @prop {Map} year-selected-current-foreground [color: ('gray', 900)] - The foreground color of the current/selected year.
|
|
862
|
+
/// @prop {Map} year-selected-current-background [color: ('primary', 50, .3)] - The background color of the current/selected year.
|
|
863
|
+
/// @prop {Map} year-selected-current-hover-foreground [color: ('gray', 900)] - The foreground color of the current/selected year on :hover.
|
|
864
|
+
/// @prop {Map} year-selected-current-hover-background [color: ('primary', 100, .5)] - The background color of the current/selected year on :hover.
|
|
865
|
+
/// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month inside the months view.
|
|
866
|
+
/// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
|
|
867
|
+
/// @prop {Map} month-current-background [color: ('gray', 100)] - The background color of the current month in month view.
|
|
868
|
+
/// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
|
|
869
|
+
/// @prop {Map} month-current-hover-background [color: ('gray', 200)] - The :hover background color of the current month in month view.
|
|
870
|
+
/// @prop {Map} month-selected-foreground [color: ('gray', 900)] - The foreground color of the selected month in month view.
|
|
871
|
+
/// @prop {Map} month-selected-background [color: ('primary', 50, .3)] - The background color of the selected month in month view.
|
|
872
|
+
/// @prop {Map} month-selected-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the selected month in month view.
|
|
873
|
+
/// @prop {Map} month-selected-hover-background [color: ('gray', 100, .5)] - The :hover background color of the selected month in month view.
|
|
874
|
+
/// @prop {Map} month-selected-current-foreground [color: ('gray', 900)] - The foreground color of the current/selected month in month view.
|
|
875
|
+
/// @prop {Map} month-selected-current-background [color: ('primary', 50, .3)] - The background color of the current/selected month in month view.
|
|
876
|
+
/// @prop {Map} month-selected-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current/selected month in month view.
|
|
877
|
+
/// @prop {Map} month-selected-current-hover-background [color: ('primary', 100, .5)] - The :hover background color of the current/selected month in month view.
|
|
774
878
|
/// @prop {Map} date-hover-background [color: ('gray', 900)] - The :hover background color of date.
|
|
775
879
|
/// @prop {Map} date-focus-background [color: ('gray', 200)] - The :focus background color of a date.
|
|
776
880
|
/// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
|
|
@@ -803,12 +907,14 @@ $material-calendar: extend(
|
|
|
803
907
|
/// @prop {Map} date-selected-border-color [color: ('gray', 700)] - The border color of the selected date.
|
|
804
908
|
/// @prop {Map} date-selected-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected date.
|
|
805
909
|
/// @prop {Map} date-selected-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected date.
|
|
806
|
-
/// @prop {Color}
|
|
807
|
-
/// @prop {Color}
|
|
808
|
-
/// @prop {Color}
|
|
809
|
-
/// @prop {
|
|
810
|
-
/// @prop {
|
|
811
|
-
/// @prop {Map}
|
|
910
|
+
/// @prop {Color} current-outline-color [transparent] - The outline color of the current year/month in year/month views.
|
|
911
|
+
/// @prop {Color} current-outline-hover-color [transparent] - The :hover outline color of the current year/month in year/month views.
|
|
912
|
+
/// @prop {Color} current-outline-focus-color [transparent] - The :focus outline color of the current year/month in year/month views.
|
|
913
|
+
/// @prop {Color} current-hover-outline-color [transparent] - The :hover outline color of the current year/month in year/month views.
|
|
914
|
+
/// @prop {Color} current-focus-outline-color [transparent] - The :focus outline color of the current year/month in year/month views.
|
|
915
|
+
/// @prop {Map} selected-current-outline-color [color: ('gray', 700)] - The outline color of the selected current year/month in year/month views.
|
|
916
|
+
/// @prop {Map} selected-current-outline-hover-color [color: ('gray', 700)] - The :hover outline color of the selected current year/month in year/month views.
|
|
917
|
+
/// @prop {Map} selected-current-outline-focus-color [color: ('gray', 700)] - The :focus outline color of the selected current year/month in year/month views.
|
|
812
918
|
/// @prop {Map} date-selected-range-foreground [color: ('gray', 900)] - The foreground color of the selected range.
|
|
813
919
|
/// @prop {Map} date-selected-range-background [color: ('gray', 100)] - The background color of the selected range.
|
|
814
920
|
/// @prop {Map} date-selected-range-hover-background [color: ('gray', 200)] - The :hover background color of the selected range.
|
|
@@ -825,7 +931,7 @@ $material-calendar: extend(
|
|
|
825
931
|
/// @prop {List} border-radius [(rem(0), rem(0), rem(25px))] - The border radius used for calendar.
|
|
826
932
|
/// @prop {List} date-border-radius [(rem(0), rem(0), rem(25px))] - The border radius used for the date outline
|
|
827
933
|
/// @prop {List} date-range-border-radius [(rem(0), rem(0), rem(25px))] - The border radius used for the date outline in range selection.
|
|
828
|
-
/// @prop {List}
|
|
934
|
+
/// @prop {List} month-year-border-radius [(rem(0), rem(0), rem(25px))] - The border radius used for the month/year in month/year view.
|
|
829
935
|
/// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
|
|
830
936
|
/// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size of the days, months, and years views.
|
|
831
937
|
/// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
|
|
@@ -849,7 +955,13 @@ $fluent-calendar: extend(
|
|
|
849
955
|
rem(32px),
|
|
850
956
|
),
|
|
851
957
|
),
|
|
852
|
-
|
|
958
|
+
year-hover-background: (
|
|
959
|
+
color: (
|
|
960
|
+
'gray',
|
|
961
|
+
200,
|
|
962
|
+
),
|
|
963
|
+
),
|
|
964
|
+
month-hover-background: (
|
|
853
965
|
color: (
|
|
854
966
|
'gray',
|
|
855
967
|
200,
|
|
@@ -976,88 +1088,164 @@ $fluent-calendar: extend(
|
|
|
976
1088
|
900,
|
|
977
1089
|
),
|
|
978
1090
|
),
|
|
979
|
-
|
|
1091
|
+
year-current-foreground: (
|
|
1092
|
+
color: (
|
|
1093
|
+
'gray',
|
|
1094
|
+
900,
|
|
1095
|
+
),
|
|
1096
|
+
),
|
|
1097
|
+
year-current-background: (
|
|
1098
|
+
color: (
|
|
1099
|
+
'gray',
|
|
1100
|
+
100,
|
|
1101
|
+
),
|
|
1102
|
+
),
|
|
1103
|
+
year-current-hover-foreground: (
|
|
1104
|
+
color: (
|
|
1105
|
+
'gray',
|
|
1106
|
+
900,
|
|
1107
|
+
),
|
|
1108
|
+
),
|
|
1109
|
+
year-current-hover-background: (
|
|
1110
|
+
color: (
|
|
1111
|
+
'gray',
|
|
1112
|
+
200,
|
|
1113
|
+
),
|
|
1114
|
+
),
|
|
1115
|
+
year-selected-foreground: (
|
|
1116
|
+
color: (
|
|
1117
|
+
'gray',
|
|
1118
|
+
900,
|
|
1119
|
+
),
|
|
1120
|
+
),
|
|
1121
|
+
year-selected-background: (
|
|
1122
|
+
color: (
|
|
1123
|
+
'primary',
|
|
1124
|
+
50,
|
|
1125
|
+
0.3,
|
|
1126
|
+
),
|
|
1127
|
+
),
|
|
1128
|
+
year-selected-hover-foreground: (
|
|
1129
|
+
color: (
|
|
1130
|
+
'gray',
|
|
1131
|
+
900,
|
|
1132
|
+
),
|
|
1133
|
+
),
|
|
1134
|
+
year-selected-hover-background: (
|
|
1135
|
+
color: (
|
|
1136
|
+
'primary',
|
|
1137
|
+
100,
|
|
1138
|
+
0.5,
|
|
1139
|
+
),
|
|
1140
|
+
),
|
|
1141
|
+
year-selected-current-foreground: (
|
|
1142
|
+
color: (
|
|
1143
|
+
'gray',
|
|
1144
|
+
900,
|
|
1145
|
+
),
|
|
1146
|
+
),
|
|
1147
|
+
year-selected-current-background: (
|
|
1148
|
+
color: (
|
|
1149
|
+
'primary',
|
|
1150
|
+
50,
|
|
1151
|
+
0.3,
|
|
1152
|
+
),
|
|
1153
|
+
),
|
|
1154
|
+
year-selected-current-hover-foreground: (
|
|
980
1155
|
color: (
|
|
981
1156
|
'gray',
|
|
982
1157
|
900,
|
|
983
1158
|
),
|
|
984
1159
|
),
|
|
985
|
-
|
|
1160
|
+
year-selected-current-hover-background: (
|
|
986
1161
|
color: (
|
|
987
1162
|
'primary',
|
|
988
1163
|
100,
|
|
989
1164
|
0.5,
|
|
990
1165
|
),
|
|
991
1166
|
),
|
|
992
|
-
|
|
1167
|
+
month-hover-foreground: (
|
|
993
1168
|
color: (
|
|
994
1169
|
'gray',
|
|
995
1170
|
900,
|
|
996
1171
|
),
|
|
997
1172
|
),
|
|
998
|
-
|
|
1173
|
+
month-current-foreground: (
|
|
999
1174
|
color: (
|
|
1000
1175
|
'gray',
|
|
1001
1176
|
900,
|
|
1002
1177
|
),
|
|
1003
1178
|
),
|
|
1004
|
-
|
|
1179
|
+
month-current-background: (
|
|
1005
1180
|
color: (
|
|
1006
1181
|
'gray',
|
|
1007
1182
|
100,
|
|
1008
1183
|
),
|
|
1009
1184
|
),
|
|
1010
|
-
|
|
1185
|
+
month-current-hover-foreground: (
|
|
1011
1186
|
color: (
|
|
1012
1187
|
'gray',
|
|
1013
1188
|
900,
|
|
1014
1189
|
),
|
|
1015
1190
|
),
|
|
1016
|
-
|
|
1191
|
+
month-current-hover-background: (
|
|
1017
1192
|
color: (
|
|
1018
1193
|
'gray',
|
|
1019
1194
|
200,
|
|
1020
1195
|
),
|
|
1021
1196
|
),
|
|
1022
|
-
|
|
1197
|
+
month-selected-foreground: (
|
|
1023
1198
|
color: (
|
|
1024
1199
|
'gray',
|
|
1025
1200
|
900,
|
|
1026
1201
|
),
|
|
1027
1202
|
),
|
|
1028
|
-
|
|
1203
|
+
month-selected-background: (
|
|
1029
1204
|
color: (
|
|
1030
1205
|
'primary',
|
|
1031
1206
|
50,
|
|
1032
1207
|
0.3,
|
|
1033
1208
|
),
|
|
1034
1209
|
),
|
|
1035
|
-
|
|
1210
|
+
month-selected-hover-foreground: (
|
|
1036
1211
|
color: (
|
|
1037
1212
|
'gray',
|
|
1038
1213
|
900,
|
|
1039
1214
|
),
|
|
1040
1215
|
),
|
|
1041
|
-
|
|
1216
|
+
month-selected-hover-background: (
|
|
1042
1217
|
color: (
|
|
1043
1218
|
'primary',
|
|
1044
1219
|
100,
|
|
1045
1220
|
0.5,
|
|
1046
1221
|
),
|
|
1047
1222
|
),
|
|
1048
|
-
|
|
1223
|
+
month-selected-current-foreground: (
|
|
1049
1224
|
color: (
|
|
1050
1225
|
'gray',
|
|
1051
1226
|
900,
|
|
1052
1227
|
),
|
|
1053
1228
|
),
|
|
1054
|
-
|
|
1229
|
+
month-selected-current-background: (
|
|
1055
1230
|
color: (
|
|
1056
1231
|
'primary',
|
|
1057
1232
|
50,
|
|
1058
1233
|
0.3,
|
|
1059
1234
|
),
|
|
1060
1235
|
),
|
|
1236
|
+
month-selected-current-hover-foreground: (
|
|
1237
|
+
color: (
|
|
1238
|
+
'gray',
|
|
1239
|
+
900,
|
|
1240
|
+
),
|
|
1241
|
+
),
|
|
1242
|
+
month-selected-current-hover-background: (
|
|
1243
|
+
color: (
|
|
1244
|
+
'primary',
|
|
1245
|
+
100,
|
|
1246
|
+
0.5,
|
|
1247
|
+
),
|
|
1248
|
+
),
|
|
1061
1249
|
date-selected-current-foreground: (
|
|
1062
1250
|
contrast-color: (
|
|
1063
1251
|
'primary',
|
|
@@ -1238,22 +1426,22 @@ $fluent-calendar: extend(
|
|
|
1238
1426
|
200,
|
|
1239
1427
|
),
|
|
1240
1428
|
),
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1429
|
+
current-outline-color: transparent,
|
|
1430
|
+
current-outline-hover-color: transparent,
|
|
1431
|
+
current-outline-focus-color: transparent,
|
|
1432
|
+
selected-current-outline-color: (
|
|
1245
1433
|
color: (
|
|
1246
1434
|
'gray',
|
|
1247
1435
|
700,
|
|
1248
1436
|
),
|
|
1249
1437
|
),
|
|
1250
|
-
|
|
1438
|
+
selected-current-outline-hover-color: (
|
|
1251
1439
|
color: (
|
|
1252
1440
|
'gray',
|
|
1253
1441
|
700,
|
|
1254
1442
|
),
|
|
1255
1443
|
),
|
|
1256
|
-
|
|
1444
|
+
selected-current-outline-focus-color: (
|
|
1257
1445
|
color: (
|
|
1258
1446
|
'gray',
|
|
1259
1447
|
700,
|
|
@@ -1280,7 +1468,7 @@ $fluent-calendar: extend(
|
|
|
1280
1468
|
rem(25px),
|
|
1281
1469
|
),
|
|
1282
1470
|
),
|
|
1283
|
-
|
|
1471
|
+
month-year-border-radius: (
|
|
1284
1472
|
border-radius: (
|
|
1285
1473
|
rem(0),
|
|
1286
1474
|
rem(2px),
|
|
@@ -1358,22 +1546,33 @@ $fluent-calendar: extend(
|
|
|
1358
1546
|
/// @prop {Map} header-background [color: ('gray', 100)] - The header background color.
|
|
1359
1547
|
/// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
|
|
1360
1548
|
/// @prop {Map} picker-background [color: ('gray', 100)] - The background color of the month and year pickers.
|
|
1361
|
-
/// @prop {Map}
|
|
1362
|
-
/// @prop {
|
|
1363
|
-
/// @prop {Map}
|
|
1364
|
-
/// @prop {Map}
|
|
1365
|
-
/// @prop {Map}
|
|
1366
|
-
/// @prop {
|
|
1367
|
-
/// @prop {Map}
|
|
1368
|
-
/// @prop {Map}
|
|
1369
|
-
/// @prop {Map}
|
|
1370
|
-
/// @prop {Map}
|
|
1371
|
-
/// @prop {Map}
|
|
1372
|
-
/// @prop {Map}
|
|
1373
|
-
/// @prop {Map}
|
|
1374
|
-
/// @prop {Map}
|
|
1375
|
-
/// @prop {Map}
|
|
1376
|
-
/// @prop {Map}
|
|
1549
|
+
/// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
|
|
1550
|
+
/// @prop {Color} year-current-background [transparent] - The background color of the current year in years view.
|
|
1551
|
+
/// @prop {Map} year-hover-background [color: ('gray', 200)] - The :hover background color of the year in years view.
|
|
1552
|
+
/// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
|
|
1553
|
+
/// @prop {Map} year-current-hover-background [color: ('gray', 200)] - The :hover background color of the current year in years view.
|
|
1554
|
+
/// @prop {Map} year-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year.
|
|
1555
|
+
/// @prop {Map} year-selected-background [color: ('primary', 500)] - The background color of the selected year.
|
|
1556
|
+
/// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected year on :hover.
|
|
1557
|
+
/// @prop {Map} year-selected-hover-background [color: ('primary', 600)] - The background color of the selected year on :hover.
|
|
1558
|
+
/// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current/selected year.
|
|
1559
|
+
/// @prop {Map} year-selected-current-background [color: ('primary', 500)] - The foreground color of the current/selected year.
|
|
1560
|
+
/// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected year.
|
|
1561
|
+
/// @prop {Map} year-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected year.
|
|
1562
|
+
/// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month in months view.
|
|
1563
|
+
/// @prop {Map} month-hover-background [color: ('gray', 200)] - The :hover background color of the month in months view.
|
|
1564
|
+
/// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current selected month.
|
|
1565
|
+
/// @prop {Color} month-current-background [transparent] - The background color of the current selected month.
|
|
1566
|
+
/// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in months view.
|
|
1567
|
+
/// @prop {Map} month-current-hover-background [color: ('gray', 200)] - The :hover background color of the current month in months view.
|
|
1568
|
+
/// @prop {Map} month-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected month in month view.
|
|
1569
|
+
/// @prop {Map} month-selected-background [color: ('primary', 500)] - The background color of the selected month in month view.
|
|
1570
|
+
/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month in month view.
|
|
1571
|
+
/// @prop {Map} month-selected-hover-background [color: ('primary', 600)] - The :hover background color of the selected month in month view.
|
|
1572
|
+
/// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 900)] - The foreground color of the current/selected month in month view.
|
|
1573
|
+
/// @prop {Map} month-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month in month view.
|
|
1574
|
+
/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
|
|
1575
|
+
/// @prop {Map} month-selected-current-hover-background [color: ('primary', 600] - The :hover background color of the current/selected month in month view.
|
|
1377
1576
|
/// @prop {Map} date-hover-background [color: ('gray', 200)] - The :hover background color of a date.
|
|
1378
1577
|
/// @prop {Map} date-focus-background [color: ('gray', 200)] - The :focus background color of a date.
|
|
1379
1578
|
/// @prop {Map} date-selected-foreground [contrast-color: ('primary', 900)] - The foreground color of the selected date.
|
|
@@ -1398,19 +1597,19 @@ $fluent-calendar: extend(
|
|
|
1398
1597
|
/// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
|
|
1399
1598
|
/// @prop {Map} date-current-hover-background [color: ('gray', 200)] - The :hover background color of the current date.
|
|
1400
1599
|
/// @prop {Map} date-current-focus-background [color: ('gray', 200)] - The :focus background color of the current date.
|
|
1401
|
-
/// @prop {Map}
|
|
1402
|
-
/// @prop {Map} current-hover-outline-color [color: ('gray', 900)] - The :hover outline color of the current month/
|
|
1403
|
-
/// @prop {Map} current-focus-outline-color [color: ('gray', 900)] - The :focus outline color of the current month/
|
|
1404
|
-
/// @prop {Map}
|
|
1405
|
-
/// @prop {Map}
|
|
1406
|
-
/// @prop {Map}
|
|
1600
|
+
/// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
|
|
1601
|
+
/// @prop {Map} current-hover-outline-color [color: ('gray', 900)] - The :hover outline color of the current year/month in year/month views.
|
|
1602
|
+
/// @prop {Map} current-focus-outline-color [color: ('gray', 900)] - The :focus outline color of the current year/month in year/month views.
|
|
1603
|
+
/// @prop {Map} selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current year/month in year/month views.
|
|
1604
|
+
/// @prop {Map} selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current year/month in year/month views.
|
|
1605
|
+
/// @prop {Map} selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current year/month in year/month views.
|
|
1407
1606
|
/// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
|
|
1408
1607
|
/// @prop {Map} weekday-color [color: ('info', 300)] - The foreground color for weekday labels.
|
|
1409
1608
|
/// @prop {Color} week-number-background [transparent] - The background color of the week number column.
|
|
1410
1609
|
/// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline.
|
|
1411
1610
|
/// @prop {List} date-range-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the date outline in range selection.
|
|
1412
1611
|
/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the calendar.
|
|
1413
|
-
/// @prop {List}
|
|
1612
|
+
/// @prop {List} month-year-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the month/year in month/year view.
|
|
1414
1613
|
/// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
|
|
1415
1614
|
/// @prop {Color} date-range-preview-border-color [transparent] - The border color of the range selection in preview state(visible before selecting the end of the range).
|
|
1416
1615
|
/// @prop {Map} date-current-border-color [color: ('gray', 900)] - The border color of the current date.
|
|
@@ -1515,85 +1714,158 @@ $bootstrap-calendar: extend(
|
|
|
1515
1714
|
100,
|
|
1516
1715
|
),
|
|
1517
1716
|
),
|
|
1518
|
-
|
|
1717
|
+
year-hover-background: (
|
|
1718
|
+
color: (
|
|
1719
|
+
'gray',
|
|
1720
|
+
200,
|
|
1721
|
+
),
|
|
1722
|
+
),
|
|
1723
|
+
year-current-foreground: (
|
|
1724
|
+
color: (
|
|
1725
|
+
'gray',
|
|
1726
|
+
900,
|
|
1727
|
+
),
|
|
1728
|
+
),
|
|
1729
|
+
year-current-background: transparent,
|
|
1730
|
+
year-current-hover-foreground: (
|
|
1731
|
+
color: (
|
|
1732
|
+
'gray',
|
|
1733
|
+
900,
|
|
1734
|
+
),
|
|
1735
|
+
),
|
|
1736
|
+
year-current-hover-background: (
|
|
1737
|
+
color: (
|
|
1738
|
+
'gray',
|
|
1739
|
+
200,
|
|
1740
|
+
),
|
|
1741
|
+
),
|
|
1742
|
+
year-selected-foreground: (
|
|
1519
1743
|
contrast-color: (
|
|
1520
1744
|
'primary',
|
|
1521
1745
|
900,
|
|
1522
1746
|
),
|
|
1523
1747
|
),
|
|
1524
|
-
|
|
1748
|
+
year-selected-background: (
|
|
1749
|
+
color: (
|
|
1750
|
+
'primary',
|
|
1751
|
+
500,
|
|
1752
|
+
),
|
|
1753
|
+
),
|
|
1754
|
+
year-selected-hover-foreground: (
|
|
1755
|
+
contrast-color: (
|
|
1756
|
+
'primary',
|
|
1757
|
+
900,
|
|
1758
|
+
),
|
|
1759
|
+
),
|
|
1760
|
+
year-selected-hover-background: (
|
|
1761
|
+
color: (
|
|
1762
|
+
'primary',
|
|
1763
|
+
600,
|
|
1764
|
+
),
|
|
1765
|
+
),
|
|
1766
|
+
year-selected-current-foreground: (
|
|
1767
|
+
contrast-color: (
|
|
1768
|
+
'primary',
|
|
1769
|
+
900,
|
|
1770
|
+
),
|
|
1771
|
+
),
|
|
1772
|
+
year-selected-current-background: (
|
|
1773
|
+
color: (
|
|
1774
|
+
'primary',
|
|
1775
|
+
500,
|
|
1776
|
+
),
|
|
1777
|
+
),
|
|
1778
|
+
year-selected-current-hover-foreground: (
|
|
1779
|
+
contrast-color: (
|
|
1780
|
+
'primary',
|
|
1781
|
+
900,
|
|
1782
|
+
),
|
|
1783
|
+
),
|
|
1784
|
+
year-selected-current-hover-background: (
|
|
1525
1785
|
color: (
|
|
1526
1786
|
'primary',
|
|
1527
1787
|
600,
|
|
1528
1788
|
),
|
|
1529
1789
|
),
|
|
1530
|
-
|
|
1790
|
+
month-hover-foreground: (
|
|
1531
1791
|
color: (
|
|
1532
1792
|
'gray',
|
|
1533
1793
|
900,
|
|
1534
1794
|
),
|
|
1535
1795
|
),
|
|
1536
|
-
|
|
1796
|
+
month-hover-background: (
|
|
1537
1797
|
color: (
|
|
1538
1798
|
'gray',
|
|
1539
1799
|
200,
|
|
1540
1800
|
),
|
|
1541
1801
|
),
|
|
1542
|
-
|
|
1802
|
+
month-current-foreground: (
|
|
1543
1803
|
color: (
|
|
1544
1804
|
'gray',
|
|
1545
1805
|
900,
|
|
1546
1806
|
),
|
|
1547
1807
|
),
|
|
1548
|
-
|
|
1549
|
-
|
|
1808
|
+
month-current-background: transparent,
|
|
1809
|
+
month-current-hover-foreground: (
|
|
1550
1810
|
color: (
|
|
1551
1811
|
'gray',
|
|
1552
1812
|
900,
|
|
1553
1813
|
),
|
|
1554
1814
|
),
|
|
1555
|
-
|
|
1815
|
+
month-current-hover-background: (
|
|
1556
1816
|
color: (
|
|
1557
1817
|
'gray',
|
|
1558
1818
|
200,
|
|
1559
1819
|
),
|
|
1560
1820
|
),
|
|
1561
|
-
|
|
1821
|
+
month-selected-foreground: (
|
|
1562
1822
|
contrast-color: (
|
|
1563
1823
|
'primary',
|
|
1564
1824
|
900,
|
|
1565
1825
|
),
|
|
1566
1826
|
),
|
|
1567
|
-
|
|
1827
|
+
month-selected-background: (
|
|
1568
1828
|
color: (
|
|
1569
1829
|
'primary',
|
|
1570
1830
|
500,
|
|
1571
1831
|
),
|
|
1572
1832
|
),
|
|
1573
|
-
|
|
1833
|
+
month-selected-hover-foreground: (
|
|
1574
1834
|
contrast-color: (
|
|
1575
1835
|
'primary',
|
|
1576
1836
|
900,
|
|
1577
1837
|
),
|
|
1578
1838
|
),
|
|
1579
|
-
|
|
1839
|
+
month-selected-hover-background: (
|
|
1580
1840
|
color: (
|
|
1581
1841
|
'primary',
|
|
1582
1842
|
600,
|
|
1583
1843
|
),
|
|
1584
1844
|
),
|
|
1585
|
-
|
|
1845
|
+
month-selected-current-foreground: (
|
|
1586
1846
|
contrast-color: (
|
|
1587
1847
|
'primary',
|
|
1588
1848
|
900,
|
|
1589
1849
|
),
|
|
1590
1850
|
),
|
|
1591
|
-
|
|
1851
|
+
month-selected-current-background: (
|
|
1592
1852
|
color: (
|
|
1593
1853
|
'primary',
|
|
1594
1854
|
500,
|
|
1595
1855
|
),
|
|
1596
1856
|
),
|
|
1857
|
+
month-selected-current-hover-foreground: (
|
|
1858
|
+
contrast-color: (
|
|
1859
|
+
'primary',
|
|
1860
|
+
900,
|
|
1861
|
+
),
|
|
1862
|
+
),
|
|
1863
|
+
month-selected-current-hover-background: (
|
|
1864
|
+
color: (
|
|
1865
|
+
'primary',
|
|
1866
|
+
600,
|
|
1867
|
+
),
|
|
1868
|
+
),
|
|
1597
1869
|
date-hover-background: (
|
|
1598
1870
|
color: (
|
|
1599
1871
|
'gray',
|
|
@@ -1770,25 +2042,25 @@ $bootstrap-calendar: extend(
|
|
|
1770
2042
|
900,
|
|
1771
2043
|
),
|
|
1772
2044
|
),
|
|
1773
|
-
|
|
2045
|
+
current-outline-color: (
|
|
1774
2046
|
color: (
|
|
1775
2047
|
'gray',
|
|
1776
2048
|
900,
|
|
1777
2049
|
),
|
|
1778
2050
|
),
|
|
1779
|
-
|
|
2051
|
+
selected-current-outline-color: (
|
|
1780
2052
|
color: (
|
|
1781
2053
|
'gray',
|
|
1782
2054
|
900,
|
|
1783
2055
|
),
|
|
1784
2056
|
),
|
|
1785
|
-
|
|
2057
|
+
selected-current-outline-hover-color: (
|
|
1786
2058
|
color: (
|
|
1787
2059
|
'gray',
|
|
1788
2060
|
900,
|
|
1789
2061
|
),
|
|
1790
2062
|
),
|
|
1791
|
-
|
|
2063
|
+
selected-current-outline-focus-color: (
|
|
1792
2064
|
color: (
|
|
1793
2065
|
'gray',
|
|
1794
2066
|
900,
|
|
@@ -1801,7 +2073,7 @@ $bootstrap-calendar: extend(
|
|
|
1801
2073
|
),
|
|
1802
2074
|
),
|
|
1803
2075
|
week-number-background: transparent,
|
|
1804
|
-
|
|
2076
|
+
month-year-border-radius: (
|
|
1805
2077
|
border-radius: (
|
|
1806
2078
|
rem(4px),
|
|
1807
2079
|
rem(0),
|
|
@@ -1911,28 +2183,39 @@ $bootstrap-calendar: extend(
|
|
|
1911
2183
|
/// @prop {Map} border-color [color: ('gray', 400)] - The calendar border color.
|
|
1912
2184
|
/// @prop {Color} date-special-border-color [transparent] - The outline color around a special date.
|
|
1913
2185
|
/// @prop {Color} date-special-hover-border-color [transparent] - The outline color around a special date.
|
|
1914
|
-
/// @prop {Map}
|
|
1915
|
-
/// @prop {Map}
|
|
1916
|
-
/// @prop {
|
|
1917
|
-
/// @prop {Map}
|
|
1918
|
-
/// @prop {Map}
|
|
1919
|
-
/// @prop {
|
|
1920
|
-
/// @prop {Map}
|
|
1921
|
-
/// @prop {Map}
|
|
1922
|
-
/// @prop {Map}
|
|
1923
|
-
/// @prop {Map}
|
|
1924
|
-
/// @prop {Map}
|
|
1925
|
-
/// @prop {Map}
|
|
1926
|
-
/// @prop {Map}
|
|
1927
|
-
/// @prop {Map}
|
|
1928
|
-
/// @prop {Map}
|
|
1929
|
-
/// @prop {Map}
|
|
1930
|
-
/// @prop {
|
|
1931
|
-
/// @prop {Map}
|
|
1932
|
-
/// @prop {Map}
|
|
1933
|
-
/// @prop {Map}
|
|
1934
|
-
/// @prop {Map}
|
|
1935
|
-
/// @prop {Map}
|
|
2186
|
+
/// @prop {Map} year-hover-background [color: ('gray', 900, .05)] - The :hover background color of the year in years view.
|
|
2187
|
+
/// @prop {Map} year-current-foreground [color: ('gray', 900)] - The foreground color of the current year.
|
|
2188
|
+
/// @prop {Color} year-current-background [transparent] - The background color of the current year in years view.
|
|
2189
|
+
/// @prop {Map} year-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current year in years view.
|
|
2190
|
+
/// @prop {Map} year-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current year in years view.
|
|
2191
|
+
/// @prop {Map} year-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected year.
|
|
2192
|
+
/// @prop {Map} year-selected-background [color: ('primary', 500)] - The background color of the selected year in years view.
|
|
2193
|
+
/// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected year in years view.
|
|
2194
|
+
/// @prop {Map} year-selected-hover-background [color: ('primary', 400)] - The :hover background color of the selected year in years view.
|
|
2195
|
+
/// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the current/selected year.
|
|
2196
|
+
/// @prop {Map} year-selected-current-background [color: ('primary', 500)] - The foreground color of the current/selected year.
|
|
2197
|
+
/// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected year.
|
|
2198
|
+
/// @prop {Map} year-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected year.
|
|
2199
|
+
/// @prop {Map} month-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the month inside the months view.
|
|
2200
|
+
/// @prop {Map} month-hover-background [color: ('gray', 900, .05)] - The :hover background color of the month inside the months view.
|
|
2201
|
+
/// @prop {Map} month-current-foreground [color: ('gray', 900)] - The foreground color of the current month in month view.
|
|
2202
|
+
/// @prop {Color} month-current-background [transparent] - The background color of the current month in month view.
|
|
2203
|
+
/// @prop {Map} month-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month in month view.
|
|
2204
|
+
/// @prop {Map} month-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current month in month view.
|
|
2205
|
+
/// @prop {Map} month-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected month in month view.
|
|
2206
|
+
/// @prop {Map} month-selected-background [color: ('primary', 500)] - The background color of the selected month in month view.
|
|
2207
|
+
/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month in month view.
|
|
2208
|
+
/// @prop {Map} month-selected-hover-background [color: ('primary', 400)] - The :hover background color of the selected month in month view.
|
|
2209
|
+
/// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 500)] - The foreground color of the current/selected month in month view.
|
|
2210
|
+
/// @prop {Map} month-selected-current-background [color: ('primary', 500)] - The background color of the current/selected month in month view.
|
|
2211
|
+
/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month in month view.
|
|
2212
|
+
/// @prop {Map} month-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected month in month view.
|
|
2213
|
+
/// @prop {Map} current-outline-color [color: ('primary', 500)] - The outline color of the current year/month in year/month views.
|
|
2214
|
+
/// @prop {Map} current-outline-hover-color [color: ('primary', 400)] - The :hover outline color of the current year/month in year/month views.
|
|
2215
|
+
/// @prop {Map} current-outline-focus-color [color: ('primary', 400)] - The :focus outline color of the current year/month in year/month views.
|
|
2216
|
+
/// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 900, .6)] - The outline color of the selected current year/month in year/month views.
|
|
2217
|
+
/// @prop {Map} selected-current-outline-hover-color [contrast-color: ('gray', 900, .6)] - The :hover outline color of the selected current year/month in year/month views.
|
|
2218
|
+
/// @prop {Map} selected-current-outline-focus-color [contrast-color: ('gray', 900, .6)] - The :focus outline color of the selected current year/month in year/month views.
|
|
1936
2219
|
/// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
|
|
1937
2220
|
/// @prop {List} border-radius [(rem(6px), rem(0), rem(6px))] - The border radius used for calendar.
|
|
1938
2221
|
/// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the week numbers column.
|
|
@@ -2325,120 +2608,195 @@ $indigo-calendar: extend(
|
|
|
2325
2608
|
400,
|
|
2326
2609
|
),
|
|
2327
2610
|
),
|
|
2328
|
-
|
|
2611
|
+
year-hover-background: (
|
|
2612
|
+
color: (
|
|
2613
|
+
'gray',
|
|
2614
|
+
900,
|
|
2615
|
+
0.05,
|
|
2616
|
+
),
|
|
2617
|
+
),
|
|
2618
|
+
year-current-foreground: (
|
|
2619
|
+
color: (
|
|
2620
|
+
'gray',
|
|
2621
|
+
900,
|
|
2622
|
+
),
|
|
2623
|
+
),
|
|
2624
|
+
year-current-background: transparent,
|
|
2625
|
+
year-current-hover-foreground: (
|
|
2626
|
+
color: (
|
|
2627
|
+
'gray',
|
|
2628
|
+
900,
|
|
2629
|
+
),
|
|
2630
|
+
),
|
|
2631
|
+
year-current-hover-background: (
|
|
2632
|
+
color: (
|
|
2633
|
+
'gray',
|
|
2634
|
+
900,
|
|
2635
|
+
0.05,
|
|
2636
|
+
),
|
|
2637
|
+
),
|
|
2638
|
+
year-selected-foreground: (
|
|
2639
|
+
contrast-color: (
|
|
2640
|
+
'primary',
|
|
2641
|
+
500,
|
|
2642
|
+
),
|
|
2643
|
+
),
|
|
2644
|
+
year-selected-background: (
|
|
2645
|
+
color: (
|
|
2646
|
+
'primary',
|
|
2647
|
+
500,
|
|
2648
|
+
),
|
|
2649
|
+
),
|
|
2650
|
+
year-selected-hover-foreground: (
|
|
2651
|
+
contrast-color: (
|
|
2652
|
+
'primary',
|
|
2653
|
+
900,
|
|
2654
|
+
),
|
|
2655
|
+
),
|
|
2656
|
+
year-selected-hover-background: (
|
|
2657
|
+
color: (
|
|
2658
|
+
'primary',
|
|
2659
|
+
400,
|
|
2660
|
+
),
|
|
2661
|
+
),
|
|
2662
|
+
year-selected-current-foreground: (
|
|
2663
|
+
contrast-color: (
|
|
2664
|
+
'primary',
|
|
2665
|
+
500,
|
|
2666
|
+
),
|
|
2667
|
+
),
|
|
2668
|
+
year-selected-current-background: (
|
|
2669
|
+
color: (
|
|
2670
|
+
'primary',
|
|
2671
|
+
500,
|
|
2672
|
+
),
|
|
2673
|
+
),
|
|
2674
|
+
year-selected-current-hover-foreground: (
|
|
2329
2675
|
contrast-color: (
|
|
2330
2676
|
'primary',
|
|
2331
2677
|
900,
|
|
2332
2678
|
),
|
|
2333
2679
|
),
|
|
2334
|
-
|
|
2680
|
+
year-selected-current-hover-background: (
|
|
2335
2681
|
color: (
|
|
2336
2682
|
'primary',
|
|
2337
2683
|
400,
|
|
2338
2684
|
),
|
|
2339
2685
|
),
|
|
2340
|
-
|
|
2686
|
+
month-hover-foreground: (
|
|
2341
2687
|
color: (
|
|
2342
2688
|
'gray',
|
|
2343
2689
|
900,
|
|
2344
2690
|
),
|
|
2345
2691
|
),
|
|
2346
|
-
|
|
2692
|
+
month-hover-background: (
|
|
2347
2693
|
color: (
|
|
2348
2694
|
'gray',
|
|
2349
2695
|
900,
|
|
2350
2696
|
0.05,
|
|
2351
2697
|
),
|
|
2352
2698
|
),
|
|
2353
|
-
|
|
2699
|
+
month-current-foreground: (
|
|
2354
2700
|
color: (
|
|
2355
2701
|
'gray',
|
|
2356
2702
|
900,
|
|
2357
2703
|
),
|
|
2358
2704
|
),
|
|
2359
|
-
|
|
2360
|
-
|
|
2705
|
+
month-current-background: transparent,
|
|
2706
|
+
month-current-hover-foreground: (
|
|
2361
2707
|
color: (
|
|
2362
2708
|
'gray',
|
|
2363
2709
|
900,
|
|
2364
2710
|
),
|
|
2365
2711
|
),
|
|
2366
|
-
|
|
2712
|
+
month-current-hover-background: (
|
|
2367
2713
|
color: (
|
|
2368
2714
|
'gray',
|
|
2369
2715
|
900,
|
|
2370
2716
|
0.05,
|
|
2371
2717
|
),
|
|
2372
2718
|
),
|
|
2373
|
-
|
|
2719
|
+
month-selected-foreground: (
|
|
2374
2720
|
contrast-color: (
|
|
2375
2721
|
'primary',
|
|
2376
2722
|
500,
|
|
2377
2723
|
),
|
|
2378
2724
|
),
|
|
2379
|
-
|
|
2725
|
+
month-selected-background: (
|
|
2380
2726
|
color: (
|
|
2381
2727
|
'primary',
|
|
2382
2728
|
500,
|
|
2383
2729
|
),
|
|
2384
2730
|
),
|
|
2385
|
-
|
|
2731
|
+
month-selected-hover-foreground: (
|
|
2386
2732
|
contrast-color: (
|
|
2387
2733
|
'primary',
|
|
2388
2734
|
900,
|
|
2389
2735
|
),
|
|
2390
2736
|
),
|
|
2391
|
-
|
|
2737
|
+
month-selected-hover-background: (
|
|
2392
2738
|
color: (
|
|
2393
2739
|
'primary',
|
|
2394
2740
|
400,
|
|
2395
2741
|
),
|
|
2396
2742
|
),
|
|
2397
|
-
|
|
2743
|
+
month-selected-current-foreground: (
|
|
2398
2744
|
contrast-color: (
|
|
2399
2745
|
'primary',
|
|
2400
2746
|
500,
|
|
2401
2747
|
),
|
|
2402
2748
|
),
|
|
2403
|
-
|
|
2749
|
+
month-selected-current-background: (
|
|
2404
2750
|
color: (
|
|
2405
2751
|
'primary',
|
|
2406
2752
|
500,
|
|
2407
2753
|
),
|
|
2408
2754
|
),
|
|
2409
|
-
|
|
2755
|
+
month-selected-current-hover-foreground: (
|
|
2756
|
+
contrast-color: (
|
|
2757
|
+
'primary',
|
|
2758
|
+
900,
|
|
2759
|
+
),
|
|
2760
|
+
),
|
|
2761
|
+
month-selected-current-hover-background: (
|
|
2762
|
+
color: (
|
|
2763
|
+
'primary',
|
|
2764
|
+
400,
|
|
2765
|
+
),
|
|
2766
|
+
),
|
|
2767
|
+
current-outline-color: (
|
|
2410
2768
|
color: (
|
|
2411
2769
|
'primary',
|
|
2412
2770
|
500,
|
|
2413
2771
|
),
|
|
2414
2772
|
),
|
|
2415
|
-
|
|
2773
|
+
current-outline-hover-color: (
|
|
2416
2774
|
color: (
|
|
2417
2775
|
'primary',
|
|
2418
2776
|
400,
|
|
2419
2777
|
),
|
|
2420
2778
|
),
|
|
2421
|
-
|
|
2779
|
+
current-outline-focus-color: (
|
|
2422
2780
|
color: (
|
|
2423
2781
|
'primary',
|
|
2424
2782
|
400,
|
|
2425
2783
|
),
|
|
2426
2784
|
),
|
|
2427
|
-
|
|
2785
|
+
selected-current-outline-color: (
|
|
2428
2786
|
contrast-color: (
|
|
2429
2787
|
'gray',
|
|
2430
2788
|
900,
|
|
2431
2789
|
0.6,
|
|
2432
2790
|
),
|
|
2433
2791
|
),
|
|
2434
|
-
|
|
2792
|
+
selected-current-outline-hover-color: (
|
|
2435
2793
|
contrast-color: (
|
|
2436
2794
|
'gray',
|
|
2437
2795
|
900,
|
|
2438
2796
|
0.6,
|
|
2439
2797
|
),
|
|
2440
2798
|
),
|
|
2441
|
-
|
|
2799
|
+
selected-current-outline-focus-color: (
|
|
2442
2800
|
contrast-color: (
|
|
2443
2801
|
'gray',
|
|
2444
2802
|
900,
|