@progress/kendo-theme-fluent 5.7.0

package/scss/datetimepicker/index.scss

@@ -0,0 +1,30 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "datetimepicker",
+    dependencies: (
+        "input",
+        "button",
+        "popup",
+        "list",
+        "calendar",
+        "timeselector",
+        "action-buttons"
+    )
+);
+
+// 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( "datetimepicker" ) {
+        @include kendo-datetimepicker--layout();
+        @include kendo-datetimepicker--theme();
+    }
+}

package/scss/dialog/_layout.scss

@@ -0,0 +1,71 @@
+
+@use "../core/mixins" as *;
+@use "../window/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-dialog--layout() {
+
+    .k-dialog-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        outline: 0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10001;
+
+        .k-dialog {
+            position: relative;
+        }
+    }
+
+    .k-dialog {
+        padding: 0;
+        border-width: var( --kendo-dialog-border-width, #{$kendo-dialog-border-width} ) 0 0;
+        position: fixed;
+        box-sizing: border-box;
+
+        // Centered
+        &.k-dialog-centered {
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+        }
+
+        .k-multiselect {
+            width: 100%;
+        }
+    }
+
+    // Title bar
+    .k-dialog-titlebar {
+        border-width: var( --kendo-dialog-titlebar-border-width, #{$kendo-dialog-titlebar-border-width} ) 0 0;
+        padding-inline: var( --kendo-dialog-titlebar-padding-x, #{$kendo-dialog-titlebar-padding-x} );
+        padding-block: var( --kendo-dialog-titlebar-padding-y, #{$kendo-dialog-titlebar-padding-y} );
+    }
+
+    // Buttons
+    .k-dialog-buttongroup {
+        @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
+        padding-inline: var( --kendo-dialog-buttongroup-padding-x, #{$kendo-dialog-buttongroup-padding-x} );
+        padding-block: var( --kendo-dialog-buttongroup-padding-y, #{$kendo-dialog-buttongroup-padding-y} );
+        border-width: var( --kendo-dialog-buttongroup-border-width, #{$kendo-dialog-buttongroup-border-width} ) 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        gap: var( --kendo-dialog-buttongroup-spacing, #{$kendo-dialog-buttongroup-spacing} );
+        overflow: hidden;
+    }
+
+    .k-dialog-content +  .k-dialog-buttongroup {
+        padding-block-start: 0;
+    }
+
+}

package/scss/dialog/_theme.scss

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

package/scss/dialog/_variables.scss

@@ -0,0 +1,46 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Width of the border around the dialog.
+/// @group dialog
+$kendo-dialog-border-width: 0 !default;
+
+/// The background color of the dialog title bar.
+/// @group dialog
+$kendo-dialog-titlebar-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the dialog title bar.
+/// @group dialog
+$kendo-dialog-titlebar-text: var( --kendo-component-text, initial )  !default;
+/// The border color of the dialog title bar.
+/// @group dialog
+$kendo-dialog-titlebar-border: var( --kendo-component-border, initial )  !default;
+/// Width of the border around the dialog title bar.
+/// @group dialog
+$kendo-dialog-titlebar-border-width: 0 !default;
+/// Horizontal padding of the dialog title bar.
+/// @group dialog
+$kendo-dialog-titlebar-padding-x: map-get( $kendo-spacing, 6 ) !default;
+/// Vertical padding of the dialog title bar.
+/// @group dialog
+$kendo-dialog-titlebar-padding-y: map-get( $kendo-spacing, 4 ) !default;
+
+/// Horizontal padding of the dialog action buttons.
+/// @group dialog
+$kendo-dialog-buttongroup-padding-x: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+/// Vertical padding of the dialog action buttons.
+/// @group dialog
+$kendo-dialog-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+/// Width of the top border of the dialog action buttons.
+/// @group dialog
+$kendo-dialog-buttongroup-border-width: 0 !default;
+/// Spacing between the action buttons of the dialog.
+/// @group dialog
+$kendo-dialog-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default;
+
+/// Spacing between the buttons in the header of the dialog.
+/// @group dialog
+$kendo-dialog-button-spacing: map-get( $kendo-spacing, 2 ) !default; // $actions-padding-y
+
+/// Box shadow around the dialog.
+/// @group dialog
+$kendo-dialog-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

package/scss/dialog/index.scss

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

package/scss/draggable/_layout.scss

@@ -0,0 +1,66 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+.k-drag-clue {
+    @include border-radius( var( --kendo-drag-clue-border-radius, #{$kendo-drag-clue-border-radius} ) );
+    padding-inline: var( --kendo-drag-clue-padding-x, #{$kendo-drag-clue-padding-x} );
+    padding-block: var( --kendo-drag-clue-padding-y, #{$kendo-drag-clue-padding-y} );
+    border-width: var( --kendo-drag-clue-border-width, #{$kendo-drag-clue-border-width} );
+    border-style: var( --kendo-drag-clue-border-style, #{$kendo-drag-clue-border-style} );
+    box-sizing: border-box;
+    font-family: var( --kendo-drag-clue-font-family, #{$kendo-drag-clue-font-family} );
+    font-size: var( --kendo-drag-clue-font-size, #{$kendo-drag-clue-font-size} );
+    line-height: var( --kendo-drag-clue-line-height, #{$kendo-drag-clue-line-height} );
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    align-content: center;
+    white-space: nowrap;
+    opacity: var( --kendo-drag-clue-opacity, #{$kendo-drag-clue-opacity} );
+    overflow: hidden;
+    position: absolute;
+    z-index: 20000;
+    cursor: move;
+}
+.k-drag-status,
+.k-drag-clue .k-drag-status {
+    margin: 0;
+    margin-inline-end: var( --kendo-drag-clue-spacing, #{$kendo-drag-clue-spacing} );
+}
+
+.k-drop-hint {
+    display: flex;
+    gap: var( --kendo-drop-hint-arrow-spacing, #{$kendo-drop-hint-arrow-spacing} );
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    z-index: 1000;
+    transform: translate(-50%, -50%);
+}
+
+.k-drop-hint-start,
+.k-drop-hint-end {
+    flex-shrink: 0;
+    border-width: calc( var( --kendo-drop-hint-arrow-size, #{$kendo-drop-hint-arrow-size} ) / 2 );
+    border-style: solid;
+    border-radius: 50%;
+    border-color: transparent;
+}
+
+.k-drop-hint-line {
+    flex-grow: 1;
+}
+
+.k-drop-hint-h .k-drop-hint-line {
+    width: var( --kendo-drop-hint-line-h-width, #{$kendo-drop-hint-line-h-width} );
+    height: var( --kendo-drop-hint-line-h-height, #{$kendo-drop-hint-line-h-height} );
+}
+
+.k-drop-hint-v {
+    flex-direction: column;
+
+    .k-drop-hint-line {
+        width: var( --kendo-drop-hint-line-v-width, #{$kendo-drop-hint-line-v-width} );
+        height: var( --kendo-drop-hint-line-v-height, #{$kendo-drop-hint-line-v-height} );
+    }
+}

package/scss/draggable/_theme.scss

@@ -0,0 +1,21 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+.k-drag-clue {
+    @include fill(
+        var( --kendo-drag-clue-text, #{$kendo-drag-clue-text} ),
+        var( --kendo-drag-clue-bg, #{$kendo-drag-clue-bg} ),
+        var( --kendo-drag-clue-border, #{$kendo-drag-clue-border} ),
+        var( --kendo-drag-clue-gradient, #{$kendo-drag-clue-gradient} )
+    );
+    @include box-shadow( var( --kendo-drag-clue-shadow, #{$kendo-drag-clue-shadow} ) );
+}
+
+.k-drop-hint-line {
+    @include fill( $bg: var( --kendo-drop-hint-bg, #{$kendo-drop-hint-bg} ) );
+}
+
+.k-drop-hint-start,
+.k-drop-hint-end {
+    @include fill ( $border: var( --kendo-drop-hint-bg, #{$kendo-drop-hint-bg} ) );
+}

package/scss/draggable/_variables.scss

@@ -0,0 +1,72 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Borer radius of the drag clue.
+/// @group draggable
+$kendo-drag-clue-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Borer width of the drag clue.
+/// @group draggable
+$kendo-drag-clue-border-width: 0px !default;
+/// Borer style of the drag clue.
+/// @group draggable
+$kendo-drag-clue-border-style: solid !default;
+/// Horizontal padding of the drag clue.
+/// @group draggable
+$kendo-drag-clue-padding-x: $kendo-padding-x-lg !default;
+/// Vertical padding of the drag clue.
+/// @group draggable
+$kendo-drag-clue-padding-y: $kendo-padding-y-lg !default;
+/// Font family of the drag clue.
+/// @group draggable
+$kendo-drag-clue-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the drag clue.
+/// @group draggable
+$kendo-drag-clue-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the drag clue.
+/// @group draggable
+$kendo-drag-clue-line-height: var( --kendo-line-height, inherit ) !default;
+/// Spacing of the drag clue.
+/// @group draggable
+$kendo-drag-clue-spacing: .4ex !default;
+/// Opacity of the drag clue.
+/// @group draggable
+$kendo-drag-clue-opacity: .8 !default;
+
+/// Text color of the drag clue.
+/// @group draggable
+$kendo-drag-clue-text: var( --kendo-selected-text, inherit ) !default;
+/// Background color of the drag clue.
+/// @group draggable
+$kendo-drag-clue-bg: var( --kendo-selected-bg, inherit ) !default;
+/// Border color of the drag clue.
+/// @group draggable
+$kendo-drag-clue-border: var( --kendo-selected-border, inherit ) !default;
+/// Gradient of the drag clue.
+/// @group draggable
+$kendo-drag-clue-gradient: null !default;
+/// Box shadow of the drag clue.
+/// @group draggable
+$kendo-drag-clue-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+
+/// Arrow size of the drop hint.
+/// @group draggable
+$kendo-drop-hint-arrow-size: 6px !default;
+/// Arrow spacing of the drop hint.
+/// @group draggable
+$kendo-drop-hint-arrow-spacing: calc( $kendo-drop-hint-arrow-size / 2 ) !default;
+/// Width of the horizontal drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-h-width: 20px !default;
+/// Height of the horizontal drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-h-height: 1px !default;
+/// Width of the vertical drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
+/// Height of the vertical drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
+
+/// Background-color of the drop hint.
+/// @group draggable
+$kendo-drop-hint-bg: get-theme-color-var( primary-100 ) !default;

package/scss/draggable/index.scss

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

package/scss/drawer/_layout.scss

@@ -0,0 +1,271 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-drawer--layout() {
+
+    .k-drawer-container {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+    }
+    kendo-drawer.k-drawer,
+    kendo-drawer .k-drawer-wrapper {
+        transition: none;
+    }
+    .k-drawer {
+        height: 100%;
+        max-width: 100%;
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-drawer-font-family, #{$kendo-drawer-font-family} );
+        font-size: var( --kendo-drawer-font-size, #{$kendo-drawer-font-size} );
+        line-height: var( --kendo-drawer-line-height, #{$kendo-drawer-line-height} );
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 auto;
+        transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        // Borders
+        .k-drawer-mini &.k-drawer-start,
+        .k-drawer-expanded &.k-drawer-start,
+        .k-drawer-left.k-drawer-mini &,
+        .k-drawer-left.k-drawer-expanded & {
+            border-right-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
+        }
+        .k-drawer-mini &.k-drawer-end,
+        .k-drawer-expanded &.k-drawer-end,
+        .k-drawer-right.k-drawer-mini &,
+        .k-drawer-right.k-drawer-expanded & {
+            border-left-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
+        }
+
+        // Position
+        &.k-drawer-start,
+        .k-drawer-left & {
+            inset-block-start: 0;
+            inset-inline-start: 0;
+        }
+        &.k-drawer-end,
+        .k-drawer-right & {
+            inset-block-start: 0;
+            inset-inline-end: 0;
+        }
+    }
+    .k-drawer-content {
+        flex: 1 1 auto;
+    }
+
+
+    // Overlay drawer
+    .k-drawer-overlay {
+        .k-drawer {
+            max-width: 80vw; // limit width
+            position: fixed;
+            z-index: 10002;
+            border: 0;
+        }
+
+        > .k-overlay {
+            display: none;
+        }
+        &.k-drawer-expanded > .k-overlay {
+            display: block;
+        }
+    }
+
+
+    // Push drawer
+    .k-drawer-push {
+        display: flex;
+        flex-direction: row;
+
+        .k-drawer {
+            height: auto;
+            position: relative;
+            align-self: stretch;
+        }
+
+
+        // right drawer
+        .k-drawer.k-drawer-end,
+        &.k-drawer-right .k-drawer {
+            order: 1;
+        }
+
+    }
+
+
+    // Drawer items
+    .k-drawer-wrapper {
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin; // Scrollbar styles for Mozilla
+        transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
+
+        // Scrollbar styles for Chrome, Safari and Opera
+        &::-webkit-scrollbar {
+            width: var( --kendo-drawer-scrollbar-width, #{$kendo-drawer-scrollbar-width} );
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: var( --kendo-drawer-scrollbar-radius, #{$kendo-drawer-scrollbar-radius} );
+        }
+    }
+    .k-drawer-items,
+    .k-drawer-items ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .k-drawer-item {
+        padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
+        padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
+        outline: 0;
+        color: inherit;
+        font-size: var( --kendo-drawer-item-font-size, #{$kendo-drawer-item-font-size} );
+        line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        cursor: pointer;
+
+        &::before {
+            content: "";
+            border-width: 0;
+            border-inline-start-width: var( --kendo-drawer-item-ripple-border-width, #{$kendo-drawer-item-ripple-border-width} );
+            border-style: solid;
+            border-color: var( --kendo-drawer-item-ripple-border, #{$kendo-drawer-item-ripple-border} );
+            height: 100%;
+            display: block;
+            position: absolute;
+            inset-block-start: 0;
+            z-index: 2;
+            opacity: 0;
+            transition: opacity .3s;
+            pointer-events: none;
+
+            .k-drawer-start &,
+            .k-drawer-left & {
+                inset-inline-start: 0;
+            }
+
+            .k-drawer-end &,
+            .k-drawer-right & {
+                inset-inline-end: 0;
+            }
+        }
+
+        > .k-drawer-link {
+            margin-inline: calc( var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} ) * -1 );
+            margin-block: calc( var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} ) * -1 );
+            padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
+            padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
+            color: inherit;
+            display: flex;
+            flex-flow: row nowrap;
+            flex: 1 0 auto;
+        }
+
+        .k-icon {
+            margin-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
+            margin-block: 0;
+            height: auto;
+            font-size: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
+            line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
+            flex-shrink: 0;
+
+            &.k-i-none {
+                margin: 0;
+            }
+        }
+
+        .k-item-text {
+            padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
+            padding-block: 0;
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &.k-selected {
+            &::before {
+                opacity: 1;
+            }
+
+            .k-item-text {
+                font-weight: var( --kendo-drawer-item-selected-font-weight, #{$kendo-drawer-item-selected-font-weight} );
+            }
+        }
+
+        .k-drawer-toggle {
+            margin-inline-start: auto;
+            cursor: pointer;
+        }
+
+        // Hierarchy items
+        @for $i from 1 through $kendo-drawer-item-level-count {
+            &.k-level-#{$i} {
+                padding-inline-start: calc( var( --kendo-drawer-item-level-padding-x, #{$kendo-drawer-item-level-padding-x} ) * $i );
+            }
+        }
+    }
+    .k-drawer-separator {
+        padding: 0;
+        height: 1px;
+    }
+
+
+
+    // Mini mode
+    .k-drawer-mini {
+        .k-drawer-wrapper {
+            width: var( --kendo-drawer-mini-initial-width, #{$kendo-drawer-mini-initial-width} );
+        }
+    }
+
+
+    .k-rtl,
+    [dir="rtl"] {
+
+        // Borders
+        &.k-drawer-mini .k-drawer-start,
+        .k-drawer-mini .k-drawer-start,
+        .k-drawer-expanded .k-drawer-start,
+        &.k-drawer-expanded .k-drawer-start {
+            border-left-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
+            border-right-width: 0;
+        }
+        &.k-drawer-mini .k-drawer-end,
+        .k-drawer-mini .k-drawer-end,
+        &.k-drawer-expanded .k-drawer-end
+        .k-drawer-expanded .k-drawer-end {
+            border-left-width: 0;
+            border-right-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
+        }
+
+        // Order
+        .k-drawer-left.k-drawer-push .k-drawer {
+            order: 1;
+        }
+        .k-drawer-right.k-drawer-push .k-drawer {
+            order: 0;
+        }
+
+    }
+
+}