HabitatMap/AirCasting

View on GitHub
app/assets/stylesheets/modules/map.scss

Summary

Maintainability
Test Coverage
$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});
  }
}