app/assets/stylesheets/modules/map.scss
$min-map-height: 400px;
.maps-page-container {
overflow-x: hidden;
position: relative;
@media screen and (min-width: $small-desktop-min) {
@include flexbox();
@include justify-content(space-between);
}
@media screen and (max-width: $tablet-max) {
&.with-filters-collapsed {
overflow-y: hidden;
}
}
}
.maps-content-container {
position: relative;
@media screen and (min-width: $small-desktop-min) {
@include flexbox();
@include flex-direction(column);
@include justify-content(space-between);
}
}
.map-container {
flex: 1 1 100%;
min-height: $min-map-height;
position: relative;
@media screen and (orientation: portrait) {
height: calc(100vh - #{$heatmap-height-mobile} - #{$nav-height-mobile});
}
}
.map {
height: calc(100vh - #{$heatmap-height-mobile} - #{$nav-height-mobile});
min-height: $min-map-height;
width: 100vw;
@media screen and (min-width: $small-desktop-min) {
height: 100%;
width: calc(100vw - #{$filters-width});
}
}