From da75d72334ba3f56f9db8baadbafa49d38497b28 Mon Sep 17 00:00:00 2001
From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com>
Date: Fri, 10 Nov 2023 14:37:43 +0700
Subject: [PATCH 1/4] feat: build up new loading class

---
 css/loading-class.css   |  3 ++
 scss/_config.scss       | 14 ++++--
 scss/loading-class.scss | 95 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 css/loading-class.css
 create mode 100644 scss/loading-class.scss

diff --git a/css/loading-class.css b/css/loading-class.css
new file mode 100644
index 0000000..e8ddeb3
--- /dev/null
+++ b/css/loading-class.css
@@ -0,0 +1,3 @@
+/**
+ * Loading
+ */
diff --git a/scss/_config.scss b/scss/_config.scss
index 5518c73..3d116dd 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -40,7 +40,13 @@
 //);
 
 // vertical spacing
-//$vertical_spacing: (
-//        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
-//        "md":    0 1 2 4 6 8 12 16 24 30 40 50 60 70,
-//);
\ No newline at end of file
+$vertical_spacing: (
+        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
+        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+);
+
+// loading class
+$loading_class: (
+        "enable": false,
+        "isWoocomerce": true // true if project using woocommerce
+)
\ No newline at end of file
diff --git a/scss/loading-class.scss b/scss/loading-class.scss
new file mode 100644
index 0000000..c775c89
--- /dev/null
+++ b/scss/loading-class.scss
@@ -0,0 +1,95 @@
+/**
+ * Loading
+ */
+@import "helpers";
+
+@mixin print-loading-class($data) {
+  $isEnabled: map-get($data, 'enable');
+  $isWoocommerce: map-get($data, 'isWoocomerce');
+
+  // $isEnabled: true => loading is used
+  @if ($isEnabled) {
+    // If $isWoocommerce value is false just load the loading selector only
+    @if ($isWoocommerce == false) {
+      .loading {
+        position: relative;
+      }
+      .loading:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: rgba(255, 255, 255, 0.7);
+      }
+      .loading:after {
+        --loading-size: 35px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 3;
+        width: var(--loading-size);
+        height: var(--loading-size);
+        margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
+        border-radius: 50%;
+        border: 2px dashed transparent;
+        border-bottom-color: var(--bb-color-primary);
+        border-right-color: var(--bb-color-primary);
+        animation: spinner .6s linear infinite;
+        box-sizing: border-box;
+      }
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    } @else {
+      .loading, .woocommerce .blockUI.blockOverlay, .woocommerce .loader {
+        position: relative;
+      }
+      .woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before,
+      .loading:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: rgba(255, 255, 255, 0.7);
+      }
+      .loading:after,
+      body .xwc--pf-loader-overlay:after,
+      .woocommerce .blockUI.blockOverlay:after,
+      .woocommerce .loader:after {
+        --loading-size: 35px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 3;
+        width: var(--loading-size);
+        height: var(--loading-size);
+        margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
+        border-radius: 50%;
+        border: 2px dashed transparent;
+        border-bottom-color: var(--bb-color-primary);
+        border-right-color: var(--bb-color-primary);
+        animation: spinner .6s linear infinite;
+        box-sizing: border-box;
+      }
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    }
+  }
+}
+
+@include print-loading-class($loading_class);
+
+

From 205fa975d2c1baf9809b535c868cfb613aa670a3 Mon Sep 17 00:00:00 2001
From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com>
Date: Tue, 14 Nov 2023 18:33:15 +0700
Subject: [PATCH 2/4] fix(loading): add code to loading.css, update redundant
 code and update based on feedback

---
 css/loading-class.css   | 38 ++++++++++++++++++++++++++++++++++++++
 scss/_config.scss       | 12 ++++++------
 scss/loading-class.scss | 18 +++++++++---------
 3 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/css/loading-class.css b/css/loading-class.css
index e8ddeb3..54ee4fd 100644
--- a/css/loading-class.css
+++ b/css/loading-class.css
@@ -1,3 +1,41 @@
 /**
  * Loading
  */
+.loading {
+  position:relative;
+}
+
+.loading:before {
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  z-index:2;
+  background-color:rgba(255, 255, 255, 0.7);
+}
+
+.loading:after {
+  --loading-size:35px;
+  content:"";
+  position:absolute;
+  top:50%;
+  left:50%;
+  z-index:3;
+  width:var(--loading-size);
+  height:var(--loading-size);
+  margin:calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
+  border-radius:50%;
+  border:2px dashed transparent;
+  border-bottom-color:var(--bb-color-primary);
+  border-right-color:var(--bb-color-primary);
+  animation:spinner 0.6s linear infinite;
+  box-sizing:border-box;
+}
+
+@keyframes spinner {
+  to {
+    transform:rotate(360deg);
+  }
+}
diff --git a/scss/_config.scss b/scss/_config.scss
index 3d116dd..6f57e1f 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -40,13 +40,13 @@
 //);
 
 // vertical spacing
-$vertical_spacing: (
-        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
-        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
-);
+//$vertical_spacing: (
+//        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
+//        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+//);
 
 // loading class
 $loading_class: (
-        "enable": false,
-        "isWoocomerce": true // true if project using woocommerce
+        "enable": true,
+        "isWoocomerce": false // true if project using woocommerce
 )
\ No newline at end of file
diff --git a/scss/loading-class.scss b/scss/loading-class.scss
index c775c89..e337660 100644
--- a/scss/loading-class.scss
+++ b/scss/loading-class.scss
@@ -10,10 +10,11 @@
   // $isEnabled: true => loading is used
   @if ($isEnabled) {
     // If $isWoocommerce value is false just load the loading selector only
-    @if ($isWoocommerce == false) {
-      .loading {
+    @if ($isWoocommerce == true) {
+      .loading, .woocommerce .blockUI.blockOverlay, .woocommerce .loader {
         position: relative;
       }
+      .woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before,
       .loading:before {
         content: "";
         position: absolute;
@@ -24,7 +25,10 @@
         z-index: 2;
         background-color: rgba(255, 255, 255, 0.7);
       }
-      .loading:after {
+      .loading:after,
+      body .xwc--pf-loader-overlay:after,
+      .woocommerce .blockUI.blockOverlay:after,
+      .woocommerce .loader:after {
         --loading-size: 35px;
         content: "";
         position: absolute;
@@ -47,10 +51,9 @@
         }
       }
     } @else {
-      .loading, .woocommerce .blockUI.blockOverlay, .woocommerce .loader {
+      .loading {
         position: relative;
       }
-      .woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before,
       .loading:before {
         content: "";
         position: absolute;
@@ -61,10 +64,7 @@
         z-index: 2;
         background-color: rgba(255, 255, 255, 0.7);
       }
-      .loading:after,
-      body .xwc--pf-loader-overlay:after,
-      .woocommerce .blockUI.blockOverlay:after,
-      .woocommerce .loader:after {
+      .loading:after {
         --loading-size: 35px;
         content: "";
         position: absolute;

From d8cb459d772486441c0603331cd50463d2f248b9 Mon Sep 17 00:00:00 2001
From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:45:46 +0700
Subject: [PATCH 3/4] fix(default):

---
 scss/_config.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/_config.scss b/scss/_config.scss
index 6f57e1f..9533fe1 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -40,10 +40,10 @@
 //);
 
 // vertical spacing
-//$vertical_spacing: (
-//        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
-//        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
-//);
+$vertical_spacing: (
+        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
+        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+);
 
 // loading class
 $loading_class: (

From 86e8fa3920f74975f2064bca3f379591269b8b7d Mon Sep 17 00:00:00 2001
From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:53:42 +0700
Subject: [PATCH 4/4] fix(loading): remove unrelated changes

---
 scss/_config.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/_config.scss b/scss/_config.scss
index 9533fe1..ee7c882 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -40,10 +40,10 @@
 //);
 
 // vertical spacing
-$vertical_spacing: (
-        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
-        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
-);
+//$vertical_spacing: (
+//        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
+//        "md":    0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+//);
 
 // loading class
 $loading_class: (