@syncfusion/ej2-calendars 31.2.16 → 32.1.19

package/styles/daterangepicker/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 .e-filled.e-float-input.e-error label.e-float-text,
@@ -15,14 +85,62 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 /* stylelint-disable-line no-empty-source */
 /*! calendar bootstrap5 theme variables */
 /*! component icons */
 .e-input-group-icon.e-range-icon,
 *.e-control-wrapper .e-input-group-icon.e-range-icon {
-  border-bottom-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
   border-right: 0;
-  border-top-right-radius: 0;
+  border-top-right-radius: calc(var(--e-radius) * 0);
   font-size: 14px;
   margin: 0;
   min-height: 18px;
@@ -37,7 +155,7 @@
 .e-input-group-icon.e-range-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-range-icon:focus {
   background: var(--color-sf-content-bg-color-hover);
-  border-radius: 50%;
+  border-radius: 999px;
 }
 
 .e-daterangepicker .e-calendar .e-header .e-date-icon-next::before {
@@ -98,7 +216,7 @@
 
 .e-daterangepicker.e-popup {
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
           box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
   max-height: 500px;
@@ -202,10 +320,10 @@
   padding: 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 50% 0 0 50%;
+  border-radius: 999px calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) 999px;
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0 50% 50% 0;
+  border-radius: calc(var(--e-radius) * 0) 999px 999px calc(var(--e-radius) * 0);
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
   border: none;
@@ -252,7 +370,7 @@
   width: auto;
 }
 .e-daterangepicker.e-popup .e-presets .e-list-item {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   cursor: pointer;
   line-height: 48px;
   overflow: hidden;
@@ -295,10 +413,10 @@
   float: right;
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0 50% 50% 0;
+  border-radius: calc(var(--e-radius) * 0) 999px 999px calc(var(--e-radius) * 0);
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 50% 0 0 50%;
+  border-radius: 999px calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) 999px;
 }
 .e-daterangepicker.e-rtl .e-footer {
   -webkit-box-orient: horizontal;
@@ -504,21 +622,21 @@
   }
 }
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder {
   height: 100%;
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
@@ -750,7 +868,7 @@
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
   background-color: var(--color-sf-primary);
   color: var(--color-sf-primary-text-color);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover.e-other-month span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
   background-color: var(--color-sf-primary);
@@ -808,7 +926,7 @@
 .e-daterangepicker.e-popup .e-calendar .e-content .e-end-date.e-selected span.e-day,
 .e-daterangepicker.e-popup .e-calendar .e-content .e-start-date.e-selected span.e-day {
   background: var(--color-sf-primary);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-model-header {
@@ -890,12 +1008,12 @@
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn {
   border-left: 0;
-  border-radius: 0 2px 2px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0);
 }
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn {
-  border-radius: 2px 0 0 2px;
+  border-radius: calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.125);
 }
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn:hover, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn:hover:not([disabled]),
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn:hover,
@@ -1013,13 +1131,13 @@
 *.e-bigger.e-daterangepicker.e-rtl.e-popup .e-range-header .e-start-end .e-end-btn,
 *.e-device.e-daterangepicker.e-rtl.e-popup .e-range-header .e-start-end .e-end-btn {
   border: 1px solid var(--color-sf-primary);
-  border-radius: 2px 0 0 2px;
+  border-radius: calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.125);
   border-right: 0;
 }
 .e-bigger .e-daterangepicker.e-rtl.e-popup .e-range-header .e-start-end .e-start-btn,
 *.e-bigger.e-daterangepicker.e-rtl.e-popup .e-range-header .e-start-end .e-start-btn,
 *.e-device.e-daterangepicker.e-rtl.e-popup .e-range-header .e-start-end .e-start-btn {
-  border-radius: 0 2px 2px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0);
 }
 .e-bigger .e-daterangepicker.e-rtl.e-popup .e-footer.e-btn.e-cancel,
 *.e-bigger.e-daterangepicker.e-rtl.e-popup .e-footer.e-btn.e-cancel,
@@ -1091,7 +1209,7 @@
 
 .e-bigger.e-small .e-daterangepicker.e-popup {
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
           box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
   max-height: 500px;
@@ -1190,10 +1308,10 @@
   padding: 0;
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 50% 0 0 50%;
+  border-radius: 999px calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) 999px;
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0 50% 50% 0;
+  border-radius: calc(var(--e-radius) * 0) 999px 999px calc(var(--e-radius) * 0);
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
   border: none;
@@ -1247,7 +1365,7 @@
   width: auto;
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-list-item {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   cursor: pointer;
   line-height: 48px;
   overflow: hidden;
@@ -1289,10 +1407,10 @@
   float: right;
 }
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0 50% 50% 0;
+  border-radius: calc(var(--e-radius) * 0) 999px 999px calc(var(--e-radius) * 0);
 }
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 50% 0 0 50%;
+  border-radius: 999px calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) 999px;
 }
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-footer {
   -webkit-box-orient: horizontal;

package/styles/daterangepicker/tailwind3.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-inputs/styles/input/tailwind3-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
-@import '../calendar/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-inputs/styles/input/tailwind3-definition' as *;
+@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use '../calendar/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datetimepicker/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/datetimepicker/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 // size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 36px !default;
@@ -63,3 +66,11 @@ $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/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('datetimepicker-bigger') {
 
   .e-bigger.e-datetime-wrapper,
@@ -30,10 +32,10 @@
   #{if(&, '&', '*')}.e-bigger#{&}.e-datetimepicker.e-popup {
     #{if(&, '&', '*')} .e-list-parent.e-ul {
       @if $skin-name != 'Material3' {
-        padding: $datetime-list-bigger-padding 0;
+        padding: $datetime-list-parent-bigger-padding;
       }
       @else {
-        padding: 0;
+        padding: $margin-zero;
       }
       
       #{if(&, '&', '*')} .e-list-item {
@@ -48,7 +50,7 @@
   .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;
+    min-height: $datetime-bigger-content-place-min-height;
   }
 
   .e-small.e-bigger.e-datetime-wrapper,

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $datetime-default-text-indent: 20px !default;
 $datetime-list-bigger-line-height: 40px !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/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $datetime-default-text-indent: 20px !default;
 $datetime-list-bigger-line-height: 40px !default;
 $datetime-list-normal-line-height: 26px !default;
@@ -57,3 +59,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/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $datetime-default-text-indent: 20px !default;
 $datetime-list-bigger-line-height: 40px !default;
@@ -65,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/_bootstrap5-dark-definition.scss

@@ -1 +1,77 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-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: 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-pressed !default;
+$datetime-list-active-font-color: $flyout-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: $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;
+
+// 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/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 // 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/_bootstrap5.3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 // 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;
@@ -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/_fabric-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+
 //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/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $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;