From 7f0f3dd88fbefee4a51679264dbd64520f75946c Mon Sep 17 00:00:00 2001
From: Fatih Solhan <fatih.solhan@hotmail.com>
Date: Fri, 29 Apr 2022 22:58:15 +0300
Subject: [PATCH] feat: z-index of wrapper and step elements are can be updated
 by css variables with this update

---
 src/components/VOnboardingStep.vue |  4 ++--
 src/css/v-onboarding.sass          | 14 --------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/components/VOnboardingStep.vue b/src/components/VOnboardingStep.vue
index c68b567..ecf5880 100644
--- a/src/components/VOnboardingStep.vue
+++ b/src/components/VOnboardingStep.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-show="show">
-    <svg class="v-onboarding-overlay">
+    <svg style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0.5; z-index: var(--v-onboarding-overlay-z, 10); pointer-events: none;">
       <path :d="path" />
     </svg>
-    <div ref="stepElement" class="v-onboarding-item__wrapper">
+    <div ref="stepElement" style="position: relative; z-index: var(--v-onboarding-step-z, 20);">
       <slot v-if="step">
         <div class="v-onboarding-item">
           <div class="v-onboarding-item__header">
diff --git a/src/css/v-onboarding.sass b/src/css/v-onboarding.sass
index cdb3903..fc3627b 100644
--- a/src/css/v-onboarding.sass
+++ b/src/css/v-onboarding.sass
@@ -1,13 +1,3 @@
-.v-onboarding-overlay
-  width: 100%
-  height: 100%
-  position: fixed
-  top: 0
-  left: 0
-  opacity: 0.5
-  z-index: 10
-  pointer-events: none
-
 .v-onboarding-item
   width: 20rem
   padding: 1rem
@@ -15,10 +5,6 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
   border-radius: 0.375rem
 
-  &__wrapper
-    position: relative
-    z-index: 20
-
   &__header
     display: flex
     justify-content: space-between