From eb21b75e4bf965f248d739428f5ee321535514e4 Mon Sep 17 00:00:00 2001 From: joneff Date: Tue, 28 Dec 2021 17:54:35 +0200 Subject: [PATCH] fix(dropdown-list): update styles to match universal v4 rendering --- .../bootstrap/scss/dropdownlist/_layout.scss | 9 +- .../default/scss/dropdownlist/_layout.scss | 92 ++++++--------- .../default/scss/dropdownlist/_theme.scss | 108 ++++++------------ .../material/scss/dropdownlist/_layout.scss | 13 +-- .../material/scss/dropdownlist/_theme.scss | 31 ----- packages/material/scss/input/_variables.scss | 4 +- 6 files changed, 77 insertions(+), 180 deletions(-) diff --git a/packages/bootstrap/scss/dropdownlist/_layout.scss b/packages/bootstrap/scss/dropdownlist/_layout.scss index 5daebbd22e4..9bcf5fc399f 100644 --- a/packages/bootstrap/scss/dropdownlist/_layout.scss +++ b/packages/bootstrap/scss/dropdownlist/_layout.scss @@ -1,13 +1,10 @@ @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss"; -@include exports("dropdownlist/layout/bootstrap") { +@include exports( "dropdownlist/layout/bootstrap" ) { - // Dropdown + // Dropdown list .k-dropdown { - - .k-dropdown-wrap { - transition: $transition; - } + transition: $transition; } } diff --git a/packages/default/scss/dropdownlist/_layout.scss b/packages/default/scss/dropdownlist/_layout.scss index 8e3cadaa114..4dd5ba91017 100644 --- a/packages/default/scss/dropdownlist/_layout.scss +++ b/packages/default/scss/dropdownlist/_layout.scss @@ -2,70 +2,55 @@ // Dropdown list .k-dropdown { + @include border-radius( $input-border-radius ); width: $input-default-width; - border-width: 0; - outline: 0; - background: none; + 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; 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; - .k-dropdown-wrap { - @include border-radius( $input-border-radius ); - padding: 0; - width: 100%; - display: flex; - flex-flow: row nowrap; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - position: relative; - transition: all .1s ease; // sass-lint:disable-line no-transition-all - cursor: pointer; - outline: 0; - overflow: hidden; - - // Input - .k-input {} + // Input + .k-input {} - // Select - .k-select { - padding: $picker-select-padding-y $picker-select-padding-x; - width: if( $use-picker-select-width, $button-inner-calc-size, null ); - border-width: 0; - border-inline-start-width: $picker-select-border-width; - border-color: transparent; - box-sizing: border-box; - border-style: solid; - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - text-align: center; - cursor: pointer; - } + // Loading icon + .k-i-loading { + width: $input-icon-width; + height: $input-icon-height; } - } - - - // RTL - .k-dropdown.k-rtl, - .k-dropdown[dir="rtl"], - .k-rtl .k-dropdown, - [dir="rtl"] .k-dropdown { - text-align: right; + // Select + .k-select { + padding: $picker-select-padding-y $picker-select-padding-x; + width: if( $use-picker-select-width, $spinner-width, null ); + border-width: 0; + border-inline-start-width: $picker-select-border-width; + border-style: solid; + border-color: transparent; + box-sizing: border-box; + outline: 0; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + flex: 0 0 auto; + cursor: pointer; + } } @@ -74,16 +59,13 @@ .k-dropdown-operator { width: auto; - .k-dropdown-wrap { - .k-input { - display: none; - } - .k-select { - width: $button-inner-calc-size; - height: $button-inner-calc-size; - } + .k-input { + display: none; + } + .k-select { + width: $button-inner-calc-size; + height: $button-inner-calc-size; } - } diff --git a/packages/default/scss/dropdownlist/_theme.scss b/packages/default/scss/dropdownlist/_theme.scss index c6f46426612..1eb13f03767 100644 --- a/packages/default/scss/dropdownlist/_theme.scss +++ b/packages/default/scss/dropdownlist/_theme.scss @@ -1,78 +1,7 @@ @include exports( "dropdownlist/theme" ) { + // Dropdown list .k-dropdown { - - .k-dropdown-wrap { - @include fill( - $dropdownlist-text, - $dropdownlist-bg, - $dropdownlist-border, - $dropdownlist-gradient - ); - - // Hover state - &:hover, - &.k-state-hover { - @include fill( - $dropdownlist-hovered-text, - $dropdownlist-hovered-bg, - $dropdownlist-hovered-border, - $dropdownlist-hovered-gradient - ); - } - - &.k-state-active {} - - // Focused state - &.k-state-focused { - @include fill( - $dropdownlist-focused-text, - $dropdownlist-focused-bg, - $dropdownlist-focused-border, - $dropdownlist-focused-gradient - ); - @include box-shadow($dropdownlist-focused-shadow); - } - - // Invalid state - &.k-invalid, - &.k-invalid:hover, - &.k-state-invalid { - border-color: $invalid-border; - - .k-input-validation-icon { - color: $invalid-text; - } - - &:focus, - &.k-state-focused { - @include box-shadow($invalid-shadow); - } - } - } - - // Invalid - &.k-state-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - > .k-dropdown-wrap { - border-color: $invalid-border; - - .k-input-validation-icon { - color: $invalid-text; - } - - &:focus, - &.k-state-focused { - @include box-shadow($invalid-shadow); - } - } - } - - } - - // Native select - select.k-dropdown { @include fill( $dropdownlist-text, $dropdownlist-bg, @@ -81,7 +10,8 @@ ); // Hover state - &:hover { + &:hover, + &.k-state-hover { @include fill( $dropdownlist-hovered-text, $dropdownlist-hovered-bg, @@ -90,8 +20,18 @@ ); } - // Focused state - &:focus { + // Focus state + &:focus, + &.k-state-focus { + @include fill( + $dropdownlist-focused-text, + $dropdownlist-focused-bg, + $dropdownlist-focused-border, + $dropdownlist-focused-gradient + ); + @include box-shadow($dropdownlist-focused-shadow); + } + &:focus-within { @include fill( $dropdownlist-focused-text, $dropdownlist-focused-bg, @@ -100,6 +40,24 @@ ); @include box-shadow($dropdownlist-focused-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); + } + } + } } diff --git a/packages/material/scss/dropdownlist/_layout.scss b/packages/material/scss/dropdownlist/_layout.scss index d719686bfc1..53243701cbd 100644 --- a/packages/material/scss/dropdownlist/_layout.scss +++ b/packages/material/scss/dropdownlist/_layout.scss @@ -1,18 +1,9 @@ @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss"; -@include exports("dropdownlist/layout/material") { +@include exports( "dropdownlist/layout/material" ) { + // Dropdown list .k-dropdown { - .k-dropdown-wrap { - @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important - border-width: $input-border-width 0; - border-top-color: transparent !important; // sass-lint:disable-line no-important - } - } - - - // Native select - select.k-dropdown { @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important border-width: $input-border-width 0; border-top-color: transparent !important; // sass-lint:disable-line no-important diff --git a/packages/material/scss/dropdownlist/_theme.scss b/packages/material/scss/dropdownlist/_theme.scss index 0000e99fe5f..4e8fc92adb4 100644 --- a/packages/material/scss/dropdownlist/_theme.scss +++ b/packages/material/scss/dropdownlist/_theme.scss @@ -1,32 +1 @@ @import "~@progress/kendo-theme-default/scss/dropdownlist/_theme.scss"; - -@include exports( "dropdownlist/theme/material" ) { - - .k-dropdown { - .k-dropdown-wrap { - - .k-select { - color: $dropdownlist-select-text; - } - - // Hover - &:hover, - &.k-state-hover { - - .k-select { - color: $dropdownlist-select-hovered-text; - } - } - - // Focused - &.k-state-focused, - .k-state-focused > & { - - .k-select { - color: $dropdownlist-select-focused-text; - } - } - } - } - -} diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss index fe6b472e342..e2ea3abb697 100644 --- a/packages/material/scss/input/_variables.scss +++ b/packages/material/scss/input/_variables.scss @@ -78,12 +78,12 @@ $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon- $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default; $picker-select-bg: null !default; -$picker-select-text: $subtle-text !default; +$picker-select-text: null !default; $picker-select-border: null !default; $picker-select-gradient: null !default; $picker-select-hovered-bg: null !default; -$picker-select-hovered-text: $input-text !default; +$picker-select-hovered-text: null !default; $picker-select-hovered-border: null !default; $picker-select-hovered-gradient: null !default;