@progress/kendo-theme-default 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/loader/_layout.scss

@@ -1,587 +1,7 @@
-@use "./_variables.scss" as *;
-@use "../overlay/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/loader/_layout.scss" as *;
 
-@mixin 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: $kendo-loader-segment-border-radius;
-        background-color: currentColor;
-        position: absolute;
-    }
-
-    // Loader sizes
-    .k-loader-sm {
-        padding: $kendo-loader-sm-padding;
-
-        .k-loader-segment {
-            width: $kendo-loader-sm-segment-size;
-            height: $kendo-loader-sm-segment-size;
-        }
-    }
-    .k-loader-md {
-        padding: $kendo-loader-md-padding;
-
-        .k-loader-segment {
-            width: $kendo-loader-md-segment-size;
-            height: $kendo-loader-md-segment-size;
-        }
-    }
-    .k-loader-lg {
-        padding: $kendo-loader-lg-padding;
-
-        .k-loader-segment {
-            width: $kendo-loader-lg-segment-size;
-            height: $kendo-loader-lg-segment-size;
-        }
-    }
-
-
-
-
-    // Loader pulsing 2
-    @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( #{$kendo-loader-sm-segment-size} * 3 );
-                height: calc( #{$kendo-loader-sm-segment-size} * 1.5 );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                width: calc( #{$kendo-loader-md-segment-size} * 3 );
-                height: calc( #{$kendo-loader-md-segment-size} * 1.5 );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                width: calc( #{$kendo-loader-lg-segment-size} * 3 );
-                height: calc( #{$kendo-loader-lg-segment-size} * 1.5 );
-            }
-        }
-    }
-
-
-
-
-    // Loader spinner 3
-    @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: calc( -2s / 3 );
-        }
-        .k-loader-segment:nth-child(3) {
-            top: 100%;
-            left: 100%;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -4s / 3 );
-        }
-
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                margin: calc( #{$kendo-loader-sm-segment-size} / 2 );
-                width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} );
-                height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                margin: calc( #{ $kendo-loader-md-segment-size} / 2 );
-                width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} );
-                height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                margin: calc( #{$kendo-loader-lg-segment-size} / 2 );
-                width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} );
-                height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} );
-            }
-        }
-    }
-
-
-
-
-    // Loader spinner 4
-    @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: $kendo-loader-sm-spinner-4-width;
-                height: $kendo-loader-sm-spinner-4-height;
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                width: $kendo-loader-md-spinner-4-width;
-                height: $kendo-loader-md-spinner-4-height;
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                width: $kendo-loader-lg-spinner-4-width;
-                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: $kendo-overlay-opacity;
-    }
-
-    .k-loader-container-inner {
-        display: flex;
-        align-items: center;
-        position: relative;
-        z-index: 2;
-    }
-
-    .k-loader-container-panel {
-        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: $kendo-loader-sm-container-padding;
-            gap: $kendo-loader-sm-container-gap;
-        }
-
-        .k-loader-container-label {
-            font-size: $kendo-loader-sm-container-font-size;
-        }
-    }
-    .k-loader-container-md {
-        .k-loader-container-inner {
-            padding: $kendo-loader-md-container-padding;
-            gap: $kendo-loader-md-container-gap;
-        }
-
-        .k-loader-container-label {
-            font-size: $kendo-loader-md-container-font-size;
-        }
-    }
-    .k-loader-container-lg {
-        .k-loader-container-inner {
-            padding: $kendo-loader-lg-container-padding;
-            gap: $kendo-loader-lg-container-gap;
-        }
-
-        .k-loader-container-label {
-            font-size: $kendo-loader-lg-container-font-size;
-        }
-    }
-
-    // Loader Position
-    .k-loader-top {
-        .k-loader-container-inner {
-            flex-direction: column;
-            text-align: center;
-        }
-    }
-    .k-loader-end {
-        .k-loader-container-label {
-            order: -1;
-        }
-    }
-
-}
-
-// Legacy implementation of the loading icon inside inputs and pickers
-// Replace with loader component
-@mixin kendo-loading--layout-base() {
-
-    // 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: $kendo-zindex-loading;
-
-        &.k-opaque {
-            .k-loading-color {
-                opacity: 1;
-            }
-        }
-    }
-    .k-loading-text {
-        text-indent: -4000px;
-        text-align: center;
-        position: absolute;
-        color: $kendo-loading-text;
-    }
-    .k-loading-image {
-        z-index: 2;
-        color: $kendo-loading-text;
-    }
-    .k-loading-color {
-        background-color: $kendo-loading-bg;
-        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: $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);
-        }
-    }
-
-}
 
 @mixin kendo-loader--layout() {
     @include kendo-loader--layout-base();
-    @include kendo-loading--layout-base();
+    @include kendo-loading--layout-base()
 }

package/scss/loader/_theme.scss

@@ -1,20 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-loader--theme-base() {
-
-    @each $name, $color in $kendo-theme-colors {
-        .k-loader-#{$name} {
-            color: $color;
-        }
-    }
-
-    .k-loader-container-panel {
-        background-color: $kendo-loader-container-panel-bg;
-        border-color: $kendo-loader-container-panel-border-color;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/loader/_theme.scss" as *;
 
 
 @mixin kendo-loader--theme() {

package/scss/loader/_variables.scss

@@ -125,3 +125,43 @@ $kendo-loading-opacity: .3 !default;
 /// The z-index of the Loading indicator.
 /// @group loading
 $kendo-zindex-loading: 100 !default;
+
+@forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with (
+    $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius,
+    $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size,
+    $kendo-loader-md-segment-size: $kendo-loader-md-segment-size,
+    $kendo-loader-lg-segment-size: $kendo-loader-lg-segment-size,
+    $kendo-loader-sm-padding: $kendo-loader-sm-padding,
+    $kendo-loader-md-padding: $kendo-loader-md-padding,
+    $kendo-loader-lg-padding: $kendo-loader-lg-padding,
+    $kendo-loader-sm-spinner-3-width: $kendo-loader-sm-spinner-3-width,
+    $kendo-loader-md-spinner-3-width: $kendo-loader-md-spinner-3-width,
+    $kendo-loader-lg-spinner-3-width: $kendo-loader-lg-spinner-3-width,
+    $kendo-loader-sm-spinner-3-height: $kendo-loader-sm-spinner-3-height,
+    $kendo-loader-md-spinner-3-height: $kendo-loader-md-spinner-3-height,
+    $kendo-loader-lg-spinner-3-height: $kendo-loader-lg-spinner-3-height,
+    $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-spinner-4-width,
+    $kendo-loader-md-spinner-4-width: $kendo-loader-md-spinner-4-width,
+    $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-spinner-4-width,
+    $kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-height,
+    $kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-height,
+    $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-height,
+    $kendo-loader-container-panel-border-width: $kendo-loader-container-panel-border-width,
+    $kendo-loader-container-panel-border-style: $kendo-loader-container-panel-border-style,
+    $kendo-loader-container-panel-border-color: $kendo-loader-container-panel-border-color,
+    $kendo-loader-container-panel-border-radius: $kendo-loader-container-panel-border-radius,
+    $kendo-loader-container-panel-bg: $kendo-loader-container-panel-bg,
+    $kendo-loader-sm-container-padding: $kendo-loader-sm-container-padding,
+    $kendo-loader-md-container-padding: $kendo-loader-md-container-padding,
+    $kendo-loader-lg-container-padding: $kendo-loader-lg-container-padding,
+    $kendo-loader-sm-container-gap: $kendo-loader-sm-container-gap,
+    $kendo-loader-md-container-gap: $kendo-loader-md-container-gap,
+    $kendo-loader-lg-container-gap: $kendo-loader-lg-container-gap,
+    $kendo-loader-sm-container-font-size: $kendo-loader-sm-container-font-size,
+    $kendo-loader-md-container-font-size: $kendo-loader-md-container-font-size,
+    $kendo-loader-lg-container-font-size: $kendo-loader-lg-container-font-size,
+    $kendo-loading-bg: $kendo-loading-bg,
+    $kendo-loading-text: $kendo-loading-text,
+    $kendo-loading-opacity: $kendo-loading-opacity,
+    $kendo-zindex-loading: $kendo-zindex-loading
+);