@syncfusion/ej2-calendars 31.2.18 → 32.1.19

package/styles/datetimepicker/_fluent-dark-definition.scss

@@ -1 +1,77 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+// 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: $shadow-md !default;
+$datetime-list-default-font-color: $flyout-text-color !default;
+$datetime-list-border-color: 0 solid $border-light !default;
+$datetime-list-bg-color: $flyout-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: $flyout-text-color-selected !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: $flyout-text-color-selected !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: $overlay-bg-color !default;
+
+// modal full-screen popup
+$modal-datetime-position: fixed !default;
+$modal-datetime-wrapper-position: relative !default;
+$modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_fluent-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 // size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 32px !default;
@@ -63,3 +66,12 @@ $datetime-default-overlay: $overlay-bg-color !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_fluent2-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 // size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 36px !default;
@@ -6,7 +9,7 @@ $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-popup-border-radius: $radius-6 !default;
 $datetime-list-font-weight: $font-weight-normal !default;
 $datetime-list-normal-padding: 8px !default;
 $datetime-list-bigger-padding: 8px !default;
@@ -63,3 +66,12 @@ $datetime-default-overlay: $content-bg-color-alt2 !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_fusionnew-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 // size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 32px !default;
@@ -63,3 +66,12 @@ $datetime-default-overlay: $content-bg-color-alt2 !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $datetime-default-text-indent: 10px !default;
 $datetime-list-bigger-line-height: 48px !default;
 $datetime-list-normal-line-height: 36px !default;
@@ -55,3 +57,12 @@ $datetime-icon-bigger-small-font-size: 18px !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_highcontrast-light-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 //default
 $datetime-default-text-indent: 10px !default;
 $datetime-list-bigger-line-height: 48px !default;
@@ -58,3 +61,12 @@ $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
 
 //enddefault
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('datetimepicker-layout') {
   // datetimepicker layout
   .e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
@@ -68,19 +70,19 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: $datetime-full-height;
     justify-content: center;
-    left: 0;
-    max-height: 100%;
+    left: $margin-zero;
+    max-height: $datetime-full-height;
     position: fixed;
-    top: 0;
-    width: 100%;
+    top: $margin-zero;
+    width: $date-time-full-width;
     z-index: 1002;
   
     .e-datetimepicker.e-popup.e-lib.e-control.e-popup-open {
-      left: 0 !important; /* stylelint-disable-line declaration-no-important */
+      left: $margin-zero !important; /* stylelint-disable-line declaration-no-important */
       position: relative;
-      top: 0 !important; /* stylelint-disable-line declaration-no-important */
+      top: $margin-zero !important; /* stylelint-disable-line declaration-no-important */
     }
   }
 
@@ -91,19 +93,19 @@
     @if $skin-name == 'Material3' {
       background: $datetime-default-overlay;
     }
-    height: 100%;
-    left: 0;
+    height: $datetime-full-height;
+    left: $margin-zero;
     opacity: .5;
     pointer-events: auto;
     position: fixed;
-    top: 0;
-    width: 100%;
+    top: $margin-zero;
+    width: $date-time-full-width;
     z-index: 999;
   }
 
   #{&}.e-datetimepicker.e-popup {
     border-style: solid;
-    border-width: 1px;
+    border-width: $date-time-border-width;
     overflow: auto;
 
     #{if(&, '&', '*')} .e-content {
@@ -111,12 +113,12 @@
     }
 
     #{if(&, '&', '*')} .e-list-parent.e-ul {
-      margin: 0;
+      margin: $margin-zero;
       @if $skin-name != 'Material3' {
-        padding: $datetime-list-normal-padding 0;
+        padding: $datetime-list-parent-padding;
       }
       @else {
-        padding: 0;
+        padding: $margin-zero;
       }
 
       #{if(&, '&', '*')} .e-list-item {
@@ -172,7 +174,7 @@
 
   .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
     background-size: 250px 33px;
-    min-height: 33px;
+    min-height: $datetime-content-place-min-height;
   }
 
   .e-datetimepicker.e-popup-expand.e-popup {

package/styles/datetimepicker/_material-dark-definition.scss

@@ -1,3 +1,8 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-inputs/styles/input/material-dark-definition' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+@forward 'ej2-inputs/styles/input/material-dark-definition';
+
 //default
 $datetime-default-text-indent: 16px !default;
 $datetime-list-bigger-line-height: 48px !default;
@@ -62,3 +67,12 @@ $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
 
 //enddefault
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_material-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material' as *;
+@use 'ej2-inputs/styles/input/material-definition' as *;
+@forward 'ej2-base/styles/definition/material';
+@forward 'ej2-inputs/styles/input/material-definition';
 $datetime-default-text-indent: 16px !default;
 $datetime-list-bigger-line-height: 48px !default;
 $datetime-list-normal-line-height: 36px !default;
@@ -60,3 +64,12 @@ $datetime-icon-bigger-small-font-size: 18px !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_material3-dark-definition.scss

@@ -1 +1,70 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$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: $radius-4 !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: $radius-16 !default;
+$datetime-bigger-min-height: 38px !default;
+$datetime-bigger-min-width: 38px !default;
+$datetime-bigger-icon-border-radius: $radius-20 !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: $radius-14 !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: $radius-20 !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;
+
+$margin-zero: 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_material3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $datetime-default-text-indent: 16px !default;
 $datetime-list-bigger-line-height: 48px !default;
 $datetime-list-normal-line-height: 36px !default;
@@ -5,7 +7,7 @@ $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-popup-border-radius: $radius-4 !default;
 $datetime-list-font-weight: normal !default;
 $datetime-popup-shadow: $shadow-md !default;
 $datetime-list-default-font-color: rgba($flyout-text-color) !default;
@@ -31,10 +33,10 @@ $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-normal-border-radius: $radius-16 !default;
 $datetime-bigger-min-height: 38px !default;
 $datetime-bigger-min-width: 38px !default;
-$datetime-bigger-icon-border-radius: 20px !default;
+$datetime-bigger-icon-border-radius: $radius-20 !default;
 $datetime-time-icon-border: 0 !default;
 $datetime-time-icon-border-style: none !default;
 $datetime-list-hover-border-color: none !default;
@@ -46,7 +48,7 @@ $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-small-icon-border-radius: $radius-14 !default;
 $datetime-time-small-icon-margin: 0 !default;
 $datetime-list-bigger-small-line-height: 40px !default;
 $datetime-list-bigger-small-text-indent: 16px !default;
@@ -54,8 +56,15 @@ $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-bigger-small-icon-border-radius: $radius-20 !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;
+
+$margin-zero: 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_tailwind-dark-definition.scss

@@ -1 +1,77 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+// 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;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_tailwind-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 // size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 36px !default;
@@ -63,3 +66,12 @@ $datetime-default-overlay: $content-bg-color-alt2 !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_tailwind3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 // size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 32px !default;
@@ -6,7 +9,7 @@ $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-popup-border-radius: $radius-6 !default;
 $datetime-list-font-weight: $font-weight-normal !default;
 $datetime-list-normal-padding: 8px !default;
 $datetime-list-bigger-padding: 8px !default;
@@ -68,3 +71,12 @@ $datetime-list-focus-font-color: $flyout-text-color-focus !default;
 $modal-datetime-position: fixed !default;
 $modal-datetime-wrapper-position: relative !default;
 $modal-datetime-wrapper-width: 100% !default;
+
+$margin-zero: 0;
+$datetime-list-parent-padding: $datetime-list-normal-padding 0;
+$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
+$datetime-full-height: 100% !default;
+$datetime-content-place-min-height: 33px !default;
+$datetime-bigger-content-place-min-height: 40px !default;
+$date-time-full-width: 100% !default;
+$date-time-border-width: 1px !default;

package/styles/datetimepicker/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/datetimepicker/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('datetimepicker-theme') {
 
   /*! datetimepicker theme */
@@ -77,7 +79,7 @@
         }
         color: $datetime-list-active-font-color;
         @if $skin-name == 'tailwind3' {
-          font-weight: 500;
+          font-weight: $font-weight-medium;
         }
       }
 

package/styles/datetimepicker/bds.scss

@@ -1,9 +1,9 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import '../datepicker/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use '../datepicker/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datetimepicker/bootstrap-dark.scss

@@ -1,9 +1,9 @@
-@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';
-@import '../datepicker/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-inputs/styles/input/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use '../datepicker/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datetimepicker/bootstrap.scss

@@ -1,9 +1,9 @@
-@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';
-@import '../datepicker/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-inputs/styles/input/bootstrap-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use '../datepicker/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;