diff --git a/packages/default/scss/autocomplete/_layout.scss b/packages/default/scss/autocomplete/_layout.scss index 12d3b4394d6..10be71953dd 100644 --- a/packages/default/scss/autocomplete/_layout.scss +++ b/packages/default/scss/autocomplete/_layout.scss @@ -33,26 +33,6 @@ height: $input-icon-height; } - - // Clear value - .k-clear-value { - visibility: hidden; - } - &:hover, - // &:focus-within, - &.k-state-hover, - &.k-state-focused, - &.k-state-focus { - .k-clear-value { - visibility: visible; - } - } - &:focus-within { - .k-clear-value { - visibility: visible; - } - } - } diff --git a/packages/default/scss/combobox/_layout.scss b/packages/default/scss/combobox/_layout.scss index 2d4ce4c454f..58a097c67a3 100644 --- a/packages/default/scss/combobox/_layout.scss +++ b/packages/default/scss/combobox/_layout.scss @@ -36,28 +36,6 @@ // Input .k-input {} - - // Clear value - .k-clear-value { - visibility: hidden; - } - &:hover, - // &:focus-within, - &.k-state-hover, - &.k-state-focused, - &.k-state-focus, - .k-dropdown-wrap.k-state-hover, - .k-dropdown-wrap.k-state-focused { - .k-clear-value { - visibility: visible; - } - } - &:focus-within { - .k-clear-value { - visibility: visible; - } - } - // Select .k-select { @include border-right-radius-only( $input-border-radius ); diff --git a/packages/default/scss/datetime/_layout.scss b/packages/default/scss/datetime/_layout.scss index c38f8050bc3..aa5fc7cf794 100644 --- a/packages/default/scss/datetime/_layout.scss +++ b/packages/default/scss/datetime/_layout.scss @@ -77,26 +77,11 @@ } - // Validation icon - .k-i-warning { - position: absolute; - right: $padding-x; - top: 50%; - transform: translateY(-50%); - overflow: visible; - } - - // RTL .k-rtl &, &[dir="rtl"] { text-align: right; - .k-dateinput-wrap .k-i-warning { - left: $padding-x; - right: auto; - } - .k-select { @include border-left-radius-only( $input-border-radius ); border-width: 0 $picker-select-border-width 0 0; @@ -184,16 +169,6 @@ } - // Validation icon - .k-i-warning { - position: absolute; - top: 50%; - right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm }); - transform: translateY(-50%); - overflow: visible; - } - - // RTL .k-rtl &, &[dir="rtl"] { @@ -203,11 +178,6 @@ @include border-left-radius-only( $input-border-radius ); border-width: 0 $picker-select-border-width 0 0; } - - .k-i-warning { - right: auto; - left: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm }); - } } } @@ -279,16 +249,6 @@ } - // Validation icon - .k-i-warning { - position: absolute; - top: 50%; - right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm }); - transform: translateY(-50%); - overflow: visible; - } - - // RTL .k-rtl &, &[dir="rtl"] { @@ -298,11 +258,6 @@ @include border-left-radius-only( $input-border-radius ); border-width: 0 $picker-select-border-width 0 0; } - - .k-i-warning { - right: auto; - left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm }); - } } } diff --git a/packages/default/scss/dropdownlist/_layout.scss b/packages/default/scss/dropdownlist/_layout.scss index a00d80ccf9b..d1f16e30752 100644 --- a/packages/default/scss/dropdownlist/_layout.scss +++ b/packages/default/scss/dropdownlist/_layout.scss @@ -51,18 +51,6 @@ text-align: center; cursor: pointer; } - - // Clear value - .k-clear-value { - visibility: hidden; - } - &.k-state-focused, - &.k-state-hover, - &:hover { - .k-clear-value { - visibility: visible; - } - } } } diff --git a/packages/default/scss/input/_layout.scss b/packages/default/scss/input/_layout.scss index cacceac1c7c..5dfa98bca30 100644 --- a/packages/default/scss/input/_layout.scss +++ b/packages/default/scss/input/_layout.scss @@ -116,7 +116,9 @@ } // Input with icon styles - .k-input-icon { + .k-input-icon, + .k-input-validation-icon, + .k-input-loading-icon { width: $input-icon-width; height: $input-icon-height; display: inline-flex; @@ -124,21 +126,6 @@ align-items: center; justify-content: center; flex-shrink: 0; - - .k-ie9 & { - position: absolute; - height: 100%; - right: 0; - top: 0; - } - - .k-rtl &, - [dir="rtl"] & { - .k-ie9 & { - left: 0; - right: auto; - } - } } diff --git a/packages/default/scss/multiselect/_layout.scss b/packages/default/scss/multiselect/_layout.scss index 45526dd1af2..69e2c2cf8c5 100644 --- a/packages/default/scss/multiselect/_layout.scss +++ b/packages/default/scss/multiselect/_layout.scss @@ -107,18 +107,10 @@ // Clear value .k-clear-value { - visibility: hidden; position: absolute; top: 0; right: 0; } - &:hover, - &.k-state-hover, - &.k-state-focused { - .k-clear-value { - visibility: visible; - } - } // Select > .k-select { @@ -140,17 +132,6 @@ right: $multiselect-clear-right; } - - &.k-state-hover, - &.k-state-focused, - &.k-state-focus { - > .k-multiselect-wrap { - .k-clear-value { - visibility: visible; - } - } - } - &[dir="rtl"], .k-rtl & { text-align: right; diff --git a/packages/default/scss/numerictextbox/_layout.scss b/packages/default/scss/numerictextbox/_layout.scss index aa10c06939d..a1d6b347fda 100644 --- a/packages/default/scss/numerictextbox/_layout.scss +++ b/packages/default/scss/numerictextbox/_layout.scss @@ -81,23 +81,12 @@ top: -$spinner-icon-offset; } - .k-i-warning { - align-self: center; - margin-right: $spacer-x / 2; - } - // RTL .k-rtl &, &[dir="rtl"] { text-align: right; - .k-numeric-wrap .k-i-warning { - align-self: center; - margin-right: 0; - margin-left: $spacer-x / 2; - } - .k-select { @include border-left-radius-only( $input-border-radius ); border-width: 0 $picker-select-border-width 0 0;