@syncfusion/ej2-calendars 24.1.44 → 24.2.3

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 (64) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/ej2-calendars.min.js +2 -2
  3. package/dist/ej2-calendars.umd.min.js +2 -2
  4. package/dist/ej2-calendars.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-calendars.es2015.js +2 -2
  6. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  7. package/dist/es6/ej2-calendars.es5.js +2 -2
  8. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  9. package/dist/global/ej2-calendars.min.js +2 -2
  10. package/dist/global/ej2-calendars.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/datepicker/datepicker.js +1 -1
  14. package/src/daterangepicker/daterangepicker.js +1 -1
  15. package/styles/bootstrap-dark.css +26 -1
  16. package/styles/bootstrap.css +26 -1
  17. package/styles/bootstrap4.css +26 -1
  18. package/styles/bootstrap5-dark.css +26 -1
  19. package/styles/bootstrap5.css +26 -1
  20. package/styles/calendar/_bootstrap-dark-definition.scss +10 -0
  21. package/styles/calendar/_bootstrap-definition.scss +10 -0
  22. package/styles/calendar/_bootstrap4-definition.scss +10 -0
  23. package/styles/calendar/_bootstrap5-definition.scss +9 -1
  24. package/styles/calendar/_fabric-dark-definition.scss +10 -0
  25. package/styles/calendar/_fabric-definition.scss +11 -1
  26. package/styles/calendar/_fluent-definition.scss +11 -1
  27. package/styles/calendar/_fusionnew-definition.scss +10 -0
  28. package/styles/calendar/_highcontrast-definition.scss +11 -1
  29. package/styles/calendar/_highcontrast-light-definition.scss +10 -0
  30. package/styles/calendar/_layout.scss +3 -0
  31. package/styles/calendar/_material-dark-definition.scss +11 -1
  32. package/styles/calendar/_material-definition.scss +11 -1
  33. package/styles/calendar/_material3-definition.scss +12 -2
  34. package/styles/calendar/_tailwind-definition.scss +10 -1
  35. package/styles/calendar/_theme.scss +24 -3
  36. package/styles/calendar/bootstrap-dark.css +25 -1
  37. package/styles/calendar/bootstrap.css +25 -1
  38. package/styles/calendar/bootstrap4.css +25 -1
  39. package/styles/calendar/bootstrap5-dark.css +26 -1
  40. package/styles/calendar/bootstrap5.css +26 -1
  41. package/styles/calendar/fabric-dark.css +25 -1
  42. package/styles/calendar/fabric.css +27 -3
  43. package/styles/calendar/fluent-dark.css +35 -10
  44. package/styles/calendar/fluent.css +35 -10
  45. package/styles/calendar/highcontrast-light.css +25 -1
  46. package/styles/calendar/highcontrast.css +27 -3
  47. package/styles/calendar/material-dark.css +33 -9
  48. package/styles/calendar/material.css +33 -9
  49. package/styles/calendar/material3-dark.css +36 -12
  50. package/styles/calendar/material3.css +36 -12
  51. package/styles/calendar/tailwind-dark.css +25 -1
  52. package/styles/calendar/tailwind.css +25 -1
  53. package/styles/fabric-dark.css +26 -1
  54. package/styles/fabric.css +28 -3
  55. package/styles/fluent-dark.css +35 -10
  56. package/styles/fluent.css +35 -10
  57. package/styles/highcontrast-light.css +26 -1
  58. package/styles/highcontrast.css +28 -3
  59. package/styles/material-dark.css +34 -9
  60. package/styles/material.css +34 -9
  61. package/styles/material3-dark.css +37 -12
  62. package/styles/material3.css +37 -12
  63. package/styles/tailwind-dark.css +26 -1
  64. package/styles/tailwind.css +26 -1
@@ -312,7 +312,7 @@ ejs-calendar {
312
312
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
313
313
  .e-bigger.e-small .e-calendar .e-header .e-prev,
314
314
  .e-bigger.e-small .e-calendar .e-header .e-next {
315
- border-radius: 32px;
315
+ border-radius: 4px;
316
316
  display: inline-block;
317
317
  font-size: 16px;
318
318
  vertical-align: middle;
@@ -325,6 +325,9 @@ ejs-calendar {
325
325
  font-size: 14px;
326
326
  font-weight: 600;
327
327
  text-align: left;
328
+ padding: 0 5px;
329
+ border: none;
330
+ border-radius: 4px;
328
331
  }
329
332
  .e-calendar .e-header .e-title,
330
333
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -713,10 +716,22 @@ ejs-calendar {
713
716
  }
714
717
  .e-calendar .e-header .e-title:hover,
715
718
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
716
- color: rgba(var(--color-sf-on-surface));
719
+ background: rgba(var(--color-sf-on-surface), 0.08);
717
720
  cursor: pointer;
718
721
  text-decoration: none;
719
722
  }
723
+ .e-calendar .e-header .e-title:focus,
724
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
725
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
726
+ background: none;
727
+ text-decoration: none;
728
+ }
729
+ .e-calendar .e-header .e-title:active,
730
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
731
+ box-shadow: none;
732
+ background: rgba(var(--color-sf-on-surface), 0.12);
733
+ text-decoration: none;
734
+ }
720
735
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
721
736
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
722
737
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -729,6 +744,11 @@ ejs-calendar {
729
744
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
730
745
  background: rgba(var(--color-sf-on-surface), 0.08);
731
746
  }
747
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
748
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
749
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
750
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
751
+ }
732
752
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
733
753
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
734
754
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -761,7 +781,7 @@ ejs-calendar {
761
781
  .e-calendar .e-content.e-decade tr:first-child .e-cell:first-child span.e-day, .e-calendar .e-content.e-decade tr:last-child .e-cell:last-child span.e-day,
762
782
  .e-bigger.e-small .e-calendar .e-content.e-decade tr:first-child .e-cell:first-child span.e-day,
763
783
  .e-bigger.e-small .e-calendar .e-content.e-decade tr:last-child .e-cell:last-child span.e-day {
764
- color: rgba(var(--color-sf-on-surface-variant), 0.6);
784
+ color: rgba(var(--color-sf-on-surface-variant), 0.84);
765
785
  }
766
786
  .e-calendar .e-content.e-decade tr:first-child .e-cell:first-child.e-selected span.e-day, .e-calendar .e-content.e-decade tr:last-child .e-cell:last-child.e-selected span.e-day,
767
787
  .e-bigger.e-small .e-calendar .e-content.e-decade tr:first-child .e-cell:first-child.e-selected span.e-day,
@@ -798,14 +818,14 @@ ejs-calendar {
798
818
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
799
819
  background: rgba(var(--color-sf-on-surface), 0.05);
800
820
  border: none;
801
- border-radius: 32px;
821
+ border-radius: 4px;
802
822
  box-shadow: none;
803
823
  }
804
824
  .e-calendar .e-content td.e-focused-date:hover span.e-day,
805
825
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
806
826
  background: rgba(var(--color-sf-on-surface), 0.05);
807
827
  border: none;
808
- border-radius: 32px;
828
+ border-radius: 4px;
809
829
  color: rgba(var(--color-sf-on-surface));
810
830
  }
811
831
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -813,7 +833,7 @@ ejs-calendar {
813
833
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
814
834
  background: none;
815
835
  border: 1px solid rgba(var(--color-sf-primary));
816
- border-radius: 32px;
836
+ border-radius: 4px;
817
837
  box-shadow: none;
818
838
  color: rgba(var(--color-sf-primary));
819
839
  }
@@ -829,7 +849,7 @@ ejs-calendar {
829
849
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
830
850
  background: rgba(var(--color-sf-primary));
831
851
  border: none;
832
- border-radius: 32px;
852
+ border-radius: 4px;
833
853
  color: rgba(var(--color-sf-primary));
834
854
  }
835
855
  .e-calendar .e-content td.e-today:hover span.e-day, .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day, .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day,
@@ -871,12 +891,12 @@ ejs-calendar {
871
891
  .e-calendar .e-content .e-other-month span.e-day, .e-calendar .e-content .e-other-month.e-today span.e-day,
872
892
  .e-bigger.e-small .e-calendar .e-content .e-other-month span.e-day,
873
893
  .e-bigger.e-small .e-calendar .e-content .e-other-month.e-today span.e-day {
874
- color: rgba(var(--color-sf-on-surface-variant), 0.6);
894
+ color: rgba(var(--color-sf-on-surface-variant), 0.84);
875
895
  }
876
896
  .e-calendar .e-content .e-other-month.e-today:hover span.e-day,
877
897
  .e-bigger.e-small .e-calendar .e-content .e-other-month.e-today:hover span.e-day {
878
898
  background: rgba(var(--color-sf-on-surface), 0.05);
879
- color: rgba(var(--color-sf-on-surface-variant), 0.6);
899
+ color: rgba(var(--color-sf-on-surface-variant), 0.84);
880
900
  }
881
901
  .e-calendar .e-content thead,
882
902
  .e-bigger.e-small .e-calendar .e-content thead {
@@ -888,7 +908,7 @@ ejs-calendar {
888
908
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
889
909
  background: rgba(var(--color-sf-on-surface), 0.05);
890
910
  border: none;
891
- border-radius: 32px;
911
+ border-radius: 4px;
892
912
  color: rgba(var(--color-sf-on-surface));
893
913
  }
894
914
  .e-calendar .e-content td:focus span.e-day,
@@ -896,7 +916,7 @@ ejs-calendar {
896
916
  background: rgba(var(--color-sf-primary));
897
917
  color: rgba(var(--color-sf-on-primary));
898
918
  border: none;
899
- border-radius: 32px;
919
+ border-radius: 4px;
900
920
  }
901
921
  .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
902
922
  .e-bigger.e-small .e-calendar .e-content td.e-disabled span.e-day,
@@ -910,7 +930,7 @@ ejs-calendar {
910
930
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
911
931
  background: rgba(var(--color-sf-primary));
912
932
  border: none;
913
- border-radius: 32px;
933
+ border-radius: 4px;
914
934
  color: rgba(var(--color-sf-on-primary));
915
935
  }
916
936
  .e-calendar .e-content .e-footer,
@@ -947,4 +967,8 @@ ejs-calendar {
947
967
  to {
948
968
  transform: scale(1);
949
969
  }
970
+ }
971
+ .e-calendar .e-cell.e-focused-cell {
972
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
973
+ border-radius: 4px;
950
974
  }
@@ -205,6 +205,9 @@ ejs-calendar {
205
205
  font-size: 16px;
206
206
  font-weight: 500;
207
207
  text-align: left;
208
+ padding: 0 5px;
209
+ border: none;
210
+ border-radius: 4px;
208
211
  }
209
212
  .e-calendar .e-header .e-title,
210
213
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -667,10 +670,22 @@ ejs-calendar {
667
670
  }
668
671
  .e-calendar .e-header .e-title:hover,
669
672
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
670
- color: #fff;
673
+ background: none;
671
674
  cursor: pointer;
672
675
  text-decoration: none;
673
676
  }
677
+ .e-calendar .e-header .e-title:focus,
678
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
679
+ box-shadow: 0 0 0 1px #8b919e;
680
+ background: none;
681
+ text-decoration: none;
682
+ }
683
+ .e-calendar .e-header .e-title:active,
684
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
685
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
686
+ background: none;
687
+ text-decoration: none;
688
+ }
674
689
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
675
690
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
676
691
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -683,6 +698,11 @@ ejs-calendar {
683
698
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
684
699
  background: transparent;
685
700
  }
701
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
702
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
703
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
704
+ box-shadow: 0 0 0 1px #8b919e;
705
+ }
686
706
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
687
707
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
688
708
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -924,4 +944,8 @@ ejs-calendar {
924
944
  to {
925
945
  transform: scale(1);
926
946
  }
947
+ }
948
+ .e-calendar .e-cell.e-focused-cell {
949
+ box-shadow: 0 0 0 1px #8b919e;
950
+ border-radius: 4px;
927
951
  }
@@ -205,6 +205,9 @@ ejs-calendar {
205
205
  font-size: 16px;
206
206
  font-weight: 500;
207
207
  text-align: left;
208
+ padding: 0 5px;
209
+ border: none;
210
+ border-radius: 4px;
208
211
  }
209
212
  .e-calendar .e-header .e-title,
210
213
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -667,10 +670,22 @@ ejs-calendar {
667
670
  }
668
671
  .e-calendar .e-header .e-title:hover,
669
672
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
670
- color: #111827;
673
+ background: none;
671
674
  cursor: pointer;
672
675
  text-decoration: none;
673
676
  }
677
+ .e-calendar .e-header .e-title:focus,
678
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
679
+ box-shadow: 0 0 0 1px #9ca3af;
680
+ background: none;
681
+ text-decoration: none;
682
+ }
683
+ .e-calendar .e-header .e-title:active,
684
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
685
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
686
+ background: none;
687
+ text-decoration: none;
688
+ }
674
689
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
675
690
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
676
691
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -683,6 +698,11 @@ ejs-calendar {
683
698
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
684
699
  background: transparent;
685
700
  }
701
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
702
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
703
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
704
+ box-shadow: 0 0 0 1px #9ca3af;
705
+ }
686
706
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
687
707
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
688
708
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -924,4 +944,8 @@ ejs-calendar {
924
944
  to {
925
945
  transform: scale(1);
926
946
  }
947
+ }
948
+ .e-calendar .e-cell.e-focused-cell {
949
+ box-shadow: 0 0 0 1px #9ca3af;
950
+ border-radius: 4px;
927
951
  }
@@ -213,6 +213,9 @@ ejs-calendar {
213
213
  font-size: 17px;
214
214
  font-weight: 300;
215
215
  text-align: left;
216
+ padding: 0 5px;
217
+ border: none;
218
+ border-radius: 0;
216
219
  }
217
220
  .e-calendar .e-header .e-title,
218
221
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -597,10 +600,22 @@ ejs-calendar {
597
600
  }
598
601
  .e-calendar .e-header .e-title:hover,
599
602
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
600
- color: #fff;
603
+ background: none;
601
604
  cursor: pointer;
602
605
  text-decoration: none;
603
606
  }
607
+ .e-calendar .e-header .e-title:focus,
608
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
609
+ box-shadow: 0 0 0 1px #333232;
610
+ background: none;
611
+ text-decoration: none;
612
+ }
613
+ .e-calendar .e-header .e-title:active,
614
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
615
+ box-shadow: none;
616
+ background: none;
617
+ text-decoration: none;
618
+ }
604
619
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
605
620
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
606
621
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -613,6 +628,11 @@ ejs-calendar {
613
628
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
614
629
  background: none;
615
630
  }
631
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
632
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
633
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
634
+ box-shadow: 0 0 0 1px #333232;
635
+ }
616
636
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
617
637
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
618
638
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -828,6 +848,11 @@ ejs-calendar {
828
848
  transform: scale(1);
829
849
  }
830
850
  }
851
+ .e-calendar .e-cell.e-focused-cell {
852
+ box-shadow: 0 0 0 1px #333232;
853
+ border-radius: 0;
854
+ }
855
+
831
856
  /* stylelint-disable property-no-vendor-prefix */
832
857
  /*! component icons */
833
858
  .e-time-wrapper .e-time-icon.e-icons::before,
package/styles/fabric.css CHANGED
@@ -214,6 +214,9 @@ ejs-calendar {
214
214
  font-size: 17px;
215
215
  font-weight: 300;
216
216
  text-align: left;
217
+ padding: 0 5px;
218
+ border: none;
219
+ border-radius: 0;
217
220
  }
218
221
  .e-calendar .e-header .e-title,
219
222
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -272,7 +275,7 @@ ejs-calendar {
272
275
  }
273
276
  .e-calendar .e-header .e-title,
274
277
  .e-bigger.e-small .e-calendar .e-header .e-title {
275
- line-height: 36px;
278
+ line-height: 32px;
276
279
  }
277
280
  .e-calendar.e-rtl .e-header .e-title,
278
281
  .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
@@ -281,7 +284,7 @@ ejs-calendar {
281
284
  }
282
285
  .e-calendar .e-header,
283
286
  .e-bigger.e-small .e-calendar .e-header {
284
- height: 36px;
287
+ height: 32px;
285
288
  }
286
289
  .e-calendar .e-header.e-month,
287
290
  .e-bigger.e-small .e-calendar .e-header.e-month {
@@ -598,10 +601,22 @@ ejs-calendar {
598
601
  }
599
602
  .e-calendar .e-header .e-title:hover,
600
603
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
601
- color: #00457a;
604
+ background: none;
602
605
  cursor: pointer;
603
606
  text-decoration: none;
604
607
  }
608
+ .e-calendar .e-header .e-title:focus,
609
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
610
+ box-shadow: 0 0 0 1px #000;
611
+ background: none;
612
+ text-decoration: none;
613
+ }
614
+ .e-calendar .e-header .e-title:active,
615
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
616
+ box-shadow: none;
617
+ background: none;
618
+ text-decoration: none;
619
+ }
605
620
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
606
621
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
607
622
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -614,6 +629,11 @@ ejs-calendar {
614
629
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
615
630
  background: none;
616
631
  }
632
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
633
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
634
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
635
+ box-shadow: 0 0 0 1px #000;
636
+ }
617
637
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
618
638
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
619
639
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -833,6 +853,11 @@ ejs-calendar {
833
853
  transform: scale(1);
834
854
  }
835
855
  }
856
+ .e-calendar .e-cell.e-focused-cell {
857
+ box-shadow: 0 0 0 1px #000;
858
+ border-radius: 0;
859
+ }
860
+
836
861
  /* stylelint-disable property-no-vendor-prefix */
837
862
  /*! component icons */
838
863
  .e-time-wrapper .e-time-icon.e-icons::before,
@@ -195,7 +195,7 @@ ejs-calendar {
195
195
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
196
196
  .e-bigger.e-small .e-calendar .e-header .e-prev,
197
197
  .e-bigger.e-small .e-calendar .e-header .e-next {
198
- border-radius: 0;
198
+ border-radius: 2px;
199
199
  display: inline-block;
200
200
  font-size: 14px;
201
201
  vertical-align: middle;
@@ -208,6 +208,9 @@ ejs-calendar {
208
208
  font-size: 14px;
209
209
  font-weight: 600;
210
210
  text-align: left;
211
+ padding: 0 5px;
212
+ border: none;
213
+ border-radius: 2px;
211
214
  }
212
215
  .e-calendar .e-header .e-title,
213
216
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -621,10 +624,22 @@ ejs-calendar {
621
624
  }
622
625
  .e-calendar .e-header .e-title:hover,
623
626
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
624
- color: #f3f2f1;
627
+ background: #252423;
625
628
  cursor: pointer;
626
629
  text-decoration: none;
627
630
  }
631
+ .e-calendar .e-header .e-title:focus,
632
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
633
+ box-shadow: 0 0 0 1px #a19f9d;
634
+ background: none;
635
+ text-decoration: none;
636
+ }
637
+ .e-calendar .e-header .e-title:active,
638
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
639
+ box-shadow: none;
640
+ background: #252423;
641
+ text-decoration: none;
642
+ }
628
643
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
629
644
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
630
645
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -637,6 +652,11 @@ ejs-calendar {
637
652
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
638
653
  background: #252423;
639
654
  }
655
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
656
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
657
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
658
+ box-shadow: 0 0 0 1px #a19f9d;
659
+ }
640
660
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
641
661
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
642
662
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -706,7 +726,7 @@ ejs-calendar {
706
726
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
707
727
  background: #252423;
708
728
  border: none;
709
- border-radius: 0;
729
+ border-radius: 2px;
710
730
  box-shadow: none;
711
731
  background: none;
712
732
  border-radius: 4px;
@@ -716,7 +736,7 @@ ejs-calendar {
716
736
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
717
737
  background-color: #323130;
718
738
  border: none;
719
- border-radius: 0;
739
+ border-radius: 2px;
720
740
  color: #f3f2f1;
721
741
  }
722
742
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -724,7 +744,7 @@ ejs-calendar {
724
744
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
725
745
  background: #0078d4;
726
746
  border: none;
727
- border-radius: 0;
747
+ border-radius: 2px;
728
748
  box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
729
749
  color: #1b1a19;
730
750
  border-radius: 50%;
@@ -741,7 +761,7 @@ ejs-calendar {
741
761
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
742
762
  background-color: #3b3a39;
743
763
  border: none;
744
- border-radius: 0;
764
+ border-radius: 2px;
745
765
  color: #1b1a19;
746
766
  background-color: #0078d4;
747
767
  border-radius: 50%;
@@ -812,7 +832,7 @@ ejs-calendar {
812
832
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
813
833
  background-color: #323130;
814
834
  border: none;
815
- border-radius: 0;
835
+ border-radius: 2px;
816
836
  color: #f3f2f1;
817
837
  }
818
838
  .e-calendar .e-content td:focus span.e-day,
@@ -820,7 +840,7 @@ ejs-calendar {
820
840
  background-color: #3b3a39;
821
841
  color: #f3f2f1;
822
842
  border: none;
823
- border-radius: 0;
843
+ border-radius: 2px;
824
844
  border-radius: 50%;
825
845
  }
826
846
  .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
@@ -843,7 +863,7 @@ ejs-calendar {
843
863
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
844
864
  background-color: #3b3a39;
845
865
  border: none;
846
- border-radius: 0;
866
+ border-radius: 2px;
847
867
  color: #f3f2f1;
848
868
  }
849
869
  .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -878,7 +898,7 @@ ejs-calendar {
878
898
  .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
879
899
  background-color: #3b3a39;
880
900
  border: none;
881
- border-radius: 0;
901
+ border-radius: 2px;
882
902
  color: #f3f2f1;
883
903
  }
884
904
  .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -999,6 +1019,11 @@ ejs-calendar {
999
1019
  color: #484644;
1000
1020
  }
1001
1021
 
1022
+ .e-calendar .e-cell.e-focused-cell {
1023
+ box-shadow: 0 0 0 1px #a19f9d;
1024
+ border-radius: 2px;
1025
+ }
1026
+
1002
1027
  /* stylelint-disable property-no-vendor-prefix */
1003
1028
  /* stylelint-disable-line no-empty-source */
1004
1029
  /*! component icons */
package/styles/fluent.css CHANGED
@@ -195,7 +195,7 @@ ejs-calendar {
195
195
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
196
196
  .e-bigger.e-small .e-calendar .e-header .e-prev,
197
197
  .e-bigger.e-small .e-calendar .e-header .e-next {
198
- border-radius: 0;
198
+ border-radius: 2px;
199
199
  display: inline-block;
200
200
  font-size: 14px;
201
201
  vertical-align: middle;
@@ -208,6 +208,9 @@ ejs-calendar {
208
208
  font-size: 14px;
209
209
  font-weight: 600;
210
210
  text-align: left;
211
+ padding: 0 5px;
212
+ border: none;
213
+ border-radius: 2px;
211
214
  }
212
215
  .e-calendar .e-header .e-title,
213
216
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -621,10 +624,22 @@ ejs-calendar {
621
624
  }
622
625
  .e-calendar .e-header .e-title:hover,
623
626
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
624
- color: #201f1e;
627
+ background: #f3f2f1;
625
628
  cursor: pointer;
626
629
  text-decoration: none;
627
630
  }
631
+ .e-calendar .e-header .e-title:focus,
632
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
633
+ box-shadow: 0 0 0 1px #605e5c;
634
+ background: none;
635
+ text-decoration: none;
636
+ }
637
+ .e-calendar .e-header .e-title:active,
638
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
639
+ box-shadow: none;
640
+ background: #f3f2f1;
641
+ text-decoration: none;
642
+ }
628
643
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
629
644
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
630
645
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -637,6 +652,11 @@ ejs-calendar {
637
652
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
638
653
  background: #f3f2f1;
639
654
  }
655
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
656
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
657
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
658
+ box-shadow: 0 0 0 1px #605e5c;
659
+ }
640
660
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
641
661
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
642
662
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -706,7 +726,7 @@ ejs-calendar {
706
726
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
707
727
  background: #f3f2f1;
708
728
  border: none;
709
- border-radius: 0;
729
+ border-radius: 2px;
710
730
  box-shadow: none;
711
731
  background: none;
712
732
  border-radius: 4px;
@@ -716,7 +736,7 @@ ejs-calendar {
716
736
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
717
737
  background-color: #f3f2f1;
718
738
  border: none;
719
- border-radius: 0;
739
+ border-radius: 2px;
720
740
  color: #201f1e;
721
741
  }
722
742
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -724,7 +744,7 @@ ejs-calendar {
724
744
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
725
745
  background: #0078d4;
726
746
  border: none;
727
- border-radius: 0;
747
+ border-radius: 2px;
728
748
  box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
729
749
  color: #fff;
730
750
  border-radius: 50%;
@@ -741,7 +761,7 @@ ejs-calendar {
741
761
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
742
762
  background-color: #edebe9;
743
763
  border: none;
744
- border-radius: 0;
764
+ border-radius: 2px;
745
765
  color: #fff;
746
766
  background-color: #0078d4;
747
767
  border-radius: 50%;
@@ -812,7 +832,7 @@ ejs-calendar {
812
832
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
813
833
  background-color: #f3f2f1;
814
834
  border: none;
815
- border-radius: 0;
835
+ border-radius: 2px;
816
836
  color: #201f1e;
817
837
  }
818
838
  .e-calendar .e-content td:focus span.e-day,
@@ -820,7 +840,7 @@ ejs-calendar {
820
840
  background-color: #edebe9;
821
841
  color: #201f1e;
822
842
  border: none;
823
- border-radius: 0;
843
+ border-radius: 2px;
824
844
  border-radius: 50%;
825
845
  }
826
846
  .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
@@ -843,7 +863,7 @@ ejs-calendar {
843
863
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
844
864
  background-color: #edebe9;
845
865
  border: none;
846
- border-radius: 0;
866
+ border-radius: 2px;
847
867
  color: #201f1e;
848
868
  }
849
869
  .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -878,7 +898,7 @@ ejs-calendar {
878
898
  .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
879
899
  background-color: #edebe9;
880
900
  border: none;
881
- border-radius: 0;
901
+ border-radius: 2px;
882
902
  color: #201f1e;
883
903
  }
884
904
  .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -999,6 +1019,11 @@ ejs-calendar {
999
1019
  color: #a19f9d;
1000
1020
  }
1001
1021
 
1022
+ .e-calendar .e-cell.e-focused-cell {
1023
+ box-shadow: 0 0 0 1px #605e5c;
1024
+ border-radius: 2px;
1025
+ }
1026
+
1002
1027
  /* stylelint-disable property-no-vendor-prefix */
1003
1028
  /* stylelint-disable-line no-empty-source */
1004
1029
  /*! component icons */