@syncfusion/ej2-calendars 20.4.54 → 21.1.37

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 (132) hide show
  1. package/CHANGELOG.md +7 -7
  2. package/README.md +94 -83
  3. package/dist/ej2-calendars.min.js +2 -2
  4. package/dist/ej2-calendars.umd.min.js +2 -2
  5. package/dist/ej2-calendars.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-calendars.es2015.js +437 -374
  7. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  8. package/dist/es6/ej2-calendars.es5.js +392 -329
  9. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  10. package/dist/global/ej2-calendars.min.js +2 -2
  11. package/dist/global/ej2-calendars.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +11 -11
  14. package/src/calendar/calendar-model.d.ts +1 -1
  15. package/src/calendar/calendar.js +13 -6
  16. package/src/calendar/islamic.js +39 -29
  17. package/src/datepicker/datepicker-model.d.ts +3 -3
  18. package/src/datepicker/datepicker.js +67 -58
  19. package/src/daterangepicker/daterangepicker.js +11 -5
  20. package/src/datetimepicker/datetimepicker-model.d.ts +3 -3
  21. package/src/datetimepicker/datetimepicker.d.ts +4 -4
  22. package/src/datetimepicker/datetimepicker.js +15 -17
  23. package/src/maskbase/masked-date-time.js +208 -179
  24. package/src/timepicker/timepicker-model.d.ts +7 -7
  25. package/src/timepicker/timepicker.d.ts +9 -9
  26. package/src/timepicker/timepicker.js +39 -36
  27. package/styles/bootstrap-dark.css +9 -8
  28. package/styles/bootstrap.css +9 -3
  29. package/styles/bootstrap4.css +6 -4
  30. package/styles/bootstrap5-dark.css +19 -17
  31. package/styles/bootstrap5.css +17 -15
  32. package/styles/calendar/_bootstrap-dark-definition.scss +1 -1
  33. package/styles/calendar/_bootstrap5-definition.scss +21 -21
  34. package/styles/calendar/_fabric-dark-definition.scss +5 -3
  35. package/styles/calendar/_fabric-definition.scss +2 -0
  36. package/styles/calendar/_fluent-definition.scss +36 -36
  37. package/styles/calendar/_highcontrast-definition.scss +3 -1
  38. package/styles/calendar/_highcontrast-light-definition.scss +2 -0
  39. package/styles/calendar/_layout.scss +53 -6
  40. package/styles/calendar/_material-dark-definition.scss +4 -2
  41. package/styles/calendar/_material-definition.scss +2 -0
  42. package/styles/calendar/_tailwind-definition.scss +13 -13
  43. package/styles/calendar/_theme.scss +74 -13
  44. package/styles/calendar/bootstrap-dark.css +4 -3
  45. package/styles/calendar/bootstrap.css +3 -2
  46. package/styles/calendar/bootstrap4.css +3 -2
  47. package/styles/calendar/bootstrap5-dark.css +14 -13
  48. package/styles/calendar/bootstrap5.css +13 -12
  49. package/styles/calendar/fabric-dark.css +15 -5
  50. package/styles/calendar/fabric.css +12 -2
  51. package/styles/calendar/fluent-dark.css +51 -28
  52. package/styles/calendar/fluent.css +51 -28
  53. package/styles/calendar/highcontrast-light.css +3 -2
  54. package/styles/calendar/highcontrast.css +14 -4
  55. package/styles/calendar/icons/_material3.scss +3 -3
  56. package/styles/calendar/material-dark.css +14 -4
  57. package/styles/calendar/material.css +12 -2
  58. package/styles/calendar/tailwind-dark.css +11 -10
  59. package/styles/calendar/tailwind.css +11 -10
  60. package/styles/datepicker/_bootstrap5-definition.scss +8 -8
  61. package/styles/datepicker/_fluent-definition.scss +8 -8
  62. package/styles/datepicker/_layout.scss +16 -6
  63. package/styles/datepicker/_tailwind-definition.scss +8 -8
  64. package/styles/datepicker/_theme.scss +11 -1
  65. package/styles/datepicker/icons/_material3.scss +3 -3
  66. package/styles/daterangepicker/_bootstrap-dark-definition.scss +5 -5
  67. package/styles/daterangepicker/_bootstrap-definition.scss +1 -1
  68. package/styles/daterangepicker/_bootstrap4-definition.scss +2 -2
  69. package/styles/daterangepicker/_bootstrap5-definition.scss +21 -21
  70. package/styles/daterangepicker/_fabric-dark-definition.scss +1 -1
  71. package/styles/daterangepicker/_fabric-definition.scss +1 -1
  72. package/styles/daterangepicker/_fluent-definition.scss +27 -27
  73. package/styles/daterangepicker/_highcontrast-definition.scss +1 -1
  74. package/styles/daterangepicker/_highcontrast-light-definition.scss +1 -1
  75. package/styles/daterangepicker/_layout.scss +50 -3
  76. package/styles/daterangepicker/_material-dark-definition.scss +1 -1
  77. package/styles/daterangepicker/_material-definition.scss +1 -1
  78. package/styles/daterangepicker/_tailwind-definition.scss +19 -19
  79. package/styles/daterangepicker/_theme.scss +93 -15
  80. package/styles/daterangepicker/bootstrap-dark.css +5 -5
  81. package/styles/daterangepicker/bootstrap.css +6 -1
  82. package/styles/daterangepicker/bootstrap4.css +3 -2
  83. package/styles/daterangepicker/bootstrap5-dark.css +5 -4
  84. package/styles/daterangepicker/bootstrap5.css +4 -3
  85. package/styles/daterangepicker/fabric-dark.css +1 -1
  86. package/styles/daterangepicker/fabric.css +1 -1
  87. package/styles/daterangepicker/fluent-dark.css +33 -9
  88. package/styles/daterangepicker/fluent.css +33 -9
  89. package/styles/daterangepicker/highcontrast-light.css +1 -1
  90. package/styles/daterangepicker/highcontrast.css +1 -1
  91. package/styles/daterangepicker/icons/_material3.scss +33 -6
  92. package/styles/daterangepicker/material-dark.css +1 -1
  93. package/styles/daterangepicker/material.css +8 -2
  94. package/styles/daterangepicker/tailwind-dark.css +2 -2
  95. package/styles/daterangepicker/tailwind.css +2 -2
  96. package/styles/datetimepicker/_bootstrap5-definition.scss +1 -1
  97. package/styles/datetimepicker/_fluent-definition.scss +1 -1
  98. package/styles/datetimepicker/_layout.scss +8 -3
  99. package/styles/datetimepicker/_tailwind-definition.scss +1 -1
  100. package/styles/datetimepicker/_theme.scss +24 -4
  101. package/styles/datetimepicker/icons/_material3.scss +1 -1
  102. package/styles/fabric-dark.css +16 -6
  103. package/styles/fabric.css +16 -4
  104. package/styles/fluent-dark.css +84 -37
  105. package/styles/fluent.css +84 -37
  106. package/styles/highcontrast-light.css +4 -3
  107. package/styles/highcontrast.css +15 -5
  108. package/styles/material-dark.css +15 -5
  109. package/styles/material.css +20 -4
  110. package/styles/tailwind-dark.css +13 -12
  111. package/styles/tailwind.css +13 -12
  112. package/styles/timepicker/_bootstrap-dark-definition.scss +1 -0
  113. package/styles/timepicker/_bootstrap-definition.scss +1 -0
  114. package/styles/timepicker/_bootstrap4-definition.scss +1 -0
  115. package/styles/timepicker/_bootstrap5-definition.scss +6 -5
  116. package/styles/timepicker/_fabric-dark-definition.scss +1 -0
  117. package/styles/timepicker/_fabric-definition.scss +1 -0
  118. package/styles/timepicker/_fluent-definition.scss +6 -5
  119. package/styles/timepicker/_fusionnew-definition.scss +1 -0
  120. package/styles/timepicker/_highcontrast-definition.scss +1 -0
  121. package/styles/timepicker/_highcontrast-light-definition.scss +1 -0
  122. package/styles/timepicker/_layout.scss +11 -3
  123. package/styles/timepicker/_material-dark-definition.scss +1 -0
  124. package/styles/timepicker/_material-definition.scss +1 -0
  125. package/styles/timepicker/_tailwind-definition.scss +6 -5
  126. package/styles/timepicker/_theme.scss +36 -6
  127. package/styles/timepicker/icons/_material3.scss +1 -1
  128. package/styles/calendar/_material3-definition.scss +0 -250
  129. package/styles/datepicker/_material3-definition.scss +0 -46
  130. package/styles/daterangepicker/_material3-definition.scss +0 -230
  131. package/styles/datetimepicker/_material3-definition.scss +0 -60
  132. package/styles/timepicker/_material3-definition.scss +0 -57
@@ -128,7 +128,7 @@
128
128
  }
129
129
  .e-daterangepicker.e-popup .e-range-header .e-change-icon,
130
130
  .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
131
- font-size: 15px;
131
+ font-size: 14px;
132
132
  font-weight: 500;
133
133
  text-align: center;
134
134
  width: 4%;
@@ -174,7 +174,7 @@
174
174
  line-height: 24px;
175
175
  width: auto;
176
176
  float: none;
177
- font-weight: normal;
177
+ font-weight: 400;
178
178
  margin-left: 0;
179
179
  }
180
180
  .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -290,7 +290,7 @@
290
290
  }
291
291
  .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
292
292
  .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
293
- font-size: 13px;
293
+ font-size: 12px;
294
294
  height: 36px;
295
295
  line-height: 36px;
296
296
  }
@@ -574,6 +574,7 @@
574
574
  *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
575
575
  *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
576
576
  margin: 10px 0;
577
+ margin-bottom: 0;
577
578
  }
578
579
 
579
580
  .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -720,7 +721,7 @@
720
721
  .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover:not(.e-selected):hover span.e-day,
721
722
  .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
722
723
  .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day {
723
- background-color: #495057;
724
+ background-color: #6c757d;
724
725
  border: none;
725
726
  color: #e9ecef;
726
727
  }
@@ -128,7 +128,7 @@
128
128
  }
129
129
  .e-daterangepicker.e-popup .e-range-header .e-change-icon,
130
130
  .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
131
- font-size: 15px;
131
+ font-size: 14px;
132
132
  font-weight: 500;
133
133
  text-align: center;
134
134
  width: 4%;
@@ -174,7 +174,7 @@
174
174
  line-height: 24px;
175
175
  width: auto;
176
176
  float: none;
177
- font-weight: normal;
177
+ font-weight: 400;
178
178
  margin-left: 0;
179
179
  }
180
180
  .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -290,7 +290,7 @@
290
290
  }
291
291
  .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
292
292
  .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
293
- font-size: 13px;
293
+ font-size: 12px;
294
294
  height: 36px;
295
295
  line-height: 36px;
296
296
  }
@@ -574,6 +574,7 @@
574
574
  *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
575
575
  *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
576
576
  margin: 10px 0;
577
+ margin-bottom: 0;
577
578
  }
578
579
 
579
580
  .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -148,7 +148,7 @@
148
148
  .e-daterangepicker.e-popup .e-separator,
149
149
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
150
150
  height: 1px;
151
- margin: 0 16px;
151
+ margin: 0;
152
152
  }
153
153
  .e-daterangepicker.e-popup .e-calendar,
154
154
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -149,7 +149,7 @@
149
149
  .e-daterangepicker.e-popup .e-separator,
150
150
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
151
151
  height: 1px;
152
- margin: 0 16px;
152
+ margin: 0;
153
153
  }
154
154
  .e-daterangepicker.e-popup .e-calendar,
155
155
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -128,7 +128,7 @@
128
128
  }
129
129
  .e-daterangepicker.e-popup .e-range-header .e-change-icon,
130
130
  .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
131
- font-size: 15px;
131
+ font-size: 16px;
132
132
  font-weight: 600;
133
133
  text-align: center;
134
134
  width: 4%;
@@ -395,7 +395,7 @@
395
395
  border: 1px solid #0078d4;
396
396
  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
397
397
  font-size: 14px;
398
- font-weight: 500;
398
+ font-weight: 600;
399
399
  height: 36px;
400
400
  line-height: 34px;
401
401
  max-width: 116px;
@@ -472,6 +472,11 @@
472
472
  *.e-device.e-daterangepicker .e-calendar {
473
473
  max-width: 296px;
474
474
  }
475
+ .e-bigger .e-daterangepicker .e-calendar .e-header,
476
+ *.e-bigger.e-daterangepicker .e-calendar .e-header,
477
+ *.e-device.e-daterangepicker .e-calendar .e-header {
478
+ padding: 8px 16px;
479
+ }
475
480
  .e-bigger .e-daterangepicker .e-calendar .e-header .e-next, .e-bigger .e-daterangepicker .e-calendar .e-header .e-prev,
476
481
  *.e-bigger.e-daterangepicker .e-calendar .e-header .e-next,
477
482
  *.e-bigger.e-daterangepicker .e-calendar .e-header .e-prev,
@@ -541,12 +546,12 @@
541
546
  *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header,
542
547
  *.e-device.e-daterangepicker.e-device.e-popup .e-range-header {
543
548
  margin: 0;
544
- padding: 12px;
549
+ padding: 12px 0 12px 12px;
545
550
  }
546
551
  .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
547
552
  *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
548
553
  *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
549
- margin: 10px 0;
554
+ margin: 12px 0;
550
555
  }
551
556
 
552
557
  .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -582,6 +587,25 @@
582
587
  line-height: 26px;
583
588
  }
584
589
 
590
+ .e-daterangepicker .e-calendar .e-month .e-selected span.e-day,
591
+ .e-daterangepicker.e-bigger.e-small .e-calendar .e-month .e-selected span.e-day {
592
+ height: 25px;
593
+ width: 25px;
594
+ line-height: 25px;
595
+ }
596
+
597
+ .e-daterangepicker.e-bigger .e-calendar .e-month .e-selected span.e-day {
598
+ height: 29px;
599
+ width: 29px;
600
+ line-height: 29px;
601
+ }
602
+
603
+ .e-daterangepicker.e-small .e-calendar .e-month .e-selected span.e-day {
604
+ height: 21px;
605
+ width: 21px;
606
+ line-height: 21px;
607
+ }
608
+
585
609
  /* stylelint-disable */
586
610
  .e-range-overflow {
587
611
  overflow: hidden;
@@ -921,23 +945,23 @@
921
945
 
922
946
  .e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
923
947
  .e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
924
- line-height: 26px;
948
+ line-height: 23px;
925
949
  }
926
950
 
927
951
  .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
928
952
  .e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
929
- line-height: 28px;
953
+ line-height: 25px;
930
954
  }
931
955
 
932
956
  .e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
933
957
  .e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
934
- line-height: 24px;
958
+ line-height: 19px;
935
959
  }
936
960
 
937
961
  .e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
938
- line-height: 30px;
962
+ line-height: 28px;
939
963
  }
940
964
 
941
965
  .e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
942
- line-height: 32px;
966
+ line-height: 29px;
943
967
  }
@@ -128,7 +128,7 @@
128
128
  }
129
129
  .e-daterangepicker.e-popup .e-range-header .e-change-icon,
130
130
  .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
131
- font-size: 15px;
131
+ font-size: 16px;
132
132
  font-weight: 600;
133
133
  text-align: center;
134
134
  width: 4%;
@@ -395,7 +395,7 @@
395
395
  border: 1px solid #0078d4;
396
396
  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
397
397
  font-size: 14px;
398
- font-weight: 500;
398
+ font-weight: 600;
399
399
  height: 36px;
400
400
  line-height: 34px;
401
401
  max-width: 116px;
@@ -472,6 +472,11 @@
472
472
  *.e-device.e-daterangepicker .e-calendar {
473
473
  max-width: 296px;
474
474
  }
475
+ .e-bigger .e-daterangepicker .e-calendar .e-header,
476
+ *.e-bigger.e-daterangepicker .e-calendar .e-header,
477
+ *.e-device.e-daterangepicker .e-calendar .e-header {
478
+ padding: 8px 16px;
479
+ }
475
480
  .e-bigger .e-daterangepicker .e-calendar .e-header .e-next, .e-bigger .e-daterangepicker .e-calendar .e-header .e-prev,
476
481
  *.e-bigger.e-daterangepicker .e-calendar .e-header .e-next,
477
482
  *.e-bigger.e-daterangepicker .e-calendar .e-header .e-prev,
@@ -541,12 +546,12 @@
541
546
  *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header,
542
547
  *.e-device.e-daterangepicker.e-device.e-popup .e-range-header {
543
548
  margin: 0;
544
- padding: 12px;
549
+ padding: 12px 0 12px 12px;
545
550
  }
546
551
  .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
547
552
  *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
548
553
  *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
549
- margin: 10px 0;
554
+ margin: 12px 0;
550
555
  }
551
556
 
552
557
  .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -582,6 +587,25 @@
582
587
  line-height: 26px;
583
588
  }
584
589
 
590
+ .e-daterangepicker .e-calendar .e-month .e-selected span.e-day,
591
+ .e-daterangepicker.e-bigger.e-small .e-calendar .e-month .e-selected span.e-day {
592
+ height: 25px;
593
+ width: 25px;
594
+ line-height: 25px;
595
+ }
596
+
597
+ .e-daterangepicker.e-bigger .e-calendar .e-month .e-selected span.e-day {
598
+ height: 29px;
599
+ width: 29px;
600
+ line-height: 29px;
601
+ }
602
+
603
+ .e-daterangepicker.e-small .e-calendar .e-month .e-selected span.e-day {
604
+ height: 21px;
605
+ width: 21px;
606
+ line-height: 21px;
607
+ }
608
+
585
609
  /* stylelint-disable */
586
610
  .e-range-overflow {
587
611
  overflow: hidden;
@@ -921,23 +945,23 @@
921
945
 
922
946
  .e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
923
947
  .e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
924
- line-height: 26px;
948
+ line-height: 23px;
925
949
  }
926
950
 
927
951
  .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
928
952
  .e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
929
- line-height: 28px;
953
+ line-height: 25px;
930
954
  }
931
955
 
932
956
  .e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
933
957
  .e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
934
- line-height: 24px;
958
+ line-height: 19px;
935
959
  }
936
960
 
937
961
  .e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
938
- line-height: 30px;
962
+ line-height: 28px;
939
963
  }
940
964
 
941
965
  .e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
942
- line-height: 32px;
966
+ line-height: 29px;
943
967
  }
@@ -148,7 +148,7 @@
148
148
  .e-daterangepicker.e-popup .e-separator,
149
149
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
150
150
  height: 1px;
151
- margin: 0 16px;
151
+ margin: 0;
152
152
  }
153
153
  .e-daterangepicker.e-popup .e-calendar,
154
154
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -149,7 +149,7 @@
149
149
  .e-daterangepicker.e-popup .e-separator,
150
150
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
151
151
  height: 1px;
152
- margin: 0 16px;
152
+ margin: 0;
153
153
  }
154
154
  .e-daterangepicker.e-popup .e-calendar,
155
155
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -1,11 +1,8 @@
1
- @include export-module('daterangepicker-material3-icons') {
1
+ @include export-module('daterangepicker-Material3-icons') {
2
2
 
3
3
  /*! component icons */
4
4
  .e-input-group-icon.e-range-icon,
5
5
  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon {
6
- border-bottom-right-radius: $range-icon-bottom-right-radius;
7
- border-right: $range-control-border-right;
8
- border-top-right-radius: $range-icon-top-right-radius;
9
6
  font-size: $range-icon-font-size;
10
7
  margin: $range-icon-margin;
11
8
  min-height: $range-icon-container-min-height;
@@ -50,8 +47,8 @@
50
47
  #{if(&, '&', '*')} .e-control-wrapper .e-input-group-icon.e-range-icon {
51
48
  font-size: $range-bigger-icon-font-size;
52
49
  margin: $range-icon-bigger-margin;
53
- min-height: $range-bigger-icon-container-min-height;
54
- min-width: $range-bigger-icon-container-min-width;
50
+ min-height: $range-icon-container-min-height;
51
+ min-width: $range-icon-container-min-width;
55
52
  outline: none;
56
53
  }
57
54
  }
@@ -69,4 +66,34 @@
69
66
  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
70
67
  font-size: $range-bigger-small-icon-font-size;
71
68
  }
69
+
70
+ // Outline textbox configuration
71
+
72
+ .e-date-range-wrapper.e-outline .e-input-group-icon.e-range-icon,
73
+ .e-date-range-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-range-icon {
74
+ min-height: $zero-value;
75
+ min-width: 20px;
76
+ }
77
+
78
+ .e-bigger .e-date-range-wrapper.e-outline .e-input-group-icon.e-range-icon,
79
+ .e-date-range-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-range-icon,
80
+ .e-bigger .e-date-range-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-range-icon {
81
+ min-height: $zero-value;
82
+ min-width: 24px;
83
+ }
84
+
85
+ .e-small .e-date-range-wrapper.e-outline .e-input-group-icon.e-range-icon,
86
+ .e-date-range-wrapper.e-control-wrapper.e-small.e-outline .e-input-group-icon.e-range-icon,
87
+ .e-small .e-date-range-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-range-icon {
88
+ min-height: $zero-value;
89
+ min-width: 18px;
90
+ }
91
+
92
+ .e-bigger.e-small .e-outline.e-date-range-wrapper .e-input-group-icon.e-range-icon,
93
+ .e-bigger.e-small.e-outline.e-date-range-wrapper .e-input-group-icon.e-range-icon,
94
+ .e-date-range-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-range-icon,
95
+ .e-bigger.e-small .e-date-range-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-range-icon {
96
+ min-height: $zero-value;
97
+ min-width: 20px;
98
+ }
72
99
  }
@@ -187,7 +187,7 @@
187
187
  .e-daterangepicker.e-popup .e-separator,
188
188
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
189
189
  height: 1px;
190
- margin: 0 16px;
190
+ margin: 0;
191
191
  }
192
192
  .e-daterangepicker.e-popup .e-calendar,
193
193
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -196,7 +196,7 @@
196
196
  .e-daterangepicker.e-popup .e-separator,
197
197
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
198
198
  height: 1px;
199
- margin: 0 16px;
199
+ margin: 0;
200
200
  }
201
201
  .e-daterangepicker.e-popup .e-calendar,
202
202
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -401,6 +401,11 @@
401
401
  max-width: 246px;
402
402
  }
403
403
 
404
+ .e-bigger .e-daterangepicker.e-popup,
405
+ *.e-bigger.e-daterangepicker.e-popup,
406
+ *.e-device.e-daterangepicker.e-popup {
407
+ background-color: #fff;
408
+ }
404
409
  .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
405
410
  *.e-bigger.e-daterangepicker.e-popup.e-preset-wrapper,
406
411
  *.e-device.e-daterangepicker.e-popup.e-preset-wrapper {
@@ -775,6 +780,7 @@
775
780
  height: 80%;
776
781
  }
777
782
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month table {
783
+ display: table;
778
784
  border-spacing: unset;
779
785
  }
780
786
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-header {
@@ -978,7 +984,7 @@
978
984
  .e-bigger .e-daterangepicker,
979
985
  *.e-bigger.e-daterangepicker,
980
986
  *.e-device.e-daterangepicker {
981
- background-color: #fff;
987
+ background-color: initial;
982
988
  padding: 0;
983
989
  }
984
990
  .e-bigger .e-daterangepicker .e-calendar th,
@@ -176,7 +176,7 @@
176
176
  line-height: 24px;
177
177
  width: auto;
178
178
  float: none;
179
- font-weight: normal;
179
+ font-weight: 400;
180
180
  margin-left: 0;
181
181
  }
182
182
  .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -294,7 +294,7 @@
294
294
  }
295
295
  .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
296
296
  .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
297
- font-size: 13px;
297
+ font-size: 12px;
298
298
  height: 36px;
299
299
  line-height: 36px;
300
300
  }
@@ -176,7 +176,7 @@
176
176
  line-height: 24px;
177
177
  width: auto;
178
178
  float: none;
179
- font-weight: normal;
179
+ font-weight: 400;
180
180
  margin-left: 0;
181
181
  }
182
182
  .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -294,7 +294,7 @@
294
294
  }
295
295
  .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
296
296
  .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
297
- font-size: 13px;
297
+ font-size: 12px;
298
298
  height: 36px;
299
299
  line-height: 36px;
300
300
  }
@@ -32,7 +32,7 @@ $datetime-list-small-text-indent: 8px !default;
32
32
  $datetime-list-small-font-size: $text-xs !default;
33
33
 
34
34
  // mouse small icon
35
- $datetime-icon-small-font-size: 14px !default;
35
+ $datetime-icon-small-font-size: $font-icon-14 !default;
36
36
  $datetime-small-min-width: 16px !default;
37
37
 
38
38
  //touch small
@@ -32,7 +32,7 @@ $datetime-list-small-text-indent: 8px !default;
32
32
  $datetime-list-small-font-size: $text-xs !default;
33
33
 
34
34
  // mouse small icon
35
- $datetime-icon-small-font-size: 14px !default;
35
+ $datetime-icon-small-font-size: $font-icon-14 !default;
36
36
  $datetime-small-min-width: 16px !default;
37
37
 
38
38
  //touch small
@@ -34,7 +34,7 @@
34
34
  #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
35
35
  font-size: 16px;
36
36
  margin: $datetime-date-icon-margin;
37
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
37
+ @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
38
38
  min-height: $datetime-normal-min-height;
39
39
  min-width: $datetime-normal-min-width;
40
40
  }
@@ -55,7 +55,12 @@
55
55
  }
56
56
 
57
57
  #{&}.e-datetimepicker.e-time-modal {
58
- background-color: $datetime-default-overlay;
58
+ @if $skin-name != 'Material3' {
59
+ background-color: $datetime-default-overlay;
60
+ }
61
+ @if $skin-name == 'Material3' {
62
+ background: $datetime-default-overlay;
63
+ }
59
64
  height: 100%;
60
65
  left: 0;
61
66
  opacity: .5;
@@ -116,7 +121,7 @@
116
121
 
117
122
  #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
118
123
  margin: $datetime-time-bigger-icon-margin;
119
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
124
+ @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
120
125
  min-height: $datetime-bigger-min-height;
121
126
  min-width: $datetime-bigger-min-width;
122
127
  }
@@ -32,7 +32,7 @@ $datetime-list-small-text-indent: 12px !default;
32
32
  $datetime-list-small-font-size: $text-xs !default;
33
33
 
34
34
  // mouse small icon
35
- $datetime-icon-small-font-size: 14px !default;
35
+ $datetime-icon-small-font-size: $font-icon-14 !default;
36
36
  $datetime-small-min-width: 16px !default;
37
37
 
38
38
  //touch small
@@ -21,7 +21,12 @@
21
21
  box-shadow: $datetime-popup-shadow;
22
22
 
23
23
  #{if(&, '&', '*')} .e-list-parent.e-ul {
24
- background-color: $datetime-list-bg-color;
24
+ @if $skin-name != 'Material3' {
25
+ background-color: $datetime-list-bg-color;
26
+ }
27
+ @if $skin-name == 'Material3' {
28
+ background: $datetime-list-bg-color;
29
+ }
25
30
 
26
31
  #{if(&, '&', '*')} li.e-list-item {
27
32
  border: $datetime-list-default-border-style;
@@ -31,18 +36,33 @@
31
36
  #{if(&, '&', '*')} .e-list-item.e-hover,
32
37
  #{if(&, '&', '*')} .e-list-item.e-navigation,
33
38
  #{if(&, '&', '*')} .e-list-item:focus {
34
- background-color: $datetime-list-hover-bg-color;
39
+ @if $skin-name != 'Material3' {
40
+ background-color: $datetime-list-hover-bg-color;
41
+ }
42
+ @if $skin-name == 'Material3' {
43
+ background: $datetime-list-hover-bg-color;
44
+ }
35
45
  border: $datetime-list-hover-border-color;
36
46
  color: $datetime-list-hover-font-color;
37
47
  }
38
48
 
39
49
  #{if(&, '&', '*')} .e-list-item.e-active {
40
- background-color: $datetime-list-active-bg-color;
50
+ @if $skin-name != 'Material3' {
51
+ background-color: $datetime-list-active-bg-color;
52
+ }
53
+ @if $skin-name == 'Material3' {
54
+ background: $datetime-list-active-bg-color;
55
+ }
41
56
  color: $datetime-list-active-font-color;
42
57
  }
43
58
 
44
59
  #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
45
- background-color: $datetime-list-active-hover-bg-color;
60
+ @if $skin-name != 'Material3' {
61
+ background-color: $datetime-list-active-hover-bg-color;
62
+ }
63
+ @if $skin-name == 'Material3' {
64
+ background: $datetime-list-active-hover-bg-color;
65
+ }
46
66
  color: $datetime-list-active-hover-font-color;
47
67
  }
48
68
  }
@@ -1,4 +1,4 @@
1
- @include export-module('datetimepicker-material3-icons') {
1
+ @include export-module('datetimepicker-Material3-icons') {
2
2
 
3
3
  /*! component icons */
4
4
  .e-datetime-wrapper {
@@ -125,6 +125,15 @@ ejs-calendar {
125
125
  -ms-touch-action: none;
126
126
  touch-action: none;
127
127
  }
128
+ .e-calendar .e-content td.e-disabled.e-today,
129
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today {
130
+ opacity: 1;
131
+ }
132
+ .e-calendar .e-content td.e-disabled.e-today span.e-day,
133
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
134
+ box-shadow: inset 1px 0 #0074cc, inset 0 1px #0074cc, inset -1px 0 #0074cc, inset 0 -1px #0074cc;
135
+ color: none;
136
+ }
128
137
  .e-calendar .e-content td,
129
138
  .e-bigger.e-small .e-calendar .e-content td {
130
139
  cursor: pointer;
@@ -344,7 +353,7 @@ ejs-calendar {
344
353
  }
345
354
  .e-calendar .e-footer-container,
346
355
  .e-bigger.e-small .e-calendar .e-footer-container {
347
- background-color: #201f1f;
356
+ background-color: transparent;
348
357
  border-top: none;
349
358
  cursor: default;
350
359
  display: -ms-flexbox;
@@ -353,7 +362,7 @@ ejs-calendar {
353
362
  flex-direction: row;
354
363
  -ms-flex-pack: end;
355
364
  justify-content: flex-end;
356
- padding: 0 10px 10px 10px;
365
+ padding: 10px 10px 10px 10px;
357
366
  text-align: center;
358
367
  width: 100%;
359
368
  }
@@ -478,7 +487,7 @@ ejs-calendar {
478
487
  .e-bigger.e-calendar .e-footer-container,
479
488
  *.e-bigger .e-calendar .e-footer-container {
480
489
  border-top: none;
481
- padding: 0 10px 10px 10px;
490
+ padding: 10px 10px 10px 10px;
482
491
  }
483
492
  .e-small.e-calendar,
484
493
  .e-small .e-calendar {
@@ -510,10 +519,11 @@ ejs-calendar {
510
519
  .e-small .e-calendar .e-header {
511
520
  height: 32px;
512
521
  }
513
- .e-small.e-calendar .e-header span,
514
- .e-small .e-calendar .e-header span {
522
+ .e-small.e-calendar .e-header button span,
523
+ .e-small .e-calendar .e-header button span {
515
524
  font-size: 12px;
516
525
  padding: 6px;
526
+ line-height: 14px;
517
527
  }
518
528
  .e-small.e-calendar .e-header .e-title,
519
529
  .e-small .e-calendar .e-header .e-title {
@@ -1342,7 +1352,7 @@ ejs-calendar {
1342
1352
  .e-daterangepicker.e-popup .e-separator,
1343
1353
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
1344
1354
  height: 1px;
1345
- margin: 0 16px;
1355
+ margin: 0;
1346
1356
  }
1347
1357
  .e-daterangepicker.e-popup .e-calendar,
1348
1358
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {