fbi-cde/crime-data-frontend

// 'holy grail' layout (https://en.wikipedia.org/wiki/Holy_Grail_(web_design))
//
// a few things to note:
// 1. Avoid the IE 10-11 `min-height` bug.
// 2. Set `flex-shrink` to `0` to prevent some browsers from
//    letting these items shrink to smaller than their content's default
//    minimum size. See http://bit.ly/1Mn35US for details.
// 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
//
// scss-lint:disable IdSelector

$sidebar-width: 20rem;

html {
  height: 100%;
}

body,
#app {
  min-height: 100%;
}

.site {
  display: flex;
  flex-direction: column;
  height: 100%; // 1, 3
}

header,
footer {
  flex: none; // 2
}

.site-main {
  flex: 1 0 auto;
}

.site-wrapper {
  display: flex;
  flex: 1 0 auto; // 2
  flex-direction: column;
}

.site-sidebar {
  order: -1;
}

@media #{$breakpoint-max-md} {
  .site-sidebar {
    bottom: 0;
    box-sizing: border-box;
    max-width: 90%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform .2s;
    width: $sidebar-width;
  }

  .site-sidebar.open {
    display: block;
    transform: translateX(0%);
    z-index: 1;
  }
}

@media #{$breakpoint-md} {
  .site-wrapper {
    flex-direction: row;
  }

  .site-content {
    flex: 1;
  }

  .site-sidebar {
    display: block;
    flex: 0 0 $sidebar-width;
  }
}