fix(input): add styles for validation and loading icons

telerik · Oct 25, 2021 · a2253ec · a2253ec
1 parent 97acba6
commit a2253ec
Show file tree

Hide file tree

Showing 7 changed files with 3 additions and 145 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -116,29 +116,16 @@
     }
 
     // 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;
         flex-flow: row nowrap;
         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
@@ -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
@@ -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;