feat(date-picker): add size, rounded and full customization to date p…

…icker

BREAKING CHANGE: Use high-level input for date picker base

Date picker reuses the input base component size, rounded and fill
component options.

packages/bootstrap/scss/datepicker/_layout.scss

@@ -1,10 +1 @@
 @import "~@progress/kendo-theme-default/scss/datepicker/_layout.scss";
-
-@include exports( "datepicker/layout/bootstrap" ) {
-
-    // Date picker
-    .k-datepicker {
-        transition: $transition;
-    }
-
-}

packages/default/scss/datepicker/_layout.scss

@@ -1,54 +1,6 @@
-@include exports( "datepicker/layout" ) {
+@include exports("datepicker/layout") {
 
     // Date picker
-    .k-datepicker {
-        @include border-radius( $kendo-input-border-radius );
-        width: $kendo-input-default-width;
-        border-width: $kendo-input-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: start;
-        white-space: nowrap;
-        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;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            padding: 0;
-            width: if( $use-picker-select-width, $kendo-input-spinner-width, null );
-            border-width: 0;
-            border-inline-start-width: $kendo-input-button-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            cursor: pointer;
-        }
-    }
+    .k-datepicker {}
 
 }

packages/default/scss/datepicker/_theme.scss

@@ -1,87 +1,6 @@
-@include exports( "datepicker/theme" ) {
+@include exports("datepicker/theme") {
 
     // Date picker
-    .k-datepicker {
-        @include fill(
-            $kendo-input-text,
-            $kendo-input-bg,
-            $kendo-input-border
-        );
-
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $kendo-input-hover-text,
-                $kendo-input-hover-bg,
-                $kendo-input-hover-border
-            );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-state-focus {
-            @include fill(
-                $kendo-input-focus-text,
-                $kendo-input-focus-bg,
-                $kendo-input-focus-border
-            );
-            @include box-shadow( $kendo-input-focus-shadow );
-        }
-        &:focus-within {
-            @include fill(
-                $kendo-input-focus-text,
-                $kendo-input-focus-bg,
-                $kendo-input-focus-border
-            );
-            @include box-shadow( $kendo-input-focus-shadow );
-        }
-
-
-        // Invalid state
-        &.k-invalid,
-        &.ng-invalid,
-        &.k-state-invalid {
-            border-color: $invalid-border;
-
-            .k-input-validation-icon {
-                color: $invalid-text;
-            }
-
-            &:focus-within,
-            &.k-state-focus {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-
-
-        // Spinner
-        .k-select {
-            @include fill(
-                $kendo-button-text,
-                $kendo-button-bg,
-                $kendo-button-border,
-                $kendo-button-gradient
-            );
-        }
-        .k-select:hover,
-        .k-select.k-state-hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-        }
-        .k-select:active,
-        .k-select.k-state-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-        }
-    }
+    .k-datepicker {}
 
 }

packages/default/scss/forms/_layout.scss

@@ -141,7 +141,6 @@
 
 
         .k-multiselect,
-        .k-datepicker,
         .k-datetimepicker,
         .k-timepicker,
         .k-floating-label-container {

packages/material/scss/datepicker/_layout.scss

@@ -1,12 +1 @@
 @import "~@progress/kendo-theme-default/scss/datepicker/_layout.scss";
-
-@include exports( "datepicker/layout/material" ) {
-
-    // Date picker
-    .k-datepicker {
-        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
-        border-width: $kendo-input-border-width 0;
-        border-top-color: transparent !important; // sass-lint:disable-line no-important
-    }
-
-}