mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-25 16:23:09 +08:00
Code Issues Actions 36 Packages Projects Releases Wiki Activity

chore: Adjust search style (#23406)

Browse Source 
* chore: Adjust search style

* fix lint

* Update demo.test.js.snap

* update style

* update cover area

* area it
This commit is contained in:
二货机器人 2020-04-21 09:41:09 +08:00 committed by GitHub
parent 757c57622b
commit ac7865a6fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/config-provider/demo/size.md
View File

@ -47,7 +47,7 @@ const FormSizeDemo = () => {
<Input /> <Input />
</div> </div>
<div className="example"> <div className="example">
<Input.Search /> <Input.Search allowClear />
</div> </div>
<div className="example"> <div className="example">
<Select defaultValue="demo" options={[{ value: 'demo' }]} /> <Select defaultValue="demo" options={[{ value: 'demo' }]} />

47
components/input/style/search-input.less
View File

@ -5,14 +5,61 @@
@search-prefix: ~'@{ant-prefix}-input-search'; @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} { .@{search-prefix} {
&-icon { &-icon {
margin-left: 0.5em;
color: @text-color-secondary; color: @text-color-secondary;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: @input-icon-hover-color; 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 { &-enter-button {