atst/styles/components/_search_bar.scss
2018-08-03 09:09:07 -04:00

73 lines
1.3 KiB
SCSS

.search-bar {
@include grid-row;
@include panel-base;
@include panel-theme-default;
@include panel-margin;
padding: $gap;
flex-wrap: wrap;
.usa-input {
margin: 0;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
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;
}
&:first-child {
margin-left: 0;
margin-top: 0;
}
}
.search-input {
@include media($medium-screen) {
flex-basis: 50%;
}
@media (min-width:800px) and (max-width:900px) {
flex-basis: auto;
}
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;
}
}
}
}