From f12f787c61171768046adfd49df3f60ed41e399a Mon Sep 17 00:00:00 2001 From: joneff Date: Thu, 6 Jan 2022 09:03:32 +0200 Subject: [PATCH] fix(numeric): convert styles to v4 universal rendering --- .../scss/numerictextbox/_layout.scss | 9 +- .../scss/numerictextbox/_variables.scss | 27 ---- .../scss/numerictextbox/_variables.scss | 27 ---- .../default/scss/numerictextbox/_layout.scss | 36 ++--- .../default/scss/numerictextbox/_theme.scss | 148 ++++++++---------- .../scss/numerictextbox/_variables.scss | 27 ---- .../material/scss/numerictextbox/_layout.scss | 9 +- .../scss/numerictextbox/_variables.scss | 27 ---- 8 files changed, 79 insertions(+), 231 deletions(-) diff --git a/packages/bootstrap/scss/numerictextbox/_layout.scss b/packages/bootstrap/scss/numerictextbox/_layout.scss index 48c40f34d36..37aaed359d0 100644 --- a/packages/bootstrap/scss/numerictextbox/_layout.scss +++ b/packages/bootstrap/scss/numerictextbox/_layout.scss @@ -2,14 +2,9 @@ @include exports( "numerictextbox/layout/bootstrap" ) { - // Numeric + // Numeric textbox .k-numerictextbox { - - .k-select, - .k-numeric-wrap { - transition: $transition; - } - + transition: $transition; } } diff --git a/packages/bootstrap/scss/numerictextbox/_variables.scss b/packages/bootstrap/scss/numerictextbox/_variables.scss index 93d5d053a90..07b94ce0f49 100644 --- a/packages/bootstrap/scss/numerictextbox/_variables.scss +++ b/packages/bootstrap/scss/numerictextbox/_variables.scss @@ -1,28 +1 @@ // Numeric textbox -$numeric-bg: $input-bg !default; -$numeric-text: $input-text !default; -$numeric-border: $input-border !default; - -$numeric-hovered-bg: $input-hovered-bg !default; -$numeric-hovered-text: $input-hovered-text !default; -$numeric-hovered-border: $input-hovered-border !default; - -$numeric-focused-bg: $input-focused-bg !default; -$numeric-focused-text: $input-focused-text !default; -$numeric-focused-border: $input-focused-border !default; -$numeric-focused-shadow: $input-focused-shadow !default; - -$numeric-button-bg: $button-bg !default; -$numeric-button-text: $button-text !default; -$numeric-button-border: $button-border !default; -$numeric-button-gradient: $button-gradient !default; - -$numeric-button-hovered-bg: $button-hovered-bg !default; -$numeric-button-hovered-text: $button-hovered-text !default; -$numeric-button-hovered-border: $button-hovered-border !default; -$numeric-button-hovered-gradient: $button-hovered-gradient !default; - -$numeric-button-pressed-bg: $button-active-bg !default; -$numeric-button-pressed-text: $button-active-text !default; -$numeric-button-pressed-border: $button-active-border !default; -$numeric-button-pressed-gradient: $button-active-gradient !default; diff --git a/packages/classic/scss/numerictextbox/_variables.scss b/packages/classic/scss/numerictextbox/_variables.scss index 93d5d053a90..07b94ce0f49 100644 --- a/packages/classic/scss/numerictextbox/_variables.scss +++ b/packages/classic/scss/numerictextbox/_variables.scss @@ -1,28 +1 @@ // Numeric textbox -$numeric-bg: $input-bg !default; -$numeric-text: $input-text !default; -$numeric-border: $input-border !default; - -$numeric-hovered-bg: $input-hovered-bg !default; -$numeric-hovered-text: $input-hovered-text !default; -$numeric-hovered-border: $input-hovered-border !default; - -$numeric-focused-bg: $input-focused-bg !default; -$numeric-focused-text: $input-focused-text !default; -$numeric-focused-border: $input-focused-border !default; -$numeric-focused-shadow: $input-focused-shadow !default; - -$numeric-button-bg: $button-bg !default; -$numeric-button-text: $button-text !default; -$numeric-button-border: $button-border !default; -$numeric-button-gradient: $button-gradient !default; - -$numeric-button-hovered-bg: $button-hovered-bg !default; -$numeric-button-hovered-text: $button-hovered-text !default; -$numeric-button-hovered-border: $button-hovered-border !default; -$numeric-button-hovered-gradient: $button-hovered-gradient !default; - -$numeric-button-pressed-bg: $button-active-bg !default; -$numeric-button-pressed-text: $button-active-text !default; -$numeric-button-pressed-border: $button-active-border !default; -$numeric-button-pressed-gradient: $button-active-gradient !default; diff --git a/packages/default/scss/numerictextbox/_layout.scss b/packages/default/scss/numerictextbox/_layout.scss index e05956bca95..ce3c5fd2560 100644 --- a/packages/default/scss/numerictextbox/_layout.scss +++ b/packages/default/scss/numerictextbox/_layout.scss @@ -1,39 +1,27 @@ -@include exports("numerictextbox/layout") { +@include exports( "numerictextbox/layout" ) { // Numeric textbox .k-numerictextbox { + @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-numeric-wrap { - @include border-radius( $input-border-radius ); - padding: 0; - width: 100%; - border-width: $input-border-width; - border-style: solid; - box-sizing: border-box; - position: relative; - transition: all .1s ease; // sass-lint:disable-line no-transition-all - cursor: default; - outline: 0; - display: flex; - flex-flow: row nowrap; - overflow: hidden; - } - // Input .k-input { @@ -49,6 +37,7 @@ border-inline-start-width: $picker-select-border-width; border-style: solid; box-sizing: border-box; + outline: 0; display: flex; flex-direction: column; align-items: stretch; @@ -81,13 +70,6 @@ .k-link-decrease .k-icon { top: -$spinner-icon-offset; } - - - // RTL - .k-rtl &, - &[dir="rtl"] { - text-align: right; - } } } diff --git a/packages/default/scss/numerictextbox/_theme.scss b/packages/default/scss/numerictextbox/_theme.scss index 65aae11b761..a9daf0a599e 100644 --- a/packages/default/scss/numerictextbox/_theme.scss +++ b/packages/default/scss/numerictextbox/_theme.scss @@ -1,107 +1,87 @@ @include exports( "numerictextbox/theme" ) { - // Numeric + // Numeric textbox .k-numerictextbox { - - .k-i-warning { - color: $error; + @include fill( + $input-text, + $input-bg, + $input-border + ); + + // Hover state + &:hover, + &.k-state-hover { + @include fill( + $input-hovered-text, + $input-hovered-bg, + $input-hovered-border + ); } - // Normal state - .k-numeric-wrap { + // Focus state + &:focus, + &.k-state-focus { @include fill( - $numeric-text, - $numeric-bg, - $numeric-border + $input-focused-text, + $input-focused-bg, + $input-focused-border ); + @include box-shadow( $input-focused-shadow ); + } + &:focus-within { + @include fill( + $input-focused-text, + $input-focused-bg, + $input-focused-border + ); + @include box-shadow( $input-focused-shadow ); + } - // Hover state - &:hover, - &.k-state-hover { - @include fill( - $numeric-hovered-text, - $numeric-hovered-bg, - $numeric-hovered-border - ); - } - + // Invalid state + &.k-invalid, + &.ng-invalid, + &.k-state-invalid { + border-color: $invalid-border; - // Focus state - &.k-state-focused { - @include fill( - $numeric-focused-text, - $numeric-focused-bg, - $numeric-focused-border - ); - @include box-shadow($numeric-focused-shadow); + .k-input-validation-icon { + color: $invalid-text; } - // 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); - } + &:focus-within, + &.k-state-focus { + @include box-shadow($invalid-shadow); } } - // Select buttons + // Spinner .k-select { @include fill( - $numeric-button-text, - $numeric-button-bg, - $numeric-button-border, - $numeric-button-gradient + $picker-select-text, + $picker-select-bg, + $picker-select-border, + $picker-select-gradient ); - - .k-link:hover, - .k-link.k-state-hover { - @include fill( - $numeric-button-hovered-text, - $numeric-button-hovered-bg, - $numeric-button-hovered-border, - $numeric-button-hovered-gradient - ); - } - - .k-link:active, - .k-link.k-state-active, - .k-link.k-state-selected { - @include fill( - $numeric-button-pressed-text, - $numeric-button-pressed-bg, - $numeric-button-pressed-border, - $numeric-button-pressed-gradient - ); - } } - - - // Invalid state - &.k-state-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - .k-numeric-wrap { - border-color: $invalid-border; - - .k-input-validation-icon { - color: $invalid-text; - } - - &.k-state-focused { - @include box-shadow($invalid-shadow); - } - } + .k-link:hover, + .k-link.k-state-hover { + @include fill( + $picker-select-hovered-text, + $picker-select-hovered-bg, + $picker-select-hovered-border, + $picker-select-hovered-gradient + ); + } + .k-link:active, + .k-link.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/numerictextbox/_variables.scss b/packages/default/scss/numerictextbox/_variables.scss index efdbba3b42c..2a650c84ecf 100644 --- a/packages/default/scss/numerictextbox/_variables.scss +++ b/packages/default/scss/numerictextbox/_variables.scss @@ -1,28 +1 @@ // Numeric Textbox -$numeric-bg: $input-bg !default; -$numeric-text: $input-text !default; -$numeric-border: $input-border !default; - -$numeric-hovered-bg: $input-hovered-bg !default; -$numeric-hovered-text: $input-hovered-text !default; -$numeric-hovered-border: $input-hovered-border !default; - -$numeric-focused-bg: $input-focused-bg !default; -$numeric-focused-text: $input-focused-text !default; -$numeric-focused-border: $input-focused-border !default; -$numeric-focused-shadow: $input-focused-shadow !default; - -$numeric-button-bg: $button-bg !default; -$numeric-button-text: $button-text !default; -$numeric-button-border: $button-border !default; -$numeric-button-gradient: $button-gradient !default; - -$numeric-button-hovered-bg: $button-hovered-bg !default; -$numeric-button-hovered-text: $button-hovered-text !default; -$numeric-button-hovered-border: $button-hovered-border !default; -$numeric-button-hovered-gradient: $button-hovered-gradient !default; - -$numeric-button-pressed-bg: $button-active-bg !default; -$numeric-button-pressed-text: $button-active-text !default; -$numeric-button-pressed-border: $button-active-border !default; -$numeric-button-pressed-gradient: $button-active-gradient !default; diff --git a/packages/material/scss/numerictextbox/_layout.scss b/packages/material/scss/numerictextbox/_layout.scss index d5d8638e4cf..5a9d08a6e7d 100644 --- a/packages/material/scss/numerictextbox/_layout.scss +++ b/packages/material/scss/numerictextbox/_layout.scss @@ -2,12 +2,11 @@ @include exports("numerictextbox/layout/material") { + // Numeric textbox .k-numerictextbox { - .k-numeric-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/numerictextbox/_variables.scss b/packages/material/scss/numerictextbox/_variables.scss index ad333fa4040..07b94ce0f49 100644 --- a/packages/material/scss/numerictextbox/_variables.scss +++ b/packages/material/scss/numerictextbox/_variables.scss @@ -1,28 +1 @@ // Numeric textbox -$numeric-bg: $input-bg !default; -$numeric-text: $input-text !default; -$numeric-border: $input-border !default; - -$numeric-hovered-bg: $input-hovered-bg !default; -$numeric-hovered-text: $input-hovered-text !default; -$numeric-hovered-border: $input-hovered-border !default; - -$numeric-focused-bg: $input-focused-bg !default; -$numeric-focused-text: $input-focused-text !default; -$numeric-focused-border: $input-focused-border !default; -$numeric-focused-shadow: $input-focused-shadow !default; - -$numeric-button-bg: null !default; -$numeric-button-text: $subtle-text !default; -$numeric-button-border: null !default; -$numeric-button-gradient: null !default; - -$numeric-button-hovered-bg: null !default; -$numeric-button-hovered-text: $input-text !default; -$numeric-button-hovered-border: null !default; -$numeric-button-hovered-gradient: null !default; - -$numeric-button-pressed-bg: null !default; -$numeric-button-pressed-text: $primary !default; -$numeric-button-pressed-border: null !default; -$numeric-button-pressed-gradient: null !default;