Merge pull request #1291 from shakti97/redundant-search-button

fix redundant search button issue
This commit is contained in:
Cassie Tarakajian 2020-04-02 15:55:56 -04:00 committed by GitHub
commit 040543c078
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 16 deletions

View File

@ -44,13 +44,9 @@ class Searchbar extends React.Component {
const { searchValue } = this.state;
return (
<div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
<button
type="submit"
className="searchbar__button"
onClick={this.handleSearchEnter}
>
<div className="searchbar__button">
<InlineSVG className="searchbar__icon" src={searchIcon} />
</button>
</div>
<input
className="searchbar__input"
type="text"

View File

@ -15,26 +15,20 @@
}
}
button[type="submit"].searchbar__button {
div.searchbar__button {
background-color: unset;
width: #{31 / $base-font-size}rem;
height: #{36 / $base-font-size}rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
border: 0;
border-right: solid 1px;
@include themify() {
border-right-color: getThemifyVariable('input-border-color');
}
&:enabled:hover {
background-color: unset;
@include themify() {
border-right-color: getThemifyVariable('input-border-color');
}
& g {
fill: unset;
}
}
}
.searchbar__icon {
@ -43,6 +37,7 @@ button[type="submit"].searchbar__button {
width: #{22 / $base-font-size}rem;
height: #{27 / $base-font-size}rem;
transform: scaleX(-1);
padding-top: #{3 / $base-font-size}rem;
@include themify() {
fill: getThemifyVariable('input-text-color');
}