From 8408f7cd906ae4342992fefcf434e817d1f6ffb6 Mon Sep 17 00:00:00 2001 From: joneff Date: Tue, 28 Dec 2021 17:24:03 +0200 Subject: [PATCH] fix(combobox): update styles to match universal v4 rendering --- .../bootstrap/scss/combobox/_variables.scss | 33 +--- .../classic/scss/combobox/_variables.scss | 33 +--- packages/default/scss/combobox/_layout.scss | 51 +++--- packages/default/scss/combobox/_theme.scss | 158 +++++++----------- .../default/scss/combobox/_variables.scss | 33 +--- packages/material/scss/combobox/_layout.scss | 9 +- .../material/scss/combobox/_variables.scss | 33 +--- 7 files changed, 89 insertions(+), 261 deletions(-) diff --git a/packages/bootstrap/scss/combobox/_variables.scss b/packages/bootstrap/scss/combobox/_variables.scss index 80aa31375ae..ad50112beba 100644 --- a/packages/bootstrap/scss/combobox/_variables.scss +++ b/packages/bootstrap/scss/combobox/_variables.scss @@ -1,32 +1 @@ -// Comboboxes -$combobox-select-padding-x: $button-padding-y !default; -$combobox-select-padding-y: $button-padding-y !default; -$combobox-select-width: null !default; - -$combobox-bg: $input-bg !default; -$combobox-text: $input-text !default; -$combobox-border: $input-border !default; - -$combobox-hovered-bg: $input-hovered-bg !default; -$combobox-hovered-text: $input-hovered-text !default; -$combobox-hovered-border: $input-hovered-border !default; - -$combobox-focused-bg: $input-focused-bg !default; -$combobox-focused-text: $input-focused-text !default; -$combobox-focused-border: $input-focused-border !default; -$combobox-focused-shadow: $input-focused-shadow !default; - -$combobox-select-bg: $button-bg !default; -$combobox-select-text: $button-text !default; -$combobox-select-border: $button-border !default; -$combobox-select-gradient: $button-gradient !default; - -$combobox-select-hovered-bg: $button-hovered-bg !default; -$combobox-select-hovered-text: $button-hovered-text !default; -$combobox-select-hovered-border: $button-hovered-border !default; -$combobox-select-hovered-gradient: $button-hovered-gradient !default; - -$combobox-select-pressed-bg: $button-active-bg !default; -$combobox-select-pressed-text: $button-active-text !default; -$combobox-select-pressed-border: $button-active-border !default; -$combobox-select-pressed-gradient: $button-active-gradient !default; +// Combobox diff --git a/packages/classic/scss/combobox/_variables.scss b/packages/classic/scss/combobox/_variables.scss index 7d8ef5fa961..ad50112beba 100644 --- a/packages/classic/scss/combobox/_variables.scss +++ b/packages/classic/scss/combobox/_variables.scss @@ -1,32 +1 @@ -// Comboboxes -$combobox-select-padding-x: $button-padding-y !default; -$combobox-select-padding-y: $button-padding-y !default; -$combobox-select-width: $button-inner-calc-size !default; - -$combobox-bg: $input-bg !default; -$combobox-text: $input-text !default; -$combobox-border: $input-border !default; - -$combobox-hovered-bg: $input-hovered-bg !default; -$combobox-hovered-text: $input-hovered-text !default; -$combobox-hovered-border: $input-hovered-border !default; - -$combobox-focused-bg: $input-focused-bg !default; -$combobox-focused-text: $input-focused-text !default; -$combobox-focused-border: $input-focused-border !default; -$combobox-focused-shadow: $input-focused-shadow !default; - -$combobox-select-bg: $button-bg !default; -$combobox-select-text: $button-text !default; -$combobox-select-border: $button-border !default; -$combobox-select-gradient: $button-gradient !default; - -$combobox-select-hovered-bg: $button-hovered-bg !default; -$combobox-select-hovered-text: $button-hovered-text !default; -$combobox-select-hovered-border: $button-hovered-border !default; -$combobox-select-hovered-gradient: $button-hovered-gradient !default; - -$combobox-select-pressed-bg: $button-active-bg !default; -$combobox-select-pressed-text: $button-active-text !default; -$combobox-select-pressed-border: $button-active-border !default; -$combobox-select-pressed-gradient: $button-active-gradient !default; +// Combobox diff --git a/packages/default/scss/combobox/_layout.scss b/packages/default/scss/combobox/_layout.scss index 8e0dee5ee10..0dd2e0e6794 100644 --- a/packages/default/scss/combobox/_layout.scss +++ b/packages/default/scss/combobox/_layout.scss @@ -1,62 +1,55 @@ -@include exports("combobox/layout") { +@include exports( "combobox/layout" ) { // Combobox .k-combobox { + @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; - background: none; 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%; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - position: relative; - display: flex; - flex-flow: row nowrap; - transition: all .1s ease; // sass-lint:disable-line no-transition-all - outline: 0; - cursor: initial; - overflow: hidden; - } - // Input .k-input {} + + // Loading icon + .k-i-loading { + width: $input-icon-width; + height: $input-icon-height; + } + + // Select .k-select { - padding: $combobox-select-padding-y $combobox-select-padding-x; - width: if( $use-picker-select-width, $combobox-select-width, null ); + 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; - box-sizing: border-box; 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; - text-align: center; cursor: pointer; } - - &[dir="rtl"], - .k-rtl & { - text-align: right; - } } + } diff --git a/packages/default/scss/combobox/_theme.scss b/packages/default/scss/combobox/_theme.scss index 328c2610a10..829e541becd 100644 --- a/packages/default/scss/combobox/_theme.scss +++ b/packages/default/scss/combobox/_theme.scss @@ -1,125 +1,85 @@ -@include exports("combobox/theme") { +@include exports( "combobox/theme" ) { .k-combobox { - - // Normal state - .k-dropdown-wrap { - @include fill( - $combobox-text, - $combobox-bg, - $combobox-border - ); - - // 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); - } - } - } - - .k-select { - @include fill( - $combobox-select-text, - $combobox-select-bg, - $combobox-select-border, - $combobox-select-gradient - ); - } + @include fill( + $input-text, + $input-bg, + $input-border + ); // Hover state - > :hover, - .k-state-hover { + &:hover, + &.k-state-hover { @include fill( - $combobox-hovered-text, - $combobox-hovered-bg, - $combobox-hovered-border + $input-hovered-text, + $input-hovered-bg, + $input-hovered-border ); } - .k-select:hover { + + // Focus state + &:focus, + &.k-state-focus { @include fill( - $combobox-select-hovered-text, - $combobox-select-hovered-bg, - $combobox-select-hovered-border, - $combobox-select-hovered-gradient + $input-focused-text, + $input-focused-bg, + $input-focused-border ); + @include box-shadow( $input-focused-shadow ); } - - // Focus state - > .k-state-focused { + &:focus-within { @include fill( - $combobox-focused-text, - $combobox-focused-bg, - $combobox-focused-border + $input-focused-text, + $input-focused-bg, + $input-focused-border ); - @include box-shadow($combobox-focused-shadow); + @include box-shadow( $input-focused-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); - } - } - } - } + // Invalid state + &.k-invalid, + &.ng-invalid, + &.k-state-invalid { + border-color: $invalid-border; - // Universal rendering - .k-combobox { - &.k-state-hover { - .k-dropdown-wrap { - @include fill( - $combobox-hovered-text, - $combobox-hovered-bg, - $combobox-hovered-border - ); + .k-input-validation-icon { + color: $invalid-text; } - } - &.k-state-focus { - .k-dropdown-wrap { - @include fill( - $combobox-focused-text, - $combobox-focused-bg, - $combobox-focused-border - ); - @include box-shadow($combobox-focused-shadow); + &:focus-within, + &.k-state-focus { + @include box-shadow($invalid-shadow); } } - &.k-invalid { - .k-dropdown-wrap { - border-color: $invalid-border; - .k-input-validation-icon { - color: $invalid-text; - } - } + // Select + .k-select { + @include fill( + $picker-select-text, + $picker-select-bg, + $picker-select-border, + $picker-select-gradient + ); } - - &.k-invalid.k-state-focus { - .k-dropdown-wrap { - @include box-shadow($invalid-shadow); - } + .k-select:hover, + .k-select.k-state-hover { + @include fill( + $picker-select-hovered-text, + $picker-select-hovered-bg, + $picker-select-hovered-border, + $picker-select-hovered-gradient + ); + } + .k-select:active, + .k-select.k-state-active { + @include fill( + $picker-select-pressed-text, + $picker-select-pressed-bg, + $picker-select-pressed-border, + $picker-select-pressed-gradient + ); } } diff --git a/packages/default/scss/combobox/_variables.scss b/packages/default/scss/combobox/_variables.scss index 22d0f414f26..ad50112beba 100644 --- a/packages/default/scss/combobox/_variables.scss +++ b/packages/default/scss/combobox/_variables.scss @@ -1,32 +1 @@ -// Comboboxes -$combobox-select-padding-x: 0px !default; -$combobox-select-padding-y: 0px !default; -$combobox-select-width: $button-inner-calc-size !default; - -$combobox-bg: $input-bg !default; -$combobox-text: $input-text !default; -$combobox-border: $input-border !default; - -$combobox-hovered-bg: $input-hovered-bg !default; -$combobox-hovered-text: $input-hovered-text !default; -$combobox-hovered-border: $input-hovered-border !default; - -$combobox-focused-bg: $input-focused-bg !default; -$combobox-focused-text: $input-focused-text !default; -$combobox-focused-border: $input-focused-border !default; -$combobox-focused-shadow: $input-focused-shadow !default; - -$combobox-select-bg: $button-bg !default; -$combobox-select-text: $button-text !default; -$combobox-select-border: $button-border !default; -$combobox-select-gradient: $button-gradient !default; - -$combobox-select-hovered-bg: $button-hovered-bg !default; -$combobox-select-hovered-text: $button-hovered-text !default; -$combobox-select-hovered-border: $button-hovered-border !default; -$combobox-select-hovered-gradient: $button-hovered-gradient !default; - -$combobox-select-pressed-bg: $button-active-bg !default; -$combobox-select-pressed-text: $button-active-text !default; -$combobox-select-pressed-border: $button-active-border !default; -$combobox-select-pressed-gradient: $button-active-gradient !default; +// Combobox diff --git a/packages/material/scss/combobox/_layout.scss b/packages/material/scss/combobox/_layout.scss index 760f6be523d..479e5ccc663 100644 --- a/packages/material/scss/combobox/_layout.scss +++ b/packages/material/scss/combobox/_layout.scss @@ -2,12 +2,11 @@ @include exports( "combobox/layout/material" ) { + // Combobox .k-combobox { - .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 - } + @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/combobox/_variables.scss b/packages/material/scss/combobox/_variables.scss index facf28e3f01..ad50112beba 100644 --- a/packages/material/scss/combobox/_variables.scss +++ b/packages/material/scss/combobox/_variables.scss @@ -1,32 +1 @@ -// Comboboxes -$combobox-select-padding-x: ($button-padding-y / 2) !default; -$combobox-select-padding-y: $button-padding-y !default; -$combobox-select-width: null !default; - -$combobox-bg: $input-bg !default; -$combobox-text: $input-text !default; -$combobox-border: $input-border !default; - -$combobox-hovered-bg: $input-hovered-bg !default; -$combobox-hovered-text: $input-hovered-text !default; -$combobox-hovered-border: $input-hovered-border !default; - -$combobox-focused-bg: $input-focused-bg !default; -$combobox-focused-text: $input-focused-text !default; -$combobox-focused-border: $input-focused-border !default; -$combobox-focused-shadow: $input-focused-shadow !default; - -$combobox-select-bg: null !default; -$combobox-select-text: $subtle-text !default; -$combobox-select-border: null !default; -$combobox-select-gradient: null !default; - -$combobox-select-hovered-bg: null !default; -$combobox-select-hovered-text: $input-text !default; -$combobox-select-hovered-border: null !default; -$combobox-select-hovered-gradient: null !default; - -$combobox-select-pressed-bg: null !default; -$combobox-select-pressed-text: null !default; -$combobox-select-pressed-border: null !default; -$combobox-select-pressed-gradient: null !default; +// Combobox