#822 switched drawer positioning to use new v4 shorthand i.e. mdb-drawer-pos-f-l for fixed left

docs/examples/dashboard/example.js

@@ -1,5 +1,5 @@
 function clearDrawerClasses($container) {
-  var classes = ["mdb-drawer-fixed-left", "mdb-drawer-fixed-right", "mdb-drawer-fixed-top", "mdb-drawer-fixed-bottom"];
+  var classes = ["mdb-drawer-pos-f-l", "mdb-drawer-pos-f-r", "mdb-drawer-pos-f-t", "mdb-drawer-pos-f-b"];
 
   $.each(classes, function (index, value) {
     $container.removeClass(value)
@@ -14,7 +14,7 @@ function setDrawerPosition(position) {
 }
 
 $(document).ready(function() { // document ready is a little convoluted because this executes before jquery.
-  var buttons = ["drawer-fixed-left", "drawer-fixed-right", "drawer-fixed-top", "drawer-fixed-bottom"]
+  var buttons = ["drawer-pos-f-l", "drawer-pos-f-r", "drawer-pos-f-t", "drawer-pos-f-b"]
 
   $.each(buttons, function (index, position) {
     $('#' + position).click(function() {

docs/examples/dashboard/index.html

@@ -9,7 +9,7 @@ js: example.js
 <link href="example.css" rel="stylesheet">
 
 <div class="mdb-layout-canvas">
-  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
+  <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
     <header class="mdb-layout-header">
       <!--
       <div class="collapse" id="navbar-header">
@@ -20,12 +20,10 @@ js: example.js
       </div>
       -->
       <div class="navbar navbar-light bg-faded navbar-static-top">
-        <!--
+        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbar-header">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
+          <span class="sr-only">Toggle drawer</span>
-          <span class="sr-only">Toggle navigation</span>
           <i class="material-icons">menu</i>
         </button>
-        -->
         <ul class="nav navbar-nav">
           <li class="nav-item">
             Home
@@ -38,22 +36,22 @@ js: example.js
             </button>
           </li>
           <li class="nav-item">
-            <button class="btn mdb-btn-icon" title="Drawer left" id="drawer-fixed-left">
+            <button class="btn mdb-btn-icon" title="Drawer left" id="drawer-pos-f-l">
               <i class="material-icons">border_left</i>
             </button>
           </li>
           <li class="nav-item">
-            <button class="btn mdb-btn-icon" title="Drawer right" id="drawer-fixed-right">
+            <button class="btn mdb-btn-icon" title="Drawer right" id="drawer-pos-f-r">
               <i class="material-icons">border_right</i>
             </button>
           </li>
           <li class="nav-item">
-            <button class="btn mdb-btn-icon" title="Drawer top" id="drawer-fixed-top">
+            <button class="btn mdb-btn-icon" title="Drawer top" id="drawer-pos-f-t">
               <i class="material-icons">border_top</i>
             </button>
           </li>
           <li class="nav-item">
-            <button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-fixed-bottom">
+            <button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-pos-f-b">
               <i class="material-icons">border_bottom</i>
             </button>
           </li>

scss/_drawer.scss

@@ -85,7 +85,7 @@
 ////----
 //// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
 ////
-//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
+//// 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) {
@@ -100,7 +100,7 @@
 ////----
 //// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
 ////
-//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-in kitchen-sink-drawer-triggered">
+//// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
 ////
 //.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
 //  @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out

scss/mixins/_drawer.scss

@@ -4,7 +4,7 @@
 //----
 // Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
 //
-// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
+// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
 //
 //    .kitchen-sink-drawer:not(.mdb-drawer-out) {
 //      @each $breakpoint in (xs lg) {
@@ -19,7 +19,7 @@
 //----
 // Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
 //
-// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-in kitchen-sink-drawer-triggered">
+// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
 //
 //    .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
 //      @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
@@ -28,8 +28,8 @@
 //    }
 
 @mixin mdb-drawer-x-closed($size) {
-  @each $side in (left right) {
+  @each $side, $abbrev in (left: l, right: r) {
-    &.mdb-drawer-fixed-#{$side} {
+    &.mdb-drawer-pos-f-#{$abbrev} {
       > .mdb-layout-drawer {
         // position
         top: 0;
@@ -53,8 +53,8 @@
 }
 
 @mixin mdb-drawer-y-closed($size) {
-  @each $side in (top bottom) {
+  @each $side, $abbrev in (top: t, bottom: b) {
-    &.mdb-drawer-fixed-#{$side} {
+    &.mdb-drawer-pos-f-#{$abbrev} {
       > .mdb-layout-drawer {
         // position
         #{$side}: 0;
@@ -87,9 +87,8 @@
 }
 
 @mixin mdb-drawer-x-open($size) {
-  @each $side in (left right) {
+  @each $side, $abbrev in (left: l, right: r) {
-
+    &.mdb-drawer-pos-f-#{$abbrev} {
-    &.mdb-drawer-fixed-#{$side} {
       // Push - drawer will push the header and content (default behavior)
       > .mdb-layout-header {
         width: calc(100% - #{$size});
@@ -108,8 +107,8 @@
 }
 
 @mixin mdb-drawer-y-open($size) {
-  @each $side in (top bottom) {
+  @each $side, $abbrev in (top: t, bottom: b) {
-    &.mdb-drawer-fixed-#{$side} {
+    &.mdb-drawer-pos-f-#{$abbrev} {
 
       // 1. Push - drawer will push the header or content
       > .mdb-layout-header {
@@ -146,7 +145,7 @@
 
         // responsive class
         @include media-breakpoint-up($breakpoint) {
-          // mdb-drawer-fixed-(left and right) styles
+          // mdb-drawer-pos-f-(left and right) styles
           @include mdb-drawer-x-open($size);
         }
       }
@@ -169,7 +168,7 @@
 
         // responsive class
         @include media-breakpoint-up($breakpoint) {
-          // mdb-drawer-fixed-(left and right) styles
+          // mdb-drawer-pos-f-(left and right) styles
           @include mdb-drawer-y-open($size);
         }
       }
@@ -180,8 +179,8 @@
 @mixin mdb-drawer-x-overlay() {
   @include mdb-layout-backdrop-in();
 
-  @each $side in (left right) {
+  @each $side, $abbrev in (left: l, right: r) {
-    &.mdb-drawer-fixed-#{$side} {
+    &.mdb-drawer-pos-f-#{$abbrev} {
       > .mdb-layout-header,
       > .mdb-layout-content {
         width: 100%;
@@ -194,8 +193,8 @@
 @mixin mdb-drawer-y-overlay() {
   @include mdb-layout-backdrop-in();
 
-  @each $side in (top bottom) {
+  @each $side, $abbrev in (top: t, bottom: b) {
-    &.mdb-drawer-fixed-#{$side} {
+    &.mdb-drawer-pos-f-#{$abbrev} {
       > .mdb-layout-header {
         @if $side == top { // only add margin-top on a header when the drawer is at the top
           margin-#{$side}: 0;