From f1e7d66bbf7470ec3fc9adb315a5a320c78fdb2b Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 8 Sep 2023 15:40:22 +0700
Subject: [PATCH] Add variable for z-index

---
 javascript-practice/src/styles/abstracts/_variables.scss   | 6 ++++++
 javascript-practice/src/styles/bases/_base.scss            | 5 ++---
 javascript-practice/src/styles/components/_dialog.scss     | 2 +-
 javascript-practice/src/styles/components/_loader.scss     | 2 +-
 javascript-practice/src/styles/components/_popup-form.scss | 2 +-
 javascript-practice/src/styles/pages/_index.scss           | 2 +-
 6 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/javascript-practice/src/styles/abstracts/_variables.scss b/javascript-practice/src/styles/abstracts/_variables.scss
index fa63cb7..322974e 100644
--- a/javascript-practice/src/styles/abstracts/_variables.scss
+++ b/javascript-practice/src/styles/abstracts/_variables.scss
@@ -28,3 +28,9 @@ $fs-md: 16px;
 $fs-lg: 17px;
 $fs-x-lg: 20px;
 $fs-2x-lg: 32px;
+
+// Z-index
+$zindex-lv-1: 1;
+$zindex-lv-2: 2;
+$zindex-lv-3: 3;
+$zindex-lv-4: 4;
diff --git a/javascript-practice/src/styles/bases/_base.scss b/javascript-practice/src/styles/bases/_base.scss
index d32dab9..4493529 100644
--- a/javascript-practice/src/styles/bases/_base.scss
+++ b/javascript-practice/src/styles/bases/_base.scss
@@ -1,11 +1,10 @@
-// TODO
 .overlay {
   @extend %d-absolute;
 
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
-  z-index: 2;
+  z-index: $zindex-lv-1;
   opacity: 0;
   pointer-events: none;
 
@@ -18,5 +17,5 @@
   @extend .overlay;
 
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 3;
+  z-index: $zindex-lv-3;
 }
diff --git a/javascript-practice/src/styles/components/_dialog.scss b/javascript-practice/src/styles/components/_dialog.scss
index 6ce96f5..5edd09e 100644
--- a/javascript-practice/src/styles/components/_dialog.scss
+++ b/javascript-practice/src/styles/components/_dialog.scss
@@ -5,7 +5,7 @@
   top: 32%;
   transform: translate(-50%, -50%) scale(1);
   background-color: $white;
-  z-index: 2;
+  z-index: $zindex-lv-2;
 
   opacity: 0;
   pointer-events: none;
diff --git a/javascript-practice/src/styles/components/_loader.scss b/javascript-practice/src/styles/components/_loader.scss
index b9c215c..420e52d 100644
--- a/javascript-practice/src/styles/components/_loader.scss
+++ b/javascript-practice/src/styles/components/_loader.scss
@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: center;
   background: #00000066;
-  z-index: 1;
+  z-index: $zindex-lv-1;
   transition:
     opacity 0.75s,
     visibility 0.75s;
diff --git a/javascript-practice/src/styles/components/_popup-form.scss b/javascript-practice/src/styles/components/_popup-form.scss
index 2b40a07..0617043 100644
--- a/javascript-practice/src/styles/components/_popup-form.scss
+++ b/javascript-practice/src/styles/components/_popup-form.scss
@@ -7,7 +7,7 @@
   top: 50%;
   transform: translate(-50%, -50%) scale(1);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  z-index: 2;
+  z-index: $zindex-lv-2;
   padding: 40px 50px;
   border-radius: 10px;
   background-color: $white;
diff --git a/javascript-practice/src/styles/pages/_index.scss b/javascript-practice/src/styles/pages/_index.scss
index 7e74857..868a1ad 100644
--- a/javascript-practice/src/styles/pages/_index.scss
+++ b/javascript-practice/src/styles/pages/_index.scss
@@ -643,5 +643,5 @@
 }
 
 #categoryForm {
-  z-index: 4;
+  z-index: $zindex-lv-4;
 }