fix(drawer): Improved drawer and fixed examples

assets/css/docs.css

@@ -1348,3 +1348,10 @@ body.mdbootstrap .partner.creativetim {
     box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, 0.5) !important; }
   .algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
     background-color: rgba(208, 189, 236, 0.15) !important; }
+
+[data-example-id*="drawer"] .bmd-layout-canvas {
+  min-height: 150px;
+  display: flex;
+  flex-direction: column; }
+  [data-example-id*="drawer"] .bmd-layout-canvas .bmd-layout-container {
+    flex: 1; }

assets/scss/_drawer.scss

@@ -0,0 +1,3 @@
+[data-example-id*="drawer"] .bmd-layout-canvas {
+  min-height: 150px;
+}

assets/scss/docs.scss

@@ -55,3 +55,6 @@
 @import "syntax";
 @import "anchor";
 @import "algolia";
+
+// Custom MDB Drawer styling for docs
+@import "drawer";

scss/_drawer.scss

@@ -14,8 +14,7 @@
   overflow: visible;
   overflow-y: auto;
   font-size: .875rem;
-  //color: $bmd-layout-drawer-text-color;
-  //background: $bmd-layout-drawer-bg-color;
+  background: $bmd-layout-drawer-bg-color;
 
   // Transform offscreen.
   transition: transform;

scss/_layout.scss

@@ -6,8 +6,8 @@
 
 // First element
 .bmd-layout-canvas {
-  // added by js?
-  position: absolute;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 }
@@ -15,13 +15,12 @@
 // Primary layout container, belongs inside a bmd-layout-canvas.
 .bmd-layout-container {
   position: relative;
+  flex: 1;
   display: flex;
   flex-direction: column; // allows for sticky header and footer
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
+  overflow: hidden;
 }
 
 // Header layout (fixed top), belongs in a bmd-layout-container

scss/variables/_drawer.scss

@@ -1,4 +1,5 @@
 // Drawer
+$bmd-layout-drawer-bg-color: $white;
 
 // Sizing
 $bmd-drawer-x-size: 240px !default;