@progress/kendo-theme-fluent 5.7.0

package/scss/listbox/_layout.scss

@@ -0,0 +1,119 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listbox--layout() {
+
+    .k-listbox {
+        width: var( --kendo-listbox-width, #{$kendo-listbox-width} );
+        height: var( --kendo-listbox-height, #{$kendo-listbox-height} );
+        border-width: 0;
+        outline: 0;
+        font-family: var( --kendo-listbox-font-family, #{$kendo-listbox-font-family} );
+        font-size: var( --kendo-listbox-font-size, #{$kendo-listbox-font-size} );
+        line-height: var( --kendo-listbox-line-height, #{$kendo-listbox-line-height} );
+        vertical-align: top;
+        background-color: transparent;
+        display: inline-flex;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        .k-listbox-toolbar ul {
+            display: flex;
+        }
+
+        &.k-listbox-toolbar-left,
+        &.k-listbox-toolbar-right {
+            .k-listbox-toolbar ul {
+                flex-direction: column;
+            }
+
+            .k-listbox-toolbar li + li {
+                margin-block-start: var( --kendo-listbox-button-margin, #{$kendo-listbox-button-margin} );
+            }
+        }
+
+        &.k-listbox-toolbar-left {
+            flex-direction: row;
+
+            .k-listbox-toolbar {
+                margin-inline-end: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
+            }
+        }
+
+        &.k-listbox-toolbar-right {
+            flex-direction: row-reverse;
+
+            .k-listbox-toolbar {
+                margin-inline-start: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
+            }
+        }
+
+        &.k-listbox-toolbar-top,
+        &.k-listbox-toolbar-bottom {
+            flex-direction: column;
+
+            .k-listbox-toolbar ul {
+                flex-direction: row;
+            }
+
+            .k-listbox-toolbar li + li {
+                margin-inline-start: var( --kendo-listbox-button-margin, #{$kendo-listbox-button-margin} );
+            }
+        }
+
+        &.k-listbox-toolbar-top {
+            .k-listbox-toolbar {
+                margin-block-end: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
+            }
+        }
+
+        &.k-listbox-toolbar-bottom {
+            .k-listbox-toolbar {
+                margin-block-start: var( --kendo-listbox-margin, #{$kendo-listbox-margin} );
+            }
+        }
+
+        .k-list-scroller {
+            width: 100%;
+            height: inherit;
+            border-width: var( --kendo-listbox-border-width, #{$kendo-listbox-border-width} );
+            border-style: solid;
+            box-sizing: border-box;
+
+            .k-list-scroller {
+                border-width: 0;
+            }
+
+            .k-list {
+                height: inherit;
+                background: transparent;
+            }
+        }
+
+        .k-drop-hint {
+            border-top-width: var( --kendo-listbox-drop-hint-width, #{$kendo-listbox-drop-hint-width} );
+            border-top-style: solid;
+        }
+
+        .k-ghost {
+            opacity: .5;
+        }
+
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+
+            &.k-listbox-toolbar-left,
+            &.k-listbox-toolbar-right {
+                .k-listbox-toolbar {
+                    transform: scaleX(-1);
+                }
+            }
+        }
+    }
+
+    .k-item {
+        cursor: default;
+    }
+
+}

package/scss/listbox/_theme.scss

@@ -0,0 +1,19 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listbox--theme() {
+
+    .k-listbox {
+        .k-list-scroller {
+            @include fill(
+                var( --kendo-listbox-text, #{$kendo-listbox-text} ),
+                var( --kendo-listbox-bg, #{$kendo-listbox-bg} ),
+                var( --kendo-listbox-border, #{$kendo-listbox-border} )
+            );
+        }
+        .k-drop-hint {
+            border-top-color: var( --kendo-listbox-drop-hint-border-color, #{$kendo-listbox-drop-hint-border-color} );
+        }
+    }
+
+}

package/scss/listbox/_variables.scss

@@ -0,0 +1,45 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Margin between the listbox elements.
+/// @group listbox
+$kendo-listbox-margin: $kendo-padding-x !default;
+/// Margin between the listbox buttons.
+/// @group listbox
+$kendo-listbox-button-margin: $kendo-padding-x !default;
+/// Width of the listbox.
+/// @group listbox
+$kendo-listbox-width: 10em !default;
+/// Height of the listbox.
+/// @group listbox
+$kendo-listbox-height: 200px !default;
+
+/// Border width of the listbox.
+/// @group listbox
+$kendo-listbox-border-width: 1px !default;
+/// Font family of the listbox.
+/// @group listbox
+$kendo-listbox-font-family: var( --kendo-font-family, normal ) !default;
+/// Font size of the listbox.
+/// @group listbox
+$kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;;
+/// Line height of the listbox.
+/// @group listbox
+$kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the listbox component.
+/// @group listbox
+$kendo-listbox-bg: var( --kendo-component-bg, transparent ) !default;
+/// Text color of the listbox component.
+/// @group listbox
+$kendo-listbox-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the listbox component.
+/// @group listbox
+$kendo-listbox-border: var( --kendo-component-border, inherit ) !default;
+
+/// Width of the drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-width: 1px !default;
+/// Border color of the drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-border-color: get-theme-color-var( primary-100 ) !default;

package/scss/listbox/index.scss

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

package/scss/listgroup/_layout.scss

@@ -0,0 +1,189 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listgroup--layout() {
+
+    .k-listgroup {
+        @include border-radius( var( --kendo-listgroup-border-radius, #{$kendo-listgroup-border-radius} ) );
+        margin: 0;
+        padding: 0;
+        border-width: var( --kendo-listgroup-border-width, #{$kendo-listgroup-border-width} );
+        border-style: solid;
+        font-size: var( --kendo-listgroup-font-size, #{$kendo-listgroup-font-size} );
+        line-height: var( --kendo-listgroup-line-height, #{$kendo-listgroup-line-height} );
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+
+        > ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+        }
+
+        // Borders of items
+        .k-listgroup-item + .k-listgroup-item {
+            border-top-width: var( --kendo-listgroup-item-border-width, #{$kendo-listgroup-item-border-width} );
+        }
+    }
+    .k-listgroup-flush {
+        @include border-radius( 0 );
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+
+    .k-listgroup-item {
+        padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
+        padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 0 0 auto;
+        position: relative;
+
+        > .k-link {
+            margin-inline: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
+            margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+            padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
+            padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+            color: inherit;
+            text-decoration: none;
+            outline: 0;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1 1 auto;
+            position: relative;
+
+            > .k-select {
+                padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+                padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+                display: flex;
+                align-items: center;
+                flex: 0 0 auto;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+            }
+        }
+    }
+    .k-listgroup-item-segmented {
+        align-items: stretch;
+
+        > .k-link {
+            margin-inline-end: 0;
+        }
+
+        > .k-select {
+            margin-inline-start: 0;
+            margin-inline-end: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
+            margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+            padding-inline: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+            padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+            border-width: 0 0 0 1px;
+            border-style: solid;
+            border-color: inherit;
+            cursor: pointer;
+        }
+    }
+
+
+    // Forms in listgroup
+    .k-listgroup-form-row {
+        margin-inline: var( --kendo-listgroup-item-padding-x, #{(-$kendo-listgroup-item-padding-x)} );
+        margin-block: var( --kendo-listgroup-item-padding-y, #{(-$kendo-listgroup-item-padding-y)} );
+        padding-inline: var( --kendo-listgroup-item-padding-x, #{$kendo-listgroup-item-padding-x} );
+        padding-block: var( --kendo-listgroup-item-padding-y, #{$kendo-listgroup-item-padding-y} );
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1 1 auto;
+        position: relative;
+
+        .k-listgroup-form-field-label {
+            width: 40%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-listgroup-form-field-wrapper {
+            width: 50%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            text-align: end;
+            position: relative;
+
+            select,
+            input[type="text"],
+            input[type="password"],
+            input[type="date"],
+            input[type="time"],
+            input[type="datetime-local"],
+            input[type="number"],
+            textarea {
+                width: 100%;
+                box-sizing: border-box;
+                flex: 1 1 100%;
+            }
+
+            textarea {
+                min-height: 4em;
+                resize: vertical;
+            }
+        }
+    }
+    .k-listgroup-item.k-listgroup-form-row {
+        margin: 0;
+    }
+
+
+    // RTL Styles
+    [dir="rtl"] {
+
+        .k-listgroup-item {
+
+            > .k-link {
+
+                > .k-select {
+                    right: auto;
+                    left: 0;
+
+                    .k-icon {
+                        transform: scaleX(-1);
+                    }
+                }
+
+            }
+
+        }
+        .k-listgroup-item-segmented {
+
+            > .k-select {
+                border-right-width: 1px;
+                border-left-width: 0;
+
+                .k-icon {
+                    transform: scaleX(-1);
+                }
+            }
+
+        }
+    }
+
+}
+

package/scss/listgroup/_theme.scss

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

package/scss/listgroup/_variables.scss

@@ -0,0 +1,36 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Border width of the listgroup.
+/// @group listgroup
+$kendo-listgroup-border-width: 1px !default;
+/// Border radius of the listgroup.
+/// @group listgroup
+$kendo-listgroup-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Font size of the listgroup.
+/// @group listgroup
+$kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the listgroup.
+/// @group listgroup
+$kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the listgroup component.
+/// @group listgroup
+$kendo-listgroup-bg: var( --kendo-component-bg, transparent ) !default;
+/// Text color of the listgroup component.
+/// @group listgroup
+$kendo-listgroup-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the listgroup component.
+/// @group listgroup
+$kendo-listgroup-border: var( --kendo-component-border, inherit ) !default;
+
+/// Horizontal padding of the listgroup items.
+/// @group listgroup
+$kendo-listgroup-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the listgroup items.
+/// @group listgroup
+$kendo-listgroup-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the listgroup item.
+/// @group listgroup
+$kendo-listgroup-item-border-width: 1px !default;

package/scss/listgroup/index.scss

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

package/scss/listview/_layout.scss

@@ -0,0 +1,149 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listview--layout() {
+
+    // Listview
+    .k-listview {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-listview-font-family, #{$kendo-listview-font-family} );
+        font-size: var( --kendo-listview-font-size, #{$kendo-listview-font-size} );
+        line-height: var( --kendo-listview-line-height, #{$kendo-listview-line-height} );
+        flex-flow: column nowrap;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+    .k-listview-bordered {
+        border-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+
+
+    // Listview content
+    .k-listview-content {
+        margin: 0;
+        padding: 0;
+        outline: 0;
+        flex-grow: 1;
+        position: relative;
+        overflow: auto;
+
+        &::after {
+            height: 0;
+            clear: both;
+            display: block;
+        }
+    }
+    .k-listview-content.k-d-flex,
+    .k-listview-content.k-d-grid {
+        &::after { display: none; }
+    }
+    .k-listview-content.k-d-grid {
+        grid-gap: var( --kendo-listview-grid-gap, #{$kendo-listview-grid-gap} );
+    }
+    .k-listview-content-padding-rectangle {
+        padding-inline: var( --$kendo-listview-padding-x, #{$kendo-listview-padding-x} );
+        padding-block: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
+    }
+    .k-listview-content-padding-square {
+        padding: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
+    }
+
+
+    // Listview item
+    .k-listview-item {
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        flex-shrink: 0;
+    }
+    .k-listview-item-padding-rectangle {
+        padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
+        padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
+    }
+    .k-listview-item-padding-rectangle .k-listview-link {
+        margin-inline: calc( var( --kendo-listview-item-padding-x, $kendo-listview-item-padding-x ) * -1);
+        margin-block: calc( var( --kendo-listview-item-padding-y, $kendo-listview-item-padding-y ) * -1);
+        padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
+        padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
+    }
+    .k-listview-item-padding-square {
+        padding: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
+    }
+    .k-listview-item-padding-square .k-listview-link {
+        margin: (-$kendo-listview-item-padding-y);
+        padding: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
+    }
+
+
+    // Header
+    .k-listview-header {
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        padding-inline: var( --kendo-listview-header-padding-x, #{$kendo-listview-header-padding-x} );
+        padding-block: var( --kendo-listview-header-padding-y, #{$kendo-listview-header-padding-y} );
+    }
+    .k-listview-bordered > .k-listview-header {
+        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+
+
+    // Listview footer
+    .k-listview-footer {
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        padding-inline: var( --kendo-listview-footer-padding-x, #{$kendo-listview-footer-padding-x} );
+        padding-block: var( --kendo-listview-footer-padding-y, #{$kendo-listview-footer-padding-y} );
+
+    }
+    .k-listview-bordered > .k-listview-footer {
+        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+
+
+    // Listview pager
+    .k-listview-pager {
+        border-width: 0;
+        border-color: inherit;
+        font: inherit;
+    }
+    .k-listview-bordered > .k-listview-pager-top {
+        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+    .k-listview-bordered > .k-listview-pager-bottom {
+        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+
+
+    // Borders
+    .k-listview-borders-all {
+        .k-listview-item {
+            border-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+        }
+    }
+    .k-listview-borders-horizontal {
+        .k-listview-item {
+            border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+        }
+        .k-listview-item:first-child {
+            border-block-start-width: 0;
+        }
+    }
+    .k-listview-borders-vertical {
+        .k-listview-item {
+            border-inline-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+        }
+        .k-listview-item:first-child {
+            border-inline-start-width: 0;
+        }
+    }
+}

package/scss/listview/_theme.scss

@@ -0,0 +1,50 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-listview--theme() {
+    // Listview
+    .k-listview {
+        @include fill(
+            var( --kendo-listview-text, $kendo-listview-text ),
+            var( --kendo-listview-bg, $kendo-listview-bg ),
+            var( --kendo-listview-border, $kendo-listview-border )
+        )
+    }
+
+
+    // Listview content
+    .k-listview-content {
+
+        > .k-focus {
+            @include fill(
+                var( --kendo-listview-item-focus-text, $kendo-listview-item-focus-text ),
+                var( --kendo-listview-item-focus-bg, $kendo-listview-item-focus-bg )
+            );
+            box-shadow: var( --kendo-listview-item-focus-shadow, $kendo-listview-item-focus-shadow );
+        }
+
+        > .k-selected {
+            @include fill(
+                var( --kendo-listview-item-selected-text, $kendo-listview-item-selected-text ),
+                var( --kendo-listview-item-selected-bg, $kendo-listview-item-selected-bg )
+            )
+        }
+    }
+
+    // Listview header
+    .k-listview-header {
+        @include fill(
+            var( --kendo-listview-header-text, $kendo-listview-header-text ),
+            var( --kendo-listview-header-bg, $kendo-listview-header-bg ),
+            var( --kendo-listview-header-border, $kendo-listview-header-border )
+        )
+    }
+
+    // Listview footer
+    .k-listview-footer {
+        @include fill(
+            var( --kendo-listview-footer-text, $kendo-listview-footer-text ),
+            var( --kendo-listview-footer-bg, $kendo-listview-footer-bg )
+        )
+    }
+}