@syncfusion/ej2-calendars 31.2.18 → 32.1.20

package/styles/material3.scss

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

package/styles/tailwind-dark-lite.css

@@ -947,7 +947,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-date-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: #fff;
+  background: #374151;
   border-radius: 50%;
 }
 
@@ -1090,7 +1090,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 {
@@ -1107,7 +1107,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 {
@@ -1137,7 +1137,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 {
@@ -1157,7 +1157,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 {
@@ -1177,7 +1177,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 {
@@ -1185,13 +1185,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;
@@ -1364,7 +1364,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-range-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-range-icon:focus {
-  background: #4b5563;
+  background: #f3f4f6;
   border-radius: 50%;
 }
 
@@ -1844,14 +1844,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/tailwind-dark-lite.scss

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

package/styles/tailwind-dark.css

@@ -1638,7 +1638,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-date-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: #fff;
+  background: #374151;
   border-radius: 50%;
 }
 
@@ -1781,7 +1781,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 {
@@ -1798,7 +1798,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 {
@@ -1828,7 +1828,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 {
@@ -1848,7 +1848,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 {
@@ -1868,7 +1868,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 {
@@ -1876,13 +1876,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;
@@ -2093,7 +2093,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-range-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-range-icon:focus {
-  background: #4b5563;
+  background: #f3f4f6;
   border-radius: 50%;
 }
 
@@ -2573,14 +2573,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) {
@@ -3391,7 +3391,7 @@ ejs-calendar {
 }
 
 .e-bigger.e-small .e-daterangepicker .e-calendar {
-  max-width: 275px;
+  max-width: 246px;
 }
 
 .e-bigger.e-small .e-daterangepicker.e-popup,

package/styles/tailwind-dark.scss

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

package/styles/tailwind-lite.css

@@ -1090,7 +1090,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 {
@@ -1107,7 +1107,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 {
@@ -1137,7 +1137,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 {
@@ -1157,7 +1157,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 {
@@ -1177,7 +1177,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 {
@@ -1185,13 +1185,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;
@@ -1844,14 +1844,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/tailwind-lite.scss

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

package/styles/tailwind.css

@@ -1781,7 +1781,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 {
@@ -1798,7 +1798,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 {
@@ -1828,7 +1828,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 {
@@ -1848,7 +1848,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 {
@@ -1868,7 +1868,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 {
@@ -1876,13 +1876,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;
@@ -2573,14 +2573,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) {
@@ -3391,7 +3391,7 @@ ejs-calendar {
 }
 
 .e-bigger.e-small .e-daterangepicker .e-calendar {
-  max-width: 275px;
+  max-width: 246px;
 }
 
 .e-bigger.e-small .e-daterangepicker.e-popup,

package/styles/tailwind.scss

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