sforkowany z mirror/soapbox
Improve search input on aliases/list editor pages
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>draftjs
rodzic
916bf7a634
commit
b9153b8866
|
@ -72,8 +72,7 @@ class Search extends React.PureComponent {
|
|||
</label>
|
||||
|
||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
||||
<Icon id='search' className={classNames({ active: !hasValue })} />
|
||||
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
|
||||
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||
</div>
|
||||
<Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||
</div>
|
||||
|
|
|
@ -72,8 +72,7 @@ class Search extends React.PureComponent {
|
|||
</label>
|
||||
|
||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
||||
<Icon id='search' className={classNames({ active: !hasValue })} />
|
||||
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
|
||||
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||
</div>
|
||||
<Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||
</div>
|
||||
|
|
|
@ -18,24 +18,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
&_search {
|
||||
&_search.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
margin: 10px;
|
||||
border-bottom: none;
|
||||
|
||||
.search__input {
|
||||
padding: 7px 30px 6px 10px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
> label {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
> .search__icon .fa {
|
||||
top: 8px;
|
||||
right: 102px !important;
|
||||
}
|
||||
|
||||
> .button {
|
||||
width: 80px;
|
||||
margin-left: 10px;
|
||||
|
|
|
@ -39,8 +39,8 @@
|
|||
flex: 1 1;
|
||||
}
|
||||
|
||||
> .search__icon .fa {
|
||||
right: 102px !important;
|
||||
> .search__icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .button {
|
||||
|
|
|
@ -183,8 +183,8 @@
|
|||
padding: 12px 36px 12px 16px;
|
||||
}
|
||||
|
||||
.search__icon .svg-icon {
|
||||
right: 24px;
|
||||
.search__icon {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue