@syncfusion/ej2-calendars 26.2.11 → 27.1.48

package/styles/calendar/tailwind.scss

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

package/styles/datepicker/_bigger.scss

@@ -0,0 +1,82 @@
+@include export-module('datepicker-bigger') {
+  #{&}.e-datepicker.e-bigger,
+  .e-bigger #{&}.e-datepicker {
+    #{if(&, '&', '*')}.e-popup-wrapper {
+      @if $skin-name == 'tailwind' {
+        margin-top: $datepicker-popup-bigger-margin-top;
+      }
+    }
+  }
+
+  .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-bigger.e-small#{&}.e-datepicker {
+    #{if(&, '&', '*')}.e-popup-wrapper {
+      border: $datepicker-popup-border;
+      box-shadow: $datepicker-popup-box-shadow;
+    }
+
+    #{if(&, '&', '*')} .e-calendar {
+      @if $skin-name != 'Material3' {
+        background-color: $datepicker-popup-bg-color;
+      }
+      @if $skin-name == 'Material3' {
+        background: $datepicker-popup-bg-color;
+      }
+      border: $datepicker-calendar-border-style;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'Material3' {
+      font-size: $datepicker-bigger-icon-font-size;
+      margin: $datepicker-icon-bigger-margin;
+      min-height: $datepicker-bigger-icon-container-min-height;
+      min-width: $datepicker-bigger-icon-container-min-width;
+    }
+    @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
+      border-radius: $datepicker-bigger-icon-border-radius;
+    }
+    @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast-light' or $skin-name == 'highcontrast' {
+      font-size: $datepicker-bigger-icon-font-size;
+      margin: $datepicker-icon-bigger-margin;
+    }
+  }
+
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+    @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
+      min-width: $datepicker-bigger-small-icon-container-min-width;
+      min-height: $datepicker-bigger-small-icon-container-min-height;
+      border-radius: $datepicker-bigger-small-icon-border-radius;
+      margin: $datepicker-bigger-small-icon-margin;
+    }
+  }
+
+  .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 {
+    @if $skin-name == 'material-dark' or $skin-name == 'material' {
+      min-height: $zero-value;
+      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 {
+    @if $skin-name == 'material-dark' or $skin-name == 'material' {
+      min-height: $zero-value;
+      min-width: 20px;
+    }
+  }
+}

package/styles/datepicker/_bootstrap5.3-definition.scss

@@ -40,15 +40,16 @@ $modal-year-font-size: $text-sm !default;
 $modal-year-font-weight: $font-weight-medium !default;
 $modal-year-line-height: 32px !default;
 $modal-month-font-size: $text-xl !default;
-$modal-month-font-weight: $font-weight-medium !default;
+$modal-month-font-weight: 600 !default;
 $modal-month-line-height: 32px !default;
+$modal-year-font-color: $content-text-color !default;
 
 // modal dialog dimensions and styles
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
 $modal-portrait-header-padding: 2vh 6vw !default;
-$modal-portrait-month-header-padding: 2vh 2vw !default;
+$modal-portrait-month-header-padding: 1.8vh 2vw 1.3vh 1.8vh !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 6vh !default;
 $modal-month-header-title-line-height: inherit !default;
@@ -62,9 +63,9 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 22vw !default;
+$modal-portrait-header-title-margin: 0 !default;
 $modal-portrait-header-title-position: absolute !default;
-$modal-portrait-header-title-text: center !default;
+$modal-portrait-header-title-text: left !default;
 $modal-portrait-header-title-width: 50vw !default;
 $modal-portrait-cancel-icon-color: inherit !default;
 $modal-header-day-line-height: 6vw !default;
@@ -73,7 +74,7 @@ $modal-header-day-line-height: 6vw !default;
 $modal-portrait-today-float-style: right !default;
 $modal-today-text-color: inherit !default;
 $modal-portrait-footer-display-style: none !default;
-$modal-portrait-icon-float: none !default;
+$modal-portrait-icon-float: right !default;
 
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
@@ -93,7 +94,7 @@ $modal-landscape-calendar-content-height: 60vh !default;
 $modal-landscape-calendar-content-table-height: 65vh !default;
 $modal-landscape-calendar-content-big-height: 65vh !default;
 $modal-landscape-header-year-margin: 12vh 0 0 0 !default;
-$modal-landscape-prev-icon-margin: 80vw !default;
+$modal-landscape-prev-icon-margin: 0 !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;

package/styles/datepicker/_fluent2-definition.scss

@@ -105,8 +105,8 @@ $modal-tablet-table-header-height: 48px !default;
 
 $datepicker-mouse-icon-border-radius: 16px !default;
 $datepicker-bigger-icon-border-radius: 20px !default;
-$datepicker-bigger-icon-container-min-height: 36px !default;
-$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-container-min-height: 24px !default;
+$datepicker-bigger-icon-container-min-width: 24px !default;
 $datepicker-small-icon-container-min-width: 24px !default;
 $datepicker-small-icon-container-min-height: 24px !default;
 $datepicker-small-icon-border-radius: 14px !default;

package/styles/datepicker/_layout.scss

@@ -13,15 +13,6 @@
     }
   }
 
-  #{&}.e-datepicker.e-bigger,
-  .e-bigger #{&}.e-datepicker {
-    #{if(&, '&', '*')}.e-popup-wrapper {
-      @if $skin-name == 'tailwind' {
-        margin-top: $datepicker-popup-bigger-margin-top;
-      }
-    }
-  }
-
   #{&}.e-datepicker {
     #{if(&, '&', '*')} .e-calendar {
 
@@ -70,6 +61,9 @@
         font-weight: $modal-year-font-weight;
         line-height: $modal-year-line-height;
         margin: 0;
+        @if $skin-name == 'bootstrap5.3' {
+          color: $modal-year-font-color;
+        }
       }
     }
 
@@ -79,6 +73,9 @@
       font-weight: $modal-month-font-weight;
       line-height: $modal-month-line-height;
       margin: 0;
+      @if $skin-name == 'bootstrap5.3' {
+        color: $modal-year-font-color;
+      }
     }
   }
 }
@@ -118,12 +115,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: $modal-tablet-content-dimension;
@@ -176,7 +167,7 @@
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           background-color: transparent;
         }
         @if $skin-name == 'fluent2' {
@@ -213,12 +204,14 @@
         line-height: $modal-month-header-line-height;
 
         #{if(&, '&', '*')} .e-title {
+          @if $skin-name != 'bootstrap5.3' {
+            position: $modal-portrait-header-title-position;
+            line-height: $modal-month-header-title-line-height;
+          }
           margin-left: $modal-portrait-header-title-margin;
-          position: $modal-portrait-header-title-position;
           text-align: $modal-portrait-header-title-text;
           vertical-align: $modal-portrait-month-header-vertical-align;
           width: $modal-portrait-header-title-width;
-          line-height: $modal-month-header-title-line-height;
           @media (min-device-width: 768px) {
             font-size: $modal-tablet-font-size;
           }
@@ -230,11 +223,23 @@
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
           vertical-align: inherit;
-          height: 35px;
-          width: 35px;
+          @if $skin-name == 'bootstrap5.3' {
+            height: 46px;
+            width: 46px;
+          }
+          @else {
+            height: 35px;
+            width: 35px;
+          }
           @media (min-device-width: 768px) {
-            height: 55px;
-            width: 55px;
+            @if $skin-name == 'bootstrap5.3' {
+              height: 70px;
+              width: 70px;
+            }
+            @else {
+              height: 55px;
+              width: 55px;
+            }
           }
 
           #{if(&, '&', '*')} .e-icons {
@@ -248,11 +253,23 @@
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
           vertical-align: inherit;
-          height: 35px;
-          width:35px;
+          @if $skin-name == 'bootstrap5.3' {
+            height: 46px;
+            width: 46px;
+          }
+          @else {
+            height: 35px;
+            width: 35px;
+          }
           @media (min-device-width: 768px) {
-            height: 55px;
-            width: 55px;
+            @if $skin-name == 'bootstrap5.3' {
+              height: 70px;
+              width: 70px;
+            }
+            @else {
+              height: 55px;
+              width: 55px;
+            }
           }
 
           #{if(&, '&', '*')} .e-icons {

package/styles/datepicker/_theme.scss

@@ -1,10 +1,5 @@
 @include export-module('datepicker-theme') {
   #{&}.e-datepicker,
-  .e-bigger.e-small #{&}.e-datepicker,
-  .e-bigger #{&}.e-datepicker,
-  .e-small #{&}.e-datepicker,
-  .e-bigger.e-small#{&}.e-datepicker,
-  .e-bigger#{&}.e-datepicker,
   .e-small#{&}.e-datepicker {
     #{if(&, '&', '*')}.e-popup-wrapper {
       border: $datepicker-popup-border;
@@ -31,12 +26,12 @@
   .e-date-wrapper {
     #{if(&, '&', '*')} span.e-input-group-icon {
       #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
-        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark') {
+        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark') {
           color: $datepicker-icon-color;
         }
       }
       #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           background: $datepicker-icon-active-bg-color;
           border-color: $datepicker-active-border-color;
         }

package/styles/datepicker/bootstrap-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: "\e960";
-  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: #959595;
-  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";
@@ -147,12 +122,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;
@@ -226,12 +195,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: 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 {
@@ -421,22 +390,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 #414141;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
           box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
 }
 .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: #2a2a2a;
   border: none;
@@ -444,4 +403,35 @@
 
 *.e-input-group.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
   border: none;
+}
+
+.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 #414141;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+}
+.e-bigger.e-datepicker .e-calendar,
+.e-bigger.e-small.e-datepicker .e-calendar {
+  background-color: #2a2a2a;
+  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/bootstrap-dark.scss

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

package/styles/datepicker/bootstrap.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: "\e960";
-  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: #e6e6e6;
-  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";
@@ -148,12 +123,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;
@@ -227,12 +196,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: 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 {
@@ -422,22 +391,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 #ccc;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
           box-shadow: 0 6px 12px 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;
@@ -445,4 +404,35 @@
 
 *.e-input-group.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
   border: none;
+}
+
+.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 #ccc;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px 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;
+}
+
+.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/bootstrap.scss

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

package/styles/datepicker/bootstrap4.css

@@ -20,39 +20,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: 16px;
-  margin: 0;
-  min-height: 36px;
-  min-width: 34px;
-}
-.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: "\e7be";
-  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: #212529;
-  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: 12px;
 }
 
-.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: 15px;
-}
-
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
   content: "\e745";
   font-family: "e-icons";
@@ -152,12 +125,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;
@@ -230,12 +197,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: 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 {
@@ -425,22 +392,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 rgba(0, 0, 0, 0.15);
   -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: #fff;
   border: none;
@@ -457,4 +414,37 @@
   background: #545b62;
   border-color: #545b62;
   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 rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.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: 16px;
+  margin: 0;
+  min-height: 36px;
+  min-width: 34px;
+}
+
+.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: 15px;
 }