83 lines
1.4 KiB
SCSS
83 lines
1.4 KiB
SCSS
.search-bar {
|
|
@include grid-row;
|
|
@include panel-base;
|
|
@include panel-theme-default;
|
|
@include panel-margin;
|
|
padding: $gap;
|
|
flex-wrap: wrap;
|
|
|
|
border-top: none;
|
|
border-bottom: none;
|
|
|
|
@media (min-width:1000px) {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.usa-input {
|
|
margin: $gap 0 0 $gap;
|
|
height: $search-input-height;
|
|
position: relative;
|
|
|
|
label {
|
|
@include hide;
|
|
}
|
|
}
|
|
|
|
.search-bar__filters {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-grow: 1;
|
|
flex-basis: 100%;
|
|
|
|
.usa-input {
|
|
flex-basis: 100%;
|
|
|
|
@media (min-width:1000px) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
|
|
@media (min-width:1000px) {
|
|
margin-left: $gap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
flex-basis: 100%;
|
|
|
|
input[type='search'] {
|
|
width: auto;
|
|
height: $search-input-height;
|
|
width: calc(100% - #{$search-button-width});
|
|
max-width: none;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: $search-input-height;
|
|
width: $search-button-width;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
text-align: center;
|
|
|
|
&:after {
|
|
content: url('#{$asset-path}/icons/search.svg');
|
|
display: inline-block;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|