From 9221d1d0d0a16e6319c304b8228949a5c32d2ea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Popovics=20Andr=C3=A1s?=
 <popovicsandras@users.noreply.github.com>
Date: Tue, 12 Jun 2018 16:58:13 +0100
Subject: [PATCH] Fix dropdown panel in viewer toolbar  because of z-index
 (#3472)

---
 demo-shell/src/app/app.component.scss         |   2 +-
 .../app-layout/app-layout.component.scss      | 196 +++++++++---------
 2 files changed, 97 insertions(+), 101 deletions(-)

diff --git a/demo-shell/src/app/app.component.scss b/demo-shell/src/app/app.component.scss
index 3d0c82987c..4ba9411f17 100644
--- a/demo-shell/src/app/app.component.scss
+++ b/demo-shell/src/app/app.component.scss
@@ -1,7 +1,7 @@
 router-outlet[name="overlay"] + * {
     width: 100%;
     height: 100%;
-    z-index: 999999;
+    z-index: 999;
     position: absolute;
     top: 0;
     right: 0;
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss
index 6e155b7420..e8a2929d21 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.scss
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss
@@ -1,114 +1,110 @@
 @mixin adf-app-layout-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $minimumAppWidth: 320px;
-  $toolbarHeight: 64px;
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $minimumAppWidth: 320px;
+    $toolbarHeight: 64px;
 
-
-   @media screen and ($mat-xsmall) {
-       app-search-bar {
-           width: 150px;
-       }
-   }
+    @media screen and ($mat-xsmall) {
+        app-search-bar {
+            width: 150px;
+        }
+    }
 
     @media screen and (max-width: 350px) {
-       app-search-bar {
-           width: 100px;
-       }
-   }
-
-   .adf-app-layout-toolbar {
-       z-index: 1001;
-       position: relative;
-       overflow: visible !important;
-   }
-
-   .adf-menu {
-       padding-top: 55px;
-   }
-
-  .adf-app-layout {
-    display: flex;
-    flex: 1;
-    min-width: $minimumAppWidth;
-    height: 100%;
-
-    .adf-nav-container {
-      display: block;
-      min-width: $minimumAppWidth;
-      height: 100%;
-    }
-
-    .adf-sidenav-linklist {
-      height: 100%;
-      overflow: auto;
-      padding-bottom: 8px;
-      box-sizing: border-box;
-    }
-
-    .adf-sidenav-link {
-
-      &.active {
-        color: mat-color($primary);
-      }
-
-      .sidenav-menu-icon {
-        margin-right: 20px;
-        font-size: 14px;
-      }
-
-      .sidenav-menu-label {
-        font-size: 14px;
-        white-space: nowrap;
-      }
-    }
-
-    .mat-nav-list .mat-list-item.adf-sidenav-link {
-      height: 40px;
-    }
-
-    &-user-profile {
-      margin-right: 10px;
-    }
-
-    &-menu-spacer {
-      flex: 1 1 auto;
-    }
-
-    &-toolbar {
-      height: $toolbarHeight;
-      line-height: $toolbarHeight;
-      overflow: hidden;
-
-      mat-toolbar-row {
-        height: $toolbarHeight;
-        align-items: stretch;
-        justify-content: space-between;
-      }
-
-      .adf-toolbar-link {
-        min-width: 0;
-        line-height: $toolbarHeight;
-
-        &.active {
-          background-color: rgba(0, 0, 0, .12);
+        app-search-bar {
+            width: 100px;
         }
-      }
     }
-  }
 
-  @media screen and  ($mat-small) {
-    .adf-userinfo-name {
-      display: none;
+    .adf-app-layout-toolbar {
+        z-index: 998;
+        position: relative;
+        overflow: visible !important;
     }
 
     .adf-menu {
-        padding-top: 0px;
+        padding-top: 55px;
     }
-  }
 
-  @media screen and ($mat-xsmall) {
-  }
+    .adf-app-layout {
+        display: flex;
+        flex: 1;
+        min-width: $minimumAppWidth;
+        height: 100%;
 
+        .adf-nav-container {
+            display: block;
+            min-width: $minimumAppWidth;
+            height: 100%;
+        }
+
+        .adf-sidenav-linklist {
+            height: 100%;
+            overflow: auto;
+            padding-bottom: 8px;
+            box-sizing: border-box;
+        }
+
+        .adf-sidenav-link {
+            &.active {
+                color: mat-color($primary);
+            }
+
+            .sidenav-menu-icon {
+                margin-right: 20px;
+                font-size: 14px;
+            }
+
+            .sidenav-menu-label {
+                font-size: 14px;
+                white-space: nowrap;
+            }
+        }
+
+        .mat-nav-list .mat-list-item.adf-sidenav-link {
+            height: 40px;
+        }
+
+        &-user-profile {
+            margin-right: 10px;
+        }
+
+        &-menu-spacer {
+            flex: 1 1 auto;
+        }
+
+        &-toolbar {
+            height: $toolbarHeight;
+            line-height: $toolbarHeight;
+            overflow: hidden;
+
+            mat-toolbar-row {
+                height: $toolbarHeight;
+                align-items: stretch;
+                justify-content: space-between;
+            }
+
+            .adf-toolbar-link {
+                min-width: 0;
+                line-height: $toolbarHeight;
+
+                &.active {
+                    background-color: rgba(0, 0, 0, 0.12);
+                }
+            }
+        }
+    }
+
+    @media screen and ($mat-small) {
+        .adf-userinfo-name {
+            display: none;
+        }
+
+        .adf-menu {
+            padding-top: 0px;
+        }
+    }
+
+    @media screen and ($mat-xsmall) {}
 }