From b137bcaa3ef1f1d3bcfdaa16ee1bf51e15b91499 Mon Sep 17 00:00:00 2001 From: joneff Date: Wed, 3 Nov 2021 12:59:43 +0200 Subject: [PATCH] feat(date-picker): add size, rounded and full customization to date picker BREAKING CHANGE: Use high-level input for date picker base Date picker reuses the input base component size, rounded and fill component options. --- .../bootstrap/scss/datepicker/_layout.scss | 9 -- packages/default/scss/datepicker/_layout.scss | 52 +----------- packages/default/scss/datepicker/_theme.scss | 85 +------------------ packages/default/scss/forms/_layout.scss | 1 - .../material/scss/datepicker/_layout.scss | 11 --- 5 files changed, 4 insertions(+), 154 deletions(-) diff --git a/packages/bootstrap/scss/datepicker/_layout.scss b/packages/bootstrap/scss/datepicker/_layout.scss index 32104f83332..debdf640297 100644 --- a/packages/bootstrap/scss/datepicker/_layout.scss +++ b/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; - } - -} diff --git a/packages/default/scss/datepicker/_layout.scss b/packages/default/scss/datepicker/_layout.scss index 583a2a7a8b8..c9c319f171f 100644 --- a/packages/default/scss/datepicker/_layout.scss +++ b/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 {} } diff --git a/packages/default/scss/datepicker/_theme.scss b/packages/default/scss/datepicker/_theme.scss index 94fcafa1d36..010224878c8 100644 --- a/packages/default/scss/datepicker/_theme.scss +++ b/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 {} } diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss index 40c47db569c..80992bcfeb9 100644 --- a/packages/default/scss/forms/_layout.scss +++ b/packages/default/scss/forms/_layout.scss @@ -141,7 +141,6 @@ .k-multiselect, - .k-datepicker, .k-datetimepicker, .k-timepicker, .k-floating-label-container { diff --git a/packages/material/scss/datepicker/_layout.scss b/packages/material/scss/datepicker/_layout.scss index 08699b4dbae..debdf640297 100644 --- a/packages/material/scss/datepicker/_layout.scss +++ b/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 - } - -}