mdb-ui-kit/scss/_drawer.scss

// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822

// Drawer.
.mdb-layout-drawer {
  position: absolute;
  z-index: 5; // over a header and content
  box-sizing: border-box;
  display: flex;
  max-height: 100%;

  flex-direction: column;
  flex-wrap: nowrap;
  overflow: visible;
  overflow-y: auto;
  color: $mdb-layout-drawer-text-color;
  background: $mdb-layout-drawer-bg-color;

  // Transform offscreen.
  transition: transform;
  will-change: transform;
  transform-style: preserve-3d;
  @include box-shadow($mdb-shadow-2dp);
  @include material-animation-default();

  > * {
    flex-shrink: 0;
  }

  .mdb-nav {
    flex-direction: column;
    align-items: stretch;
    padding-top: 1rem;
  }
}

//----------------
// Sizing and positioning below here

// for left or right drawers, setup widths, heights and positions
@include mdb-drawer-x-closed($mdb-layout-drawer-x-size);

// for top or bottom drawers, setup widths, heights and positions
@include mdb-drawer-y-closed($mdb-layout-drawer-y-size);

// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-in')), as well
//  as responsive sizes (i.e. mdb-drawer-in-md will open once the browser is wider than 768px).
//
//
// mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-in`
//  without a size (for triggered openings).  Since the xs size is 0, instead of using `mdb-drawer-in-xs`
//  (which is mostly meaningless), we create `mdb-drawer-in` meaning always open.
//
//  NOTE: mdb-drawer-in-* uses media-breakpoint-up()
//
// mdb-drawer-out
//  A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
//  strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins.
//
// mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`.
//  Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay.
//
//  NOTE: mdb-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
//

//
// Drawer open positioning, and style options (push is default, overlay is optional)
:not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
  @each $breakpoint in map-keys($grid-breakpoints) {

    @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
    @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);

    @include mdb-drawer-x-overlay-down($breakpoint);
    @include mdb-drawer-y-overlay-down($breakpoint);
  }
}

//----
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
//
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
//
//.kitchen-sink-drawer:not(.mdb-drawer-out) {
//  @each $breakpoint in (xs lg) {
//    // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
//    @include mdb-drawer-x-closed(500px);
//    @include mdb-drawer-x-open-up(500px, $breakpoint);
//  }
//  // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required
//  @include mdb-drawer-x-overlay-down(md);
//}
//
//----
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
//
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
//
//.kitchen-sink-drawer-triggered {
//  @include mdb-drawer-x-closed(500px); // closed by default
//  @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
//  @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
//}