separated drawer from general layout classes

scss/_drawer.scss

@@ -3,60 +3,7 @@
 
 //WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
 
-.mdb-layout-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
 
-  // Main layout class.
-  .mdb-layout {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column; // allows for sticky header and footer
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-// Header
-.mdb-layout-header { // navbar
-  // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
-  z-index: 3;
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  max-height: 1000px;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  justify-content: flex-start;
-  transition-property: max-height;
-
-  > .navbar { // heights for common scenarios such as a header with a navbar
-
-    // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
-    //  - with flex a vertical align is a breeze
-    //  - with standard layout, we need to use padding instead of height to layout.
-    min-height: $mdb-layout-mobile-header-height;
-
-    // FIXME: hack remove padding once the flex layout works properly
-    $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
-    padding-top: $padding;
-    padding-bottom: $padding;
-
-    @include media-breakpoint-up(lg) {
-      min-height: $mdb-layout-desktop-header-height;
-
-      // FIXME: hack remove padding once the flex layout works properly
-      $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
-      padding-top: $padding;
-      padding-bottom: $padding;
-    }
-  }
-}
 
 // Drawer.
 .mdb-layout-drawer {
@@ -73,7 +20,7 @@
   flex-wrap: nowrap;
   overflow: visible;
   overflow-y: auto;
-  color: $mdb-layout-text-color;
+  color: $mdb-layout-drawer-text-color;
   background: $mdb-layout-drawer-bg-color;
 
   // Transform offscreen.
@@ -95,18 +42,6 @@
   }
 }
 
-// Content.
-.mdb-layout-content {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-  //-ms-flex: 0 1 auto; // Fix IE10 bug.
-  overflow-x: hidden;
-  overflow-y: auto;
-  flex-grow: 1;
-  -webkit-overflow-scrolling: touch; // TODO: why?
-}
-
 
 // FIXME: the below needs to happen if it is the right size OR if the drawer is visible.  Need to look at collapse or collapseInline to see if it can help us here.
 
@@ -141,7 +76,6 @@
 
 // Responsive Content with fixed drawer
 .mdb-layout-content {
-
   .mdb-layout-fixed-drawer > & {
     margin-left: 0;
   }

scss/_layout.scss

@@ -0,0 +1,70 @@
+// this is a set of flex-based layout containers necessary for components such as the drawer.
+
+//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
+
+.mdb-layout-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  // Main layout class.
+  .mdb-layout {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column; // allows for sticky header and footer
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+// Header
+.mdb-layout-header { // navbar
+  // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
+  z-index: 3;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-height: 1000px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  transition-property: max-height;
+
+  > .navbar { // heights for common scenarios such as a header with a navbar
+
+    // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
+    //  - with flex a vertical align is a breeze
+    //  - with standard layout, we need to use padding instead of height to layout.
+    min-height: $mdb-layout-mobile-header-height;
+
+    // FIXME: hack remove padding once the flex layout works properly
+    $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
+    padding-top: $padding;
+    padding-bottom: $padding;
+
+    @include media-breakpoint-up(lg) {
+      min-height: $mdb-layout-desktop-header-height;
+
+      // FIXME: hack remove padding once the flex layout works properly
+      $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
+      padding-top: $padding;
+      padding-bottom: $padding;
+    }
+  }
+}
+
+// Content.
+.mdb-layout-content {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  //-ms-flex: 0 1 auto; // Fix IE10 bug.
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex-grow: 1;
+  -webkit-overflow-scrolling: touch; // TODO: why?
+}

scss/_variables.scss

@@ -38,6 +38,7 @@ $enable-flex: true;
 
 
 //
+@import "variables/layout";
 @import "variables/menu";
 @import "variables/drawer";
 

scss/variables/_drawer.scss

@@ -1,11 +1,6 @@
 // Drawer
 $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
-$mdb-layout-text-color: rgba($grey-800, 1) !default;
+$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
 // Sizing
 $mdb-layout-drawer-sm: 240px !default;
-
-// General layout header height.
-// FIXME: is this really necessary or something to be considered custom?
-$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
-$mdb-layout-desktop-header-height: 4rem !default; // 64px

scss/variables/_layout.scss

@@ -0,0 +1,4 @@
+// General layout header height.
+// FIXME: is this really necessary or something to be considered custom?
+$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
+$mdb-layout-desktop-header-height: 4rem !default; // 64px