@progress/kendo-theme-fluent 5.7.0

package/scss/treelist/_layout.scss

@@ -0,0 +1,92 @@
+@use "../core/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-treelist--layout() {
+
+    // Base
+    .k-treelist {
+        &.k-grid-display-block.k-grid-lockedcolumns {
+            display: block;
+        }
+
+        .k-status {
+            padding-inline: .6em;
+            padding-block: .4em;
+            line-height: 1.6em;
+
+            // TODO: see what this does and use a better name
+            .k-loading {
+                vertical-align: baseline;
+                margin-right: map-get( $kendo-spacing, 1 );
+
+                // TODO
+                display: none;
+            }
+        }
+
+        .k-treelist-dragging,
+        .k-treelist-dragging .k-state-hover,
+        .k-treelist-dragging .k-hover {
+            cursor: default;
+        }
+
+        .k-drop-hint {
+            transform: translate(0, -50%);
+        }
+
+        tr.k-footer td,
+        tr.k-footer-template td {
+            border-width: var( --kendo-treelist-footer-row-border-width, #{$kendo-treelist-footer-row-border-width} ) 0;
+            border-style: solid;
+            font-weight: var( --kendo-font-weight-bold, bold );
+        }
+
+        tr.k-footer + tr.k-footer td {
+            border-top-width: 0;
+        }
+    }
+
+
+    // Sticky headers
+    .k-treelist-scrollable {
+        > table,
+        .k-grid-header tr,
+        .k-grid-header th {
+            background-color: inherit;
+        }
+
+        .k-grid-toolbar {
+            position: sticky;
+            z-index: 3;
+            top: 0;
+            left: 0;
+        }
+
+        .k-grid-header th {
+            position: sticky;
+            z-index: 1;
+        }
+
+        .k-grid-header th.k-grid-header-sticky {
+            z-index: 3;
+        }
+
+        thead.k-grid-header {
+            padding-inline-end: 0;
+        }
+
+        tr.k-group-footer + tr.k-group-footer td {
+            border-top-width: 0;
+        }
+
+    }
+
+    .k-drag-separator {
+        display: inline-block;
+        border-right: 1px solid;
+        height: 1em;
+        vertical-align: top;
+        margin: 0 .5em;
+    }
+
+}

package/scss/treelist/_theme.scss

@@ -0,0 +1,14 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-treelist--theme() {
+
+    .k-treelist,
+    .k-treelist-scrollable {
+        tr.k-footer,
+        tr.k-group-footer td,
+        tr.k-footer-template {
+            background-color: var( --kendo-treelist-footer-row-bg, #{$kendo-treelist-footer-row-bg} );
+        }
+    }
+
+}

package/scss/treelist/_variables.scss

@@ -0,0 +1,9 @@
+@use "../core/color-system" as *;
+@use "../grid/_variables.scss" as *;
+
+/// Background color of the treelist footer row.
+/// @group treelist
+$kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
+/// Border width of the treelist footer row.
+/// @group treelist
+$kendo-treelist-footer-row-border-width: 1px !default;

package/scss/treelist/index.scss

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

package/scss/treeview/_layout.scss

@@ -0,0 +1,160 @@
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-treeview--layout() {
+
+    .k-treeview {
+        padding: 0;
+        border-width: 0;
+        background: none;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-treeview-font-family, #{$kendo-treeview-font-family} );
+        font-size: var( --INTERNAL--kendo-treeview-font-size, 1rem );
+        line-height: var( --INTERNAL--kendo-treeview-line-height, normal );
+        display: block;
+        cursor: default;
+        overflow: auto;
+        white-space: nowrap;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Treeview filter
+    .k-treeview-filter {
+        padding-inline: var( --kendo-treeview-filter-padding-x, #{$kendo-treeview-filter-padding-x} );
+        padding-block: var( --kendo-treeview-filter-padding-y, #{$kendo-treeview-filter-padding-y} );
+        display: block;
+        position: relative;
+        flex: none;
+    }
+
+
+    // Treeview group
+    .k-treeview-group {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        position: relative;
+        outline: 0;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        &.ng-animating {
+            overflow: hidden;
+        }
+    }
+
+
+    // Treeview wrappers
+    .k-treeview-top,
+    .k-treeview-mid,
+    .k-treeview-bot {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        align-content: center;
+    }
+
+
+    // Treeview item
+    .k-treeview-item {
+        margin: 0;
+        padding-inline-start: var( --kendo-treeview-indent, #{$kendo-treeview-indent} );
+        border-width: 0;
+        display: block;
+        outline-style: none;
+    }
+
+
+    // Treeview toggle
+    .k-treeview-toggle {
+        margin-inline-start: calc( var( --kendo-treeview-indent, #{$kendo-treeview-indent} ) * -1 );
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        cursor: pointer;
+    }
+
+
+    // Loading icon
+    .k-treeview-loading {
+        margin-inline-end: var( --kendo-icon-spacing, .5rem );
+    }
+
+
+    // Checkbox
+    .k-treeview .k-checkbox-wrap,
+    .k-treeview .k-checkbox-wrapper {
+        margin-inline-start: var( --kendo-icon-spacing, .5rem );
+        margin-inline-end: var( --kendo-icon-spacing, .5rem );
+        align-self: center;
+    }
+
+
+    // Treeview leaf
+    .k-treeview-leaf {
+        @include border-radius( var( --kendo-treeview-item-border-radius, #{$kendo-treeview-item-border-radius} ) );
+        padding-inline: var( --INTERNAL--kendo-treeview-item-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-treeview-item-padding-y, 0 );
+        border: $kendo-treeview-item-border-width solid transparent;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        align-content: center;
+        vertical-align: middle;
+        position: relative;
+
+        .k-icon,
+        .k-image,
+        .k-sprite {
+            margin-inline-end: var( --kendo-icon-spacing, .5rem );
+        }
+
+        &.k-focus {
+            z-index: 1;
+        }
+    }
+
+
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        cursor: pointer;
+
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus {
+            text-decoration: underline;
+        }
+    }
+
+
+    // Treeview sizes
+    @each $size, $size-props in $kendo-treeview-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_item-padding-x: map-get( $size-props, item-padding-x );
+        $_item-padding-y: map-get( $size-props, item-padding-y );
+
+        .k-treeview-#{$size} {
+            --INTERNAL--kendo-treeview-font-size: var( --kendo-treeview-#{$size}-font-size, #{$_font-size} );
+            --INTERNAL--kendo-treeview-line-height: var( --kendo-treeview-#{$size}-line-height, #{$_line-height} );
+
+            .k-treeview-leaf {
+                --INTERNAL--kendo-treeview-item-padding-x: var( --kendo-treeview-#{$size}-item-padding-x, #{$_item-padding-x} );
+                --INTERNAL--kendo-treeview-item-padding-y: var( --kendo-treeview-#{$size}-item-padding-y, #{$_item-padding-y} );
+            }
+        }
+    }
+
+}

package/scss/treeview/_theme.scss

@@ -0,0 +1,102 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-treeview--theme() {
+
+    .k-treeview {
+        @include fill(
+            var( --kendo-treeview-text, #{$kendo-treeview-text} ),
+            var( --kendo-treeview-bg, #{$kendo-treeview-bg} ),
+            var( --kendo-treeview-border, #{$kendo-treeview-border} )
+        );
+    }
+
+
+    // Treeview item
+    .k-treeview-item:disabled,
+    .k-treeview-item.k-disabled {
+        background-color: transparent;
+    }
+
+
+    // Treeview leaf
+    .k-treeview-leaf {
+        --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-text, #{$kendo-treeview-item-text} );
+        --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-bg, #{$kendo-treeview-item-bg} );
+        --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-border, #{$kendo-treeview-item-border} );
+
+        @include fill(
+            var( --INTERNAL--kendo-treeview-item-text, inherit ),
+            var( --INTERNAL--kendo-treeview-item-bg, transparent ),
+            var( --INTERNAL--kendo-treeview-item-border, inherit )
+        );
+
+        // Hover state
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-hover-text, #{$kendo-treeview-item-hover-text} );
+            --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-hover-bg, #{$kendo-treeview-item-hover-bg} );
+            --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-hover-border, #{$kendo-treeview-item-hover-border} );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-focus-text, #{$kendo-treeview-item-focus-text} );
+            --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-focus-bg, #{$kendo-treeview-item-focus-bg} );
+            --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-focus-border, #{$kendo-treeview-item-focus-border} );
+
+            @include box-shadow( $kendo-treeview-item-focus-shadow );
+        }
+
+        // Selected state
+        &.k-selected {
+            --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-selected-text, #{$kendo-treeview-item-selected-text} );
+            --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-selected-bg, #{$kendo-treeview-item-selected-bg} );
+            --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-selected-border, #{$kendo-treeview-item-selected-border} );
+        }
+
+        // Disabled state
+        &:disabled,
+        &.k-disabled,
+        .k-treeview-item:disabled &,
+        .k-treeview-item.k-disabled & {
+            --INTERNAL--kendo-treeview-item-text: var( --kendo-treeview-item-disabled-text, #{$kendo-treeview-item-disabled-text} );
+            --INTERNAL--kendo-treeview-item-bg: var( --kendo-treeview-item-disabled-bg, #{$kendo-treeview-item-disabled-bg} );
+            --INTERNAL--kendo-treeview-item-border: var( --kendo-treeview-item-disabled-border, #{$kendo-treeview-item-disabled-border} );
+        }
+    }
+
+
+    // Treeview load more button
+    .k-treeview .k-treeview-load-more-button {
+        --INTERNAL--kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-text, #{$kendo-treeview-loadmore-text} );
+        --INTERNAL--kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-bg, #{$kendo-treeview-loadmore-bg} );
+        --INTERNAL--kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-border, #{$kendo-treeview-loadmore-border} );
+
+        @include fill(
+            var( --INTERNAL--kendo-treeview-loadmore-text, inherit ),
+            var( --INTERNAL--kendo-treeview-loadmore-bg, transparent ),
+            var( --INTERNAL--kendo-treeview-loadmore-border, inherit )
+        );
+
+        // Hover state
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-hover-text, #{$kendo-treeview-loadmore-hover-text} );
+            --INTERNAL--kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-hover-bg, #{$kendo-treeview-loadmore-hover-bg} );
+            --INTERNAL--kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-hover-border, #{$kendo-treeview-loadmore-hover-border} );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-focus-text, #{$kendo-treeview-loadmore-focus-text} );
+            --INTERNAL--kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-focus-bg, #{$kendo-treeview-loadmore-focus-bg} );
+            --INTERNAL--kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-focus-border, #{$kendo-treeview-loadmore-focus-border} );
+
+            @include box-shadow( $kendo-treeview-loadmore-focus-shadow );
+        }
+    }
+
+}

package/scss/treeview/_variables.scss

@@ -0,0 +1,164 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Font family of the treeview component.
+/// @group treeview
+$kendo-treeview-font-family: var( --kendo-font-family, normal ) !default;
+/// Font size of the treeview component.
+/// @group treeview
+$kendo-treeview-font-size-sm: var( --kendo-font-size, inherit ) !default;
+$kendo-treeview-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-treeview-font-size-lg: var( --kendo-font-size, inherit ) !default;
+/// Line height of the treeview component.
+/// @group treeview
+$kendo-treeview-line-height-sm: var( --kendo-line-height, normal ) !default;
+$kendo-treeview-line-height-md: var( --kendo-line-height, normal ) !default;
+$kendo-treeview-line-height-lg: var( --kendo-line-height, normal ) !default;
+/// Indentation of child groups in treeview component.
+/// @group treeview
+$kendo-treeview-indent: map-get( $kendo-spacing, 4 ) !default;
+
+/// Horizontal padding of treeview items.
+/// @group treeview
+$kendo-treeview-item-padding-x-sm: map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of treeview items.
+/// @group treeview
+$kendo-treeview-item-padding-y-sm: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+/// Border width of treeview items.
+/// @group treeview
+$kendo-treeview-item-border-width: 0 !default;
+/// Border radius of treeview items.
+/// @group treeview
+$kendo-treeview-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Horizontal padding of the treeview filter element.
+/// @group treeview
+$kendo-treeview-filter-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the treeview filter element.
+/// @group treeview
+$kendo-treeview-filter-padding-y: map-get( $kendo-spacing, 2 ) !default;
+
+
+/// The sizes of the treeview.
+/// @group treeview
+$kendo-treeview-sizes: (
+    sm: (
+        font-size: $kendo-treeview-font-size-sm,
+        line-height: $kendo-treeview-line-height-sm,
+        item-padding-x: $kendo-treeview-item-padding-x-sm,
+        item-padding-y: $kendo-treeview-item-padding-y-sm
+    ),
+    md: (
+        font-size: $kendo-treeview-font-size-md,
+        line-height: $kendo-treeview-line-height-md,
+        item-padding-x: $kendo-treeview-item-padding-x-md,
+        item-padding-y: $kendo-treeview-item-padding-y-md
+    ),
+    lg: (
+        font-size: $kendo-treeview-font-size-lg,
+        line-height: $kendo-treeview-line-height-lg,
+        item-padding-x: $kendo-treeview-item-padding-x-lg,
+        item-padding-y: $kendo-treeview-item-padding-y-lg
+    )
+) !default;
+
+
+/// Background color of the treeview component.
+/// @group treeview
+$kendo-treeview-bg: transparent !default;
+/// Text color of the treeview component.
+/// @group treeview
+$kendo-treeview-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the treeview component.
+/// @group treeview
+$kendo-treeview-border: inherit !default;
+
+/// Background color of the treeview items.
+/// @group treeview
+$kendo-treeview-item-bg: transparent !default;
+/// Text color of the treeview items.
+/// @group treeview
+$kendo-treeview-item-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the treeview items.
+/// @group treeview
+$kendo-treeview-item-border: inherit !default;
+
+/// Background color of hovered treeview items.
+/// @group treeview
+$kendo-treeview-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+/// Text color of hovered treeview items.
+/// @group treeview
+$kendo-treeview-item-hover-text: var(--kendo-hover-text, inherit ) !default;
+/// Border color of hovered treeview items.
+/// @group treeview
+$kendo-treeview-item-hover-border: inherit !default;
+
+/// Background color of focused treeview items.
+/// @group treeview
+$kendo-treeview-item-focus-bg: $kendo-treeview-item-bg !default;
+/// Text color of focused treeview items.
+/// @group treeview
+$kendo-treeview-item-focus-text: $kendo-treeview-item-text !default;
+/// Border color of focused treeview items.
+/// @group treeview
+$kendo-treeview-item-focus-border: $kendo-treeview-item-border !default;
+/// Box shadow of focused treeview items.
+/// @group treeview
+$kendo-treeview-item-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+
+/// Background color of selected treeview items.
+/// @group treeview
+$kendo-treeview-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+/// Text color of selected treeview items.
+/// @group treeview
+$kendo-treeview-item-selected-text: var( --kendo-selected-text, inherit ) !default;
+/// Border color of selected treeview items.
+/// @group treeview
+$kendo-treeview-item-selected-border: inherit !default;
+
+/// Background color of disabled treeview items.
+/// @group treeview
+$kendo-treeview-item-disabled-bg: $kendo-treeview-item-bg !default;
+/// Text color of disabled treeview items.
+/// @group treeview
+$kendo-treeview-item-disabled-text: var( --kendo-disabled-text, inherit ) !default;
+/// Border color of disabled treeview items.
+/// @group treeview
+$kendo-treeview-item-disabled-border: inherit !default;
+
+/// Background color of load more.
+/// @group treeview
+$kendo-treeview-loadmore-bg: transparent !default;
+/// Text color of load more.
+/// @group treeview
+$kendo-treeview-loadmore-text: var(--kendo-link-text, initial ) !default;
+/// Border color of load more.
+/// @group treeview
+$kendo-treeview-loadmore-border: inherit !default;
+
+/// Background color of a hovered load more.
+/// @group treeview
+$kendo-treeview-loadmore-hover-bg: transparent !default;
+/// Text color of a hovered load more.
+/// @group treeview
+$kendo-treeview-loadmore-hover-text: var(--kendo-link-hover-text, initial ) !default;
+/// Border color of a hovered load more.
+/// @group treeview
+$kendo-treeview-loadmore-hover-border: inherit !default;
+
+/// Background color of a focused load more.
+/// @group treeview
+$kendo-treeview-loadmore-focus-bg: transparent !default;
+/// Text color of a focused load more.
+/// @group treeview
+$kendo-treeview-loadmore-focus-text: var(--kendo-link-hover-text, initial ) !default;
+/// Border color of a focused load more.
+/// @group treeview
+$kendo-treeview-loadmore-focus-border: inherit !default;
+/// Box shadow of a focused load more.
+/// @group treeview
+$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;

package/scss/treeview/index.scss

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