feat(common/loading): add variables for loading indicator

telerik · Feb 25, 2022 · d271873 · d271873
1 parent f6b17e0
commit d271873
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -21,7 +21,7 @@
     }
 
     .k-loading-mask {
-        z-index: 100;
+        z-index: $zindex-loading;
 
         &.k-opaque {
             .k-loading-color {
@@ -33,21 +33,23 @@
         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
     .k-i-loading {
         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
@@ -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