@syncfusion/ej2-calendars 26.2.12 → 27.1.50

package/styles/datepicker/material.css

@@ -54,52 +54,18 @@
   border-radius: 50%;
 }
 
-.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 18px;
-  margin: 5px 0 6px 0;
-  min-height: 26px;
-  min-width: 26px;
-}
-.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon::before {
-  content: "\e901";
-  font-family: "e-icons";
-}
-.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: #eee;
-  border-radius: 50%;
-}
-
 .e-small .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
 *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
   font-size: 14px;
 }
 
-.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 18px;
-}
-
 .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
 .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
   min-height: 0;
   min-width: 20px;
 }
 
-.e-bigger .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
-.e-date-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-date-icon,
-.e-bigger .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
-  min-height: 0;
-  min-width: 24px;
-}
-
 .e-small .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
 .e-date-wrapper.e-control-wrapper.e-small.e-outline .e-input-group-icon.e-date-icon,
 .e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
@@ -107,14 +73,6 @@
   min-width: 18px;
 }
 
-.e-bigger.e-small .e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
-.e-bigger.e-small.e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
-.e-date-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-date-icon,
-.e-bigger.e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
-  min-height: 0;
-  min-width: 20px;
-}
-
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e932";
   font-family: "e-icons";
@@ -213,12 +171,6 @@
   min-height: 33px;
 }
 
-.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
-.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
-  background-size: 250px 40px;
-  min-height: 40px;
-}
-
 @media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
     line-height: 64px;
@@ -291,12 +243,12 @@
   line-height: 5vh;
 }
 .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 {
-  margin-left: 5vw;
   position: inherit;
+  line-height: inherit;
+  margin-left: 5vw;
   text-align: left;
   vertical-align: middle;
   width: 60vw;
-  line-height: inherit;
 }
 @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 {
@@ -486,22 +438,12 @@
 }
 /* stylelint-enable */
 .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger .e-datepicker.e-popup-wrapper,
-.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small.e-datepicker.e-popup-wrapper,
-.e-bigger.e-datepicker.e-popup-wrapper,
 .e-small.e-datepicker.e-popup-wrapper {
   border: none;
   -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
           box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .e-datepicker .e-calendar,
-.e-bigger.e-small .e-datepicker .e-calendar,
-.e-bigger .e-datepicker .e-calendar,
-.e-small .e-datepicker .e-calendar,
-.e-bigger.e-small.e-datepicker .e-calendar,
-.e-bigger.e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
   background-color: #fff;
   border: none;
@@ -516,4 +458,52 @@
 }
 .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
   color: #e3165b;
+}
+
+.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
+.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
+  background-size: 250px 40px;
+  min-height: 40px;
+}
+
+.e-bigger.e-datepicker.e-popup-wrapper,
+.e-bigger.e-small.e-datepicker.e-popup-wrapper {
+  border: none;
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background-color: #fff;
+  border: none;
+}
+
+.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 18px;
+  margin: 5px 0 6px 0;
+  min-height: 26px;
+  min-width: 26px;
+}
+
+.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 18px;
+}
+
+.e-bigger .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+.e-date-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-date-icon,
+.e-bigger .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+  min-height: 0;
+  min-width: 24px;
+}
+
+.e-bigger.e-small .e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
+.e-bigger.e-small.e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
+.e-date-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-date-icon,
+.e-bigger.e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+  min-height: 0;
+  min-width: 20px;
 }

package/styles/datepicker/material.scss

@@ -5,3 +5,4 @@
 @import 'material-definition.scss';
 @import 'icons/material.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/datepicker/material3-dark.css

@@ -57,28 +57,6 @@
   border-radius: 50%;
 }
 
-.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
-  margin: 0;
-  min-height: 38px;
-  min-width: 38px;
-  border-radius: 20px;
-}
-.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon::before {
-  content: "\e778";
-  font-family: "e-icons";
-}
-.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: rgba(var(--color-sf-on-surface), 0.08);
-  border-radius: 50%;
-}
-
 .e-small .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
 *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
@@ -89,16 +67,6 @@
   margin: 0;
 }
 
-.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
-  min-width: 34px;
-  min-height: 34px;
-  border-radius: 20px;
-  margin: 0;
-}
-
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e7e7";
   font-family: "e-icons";
@@ -199,12 +167,6 @@
   min-height: 33px;
 }
 
-.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
-.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
-  background-size: 250px 40px;
-  min-height: 40px;
-}
-
 @media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
     line-height: 64px;
@@ -277,12 +239,12 @@
   line-height: 5vh;
 }
 .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 {
-  margin-left: 5vw;
   position: inherit;
+  line-height: inherit;
+  margin-left: 5vw;
   text-align: left;
   vertical-align: middle;
   width: 60vw;
-  line-height: inherit;
 }
 @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 {
@@ -472,22 +434,12 @@
 }
 /* stylelint-enable */
 .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger .e-datepicker.e-popup-wrapper,
-.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small.e-datepicker.e-popup-wrapper,
-.e-bigger.e-datepicker.e-popup-wrapper,
 .e-small.e-datepicker.e-popup-wrapper {
   border: none;
   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 .e-datepicker .e-calendar,
-.e-bigger.e-small .e-datepicker .e-calendar,
-.e-bigger .e-datepicker .e-calendar,
-.e-small .e-datepicker .e-calendar,
-.e-bigger.e-small.e-datepicker .e-calendar,
-.e-bigger.e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
@@ -505,4 +457,43 @@
   color: rgba(var(--color-sf-on-surface-variant));
   border: 1px;
   background: rgba(var(--color-sf-on-surface), 0.08);
+}
+
+.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
+.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
+  background-size: 250px 40px;
+  min-height: 40px;
+}
+
+.e-bigger.e-datepicker.e-popup-wrapper,
+.e-bigger.e-small.e-datepicker.e-popup-wrapper {
+  border: none;
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
+  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
+  border: none;
+}
+
+.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 20px;
+  margin: 0;
+  min-height: 38px;
+  min-width: 38px;
+  border-radius: 20px;
+}
+
+.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 20px;
+  min-width: 34px;
+  min-height: 34px;
+  border-radius: 20px;
+  margin: 0;
 }

package/styles/datepicker/material3-dark.scss

@@ -6,3 +6,4 @@
 @import 'material3-dark-definition.scss';
 @import 'icons/material3-dark.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/datepicker/material3.css

@@ -59,28 +59,6 @@
   border-radius: 50%;
 }
 
-.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
-  margin: 0;
-  min-height: 38px;
-  min-width: 38px;
-  border-radius: 20px;
-}
-.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon::before {
-  content: "\e778";
-  font-family: "e-icons";
-}
-.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: rgba(var(--color-sf-on-surface), 0.08);
-  border-radius: 50%;
-}
-
 .e-small .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
 *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
@@ -91,16 +69,6 @@
   margin: 0;
 }
 
-.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
-  min-width: 34px;
-  min-height: 34px;
-  border-radius: 20px;
-  margin: 0;
-}
-
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e7e7";
   font-family: "e-icons";
@@ -201,12 +169,6 @@
   min-height: 33px;
 }
 
-.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
-.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
-  background-size: 250px 40px;
-  min-height: 40px;
-}
-
 @media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
     line-height: 64px;
@@ -279,12 +241,12 @@
   line-height: 5vh;
 }
 .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 {
-  margin-left: 5vw;
   position: inherit;
+  line-height: inherit;
+  margin-left: 5vw;
   text-align: left;
   vertical-align: middle;
   width: 60vw;
-  line-height: inherit;
 }
 @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 {
@@ -474,22 +436,12 @@
 }
 /* stylelint-enable */
 .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger .e-datepicker.e-popup-wrapper,
-.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small.e-datepicker.e-popup-wrapper,
-.e-bigger.e-datepicker.e-popup-wrapper,
 .e-small.e-datepicker.e-popup-wrapper {
   border: none;
   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 .e-datepicker .e-calendar,
-.e-bigger.e-small .e-datepicker .e-calendar,
-.e-bigger .e-datepicker .e-calendar,
-.e-small .e-datepicker .e-calendar,
-.e-bigger.e-small.e-datepicker .e-calendar,
-.e-bigger.e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
@@ -507,4 +459,43 @@
   color: rgba(var(--color-sf-on-surface-variant));
   border: 1px;
   background: rgba(var(--color-sf-on-surface), 0.08);
+}
+
+.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
+.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
+  background-size: 250px 40px;
+  min-height: 40px;
+}
+
+.e-bigger.e-datepicker.e-popup-wrapper,
+.e-bigger.e-small.e-datepicker.e-popup-wrapper {
+  border: none;
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
+  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
+  border: none;
+}
+
+.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 20px;
+  margin: 0;
+  min-height: 38px;
+  min-width: 38px;
+  border-radius: 20px;
+}
+
+.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 20px;
+  min-width: 34px;
+  min-height: 34px;
+  border-radius: 20px;
+  margin: 0;
 }

package/styles/datepicker/material3.scss

@@ -6,3 +6,4 @@
 @import 'material3-definition.scss';
 @import 'icons/material3.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/datepicker/tailwind-dark.css

@@ -21,39 +21,12 @@
   border-radius: 50%;
 }
 
-.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 18px;
-  margin: 0;
-  min-height: 18px;
-  min-width: 20px;
-}
-.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon::before,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon::before {
-  content: "\e75e";
-  font-family: "e-icons";
-}
-.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon:focus,
-*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: #fff;
-  border-radius: 50%;
-}
-
 .e-small .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
 *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
   font-size: 16px;
 }
 
-.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
-*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
-}
-
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e7e7";
   font-family: "e-icons";
@@ -72,11 +45,6 @@
   display: flex;
 }
 
-.e-datepicker.e-bigger.e-popup-wrapper,
-.e-bigger .e-datepicker.e-popup-wrapper {
-  margin-top: 0;
-}
-
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
   display: none;
 }
@@ -158,12 +126,6 @@
   min-height: 33px;
 }
 
-.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
-.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
-  background-size: 250px 40px;
-  min-height: 40px;
-}
-
 @media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
     line-height: 64px;
@@ -236,12 +198,12 @@
   line-height: 5vh;
 }
 .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 {
-  margin-left: 21vw;
   position: absolute;
+  line-height: inherit;
+  margin-left: 21vw;
   text-align: center;
   vertical-align: middle;
   width: 50vw;
-  line-height: inherit;
 }
 @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 {
@@ -431,22 +393,12 @@
 }
 /* stylelint-enable */
 .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger .e-datepicker.e-popup-wrapper,
-.e-small .e-datepicker.e-popup-wrapper,
-.e-bigger.e-small.e-datepicker.e-popup-wrapper,
-.e-bigger.e-datepicker.e-popup-wrapper,
 .e-small.e-datepicker.e-popup-wrapper {
   border: 1px solid #4b5563;
   -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 .e-datepicker .e-calendar,
-.e-bigger.e-small .e-datepicker .e-calendar,
-.e-bigger .e-datepicker .e-calendar,
-.e-small .e-datepicker .e-calendar,
-.e-bigger.e-small.e-datepicker .e-calendar,
-.e-bigger.e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
   background-color: #374151;
   border: none;
@@ -461,4 +413,42 @@
 }
 .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
   color: #d1d5db;
+}
+
+.e-datepicker.e-bigger.e-popup-wrapper,
+.e-bigger .e-datepicker.e-popup-wrapper {
+  margin-top: 0;
+}
+
+.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
+.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
+  background-size: 250px 40px;
+  min-height: 40px;
+}
+
+.e-bigger.e-datepicker.e-popup-wrapper,
+.e-bigger.e-small.e-datepicker.e-popup-wrapper {
+  border: 1px solid #4b5563;
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background-color: #374151;
+  border: none;
+}
+
+.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+*.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 18px;
+  margin: 0;
+  min-height: 18px;
+  min-width: 20px;
+}
+
+.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+*.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+  font-size: 20px;
 }

package/styles/datepicker/tailwind-dark.scss

@@ -5,3 +5,4 @@
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';
 @import 'all.scss';
+@import 'bigger.scss';