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

package/scss/menu/_layout.scss

@@ -21,8 +21,12 @@
 
     // Menu item
     .k-menu-item {
+        box-sizing: border-box;
         border-width: 0;
         outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
         position: relative;
         user-select: none;
     }
@@ -44,28 +48,34 @@
         outline: 0;
         color: inherit;
         display: flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         flex: 1 1 auto;
+        gap: $menu-item-icon-spacing;
         align-items: center;
         position: relative;
         white-space: nowrap;
         cursor: pointer;
+    }
 
-        > .k-icon:not(.k-menu-expand-arrow),
-        > .k-image,
-        > .k-sprite {
-            margin-right: $menu-item-icon-spacing;
-        }
+
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: $icon-spacing;
+        margin-inline-end: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
     }
 
 
@@ -100,6 +110,14 @@
             padding-right: $kendo-menu-popup-item-padding-end;
         }
 
+        .k-menu-expand-arrow {
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: $icon-spacing;
+        }
+
         > .k-separator {
             margin: $menu-separator-spacing 0;
             height: 0;
@@ -138,12 +156,20 @@
             margin-top: $kendo-menu-popup-item-spacing;
         }
 
+        .k-menu-expand-arrow {
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: $icon-spacing;
+        }
+
         .k-separator {
             margin: $menu-separator-spacing 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $panel-border;
+            border-color: $component-border;
             display: block;
         }
     }
@@ -163,6 +189,11 @@
             padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
             padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
+        }
     }
     .k-menu-group-md {
         font-size: $kendo-menu-popup-font-size-md;
@@ -178,6 +209,11 @@
             padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
             padding-inline-end: $kendo-menu-popup-item-padding-end-md;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
+        }
     }
     .k-menu-group-lg {
         font-size: $kendo-menu-popup-font-size-lg;
@@ -193,6 +229,11 @@
             padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
             padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
+        }
     }
 
 
@@ -221,11 +262,14 @@
     .k-context-menu-popup {
         z-index: 12000;
 
-        > .k-popup:not(.k-menu-popup),
         .k-context-menu {
-            border: 0;
+            border-width: 0;
         }
     }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
 
 
     // Scrolling
@@ -284,21 +328,6 @@
     .k-rtl,
     [dir="rtl"] {
 
-        .k-menu-link {
-            > .k-icon:not(.k-menu-expand-arrow),
-            > .k-image,
-            > .k-sprite {
-                margin-left: $menu-item-icon-spacing;
-                margin-right: 0;
-            }
-        }
-
-        .k-menu-expand-arrow {
-            right: unset;
-            left: $icon-spacing;
-        }
-
-
         // Orientation -- horizontal
         .k-menu-horizontal {
 

package/scss/menu/_variables.scss

@@ -33,7 +33,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: 0px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;
@@ -113,6 +113,18 @@ $kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-
 $kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
 $kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
 
+/// The start margin of the menu item expand icon.
+/// @group menu-popup-item
+$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
+$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
+$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
+
+/// The end margin of the menu item expand icon.
+/// @group menu-popup-item
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
+
 /// The spacing between the menu items in popup.
 /// @group menu-popup-item
 $kendo-menu-popup-item-spacing: 0px !default;

package/scss/multiselect/_layout.scss

@@ -1,3 +1,6 @@
-@include exports("multiselect/layout") {
+@include exports( "multiselect/layout" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }

package/scss/multiselect/_theme.scss

@@ -1,3 +1,6 @@
-@include exports("multiselect/theme") {
+@include exports( "multiselect/theme" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }

package/scss/numerictextbox/_layout.scss

@@ -1,6 +1,16 @@
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
+
+    }
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox; }
 
 }

package/scss/numerictextbox/_theme.scss

@@ -1,6 +1,6 @@
 @include exports( "numerictextbox/theme" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
 
 }

package/scss/orgchart/_variables.scss

@@ -40,10 +40,10 @@ $orgchart-card-shadow: $card-shadow !default;
 $orgchart-card-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size-lg !default;
+$orgchart-card-title-font-size: null !default;
 
 $orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: $font-size !default;
+$orgchart-card-subtitle-font-size: null !default;
 
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;

package/scss/pager/_variables.scss

@@ -62,5 +62,5 @@ $pager-number-focus-opacity: .12 !default;
 $pager-number-focus-bg: transparent !default;
 $pager-number-focus-shadow: inset 0 0 0 2px rgba($pager-number-selected-bg, $pager-number-focus-opacity) !default;
 
-$pager-input-width: 3em !default;
+$pager-input-width: 5em !default;
 $pager-dropdown-width: 5em !default;

package/scss/pdf-viewer/_layout.scss

@@ -86,36 +86,43 @@
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-spacing;
+        padding: $pdf-viewer-search-dialog-padding;
 
         .k-search-container {
             display: flex;
+            gap: $pdf-viewer-search-dialog-spacing;
+            flex-flow: row nowrap;
             flex: 0 0 auto;
             justify-content: flex-start;
             align-items: center;
 
-            .k-match-case-button {
-                display: inline-flex;
-                height: $pdf-viewer-search-dialog-input-button-height;
-                justify-content: center;
+            .k-search-dialog-draghandle {
+                cursor: move;
+                margin-left: 0;
             }
 
-            .k-search-matches {
-                display: inline-block;
-                min-width: $pdf-viewer-search-dialog-matches-width;
-                margin: 0 $pdf-viewer-search-dialog-spacing 0 $pdf-viewer-search-dialog-button-spacing;
-                vertical-align: middle;
-            }
+            .k-textbox {
+                width: 10em;
+                flex: none;
 
-            > .k-button {
-                margin-left: $pdf-viewer-search-dialog-button-spacing;
+                .k-button {
+                    border-width: 0;
+                }
             }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
+            .k-search-matches {
+                flex: 1 1 auto;
             }
         }
     }
 
+
+    // IE
+    .k-ie .k-pdf-viewer-search-dialog {
+
+        .k-search-container > * + * {
+            margin-left: $pdf-viewer-search-dialog-spacing;
+        }
+    }
+
 }

package/scss/pdf-viewer/_variables.scss

@@ -24,11 +24,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $kendo-input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 

package/scss/radio/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 

package/scss/radio/_layout.scss

@@ -14,6 +14,7 @@
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -97,6 +98,25 @@
         @include disabled( $disabled-styling );
     }
 
+
+    // Radio wrap
+    .k-radio-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
     .k-radio + .k-radio-label {
         display: inline;
     }
@@ -118,7 +138,7 @@
 
         // Hide empty label
         &:empty {
-            display: none;
+            display: none !important; // sass-lint:disable-line no-important
         }
 
         .k-ripple {
@@ -156,25 +176,32 @@
 
     // Radio list
     .k-radio-list {
-        margin: $kendo-radio-list-margin;
-        padding: $kendo-radio-list-padding;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
         list-style: none;
-
-        .k-radio-item {
-            padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
-        }
     }
-
-    .k-list-horizontal {
-        .k-radio-item {
-            display: inline-block;
-            margin: 0 $kendo-radio-list-horizontal-item-margin-x 0 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
+    .k-radio-item,
+    .k-radio-list-item {
+        padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $spacing, 1 );
+
+        .k-radio-label {
+            line-height: inherit;
         }
     }
+    .k-radio-list-horizontal,
+    .k-radio-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: $kendo-radio-list-spacing;
+    }
 
     // RTL
     .k-rtl,
@@ -196,17 +223,6 @@
             margin-right: 0;
             margin-left: $kendo-radio-label-margin-x;
         }
-
-        .k-list-horizontal {
-            .k-radio-item {
-                margin-right: 0;
-                margin-left: $kendo-radio-list-horizontal-item-margin-x;
-
-                &:last-child {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 
     .k-ripple-container {

package/scss/radio/_variables.scss

@@ -132,21 +132,15 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Radio list
 
-/// The list margin of radio button.
-/// @group radio
-$kendo-radio-list-margin: 0px !default;
-/// The list padding of radio button.
+/// The horizontal list item margin of radio button.
 /// @group radio
-$kendo-radio-list-padding: 0px !default;
+$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
 /// The horizontal list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
 /// The vertical list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal list item margin of radio button.
-/// @group radio
-$kendo-radio-list-horizontal-item-margin-x: 32px !default;
 
 
 // Radio ripple

package/scss/scheduler/_layout.scss

@@ -937,7 +937,7 @@
         .k-widget.k-recur-month,
         .k-widget.k-recur-weekday,
         .k-widget.k-recur-weekday-offset {
-            width: 9em;
+            width: 10em;
         }
 
     }

package/scss/spreadsheet/_layout.scss

@@ -89,14 +89,10 @@
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 5em;
         }
     }
 
@@ -258,6 +254,7 @@
         font-family: Arial, Verdana, Sans-serif;
         flex: 1;
         position: relative;
+        overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
         .k-state-disabled {
@@ -616,33 +613,45 @@
         }
 
         // Details
-        .k-details {
+        .k-details,
+        .k-expander {
             padding: 0;
             border-width: 1px 0 0;
             border-style: solid;
             border-color: inherit;
         }
-        .k-details-summary {
-            padding: $padding-y;
+        .k-expander {
+            border: 0;
+            background: inherit;
+        }
+        .k-details-summary,
+        .k-columnmenu-item {
+            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            display: flex;
+            align-items: center;
             cursor: pointer;
 
             > .k-icon {
                 margin-right: $padding-y;
             }
         }
-        .k-details-content {
-            padding: $padding-y $padding-x $padding-y $filter-menu-padding-left;
-
-            > .k-widget {
-                width: 100%;
-                margin-bottom: 3px;
-            }
+        .k-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
+                width: min-content;
+                align-self: flex-start;
             }
         }
+
+        .k-actions {
+            margin: 0;
+            padding: 0;
+        }
     }
 
 }

package/scss/table/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("table/layout") {
+@include exports( "table/layout" ) {
 
     // Table
     .k-table {
@@ -30,12 +30,11 @@
     // Table native parts
     .k-table-thead,
     .k-table-tbody,
-    .k-table-tfoot {
-        text-align: inherit;
-    }
+    .k-table-tfoot,
     .k-table-row,
     .k-table-alt-row {
         border-color: inherit;
+        text-align: inherit;
     }
     .k-table-th,
     .k-table-td {
@@ -56,6 +55,9 @@
             border-left-width: 0;
         }
     }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
 
 
     // Table header
@@ -74,8 +76,25 @@
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
+    .k-table-header,
+    .k-table-header-wrap {
+        > .k-table {
+            margin-bottom: -1px;
+        }
+    }
+    .k-table-group-sticky-header {
+        flex: none;
+
+        .k-table-th {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
 
 
     // Table list
@@ -153,7 +172,8 @@
 
 
     // Virtualization
-    .k-virtual-table .k-table-row {
+    .k-virtual-table .k-table-row,
+    .k-virtual-table .k-table-group-row {
         position: absolute;
         width: 100%;
     }
@@ -186,6 +206,7 @@
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
 

package/scss/table/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("table/theme") {
+@include exports( "table/theme" ) {
 
     // Table
     .k-table,
@@ -11,7 +11,8 @@
 
     // Table header
     .k-table-thead,
-    .k-table-header {
+    .k-table-header,
+    .k-table-group-sticky-header {
         border-color: $kendo-table-header-border;
         color: $kendo-table-header-text;
         background-color: $kendo-table-header-bg;