Commit 10a0c101 authored by Robert Knight's avatar Robert Knight

Rename `simple-search.scss` to match component name

 - Rename `simple-search.scss` and the CSS classes it defines to match
   the name of the module which defines the component structure and
   logic
 - Remove reference to `simple-search-inactive` CSS class which did not
   exist
parent e60bcf96
...@@ -44,16 +44,9 @@ function SearchInput({ alwaysExpanded, query, onSearch }) { ...@@ -44,16 +44,9 @@ function SearchInput({ alwaysExpanded, query, onSearch }) {
} }
return ( return (
<form <form className="search-input__form" name="searchForm" onSubmit={onSubmit}>
className={classnames(
'simple-search-form',
!query && 'simple-search-inactive'
)}
name="searchForm"
onSubmit={onSubmit}
>
<input <input
className={classnames('simple-search-input', { className={classnames('search-input__input', {
'is-expanded': alwaysExpanded || query, 'is-expanded': alwaysExpanded || query,
})} })}
type="text" type="text"
...@@ -67,7 +60,7 @@ function SearchInput({ alwaysExpanded, query, onSearch }) { ...@@ -67,7 +60,7 @@ function SearchInput({ alwaysExpanded, query, onSearch }) {
{!isLoading && ( {!isLoading && (
<button <button
type="button" type="button"
className="simple-search-icon top-bar__btn" className="search-input__icon top-bar__btn"
onClick={() => input.current.focus()} onClick={() => input.current.focus()}
> >
<i className="h-icon-search"></i> <i className="h-icon-search"></i>
......
@import "../../base.scss"; @import "../../base.scss";
@import "../../mixins/icons"; @import "../../mixins/icons";
.simple-search-form { .search-input__form {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
...@@ -9,18 +9,18 @@ ...@@ -9,18 +9,18 @@
color: $gray-dark; color: $gray-dark;
} }
.simple-search-icon { .search-input__icon {
order: 0; order: 0;
} }
:not(:focus) ~ .simple-search-icon { :not(:focus) ~ .search-input__icon {
color: $gray-light; color: $gray-light;
} }
@at-root { @at-root {
$expanded-max-width: 150px; $expanded-max-width: 150px;
.simple-search-input { .search-input__input {
@include outline-on-keyboard-focus; @include outline-on-keyboard-focus;
flex-grow: 1; flex-grow: 1;
......
...@@ -41,8 +41,8 @@ $base-line-height: 20px; ...@@ -41,8 +41,8 @@ $base-line-height: 20px;
@import './components/search-status-bar'; @import './components/search-status-bar';
@import './components/selection-tabs'; @import './components/selection-tabs';
@import './components/share-link'; @import './components/share-link';
@import './components/search-input';
@import './components/sidebar-tutorial'; @import './components/sidebar-tutorial';
@import './components/simple-search';
@import './components/svg-icon'; @import './components/svg-icon';
@import './components/spinner'; @import './components/spinner';
@import './components/tags-input'; @import './components/tags-input';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment