Create a z-index scale for the project and use it

This fixes the CmkCode copy button tooltip not shown on
the "Test agent connection" slideout modal.

Change-Id: I3c31c756299589a453c2c66b0d2228a15f869ebc

Author: alecmkandro

packages/cmk-frontend-vue/src/assets/variables.css

@@ -50,6 +50,13 @@
   /* Dimensions */
   --form-field-height: 21px;
 
+  /* Z indexes */
+  --z-index-base: 0;
+  --z-index-modal: 1000;
+  --z-index-dropdown: 2000;
+  --z-index-popup: 3000;
+  --z-index-tooltip: 4000;
+
   /* Icons that are only defined for facelift, so without dark variant */
   --icon-checkmark: url('~cmk-frontend/themes/facelift/images/icon_checkmark.svg');
   --icon-checkmark-bare: url('~cmk-frontend/themes/facelift/images/icon_checkmark_bare.svg');

packages/cmk-frontend-vue/src/components/CmkCode.vue

@@ -172,7 +172,7 @@ const toggleExpansion = () => {
 
     .fade_overlay {
       position: absolute;
-      z-index: 1;
+      z-index: var(--z-index-base);
       bottom: var(--scroll-bar-thickness);
       left: 0;
       right: 0;
@@ -185,7 +185,7 @@ const toggleExpansion = () => {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      z-index: 2;
+      z-index: var(--z-index-base) + 1;
     }
 
     &:not(.expanded) .toggle_button_container {
@@ -246,6 +246,8 @@ const toggleExpansion = () => {
   background-color: var(--code-background-color);
   color: var(--font-color);
   white-space: nowrap;
+  position: relative;
+  z-index: var(--z-index-tooltip);
 
   &.error {
     background-color: var(--error-msg-bg-color);

packages/cmk-frontend-vue/src/components/CmkSlideIn.vue

@@ -53,7 +53,7 @@ watch(
   display: flex;
   flex-direction: column;
   position: fixed;
-  z-index: 10;
+  z-index: var(--z-index-modal);
   top: 0;
   right: 0;
   bottom: 0;

packages/cmk-frontend-vue/src/components/CmkSuggestions.vue

@@ -280,7 +280,7 @@ defineExpose({
 <style scoped>
 .cmk-suggestions {
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-index-dropdown);
   color: var(--font-color);
   background-color: var(--default-form-element-bg-color);
   border: 1px solid var(--ux-theme-6);

packages/cmk-frontend-vue/src/components/HelpText.vue

@@ -99,7 +99,7 @@ body.inline_help_as_text .help-text__icon {
 }
 
 .help-text__popup {
-  z-index: 1000;
+  z-index: var(--z-index-tooltip);
 }
 
 .help-text__content {