@progress/kendo-theme-core 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/components/list/_layout.scss

@@ -0,0 +1,251 @@
+
+@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;
+            }
+        }
+    }
+}
+
+
+@mixin kendo-list--layout() {
+    @include kendo-list--layout-base();
+}

package/scss/components/list/_theme.scss

@@ -0,0 +1,102 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.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
+        );
+    }
+
+}
+
+
+@mixin kendo-list--theme() {
+    @include kendo-list--theme-base();
+}

package/scss/components/list/_variables.scss

@@ -0,0 +1,118 @@
+// List
+
+$kendo-list-font-family: null !default;
+
+$kendo-list-font-size: null !default;
+$kendo-list-sm-font-size: null !default;
+$kendo-list-md-font-size: null !default;
+$kendo-list-lg-font-size: null !default;
+
+$kendo-list-line-height: null !default;
+$kendo-list-sm-line-height: null !default;
+$kendo-list-md-line-height: null !default;
+$kendo-list-lg-line-height: null !default;
+
+$kendo-list-header-padding-x: null !default;
+$kendo-list-sm-header-padding-x: null !default;
+$kendo-list-md-header-padding-x: null !default;
+$kendo-list-lg-header-padding-x: null !default;
+
+$kendo-list-header-padding-y: null !default;
+$kendo-list-sm-header-padding-y: null !default;
+$kendo-list-md-header-padding-y: null !default;
+$kendo-list-lg-header-padding-y: null !default;
+
+$kendo-list-header-border-width: null !default;
+
+$kendo-list-header-font-size: null !default;
+$kendo-list-sm-header-font-size: null !default;
+$kendo-list-md-header-font-size: null !default;
+$kendo-list-lg-header-font-size: null !default;
+
+$kendo-list-header-line-height: null !default;
+$kendo-list-sm-header-line-height: null !default;
+$kendo-list-md-header-line-height: null !default;
+$kendo-list-lg-header-line-height: null !default;
+
+$kendo-list-header-font-weight: null !default;
+
+$kendo-list-filter-padding: null !default;
+
+$kendo-list-item-padding-x: null !default;
+$kendo-list-sm-item-padding-x: null !default;
+$kendo-list-md-item-padding-x: null !default;
+$kendo-list-lg-item-padding-x: null !default;
+
+$kendo-list-item-padding-y: null !default;
+$kendo-list-sm-item-padding-y: null !default;
+$kendo-list-md-item-padding-y: null !default;
+$kendo-list-lg-item-padding-y: null !default;
+
+$kendo-list-item-font-size: null !default;
+$kendo-list-sm-item-font-size: null !default;
+$kendo-list-md-item-font-size: null !default;
+$kendo-list-lg-item-font-size: null !default;
+
+$kendo-list-item-line-height: null !default;
+$kendo-list-sm-item-line-height: null !default;
+$kendo-list-md-item-line-height: null !default;
+$kendo-list-lg-item-line-height: null !default;
+
+$kendo-list-group-item-padding-x: null !default;
+$kendo-list-sm-group-item-padding-x: null !default;
+$kendo-list-md-group-item-padding-x: null !default;
+$kendo-list-lg-group-item-padding-x: null !default;
+
+$kendo-list-group-item-padding-y: null !default;
+$kendo-list-sm-group-item-padding-y: null !default;
+$kendo-list-md-group-item-padding-y: null !default;
+$kendo-list-lg-group-item-padding-y: null !default;
+
+$kendo-list-group-item-border-width: null !default;
+
+$kendo-list-group-item-font-size: null !default;
+$kendo-list-sm-group-item-font-size: null !default;
+$kendo-list-md-group-item-font-size: null !default;
+$kendo-list-lg-group-item-font-size: null !default;
+
+$kendo-list-group-item-line-height: null !default;
+$kendo-list-sm-group-item-line-height: null !default;
+$kendo-list-md-group-item-line-height: null !default;
+$kendo-list-lg-group-item-line-height: null !default;
+
+$kendo-list-group-item-font-weight: null !default;
+
+
+$kendo-list-sizes: null !default;
+
+
+$kendo-list-bg: null !default;
+$kendo-list-text: null !default;
+$kendo-list-border: null !default;
+
+
+$kendo-list-header-bg: null !default;
+$kendo-list-header-text: null !default;
+$kendo-list-header-border: null !default;
+$kendo-list-header-shadow: null !default;
+
+
+$kendo-list-item-bg: null !default;
+$kendo-list-item-text: null !default;
+
+$kendo-list-item-hover-bg: null !default;
+$kendo-list-item-hover-text: null !default;
+
+$kendo-list-item-focus-bg: null !default;
+$kendo-list-item-focus-text: null !default;
+$kendo-list-item-focus-shadow: null !default;
+
+$kendo-list-item-selected-bg: null !default;
+$kendo-list-item-selected-text: null !default;
+
+$kendo-list-group-item-bg: null !default;
+$kendo-list-group-item-text: null !default;
+$kendo-list-group-item-border: null !default;
+$kendo-list-group-item-shadow: null !default;
+
+$kendo-list-option-label-text: null !default;

package/scss/components/listbox/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-listbox--styles() {
+    @include import-once( "listbox" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-listbox--layout();
+        @include kendo-listbox--theme();
+    }
+}

package/scss/components/listbox/_layout.scss

@@ -0,0 +1,91 @@
+@use "../../color-system/_constants.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;
+    }
+
+}
+
+
+@mixin kendo-listbox--layout() {
+    @include kendo-listbox--layout-base();
+}

package/scss/components/listbox/_theme.scss

@@ -0,0 +1,26 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.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;
+        }
+    }
+
+}
+
+
+@mixin kendo-listbox--theme() {
+    @include kendo-listbox--theme-base();
+}

package/scss/components/listbox/_variables.scss

@@ -0,0 +1,20 @@
+// ListBox
+
+$kendo-listbox-spacing: null !default;
+$kendo-listbox-button-spacing: null !default;
+$kendo-listbox-width: null !default;
+$kendo-listbox-default-height: null !default;
+$kendo-listbox-border-width: null !default;
+$kendo-listbox-font-family: null !default;
+$kendo-listbox-font-size: null !default;
+$kendo-listbox-line-height: null !default;
+
+$kendo-listbox-text: null !default;
+$kendo-listbox-bg: null !default;
+$kendo-listbox-border: null !default;
+
+$kendo-listbox-item-padding-x: null !default;
+$kendo-listbox-item-padding-y: null !default;
+
+$kendo-listbox-drop-hint-width: null !default;
+$kendo-listbox-drop-hint-border-width: null !default;

package/scss/components/listgroup/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-listgroup--styles() {
+    @include import-once( "listgroup" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-listgroup--layout();
+        @include kendo-listgroup--theme();
+    }
+}