From d2810c867e08312ed0aa587a21d3bfe9f591c25f Mon Sep 17 00:00:00 2001
From: Zhongxiang Wang <yhen@all-my-life.cn>
Date: Tue, 19 Apr 2022 12:39:08 +0800
Subject: [PATCH] fix(components): [input] fix status icon gap (#7228)

---
 docs/examples/input/mixed-input.vue     |  4 ++--
 packages/components/input/src/input.vue | 20 ++++++++++----------
 packages/theme-chalk/src/input.scss     | 12 +++++++++---
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/docs/examples/input/mixed-input.vue b/docs/examples/input/mixed-input.vue
index c7f06e9731..efd1966af9 100644
--- a/docs/examples/input/mixed-input.vue
+++ b/docs/examples/input/mixed-input.vue
@@ -16,7 +16,7 @@
       class="input-with-select"
     >
       <template #prepend>
-        <el-select v-model="select" placeholder="Select" style="width: 110px">
+        <el-select v-model="select" placeholder="Select" style="width: 115px">
           <el-option label="Restaurant" value="1" />
           <el-option label="Order No." value="2" />
           <el-option label="Tel" value="3" />
@@ -37,7 +37,7 @@
         <el-button :icon="Search" />
       </template>
       <template #append>
-        <el-select v-model="select" placeholder="Select" style="width: 110px">
+        <el-select v-model="select" placeholder="Select" style="width: 115px">
           <el-option label="Restaurant" value="1" />
           <el-option label="Order No." value="2" />
           <el-option label="Tel" value="3" />
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index 5174765a91..a94b24c06c 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -92,17 +92,17 @@
                 {{ textLength }} / {{ attrs.maxlength }}
               </span>
             </span>
+            <el-icon
+              v-if="validateState && validateIcon && needStatusIcon"
+              :class="[
+                nsInput.e('icon'),
+                nsInput.e('validateIcon'),
+                nsInput.is('loading', validateState === 'validating'),
+              ]"
+            >
+              <component :is="validateIcon" />
+            </el-icon>
           </span>
-          <el-icon
-            v-if="validateState && validateIcon && needStatusIcon"
-            :class="[
-              nsInput.e('icon'),
-              nsInput.e('validateIcon'),
-              nsInput.is('loading', validateState === 'validating'),
-            ]"
-          >
-            <component :is="validateIcon" />
-          </el-icon>
         </span>
       </div>
 
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 736d1c3dfd..e74dc56d1f 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -130,8 +130,6 @@
     color: var(--el-input-icon-color);
     font-size: map.get($input-font-size, 'default');
     cursor: pointer;
-    transition: var(--el-transition-color) !important;
-    margin-left: 8px;
 
     &:hover {
       color: var(--el-input-clear-hover-color);
@@ -149,7 +147,7 @@
       background: getCssVar('fill-color', 'blank');
       line-height: initial;
       display: inline-block;
-      padding: 0 5px;
+      padding-left: 8px;
     }
   }
 
@@ -232,6 +230,13 @@
         > :last-child {
           margin-right: 8px;
         }
+
+        > :first-child {
+          &,
+          &.#{$namespace}-input__icon {
+            margin-left: 0;
+          }
+        }
       } @else {
         > :first-child {
           margin-left: 8px;
@@ -246,6 +251,7 @@
     justify-content: center;
     align-items: center;
     transition: all var(--el-transition-duration);
+    margin-left: 8px;
   }
 
   @include e(validateIcon) {