chore(loader): add kendo- prefix

BREAKING CHANGE: Added kendo prefix to all loader variables: Change variable names from `$loader-*` to `$kendo-loader-*`.
telerik · Dec 13, 2022 · 51e669a · 51e669a
1 parent bd9bdba
commit 51e669a
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 215 deletions.
diff --git a/packages/bootstrap/scss/loader/_variables.scss b/packages/bootstrap/scss/loader/_variables.scss
@@ -1,43 +1,43 @@
 // Loader
-$loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
-
-$loader-padding-sm: k-math-div( $loader-segment-size-sm, 2 ) !default;
-$loader-padding-md: k-math-div( $loader-segment-size-md, 2 ) !default;
-$loader-padding-lg: k-math-div( $loader-segment-size-lg, 2 ) !default;
-
-$loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
-$loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
-$loader-spinner-3-width-md: ( $loader-segment-size-md * 4 ) !default;
-$loader-spinner-3-height-md: ( $loader-spinner-3-width-md * $equilateral-height ) !default;
-$loader-spinner-3-width-lg: ( $loader-segment-size-lg * 4 ) !default;
-$loader-spinner-3-height-lg: ( $loader-spinner-3-width-lg * $equilateral-height ) !default;
-
-$loader-spinner-4-width-sm: $loader-segment-size-sm * 4 !default;
-$loader-spinner-4-height-sm: $loader-spinner-4-width-sm !default;
-$loader-spinner-4-width-md: $loader-segment-size-md * 4 !default;
-$loader-spinner-4-height-md: $loader-spinner-4-width-md !default;
-$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: $component-border !default;
-$loader-container-panel-border-radius: $kendo-border-radius-md !default;
-$loader-container-panel-bg: $white !default;
-
-$loader-container-padding-sm: k-map-get( $spacing, 4 ) !default;
-$loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
-$loader-container-font-size-sm: $font-size-sm !default;
-
-$loader-container-padding-md: k-map-get( $spacing, 5 ) !default;
-$loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
-$loader-container-font-size-md: $font-size-md !default;
-
-$loader-container-padding-lg: k-map-get( $spacing, 6 ) !default;
-$loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
-$loader-container-font-size-lg: $font-size-lg !default;
+$kendo-loader-segment-border-radius: 50% !default;
+$kendo-loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
+$kendo-loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
+
+$kendo-loader-padding-sm: k-math-div( $kendo-loader-segment-size-sm, 2 ) !default;
+$kendo-loader-padding-md: k-math-div( $kendo-loader-segment-size-md, 2 ) !default;
+$kendo-loader-padding-lg: k-math-div( $kendo-loader-segment-size-lg, 2 ) !default;
+
+$kendo-loader-spinner-3-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
+$kendo-loader-spinner-3-height-sm: ( $kendo-loader-spinner-3-width-sm * $equilateral-height ) !default;
+$kendo-loader-spinner-3-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
+$kendo-loader-spinner-3-height-md: ( $kendo-loader-spinner-3-width-md * $equilateral-height ) !default;
+$kendo-loader-spinner-3-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
+$kendo-loader-spinner-3-height-lg: ( $kendo-loader-spinner-3-width-lg * $equilateral-height ) !default;
+
+$kendo-loader-spinner-4-width-sm: $kendo-loader-segment-size-sm * 4 !default;
+$kendo-loader-spinner-4-height-sm: $kendo-loader-spinner-4-width-sm !default;
+$kendo-loader-spinner-4-width-md: $kendo-loader-segment-size-md * 4 !default;
+$kendo-loader-spinner-4-height-md: $kendo-loader-spinner-4-width-md !default;
+$kendo-loader-spinner-4-width-lg: $kendo-loader-segment-size-lg * 4 !default;
+$kendo-loader-spinner-4-height-lg: $kendo-loader-spinner-4-width-lg !default;
+
+$kendo-loader-secondary-bg: #212529 !default;
+
+$kendo-loader-container-panel-border-width: 1px !default;
+$kendo-loader-container-panel-border-style: solid !default;
+$kendo-loader-container-panel-border-color: $component-border !default;
+$kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
+$kendo-loader-container-panel-bg: $white !default;
+
+$kendo-loader-container-padding-sm: k-map-get( $spacing, 4 ) !default;
+$kendo-loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-loader-container-font-size-sm: $font-size-sm !default;
+
+$kendo-loader-container-padding-md: k-map-get( $spacing, 5 ) !default;
+$kendo-loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
+$kendo-loader-container-font-size-md: $font-size-md !default;
+
+$kendo-loader-container-padding-lg: k-map-get( $spacing, 6 ) !default;
+$kendo-loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
+$kendo-loader-container-font-size-lg: $font-size-lg !default;
diff --git a/packages/classic/scss/loader/_variables.scss b/packages/classic/scss/loader/_variables.scss
@@ -1,43 +1,43 @@
 // Loader
-$loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
-
-$loader-padding-sm: k-math-div( $loader-segment-size-sm, 2 ) !default;
-$loader-padding-md: k-math-div( $loader-segment-size-md, 2 ) !default;
-$loader-padding-lg: k-math-div( $loader-segment-size-lg, 2 ) !default;
-
-$loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
-$loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
-$loader-spinner-3-width-md: ( $loader-segment-size-md * 4 ) !default;
-$loader-spinner-3-height-md: ( $loader-spinner-3-width-md * $equilateral-height ) !default;
-$loader-spinner-3-width-lg: ( $loader-segment-size-lg * 4 ) !default;
-$loader-spinner-3-height-lg: ( $loader-spinner-3-width-lg * $equilateral-height ) !default;
-
-$loader-spinner-4-width-sm: $loader-segment-size-sm * 4 !default;
-$loader-spinner-4-height-sm: $loader-spinner-4-width-sm !default;
-$loader-spinner-4-width-md: $loader-segment-size-md * 4 !default;
-$loader-spinner-4-height-md: $loader-spinner-4-width-md !default;
-$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: $component-border !default;
-$loader-container-panel-border-radius: $kendo-border-radius-md !default;
-$loader-container-panel-bg: $white !default;
-
-$loader-container-padding-sm: 15px !default;
-$loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
-$loader-container-font-size-sm: $font-size-xs !default;
-
-$loader-container-padding-md: 20px !default;
-$loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
-$loader-container-font-size-md: $font-size-md !default;
-
-$loader-container-padding-lg: 25px !default;
-$loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
-$loader-container-font-size-lg: $font-size-lg !default;
+$kendo-loader-segment-border-radius: 50% !default;
+$kendo-loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
+$kendo-loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
+
+$kendo-loader-padding-sm: k-math-div( $kendo-loader-segment-size-sm, 2 ) !default;
+$kendo-loader-padding-md: k-math-div( $kendo-loader-segment-size-md, 2 ) !default;
+$kendo-loader-padding-lg: k-math-div( $kendo-loader-segment-size-lg, 2 ) !default;
+
+$kendo-loader-spinner-3-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
+$kendo-loader-spinner-3-height-sm: ( $kendo-loader-spinner-3-width-sm * $equilateral-height ) !default;
+$kendo-loader-spinner-3-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
+$kendo-loader-spinner-3-height-md: ( $kendo-loader-spinner-3-width-md * $equilateral-height ) !default;
+$kendo-loader-spinner-3-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
+$kendo-loader-spinner-3-height-lg: ( $kendo-loader-spinner-3-width-lg * $equilateral-height ) !default;
+
+$kendo-loader-spinner-4-width-sm: $kendo-loader-segment-size-sm * 4 !default;
+$kendo-loader-spinner-4-height-sm: $kendo-loader-spinner-4-width-sm !default;
+$kendo-loader-spinner-4-width-md: $kendo-loader-segment-size-md * 4 !default;
+$kendo-loader-spinner-4-height-md: $kendo-loader-spinner-4-width-md !default;
+$kendo-loader-spinner-4-width-lg: $kendo-loader-segment-size-lg * 4 !default;
+$kendo-loader-spinner-4-height-lg: $kendo-loader-spinner-4-width-lg !default;
+
+$kendo-loader-secondary-bg: #656565 !default;
+
+$kendo-loader-container-panel-border-width: 1px !default;
+$kendo-loader-container-panel-border-style: solid !default;
+$kendo-loader-container-panel-border-color: $component-border !default;
+$kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
+$kendo-loader-container-panel-bg: $white !default;
+
+$kendo-loader-container-padding-sm: 15px !default;
+$kendo-loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-loader-container-font-size-sm: $font-size-xs !default;
+
+$kendo-loader-container-padding-md: 20px !default;
+$kendo-loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
+$kendo-loader-container-font-size-md: $font-size-md !default;
+
+$kendo-loader-container-padding-lg: 25px !default;
+$kendo-loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
+$kendo-loader-container-font-size-lg: $font-size-lg !default;
diff --git a/packages/default/scss/loader/_layout.scss b/packages/default/scss/loader/_layout.scss
@@ -18,34 +18,34 @@
 
     // Loader segment
     .k-loader-segment {
-        border-radius: $loader-segment-border-radius;
+        border-radius: $kendo-loader-segment-border-radius;
         background-color: currentColor;
         position: absolute;
     }
 
     // Loader sizes
     .k-loader-sm {
-        padding: $loader-padding-sm;
+        padding: $kendo-loader-padding-sm;
 
         .k-loader-segment {
-            width: $loader-segment-size-sm;
-            height: $loader-segment-size-sm;
+            width: $kendo-loader-segment-size-sm;
+            height: $kendo-loader-segment-size-sm;
         }
     }
     .k-loader-md {
-        padding: $loader-padding-md;
+        padding: $kendo-loader-padding-md;
 
         .k-loader-segment {
-            width: $loader-segment-size-md;
-            height: $loader-segment-size-md;
+            width: $kendo-loader-segment-size-md;
+            height: $kendo-loader-segment-size-md;
         }
     }
     .k-loader-lg {
-        padding: $loader-padding-lg;
+        padding: $kendo-loader-padding-lg;
 
         .k-loader-segment {
-            width: $loader-segment-size-lg;
-            height: $loader-segment-size-lg;
+            width: $kendo-loader-segment-size-lg;
+            height: $kendo-loader-segment-size-lg;
         }
     }
 
@@ -86,22 +86,22 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
-                width: ( $loader-segment-size-sm * 3 );
-                height: ( $loader-segment-size-sm * 1.5 );
+                width: ( $kendo-loader-segment-size-sm * 3 );
+                height: ( $kendo-loader-segment-size-sm * 1.5 );
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
-                width: ( $loader-segment-size-md * 3 );
-                height: ( $loader-segment-size-md * 1.5 );
+                width: ( $kendo-loader-segment-size-md * 3 );
+                height: ( $kendo-loader-segment-size-md * 1.5 );
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
-                width: ( $loader-segment-size-lg * 3 );
-                height: ( $loader-segment-size-lg * 1.5 );
+                width: ( $kendo-loader-segment-size-lg * 3 );
+                height: ( $kendo-loader-segment-size-lg * 1.5 );
             }
         }
     }
@@ -169,25 +169,25 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
-                margin: ( $loader-segment-size-sm / 2 );
-                width: calc( #{$loader-spinner-3-width-sm} - #{$loader-segment-size-sm} );
-                height: calc( #{$loader-spinner-3-height-sm} - #{$loader-segment-size-sm} );
+                margin: ( $kendo-loader-segment-size-sm / 2 );
+                width: calc( #{$kendo-loader-spinner-3-width-sm} - #{$kendo-loader-segment-size-sm} );
+                height: calc( #{$kendo-loader-spinner-3-height-sm} - #{$kendo-loader-segment-size-sm} );
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
-                margin: ( $loader-segment-size-md / 2 );
-                width: calc( #{$loader-spinner-3-width-md} - #{$loader-segment-size-md} );
-                height: calc( #{$loader-spinner-3-height-md} - #{$loader-segment-size-md} );
+                margin: ( $kendo-loader-segment-size-md / 2 );
+                width: calc( #{$kendo-loader-spinner-3-width-md} - #{$kendo-loader-segment-size-md} );
+                height: calc( #{$kendo-loader-spinner-3-height-md} - #{$kendo-loader-segment-size-md} );
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
-                margin: ( $loader-segment-size-lg / 2 );
-                width: calc( #{$loader-spinner-3-width-lg} - #{$loader-segment-size-lg} );
-                height: calc( #{$loader-spinner-3-height-lg} - #{$loader-segment-size-lg} );
+                margin: ( $kendo-loader-segment-size-lg / 2 );
+                width: calc( #{$kendo-loader-spinner-3-width-lg} - #{$kendo-loader-segment-size-lg} );
+                height: calc( #{$kendo-loader-spinner-3-height-lg} - #{$kendo-loader-segment-size-lg} );
             }
         }
     }
@@ -347,22 +347,22 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
-                width: $loader-spinner-4-width-sm;
-                height: $loader-spinner-4-height-sm;
+                width: $kendo-loader-spinner-4-width-sm;
+                height: $kendo-loader-spinner-4-height-sm;
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
-                width: $loader-spinner-4-width-md;
-                height: $loader-spinner-4-height-md;
+                width: $kendo-loader-spinner-4-width-md;
+                height: $kendo-loader-spinner-4-height-md;
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
-                width: $loader-spinner-4-width-lg;
-                height: $loader-spinner-4-height-lg;
+                width: $kendo-loader-spinner-4-width-lg;
+                height: $kendo-loader-spinner-4-height-lg;
             }
         }
     }
@@ -407,40 +407,40 @@
     }
 
     .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;
+        border-width: $kendo-loader-container-panel-border-width;
+        border-style: $kendo-loader-container-panel-border-style;
+        border-radius: $kendo-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;
+            padding: $kendo-loader-container-padding-sm;
+            gap: $kendo-loader-container-gap-sm;
         }
 
         .k-loader-container-label {
-            font-size: $loader-container-font-size-sm;
+            font-size: $kendo-loader-container-font-size-sm;
         }
     }
     .k-loader-container-md {
         .k-loader-container-inner {
-            padding: $loader-container-padding-md;
-            gap: $loader-container-gap-md;
+            padding: $kendo-loader-container-padding-md;
+            gap: $kendo-loader-container-gap-md;
         }
 
         .k-loader-container-label {
-            font-size: $loader-container-font-size-md;
+            font-size: $kendo-loader-container-font-size-md;
         }
     }
     .k-loader-container-lg {
         .k-loader-container-inner {
-            padding: $loader-container-padding-lg;
-            gap: $loader-container-gap-lg;
+            padding: $kendo-loader-container-padding-lg;
+            gap: $kendo-loader-container-gap-lg;
         }
 
         .k-loader-container-label {
-            font-size: $loader-container-font-size-lg;
+            font-size: $kendo-loader-container-font-size-lg;
         }
     }
 

diff --git a/packages/default/scss/loader/_theme.scss b/packages/default/scss/loader/_theme.scss
@@ -3,24 +3,24 @@
     @each $name, $color in $kendo-theme-colors {
         .k-loader-#{$name} {
             @if $name == "secondary" {
-                color: $loader-secondary-bg;
+                color: $kendo-loader-secondary-bg;
             } @else {
                 color: $color;
             }
         }
     }
 
     .k-loader-container-panel {
-        background-color: $loader-container-panel-bg;
-        border-color: $loader-container-panel-border-color;
+        background-color: $kendo-loader-container-panel-bg;
+        border-color: $kendo-loader-container-panel-border-color;
     }
 
     .k-loader-container-inner {
         // sass-lint:disable-block no-important
         // sass-lint:disable-block class-name-format
         .k-text-secondary,
         .\!k-text-secondary {
-            color: $loader-secondary-bg !important;
+            color: $kendo-loader-secondary-bg !important;
         }
     }