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

47
styles/components/_search_bar.scss
View File

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