@syncfusion/ej2-calendars 21.2.9 → 21.2.10-11964

package/styles/datetimepicker/_material3-definition.scss

@@ -0,0 +1,61 @@
+$datetime-default-text-indent: 16px !default;
+$datetime-list-bigger-line-height: 48px !default;
+$datetime-list-normal-line-height: 36px !default;
+$datetime-list-normal-font-size: 13px !default;
+$datetime-list-bigger-font-size: 14px !default;
+$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
+$datetime-list-bigger-text-indent: 16px !default;
+$datetime-popup-border-radius: 4px !default;
+$datetime-list-font-weight: normal !default;
+$datetime-popup-shadow: $shadow-md !default;
+$datetime-list-default-font-color: rgba($flyout-text-color) !default;
+$datetime-list-border-color: none !default;
+$datetime-list-bg-color: $flyout-bg-color !default;
+$datetime-list-active-bg-color: rgba($content-bg-color-selected) !default;
+$datetime-list-active-font-color: rgba($flyout-text-color-selected) !default;
+$datetime-list-active-icon-color: rgba($content-text-color) !default;
+$datetime-list-hover-bg-color: $flyout-bg-color-hover !default;
+$datetime-list-hover-font-color: rgba($flyout-text-color-hover) !default;
+$datetime-list-popup-icon-active-color: rgba($content-text-color) !default;
+$datetime-list-active-hover-bg-color: rgba($primary) !default;
+$datetime-list-active-hover-font-color: rgba($primary-text-color) !default;
+$datetime-list-normal-padding: 8px !default;
+$datetime-list-bigger-padding: 8px !default;
+$datetime-time-font-icon: '\e20c' !default;
+$datetime-icon-normal-font-size: $font-icon-16 !default;
+$datetime-icon-bigger-font-size: $font-icon-20 !default;
+$datetime-date-icon-margin: 0 !default;
+$datetime-time-icon-margin: 0 !default;
+$datetime-time-bigger-icon-margin: 0 !default;
+$datetime-time-rtl-icon-margin: 0 !default;
+$datetime-time-rtl-bigger-icon-margin: 0 !default;
+$datetime-normal-min-height: 30px !default;
+$datetime-normal-min-width: 30px !default;
+$datetime-normal-border-radius: 16px !default;
+$datetime-bigger-min-height: 38px !default;
+$datetime-bigger-min-width: 38px !default;
+$datetime-bigger-icon-border-radius: 20px !default;
+$datetime-time-icon-border: 0 !default;
+$datetime-time-icon-border-style: none !default;
+$datetime-list-hover-border-color: none !default;
+$datetime-list-default-border-style: none !default;
+$datetime-default-overlay: $content-bg-color-alt1 !default;
+$datetime-list-small-line-height: 26px !default;
+$datetime-list-small-text-indent: 12px !default;
+$datetime-list-small-font-size: 12px !default;
+$datetime-icon-small-font-size: $font-icon-16 !default;
+$datetime-small-min-height: 22px !default;
+$datetime-small-min-width: 22px !default;
+$datetime-small-icon-border-radius: 14px !default;
+$datetime-time-small-icon-margin: 0 !default;
+$datetime-list-bigger-small-line-height: 40px !default;
+$datetime-list-bigger-small-text-indent: 16px !default;
+$datetime-list-bigger-small-font-size: 13px !default;
+$datetime-icon-bigger-small-font-size: $font-icon-20 !default;
+$datetime-bigger-small-min-height: 34px !default;
+$datetime-bigger-small-min-width: 34px !default;
+$datetime-bigger-small-icon-border-radius: 20px !default;
+$datetime-time-bigger-small-icon-margin: 0 !default;
+$modal-datetime-position: fixed !default;
+$modal-datetime-wrapper-position: relative !default;
+$modal-datetime-wrapper-width: 100% !default;

package/styles/datetimepicker/_tailwind-definition.scss

@@ -1,60 +1,65 @@
-// size variables
-$datetime-default-text-indent: 12px !default;
-$datetime-list-bigger-line-height: 36px !default;
-$datetime-list-normal-line-height: 30px !default;
-$datetime-list-normal-font-size: $text-sm !default;
-$datetime-list-bigger-font-size: $text-base !default;
-$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
-$datetime-list-bigger-text-indent: 16px !default;
-$datetime-popup-border-radius: 6px !default;
-$datetime-list-font-weight: $font-weight-normal !default;
-$datetime-list-normal-padding: 8px !default;
-$datetime-list-bigger-padding: 8px !default;
-$datetime-time-font-icon: '\e20c' !default;
-$datetime-icon-normal-font-size: $text-base !default;
-$datetime-icon-bigger-font-size: $text-lg !default;
-$datetime-date-icon-margin: 0 !default;
-$datetime-time-icon-margin: 0 !default;
-$datetime-time-bigger-icon-margin: 0 !default;
-$datetime-time-rtl-icon-margin: 0 !default;
-$datetime-time-rtl-bigger-icon-margin: 0 !default;
-$datetime-normal-min-height: 24px !default;
-$datetime-normal-min-width: 24px !default;
-$datetime-bigger-min-height: 26px !default;
-$datetime-bigger-min-width: 26px !default;
-$datetime-time-icon-border: 0 !default;
-$datetime-time-icon-border-style: none !default;
-$datetime-list-default-border-style: none !default;
-
-//mouse small
-$datetime-list-small-line-height: 24px !default;
-$datetime-list-small-text-indent: 12px !default;
-$datetime-list-small-font-size: $text-xs !default;
-
-// mouse small icon
-$datetime-icon-small-font-size: $font-icon-14 !default;
-$datetime-small-min-width: 16px !default;
-
-//touch small
-$datetime-list-bigger-small-line-height: 36px !default;
-$datetime-list-bigger-small-text-indent: 12px !default;
-$datetime-list-bigger-small-font-size: $text-sm !default;
-
-// touch small icon
-$datetime-icon-bigger-small-font-size: $text-base !default;
-
-// color variables
-$datetime-popup-shadow: $shadow-lg !default;
-$datetime-list-default-font-color: $content-text-color !default;
-$datetime-list-border-color: 1px solid $border-light !default;
-$datetime-list-bg-color: $content-bg-color !default;
-$datetime-list-active-bg-color: $content-bg-color-pressed !default;
-$datetime-list-active-font-color: $content-text-color-pressed !default;
-$datetime-list-active-icon-color: $content-text-color-pressed !default;
-$datetime-list-hover-bg-color: $content-bg-color-hover !default;
-$datetime-list-hover-font-color: $content-text-color-hover !default;
-$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
-$datetime-list-active-hover-bg-color: $content-bg-color-hover !default;
-$datetime-list-active-hover-font-color: $content-text-color-hover !default;
-$datetime-list-hover-border-color: none !default;
-$datetime-default-overlay: $content-bg-color-alt2 !default;
+// size variables
+$datetime-default-text-indent: 12px !default;
+$datetime-list-bigger-line-height: 36px !default;
+$datetime-list-normal-line-height: 30px !default;
+$datetime-list-normal-font-size: $text-sm !default;
+$datetime-list-bigger-font-size: $text-base !default;
+$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
+$datetime-list-bigger-text-indent: 16px !default;
+$datetime-popup-border-radius: 6px !default;
+$datetime-list-font-weight: $font-weight-normal !default;
+$datetime-list-normal-padding: 8px !default;
+$datetime-list-bigger-padding: 8px !default;
+$datetime-time-font-icon: '\e20c' !default;
+$datetime-icon-normal-font-size: $text-base !default;
+$datetime-icon-bigger-font-size: $text-lg !default;
+$datetime-date-icon-margin: 0 !default;
+$datetime-time-icon-margin: 0 !default;
+$datetime-time-bigger-icon-margin: 0 !default;
+$datetime-time-rtl-icon-margin: 0 !default;
+$datetime-time-rtl-bigger-icon-margin: 0 !default;
+$datetime-normal-min-height: 24px !default;
+$datetime-normal-min-width: 24px !default;
+$datetime-bigger-min-height: 26px !default;
+$datetime-bigger-min-width: 26px !default;
+$datetime-time-icon-border: 0 !default;
+$datetime-time-icon-border-style: none !default;
+$datetime-list-default-border-style: none !default;
+
+//mouse small
+$datetime-list-small-line-height: 24px !default;
+$datetime-list-small-text-indent: 12px !default;
+$datetime-list-small-font-size: $text-xs !default;
+
+// mouse small icon
+$datetime-icon-small-font-size: $font-icon-14 !default;
+$datetime-small-min-width: 16px !default;
+
+//touch small
+$datetime-list-bigger-small-line-height: 36px !default;
+$datetime-list-bigger-small-text-indent: 12px !default;
+$datetime-list-bigger-small-font-size: $text-sm !default;
+
+// touch small icon
+$datetime-icon-bigger-small-font-size: $text-base !default;
+
+// color variables
+$datetime-popup-shadow: $shadow-lg !default;
+$datetime-list-default-font-color: $content-text-color !default;
+$datetime-list-border-color: 1px solid $border-light !default;
+$datetime-list-bg-color: $content-bg-color !default;
+$datetime-list-active-bg-color: $content-bg-color-pressed !default;
+$datetime-list-active-font-color: $content-text-color-pressed !default;
+$datetime-list-active-icon-color: $content-text-color-pressed !default;
+$datetime-list-hover-bg-color: $content-bg-color-hover !default;
+$datetime-list-hover-font-color: $content-text-color-hover !default;
+$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
+$datetime-list-active-hover-bg-color: $content-bg-color-hover !default;
+$datetime-list-active-hover-font-color: $content-text-color-hover !default;
+$datetime-list-hover-border-color: none !default;
+$datetime-default-overlay: $content-bg-color-alt2 !default;
+
+// modal full-screen popup
+$modal-datetime-position: fixed !default;
+$modal-datetime-wrapper-position: relative !default;
+$modal-datetime-wrapper-width: 100% !default;

package/styles/datetimepicker/_tailwind4-definition.scss

@@ -0,0 +1,70 @@
+// size variables
+$datetime-default-text-indent: 12px !default;
+$datetime-list-bigger-line-height: 32px !default;
+$datetime-list-normal-line-height: 30px !default;
+$datetime-list-normal-font-size: $text-sm !default;
+$datetime-list-bigger-font-size: $text-base !default;
+$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
+$datetime-list-bigger-text-indent: 16px !default;
+$datetime-popup-border-radius: 6px !default;
+$datetime-list-font-weight: $font-weight-normal !default;
+$datetime-list-normal-padding: 8px !default;
+$datetime-list-bigger-padding: 8px !default;
+$datetime-time-font-icon: '\e20c' !default;
+$datetime-icon-normal-font-size: $text-base !default;
+$datetime-icon-bigger-font-size: $text-lg !default;
+$datetime-date-icon-margin: 0 !default;
+$datetime-time-icon-margin: 0 !default;
+$datetime-time-bigger-icon-margin: 0 !default;
+$datetime-time-rtl-icon-margin: 0 !default;
+$datetime-time-rtl-bigger-icon-margin: 0 !default;
+$datetime-normal-min-height: 24px !default;
+$datetime-normal-min-width: 24px !default;
+$datetime-bigger-min-height: 26px !default;
+$datetime-bigger-min-width: 26px !default;
+$datetime-time-icon-border: 0 !default;
+$datetime-time-icon-border-style: none !default;
+$datetime-list-default-border-style: none !default;
+
+//mouse small
+$datetime-list-small-line-height: 26px !default;
+$datetime-list-small-text-indent: 8px !default;
+$datetime-list-small-font-size: $text-xs !default;
+
+// mouse small icon
+$datetime-icon-small-font-size: $font-icon-14 !default;
+$datetime-small-min-width: 16px !default;
+
+//touch small
+$datetime-list-bigger-small-line-height: 30px !default;
+$datetime-list-bigger-small-text-indent: 16px !default;
+$datetime-list-bigger-small-font-size: $text-sm !default;
+
+// touch small icon
+$datetime-icon-bigger-small-font-size: $text-base !default;
+
+// color variables
+$datetime-popup-shadow: none !default;
+$datetime-list-default-font-color: $content-text-color !default;
+$datetime-list-border-color: 1px solid $border-light !default;
+$datetime-list-bg-color: $content-bg-color !default;
+$datetime-list-active-bg-color: $flyout-bg-color-selected !default;
+$datetime-list-active-font-color: $flyout-text-color-selected !default;
+$datetime-list-active-icon-color: $content-text-color-pressed !default;
+$datetime-list-hover-bg-color: $flyout-bg-color-hover !default;
+$datetime-list-hover-font-color: $flyout-text-color-hover !default;
+$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
+$datetime-list-active-hover-bg-color: $flyout-bg-color-hover !default;
+$datetime-list-active-hover-font-color: $flyout-text-color-hover !default;
+$datetime-list-hover-border-color: none !default;
+$datetime-default-overlay: $content-bg-color-alt2 !default;
+$datetime-list-navigation-bg-color: $flyout-bg-color !default;
+$datetime-list-navigation-font-color: $flyout-text-color !default;
+$datetime-list-navigation-box-shadow: $shadow-focus-ring2 !default;
+$datetime-list-focus-bg-color: $flyout-bg-color-focus !default;
+$datetime-list-focus-font-color: $flyout-text-color-focus !default;
+
+// modal full-screen popup
+$modal-datetime-position: fixed !default;
+$modal-datetime-wrapper-position: relative !default;
+$modal-datetime-wrapper-width: 100% !default;

package/styles/datetimepicker/_theme.scss

@@ -1,70 +1,95 @@
-@include export-module('datetimepicker-theme') {
-
-  /*! datetimepicker theme */
-  .e-datetime-wrapper {
-    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
-      @if $skin-name == 'bootstrap4' {
-        background: $datetime-icon-active-bg-color;
-        border-color: $datetime-active-border-color;
-      }
-      color: $datetime-list-active-icon-color;
-    }
-
-    #{if(&, '&', '*')}.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
-      color: $datetime-list-popup-icon-active-color;
-    }
-  }
-
-  .e-datetimepicker.e-popup {
-    border: $datetime-list-border-color;
-    border-radius: $datetime-popup-border-radius;
-    box-shadow: $datetime-popup-shadow;
-
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
-      @if $skin-name != 'Material3' {
-        background-color: $datetime-list-bg-color;
-      }
-      @if $skin-name == 'Material3' {
-        background: $datetime-list-bg-color;
-      }
-
-      #{if(&, '&', '*')} li.e-list-item {
-        border: $datetime-list-default-border-style;
-        color: $datetime-list-default-font-color;
-      }
-
-      #{if(&, '&', '*')} .e-list-item.e-hover,
-      #{if(&, '&', '*')} .e-list-item.e-navigation,
-      #{if(&, '&', '*')} .e-list-item:focus {
-        @if $skin-name != 'Material3' {
-          background-color: $datetime-list-hover-bg-color;
-        }
-        @if $skin-name == 'Material3' {
-          background: $datetime-list-hover-bg-color;
-        }
-        border: $datetime-list-hover-border-color;
-        color: $datetime-list-hover-font-color;
-      }
-
-      #{if(&, '&', '*')} .e-list-item.e-active {
-        @if $skin-name != 'Material3' {
-          background-color: $datetime-list-active-bg-color;
-        }
-        @if $skin-name == 'Material3' {
-          background: $datetime-list-active-bg-color;
-        }
-        color: $datetime-list-active-font-color;
-      }
-
-      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
-        @if $skin-name != 'Material3' {
-          background-color: $datetime-list-active-hover-bg-color;
-        }
-        @if $skin-name == 'Material3' {
-          background: $datetime-list-active-hover-bg-color;
-        }
-        color: $datetime-list-active-hover-font-color;
-      }
-    }
-  }
-}
+@include export-module('datetimepicker-theme') {
+
+  /*! datetimepicker theme */
+  .e-datetime-wrapper {
+    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
+      @if $skin-name == 'bootstrap4' {
+        background: $datetime-icon-active-bg-color;
+        border-color: $datetime-active-border-color;
+      }
+      color: $datetime-list-active-icon-color;
+    }
+
+    #{if(&, '&', '*')}.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
+      color: $datetime-list-popup-icon-active-color;
+    }
+  }
+
+  .e-datetimepicker.e-popup {
+    border: $datetime-list-border-color;
+    border-radius: $datetime-popup-border-radius;
+    box-shadow: $datetime-popup-shadow;
+
+    #{if(&, '&', '*')} .e-list-parent.e-ul {
+      @if $skin-name != 'Material3' {
+        background-color: $datetime-list-bg-color;
+      }
+      @if $skin-name == 'Material3' {
+        background: $datetime-list-bg-color;
+      }
+
+      #{if(&, '&', '*')} li.e-list-item {
+        border: $datetime-list-default-border-style;
+        color: $datetime-list-default-font-color;
+      }
+
+      #{if(&, '&', '*')} .e-list-item.e-hover {
+        @if $skin-name == 'tailwind4' {
+          background: $datetime-list-hover-bg-color;
+          color: $datetime-list-hover-font-color;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-item.e-navigation {
+        @if $skin-name == 'tailwind4' {
+          background: $datetime-list-navigation-bg-color;
+          color: $datetime-list-navigation-font-color;
+          box-shadow: $datetime-list-navigation-box-shadow;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-item:focus {
+        @if $skin-name == 'tailwind4' {
+          background: $datetime-list-focus-bg-color;
+          color: $datetime-list-focus-font-color;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-item.e-hover,
+      #{if(&, '&', '*')} .e-list-item.e-navigation,
+      #{if(&, '&', '*')} .e-list-item:focus {
+        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
+          background-color: $datetime-list-hover-bg-color;
+        }
+        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
+          background: $datetime-list-hover-bg-color;
+        }
+        border: $datetime-list-hover-border-color;
+        color: $datetime-list-hover-font-color;
+      }
+
+      #{if(&, '&', '*')} .e-list-item.e-active {
+        @if $skin-name != 'Material3' and $skin-name != 'tailwind4' {
+          background-color: $datetime-list-active-bg-color;
+        }
+        @if $skin-name == 'Material3' or $skin-name == 'tailwind4' {
+          background: $datetime-list-active-bg-color;
+        }
+        color: $datetime-list-active-font-color;
+        @if $skin-name == 'tailwind4' {
+          font-weight: 500;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
+        @if $skin-name != 'Material3' {
+          background-color: $datetime-list-active-hover-bg-color;
+        }
+        @if $skin-name == 'Material3' {
+          background: $datetime-list-active-hover-bg-color;
+        }
+        color: $datetime-list-active-hover-font-color;
+      }
+    }
+  }
+}

package/styles/datetimepicker/bootstrap-dark.css

@@ -45,6 +45,29 @@
   margin: 0;
 }
 
+.e-datetime-mob-popup-wrap {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  height: 100%;
+  -ms-flex-pack: center;
+      justify-content: center;
+  left: 0;
+  max-height: 100%;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1002;
+}
+.e-datetime-mob-popup-wrap .e-datetimepicker.e-popup.e-lib.e-control.e-popup-open {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+  position: relative;
+  top: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-datetimepicker.e-time-modal {
   background-color: rgba(26, 26, 26, 0.6);
   height: 100%;
@@ -89,31 +112,6 @@
   text-indent: 20px;
 }
 
-.e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
-*.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 18px;
-}
-.e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
-*.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {
-  margin: 0;
-}
-
-.e-bigger.e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon,
-*.e-bigger .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
-  margin: 0;
-}
-
-.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul,
-*.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul {
-  padding: 10px 0;
-}
-.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
-*.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
-  font-size: 15px;
-  line-height: 40px;
-  text-indent: 20px;
-}
-
 .e-small .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
 *.e-small.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
   font-size: 13px;
@@ -121,32 +119,21 @@
   text-indent: 12px;
 }
 
-.e-small.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
-*.e-small.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
-  font-size: 14px;
-  line-height: 34px;
-  text-indent: 20px;
-}
-
 .e-small.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-small .e-datetime-wrapper .e-time-icon.e-icons::before {
   font-size: 14px;
 }
-
-.e-small.e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
-*.e-small.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 18px;
-}
-
 .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
   background-size: 250px 33px;
   min-height: 33px;
 }
 
-.e-bigger .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker,
-.e-bigger.e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
-  background-size: 250px 40px;
-  min-height: 40px;
+.e-datetimepicker.e-popup-expand.e-popup {
+  position: fixed;
+}
+.e-datetimepicker.e-popup-expand.e-popup .e-datetime-mob-popup-wrap {
+  position: relative;
+  width: 100%;
 }
 
 /*! datetimepicker theme */

package/styles/datetimepicker/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';

package/styles/datetimepicker/bootstrap.css

@@ -45,6 +45,29 @@
   margin: 0;
 }
 
+.e-datetime-mob-popup-wrap {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  height: 100%;
+  -ms-flex-pack: center;
+      justify-content: center;
+  left: 0;
+  max-height: 100%;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1002;
+}
+.e-datetime-mob-popup-wrap .e-datetimepicker.e-popup.e-lib.e-control.e-popup-open {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+  position: relative;
+  top: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-datetimepicker.e-time-modal {
   background-color: rgba(0, 0, 0, 0.6);
   height: 100%;
@@ -89,31 +112,6 @@
   text-indent: 20px;
 }
 
-.e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
-*.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 18px;
-}
-.e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
-*.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {
-  margin: 0;
-}
-
-.e-bigger.e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon,
-*.e-bigger .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
-  margin: 0;
-}
-
-.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul,
-*.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul {
-  padding: 10px 0;
-}
-.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
-*.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
-  font-size: 15px;
-  line-height: 40px;
-  text-indent: 20px;
-}
-
 .e-small .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
 *.e-small.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
   font-size: 13px;
@@ -121,32 +119,21 @@
   text-indent: 12px;
 }
 
-.e-small.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
-*.e-small.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
-  font-size: 14px;
-  line-height: 34px;
-  text-indent: 20px;
-}
-
 .e-small.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-small .e-datetime-wrapper .e-time-icon.e-icons::before {
   font-size: 14px;
 }
-
-.e-small.e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
-*.e-small.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 18px;
-}
-
 .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
   background-size: 250px 33px;
   min-height: 33px;
 }
 
-.e-bigger .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker,
-.e-bigger.e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
-  background-size: 250px 40px;
-  min-height: 40px;
+.e-datetimepicker.e-popup-expand.e-popup {
+  position: fixed;
+}
+.e-datetimepicker.e-popup-expand.e-popup .e-datetime-mob-popup-wrap {
+  position: relative;
+  width: 100%;
 }
 
 /*! datetimepicker theme */

package/styles/datetimepicker/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-inputs/styles/input/bootstrap-definition.scss';
 @import 'ej2-popups/styles/popup/bootstrap-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap-definition.scss';