feat(datetime-picker): extract datetime picker styles into a separate…

… folder * convert styles to universal rendering
telerik · Dec 15, 2021 · e269119 · e269119
1 parent 0978cb4
commit e269119
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 275 deletions.
diff --git a/packages/bootstrap/scss/datetime/_index.scss b/packages/bootstrap/scss/datetime/_index.scss
@@ -2,12 +2,13 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/datetime/_layout.scss b/packages/bootstrap/scss/datetime/_layout.scss
@@ -1,15 +1,10 @@
 @import "~@progress/kendo-theme-default/scss/datetime/_layout.scss";
 
-@include exports("datetime/layout/bootstrap") {
+@include exports( "datetimepicker/layout/bootstrap" ) {
 
+    // Datetime picker
     .k-datetimepicker {
-        .k-picker-wrap,
-        .k-select {
-            transition: $transition;
-        }
+        transition: $transition;
     }
 
-    // Datetimepicker
-    .k-datetimepicker {}
-
 }
diff --git a/packages/bootstrap/scss/datetime/_variables.scss b/packages/bootstrap/scss/datetime/_variables.scss
@@ -1,30 +1,2 @@
 // DateTime
 $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-pressed-bg: $button-active-bg !default;
-$datetime-select-pressed-text: $button-active-text !default;
-$datetime-select-pressed-border: $button-active-border !default;
-$datetime-select-pressed-gradient: $button-active-gradient !default;
diff --git a/packages/classic/scss/datetime/_index.scss b/packages/classic/scss/datetime/_index.scss
@@ -2,12 +2,13 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
 
 
 // Component

diff --git a/packages/classic/scss/datetime/_variables.scss b/packages/classic/scss/datetime/_variables.scss
@@ -1,30 +1,2 @@
 // DateTime
 $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-pressed-bg: $button-active-bg !default;
-$datetime-select-pressed-text: $button-active-text !default;
-$datetime-select-pressed-border: $button-active-border !default;
-$datetime-select-pressed-gradient: $button-active-gradient !default;
diff --git a/packages/default/scss/datetime/_index.scss b/packages/default/scss/datetime/_index.scss
@@ -2,12 +2,13 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
 
 
 // Component

diff --git a/packages/default/scss/datetime/_layout.scss b/packages/default/scss/datetime/_layout.scss
@@ -1,40 +1,27 @@
-@include exports("datetime/layout") {
+@include exports( "datetimepicker/layout" ) {
 
-    // Datetimepicker
+    // Datetime picker
     .k-datetimepicker {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
-        text-align: left;
+        text-align: start;
         white-space: nowrap;
-        background: none;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        // Wrappers
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-            overflow: hidden;
-        }
-
 
         // Input
         .k-input {}
@@ -66,50 +53,55 @@
             justify-content: center;
             box-sizing: border-box;
         }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-        }
     }
 
+
+    // Datetime popup
+    .k-datetime-popup,
     .k-datetime-container {
 
+        // Wrap
         .k-datetime-wrap {
             width: $datetime-width;
             overflow: hidden;
         }
+        .k-date-tab {
+            .k-datetime-selector {
+                transform: translateX(0);
+            }
+        }
+        .k-time-tab {
+            .k-datetime-selector {
+                transform: translateX(-100%);
+            }
+        }
 
+        // Datetime button group
         .k-datetime-buttongroup {
-            padding: $button-padding-x;
+            padding: $actions-padding-y $actions-padding-x;
         }
 
+        // Datetime selector
         .k-datetime-selector {
             display: flex;
             transition: transform .2s;
         }
 
+        // Inner wraps
         .k-datetime-calendar-wrap,
         .k-datetime-time-wrap {
             text-align: center;
             flex: 0 0 $datetime-width;
         }
 
-        .k-timeselector {
-            outline: none;
-        }
-
-        .k-time-list-container {
-            justify-content: center;
+        // Calendar
+        .k-datetime-calendar-wrap .k-calendar {
+            border-width: 0;
         }
 
-        .k-time-tab {
-
-            .k-datetime-selector {
-                transform: translateX(-100%);
-            }
+        // Time
+        .k-datetime-time-wrap .k-timeselector {
+            border-width: 0;
         }
 
         .k-rtl &,