@syncfusion/ej2-calendars 31.2.18 → 32.1.20

package/styles/tailwind3.scss

@@ -1,24 +1,24 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
-@import 'calendar/tailwind3-definition.scss';
-@import 'calendar/icons/tailwind3.scss';
-@import 'calendar/all.scss';
-@import 'calendar/bigger.scss';
-@import 'ej2-inputs/styles/input/tailwind3-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
-@import 'timepicker/tailwind3-definition.scss';
-@import 'timepicker/icons/tailwind3.scss';
-@import 'timepicker/all.scss';
-@import 'timepicker/bigger.scss';
-@import 'datepicker/tailwind3-definition.scss';
-@import 'datepicker/icons/tailwind3.scss';
-@import 'datepicker/all.scss';
-@import 'datepicker/bigger.scss';
-@import 'daterangepicker/tailwind3-definition.scss';
-@import 'daterangepicker/icons/tailwind3.scss';
-@import 'daterangepicker/all.scss';
-@import 'daterangepicker/bigger.scss';
-@import 'datetimepicker/tailwind3-definition.scss';
-@import 'datetimepicker/icons/tailwind3.scss';
-@import 'datetimepicker/all.scss';
-@import 'datetimepicker/bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@use 'calendar/tailwind3-definition' as *;
+@use 'calendar/icons/tailwind3' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
+@use 'ej2-inputs/styles/input/tailwind3-definition' as *;
+@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use 'timepicker/tailwind3-definition' as *;
+@use 'timepicker/icons/tailwind3' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
+@use 'datepicker/tailwind3-definition' as *;
+@use 'datepicker/icons/tailwind3' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
+@use 'daterangepicker/tailwind3-definition' as *;
+@use 'daterangepicker/icons/tailwind3' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
+@use 'datetimepicker/tailwind3-definition' as *;
+@use 'datetimepicker/icons/tailwind3' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;

package/styles/timepicker/_all.scss

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

package/styles/timepicker/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 // size variables
 $timepicker-skin-name: $skin-name !default;
 $timepicker-default-text-indent: 12px !default;
@@ -82,3 +85,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('timepicker-bigger') {
 
   .e-bigger .e-time-wrapper,
@@ -20,7 +22,7 @@
   .e-bigger #{&}.e-timepicker.e-popup,
   #{if(&, '&', '*')}.e-bigger#{&}.e-timepicker.e-popup {
     #{if(&, '&', '*')} .e-list-parent.e-ul {
-      padding: $timepicker-list-bigger-padding 0;
+      padding: $timepicker-list-parent-bigger-padding;
 
       #{if(&, '&', '*')} .e-list-item {
         font-size: $timepicker-list-bigger-font-size;
@@ -33,7 +35,7 @@
   .e-bigger .e-content-placeholder.e-timepicker.e-placeholder-timepicker,
   .e-bigger.e-content-placeholder.e-timepicker.e-placeholder-timepicker {
     background-size: 250px 40px;
-    min-height: 40px;
+    min-height: $timepicker-bigger-content-placeholder-min-height;
   }
 
   .e-small.e-bigger #{&}.e-timepicker.e-popup,

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $timepicker-skin-name: 'bootstrap-dark' !default;
 $timepicker-default-text-indent: 20px !default;
@@ -78,3 +81,14 @@ $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
 
 //enddefault
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $timepicker-skin-name: 'bootstrap' !default;
 $timepicker-default-text-indent: 20px !default;
 $timepicker-list-bigger-line-height: 40px !default;
@@ -75,3 +77,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $timepicker-skin-name: 'bootstrap4' !default;
 $timepicker-default-text-indent: 20px !default;
@@ -85,3 +87,14 @@ $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
 
 //enddefault
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_bootstrap5-dark-definition.scss

@@ -1 +1,101 @@
-@import './bootstrap5-definition.scss';
+@use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+// size variables
+$timepicker-skin-name: 'bootstrap5' !default;
+$timepicker-default-text-indent: 12px !default;
+$timepicker-list-bigger-line-height: 32px !default;
+$timepicker-list-normal-line-height: 30px !default;
+$timepicker-list-normal-font-size: $text-sm !default;
+$timepicker-list-bigger-font-size: $text-base !default;
+$timepicker-list-normal-text-indent: $timepicker-default-text-indent !default;
+$timepicker-list-bigger-text-indent: 16px !default;
+$timepicker-popup-border-radius: 6px !default;
+$timepicker-list-font-weight: $font-weight-normal !default;
+$timepicker-list-normal-padding: 0 !default;
+$timepicker-list-bigger-padding: 0 !default;
+$timepicker-font-icon: '\e20c' !default;
+$timepicker-icon-normal-font-size: $text-base !default;
+$timepicker-icon-bigger-font-size: $text-lg !default;
+$timepicker-normal-input-min-height: 20px !default;
+$timepicker-normal-input-min-width: 20px !default;
+$timepicker-bigger-input-min-height: 22px !default;
+$timepicker-bigger-input-min-width: 22px !default;
+$timepicker-list-default-border-style: none !default;
+$timepicker-disable-opacity: 1 !default;
+
+// mouse small
+$timepicker-list-small-font-size: $text-sm !default;
+$timepicker-list-small-line-height: 26px !default;
+$timepicker-list-small-text-indent: 8px !default;
+
+// mouse small icon
+$timepicker-icon-small-font-size: $text-sm !default;
+
+// Touch small
+$timepicker-list-bigger-small-font-size: $text-sm !default;
+$timepicker-list-bigger-small-line-height: 30px !default;
+$timepicker-list-bigger-small-text-indent: 16px !default;
+
+// Touch small icon
+$timepicker-icon-bigger-small-font-size: $text-base !default;
+
+// color variables
+$timepicker-popup-shadow: none !default;
+$timepicker-list-default-font-color: $content-text-color !default;
+$timepicker-list-border-color: 1px solid $border-light !default;
+$timepicker-list-hover-border-color: none !default;
+$timepicker-list-bg-color: $flyout-bg-color !default;
+$timepicker-list-active-bg-color: $content-bg-color-selected !default;
+$timepicker-icon-active-bg-color: $secondary-bg-color-pressed;
+$timepicker-active-border-color: color.adjust($gray-600, $lightness: -10%) !default;
+$timepicker-list-active-font-color: $flyout-text-color-pressed !default;
+$timepicker-list-active-icon-color: $content-text-color-selected !default;
+$timepicker-list-hover-bg-color: $flyout-bg-color-hover !default;
+$timepicker-list-hover-font-color: $flyout-text-color-hover !default;
+$timepicker-list-popup-icon-active-color: $flyout-text-color-pressed !default;
+$timepicker-list-active-hover-bg-color: $flyout-bg-color-hover !default;
+$timepicker-list-active-hover-font-color: $flyout-text-color-hover !default;
+$timepicker-disable-text: $content-text-color-disabled !default;
+$timepicker-default-overlay: $content-bg-color-alt2 !default;
+$timepicker-list-small-font-color: $content-text-color !default;
+
+// modal dialog colors
+$modal-header-bg-color: $flyout-bg-color !default;
+$modal-header-text-color: $content-text-color-alt1 !default;
+
+// modal dialog portrait dimensions
+$modal-header-height: 10% !default;
+$modal-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
+$modal-header-display-style: flex !default;
+$modal-header-content-align: center !default;
+$modal-header-portrait-font-size: 2vh !default;
+$modal-close-icon-float: left !default;
+$modal-portrait-content-padding: 1vh 2vw !default;
+$modal-content-height: 90% !default;
+$modal-content-overflow: auto !default;
+$modal-header-title-transform: capitalize !default;
+$modal-header-border-bottom: 1px solid $border-light !default;
+$modal-list-line-height: 5vh !default;
+$modal-landscape-list-line-height: 10vh !default;
+
+// modal dialog landscape dimensions
+$modal-header-landscape-height: 15% !default;
+$modal-content-landscape-height: 85% !default;
+$modal-header-landscape-font-size: 2vw !default;
+$modal-landscape-padding: 1vh 1vw !default;
+$modal-list-item-padding: 1vh 0 !default;
+$modal-mobile-font-size: 14px !default;
+$modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_bootstrap5-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 
 // size variables
 $timepicker-skin-name: 'bootstrap5' !default;
@@ -86,3 +88,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_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
 $timepicker-skin-name: 'bootstrap5' !default;
 $timepicker-default-text-indent: 12px !default;
@@ -7,7 +10,7 @@ $timepicker-list-normal-font-size: $text-sm !default;
 $timepicker-list-bigger-font-size: $text-base !default;
 $timepicker-list-normal-text-indent: $timepicker-default-text-indent !default;
 $timepicker-list-bigger-text-indent: 16px !default;
-$timepicker-popup-border-radius: 6px !default;
+$timepicker-popup-border-radius: $radius-6 !default;
 $timepicker-list-font-weight: $font-weight-normal !default;
 $timepicker-list-normal-padding: 0 !default;
 $timepicker-list-bigger-padding: 0 !default;
@@ -83,3 +86,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: $radius-0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_fabric-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+
 //default
 $timepicker-skin-name: 'fabric-dark' !default;
 $timepicker-default-text-indent: 10px !default;
@@ -78,3 +81,14 @@ $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
 
 //enddefault
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $timepicker-skin-name: 'fabric' !default;
 $timepicker-default-text-indent: 10px !default;
 $timepicker-list-bigger-line-height: 48px !default;
@@ -75,3 +77,14 @@ $modal-landscape-padding: 1vh 2vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 18px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

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

@@ -1 +1,101 @@
-@import './fluent-definition.scss';
+@use 'sass:color';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+// size variables
+$timepicker-skin-name: 'FluentUI' !default;
+$timepicker-default-text-indent: 12px !default;
+$timepicker-list-bigger-line-height: 40px !default;
+$timepicker-list-normal-line-height: 36px !default;
+$timepicker-list-normal-font-size: $text-sm !default;
+$timepicker-list-bigger-font-size: $text-lg !default;
+$timepicker-list-normal-text-indent: $timepicker-default-text-indent !default;
+$timepicker-list-bigger-text-indent: 16px !default;
+$timepicker-popup-border-radius: 6px !default;
+$timepicker-list-font-weight: $font-weight-normal !default;
+$timepicker-list-normal-padding: 0 !default;
+$timepicker-list-bigger-padding: 0 !default;
+$timepicker-font-icon: '\e20c' !default;
+$timepicker-icon-normal-font-size: $text-base !default;
+$timepicker-icon-bigger-font-size: $text-lg !default;
+$timepicker-normal-input-min-height: 20px !default;
+$timepicker-normal-input-min-width: 20px !default;
+$timepicker-bigger-input-min-height: 22px !default;
+$timepicker-bigger-input-min-width: 22px !default;
+$timepicker-list-default-border-style: none !default;
+$timepicker-disable-opacity: 1 !default;
+
+// mouse small
+$timepicker-list-small-font-size: $text-xs !default;
+$timepicker-list-small-line-height: 26px !default;
+$timepicker-list-small-text-indent: 8px !default;
+
+// mouse small icon
+$timepicker-icon-small-font-size: $text-sm !default;
+
+// Touch small
+$timepicker-list-bigger-small-font-size: $text-base !default;
+$timepicker-list-bigger-small-line-height: 38px !default;
+$timepicker-list-bigger-small-text-indent: 16px !default;
+
+// Touch small icon
+$timepicker-icon-bigger-small-font-size: $text-base !default;
+
+// color variables
+$timepicker-popup-shadow: $shadow-md !default;
+$timepicker-list-default-font-color: $flyout-text-color !default;
+$timepicker-list-border-color: 0 solid $border-light !default;
+$timepicker-list-hover-border-color: none !default;
+$timepicker-list-bg-color: $flyout-bg-color !default;
+$timepicker-list-active-bg-color: $flyout-bg-color-selected !default;
+$timepicker-icon-active-bg-color: $flyout-text-color-selected;
+$timepicker-active-border-color: color.adjust($primary, $lightness: -10%) !default;
+$timepicker-list-active-font-color: $flyout-text-color-pressed !default;
+$timepicker-list-active-icon-color: $flyout-text-color-selected !default;
+$timepicker-list-hover-bg-color: $flyout-bg-color-hover !default;
+$timepicker-list-hover-font-color: $flyout-text-color-hover !default;
+$timepicker-list-popup-icon-active-color: $flyout-text-color-selected !default;
+$timepicker-list-active-hover-bg-color: $flyout-bg-color-hover !default;
+$timepicker-list-active-hover-font-color: $flyout-text-color-hover !default;
+$timepicker-disable-text: $flyout-text-color-disabled !default;
+$timepicker-default-overlay: $overlay-bg-color !default;
+$timepicker-list-small-font-color: $flyout-text-color !default;
+
+// modal dialog colors
+$modal-header-bg-color: $secondary-border-color !default;
+$modal-header-text-color: $content-bg-color !default;
+
+// modal dialog portrait dimensions
+$modal-header-height: 10% !default;
+$modal-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
+$modal-header-display-style: flex !default;
+$modal-header-content-align: center !default;
+$modal-header-portrait-font-size: 2vh !default;
+$modal-close-icon-float: left !default;
+$modal-portrait-content-padding: 1vh 2vw !default;
+$modal-content-height: 90% !default;
+$modal-content-overflow: auto !default;
+$modal-header-title-transform: capitalize !default;
+$modal-header-border-bottom: none !default;
+$modal-list-line-height: 5vh !default;
+$modal-landscape-list-line-height: 10vh !default;
+
+// modal dialog landscape dimensions
+$modal-header-landscape-height: 15% !default;
+$modal-content-landscape-height: 85% !default;
+$modal-header-landscape-font-size: 2vw !default;
+$modal-landscape-padding: 1vh 1vw !default;
+$modal-list-item-padding: 1vh 0 !default;
+$modal-mobile-font-size: 14px !default;
+$modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_fluent-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
 
 // size variables
 $timepicker-skin-name: 'FluentUI' !default;
@@ -86,3 +88,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_fluent2-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 // size variables
 $timepicker-skin-name: $skin-name !default;
 $timepicker-default-text-indent: 12px !default;
@@ -7,7 +10,7 @@ $timepicker-list-normal-font-size: $text-sm !default;
 $timepicker-list-bigger-font-size: $text-base !default;
 $timepicker-list-normal-text-indent: $timepicker-default-text-indent !default;
 $timepicker-list-bigger-text-indent: 16px !default;
-$timepicker-popup-border-radius: 8px !default;
+$timepicker-popup-border-radius: $radius-8 !default;
 $timepicker-list-font-weight: $font-weight-normal !default;
 $timepicker-list-normal-padding: 4px !default;
 $timepicker-list-bigger-padding: 4px !default;
@@ -82,3 +85,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: $radius-0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_fusionnew-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 // size variables
 $timepicker-skin-name: 'bootstrap5' !default;
 $timepicker-default-text-indent: 12px !default;
@@ -84,3 +87,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

package/styles/timepicker/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $timepicker-skin-name: 'highcontrast' !default;
 $timepicker-default-text-indent: 10px !default;
 $timepicker-list-bigger-line-height: 48px !default;
@@ -75,3 +77,14 @@ $modal-landscape-padding: 1vh 1vw !default;
 $modal-list-item-padding: 1vh 0 !default;
 $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 //default
 $timepicker-skin-name: 'highcontrast-light' !default;
 $timepicker-default-text-indent: 10px !default;
@@ -78,3 +81,14 @@ $modal-mobile-font-size: 14px !default;
 $modal-tablet-font-size: 24px !default;
 
 //enddefault
+
+$timepicker-list-parent-margin: 0;
+$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
+$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
+$timepicker-zero-border-radius: 0 !default;
+$timepicker-model-title-font-weight: 500 !default;
+$timepicker-bigger-content-placeholder-min-height: 40px !default;
+$timepicker-full-height: 100% !default;
+$timepicker-content-placeholder-min-height: 33px !default;
+$timepicker-full-width: 100% !default;
+$timepicker-border: 1px !default;