From d271873d571d43776a2e86f09a6f9ea59cbc66af Mon Sep 17 00:00:00 2001
From: Emil Petrov <emil.petrov@progress.com>
Date: Mon, 21 Feb 2022 16:40:35 +0200
Subject: [PATCH] feat(common/loading): add variables for loading indicator

---
 packages/bootstrap/scss/_variables.scss    |  5 ++++-
 packages/classic/scss/_variables.scss      |  5 ++++-
 packages/default/scss/_variables.scss      |  5 ++++-
 packages/default/scss/common/_loading.scss | 10 ++++++----
 packages/material/scss/_variables.scss     |  5 ++++-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
index a7e00cac16b..e9c0c6ce9c6 100644
--- a/packages/bootstrap/scss/_variables.scss
+++ b/packages/bootstrap/scss/_variables.scss
@@ -357,7 +357,10 @@ $header-gradient: null !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Placeholder
 $placeholder-line-width: 100% !default;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
index 32e83ad1b65..92c5183b3aa 100644
--- a/packages/classic/scss/_variables.scss
+++ b/packages/classic/scss/_variables.scss
@@ -356,7 +356,10 @@ $node-selected-gradient: null !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Placeholder
 $placeholder-line-width: 100% !default;
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
index cfe9762bd37..9debd18937b 100644
--- a/packages/default/scss/_variables.scss
+++ b/packages/default/scss/_variables.scss
@@ -343,7 +343,10 @@ $header-gradient: null !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Placeholder
 $placeholder-line-width: 100% !default;
diff --git a/packages/default/scss/common/_loading.scss b/packages/default/scss/common/_loading.scss
index eed892d94fb..6351c7ba585 100644
--- a/packages/default/scss/common/_loading.scss
+++ b/packages/default/scss/common/_loading.scss
@@ -21,7 +21,7 @@
     }
 
     .k-loading-mask {
-        z-index: 100;
+        z-index: $zindex-loading;
 
         &.k-opaque {
             .k-loading-color {
@@ -33,13 +33,15 @@
         text-indent: -4000px;
         text-align: center;
         position: absolute;
+        color: $loading-text;
     }
     .k-loading-image {
         z-index: 2;
+        color: $loading-text;
     }
     .k-loading-color {
-        background-color: $component-bg;
-        opacity: .3;
+        background-color: $loading-bg;
+        opacity: $loading-opacity;
     }
 
     // Loading indicator
@@ -47,7 +49,7 @@
         position: relative;
         background-color: transparent;
         box-sizing: border-box;
-        color: currentColor;
+        color: $loading-text;
 
         &::before,
         &::after {
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
index 1eb4f0a2fbf..d8bca868443 100644
--- a/packages/material/scss/_variables.scss
+++ b/packages/material/scss/_variables.scss
@@ -393,7 +393,10 @@ $placeholder-bg: rgba(0, 0, 0, .1) !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Table