@syncfusion/ej2-calendars 26.2.11 → 27.1.48

package/styles/datepicker/bootstrap5.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: 36px;
-}
-.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";
@@ -153,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;
@@ -232,12 +199,12 @@
   line-height: 6vh;
 }
 .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: 22vw;
   position: absolute;
+  line-height: inherit;
+  margin-left: 22vw;
   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 {
@@ -427,22 +394,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 #dee2e6;
   -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
           box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 .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;
@@ -456,4 +413,37 @@
   background: #565e64;
   border-color: #ced4da;
   color: #fff;
+}
+
+.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 #dee2e6;
+  -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
+}
+.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: 0;
+  min-height: 18px;
+  min-width: 36px;
+}
+
+.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/bootstrap5.scss

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

package/styles/datepicker/fabric-dark.css

@@ -17,37 +17,12 @@
   border-radius: 0;
 }
 
-.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;
-}
-.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: "\e93a";
-  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: #414040;
-  border-radius: 0;
-}
-
 .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-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e7fc";
   font-family: "e-icons";
@@ -141,12 +116,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;
@@ -219,12 +188,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 {
@@ -414,22 +383,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 #414040;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .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: #282727;
   border: none;
@@ -437,4 +396,35 @@
 
 *.e-input-group.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
   border: 1px solid #0074cc;
+}
+
+.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 #414040;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background-color: #282727;
+  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;
+}
+
+.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;
 }

package/styles/datepicker/fabric-dark.scss

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

package/styles/datepicker/fabric.css

@@ -18,37 +18,12 @@
   border-radius: 0;
 }
 
-.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;
-}
-.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: "\e93a";
-  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: #eaeaea;
-  border-radius: 0;
-}
-
 .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-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e7fc";
   font-family: "e-icons";
@@ -142,12 +117,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;
@@ -220,12 +189,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 {
@@ -415,22 +384,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 #eaeaea;
   -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
           box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
 }
 .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;
@@ -438,4 +397,35 @@
 
 *.e-input-group.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
   border: 1px solid #0078d6;
+}
+
+.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 #eaeaea;
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+.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: 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: 18px;
 }

package/styles/datepicker/fabric.scss

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

package/styles/datepicker/fluent-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: 36px;
-}
-.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: #f3f2f1;
-  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";
@@ -153,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;
@@ -231,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: 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 {
@@ -426,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: 0 solid #292827;
   -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
           box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
 }
 .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: #252423;
   border: none;
@@ -456,4 +413,37 @@
 }
 .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
   color: #a19f9d;
+}
+
+.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: 0 solid #292827;
+  -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+          box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background-color: #252423;
+  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: 36px;
+}
+
+.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/fluent-dark.scss

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

package/styles/datepicker/fluent.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: 36px;
-}
-.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: #323130;
-  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";
@@ -153,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;
@@ -231,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: 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 {
@@ -426,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: 0 solid #edebe9;
   -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
           box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
 }
 .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;
@@ -456,4 +413,37 @@
 }
 .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
   color: #605e5c;
+}
+
+.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: 0 solid #edebe9;
+  -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+          box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+}
+.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: 0;
+  min-height: 18px;
+  min-width: 36px;
+}
+
+.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/fluent.scss

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