feat(datetimepicker): add milliseconds column in popup picker

telerik · Dec 8, 2020 · 8f20baf · 8f20baf
1 parent d586897
commit 8f20baf
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/packages/bootstrap/scss/datetime/_variables.scss b/packages/bootstrap/scss/datetime/_variables.scss
@@ -10,12 +10,15 @@ $timepicker-header-height: 2em;
 
 $time-list-padding: $padding-y * 5 !default;
 $time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
+$time-list-width: 4em !default;
 $time-list-height: 200px !default;
 
+$time-list-item-padding-x: $padding-x !default;
+$time-list-item-padding-y: $padding-y !default;
+
 $dateinput-text: null !default;
 
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
+$datetime-width: (5 * $time-list-width) !default;
 
 $datetime-bg: $input-bg !default;
 $datetime-text: $input-text !default;

diff --git a/packages/classic/scss/datetime/_variables.scss b/packages/classic/scss/datetime/_variables.scss
@@ -10,12 +10,15 @@ $timepicker-header-height: 2em;
 
 $time-list-padding: $padding-y * 5 !default;
 $time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
+$time-list-width: 4em !default;
 $time-list-height: 200px !default;
 
+$time-list-item-padding-x: $padding-x !default;
+$time-list-item-padding-y: $padding-y !default;
+
 $dateinput-text: null !default;
 
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
+$datetime-width: (5 * $time-list-width) !default;
 
 $datetime-bg: $input-bg !default;
 $datetime-text: $input-text !default;

diff --git a/packages/default/scss/datetime/_layout.scss b/packages/default/scss/datetime/_layout.scss
@@ -451,7 +451,7 @@
     }
 
     .k-time-list .k-item {
-        padding: $list-item-padding-y $list-item-padding-x;
+        padding: $time-list-item-padding-y $time-list-item-padding-x;
         min-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
         line-height: calc( #{decimal-round($line-height-em, 2)} + 2px );
     }
@@ -478,10 +478,11 @@
     }
 
     .k-time-separator {
+        width: 0;
+        height: 100%;
         display: inline-flex;
         align-self: center;
         justify-content: center;
-        height: 100%;
         z-index: 11;
     }
 }
diff --git a/packages/default/scss/datetime/_variables.scss b/packages/default/scss/datetime/_variables.scss
@@ -10,12 +10,15 @@ $timepicker-header-height: 2em;
 
 $time-list-padding: $padding-y * 5 !default;
 $time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
+$time-list-width: 4em !default;
 $time-list-height: 200px !default;
 
+$time-list-item-padding-x: $padding-x !default;
+$time-list-item-padding-y: $padding-y !default;
+
 $dateinput-text: null !default;
 
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
+$datetime-width: (5 * $time-list-width) !default;
 
 $datetime-bg: $input-bg !default;
 $datetime-text: $input-text !default;

diff --git a/packages/material/scss/datetime/_variables.scss b/packages/material/scss/datetime/_variables.scss
@@ -10,9 +10,12 @@ $timepicker-header-height: 2em;
 
 $time-list-padding: $padding-y * 5 !default;
 $time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
+$time-list-width: 4em !default;
 $time-list-height: 200px !default;
 
+$time-list-item-padding-x: $padding-x !default;
+$time-list-item-padding-y: $padding-y !default;
+
 $dateinput-text: $component-text !default;
 
 $datetime-width: calc( #{$calendar-cell-size * 8} ) !default;