From ac7865a6fc3ff397816f6918fdda995edfd06e8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 21 Apr 2020 09:41:09 +0800
Subject: [PATCH] chore: Adjust search style (#23406)

* chore: Adjust search style

* fix lint

* Update demo.test.js.snap

* update style

* update cover area

* area it
---
 components/config-provider/demo/size.md  |  2 +-
 components/input/style/search-input.less | 47 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/components/config-provider/demo/size.md b/components/config-provider/demo/size.md
index 23376645f9..ba640aa5f2 100644
--- a/components/config-provider/demo/size.md
+++ b/components/config-provider/demo/size.md
@@ -47,7 +47,7 @@ const FormSizeDemo = () => {
           <Input />
         </div>
         <div className="example">
-          <Input.Search />
+          <Input.Search allowClear />
         </div>
         <div className="example">
           <Select defaultValue="demo" options={[{ value: 'demo' }]} />
diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less
index be620925ed..c55fe778d7 100644
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@@ -5,14 +5,61 @@
 
 @search-prefix: ~'@{ant-prefix}-input-search';
 
+.searchInputIcon(@input-height, @font-size) {
+  .@{search-prefix}-icon {
+    @horizontal-padding: (@input-height - @font-size) / 2;
+    padding: 0 @horizontal-padding;
+
+    &::before {
+      transform: translateX(-@horizontal-padding - @border-width-base);
+    }
+
+    &::after {
+      width: @input-height;
+    }
+  }
+}
+
+.searchInputIcon(@input-height-base, @font-size-base);
+
+.@{ant-prefix}-input-affix-wrapper-lg {
+  .searchInputIcon(@input-height-lg, @font-size-lg);
+}
+.@{ant-prefix}-input-affix-wrapper-sm {
+  .searchInputIcon(@input-height-sm, @font-size-sm);
+}
+
 .@{search-prefix} {
   &-icon {
+    margin-left: 0.5em;
     color: @text-color-secondary;
     cursor: pointer;
     transition: all 0.3s;
     &:hover {
       color: @input-icon-hover-color;
     }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      display: block;
+      border-left: @border-width-base @border-style-base @input-border-color;
+      transition: all 0.3s;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      content: '';
+    }
+  }
+
+  &:not(&-enter-button) {
+    padding-right: 0;
   }
 
   &-enter-button {