Search: greatly improve design of standalone search section
This commit is contained in:
parent
620aff7107
commit
ad3943af19
3 changed files with 44 additions and 22 deletions
|
@ -11,9 +11,8 @@ const messages = defineMessages({
|
||||||
|
|
||||||
const Search = ({ intl }) => (
|
const Search = ({ intl }) => (
|
||||||
<div className='column search-page'>
|
<div className='column search-page'>
|
||||||
<SearchContainer />
|
|
||||||
|
|
||||||
<ColumnHeader icon='search' title={intl.formatMessage(messages.heading)} />
|
<ColumnHeader icon='search' title={intl.formatMessage(messages.heading)} />
|
||||||
|
<SearchContainer />
|
||||||
<div className='drawer__pager'>
|
<div className='drawer__pager'>
|
||||||
<div className='drawer__inner darker'>
|
<div className='drawer__inner darker'>
|
||||||
<SearchResultsContainer />
|
<SearchResultsContainer />
|
||||||
|
|
|
@ -342,6 +342,10 @@
|
||||||
|
|
||||||
.columns-area--mobile .column {
|
.columns-area--mobile .column {
|
||||||
@include standard-panel;
|
@include standard-panel;
|
||||||
|
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.columns-area--transparent .column {
|
.columns-area--transparent .column {
|
||||||
|
@ -876,4 +880,8 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,21 +1,3 @@
|
||||||
.search-page {
|
|
||||||
.drawer__inner:not(:empty) {
|
|
||||||
min-height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
|
|
||||||
.search-page .search {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px + (285px * 1) + (10px * 1) - 1px) {
|
|
||||||
.search-page .column-header__wrapper {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -41,8 +23,9 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 50%;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
|
transform: translateY(-50%);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
@ -65,7 +48,6 @@
|
||||||
color: var(--highlight-text-color);
|
color: var(--highlight-text-color);
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
top: 5px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--brand-color);
|
color: var(--brand-color);
|
||||||
|
@ -182,3 +164,36 @@
|
||||||
.search__filter-bar:last-child {
|
.search__filter-bar:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-page {
|
||||||
|
.drawer__inner:not(:empty) {
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__input {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 36px 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__icon .svg-icon {
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer__pager {
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue