feat: z-index of wrapper and step elements are can be updated by css …

…variables with this update
fatihsolhan · Apr 29, 2022 · 7f0f3dd · 7f0f3dd
1 parent 0f67ee4
commit 7f0f3dd
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 16 deletions.
diff --git 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
@@ -1,24 +1,10 @@
-.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
   background-color: white
   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