baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update magic input component style

Browse Source 
1. update close button style when focus the input
2. hide the search icon when focus the input
3. add gaps for multi tags

Change-Id: Ieef48447ccabc87f6088973bcb34a269d144d6d4
This commit is contained in:
Jingwei.Zhang 2023-07-13 14:36:21 +08:00
parent b0101e8a6f
commit 8732b9ef1f
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/MagicInput/index.jsx
View File

@ -578,7 +578,11 @@ class MagicInput extends PureComponent {
/> />
{this.renderMenu()} {this.renderMenu()}
</Col> </Col>
<Col className={styles['search-icon']}> <Col
className={`${styles['search-icon']} ${
isFocus ? styles['search-icon-hidden'] : ''
}`}
>
<SearchOutlined /> <SearchOutlined />
</Col> </Col>
{this.renderClose()} {this.renderClose()}

14
src/components/MagicInput/index.less
View File

@ -19,6 +19,7 @@
.ant-tag { .ant-tag {
height: 24px; height: 24px;
margin-right: 4px; margin-right: 4px;
margin-bottom: 1px;
padding: 0 4px; padding: 0 4px;
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
@ -140,12 +141,19 @@
line-height: 32px; line-height: 32px;
} }
.search-icon-hidden {
display: none;
}
.close-btn-col { .close-btn-col {
height: 24px; position: absolute;
line-height: 24px; top: 0;
right: 0;
height: 30px;
line-height: 30px;
.close-btn { .close-btn {
height: 24px !important; height: 28px !important;
padding: 0; padding: 0;
border: none; border: none;
} }