app/assets/stylesheets/modules/map-search-control.scss
$search-control-width: 300px;
.search-control {
position: absolute;
right: calc(50% - #{$search-control-width * 0.5});
text-align: center;
top: 6px;
width: $search-control-width;
z-index: 1;
}
// Hide map controls on mobile
.gm-bundled-control {
// Zoom and street view controls
@media screen and (max-width: $tablet-max) {
display: none;
& ~ .gmnoprint {
// Map type controls
display: none;
}
}
// Move controls left to make room for scroll on wider screens
@media screen and (min-width: $wider-mobile + 1px) {
right: 35px !important;
& ~ .gmnoprint {
right: 10px !important;
}
}
}
.search-control__switch {
background: $gray-dark;
border-radius: $input-radius;
color: white;
display: inline-block;
height: 25px;
padding-left: 10px;
@media screen and (max-width: $wider-mobile) {
height: 30px;
}
}
.search-control__button {
border-radius: $input-radius;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 1px;
font-size: 13px;
font-weight: bold;
height: 25px;
line-height: 25px;
text-align: center;
width: 150px;
img {
padding-left: $input-padding;
}
@media screen and (max-width: $wider-mobile) {
font-size: 14px;
height: 30px;
line-height: 30px;
width: 153px;
}
}
input[id="checkbox-search-as-i-move"] {
height: 25px;
vertical-align: top;
@media screen and (max-width: $wider-mobile) {
height: 30px;
}
}
label[for="checkbox-search-as-i-move"] {
cursor: pointer;
display: inline-block;
font-size: 13px;
font-weight: $font-stack-bold;
line-height: 18px;
padding: 4px 25px 3px 0;
@media screen and (max-width: $wider-mobile) {
font-size: 14px;
padding-right: 16px;
padding-top: 6px;
}
}