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 }) {
}
return (
<form
className={classnames(
'simple-search-form',
!query && 'simple-search-inactive'
)}
name="searchForm"
onSubmit={onSubmit}
>
<form className="search-input__form" name="searchForm" onSubmit={onSubmit}>
<input
className={classnames('simple-search-input', {
className={classnames('search-input__input', {
'is-expanded': alwaysExpanded || query,
})}
type="text"
......@@ -67,7 +60,7 @@ function SearchInput({ alwaysExpanded, query, onSearch }) {
{!isLoading && (
<button
type="button"
className="simple-search-icon top-bar__btn"
className="search-input__icon top-bar__btn"
onClick={() => input.current.focus()}
>
<i className="h-icon-search"></i>
......
@import "../../base.scss";
@import "../../mixins/icons";
.simple-search-form {
.search-input__form {
display: flex;
flex-flow: row nowrap;
......@@ -9,18 +9,18 @@
color: $gray-dark;
}
.simple-search-icon {
.search-input__icon {
order: 0;
}
:not(:focus) ~ .simple-search-icon {
:not(:focus) ~ .search-input__icon {
color: $gray-light;
}
@at-root {
$expanded-max-width: 150px;
.simple-search-input {
.search-input__input {
@include outline-on-keyboard-focus;
flex-grow: 1;
......
......@@ -41,8 +41,8 @@ $base-line-height: 20px;
@import './components/search-status-bar';
@import './components/selection-tabs';
@import './components/share-link';
@import './components/search-input';
@import './components/sidebar-tutorial';
@import './components/simple-search';
@import './components/svg-icon';
@import './components/spinner';
@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