From f60fc288ce606bb217d3912a09fff083f0a816e8 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Mar 2018 15:44:39 +0100 Subject: Migrate Search styles --- src/client/react/components/container/Search.js | 10 +++--- src/client/react/components/container/Search.scss | 42 +++++++++++++++++++++++ 2 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 src/client/react/components/container/Search.scss (limited to 'src/client') 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 ( -
-
-
-
+
+
+
+
} 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; + } + } + } +} -- cgit v1.1