@progress/kendo-theme-default 5.0.0-alpha.2 → 5.0.0-beta.2

package/scss/list/_layout.scss

@@ -0,0 +1,219 @@
+@include exports( "list/layout" ) {
+
+    // List
+    .k-list {
+        margin: 0;
+        padding: 0;
+        font-size: $kendo-list-font-size;
+        line-height: $kendo-list-line-height;
+        display: flex;
+        flex-flow: column nowrap;
+        outline: none;
+        position: relative;
+        overflow: hidden;
+    }
+
+
+    // List in popup
+    .k-popup > .k-list {
+        height: 100%;
+        border-width: 0;
+    }
+
+
+    // List header
+    // .k-list-header,
+    .k-list-group-sticky-header {
+        padding: $kendo-list-header-padding-y $kendo-list-header-padding-x;
+        border-width: 0;
+        border-width: $kendo-list-header-border-width; // sass-lint:disable-line no-duplicate-properties
+        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;
+        flex: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+    // List content
+    .k-list-content {
+        border-color: inherit;
+        flex: 1 1 auto;
+        overflow: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        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: $kendo-list-item-padding-y $kendo-list-item-padding-x;
+        border: 0;
+        font-size: $kendo-list-item-font-size;
+        line-height: $kendo-list-item-line-height;
+        outline: none;
+        cursor: default;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: $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-optionlabel {
+        @extend .k-list-item;
+    }
+
+
+    // List group item
+    .k-list-group-item {
+        padding: $kendo-list-group-item-padding-y $kendo-list-group-item-padding-x;
+        border-width: 0;
+        border-width: $kendo-list-group-item-border-width; // sass-lint:disable-line no-duplicate-properties
+        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: $icon-spacing;
+        position: relative;
+    }
+
+
+    // List item group label
+    .k-list-item-group-label {
+        padding: 0 .5em;
+        font-size: .75em;
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+
+        .k-ie & {
+            right: 0;
+        }
+        .k-ie .k-rtl &,
+        .k-ie [dir="rtl"] & {
+            right: auto;
+            left: 0;
+        }
+    }
+
+
+    // Virtualization
+    .k-virtual-list {}
+    .k-virtual-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 {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+    // Filter
+    .k-list-filter {
+        display: block;
+        position: relative;
+        padding: $padding-x;
+        box-sizing: border-box;
+        flex: 0 0 auto;
+    }
+
+
+    // 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: $_header-padding-y $_header-padding-x;
+                font-size: $_header-font-size;
+                line-height: $_header-line-height;
+            }
+
+            .k-list-item {
+                padding: $_item-padding-y $_item-padding-x;
+                font-size: $_item-font-size;
+                line-height: $_item-line-height;
+            }
+
+            .k-list-group-item {
+                padding: $_group-item-padding-y $_group-item-padding-x;
+                font-size: $_group-item-font-size;
+                line-height: $_group-item-line-height;
+            }
+        }
+    }
+
+
+    // No data
+    .k-no-data {
+        min-height: 138px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        text-align: center;
+        white-space: normal;
+    }
+
+}

package/scss/list/_theme.scss

@@ -0,0 +1,91 @@
+@include exports( "list/theme" ) {
+
+    // 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 box-shadow( $kendo-list-item-focus-shadow );
+        }
+
+        // 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: shade( $kendo-list-item-selected-bg );
+        }
+    }
+
+
+    // 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
+        );
+    }
+
+
+    // No data
+    .k-no-data {
+        color: $kendo-list-no-data-text;
+    }
+
+}

package/scss/list/_variables.scss

@@ -0,0 +1,248 @@
+// List
+
+/// Font size of the list component, if no size is set.
+/// @group list
+$kendo-list-font-size: null !default;
+$kendo-list-font-size-sm: $font-size-sm !default;
+$kendo-list-font-size-md: $font-size-md !default;
+$kendo-list-font-size-lg: $font-size-md !default;
+
+/// Line height of the list component, if no size is set.
+/// @group list
+$kendo-list-line-height: null !default;
+$kendo-list-line-height-sm: null !default;
+$kendo-list-line-height-md: null !default;
+$kendo-list-line-height-lg: null !default;
+
+/// Horizontal padding of list header, if no size is set.
+/// @group list
+$kendo-list-header-padding-x: null !default;
+$kendo-list-header-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-x-sm: ( $kendo-list-header-padding-x-base * .75 ) !default;
+$kendo-list-header-padding-x-md: ( $kendo-list-header-padding-x-base * 1 ) !default;
+$kendo-list-header-padding-x-lg: ( $kendo-list-header-padding-x-base * 1.25 ) !default;
+
+/// Vertical padding of list header, if no size is set.
+/// @group list
+$kendo-list-header-padding-y: null !default;
+$kendo-list-header-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-list-header-padding-y-sm: ( $kendo-list-header-padding-y-base * .75 ) !default;
+$kendo-list-header-padding-y-md: ( $kendo-list-header-padding-y-base * 1 ) !default;
+$kendo-list-header-padding-y-lg: ( $kendo-list-header-padding-y-base * 1.25 ) !default;
+
+/// Border width of list header.
+/// @group list
+$kendo-list-header-border-width: 0 0 1px !default;
+
+/// Font size of list header, if no size is set.
+/// @group list
+$kendo-list-header-font-size: null !default;
+$kendo-list-header-font-size-sm: null !default;
+$kendo-list-header-font-size-md: null !default;
+$kendo-list-header-font-size-lg: null !default;
+
+/// Line height of list header, if no size is set.
+/// @group list
+$kendo-list-header-line-height: null !default;
+$kendo-list-header-line-height-sm: null !default;
+$kendo-list-header-line-height-md: null !default;
+$kendo-list-header-line-height-lg: null !default;
+
+/// Font weight of list header.
+/// @group list
+$kendo-list-header-font-weight: null !default;
+
+/// Horizontal padding of list items, when no size is set.
+/// @group list
+$kendo-list-item-padding-x: null !default;
+$kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-sm: ( $kendo-list-item-padding-x-base * .75 ) !default;
+$kendo-list-item-padding-x-md: ( $kendo-list-item-padding-x-base * 1 ) !default;
+$kendo-list-item-padding-x-lg: ( $kendo-list-item-padding-x-base * 1.25 ) !default;
+
+/// Vertical padding of list items, when no size is set.
+/// @group list
+$kendo-list-item-padding-y: null !default;
+$kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-list-item-padding-y-sm: ( $kendo-list-item-padding-y-base * .75 ) !default;
+$kendo-list-item-padding-y-md: ( $kendo-list-item-padding-y-base * 1 ) !default;
+$kendo-list-item-padding-y-lg: ( $kendo-list-item-padding-y-base * 1.25 ) !default;
+
+/// Font size of list items, if no size is set.
+/// @group list
+$kendo-list-item-font-size: null !default;
+$kendo-list-item-font-size-sm: null !default;
+$kendo-list-item-font-size-md: null !default;
+$kendo-list-item-font-size-lg: null !default;
+
+/// Line height of list items, if no size is set.
+/// @group list
+$kendo-list-item-line-height: null !default;
+$kendo-list-item-line-height-sm: null !default;
+$kendo-list-item-line-height-md: null !default;
+$kendo-list-item-line-height-lg: null !default;
+
+/// Horizontal padding of list group items, when no size is set.
+/// @group list
+$kendo-list-group-item-padding-x: null !default;
+$kendo-list-group-item-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-sm: ( $kendo-list-group-item-padding-x-base * .75 ) !default;
+$kendo-list-group-item-padding-x-md: ( $kendo-list-group-item-padding-x-base * 1 ) !default;
+$kendo-list-group-item-padding-x-lg: ( $kendo-list-group-item-padding-x-base * 1.25 ) !default;
+
+/// Vertical padding of list group items, when no size is set.
+/// @group list
+$kendo-list-group-item-padding-y: null !default;
+$kendo-list-group-item-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-list-group-item-padding-y-sm: ( $kendo-list-group-item-padding-y-base * .75 ) !default;
+$kendo-list-group-item-padding-y-md: ( $kendo-list-group-item-padding-y-base * 1 ) !default;
+$kendo-list-group-item-padding-y-lg: ( $kendo-list-group-item-padding-y-base * 1.25 ) !default;
+
+/// Border width of list group items.
+/// @group list
+$kendo-list-group-item-border-width: 1px 0 0 !default;
+
+/// Font size of list group items, if no size is set.
+/// @group list
+$kendo-list-group-item-font-size: null !default;
+$kendo-list-group-item-font-size-sm: null !default;
+$kendo-list-group-item-font-size-md: null !default;
+$kendo-list-group-item-font-size-lg: null !default;
+
+/// Line height of list group items, if no size is set.
+/// @group list
+$kendo-list-group-item-line-height: null !default;
+$kendo-list-group-item-line-height-sm: null !default;
+$kendo-list-group-item-line-height-md: null !default;
+$kendo-list-group-item-line-height-lg: null !default;
+
+/// Font weight of list group item.
+/// @group list
+$kendo-list-group-item-font-weight: null !default;
+
+
+// Kendo list sizes
+$kendo-list-sizes: (
+    sm: (
+        font-size: $kendo-list-font-size-sm,
+        line-height: $kendo-list-line-height-sm,
+        header-padding-x: $kendo-list-header-padding-x-sm,
+        header-padding-y: $kendo-list-header-padding-y-sm,
+        header-font-size: null,
+        header-line-height: null,
+        item-padding-x: $kendo-list-item-padding-x-sm,
+        item-padding-y: $kendo-list-item-padding-y-sm,
+        item-font-size: null,
+        item-line-height: null,
+        group-item-padding-x: $kendo-list-group-item-padding-x-sm,
+        group-item-padding-y: $kendo-list-group-item-padding-y-sm,
+        group-item-font-size: null,
+        group-item-line-height: null
+    ),
+    md: (
+        font-size: $kendo-list-font-size-md,
+        line-height: $kendo-list-line-height-md,
+        header-padding-x: $kendo-list-header-padding-x-md,
+        header-padding-y: $kendo-list-header-padding-y-md,
+        header-font-size: null,
+        header-line-height: null,
+        item-padding-x: $kendo-list-item-padding-x-md,
+        item-padding-y: $kendo-list-item-padding-y-md,
+        item-font-size: null,
+        item-line-height: null,
+        group-item-padding-x: $kendo-list-group-item-padding-x-md,
+        group-item-padding-y: $kendo-list-group-item-padding-y-md,
+        group-item-font-size: null,
+        group-item-line-height: null
+    ),
+    lg: (
+        font-size: $kendo-list-font-size-lg,
+        line-height: $kendo-list-line-height-lg,
+        header-padding-x: $kendo-list-header-padding-x-lg,
+        header-padding-y: $kendo-list-header-padding-y-lg,
+        header-font-size: null,
+        header-line-height: null,
+        item-padding-x: $kendo-list-item-padding-x-lg,
+        item-padding-y: $kendo-list-item-padding-y-lg,
+        item-font-size: null,
+        item-line-height: null,
+        group-item-padding-x: $kendo-list-group-item-padding-x-lg,
+        group-item-padding-y: $kendo-list-group-item-padding-y-lg,
+        group-item-font-size: null,
+        group-item-line-height: null
+    )
+) !default;
+
+
+/// Background color of the list component.
+/// @group list
+$kendo-list-bg: $component-bg !default;
+/// Text color of the list component.
+/// @group list
+$kendo-list-text: $component-text !default;
+/// Border color of the list component.
+/// @group list
+$kendo-list-border: $component-border !default;
+
+
+/// Background color of list header.
+/// @group list
+$kendo-list-header-bg: null !default;
+/// Text color of list header.
+/// @group list
+$kendo-list-header-text: null !default;
+/// Border color of list header.
+/// @group list
+$kendo-list-header-border: inherit !default;
+/// Box shadow of list header.
+/// @group list
+$kendo-list-header-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
+
+
+/// Background color of list items.
+/// @group list
+$kendo-list-item-bg: null !default;
+/// Text color of list items.
+/// @group list
+$kendo-list-item-text: null !default;
+
+/// Background color of hovered list items.
+/// @group list
+$kendo-list-item-hover-bg: $hovered-bg !default;
+/// Text color of hovered list items.
+/// @group list
+$kendo-list-item-hover-text: $hovered-text !default;
+
+/// Background color of focused list items.
+/// @group list
+$kendo-list-item-focus-bg: null !default;
+/// Text color of focused list items.
+/// @group list
+$kendo-list-item-focus-text: null !default;
+/// Box shadow of focused list items.
+/// @group list
+$kendo-list-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
+
+/// Background color of selected list items.
+/// @group list
+$kendo-list-item-selected-bg: $selected-bg !default;
+/// Text color of selected list items.
+/// @group list
+$kendo-list-item-selected-text: $selected-text !default;
+
+/// Background color of list group items.
+/// @group list
+$kendo-list-group-item-bg: null !default;
+/// Text color of list group items.
+/// @group list
+$kendo-list-group-item-text: null !default;
+/// The border color of list group items.
+/// @group list
+$kendo-list-group-item-border: inherit !default;
+/// The base shadow of list group items.
+/// @group list
+$kendo-list-group-item-shadow: null !default;
+
+/// Text color of the 'No Data' text.
+/// @group list
+$kendo-list-no-data-text: $subtle-text !default;

package/scss/listbox/_index.scss

@@ -5,7 +5,9 @@
 @import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/menu/_index.scss

@@ -4,7 +4,9 @@
 // Dependencies
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component