@progress/kendo-theme-fluent 5.7.0

package/scss/listview/_variables.scss

@@ -0,0 +1,91 @@
+@use "../core" as *;
+@use "../list/_variables.scss"as *;
+
+/// Horizontal padding of listview.
+/// @group listview
+$kendo-listview-padding-x: map-get( $kendo-spacing, 1 ) !default;
+/// Vertical padding of listview.
+/// @group listview
+$kendo-listview-padding-y: map-get( $kendo-spacing, 1 ) !default;
+/// Width of listview.
+/// @group listview
+$kendo-listview-border-width: map-get( $kendo-spacing, hair ) !default;
+
+/// Horizontal padding of listview header.
+/// @group listview
+$kendo-listview-header-padding-x: map-get( $kendo-spacing, 4 ) !default;
+/// Vertical padding of listview header.
+/// @group listview
+$kendo-listview-header-padding-y: map-get( $kendo-spacing, 2 ) !default;
+
+/// Horizontal padding of listview footer.
+/// @group listview
+$kendo-listview-footer-padding-x: $kendo-listview-header-padding-x !default;
+/// Vertical padding of listview footer.
+/// @group listview
+$kendo-listview-footer-padding-y: $kendo-listview-header-padding-y !default;
+
+/// Horizontal padding of listview items.
+/// @group listview
+$kendo-listview-item-padding-x: map-get( $kendo-spacing, 1 ) !default;
+/// Vertical padding of listview items.
+/// @group listview
+$kendo-listview-item-padding-y: map-get( $kendo-spacing, 1 ) !default;
+
+/// Font family of listview.
+/// @group listview
+$kendo-listview-font-family: var( --kendo-font-family, initial ) !default;
+/// Font size of listview.
+/// @group listview
+$kendo-listview-font-size: var( --kendo-font-size, initial ) !default;
+/// Line height of listview.
+/// @group listview
+$kendo-listview-line-height: var( --kendo-line-height, initial ) !default;
+
+/// Gap between items of grid listview.
+/// @group listview
+$kendo-listview-grid-gap: map-get( $kendo-spacing, 0 ) !default;
+
+/// Text color of listview.
+/// @group listview
+$kendo-listview-text: var( --kendo-component-text, initial ) !default;
+/// Background color of listview.
+/// @group listview
+$kendo-listview-bg: var( --kendo-component-bg, initial ) !default;
+/// Border color of listview.
+/// @group listview
+$kendo-listview-border: var( --kendo-component-border, initial ) !default;
+
+/// Text color of focused listview items.
+/// @group listview
+$kendo-listview-item-focus-text: initial !default;
+/// Background color of focused listview items.
+/// @group listview
+$kendo-listview-item-focus-bg: initial !default;
+/// Box shadow of focused listview items.
+/// @group listview
+$kendo-listview-item-focus-shadow: var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) !default;
+
+/// Text color of selected listview items.
+/// @group listview
+$kendo-listview-item-selected-text: initial !default;
+/// Background color of selected listview items.
+/// @group listview
+$kendo-listview-item-selected-bg: get-theme-color-var( neutral-20 ) !default;
+
+/// Text color of listview header.
+/// @group listview
+$kendo-listview-header-text: initial !default;
+/// Background color of listview.
+/// @group listview
+$kendo-listview-header-bg: initial !default;
+/// Border color of listview.
+/// @group listview
+$kendo-listview-header-border: $kendo-listview-border !default;
+
+/// Text color of listview footer.
+/// @group listview
+$kendo-listview-footer-text: initial !default;
+/// Background color of listview.
+/// @group listview
+$kendo-listview-footer-bg: initial !default;

package/scss/listview/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "listview",
+    dependencies: (
+        "icon",
+        "list",
+        "pager"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "listview" ) {
+        @include kendo-listview--layout();
+        @include kendo-listview--theme();
+    }
+}

package/scss/loader/_layout.scss

@@ -0,0 +1,458 @@
+@use "_variables.scss" as *;
+@use "../overlay/_variables.scss" as *;
+
+@mixin kendo-loader--layout() {
+
+    .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-padding-x-sm, #{$kendo-loader-padding-x-sm} );
+        padding-block: var( --kendo-loader-padding-y-sm, #{$kendo-loader-padding-y-sm} );
+
+        .k-loader-segment {
+            width: var( --kendo-loader-segment-size-sm, #{$kendo-loader-segment-size-sm} );
+            height: var( --kendo-loader-segment-size-sm, #{$kendo-loader-segment-size-sm} );
+        }
+    }
+    .k-loader-md {
+        padding-inline: var( --kendo-loader-padding-x-md, #{$kendo-loader-padding-x-md} );
+        padding-block: var( --kendo-loader-padding-y-md, #{$kendo-loader-padding-y-md} );
+
+        .k-loader-segment {
+            width: var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} );
+            height: var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} );
+        }
+    }
+    .k-loader-lg {
+        padding-inline: var( --kendo-loader-padding-x-lg, #{$kendo-loader-padding-x-lg} );
+        padding-block: var( --kendo-loader-padding-y-lg, #{$kendo-loader-padding-y-lg} );
+
+        .k-loader-segment {
+            width: var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} );
+            height: var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} );
+        }
+    }
+
+
+
+    // 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-segment-size-sm, #{$kendo-loader-segment-size-sm} ) * 3 );
+                height: calc( var( --kendo-loader-segment-size-sm, #{$kendo-loader-segment-size-sm} ) * 1.5 );
+            }
+        }
+
+        &.k-loader-md {
+            .k-loader-canvas {
+                width: calc( var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} ) * 3 );
+                height: calc( var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} ) * 1.5 );
+            }
+        }
+
+        &.k-loader-lg {
+            .k-loader-canvas {
+                width: calc( var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} ) * 3 );
+                height: calc( var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} ) * 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: 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( var( --kendo-loader-segment-size-sm, #{$kendo-loader-segment-size-sm} ) / 2 );
+                width: calc( var( --kendo-loader-spinner-3-width-sm, #{$kendo-loader-spinner-3-width-sm} ) - var( --kendo-loader-segment-size-sm, #{$kendo-loader-segment-size-sm} ) );
+                height: calc( var( --kendo-loader-spinner-3-height-sm, #{$kendo-loader-spinner-3-height-sm} ) - var( --kendo-loader-segment-size-sm, #{$kendo-loader-segment-size-sm} ) );
+            }
+        }
+
+        &.k-loader-md {
+            .k-loader-canvas {
+                margin: calc( var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} ) / 2 );
+                width: calc( var( --kendo-loader-spinner-3-width-md, #{$kendo-loader-spinner-3-width-md} ) - var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} ) );
+                height: calc( var( --kendo-loader-spinner-3-height-md, #{$kendo-loader-spinner-3-height-md} ) - var( --kendo-loader-segment-size-md, #{$kendo-loader-segment-size-md} ) );
+            }
+        }
+
+        &.k-loader-lg {
+            .k-loader-canvas {
+                margin: calc( var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} ) / 2 );
+                width: calc( var( --kendo-loader-spinner-3-width-lg, #{$kendo-loader-spinner-3-width-lg} ) - var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} ) );
+                height: calc( var( --kendo-loader-spinner-3-height-lg, #{$kendo-loader-spinner-3-height-lg} ) - var( --kendo-loader-segment-size-lg, #{$kendo-loader-segment-size-lg} ) );
+            }
+        }
+    }
+
+
+
+    // 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-spinner-4-width-sm, #{$kendo-loader-spinner-4-width-sm} );
+                height: var( --kendo-loader-spinner-4-height-sm, #{$kendo-loader-spinner-4-height-sm} );
+            }
+        }
+
+        &.k-loader-md {
+            .k-loader-canvas {
+                width: var( --kendo-loader-spinner-4-width-md, #{$kendo-loader-spinner-4-width-md} );
+                height: var( --kendo-loader-spinner-4-height-md, #{$kendo-loader-spinner-4-height-md} );
+            }
+        }
+
+        &.k-loader-lg {
+            .k-loader-canvas {
+                width: var( --kendo-loader-spinner-4-width-lg, #{$kendo-loader-spinner-4-width-lg} );
+                height: var( --kendo-loader-spinner-4-height-lg, #{$kendo-loader-spinner-4-height-lg} );
+            }
+        }
+    }
+
+
+
+    // Loader Container
+    .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;
+    }
+
+    // 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-container-padding-x-sm, #{$kendo-loader-container-padding-x-sm} );
+            padding-block: var( --kendo-loader-container-padding-y-sm, #{$kendo-loader-container-padding-y-sm} );
+            gap: var( --kendo-loader-container-gap-sm, #{$kendo-loader-container-gap-sm} );
+        }
+
+        .k-loader-container-label {
+            font-size: var( --kendo-loader-container-font-size-sm, #{$kendo-loader-container-font-size-sm} );
+        }
+    }
+    .k-loader-container-md {
+        .k-loader-container-inner {
+            padding-inline: var( --kendo-loader-container-padding-x-md, #{$kendo-loader-container-padding-x-md} );
+            padding-block: var( --kendo-loader-container-padding-y-md, #{$kendo-loader-container-padding-y-md} );
+            gap: var( --kendo-loader-container-gap-md, #{$kendo-loader-container-gap-md} );
+        }
+
+        .k-loader-container-label {
+            font-size: var( --kendo-loader-container-font-size-md, #{$kendo-loader-container-font-size-md} );
+        }
+    }
+    .k-loader-container-lg {
+        .k-loader-container-inner {
+            padding-inline: var( --kendo-loader-container-padding-x-lg, #{$kendo-loader-container-padding-x-lg} );
+            padding-block: var( --kendo-loader-container-padding-y-lg, #{$kendo-loader-container-padding-y-lg} );
+            gap: var( --kendo-loader-container-gap-lg, #{$kendo-loader-container-gap-lg} );
+        }
+
+        .k-loader-container-label {
+            font-size: var( --kendo-loader-container-font-size-lg, #{$kendo-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;
+        }
+    }
+
+}

package/scss/loader/_theme.scss

@@ -0,0 +1,18 @@
+@use "_variables.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} );
+    }
+
+}