From 8f5a4f0ad33ce0974fb925f47256046f865a2bd3 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Thu, 24 Aug 2023 11:16:27 +0700
Subject: [PATCH] Create popup form component scss

---
 javascript-practice/src/styles/_main.scss     |  1 +
 .../src/styles/components/_popup-form.scss    | 52 ++++++++++++++++++
 .../src/styles/pages/_login-register.scss     | 53 -------------------
 3 files changed, 53 insertions(+), 53 deletions(-)
 create mode 100644 javascript-practice/src/styles/components/_popup-form.scss

diff --git a/javascript-practice/src/styles/_main.scss b/javascript-practice/src/styles/_main.scss
index f5b1f5c..41c0039 100644
--- a/javascript-practice/src/styles/_main.scss
+++ b/javascript-practice/src/styles/_main.scss
@@ -10,6 +10,7 @@
 
 // Components
 @import './components/loader';
+@import './components/popup-form';
 
 // Layouts
 @import './layouts/header';
diff --git a/javascript-practice/src/styles/components/_popup-form.scss b/javascript-practice/src/styles/components/_popup-form.scss
new file mode 100644
index 0000000..97687ae
--- /dev/null
+++ b/javascript-practice/src/styles/components/_popup-form.scss
@@ -0,0 +1,52 @@
+.overlay {
+  @extend %d-absolute;
+
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.modal-box {
+  @extend %d-flex;
+  @extend %d-absolute;
+  @include flex-layout($direction: column, $align: center, $gap: 30px);
+
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2;
+  padding: 40px 50px;
+  border-radius: 10px;
+  background-color: $white;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s ease;
+
+  &__title {
+    font-size: $fs-2x-lg;
+  }
+
+  &__message {
+    font-size: $fs-lg;
+    text-align: center;
+  }
+
+  &__redirect-btn {
+    color: $white;
+    font-size: $fs-md;
+    background-color: $light-primary-color;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 30px;
+    cursor: pointer;
+  }
+}
+
+.active {
+  opacity: 1;
+  pointer-events: auto;
+}
diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss
index 770d9cd..01addff 100644
--- a/javascript-practice/src/styles/pages/_login-register.scss
+++ b/javascript-practice/src/styles/pages/_login-register.scss
@@ -31,59 +31,6 @@
   }
 }
 
-.overlay {
-  @extend %d-absolute;
-
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  z-index: 2;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.modal-box {
-  @extend %d-flex;
-  @extend %d-absolute;
-  @include flex-layout($direction: column, $align: center, $gap: 30px);
-
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%) scale(1);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  z-index: 2;
-  padding: 40px 50px;
-  border-radius: 10px;
-  background-color: $white;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.3s ease;
-
-  &__title {
-    font-size: $fs-2x-lg;
-  }
-
-  &__message {
-    font-size: $fs-lg;
-    text-align: center;
-  }
-
-  &__redirect-btn {
-    color: $white;
-    font-size: $fs-md;
-    background-color: $light-primary-color;
-    border: none;
-    border-radius: 10px;
-    padding: 15px 30px;
-    cursor: pointer;
-  }
-}
-
-.active {
-  opacity: 1;
-  pointer-events: auto;
-}
-
 .form {
   @extend %margin-inline-auto;