@syncfusion/ej2-calendars 31.2.18 → 32.1.20

package/styles/fluent2.scss

@@ -1,24 +1,24 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'ej2-buttons/styles/button/fluent2-definition.scss';
-@import 'calendar/fluent2-definition.scss';
-@import 'calendar/icons/fluent2.scss';
-@import 'calendar/all.scss';
-@import 'calendar/bigger.scss';
-@import 'ej2-inputs/styles/input/fluent2-definition.scss';
-@import 'ej2-popups/styles/popup/fluent2-definition.scss';
-@import 'timepicker/fluent2-definition.scss';
-@import 'timepicker/icons/fluent2.scss';
-@import 'timepicker/all.scss';
-@import 'timepicker/bigger.scss';
-@import 'datepicker/fluent2-definition.scss';
-@import 'datepicker/icons/fluent2.scss';
-@import 'datepicker/all.scss';
-@import 'datepicker/bigger.scss';
-@import 'daterangepicker/fluent2-definition.scss';
-@import 'daterangepicker/icons/fluent2.scss';
-@import 'daterangepicker/all.scss';
-@import 'daterangepicker/bigger.scss';
-@import 'datetimepicker/fluent2-definition.scss';
-@import 'datetimepicker/icons/fluent2.scss';
-@import 'datetimepicker/all.scss';
-@import 'datetimepicker/bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/button/fluent2-definition' as *;
+@use 'calendar/fluent2-definition' as *;
+@use 'calendar/icons/fluent2' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
+@use 'ej2-inputs/styles/input/fluent2-definition' as *;
+@use 'ej2-popups/styles/popup/fluent2-definition' as *;
+@use 'timepicker/fluent2-definition' as *;
+@use 'timepicker/icons/fluent2' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
+@use 'datepicker/fluent2-definition' as *;
+@use 'datepicker/icons/fluent2' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
+@use 'daterangepicker/fluent2-definition' as *;
+@use 'daterangepicker/icons/fluent2' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
+@use 'datetimepicker/fluent2-definition' as *;
+@use 'datetimepicker/icons/fluent2' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;

package/styles/highcontrast-light-lite.css

@@ -1035,7 +1035,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1052,7 +1052,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1082,7 +1082,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1102,7 +1102,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1122,7 +1122,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1130,13 +1130,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -1780,14 +1780,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/highcontrast-light-lite.scss

@@ -1,19 +1,19 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
-@import 'calendar/highcontrast-light-definition.scss';
-@import 'calendar/icons/highcontrast-light.scss';
-@import 'calendar/all.scss';
-@import 'ej2-inputs/styles/input/highcontrast-light-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
-@import 'timepicker/highcontrast-light-definition.scss';
-@import 'timepicker/icons/highcontrast-light.scss';
-@import 'timepicker/all.scss';
-@import 'datepicker/highcontrast-light-definition.scss';
-@import 'datepicker/icons/highcontrast-light.scss';
-@import 'datepicker/all.scss';
-@import 'daterangepicker/highcontrast-light-definition.scss';
-@import 'daterangepicker/icons/highcontrast-light.scss';
-@import 'daterangepicker/all.scss';
-@import 'datetimepicker/highcontrast-light-definition.scss';
-@import 'datetimepicker/icons/highcontrast-light.scss';
-@import 'datetimepicker/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
+@use 'calendar/highcontrast-light-definition' as *;
+@use 'calendar/icons/highcontrast-light' as *;
+@use 'calendar/all' as *;
+@use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
+@use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
+@use 'timepicker/highcontrast-light-definition' as *;
+@use 'timepicker/icons/highcontrast-light' as *;
+@use 'timepicker/all' as *;
+@use 'datepicker/highcontrast-light-definition' as *;
+@use 'datepicker/icons/highcontrast-light' as *;
+@use 'datepicker/all' as *;
+@use 'daterangepicker/highcontrast-light-definition' as *;
+@use 'daterangepicker/icons/highcontrast-light' as *;
+@use 'daterangepicker/all' as *;
+@use 'datetimepicker/highcontrast-light-definition' as *;
+@use 'datetimepicker/icons/highcontrast-light' as *;
+@use 'datetimepicker/all' as *;

package/styles/highcontrast-light.css

@@ -1664,7 +1664,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1681,7 +1681,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1711,7 +1711,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1731,7 +1731,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1751,7 +1751,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1759,13 +1759,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -2440,14 +2440,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/highcontrast-light.scss

@@ -1,24 +1,24 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
-@import 'calendar/highcontrast-light-definition.scss';
-@import 'calendar/icons/highcontrast-light.scss';
-@import 'calendar/all.scss';
-@import 'calendar/bigger.scss';
-@import 'ej2-inputs/styles/input/highcontrast-light-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
-@import 'timepicker/highcontrast-light-definition.scss';
-@import 'timepicker/icons/highcontrast-light.scss';
-@import 'timepicker/all.scss';
-@import 'timepicker/bigger.scss';
-@import 'datepicker/highcontrast-light-definition.scss';
-@import 'datepicker/icons/highcontrast-light.scss';
-@import 'datepicker/all.scss';
-@import 'datepicker/bigger.scss';
-@import 'daterangepicker/highcontrast-light-definition.scss';
-@import 'daterangepicker/icons/highcontrast-light.scss';
-@import 'daterangepicker/all.scss';
-@import 'daterangepicker/bigger.scss';
-@import 'datetimepicker/highcontrast-light-definition.scss';
-@import 'datetimepicker/icons/highcontrast-light.scss';
-@import 'datetimepicker/all.scss';
-@import 'datetimepicker/bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
+@use 'calendar/highcontrast-light-definition' as *;
+@use 'calendar/icons/highcontrast-light' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
+@use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
+@use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
+@use 'timepicker/highcontrast-light-definition' as *;
+@use 'timepicker/icons/highcontrast-light' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
+@use 'datepicker/highcontrast-light-definition' as *;
+@use 'datepicker/icons/highcontrast-light' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
+@use 'daterangepicker/highcontrast-light-definition' as *;
+@use 'daterangepicker/icons/highcontrast-light' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
+@use 'datetimepicker/highcontrast-light-definition' as *;
+@use 'datetimepicker/icons/highcontrast-light' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;

package/styles/highcontrast-lite.css

@@ -1044,7 +1044,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1061,7 +1061,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1091,7 +1091,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1111,7 +1111,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1131,7 +1131,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1139,13 +1139,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -1789,14 +1789,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/highcontrast-lite.scss

@@ -1,19 +1,19 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
-@import 'calendar/highcontrast-definition.scss';
-@import 'calendar/icons/highcontrast.scss';
-@import 'calendar/all.scss';
-@import 'ej2-inputs/styles/input/highcontrast-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
-@import 'timepicker/highcontrast-definition.scss';
-@import 'timepicker/icons/highcontrast.scss';
-@import 'timepicker/all.scss';
-@import 'datepicker/highcontrast-definition.scss';
-@import 'datepicker/icons/highcontrast.scss';
-@import 'datepicker/all.scss';
-@import 'daterangepicker/highcontrast-definition.scss';
-@import 'daterangepicker/icons/highcontrast.scss';
-@import 'daterangepicker/all.scss';
-@import 'datetimepicker/highcontrast-definition.scss';
-@import 'datetimepicker/icons/highcontrast.scss';
-@import 'datetimepicker/all.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/button/highcontrast-definition' as *;
+@use 'calendar/highcontrast-definition' as *;
+@use 'calendar/icons/highcontrast' as *;
+@use 'calendar/all' as *;
+@use 'ej2-inputs/styles/input/highcontrast-definition' as *;
+@use 'ej2-popups/styles/popup/highcontrast-definition' as *;
+@use 'timepicker/highcontrast-definition' as *;
+@use 'timepicker/icons/highcontrast' as *;
+@use 'timepicker/all' as *;
+@use 'datepicker/highcontrast-definition' as *;
+@use 'datepicker/icons/highcontrast' as *;
+@use 'datepicker/all' as *;
+@use 'daterangepicker/highcontrast-definition' as *;
+@use 'daterangepicker/icons/highcontrast' as *;
+@use 'daterangepicker/all' as *;
+@use 'datetimepicker/highcontrast-definition' as *;
+@use 'datetimepicker/icons/highcontrast' as *;
+@use 'datetimepicker/all' as *;

package/styles/highcontrast.css

@@ -1681,7 +1681,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1698,7 +1698,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1728,7 +1728,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1748,7 +1748,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1768,7 +1768,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1776,13 +1776,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -2457,14 +2457,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/highcontrast.scss

@@ -1,24 +1,24 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
-@import 'calendar/highcontrast-definition.scss';
-@import 'calendar/icons/highcontrast.scss';
-@import 'calendar/all.scss';
-@import 'calendar/bigger.scss';
-@import 'ej2-inputs/styles/input/highcontrast-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
-@import 'timepicker/highcontrast-definition.scss';
-@import 'timepicker/icons/highcontrast.scss';
-@import 'timepicker/all.scss';
-@import 'timepicker/bigger.scss';
-@import 'datepicker/highcontrast-definition.scss';
-@import 'datepicker/icons/highcontrast.scss';
-@import 'datepicker/all.scss';
-@import 'datepicker/bigger.scss';
-@import 'daterangepicker/highcontrast-definition.scss';
-@import 'daterangepicker/icons/highcontrast.scss';
-@import 'daterangepicker/all.scss';
-@import 'daterangepicker/bigger.scss';
-@import 'datetimepicker/highcontrast-definition.scss';
-@import 'datetimepicker/icons/highcontrast.scss';
-@import 'datetimepicker/all.scss';
-@import 'datetimepicker/bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/button/highcontrast-definition' as *;
+@use 'calendar/highcontrast-definition' as *;
+@use 'calendar/icons/highcontrast' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
+@use 'ej2-inputs/styles/input/highcontrast-definition' as *;
+@use 'ej2-popups/styles/popup/highcontrast-definition' as *;
+@use 'timepicker/highcontrast-definition' as *;
+@use 'timepicker/icons/highcontrast' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
+@use 'datepicker/highcontrast-definition' as *;
+@use 'datepicker/icons/highcontrast' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
+@use 'daterangepicker/highcontrast-definition' as *;
+@use 'daterangepicker/icons/highcontrast' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
+@use 'datetimepicker/highcontrast-definition' as *;
+@use 'datetimepicker/icons/highcontrast' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;

package/styles/material-dark-lite.css

@@ -1086,7 +1086,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1103,7 +1103,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1133,7 +1133,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1153,7 +1153,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .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 {
@@ -1173,7 +1173,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .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 {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1181,13 +1181,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -1846,14 +1846,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {