@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/loader/_layout.scss

@@ -1,601 +1,44 @@
 @use "sass:math";
 @use "./_variables.scss" as *;
 @use "../overlay/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/loader/_layout.scss" as *;
 
 @mixin kendo-loader--layout() {
+    @include kendo-loader--layout-base();
 
-    .k-loader {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        box-sizing: border-box;
-
-        // Prevents the inline elements from being displaced.
-        // A good example is the 'pulsing' loader inside a button.
-        line-height: 0;
-    }
-
-    .k-loader-canvas {
-        display: flex;
-        position: relative;
-    }
-
-    // Loader segment
-    .k-loader-segment {
-        border-radius: var( --kendo-loader-segment-border-radius, #{$kendo-loader-segment-border-radius} );
-        background-color: currentColor;
-        position: absolute;
-    }
-
-    // Loader sizes
     .k-loader-sm {
-        padding-inline: var( --kendo-loader-sm-padding-x, #{$kendo-loader-sm-padding-x} );
-        padding-block: var( --kendo-loader-sm-padding-y, #{$kendo-loader-sm-padding-y} );
-
-        .k-loader-segment {
-            width: var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} );
-            height: var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} );
-        }
+        padding-inline: $kendo-loader-sm-padding-x;
+        padding-block: $kendo-loader-sm-padding-y;
     }
     .k-loader-md {
-        padding-inline: var( --kendo-loader-md-padding-x, #{$kendo-loader-md-padding-x} );
-        padding-block: var( --kendo-loader-md-padding-y, #{$kendo-loader-md-padding-y} );
-
-        .k-loader-segment {
-            width: var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} );
-            height: var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} );
-        }
+        padding-inline: $kendo-loader-md-padding-x;
+        padding-block: $kendo-loader-md-padding-y;
     }
     .k-loader-lg {
-        padding-inline: var( --kendo-loader-lg-padding-x, #{$kendo-loader-lg-padding-x} );
-        padding-block: var( --kendo-loader-lg-padding-y, #{$kendo-loader-lg-padding-y} );
-
-        .k-loader-segment {
-            width: var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} );
-            height: var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} );
-        }
-    }
-
-
-
-    // Pulsing 2
-
-    // Animation
-    @keyframes pulsing-2-segment {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.5); }
-        100% { transform: scale(1); }
-    }
-
-
-    // Component
-    .k-loader-pulsing-2 {
-
-        .k-loader-canvas {
-            align-items: center;
-        }
-
-        .k-loader-segment:nth-child(1) {
-            left: 0;
-            transform: scale( 1.5 );
-            transform-origin: 0 50%;
-            animation: pulsing-2-segment 1s ease infinite;
-            animation-delay: -.5s;
-        }
-        .k-loader-segment:nth-child(2) {
-            right: 0;
-            transform-origin: 100% 50%;
-            animation: pulsing-2-segment 1s ease infinite;
-        }
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                width: calc( var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) * 3 );
-                height: calc( var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) * 1.5 );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                width: calc( var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) * 3 );
-                height: calc( var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) * 1.5 );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                width: calc( var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) * 3 );
-                height: calc( var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) * 1.5 );
-            }
-        }
-    }
-
-
-
-    // Spinner 3
-
-    // Animation
-    @keyframes spinner-3-segment {
-        0% {
-            top: 0;
-            left: 50%;
-        }
-
-        33.3333% {
-            top: 100%;
-            left: 0;
-        }
-
-        66.6666% {
-            top: 100%;
-            left: 100%;
-        }
-
-        100% {
-            top: 0;
-            left: 50%;
-        }
-    }
-
-
-    // Component
-    .k-loader-spinner-3 {
-
-        // Note: Until we can provide a css variables solution, or something better:
-        // * the dot center is on the exact point of angle
-        // * offset dots by artifically reduce dimentions by 1 dot size
-        // * compensate by setting margin on all sides half a dot size
-
-        .k-loader-segment {
-            transform: translate( -50%, -50% );
-        }
-        .k-loader-segment:nth-child(1) {
-            top: 0;
-            left: 50%;
-            animation: spinner-3-segment 2s ease infinite;
-        }
-        .k-loader-segment:nth-child(2) {
-            top: 100%;
-            left: 0;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: math.div( -2s, 3 );
-        }
-        .k-loader-segment:nth-child(3) {
-            top: 100%;
-            left: 100%;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: math.div( -4s, 3 );
-        }
-
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                --kendo-loader-sm-segment-size: #{$kendo-loader-sm-segment-size};
-                --kendo-loader-sm-spinner-3-width: #{$kendo-loader-sm-spinner-3-width};
-                --kendo-loader-sm-spinner-3-height: #{$kendo-loader-sm-spinner-3-height};
-
-                margin: calc( var( --kendo-loader-sm-segment-size ) / 2 );
-                width: calc( var( --kendo-loader-sm-spinner-3-width ) - var( --kendo-loader-sm-segment-size ) );
-                height: calc( var( --kendo-loader-sm-spinner-3-height ) - var( --kendo-loader-sm-segment-size ) );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                --kendo-loader-md-segment-size: #{$kendo-loader-md-segment-size};
-                --kendo-loader-md-spinner-3-width: #{$kendo-loader-md-spinner-3-width};
-                --kendo-loader-md-spinner-3-height: #{$kendo-loader-md-spinner-3-height};
-
-                margin: calc( var( --kendo-loader-md-segment-size ) / 2 );
-                width: calc( var( --kendo-loader-md-spinner-3-width ) - var( --kendo-loader-md-segment-size ) );
-                height: calc( var( --kendo-loader-md-spinner-3-height ) - var( --kendo-loader-md-segment-size ) );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                --kendo-loader-lg-segment-size: #{$kendo-loader-lg-segment-size};
-                --kendo-loader-lg-spinner-3-width: #{$kendo-loader-lg-spinner-3-width};
-                --kendo-loader-lg-spinner-3-height: #{$kendo-loader-lg-spinner-3-height};
-
-                margin: calc( var( --kendo-loader-lg-segment-size ) / 2 );
-                width: calc( var( --kendo-loader-lg-spinner-3-width ) - var( --kendo-loader-lg-segment-size ) );
-                height: calc( var( --kendo-loader-lg-spinner-3-height ) - var( --kendo-loader-lg-segment-size ) );
-            }
-        }
+        padding-inline: $kendo-loader-lg-padding-x;
+        padding-block: $kendo-loader-lg-padding-y;
     }
 
-
-
-    // Spinner 4
-
-    // Animation
-    @keyframes spinner-4-segment-1 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 0;
-            left: 0;
-            transform: translateX(0) translateY(0);
-        }
-
-        66.6% {
-            top: 0;
-            left: 0;
-            transform: translateX(0) translateY(0);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-2 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 0;
-            left: 100%;
-            transform: translateX(-100%) translateY(0);
-        }
-
-        66.6% {
-            top: 0;
-            left: 100%;
-            transform: translateX(-100%) translateY(0);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-3 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 100%;
-            left: 100%;
-            transform: translateX(-100%) translateY(-100%);
-        }
-
-        66.6% {
-            top: 100%;
-            left: 100%;
-            transform: translateX(-100%) translateY(-100%);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-4 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 100%;
-            left: 0;
-            transform: translateX(0) translateY(-100%);
-        }
-
-        66.6% {
-            top: 100%;
-            left: 0;
-            transform: translateX(0) translateY(-100%);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4 {
-        0% {
-            transform: rotate(0);
-        }
-
-        33.3% {
-            transform: rotate(0);
-        }
-
-        66.6% {
-            transform: rotate(180deg);
-        }
-
-        100% {
-            transform: rotate(180deg);
-        }
-    }
-
-    .k-loader-spinner-4 {
-        .k-loader-canvas {
-            animation: spinner-4 1.833s ease infinite;
-        }
-
-        .k-loader-segment {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-
-            &:nth-child(1) {
-                animation: spinner-4-segment-1 1.833s ease infinite;
-            }
-
-            &:nth-child(2) {
-                animation: spinner-4-segment-2 1.833s ease infinite;
-            }
-
-            &:nth-child(3) {
-                animation: spinner-4-segment-3 1.833s ease infinite;
-            }
-
-            &:nth-child(4) {
-                animation: spinner-4-segment-4 1.833s ease infinite;
-            }
-        }
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                width: var( --kendo-loader-sm-spinner-4-width, #{$kendo-loader-sm-spinner-4-width} );
-                height: var( --kendo-loader-sm-spinner-4-height, #{$kendo-loader-sm-spinner-4-height} );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                width: var( --kendo-loader-md-spinner-4-width, #{$kendo-loader-md-spinner-4-width} );
-                height: var( --kendo-loader-md-spinner-4-height, #{$kendo-loader-md-spinner-4-height} );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                width: var( --kendo-loader-lg-spinner-4-width, #{$kendo-loader-lg-spinner-4-width} );
-                height: var( --kendo-loader-lg-spinner-4-height, #{$kendo-loader-lg-spinner-4-height} );
-            }
-        }
-    }
-
-
-
-    // Loader Container
-    .k-loader-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 20001;
-
-        .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;
-    }
-
-    // TODO: use k-overlay as a base class in rendering
-    .k-loader-container-overlay {
-        opacity: var( --kendo-overlay-opacity, #{$kendo-overlay-opacity} );
-    }
-
-    .k-loader-container-inner {
-        display: flex;
-        align-items: center;
-        position: relative;
-        z-index: 2;
-    }
-
-    .k-loader-container-panel {
-        border-width: var( --kendo-loader-container-panel-border-width, #{$kendo-loader-container-panel-border-width} );
-        border-style: var( --kendo-loader-container-panel-border-style, #{$kendo-loader-container-panel-border-style} );
-        border-radius: var( --kendo-loader-container-panel-border-radius, #{$kendo-loader-container-panel-border-radius} );
-    }
-
-    // Loader Container Sizes
     .k-loader-container-sm {
         .k-loader-container-inner {
-            padding-inline: var( --kendo-loader-sm-container-padding-x, #{$kendo-loader-sm-container-padding-x} );
-            padding-block: var( --kendo-loader-sm-container-padding-y, #{$kendo-loader-sm-container-padding-y} );
-            gap: var( --kendo-loader-sm-container-gap, #{$kendo-loader-sm-container-gap} );
-        }
-
-        .k-loader-container-label {
-            font-size: var( --kendo-loader-sm-container-font-size, #{$kendo-loader-sm-container-font-size} );
+            padding-inline: $kendo-loader-sm-container-padding-x;
+            padding-block: $kendo-loader-sm-container-padding-y;
         }
     }
     .k-loader-container-md {
         .k-loader-container-inner {
-            padding-inline: var( --kendo-loader-md-container-padding-x, #{$kendo-loader-md-container-padding-x} );
-            padding-block: var( --kendo-loader-md-container-padding-y, #{$kendo-loader-md-container-padding-y} );
-            gap: var( --kendo-loader-md-container-gap, #{$kendo-loader-md-container-gap} );
-        }
-
-        .k-loader-container-label {
-            font-size: var( --kendo-loader-md-container-font-size, #{$kendo-loader-md-container-font-size} );
+            padding-inline: $kendo-loader-md-container-padding-x;
+            padding-block: $kendo-loader-md-container-padding-y;
         }
     }
     .k-loader-container-lg {
         .k-loader-container-inner {
-            padding-inline: var( --kendo-loader-lg-container-padding-x, #{$kendo-loader-lg-container-padding-x} );
-            padding-block: var( --kendo-loader-lg-container-padding-y, #{$kendo-loader-lg-container-padding-y} );
-            gap: var( --kendo-loader-lg-container-gap, #{$kendo-loader-lg-container-gap} );
-        }
-
-        .k-loader-container-label {
-            font-size: var( --kendo-loader-lg-container-font-size, #{$kendo-loader-lg-container-font-size} );
-        }
-    }
-
-    // Loader Position
-    .k-loader-top {
-        .k-loader-container-inner {
-            flex-direction: column;
-            text-align: center;
+            padding-inline: $kendo-loader-lg-container-padding-x;
+            padding-block: $kendo-loader-lg-container-padding-y;
         }
     }
-    .k-loader-end {
-        .k-loader-container-label {
-            order: -1;
-        }
-    }
-
 }
 
 @mixin kendo-loading--layout() {
-
-    // Loading mask
-    .k-loading-mask,
-    .k-loading-image,
-    .k-loading-color {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        position: absolute;
-        top: 0;
-        left: 0;
-
-        *,
-        *::before,
-        *::after,
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-loading-mask {
-        z-index: var( --kendo-zindex-loading, #{$kendo-zindex-loading} );
-
-        &.k-opaque {
-            .k-loading-color {
-                opacity: 1;
-            }
-        }
-    }
-    .k-loading-text {
-        text-indent: -4000px;
-        text-align: center;
-        position: absolute;
-        color: var( --kendo-loading-text, #{$kendo-loading-text} );
-    }
-    .k-loading-image {
-        z-index: 2;
-        color: var( --kendo-loading-text, #{$kendo-loading-text} );
-    }
-    .k-loading-color {
-        background-color: var( --kendo-loading-bg, #{$kendo-loading-bg} );
-        opacity: var( --kendo-loading-opacity, #{$kendo-loading-opacity} );
-    }
-
-    // Loading indicator
-    .k-i-loading {
-        width: 1em;
-        height: 1em;
-        line-height: 1;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        position: relative;
-        background-color: transparent;
-        box-sizing: border-box;
-        color: var( --kendo-loading-text, #{$kendo-loading-text} );
-
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-i-loading::before,
-    .k-i-loading::after,
-    .k-loading-image::before,
-    .k-loading-image::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: inline-block;
-        content: "";
-        box-sizing: inherit;
-        border-radius: 50%;
-        border-width: .05em;
-        border-style: solid;
-        border-color: currentColor;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-        background-color: transparent;
-    }
-
-    .k-icon.k-i-loading::before,
-    .k-icon.k-i-loading::after {
-        content: "";
-    }
-
-    .k-i-loading::before,
-    .k-loading-image::before {
-        margin-top: -.5em;
-        margin-left: -.5em;
-        width: 1em;
-        height: 1em;
-        animation: k-loading-animation .7s linear infinite;
-    }
-
-    .k-i-loading::after,
-    .k-loading-image::after {
-        margin-top: -.25em;
-        margin-left: -.25em;
-        width: .5em;
-        height: .5em;
-        animation: k-loading-animation reverse 1.4s linear infinite;
-    }
-
-    .k-loading-image::before,
-    .k-loading-image::after {
-        content: "";
-        // See https://github.com/telerik/kendo-themes/issues/1925
-        border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: clamp( .015em, 1px, 1px );
-        font-size: 4em;
-    }
-
-    // Loading animation
-    @keyframes k-loading-animation {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
+    @include kendo-loading--layout-base();
 }

package/scss/loader/_theme.scss

@@ -1,19 +1,7 @@
 @use "sass:map";
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/loader/_theme.scss" as *;
 
 @mixin kendo-loader--theme() {
-
-    @each $theme-color, $color-props in $kendo-loader-theme-colors {
-        $_bg: map.get( $color-props, bg );
-
-        .k-loader-#{$theme-color} {
-            color: var( --kendo-loader-#{$theme-color}-bg, #{$_bg} );
-        }
-    }
-
-    .k-loader-container-panel {
-        background-color: var( --kendo-loader-container-panel-bg, #{$kendo-loader-container-panel-bg} );
-        border-color: var( --kendo-loader-container-panel-border-color, #{$kendo-loader-container-panel-border-color} );
-    }
-
+    @include kendo-loader--theme-base();
 }