feat(loader-container): add component styles

#1946
telerik · Nov 16, 2020 · 987e603 · 987e603
1 parent dc1ea58
commit 987e603
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 3 deletions.
diff --git a/packages/bootstrap/scss/loader/_index.scss b/packages/bootstrap/scss/loader/_index.scss
@@ -3,7 +3,7 @@
 
 
 // Dependencies
-
+@import "../common/_index.scss";
 
 // Component
 @import "_variables.scss";

diff --git a/packages/bootstrap/scss/loader/_variables.scss b/packages/bootstrap/scss/loader/_variables.scss
@@ -23,3 +23,24 @@ $loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
 $loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
 
 $loader-secondary-bg: #212529 !default;
+
+$loader-container-panel-border-width: 1px !default;
+$loader-container-panel-border-style: solid !default;
+$loader-container-panel-border-color: $border-color !default;
+$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-bg: $white !default;
+
+$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
+$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
+$loader-container-font-size-sm: $font-size-sm !default;
+
+$loader-container-padding-md: map-get( $spacing, 5 ) !default;
+$loader-container-gap-md: map-get( $spacing, 2 ) !default;
+$loader-container-font-size-md: $font-size-md !default;
+
+$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
+$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
+$loader-container-font-size-lg: $font-size-lg !default;
+
+$loader-container-overlay-light-bg: rgba(255, 255, 255, .3) !default;
+$loader-container-overlay-dark-bg: rgba(0, 0, 0, .3) !default;
diff --git a/packages/classic/scss/loader/_index.scss b/packages/classic/scss/loader/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../common/_index.scss";
 
 
 // Component

diff --git a/packages/classic/scss/loader/_variables.scss b/packages/classic/scss/loader/_variables.scss
@@ -23,3 +23,24 @@ $loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
 $loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
 
 $loader-secondary-bg: #656565 !default;
+
+$loader-container-panel-border-width: 1px !default;
+$loader-container-panel-border-style: solid !default;
+$loader-container-panel-border-color: $border-color !default;
+$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-bg: $white !default;
+
+$loader-container-padding-sm: 15px !default;
+$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
+$loader-container-font-size-sm: $font-size-xs !default;
+
+$loader-container-padding-md: 20px !default;
+$loader-container-gap-md: map-get( $spacing, 2 ) !default;
+$loader-container-font-size-md: $font-size-md !default;
+
+$loader-container-padding-lg: 25px !default;
+$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
+$loader-container-font-size-lg: $font-size-lg !default;
+
+$loader-container-overlay-light-bg: rgba(255, 255, 255, .3) !default;
+$loader-container-overlay-dark-bg: rgba(0, 0, 0, .3) !default;
diff --git a/packages/default/scss/loader/_index.scss b/packages/default/scss/loader/_index.scss
@@ -3,7 +3,7 @@
 
 
 // Dependencies
-
+@import "../common/_index.scss";
 
 // Component
 @import "_variables.scss";

diff --git a/packages/default/scss/loader/_layout.scss b/packages/default/scss/loader/_layout.scss
@@ -367,3 +367,89 @@
         }
     }
 }
+
+
+
+@include exports( "loader-container/layout" ) {
+
+    .k-loader-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2001;
+
+        .k-loader {
+            padding: 0;
+        }
+    }
+
+    .k-loader-container,
+    .k-loader-container-overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    .k-loader-container-inner {
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 2;
+    }
+
+    .k-loader-container-panel {
+        border-width: $loader-container-panel-border-width;
+        border-style: $loader-container-panel-border-style;
+        border-radius: $loader-container-panel-border-radius;
+    }
+
+    // Loader Container Sizes
+    .k-loader-container-sm {
+        .k-loader-container-inner {
+            padding: $loader-container-padding-sm;
+            gap: $loader-container-gap-sm;
+        }
+
+        .k-loader-container-label {
+            font-size: $loader-container-font-size-sm;
+        }
+    }
+    .k-loader-container-md {
+        .k-loader-container-inner {
+            padding: $loader-container-padding-md;
+            gap: $loader-container-gap-md;
+        }
+
+        .k-loader-container-label {
+            font-size: $loader-container-font-size-md;
+        }
+    }
+    .k-loader-container-lg {
+        .k-loader-container-inner {
+            padding: $loader-container-padding-lg;
+            gap: $loader-container-gap-lg;
+        }
+
+        .k-loader-container-label {
+            font-size: $loader-container-font-size-lg;
+        }
+    }
+
+    // Loader Position
+    .k-loader-top {
+        .k-loader-container-inner {
+            flex-direction: column;
+            text-align: center;
+        }
+    }
+    .k-loader-end {
+        .k-loader-container-label {
+            order: -1;
+        }
+    }
+
+}
diff --git a/packages/default/scss/loader/_theme.scss b/packages/default/scss/loader/_theme.scss
@@ -11,3 +11,24 @@
     }
 
 }
+
+
+
+@include exports( "loader-container/theme" ) {
+
+    .k-loader-container-overlay {
+        &.k-overlay-light {
+            background-color: $loader-container-overlay-light-bg;
+        }
+
+        &.k-overlay-dark {
+            background-color: $loader-container-overlay-dark-bg;
+        }
+    }
+
+    .k-loader-container-panel {
+        background-color: $loader-container-panel-bg;
+        border-color: $loader-container-panel-border-color;
+    }
+
+}
diff --git a/packages/default/scss/loader/_variables.scss b/packages/default/scss/loader/_variables.scss
@@ -23,3 +23,24 @@ $loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
 $loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
 
 $loader-secondary-bg: #656565 !default;
+
+$loader-container-panel-border-width: 1px !default;
+$loader-container-panel-border-style: solid !default;
+$loader-container-panel-border-color: $border-color !default;
+$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-bg: $white !default;
+
+$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
+$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
+$loader-container-font-size-sm: $font-size-sm !default;
+
+$loader-container-padding-md: map-get( $spacing, 5 ) !default;
+$loader-container-gap-md: map-get( $spacing, 2 ) !default;
+$loader-container-font-size-md: $font-size-md !default;
+
+$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
+$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
+$loader-container-font-size-lg: $font-size-lg !default;
+
+$loader-container-overlay-light-bg: rgba(255, 255, 255, .3) !default;
+$loader-container-overlay-dark-bg: rgba(0, 0, 0, .3) !default;
diff --git a/packages/material/scss/loader/_index.scss b/packages/material/scss/loader/_index.scss
@@ -3,7 +3,7 @@
 
 
 // Dependencies
-
+@import "../common/_index.scss";
 
 // Component
 @import "_variables.scss";

diff --git a/packages/material/scss/loader/_variables.scss b/packages/material/scss/loader/_variables.scss
@@ -23,3 +23,24 @@ $loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
 $loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
 
 $loader-secondary-bg: #000000 !default;
+
+$loader-container-panel-border-width: 1px !default;
+$loader-container-panel-border-style: solid !default;
+$loader-container-panel-border-color: $border-color !default;
+$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-bg: $white !default;
+
+$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
+$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
+$loader-container-font-size-sm: $font-size-sm !default;
+
+$loader-container-padding-md: map-get( $spacing, 5 ) !default;
+$loader-container-gap-md: map-get( $spacing, 2 ) !default;
+$loader-container-font-size-md: $font-size-md !default;
+
+$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
+$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
+$loader-container-font-size-lg: $font-size-lg !default;
+
+$loader-container-overlay-light-bg: rgba(255, 255, 255, .3) !default;
+$loader-container-overlay-dark-bg: rgba(0, 0, 0, .3) !default;