@progress/kendo-theme-fluent 5.7.0

package/scss/popover/_layout.scss

@@ -0,0 +1,101 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-popover--layout() {
+
+    // Popover
+    .k-popover {
+        @include border-radius( var( --kendo-popover-border-radius, #{$kendo-popover-border-radius} ) );
+        padding: 0;
+        border-width: var( --kendo-popover-border-width, #{$kendo-popover-border-width} );
+        border-style: var( --kendo-popover-border-style, #{$kendo-popover-border-style} );
+        box-sizing: border-box;
+        outline: 0;
+        font-size: var( --kendo-popover-font-size, #{$kendo-popover-font-size} );
+        font-family: var( --kendo-popover-font-family, #{$kendo-popover-font-family} );
+        line-height: var( --kendo-popover-line-height, #{$kendo-popover-line-height} );
+        display: flex;
+        flex-flow: column nowrap;
+        z-index: 12000;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-popover-header {
+            margin-block-end: 0;
+        }
+    }
+
+    // Inner
+    .k-popover-inner {
+        position: relative;
+        border-radius: inherit;
+    }
+
+    // Header
+    .k-popover-header {
+        @extend .k-card-title;
+        border-width: 0 0 var( --kendo-popover-header-border-width, #{$kendo-popover-header-border-width} );
+        border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-header-border-style} );
+        padding-inline: var( --kendo-popover-header-padding-x, #{$kendo-popover-header-padding-x} );
+        padding-block: var( --kendo-popover-header-padding-y, #{$kendo-popover-header-padding-y} );
+    }
+
+    // Body
+    .k-popover-body {
+        padding-inline: var( --kendo-popover-body-padding-x, #{$kendo-popover-body-padding-x} );
+        padding-block-start: var( --kendo-popover-body-padding-y, #{$kendo-popover-body-padding-y} );
+        padding-block-end: 0;
+
+        @at-root .k-popover-header + .k-popover-body {
+            padding-block-start: 0;
+        }
+    }
+
+    // Actions
+    .k-popover-actions {
+        border-width: var( --kendo-popover-actions-border-width, #{$kendo-popover-actions-border-width} ) 0 0;
+        padding-inline: var( --kendo-popover-actions-padding-x, #{$kendo-popover-actions-padding-x} );
+        padding-block: var( --kendo-popover-actions-padding-y, #{$kendo-popover-actions-padding-y} );
+        gap: var( --kendo-popover-actions-gap, $kendo-popover-actions-gap );
+    }
+
+    // Callout
+    .k-popover-callout {
+        margin: 0;
+        width: var( --kendo-popover-callout-width, #{$kendo-popover-callout-width} );
+        height: var( --kendo-popover-callout-height, #{$kendo-popover-callout-height} );
+        border-width: var( --kendo-popover-callout-border-width, #{$kendo-popover-callout-border-width} );
+        border-style: var( --kendo-popover-callout-border-style, #{$kendo-popover-callout-border-style} );
+        position: absolute;
+
+        &.k-callout-n {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+
+        &.k-callout-e {
+            top: 50%;
+            right: 0;
+            transform: translate(50%, -50%) rotate(-45deg);
+        }
+
+        &.k-callout-s {
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 50%) rotate(45deg);
+        }
+
+        &.k-callout-w {
+            top: 50%;
+            left: 0;
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+    }
+}

package/scss/popover/_theme.scss

@@ -0,0 +1,41 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-popover--theme() {
+
+    // Popover
+    .k-popover {
+        @include box-shadow( var( --kendo-popover-shadow, $kendo-popover-shadow ) );
+
+        @include fill(
+            var( --kendo-popover-text, $kendo-popover-text ),
+            var( --kendo-popover-bg, $kendo-popover-bg ),
+            var( --kendo-popover-border, $kendo-popover-border )
+        );
+    }
+
+    // Inner
+    .k-popover-inner {
+        background-color: inherit;
+        border-color: inherit;
+    }
+
+    // Header
+    .k-popover-header {
+        @include fill(
+            var( --kendo-popover-header-text, $kendo-popover-header-text ),
+            var( --kendo-popover-header-bg, $kendo-popover-header-bg ),
+            var( --kendo-popover-header-border, $kendo-popover-header-border )
+        );
+    }
+
+    // Callout
+    .k-popover-callout {
+        @include fill(
+            $bg: inherit,
+            $border: inherit
+        );
+
+        @include box-shadow( inherit )
+    }
+}

package/scss/popover/_variables.scss

@@ -0,0 +1,90 @@
+@use "../core/" as *;
+@use "../window/_variables.scss"as *;
+@use "../dialog/_variables.scss"as *;
+
+/// Border width around the popover.
+/// @group popover
+$kendo-popover-border-width: $kendo-dialog-border-width !default;
+/// Border style around the popover.
+/// @group popover
+$kendo-popover-border-style: solid !default;
+/// Border radius around the popover.
+/// @group popover
+$kendo-popover-border-radius: $kendo-window-border-radius !default;
+/// Font size of the popover.
+/// @group popover
+$kendo-popover-font-size: $kendo-window-font-size !default;
+/// Font family of the popover.
+/// @group popover
+$kendo-popover-font-family: $kendo-window-font-family !default;
+/// Line height of the popover.
+/// @group popover
+$kendo-popover-line-height: $kendo-window-line-height !default;
+
+/// Background color of the popover.
+/// @group popover
+$kendo-popover-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the popover.
+/// @group popover
+$kendo-popover-text:  var( --kendo-component-text, initial ) !default;
+/// Border color of the popover.
+/// @group popover
+$kendo-popover-border:  var( --kendo-component-border, initial ) !default;
+/// Shadow of the popover.
+/// @group popover
+$kendo-popover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+
+/// Horizontal padding of the popover header.
+/// @group popover
+$kendo-popover-header-padding-x: $kendo-dialog-titlebar-padding-x !default;
+/// Vertical padding of the popover header.
+/// @group popover
+$kendo-popover-header-padding-y: $kendo-dialog-titlebar-padding-y !default;
+/// Border width of the popover header.
+/// @group popover
+$kendo-popover-header-border-width: $kendo-dialog-titlebar-border-width !default;
+/// Border style of the popover header.
+/// @group popover
+$kendo-popover-header-border-style: $kendo-popover-border-style !default;
+/// Background color of the popover header.
+/// @group popover
+$kendo-popover-header-bg: $kendo-dialog-titlebar-bg !default;
+/// Text color of the popover header.
+/// @group popover
+$kendo-popover-header-text: $kendo-dialog-titlebar-text !default;
+/// Border color of the popover header.
+/// @group popover
+$kendo-popover-header-border: $kendo-dialog-titlebar-border !default;
+
+/// Horizontal padding of the popover body.
+/// @group popover
+$kendo-popover-body-padding-x: $kendo-window-inner-padding-x !default;
+/// Vertical padding of the popover body.
+/// @group popover
+$kendo-popover-body-padding-y: $kendo-window-inner-padding-y !default;
+
+/// Border width of the popover actions.
+/// @group popover
+$kendo-popover-actions-border-width: 0 !default;
+/// Horizontal padding of the popover actions.
+/// @group popover
+$kendo-popover-actions-padding-x: $kendo-popover-body-padding-x !default;
+/// Vertical padding of the popover actions.
+/// @group popover
+$kendo-popover-actions-padding-y: $kendo-popover-body-padding-y !default;
+/// Gap of the popover actions.
+/// @group popover
+$kendo-popover-actions-gap: map-get( $kendo-spacing, 3 ) !default;
+
+/// Width of the popover callout.
+/// @group popover
+$kendo-popover-callout-width: map-get( $kendo-spacing, 5 ) !default;
+/// Height of the popover callout.
+/// @group popover
+$kendo-popover-callout-height: $kendo-popover-callout-width !default;
+/// Border width of the popover callout.
+/// @group popover
+$kendo-popover-callout-border-width: $kendo-popover-border-width !default;
+/// Border style of the popover callout.
+/// @group popover
+$kendo-popover-callout-border-style: $kendo-popover-border-style !default;

package/scss/popover/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "popover",
+    dependencies: (
+        "action-buttons",
+        "dialog",
+        "window"
+    )
+);
+
+
+// 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( "popover" ) {
+        @include kendo-popover--layout();
+        @include kendo-popover--theme();
+    }
+}

package/scss/popup/_layout.scss

@@ -0,0 +1,53 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-popup--layout() {
+
+    .k-popup {
+        margin: 0;
+        padding-inline: var( --kendo-popup-padding-x, #{$kendo-popup-padding-x} );
+        padding-block: var( --kendo-popup-padding-y, #{$kendo-popup-padding-y} );
+        border-width: var( --kendo-popup-border-width, #{$kendo-popup-border-width} );
+        border-style: solid;
+        border-radius: var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} );
+        box-sizing: border-box;
+        font-size: var( --kendo-popup-font-size, #{$kendo-popup-font-size} );
+        line-height: var( --kendo-popup-line-height, #{$kendo-popup-line-height} );
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        .k-item {
+            outline: none;
+        }
+    }
+    .k-animation-container {
+      @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
+    }
+
+    .k-animation-container-shown {
+        overflow: visible;
+    }
+
+    .k-popup > .k-colorpalette {
+        padding-inline: var( --kendo-popup-content-padding-x, #{$kendo-popup-content-padding-x} );
+        padding-block: var( --kendo-popup-content-padding-y, #{$kendo-popup-content-padding-y} );
+    }
+
+    // Transparent popup
+    .k-popup.k-popup-transparent {
+        border-width: 0;
+        background-color: transparent;
+    }
+
+    // Flush popup
+    .k-popup.k-popup-flush {
+        padding: 0;
+    }
+
+    // Child components
+    .k-popup > .k-coloreditor {
+        border-width: 0;
+    }
+
+}

package/scss/popup/_theme.scss

@@ -0,0 +1,14 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-popup--theme() {
+    .k-popup {
+        @include fill(
+            var( --kendo-popup-text, #{$kendo-popup-text} ),
+            var( --kendo-popup-bg, #{$kendo-popup-bg} ),
+            var( --kendo-popup-border, #{$kendo-popup-border} )
+        );
+        @include box-shadow( var( --kendo-popup-shadow, #{$kendo-popup-shadow} ) );
+    }
+
+}

package/scss/popup/_variables.scss

@@ -0,0 +1,42 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Horizontal padding of the popup.
+/// @group popup
+$kendo-popup-padding-x: 0 !default;
+/// Vertical padding of the popup.
+/// @group popup
+$kendo-popup-padding-y: 0 !default;
+/// Width of the border around the popup.
+/// @group popup
+$kendo-popup-border-width: 0 !default;
+/// Border radius of the popup.
+/// @group popup
+$kendo-popup-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Font size of the popup.
+/// @group popup
+$kendo-popup-font-size: var(--kendo-font-size, inherit) !default;
+/// Line height of the popup.
+/// @group popup
+$kendo-popup-line-height: var(--kendo-line-height, normal) !default;
+
+/// Horizontal padding of the content inside the popup.
+/// @group popup
+$kendo-popup-content-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the content inside the popup.
+/// @group popup
+$kendo-popup-content-padding-y: map-get( $kendo-spacing, 2 ) !default;
+
+/// Background color of the popup.
+/// @group popup
+$kendo-popup-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the popup.
+/// @group popup
+$kendo-popup-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the popup.
+/// @group popup
+$kendo-popup-border: var( --kendo-component-border, initial ) !default;
+/// Box shadow around the popup.
+/// @group popup
+$kendo-popup-shadow: var( --kendo-box-shadow-depth-3, none ) !default;

package/scss/popup/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "popup",
+    dependencies: ()
+);
+
+
+// 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( "popup" ) {
+        @include kendo-popup--layout();
+        @include kendo-popup--theme();
+    }
+}

package/scss/progressbar/_layout.scss

@@ -0,0 +1,279 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-progressbar--layout {
+
+    // Base
+    .k-progressbar {
+        @include border-radius( var( --kendo-progressbar-border-radius, #{$kendo-progressbar-border-radius} ) );
+        --kendo-progressbar-progress: 0;
+        border-width: var( --kendo-progressbar-border-width, #{$kendo-progressbar-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-progressbar-font-family, #{$kendo-progressbar-font-family} );
+        font-size: var( --kendo-progressbar-font-size, #{$kendo-progressbar-font-size} );
+        line-height: var( --kendo-progressbar-line-height, #{$kendo-progressbar-line-height} );
+        display: inline-grid;
+        vertical-align: middle;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+
+        // Selection
+        > .k-selected {
+            border-width: 0;
+            border-style: solid;
+            display: flex;
+            overflow: hidden;
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+        }
+
+
+        // Chunks
+        > ul {
+            border-width: inherit;
+            border-style: inherit;
+            white-space: nowrap;
+            display: flex;
+            align-items: stretch;
+            flex: 1;
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+        }
+
+        .k-item {
+            display: block;
+            border-width: 0;
+            border-style: solid;
+            border-color: transparent;
+        }
+    }
+
+
+    // Status
+    .k-progress-status-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        overflow: unset;
+        flex-shrink: 0;
+
+        &.k-progress-start { justify-content: flex-start; }
+        &.k-progress-center { justify-content: center; }
+        &.k-progress-end { justify-content: flex-end; }
+    }
+
+    .k-progress-status {
+        padding-inline: var( --kendo-progressbar-padding-x, #{$kendo-progressbar-padding-x} );
+        padding-block: var( --kendo-progressbar-padding-y, #{$kendo-progressbar-padding-y} );
+        min-width: 10px;
+        text-align: center;
+        display: inline-block;
+        white-space: nowrap;
+    }
+
+    .k-selected {
+        .k-progress-status {
+            display: none;
+        }
+    }
+
+
+    // Horizontal
+    .k-progressbar-horizontal {
+        width: var( --kendo-progressbar-horizontal-width, #{$kendo-progressbar-horizontal-width} );
+        height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
+        grid-template-columns: 1fr;
+        grid-template-rows: 100%;
+
+        .k-progress-status-wrap {
+            margin-block-start: var( --kendo-progressbar-offset-y, #{$kendo-progressbar-offset-y} );
+        }
+
+        > .k-selected {
+            width: 0;
+            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+            flex-direction: row;
+
+            > .k-progress-status-wrap {
+                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
+            }
+        }
+
+
+        // Chunks
+        > ul {
+            flex-direction: row;
+        }
+
+        .k-item {}
+        .k-item + .k-item {
+            border-inline-start-width: var( --kendo-progressbar-item-border-width, #{$kendo-progressbar-item-border-width} );
+            border-inline-end-width: 0;
+        }
+
+
+        // Horizontal reverse
+        &.k-progressbar-reverse {
+
+            > .k-selected {
+                flex-direction: row-reverse;
+                justify-self: flex-end;
+            }
+        }
+    }
+
+
+    // Vertical
+    .k-progressbar-vertical {
+        width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
+        height: 27em;
+        grid-template-columns: 100%;
+        grid-template-rows: 1fr;
+
+        .k-progress-status-wrap {
+            flex-direction: column;
+            align-items: flex-end;
+            grid-row: 1 / -1;
+            grid-column: 1 / -1;
+            margin-inline-start: var( --kendo-progressbar-offset-y, #{- $kendo-progressbar-offset-y} );
+        }
+
+        .k-progress-status {
+            writing-mode: vertical-lr;
+        }
+
+        > .k-selected {
+            height: 0;
+            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+            flex-direction: column-reverse;
+            align-self: flex-end;
+            align-items: flex-end;
+
+            > .k-progress-status-wrap {
+                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
+            }
+        }
+
+
+        // Chunk
+        > ul {
+            flex-direction: column;
+        }
+        .k-item {}
+        .k-item + .k-item {
+            border-block-start-width: var( --kendo-progressbar-item-border-width, #{$kendo-progressbar-item-border-width} );
+            border-block-end-width: 0;
+        }
+
+
+        // Vertical reverse
+        &.k-progressbar-reverse {
+
+            .k-progress-status-wrap {
+                flex-direction: column-reverse;
+            }
+
+            > .k-selected {
+                flex-direction: column;
+                align-self: flex-start;
+            }
+        }
+    }
+
+
+    // Indeterminate
+    .k-progressbar-indeterminate {
+        overflow: hidden;
+
+        &::after {
+            content: '';
+            position: relative;
+        }
+
+        &.k-progressbar-horizontal {
+            &::after {
+                width: 0px;
+                min-width: 33%;
+            }
+        }
+
+        &.k-progressbar-vertical {
+            &::after {
+                height: 0px;
+                min-height: 33%;
+                align-self: flex-end;
+            }
+        }
+
+        .k-reset,
+        .k-progress-status-wrap,
+        .k-selected,
+        .k-item {
+            display: none;
+        }
+
+        .k-progress-status {
+            display: none;
+        }
+    }
+
+    // Blazor specific
+    .telerik-blazor.k-progressbar-horizontal {
+
+        > .k-selected,
+        > .k-selected > .k-progress-status-wrap {
+            transition: width .1s ease-in-out;
+        }
+    }
+
+
+    .k-circular-progressbar {
+        display: inline-block;
+        text-align: left;
+        position: relative;
+    }
+
+    .k-circular-progressbar-surface {
+        height: 100%;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .k-circular-progressbar-scale {
+        fill: none;
+    }
+
+    .k-circular-progressbar-arc {
+        transform-box: fill-box;
+        transform-origin: center center;
+        transform: rotate(-90deg);
+        stroke-linecap: round;
+        fill: none;
+    }
+
+    .k-circular-progressbar-label {
+        position: absolute;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+}