@progress/kendo-theme-default 5.0.0-beta.0 → 5.0.0-beta.4

package/scss/list/_layout.scss

@@ -1,152 +1,157 @@
 @include exports( "list/layout" ) {
 
-    // Layout
-    .k-list-scroller {
+    // 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: auto;
+        overflow: hidden;
     }
 
-    .k-list {
-
-        .k-list-ul {
-            margin: 0;
-            padding: 0;
-            height: auto;
-            list-style: none;
 
-            > .k-list-group-header {
-                border-top-width: 1px;
-                border-top-style: solid;
-            }
-        }
+    // List in popup
+    .k-popup > .k-list {
+        height: 100%;
+        border-width: 0;
+    }
 
-        .k-list-item {
-            display: flex;
-            align-items: center;
-            align-content: center;
-            cursor: pointer;
 
-            > .k-icon,
-            > .k-checkbox {
-                align-self: center;
-                margin-right: $padding-x;
-            }
-        }
+    // 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;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        flex: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+    .k-list-optionlabel {
+        @extend .k-list-group-sticky-header;
+    }
 
-        .k-list-item-text,
-        .k-list-group-header {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
 
-        .k-custom-item {
-            font-style: italic;
+    // List content
+    .k-list-content {
+        border-color: inherit;
+        flex: 1 1 auto;
+        overflow: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        position: relative;
+    }
 
-            > .k-i-plus {
-                margin-left: auto;
-                margin-right: 0;
-            }
-        }
 
-        .k-rtl &,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-list-item {
-                > .k-icon,
-                > .k-checkbox {
-                    margin-right: 0;
-                    margin-left: $padding-x;
-                }
-            }
-        }
+    // List UL
+    .k-list-ul {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        border-color: inherit;
+        height: auto;
+        list-style: none;
     }
 
-    .k-list .k-list-item,
-    .k-list-optionlabel {
+
+    // 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;
-        min-height: $line-height-em;
-        line-height: $line-height-em;
-        white-space: normal;
+        line-height: $kendo-list-item-line-height;
+        outline: none;
+        cursor: pointer;
+        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-list-optionlabel {
-        cursor: pointer;
-        outline: none;
-    }
-
 
-    // Group Header
-    .k-list-group-header {
-        padding: $kendo-list-group-header-padding;
-        min-height: $line-height-em;
-        font-size: $kendo-list-group-header-font-size;
-        font-weight: $font-weight-bold;
-        white-space: normal;
-
-        &.k-stuck {
-            border-bottom-width: $kendo-list-stuck-group-header-border-width;
-            border-bottom-style: solid;
+        &.k-first::before {
+            content: "";
+            border-width: 1px 0 0;
+            border-style: solid;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
         }
     }
 
 
-    // List sizes
-    .k-list-sm {
-        .k-list-item,
-        .k-list-optionlabel {
-            padding: $kendo-list-item-padding-y-sm $kendo-list-item-padding-x-sm;
-            font-size: $kendo-list-item-font-size-sm;
-        }
-
-        .k-list-group-header {
-            padding: $kendo-list-group-header-padding-sm;
-            font-size: $kendo-list-group-header-font-size-sm;
-        }
+    // 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;
     }
-    .k-list-md {
-        .k-list-item,
-        .k-list-optionlabel {
-            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
-            font-size: $kendo-list-item-font-size-md;
-        }
 
-        .k-list-group-header {
-            padding: $kendo-list-group-header-padding-md;
-            font-size: $kendo-list-group-header-font-size-md;
-        }
-    }
-    .k-list-lg {
-        .k-list-item,
-        .k-list-optionlabel {
-            padding: $kendo-list-item-padding-y-lg $kendo-list-item-padding-x-lg;
-            font-size: $kendo-list-item-font-size-lg;
-        }
 
-        .k-list-group-header {
-            padding: $kendo-list-group-header-padding-lg;
-            font-size: $kendo-list-group-header-font-size-lg;
+    // 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;
         }
     }
 
 
-    // Virtual List
-    .k-virtual-list {
-
-        .k-virtual-content {
-            overflow-y: scroll;
-            -webkit-overflow-scrolling: touch;
-            position: relative;
-
-            .k-list-item {
-                position: absolute;
-                width: 100%;
-            }
-        }
-
+    // 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,
+    .k-virtual-list .k-list-header-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
 
@@ -159,36 +164,67 @@
         flex: 0 0 auto;
     }
 
-    .k-dropdown-button .k-popup {
-        .k-list-item {
-            cursor: pointer;
-        }
-    }
 
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-list-item:focus {
-            outline: 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: $_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;
+            }
         }
     }
 
-    .k-nodata {
+
+    // No data
+    .k-no-data {
         min-height: 138px;
-        width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
-        text-transform: uppercase;
         font-weight: lighter;
         text-align: center;
         white-space: normal;
+    }
 
-        .k-button {
-            display: inline-flex;
-            border-width: 1px;
-        }
+
+    // Alias
+    .k-nodata {
+        @extend .k-no-data !optional;
     }
 
 }

package/scss/list/_theme.scss

@@ -1,54 +1,91 @@
 @include exports( "list/theme" ) {
 
-    .k-list {}
+    // 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 );
+    }
 
-    .k-list .k-list-item:hover,
-    .k-list .k-list-item.k-hover,
-    .k-list-optionlabel:hover,
-    .k-list-optionlabel.k-hover {
+
+    // List item
+    .k-list-item {
         @include fill(
-            $kendo-list-item-hover-text,
-            $kendo-list-item-hover-bg
+            $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 );
         }
     }
 
-    .k-list .k-list-item:focus,
-    .k-list .k-list-item.k-focus,
-    .k-list-optionlabel:focus,
-    .k-list-optionlabel.k-focus {
-        @include box-shadow( $kendo-list-item-focus-shadow );
-    }
 
-    .k-list .k-list-item.k-selected,
-    .k-list-optionlabel.k-selected {
+    // List group item
+    .k-list-group-item {
         @include fill(
-            $kendo-list-item-selected-text,
-            $kendo-list-item-selected-bg
+            $kendo-list-group-item-text,
+            $kendo-list-group-item-bg,
+            $kendo-list-group-item-border,
         );
+        @include box-shadow( $kendo-list-group-item-shadow );
     }
 
 
-    // Group Header
-    .k-list-group-header {
-        color: $kendo-list-group-header-text;
-
-        &.k-stuck {
-            border-bottom-color: $component-border;
-            box-shadow: $kendo-list-group-header-shadow;
-        }
-    }
-    .k-list-ul > .k-list-group-header {
-        border-top-color: $kendo-list-group-header-border;
+    // List item group label
+    .k-list-item-group-label {
+        @include fill(
+            $kendo-list-bg,
+            $kendo-list-text
+        );
     }
 
 
-    .k-nodata {
-        color: $kendo-list-container-no-data-text;
+    // No data
+    .k-no-data {
+        color: $kendo-list-no-data-text;
     }
 
 }