add snackbar link and fix snackbar with fab

docs/src/App.vue

@@ -99,9 +99,9 @@
                   <router-link exact to="/components/sidenav">Sidenav</router-link>
                 </md-list-item>
 
-                <!-- <md-list-item class="md-inset">
+                <md-list-item class="md-inset">
                   <router-link exact to="/components/snackbar">Snackbar</router-link>
-                </md-list-item> -->
+                </md-list-item>
 
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/spinner">Spinner</router-link>
@@ -303,7 +303,7 @@
     transition: $swift-ease-out;
 
     .main-content {
-      transform: translate3D(0, 7%, 0);
+      transform: translate3D(0, 10%, 0);
     }
   }
 

docs/src/pages/components/Snackbar.vue

@@ -163,6 +163,10 @@
         </example-box>
       </div>
     </docs-component>
+
+    <md-button class="md-fab md-fab-bottom-right">
+      <md-icon>add</md-icon>
+    </md-button>
   </page-content>
 </template>
 

src/components/mdButton/mdButton.scss

@@ -149,12 +149,14 @@ $button-icon-size: 40px;
       position: absolute;
       top: 16px;
       left: 16px;
+      z-index: 10;
     }
 
     &.md-fab-top-center {
       position: absolute;
       top: 16px;
       left: 50%;
+      z-index: 10;
       transform: translateX(-50%);
     }
 
@@ -162,12 +164,14 @@ $button-icon-size: 40px;
       position: absolute;
       top: 16px;
       right: 16px;
+      z-index: 10;
     }
 
     &.md-fab-bottom-left {
       position: absolute;
       bottom: 16px;
       left: 16px;
+      z-index: 10;
     }
 
     &.md-fab-bottom-center {
@@ -175,12 +179,14 @@ $button-icon-size: 40px;
       bottom: 16px;
       left: 50%;
       transform: translateX(-50%);
+      z-index: 10;
     }
 
     &.md-fab-bottom-right {
       position: absolute;
       right: 16px;
       bottom: 16px;
+      z-index: 10;
     }
 
     &.md-mini {

src/components/mdSnackbar/mdSnackbar.vue

@@ -35,6 +35,7 @@
         active: false,
         rootElement: {},
         snackbarElement: {},
+        directionClass: null,
         closeTimeout: null
       };
     },
@@ -44,11 +45,24 @@
           'md-active': this.active
         };
 
-        cssClasses['md-position-' + this.mdPosition.replace(/ /g, '-')] = true;
+        this.directionClass = this.mdPosition.replace(/ /g, '-');
+
+        cssClasses['md-position-' + this.directionClass] = true;
 
         return cssClasses;
       }
     },
+    watch: {
+      active(active) {
+        const cssClass = 'md-has-toast-' + this.directionClass;
+
+        if (active) {
+          document.body.classList.add(cssClass);
+        } else {
+          document.body.classList.remove(cssClass);
+        }
+      }
+    },
     methods: {
       removeElement() {
         this.rootElement.removeChild(this.snackbarElement);