From 843056db44959c10211ca96b532256a85f42fede Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Tue, 19 Dec 2017 02:10:46 +0100
Subject: [PATCH] fix: z-index issues (#1264)

* feat(MdCard): remove z-index to prevent card overlap FAB

* fix(MdSelect): fix select content under dialog

* refactor(MdSelect): change order of scss

* docs: remove z-index from main-nav (#1134)

* Revert "feat(MdCard): remove z-index to prevent card overlap FAB"

This reverts commit 9e128066ed814aff520ec6c5723619b147712cad.

* feat(MdButton): add fab z-index to prevent overlap
---
 docs/app/template/MainNav.vue                |  1 -
 src/components/MdButton/MdButton.vue         |  1 +
 src/components/MdField/MdSelect/MdSelect.vue | 24 +++++++++++---------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/app/template/MainNav.vue b/docs/app/template/MainNav.vue
index cbda59d53..394070c45 100644
--- a/docs/app/template/MainNav.vue
+++ b/docs/app/template/MainNav.vue
@@ -72,7 +72,6 @@
     top: 64px;
     bottom: 0;
     left: 0;
-    z-index: 2;
     transition: .3s $md-transition-default-timing;
     transition-property: top;
 
diff --git a/src/components/MdButton/MdButton.vue b/src/components/MdButton/MdButton.vue
index 5b0205143..02d0d7c31 100644
--- a/src/components/MdButton/MdButton.vue
+++ b/src/components/MdButton/MdButton.vue
@@ -220,6 +220,7 @@
   .md-icon-button,
   .md-fab {
     border-radius: 50%;
+    z-index: 10;
 
     &:before {
       border-radius: 50%;
diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
index ad297808a..5f26dc6da 100644
--- a/src/components/MdField/MdSelect/MdSelect.vue
+++ b/src/components/MdField/MdSelect/MdSelect.vue
@@ -311,20 +311,22 @@
       border: 0;
     }
   }
+  .md-menu-content {
+    z-index: 111;
+    &.md-select-menu {
+      width: 100%;
 
-  .md-menu-content.md-select-menu {
-    width: 100%;
-
-    &.md-menu-content-enter {
-      transform: translate3d(0, -8px, 0) scaleY(.3);
-    }
+      &.md-menu-content-enter {
+        transform: translate3d(0, -8px, 0) scaleY(.3);
+      }
 
-    .md-list {
-      transition: opacity .3s $md-transition-drop-timing;
-    }
+      .md-list {
+        transition: opacity .3s $md-transition-drop-timing;
+      }
 
-    .md-dense .md-ripple.md-list-item-content {
-      font-size: 14px;
+      .md-dense .md-ripple.md-list-item-content {
+        font-size: 14px;
+      }
     }
   }
 </style>