@syncfusion/ej2-angular-calendars 22.2.12 → 23.1.36

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 (231) hide show
  1. package/esm2020/src/calendar/calendar.component.mjs +5 -4
  2. package/esm2020/src/datepicker/datepicker.component.mjs +5 -4
  3. package/esm2020/src/daterangepicker/daterangepicker.component.mjs +5 -4
  4. package/esm2020/src/datetimepicker/datetimepicker.component.mjs +5 -4
  5. package/esm2020/src/timepicker/timepicker.component.mjs +5 -4
  6. package/fesm2015/syncfusion-ej2-angular-calendars.mjs +20 -15
  7. package/fesm2015/syncfusion-ej2-angular-calendars.mjs.map +1 -1
  8. package/fesm2020/syncfusion-ej2-angular-calendars.mjs +20 -15
  9. package/fesm2020/syncfusion-ej2-angular-calendars.mjs.map +1 -1
  10. package/package.json +9 -9
  11. package/schematics/utils/lib-details.d.ts +2 -2
  12. package/schematics/utils/lib-details.js +2 -2
  13. package/schematics/utils/lib-details.ts +2 -2
  14. package/src/calendar/calendar.component.d.ts +3 -2
  15. package/src/datepicker/datepicker.component.d.ts +3 -2
  16. package/src/daterangepicker/daterangepicker.component.d.ts +3 -2
  17. package/src/datetimepicker/datetimepicker.component.d.ts +3 -2
  18. package/src/timepicker/timepicker.component.d.ts +3 -2
  19. package/styles/bootstrap-dark.css +91 -40
  20. package/styles/bootstrap.css +91 -40
  21. package/styles/bootstrap4.css +91 -40
  22. package/styles/bootstrap5-dark.css +92 -41
  23. package/styles/bootstrap5.css +92 -41
  24. package/styles/calendar/bootstrap-dark.scss +1 -1
  25. package/styles/calendar/bootstrap.scss +1 -1
  26. package/styles/calendar/bootstrap4.scss +1 -1
  27. package/styles/calendar/bootstrap5-dark.scss +1 -1
  28. package/styles/calendar/bootstrap5.scss +1 -1
  29. package/styles/calendar/fabric-dark.scss +1 -1
  30. package/styles/calendar/fabric.scss +1 -1
  31. package/styles/calendar/fluent-dark.scss +1 -1
  32. package/styles/calendar/fluent.scss +1 -1
  33. package/styles/calendar/highcontrast-light.scss +1 -1
  34. package/styles/calendar/highcontrast.scss +1 -1
  35. package/styles/calendar/material-dark.css +0 -1
  36. package/styles/calendar/material-dark.scss +1 -1
  37. package/styles/calendar/material.css +0 -1
  38. package/styles/calendar/material.scss +1 -1
  39. package/styles/calendar/material3-dark.css +0 -1
  40. package/styles/calendar/material3-dark.scss +1 -1
  41. package/styles/calendar/material3.css +0 -1
  42. package/styles/calendar/material3.scss +1 -1
  43. package/styles/calendar/tailwind-dark.css +0 -1
  44. package/styles/calendar/tailwind-dark.scss +1 -1
  45. package/styles/calendar/tailwind.css +0 -1
  46. package/styles/calendar/tailwind.scss +1 -1
  47. package/styles/datepicker/_bootstrap-dark-definition.scss +5 -5
  48. package/styles/datepicker/_bootstrap-definition.scss +5 -5
  49. package/styles/datepicker/_bootstrap4-definition.scss +5 -5
  50. package/styles/datepicker/_bootstrap5-definition.scss +6 -6
  51. package/styles/datepicker/_fabric-dark-definition.scss +4 -4
  52. package/styles/datepicker/_fabric-definition.scss +6 -6
  53. package/styles/datepicker/_fluent-definition.scss +4 -4
  54. package/styles/datepicker/_fusionnew-definition.scss +5 -5
  55. package/styles/datepicker/_highcontrast-definition.scss +5 -5
  56. package/styles/datepicker/_highcontrast-light-definition.scss +5 -5
  57. package/styles/datepicker/_layout.scss +34 -9
  58. package/styles/datepicker/_material-dark-definition.scss +4 -4
  59. package/styles/datepicker/_material-definition.scss +4 -4
  60. package/styles/datepicker/_material3-definition.scss +4 -4
  61. package/styles/datepicker/_tailwind-definition.scss +8 -8
  62. package/styles/datepicker/bootstrap-dark.css +49 -19
  63. package/styles/datepicker/bootstrap-dark.scss +1 -1
  64. package/styles/datepicker/bootstrap.css +49 -19
  65. package/styles/datepicker/bootstrap.scss +1 -1
  66. package/styles/datepicker/bootstrap4.css +49 -19
  67. package/styles/datepicker/bootstrap4.scss +1 -1
  68. package/styles/datepicker/bootstrap5-dark.css +50 -20
  69. package/styles/datepicker/bootstrap5-dark.scss +1 -1
  70. package/styles/datepicker/bootstrap5.css +50 -20
  71. package/styles/datepicker/bootstrap5.scss +1 -1
  72. package/styles/datepicker/fabric-dark.css +48 -18
  73. package/styles/datepicker/fabric-dark.scss +1 -1
  74. package/styles/datepicker/fabric.css +49 -19
  75. package/styles/datepicker/fabric.scss +1 -1
  76. package/styles/datepicker/fluent-dark.css +48 -18
  77. package/styles/datepicker/fluent-dark.scss +1 -1
  78. package/styles/datepicker/fluent.css +48 -18
  79. package/styles/datepicker/fluent.scss +1 -1
  80. package/styles/datepicker/highcontrast-light.css +49 -19
  81. package/styles/datepicker/highcontrast-light.scss +1 -1
  82. package/styles/datepicker/highcontrast.css +49 -19
  83. package/styles/datepicker/highcontrast.scss +1 -1
  84. package/styles/datepicker/material-dark.css +48 -19
  85. package/styles/datepicker/material-dark.scss +1 -1
  86. package/styles/datepicker/material.css +48 -19
  87. package/styles/datepicker/material.scss +1 -1
  88. package/styles/datepicker/material3-dark.css +48 -19
  89. package/styles/datepicker/material3-dark.scss +1 -1
  90. package/styles/datepicker/material3.css +48 -19
  91. package/styles/datepicker/material3.scss +1 -1
  92. package/styles/datepicker/tailwind-dark.css +52 -23
  93. package/styles/datepicker/tailwind-dark.scss +1 -1
  94. package/styles/datepicker/tailwind.css +52 -23
  95. package/styles/datepicker/tailwind.scss +1 -1
  96. package/styles/daterangepicker/_bootstrap-dark-definition.scss +4 -4
  97. package/styles/daterangepicker/_bootstrap-definition.scss +4 -4
  98. package/styles/daterangepicker/_bootstrap4-definition.scss +4 -4
  99. package/styles/daterangepicker/_bootstrap5-definition.scss +4 -4
  100. package/styles/daterangepicker/_fabric-dark-definition.scss +4 -4
  101. package/styles/daterangepicker/_fabric-definition.scss +4 -4
  102. package/styles/daterangepicker/_fluent-definition.scss +4 -4
  103. package/styles/daterangepicker/_fusionnew-definition.scss +4 -4
  104. package/styles/daterangepicker/_highcontrast-definition.scss +4 -4
  105. package/styles/daterangepicker/_highcontrast-light-definition.scss +4 -4
  106. package/styles/daterangepicker/_layout.scss +48 -19
  107. package/styles/daterangepicker/_material-dark-definition.scss +4 -4
  108. package/styles/daterangepicker/_material-definition.scss +4 -4
  109. package/styles/daterangepicker/_material3-definition.scss +8 -5
  110. package/styles/daterangepicker/_tailwind-definition.scss +5 -5
  111. package/styles/daterangepicker/bootstrap-dark.css +30 -26
  112. package/styles/daterangepicker/bootstrap-dark.scss +1 -1
  113. package/styles/daterangepicker/bootstrap.css +30 -26
  114. package/styles/daterangepicker/bootstrap.scss +1 -1
  115. package/styles/daterangepicker/bootstrap4.css +30 -26
  116. package/styles/daterangepicker/bootstrap4.scss +1 -1
  117. package/styles/daterangepicker/bootstrap5-dark.css +30 -26
  118. package/styles/daterangepicker/bootstrap5-dark.scss +1 -1
  119. package/styles/daterangepicker/bootstrap5.css +30 -26
  120. package/styles/daterangepicker/bootstrap5.scss +1 -1
  121. package/styles/daterangepicker/fabric-dark.css +30 -26
  122. package/styles/daterangepicker/fabric-dark.scss +1 -1
  123. package/styles/daterangepicker/fabric.css +30 -26
  124. package/styles/daterangepicker/fabric.scss +1 -1
  125. package/styles/daterangepicker/fluent-dark.css +30 -26
  126. package/styles/daterangepicker/fluent-dark.scss +1 -1
  127. package/styles/daterangepicker/fluent.css +30 -26
  128. package/styles/daterangepicker/fluent.scss +1 -1
  129. package/styles/daterangepicker/highcontrast-light.css +30 -26
  130. package/styles/daterangepicker/highcontrast-light.scss +1 -1
  131. package/styles/daterangepicker/highcontrast.css +30 -26
  132. package/styles/daterangepicker/highcontrast.scss +1 -1
  133. package/styles/daterangepicker/material-dark.css +30 -27
  134. package/styles/daterangepicker/material-dark.scss +1 -1
  135. package/styles/daterangepicker/material.css +30 -27
  136. package/styles/daterangepicker/material.scss +1 -1
  137. package/styles/daterangepicker/material3-dark.css +53 -28
  138. package/styles/daterangepicker/material3-dark.scss +1 -1
  139. package/styles/daterangepicker/material3.css +53 -28
  140. package/styles/daterangepicker/material3.scss +1 -1
  141. package/styles/daterangepicker/tailwind-dark.css +31 -28
  142. package/styles/daterangepicker/tailwind-dark.scss +1 -1
  143. package/styles/daterangepicker/tailwind.css +31 -28
  144. package/styles/daterangepicker/tailwind.scss +1 -1
  145. package/styles/datetimepicker/bootstrap-dark.scss +1 -1
  146. package/styles/datetimepicker/bootstrap.scss +1 -1
  147. package/styles/datetimepicker/bootstrap4.scss +1 -1
  148. package/styles/datetimepicker/bootstrap5-dark.scss +1 -1
  149. package/styles/datetimepicker/bootstrap5.scss +1 -1
  150. package/styles/datetimepicker/fabric-dark.scss +1 -1
  151. package/styles/datetimepicker/fabric.scss +1 -1
  152. package/styles/datetimepicker/fluent-dark.scss +1 -1
  153. package/styles/datetimepicker/fluent.scss +1 -1
  154. package/styles/datetimepicker/highcontrast-light.scss +1 -1
  155. package/styles/datetimepicker/highcontrast.scss +1 -1
  156. package/styles/datetimepicker/material-dark.css +0 -1
  157. package/styles/datetimepicker/material-dark.scss +1 -1
  158. package/styles/datetimepicker/material.css +0 -1
  159. package/styles/datetimepicker/material.scss +1 -1
  160. package/styles/datetimepicker/material3-dark.css +0 -1
  161. package/styles/datetimepicker/material3-dark.scss +1 -1
  162. package/styles/datetimepicker/material3.css +0 -1
  163. package/styles/datetimepicker/material3.scss +1 -1
  164. package/styles/datetimepicker/tailwind-dark.css +0 -1
  165. package/styles/datetimepicker/tailwind-dark.scss +1 -1
  166. package/styles/datetimepicker/tailwind.css +0 -1
  167. package/styles/datetimepicker/tailwind.scss +1 -1
  168. package/styles/fabric-dark.css +90 -39
  169. package/styles/fabric.css +103 -52
  170. package/styles/fluent-dark.css +90 -39
  171. package/styles/fluent.css +90 -39
  172. package/styles/highcontrast-light.css +91 -40
  173. package/styles/highcontrast.css +91 -40
  174. package/styles/material-dark.css +90 -40
  175. package/styles/material.css +90 -40
  176. package/styles/material3-dark.css +113 -41
  177. package/styles/material3-dark.scss +1 -1
  178. package/styles/material3.css +113 -41
  179. package/styles/material3.scss +1 -1
  180. package/styles/tailwind-dark.css +95 -49
  181. package/styles/tailwind.css +95 -49
  182. package/styles/timepicker/_bootstrap-dark-definition.scss +2 -2
  183. package/styles/timepicker/_bootstrap-definition.scss +2 -2
  184. package/styles/timepicker/_bootstrap4-definition.scss +2 -2
  185. package/styles/timepicker/_bootstrap5-definition.scss +2 -2
  186. package/styles/timepicker/_fabric-dark-definition.scss +2 -2
  187. package/styles/timepicker/_fabric-definition.scss +4 -4
  188. package/styles/timepicker/_fluent-definition.scss +2 -2
  189. package/styles/timepicker/_fusionnew-definition.scss +2 -2
  190. package/styles/timepicker/_highcontrast-definition.scss +2 -2
  191. package/styles/timepicker/_highcontrast-light-definition.scss +2 -2
  192. package/styles/timepicker/_layout.scss +16 -0
  193. package/styles/timepicker/_material-dark-definition.scss +2 -2
  194. package/styles/timepicker/_material-definition.scss +2 -2
  195. package/styles/timepicker/_material3-definition.scss +2 -2
  196. package/styles/timepicker/_tailwind-definition.scss +2 -2
  197. package/styles/timepicker/_theme.scss +1 -0
  198. package/styles/timepicker/bootstrap-dark.css +19 -2
  199. package/styles/timepicker/bootstrap-dark.scss +1 -1
  200. package/styles/timepicker/bootstrap.css +19 -2
  201. package/styles/timepicker/bootstrap.scss +1 -1
  202. package/styles/timepicker/bootstrap4.css +19 -2
  203. package/styles/timepicker/bootstrap4.scss +1 -1
  204. package/styles/timepicker/bootstrap5-dark.css +19 -2
  205. package/styles/timepicker/bootstrap5-dark.scss +1 -1
  206. package/styles/timepicker/bootstrap5.css +19 -2
  207. package/styles/timepicker/bootstrap5.scss +1 -1
  208. package/styles/timepicker/fabric-dark.css +19 -2
  209. package/styles/timepicker/fabric-dark.scss +1 -1
  210. package/styles/timepicker/fabric.css +22 -5
  211. package/styles/timepicker/fabric.scss +1 -1
  212. package/styles/timepicker/fluent-dark.css +19 -2
  213. package/styles/timepicker/fluent-dark.scss +1 -1
  214. package/styles/timepicker/fluent.css +19 -2
  215. package/styles/timepicker/fluent.scss +1 -1
  216. package/styles/timepicker/highcontrast-light.css +19 -2
  217. package/styles/timepicker/highcontrast-light.scss +1 -1
  218. package/styles/timepicker/highcontrast.css +19 -2
  219. package/styles/timepicker/highcontrast.scss +1 -1
  220. package/styles/timepicker/material-dark.css +19 -3
  221. package/styles/timepicker/material-dark.scss +1 -1
  222. package/styles/timepicker/material.css +19 -3
  223. package/styles/timepicker/material.scss +1 -1
  224. package/styles/timepicker/material3-dark.css +19 -3
  225. package/styles/timepicker/material3-dark.scss +1 -1
  226. package/styles/timepicker/material3.css +19 -3
  227. package/styles/timepicker/material3.scss +1 -1
  228. package/styles/timepicker/tailwind-dark.css +19 -3
  229. package/styles/timepicker/tailwind-dark.scss +1 -1
  230. package/styles/timepicker/tailwind.css +19 -3
  231. package/styles/timepicker/tailwind.scss +1 -1
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1089,15 +1088,22 @@ ejs-calendar {
1089
1088
  top: 0 !important;
1090
1089
  }
1091
1090
 
1091
+ .e-timepicker-mob-popup-wrap .e-popup-expand.e-timepicker.e-popup,
1092
+ .e-datetimepicker.e-popup-expand.e-timepicker.e-popup,
1093
+ .e-timepicker-mob-popup-wrap .e-popup-expand.e-datetimepicker.e-popup,
1094
+ .e-datetimepicker.e-popup-expand.e-popup {
1095
+ border-radius: 0;
1096
+ }
1097
+
1092
1098
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header,
1093
1099
  .e-datetimepicker.e-popup-expand .e-model-header {
1094
1100
  height: 10%;
1095
- padding: 2.5vh 2.5vw;
1101
+ padding: 2.5vh 2.5vw 2.5vh 1.5vw;
1096
1102
  display: -ms-flexbox;
1097
1103
  display: flex;
1098
1104
  -ms-flex-align: center;
1099
1105
  align-items: center;
1100
- font-size: 3vh;
1106
+ font-size: 2vh;
1101
1107
  border-bottom: none;
1102
1108
  }
1103
1109
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header .e-popup-close,
@@ -1109,6 +1115,11 @@ ejs-calendar {
1109
1115
  .e-datetimepicker.e-popup-expand .e-model-header .e-model-title {
1110
1116
  padding: 1vh 2vw;
1111
1117
  text-transform: uppercase;
1118
+ font-weight: 500;
1119
+ }
1120
+ .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header .e-btn.e-popup-close,
1121
+ .e-datetimepicker.e-popup-expand .e-model-header .e-btn.e-popup-close {
1122
+ font-size: 2vh;
1112
1123
  }
1113
1124
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-content,
1114
1125
  .e-datetimepicker.e-popup-expand .e-content {
@@ -1147,6 +1158,10 @@ ejs-calendar {
1147
1158
  .e-datetimepicker.e-popup-expand .e-model-header .e-model-title {
1148
1159
  padding: 1vh 1vw;
1149
1160
  }
1161
+ .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header .e-btn.e-popup-close,
1162
+ .e-datetimepicker.e-popup-expand .e-model-header .e-btn.e-popup-close {
1163
+ font-size: 2vw;
1164
+ }
1150
1165
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-content,
1151
1166
  .e-datetimepicker.e-popup-expand .e-content {
1152
1167
  height: 85%;
@@ -1218,6 +1233,7 @@ ejs-calendar {
1218
1233
  .e-timepicker-mob-popup-wrap .e-timepicker.e-popup-expand .e-model-header .e-popup-close,
1219
1234
  .e-datetimepicker.e-popup-expand .e-model-header .e-popup-close {
1220
1235
  color: rgba(var(--color-sf-on-primary));
1236
+ font-weight: 500;
1221
1237
  }
1222
1238
 
1223
1239
  /* stylelint-disable property-no-vendor-prefix */
@@ -1396,6 +1412,11 @@ ejs-calendar {
1396
1412
  min-height: 40px;
1397
1413
  }
1398
1414
 
1415
+ @media screen and (orientation: landscape) {
1416
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
1417
+ line-height: 64px;
1418
+ }
1419
+ }
1399
1420
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand {
1400
1421
  border-radius: 0;
1401
1422
  }
@@ -1405,9 +1426,15 @@ ejs-calendar {
1405
1426
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device .e-popup-close {
1406
1427
  float: right;
1407
1428
  }
1429
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device {
1430
+ height: 15vh;
1431
+ }
1432
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device .e-popup-close {
1433
+ float: right;
1434
+ }
1408
1435
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header {
1409
1436
  height: 20vh;
1410
- padding: 2vh 2vw;
1437
+ padding: 2vh 6vw;
1411
1438
  }
1412
1439
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-day-wrapper {
1413
1440
  margin: 12vh 0 0 0;
@@ -1416,13 +1443,19 @@ ejs-calendar {
1416
1443
  color: inherit;
1417
1444
  float: left;
1418
1445
  font-size: 20px;
1419
- padding: 2px;
1420
1446
  }
1421
1447
  @media (min-device-width: 768px) {
1422
1448
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
1423
1449
  font-size: 24px;
1424
1450
  }
1425
1451
  }
1452
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
1453
+ background: transparent;
1454
+ border-color: transparent;
1455
+ box-shadow: none;
1456
+ font-weight: 400;
1457
+ padding: 0;
1458
+ }
1426
1459
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
1427
1460
  color: inherit;
1428
1461
  float: right;
@@ -1464,13 +1497,19 @@ ejs-calendar {
1464
1497
  }
1465
1498
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
1466
1499
  margin-right: 18px;
1500
+ vertical-align: inherit;
1501
+ height: 35px;
1502
+ width: 35px;
1467
1503
  }
1468
1504
  @media (min-device-width: 768px) {
1469
1505
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
1470
- height: 34px;
1471
- width: 34px;
1506
+ height: 55px;
1507
+ width: 55px;
1472
1508
  }
1473
1509
  }
1510
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
1511
+ vertical-align: inherit;
1512
+ }
1474
1513
  @media (min-device-width: 768px) {
1475
1514
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
1476
1515
  font-size: 24px;
@@ -1478,6 +1517,18 @@ ejs-calendar {
1478
1517
  }
1479
1518
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
1480
1519
  margin-right: 0;
1520
+ vertical-align: inherit;
1521
+ height: 35px;
1522
+ width: 35px;
1523
+ }
1524
+ @media (min-device-width: 768px) {
1525
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
1526
+ height: 55px;
1527
+ width: 55px;
1528
+ }
1529
+ }
1530
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
1531
+ vertical-align: inherit;
1481
1532
  }
1482
1533
  @media (min-device-width: 768px) {
1483
1534
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
@@ -1502,15 +1553,11 @@ ejs-calendar {
1502
1553
  }
1503
1554
  }
1504
1555
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container {
1505
- height: 85vh;
1556
+ height: 79vh;
1506
1557
  }
1507
1558
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-footer-container {
1508
1559
  display: none;
1509
1560
  }
1510
- .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container .e-footer-container {
1511
- display: block;
1512
- padding: 5px 0;
1513
- }
1514
1561
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-month {
1515
1562
  height: 69vh;
1516
1563
  }
@@ -1569,7 +1616,6 @@ ejs-calendar {
1569
1616
  @media screen and (orientation: landscape) {
1570
1617
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
1571
1618
  float: left;
1572
- padding: 2px;
1573
1619
  }
1574
1620
  }
1575
1621
  @media screen and (orientation: landscape) {
@@ -1589,7 +1635,7 @@ ejs-calendar {
1589
1635
  }
1590
1636
  @media screen and (orientation: landscape) and (max-height: 600px) {
1591
1637
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-title {
1592
- line-height: 8vh;
1638
+ line-height: 12vh;
1593
1639
  }
1594
1640
  }
1595
1641
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -2418,7 +2464,7 @@ ejs-calendar {
2418
2464
  }
2419
2465
  @media (min-device-width: 768px) {
2420
2466
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper {
2421
- font-size: 24px;
2467
+ font-size: 18px;
2422
2468
  }
2423
2469
  }
2424
2470
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper .e-apply {
@@ -2453,43 +2499,75 @@ ejs-calendar {
2453
2499
  padding: 2vh 2vw;
2454
2500
  line-height: 5vh;
2455
2501
  }
2456
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
2502
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
2503
+ height: 36px;
2504
+ width: 36px;
2505
+ margin-right: 60vw;
2506
+ vertical-align: inherit;
2507
+ font-size: 18px;
2508
+ }
2509
+ @media screen and (orientation: landscape) {
2510
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
2511
+ margin-right: 78vw;
2512
+ vertical-align: inherit;
2513
+ }
2514
+ }
2515
+ @media (min-device-width: 768px) {
2516
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev span {
2517
+ font-size: 18px;
2518
+ padding: 11px;
2519
+ }
2520
+ }
2521
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
2457
2522
  height: 36px;
2458
2523
  width: 36px;
2524
+ margin-right: 42px;
2459
2525
  }
2460
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2526
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2461
2527
  padding: 10px;
2462
2528
  line-height: 1;
2463
2529
  }
2464
2530
  @media (min-device-width: 768px) {
2465
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2466
- font-size: 24px;
2531
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2532
+ font-size: 18px;
2467
2533
  }
2468
2534
  }
2469
2535
  @media (max-height: 600px) {
2470
2536
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
2537
+ margin-left: -25vw;
2538
+ position: absolute;
2539
+ text-align: center;
2540
+ vertical-align: middle;
2541
+ width: 50vw;
2542
+ line-height: 44px;
2471
2543
  line-height: 8vh;
2472
2544
  }
2473
2545
  }
2474
2546
  @media (min-height: 600px) {
2475
2547
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
2548
+ margin-left: -25vw;
2549
+ position: absolute;
2550
+ text-align: center;
2551
+ vertical-align: middle;
2552
+ width: 50vw;
2553
+ line-height: 44px;
2476
2554
  line-height: inherit;
2477
2555
  }
2478
2556
  }
2479
2557
  @media (min-device-width: 768px) {
2480
2558
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
2481
- font-size: 24px;
2559
+ font-size: 18px;
2482
2560
  }
2483
2561
  }
2484
2562
  @media (min-device-width: 768px) {
2485
2563
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar th {
2486
- font-size: 24px;
2564
+ font-size: 18px;
2487
2565
  height: 48px;
2488
2566
  }
2489
2567
  }
2490
2568
  @media (min-device-width: 768px) {
2491
2569
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-content span.e-day {
2492
- font-size: 24px;
2570
+ font-size: 18px;
2493
2571
  height: 64px;
2494
2572
  width: 64px;
2495
2573
  line-height: 64px;
@@ -2513,12 +2591,6 @@ ejs-calendar {
2513
2591
  height: 78vh;
2514
2592
  }
2515
2593
  }
2516
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-footer {
2517
- display: block;
2518
- }
2519
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-footer .e-btn.e-apply, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-footer .e-btn.e-cancel {
2520
- float: right;
2521
- }
2522
2594
  @media (max-height: 600px) {
2523
2595
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
2524
2596
  min-height: 100%;
@@ -2566,17 +2638,17 @@ ejs-calendar {
2566
2638
  }
2567
2639
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
2568
2640
  height: 10%;
2569
- padding: 2.5vh 2.5vw;
2641
+ padding: 2.5vh 2.5vw 2.5vh 1.5vw;
2570
2642
  display: -ms-flexbox;
2571
2643
  display: flex;
2572
2644
  -ms-flex-align: center;
2573
2645
  align-items: center;
2574
- font-size: 3vh;
2646
+ font-size: 2vh;
2575
2647
  border-bottom: none;
2576
2648
  }
2577
2649
  @media (min-device-width: 768px) {
2578
2650
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
2579
- font-size: 2vw;
2651
+ font-size: 18px;
2580
2652
  }
2581
2653
  }
2582
2654
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-popup-close {
@@ -2588,14 +2660,14 @@ ejs-calendar {
2588
2660
  text-transform: uppercase;
2589
2661
  }
2590
2662
 
2591
- @media screen and (orientation: landscape) and (max-height: 600px) {
2592
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header.e-blazor-device {
2593
- height: 23vh;
2663
+ @media screen and (orientation: landscape) {
2664
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
2665
+ padding: 0;
2594
2666
  }
2595
2667
  }
2596
- @media screen and (orientation: landscape) and (min-height: 600px) {
2597
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header.e-blazor-device {
2598
- height: 20vh;
2668
+ @media screen and (orientation: landscape) and (min-device-width: 768px) {
2669
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
2670
+ font-size: 18px;
2599
2671
  }
2600
2672
  }
2601
2673
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -2630,7 +2702,7 @@ ejs-calendar {
2630
2702
  @media screen and (orientation: landscape) {
2631
2703
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
2632
2704
  height: 15%;
2633
- font-size: 2vw;
2705
+ font-size: 18px;
2634
2706
  }
2635
2707
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-popup-close {
2636
2708
  padding: 1vh 1vw;
@@ -2657,7 +2729,7 @@ ejs-calendar {
2657
2729
  @media screen and (orientation: landscape) {
2658
2730
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
2659
2731
  margin: 0;
2660
- height: 38px;
2732
+ height: 28px;
2661
2733
  }
2662
2734
  }
2663
2735
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -2667,8 +2739,8 @@ ejs-calendar {
2667
2739
  }
2668
2740
  @media screen and (orientation: landscape) {
2669
2741
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
2670
- margin: 5px 0;
2671
- font-size: 20px;
2742
+ margin: 8px 0;
2743
+ font-size: 16px;
2672
2744
  }
2673
2745
  }
2674
2746
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -1,5 +1,5 @@
1
1
 
2
- @import 'ej2-base/styles/material3-dark-definition.scss';
2
+
3
3
  @import 'calendar/material3-dark.scss';
4
4
  @import 'timepicker/material3-dark.scss';
5
5
  @import 'datepicker/material3-dark.scss';