@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/list/_layout.scss

@@ -1,249 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-@use "../icons/_variables.scss" as *;
-@use "sass:map";
-
-@mixin kendo-list--layout-base() {
-
-    // List container
-    .k-list-container {
-        display: flex;
-        flex-flow: column nowrap;
-
-        > .k-list {
-            flex: 1;
-            height: 100%;
-        }
-    }
-
-    // List
-    .k-list {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: $kendo-list-font-family;
-        font-size: $kendo-list-font-size;
-        line-height: $kendo-list-line-height;
-        display: flex;
-        flex-flow: column nowrap;
-        outline: none;
-        position: relative;
-        overflow: hidden;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // List in popup
-    .k-popup > .k-list {
-        height: 100%;
-        border-width: 0;
-    }
-
-
-    // List header
-    // .k-list-header,
-    .k-list-group-sticky-header {
-        padding-block: $kendo-list-header-padding-y;
-        padding-inline: $kendo-list-header-padding-x;
-        border-width: 0;
-        border-width: $kendo-list-header-border-width;
-        border-style: solid;
-        font-size: $kendo-list-header-font-size;
-        line-height: $kendo-list-header-line-height;
-        font-weight: $kendo-list-header-font-weight;
-        white-space: nowrap;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        flex: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
-    }
-
-
-    // List content
-    .k-list-content {
-        border-color: inherit;
-        flex: 1 1 auto;
-        overflow: hidden;
-        overflow-y: auto;
-        position: relative;
-    }
-
-
-    // List UL
-    .k-list-ul {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        border-color: inherit;
-        height: auto;
-        list-style: none;
-    }
-
-
-    // List item
-    .k-list-item {
-        padding-block: $kendo-list-item-padding-y;
-        padding-inline: $kendo-list-item-padding-x;
-        border: 0;
-        font-size: $kendo-list-item-font-size;
-        line-height: $kendo-list-item-line-height;
-        outline: none;
-        cursor: pointer;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
-        gap: $kendo-icon-spacing;
-        position: relative;
-        transition-property: color, background-color, outline-color, box-shadow;
-        transition-duration: 200ms;
-        transition-timing-function: ease;
-
-        &.k-first::before {
-            content: "";
-            border-width: 1px 0 0;
-            border-style: solid;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-        }
-    }
-    .k-list-item-text,
-    .k-list-header-text,
-    .k-list-optionlabel {
-        &::before {
-            content: "\200b";
-            width: 0px;
-            overflow: hidden;
-        }
-    }
-    .k-list-optionlabel {
-        @extend .k-list-item !optional;
-        column-gap: 0;
-    }
-
-
-    // List group item
-    .k-list-group-item {
-        padding-block: $kendo-list-group-item-padding-y;
-        padding-inline: $kendo-list-group-item-padding-x;
-        border-width: 0;
-        border-width: $kendo-list-group-item-border-width;
-        border-style: solid;
-        font-size: $kendo-list-group-item-font-size;
-        line-height: $kendo-list-group-item-line-height;
-        font-weight: $kendo-list-group-item-font-weight;
-        cursor: default;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
-        gap: $kendo-icon-spacing;
-        position: relative;
-    }
-
-
-    // List item group label
-    .k-list-item-group-label {
-        padding-block: 0;
-        padding-inline: .5em;
-        font-size: .75em;
-        position: absolute;
-        top: 0;
-        inset-inline-end: 0;
-    }
-
-
-    // Virtualization
-    .k-virtual-list {}
-    .k-virtual-content,
-    .k-virtual-list .k-list-content {
-        overflow-y: scroll;
-    }
-    .k-virtual-list .k-list-item,
-    .k-virtual-list .k-list-group-item,
-    .k-virtual-content .k-list-item,
-    .k-virtual-content .k-list-group-item {
-        position: absolute;
-        width: 100%;
-    }
-    .k-virtual-list .k-list-item-text,
-    .k-virtual-list .k-list-header-text {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .k-virtual-list .k-list-optionlabel {
-        position: relative;
-    }
-
-
-    // Filter
-    .k-list-filter {
-        display: block;
-        position: relative;
-        padding: $kendo-list-filter-padding;
-        box-sizing: border-box;
-        flex: none;
-    }
-
-
-    // Switch sizes
-    @each $size, $size-props in $kendo-list-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_header-padding-x: map.get( $size-props, header-padding-x );
-        $_header-padding-y: map.get( $size-props, header-padding-y );
-        $_header-font-size: map.get( $size-props, header-font-size );
-        $_header-line-height: map.get( $size-props, header-line-height );
-        $_item-padding-x: map.get( $size-props, item-padding-x );
-        $_item-padding-y: map.get( $size-props, item-padding-y );
-        $_item-font-size: map.get( $size-props, item-font-size );
-        $_item-line-height: map.get( $size-props, item-line-height );
-        $_group-item-padding-x: map.get( $size-props, group-item-padding-x );
-        $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
-        $_group-item-font-size: map.get( $size-props, group-item-font-size );
-        $_group-item-line-height: map.get( $size-props, group-item-line-height );
-
-        .k-list-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            // .k-list-header,
-            .k-list-group-sticky-header {
-                padding-block: $_header-padding-y;
-                padding-inline: $_header-padding-x;
-                font-size: $_header-font-size;
-                line-height: $_header-line-height;
-            }
-
-            .k-list-item {
-                padding-block: $_item-padding-y;
-                padding-inline: $_item-padding-x;
-                font-size: $_item-font-size;
-                line-height: $_item-line-height;
-            }
-
-            .k-list-group-item {
-                padding-block: $_group-item-padding-y;
-                padding-inline: $_group-item-padding-x;
-                font-size: $_group-item-font-size;
-                line-height: $_group-item-line-height;
-            }
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/list/_layout.scss" as *;
 
 
 @mixin kendo-list--layout() {

package/scss/list/_theme.scss

@@ -1,98 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-list--theme-base() {
-
-    // List
-    .k-list {
-        @include fill(
-            $kendo-list-text,
-            $kendo-list-bg,
-            $kendo-list-border
-        );
-    }
-
-
-    // List header
-    // .k-list-header,
-    .k-list-group-sticky-header {
-        @include fill(
-            $kendo-list-header-text,
-            $kendo-list-header-bg,
-            $kendo-list-header-border,
-        );
-        @include box-shadow( $kendo-list-header-shadow );
-    }
-
-
-    // List item
-    .k-list-item {
-        @include fill(
-            $kendo-list-item-text,
-            $kendo-list-item-bg
-        );
-
-        // Hover
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-list-item-hover-text,
-                $kendo-list-item-hover-bg
-            );
-        }
-
-        // Focus
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $kendo-list-item-focus-text,
-                $kendo-list-item-focus-bg
-            );
-            @include focus-indicator( $kendo-list-item-focus-shadow, true );
-        }
-
-        // Selected
-        &.k-selected {
-            @include fill(
-                $kendo-list-item-selected-text,
-                $kendo-list-item-selected-bg
-            );
-        }
-        &.k-selected:hover,
-        &.k-selected.k-hover {
-            color: $kendo-list-item-selected-text;
-            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
-        }
-    }
-
-    // Option Label
-    .k-list-optionlabel,
-    .k-list-optionlabel.k-hover,
-    .k-list-optionlabel:hover {
-        color: $kendo-list-option-label-text;
-    }
-
-    // List group item
-    .k-list-group-item {
-        @include fill(
-            $kendo-list-group-item-text,
-            $kendo-list-group-item-bg,
-            $kendo-list-group-item-border,
-        );
-        @include box-shadow( $kendo-list-group-item-shadow );
-    }
-
-
-    // List item group label
-    .k-list-item-group-label {
-        @include fill(
-            $kendo-list-bg,
-            $kendo-list-text
-        );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/list/_theme.scss" as *;
 
 
 @mixin kendo-list--theme() {

package/scss/list/_variables.scss

@@ -250,3 +250,90 @@ $kendo-list-group-item-shadow: null !default;
 /// The color of the 'Option Label' text.
 /// @group list
 $kendo-list-option-label-text: $kendo-subtle-text !default;
+
+@forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with (
+    $kendo-list-font-family: $kendo-list-font-family,
+    $kendo-list-font-size: $kendo-list-font-size,
+    $kendo-list-sm-font-size: $kendo-list-sm-font-size,
+    $kendo-list-md-font-size: $kendo-list-md-font-size,
+    $kendo-list-lg-font-size: $kendo-list-lg-font-size,
+    $kendo-list-line-height: $kendo-list-line-height,
+    $kendo-list-sm-line-height: $kendo-list-sm-line-height,
+    $kendo-list-md-line-height: $kendo-list-md-line-height,
+    $kendo-list-lg-line-height: $kendo-list-lg-line-height,
+    $kendo-list-header-padding-x: $kendo-list-header-padding-x,
+    $kendo-list-sm-header-padding-x: $kendo-list-sm-header-padding-x,
+    $kendo-list-md-header-padding-x: $kendo-list-md-header-padding-x,
+    $kendo-list-lg-header-padding-x: $kendo-list-lg-header-padding-x,
+    $kendo-list-header-padding-y: $kendo-list-header-padding-y,
+    $kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
+    $kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
+    $kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
+    $kendo-list-header-border-width: $kendo-list-header-border-width,
+    $kendo-list-header-font-size: $kendo-list-header-font-size,
+    $kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
+    $kendo-list-md-header-font-size: $kendo-list-md-header-font-size,
+    $kendo-list-lg-header-font-size: $kendo-list-lg-header-font-size,
+    $kendo-list-header-line-height: $kendo-list-header-line-height,
+    $kendo-list-sm-header-line-height: $kendo-list-sm-header-line-height,
+    $kendo-list-md-header-line-height: $kendo-list-md-header-line-height,
+    $kendo-list-lg-header-line-height: $kendo-list-lg-header-line-height,
+    $kendo-list-header-font-weight: $kendo-list-header-font-weight,
+    $kendo-list-filter-padding: $kendo-list-filter-padding,
+    $kendo-list-item-padding-x: $kendo-list-item-padding-x,
+    $kendo-list-sm-item-padding-x: $kendo-list-sm-item-padding-x,
+    $kendo-list-md-item-padding-x: $kendo-list-md-item-padding-x,
+    $kendo-list-lg-item-padding-x: $kendo-list-lg-item-padding-x,
+    $kendo-list-item-padding-y: $kendo-list-item-padding-y,
+    $kendo-list-sm-item-padding-y: $kendo-list-sm-item-padding-y,
+    $kendo-list-md-item-padding-y: $kendo-list-md-item-padding-y,
+    $kendo-list-lg-item-padding-y: $kendo-list-lg-item-padding-y,
+    $kendo-list-item-font-size: $kendo-list-item-font-size,
+    $kendo-list-sm-item-font-size: $kendo-list-sm-item-font-size,
+    $kendo-list-md-item-font-size: $kendo-list-md-item-font-size,
+    $kendo-list-lg-item-font-size: $kendo-list-lg-item-font-size,
+    $kendo-list-item-line-height: $kendo-list-item-line-height,
+    $kendo-list-sm-item-line-height: $kendo-list-sm-item-line-height,
+    $kendo-list-md-item-line-height: $kendo-list-md-item-line-height,
+    $kendo-list-lg-item-line-height: $kendo-list-lg-item-line-height,
+    $kendo-list-group-item-padding-x: $kendo-list-group-item-padding-x,
+    $kendo-list-sm-group-item-padding-x: $kendo-list-sm-group-item-padding-x,
+    $kendo-list-md-group-item-padding-x: $kendo-list-md-group-item-padding-x,
+    $kendo-list-lg-group-item-padding-x: $kendo-list-lg-group-item-padding-x,
+    $kendo-list-group-item-padding-y: $kendo-list-group-item-padding-y,
+    $kendo-list-sm-group-item-padding-y: $kendo-list-sm-group-item-padding-y,
+    $kendo-list-md-group-item-padding-y: $kendo-list-md-group-item-padding-y,
+    $kendo-list-lg-group-item-padding-y: $kendo-list-lg-group-item-padding-y,
+    $kendo-list-group-item-border-width: $kendo-list-group-item-border-width,
+    $kendo-list-group-item-font-size: $kendo-list-group-item-font-size,
+    $kendo-list-sm-group-item-font-size: $kendo-list-sm-group-item-font-size,
+    $kendo-list-md-group-item-font-size: $kendo-list-md-group-item-font-size,
+    $kendo-list-lg-group-item-font-size: $kendo-list-lg-group-item-font-size,
+    $kendo-list-group-item-line-height: $kendo-list-group-item-line-height,
+    $kendo-list-sm-group-item-line-height: $kendo-list-sm-group-item-line-height,
+    $kendo-list-md-group-item-line-height: $kendo-list-md-group-item-line-height,
+    $kendo-list-lg-group-item-line-height: $kendo-list-lg-group-item-line-height,
+    $kendo-list-group-item-font-weight: $kendo-list-group-item-font-weight,
+    $kendo-list-sizes: $kendo-list-sizes,
+    $kendo-list-bg: $kendo-list-bg,
+    $kendo-list-text: $kendo-list-text,
+    $kendo-list-border: $kendo-list-border,
+    $kendo-list-header-bg: $kendo-list-header-bg,
+    $kendo-list-header-text: $kendo-list-header-text,
+    $kendo-list-header-border: $kendo-list-header-border,
+    $kendo-list-header-shadow: $kendo-list-header-shadow,
+    $kendo-list-item-bg: $kendo-list-item-bg,
+    $kendo-list-item-text: $kendo-list-item-text,
+    $kendo-list-item-hover-bg: $kendo-list-item-hover-bg,
+    $kendo-list-item-hover-text: $kendo-list-item-hover-text,
+    $kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
+    $kendo-list-item-focus-text: $kendo-list-item-focus-text,
+    $kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
+    $kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
+    $kendo-list-item-selected-text: $kendo-list-item-selected-text,
+    $kendo-list-group-item-bg: $kendo-list-group-item-bg,
+    $kendo-list-group-item-text: $kendo-list-group-item-text,
+    $kendo-list-group-item-border: $kendo-list-group-item-border,
+    $kendo-list-group-item-shadow: $kendo-list-group-item-shadow,
+    $kendo-list-option-label-text: $kendo-list-option-label-text
+);

package/scss/listbox/_layout.scss

@@ -1,89 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-listbox--layout-base() {
-
-    .k-listbox {
-        width: $kendo-listbox-width;
-        height: $kendo-listbox-default-height;
-        border-width: 0;
-        outline: 0;
-        font-family: $kendo-listbox-font-family;
-        font-size: $kendo-listbox-font-size;
-        line-height: $kendo-listbox-line-height;
-        vertical-align: top;
-        background-color: transparent;
-        display: inline-flex;
-        gap: $kendo-listbox-spacing;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        .k-listbox-actions {
-            display: flex;
-            gap: $kendo-listbox-button-spacing;
-        }
-
-        &.k-listbox-actions-left,
-        &.k-listbox-actions-right {
-            flex-direction: row;
-
-            .k-listbox-actions {
-                flex-direction: column;
-            }
-        }
-
-        &.k-listbox-actions-right {
-            flex-direction: row-reverse;
-        }
-
-        &.k-listbox-actions-top,
-        &.k-listbox-actions-bottom {
-            flex-direction: column;
-
-            .k-listbox-actions {
-                flex-direction: row;
-            }
-        }
-
-        &.k-listbox-actions-bottom {
-            flex-direction: column-reverse;
-        }
-
-        .k-list-scroller {
-            width: 100%;
-            min-height: 0;
-            height: inherit;
-            border-width: $kendo-listbox-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-flow: column nowrap;
-
-            .k-list-scroller {
-                border-width: 0;
-            }
-
-            .k-list {
-                height: inherit;
-                background: transparent;
-            }
-        }
-
-        .k-drop-hint {
-            border-top-width: $kendo-listbox-drop-hint-width;
-            border-top-style: solid;
-        }
-
-        .k-ghost {
-            opacity: .5;
-        }
-    }
-
-    .k-item {
-        cursor: default;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/listbox/_layout.scss" as *;
 
 
 @mixin kendo-listbox--layout() {

package/scss/listbox/_theme.scss

@@ -1,23 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-listbox--theme-base() {
-
-    // Listbox
-    .k-listbox {
-        .k-list-scroller {
-            @include fill(
-                $kendo-listbox-text,
-                $kendo-listbox-bg,
-                $kendo-listbox-border
-            );
-        }
-        .k-drop-hint {
-            border-top-color: $kendo-color-primary;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/listbox/_theme.scss" as *;
 
 
 @mixin kendo-listbox--theme() {

package/scss/listbox/_variables.scss

@@ -50,3 +50,21 @@ $kendo-listbox-drop-hint-width: 1px !default;
 /// The width of the border around the ListBox drop hint.
 /// @group listbox
 $kendo-listbox-drop-hint-border-width: null !default;
+
+@forward "@progress/kendo-theme-core/scss/components/listbox/_variables.scss" with (
+    $kendo-listbox-spacing: $kendo-listbox-spacing,
+    $kendo-listbox-button-spacing: $kendo-listbox-button-spacing,
+    $kendo-listbox-width: $kendo-listbox-width,
+    $kendo-listbox-default-height: $kendo-listbox-default-height,
+    $kendo-listbox-border-width: $kendo-listbox-border-width,
+    $kendo-listbox-font-family: $kendo-listbox-font-family,
+    $kendo-listbox-font-size: $kendo-listbox-font-size,
+    $kendo-listbox-line-height: $kendo-listbox-line-height,
+    $kendo-listbox-text: $kendo-listbox-text,
+    $kendo-listbox-bg: $kendo-listbox-bg,
+    $kendo-listbox-border: $kendo-listbox-border,
+    $kendo-listbox-item-padding-x: $kendo-listbox-item-padding-x,
+    $kendo-listbox-item-padding-y: $kendo-listbox-item-padding-y,
+    $kendo-listbox-drop-hint-width: $kendo-listbox-drop-hint-width,
+    $kendo-listbox-drop-hint-border-width: $kendo-listbox-drop-hint-border-width
+);