From c19da4f1a5506e9a537ba0ebc2a3c03001dbf172 Mon Sep 17 00:00:00 2001 From: joneff Date: Wed, 3 Nov 2021 12:55:25 +0200 Subject: [PATCH] feat(date-input): add size, rounded and full customization to date input BREAKING CHANGE: Use high-level input for date input base Date input reuses the input base component size, rounded and fill component options. --- .../bootstrap/scss/dateinput/_layout.scss | 9 -- packages/default/scss/dateinput/_layout.scss | 85 +----------------- packages/default/scss/dateinput/_theme.scss | 86 +------------------ packages/default/scss/forms/_layout.scss | 1 - packages/material/scss/dateinput/_layout.scss | 11 --- 5 files changed, 5 insertions(+), 187 deletions(-) diff --git a/packages/bootstrap/scss/dateinput/_layout.scss b/packages/bootstrap/scss/dateinput/_layout.scss index cac79732c66..998bfe87752 100644 --- a/packages/bootstrap/scss/dateinput/_layout.scss +++ b/packages/bootstrap/scss/dateinput/_layout.scss @@ -1,10 +1 @@ @import "~@progress/kendo-theme-default/scss/dateinput/_layout.scss"; - -@include exports( "dateinput/layout/bootstrap" ) { - - // Date input - .k-dateinput { - transition: $transition; - } - -} diff --git a/packages/default/scss/dateinput/_layout.scss b/packages/default/scss/dateinput/_layout.scss index d3cbe1c1056..69e4be8ca73 100644 --- a/packages/default/scss/dateinput/_layout.scss +++ b/packages/default/scss/dateinput/_layout.scss @@ -1,87 +1,6 @@ -@include exports( "dateinput/layout" ) { +@include exports("dateinput/layout") { // Date input - .k-dateinput { - @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-direction: column; - align-items: stretch; - justify-content: center; - flex: 0 0 auto; - text-align: center; - cursor: pointer; - } - .k-link { - padding: 0; - min-width: $kendo-input-spinner-width; - flex: 1 1 auto; - display: block; - overflow: hidden; - position: relative; - - .k-icon { - position: absolute; - right: 50%; - transform: translateX(50%); - } - } - .k-link-increase .k-icon { - bottom: -$kendo-input-spinner-icon-offset; - } - .k-link-decrease .k-icon { - top: -$kendo-input-spinner-icon-offset; - } - - - // Nested date input - .k-picker-wrap & { - margin: 0 !important; // sass-lint:disable-line no-important - padding: 0 !important; // sass-lint:disable-line no-important - width: 100%; - border-radius: 0 !important; // sass-lint:disable-line no-important - border-width: 0; // sass-lint:disable-line no-important - box-shadow: none !important; // sass-lint:disable-line no-important - flex: 1 1 auto; - } - } + .k-dateinput {} } diff --git a/packages/default/scss/dateinput/_theme.scss b/packages/default/scss/dateinput/_theme.scss index 7ac3575c5ad..6922908088c 100644 --- a/packages/default/scss/dateinput/_theme.scss +++ b/packages/default/scss/dateinput/_theme.scss @@ -1,86 +1,6 @@ -@include exports( "dateinput/theme" ) { +@include exports("dateinput/theme") { - .k-dateinput { - @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-link:hover, - .k-link.k-state-hover { - @include fill( - $kendo-button-hover-text, - $kendo-button-hover-bg, - $kendo-button-hover-border, - $kendo-button-hover-gradient - ); - } - .k-link:active, - .k-link.k-state-active { - @include fill( - $kendo-button-active-text, - $kendo-button-active-bg, - $kendo-button-active-border, - $kendo-button-active-gradient - ); - } - } + // Date input + .k-dateinput {} } diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss index 0babb41a561..40c47db569c 100644 --- a/packages/default/scss/forms/_layout.scss +++ b/packages/default/scss/forms/_layout.scss @@ -141,7 +141,6 @@ .k-multiselect, - .k-dateinput, .k-datepicker, .k-datetimepicker, .k-timepicker, diff --git a/packages/material/scss/dateinput/_layout.scss b/packages/material/scss/dateinput/_layout.scss index 90129fca927..998bfe87752 100644 --- a/packages/material/scss/dateinput/_layout.scss +++ b/packages/material/scss/dateinput/_layout.scss @@ -1,12 +1 @@ @import "~@progress/kendo-theme-default/scss/dateinput/_layout.scss"; - -@include exports( "dateinput/layout/material" ) { - - // Date input - .k-dateinput { - @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 - } - -}