pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive adjustments to search/filter layout

Browse Source
This commit is contained in:
Andrew Croce 2018-11-07 13:07:57 -05:00 committed by richard-dds
parent 746bdc8b01
commit f6700fb2a6
1 changed files with 24 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
styles/components/_search_bar.scss
View File

@ -6,48 +6,45 @@
padding: $gap; padding: $gap;
flex-wrap: wrap; flex-wrap: wrap;
@include media($large-screen) { @media (min-width:1000px) {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.search-bar__filters {
display: flex;
}
.usa-input { .usa-input {
margin: 0; margin: $gap 0 0 $gap;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
height: $search-input-height; height: $search-input-height;
position: relative; position: relative;
margin-top: $gap;
@include media($large-screen) {
flex-shrink: 1;
flex-basis: auto;
margin-top: 0;
margin-left: $gap;
}
label { label {
@include hide; @include hide;
} }
}
&:first-child { .search-bar__filters {
margin-left: 0; display: flex;
margin-top: 0; flex: 1;
flex-grow: 1;
flex-basis: 100%;
.usa-input {
@media (min-width:1000px) {
margin-top: 0;
}
&:first-child {
margin-left: 0;
@media (min-width:1000px) {
margin-left: $gap;
}
}
} }
} }
.search-input { .search-input {
@include media($medium-screen) { margin-left: 0;
flex-basis: 50%; margin-top: 0;
} flex-basis: 100%;
@media (min-width:800px) and (max-width:900px) {
flex-basis: auto;
}
input[type='search'] { input[type='search'] {
width: auto; width: auto;