aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-03-21 15:44:39 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-03-21 15:44:39 +0100
commitf60fc288ce606bb217d3912a09fff083f0a816e8 (patch)
tree5463914c1e5f913c0247aeb18c8ae58920da3891 /src
parent777a75aa80f58566b43bba04db04a3d1cc23c66b (diff)
Migrate Search styles
Diffstat (limited to 'src')
-rw-r--r--src/client/react/components/container/Search.js10
-rw-r--r--src/client/react/components/container/Search.scss42
2 files changed, 48 insertions, 4 deletions
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index c968957..edaf72c 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -33,6 +33,8 @@ import Menu from './Menu';
import Results from './Results';
import IconFromUserType from '../presentational/IconFromUserType';
+import styles from './Search.scss';
+
class Search extends React.Component {
static propTypes = {
results: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -143,10 +145,10 @@ class Search extends React.Component {
searchText === users.byId[urlUser].value;
return (
- <div className="search">
- <div className={classnames('search-overflow', { 'search--has-focus': hasFocus })}>
- <div className="search__input-wrapper">
- <div className="search__icon-wrapper">
+ <div className={styles.Search}>
+ <div className={classnames(styles.overflow, { [styles.hasFocus]: hasFocus })}>
+ <div className={styles.inputWrapper}>
+ <div className={styles.iconWrapper}>
<IconFromUserType
userType={isExactMatch ? users.byId[urlUser].type : null}
defaultIcon={<SearchIcon />}
diff --git a/src/client/react/components/container/Search.scss b/src/client/react/components/container/Search.scss
new file mode 100644
index 0000000..ef629c2
--- /dev/null
+++ b/src/client/react/components/container/Search.scss
@@ -0,0 +1,42 @@
+.Search {
+ height: 54px;
+ position: relative;
+
+ .overflow {
+ border-radius: 2px;
+ background-color: white;
+ position: absolute;
+ width: 100%;
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
+
+ &.hasFocus {
+ box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
+ }
+
+ .inputWrapper {
+ display: flex;
+ height: 54px;
+
+ .iconWrapper {
+ height: 54px;
+ padding: 15px;
+
+ svg {
+ height: 24px;
+ width: 24px;
+ }
+ }
+
+ input {
+ border: 0;
+ background-color: transparent;
+ flex-grow: 1;
+ height: inherit;
+ padding: 16px;
+ padding-left: 0px;
+ font-size: 16px;
+ outline: none;
+ }
+ }
+ }
+}