From 3a4c62dd5b538a4ab1dee39597d89597525060d1 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Tue, 6 Apr 2021 10:31:56 +0200
Subject: [PATCH] [Lens] don't use eui variables for zindex (#96117)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 x-pack/plugins/lens/public/_variables.scss       |  5 +++++
 .../plugins/lens/public/drag_drop/drag_drop.scss | 16 ++++++++--------
 .../editor_frame/frame_layout.scss               |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/lens/public/_variables.scss b/x-pack/plugins/lens/public/_variables.scss
index 1c83a9a0499f1..824a0ce57186c 100644
--- a/x-pack/plugins/lens/public/_variables.scss
+++ b/x-pack/plugins/lens/public/_variables.scss
@@ -4,3 +4,8 @@ $lnsPanelMinWidth: $euiSize * 18;
 $lnsSuggestionHeight: 100px;
 $lnsSuggestionWidth: 150px;
 $lnsLayerPanelDimensionMargin: 8px;
+
+$lnsZLevel0: 0;
+$lnsZLevel1: 1;
+$lnsZLevel2: 2;
+$lnsZLevel3: 3;
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
index 57ebe79af2219..9c5bc79ba044a 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -5,7 +5,7 @@
   user-select: none;
   transition: $euiAnimSpeedFast ease-in-out;
   transition-property: background-color, border-color, opacity;
-  z-index: $euiZLevel1;
+  z-index: $lnsZLevel1;
 }
 
 .lnsDragDrop_ghost {
@@ -18,7 +18,7 @@
   left: 0;
   opacity: .9;
   transform: translate(-12px, 8px);
-  z-index: $euiZLevel3;
+  z-index: $lnsZLevel3;
   pointer-events: none;
   box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
 }
@@ -58,7 +58,7 @@
 
 // Drop area while hovering with item
 .lnsDragDrop-isActiveDropTarget {
-  z-index: $euiZLevel3;
+  z-index: $lnsZLevel3;
   @include lnsDroppableActiveHover;
 }
 
@@ -90,7 +90,7 @@
   height: 100%;
 
   &.lnsDragDrop__container-active {
-    z-index: $euiZLevel3;
+    z-index: $lnsZLevel3;
   }
 }
 
@@ -111,7 +111,7 @@
   }
 
   .lnsDragDrop-isActiveDropTarget {
-    z-index: $euiZLevel3;
+    z-index: $lnsZLevel3;
   }
 }
 
@@ -119,7 +119,7 @@
   transform: translateY(0);
   transition: transform $euiAnimSpeedFast ease-in-out;
   position: relative;
-  z-index: $euiZLevel1;
+  z-index: $lnsZLevel1;
 }
 
 .lnsDragDrop__keyboardHandler {
@@ -151,7 +151,7 @@
   opacity: 0;
   visibility: hidden;
   position: absolute;
-  z-index: $euiZLevel2;
+  z-index: $lnsZLevel2;
   right: calc(100% + #{$euiSizeS});
   top: 0;
   transition: opacity $euiAnimSpeedFast ease-in-out;
@@ -168,7 +168,7 @@
   width: 30%;
   top: 0;
   left: -$euiSize;
-  z-index: $euiZLevel0;
+  z-index: $lnsZLevel0;
 }
 
 .lnsDragDrop__extraDropWrapper {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
index ffc0adf3e33ea..4631cc6392496 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
@@ -29,7 +29,7 @@
   // This also means needing to add same amount of margin to page content and suggestion items
   padding: $euiSize $euiSize 0;
   position: relative;
-  z-index: $euiZLevel1;
+  z-index: $lnsZLevel1;
   &:first-child {
     padding-left: $euiSize;
   }