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

package/scss/grid/_layout.scss

@@ -710,14 +710,6 @@
         padding: 4px 8px;
     }
 
-    .k-grid-columnmenu-popup {
-        width: 230px;
-
-        &.k-popup {
-            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
-        }
-    }
-
     // Filter row
     .k-filter-row {
         line-height: $form-line-height;
@@ -1190,83 +1182,83 @@
 
 @include exports( "filtermenu/layout" ) {
 
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup {
-
-        .k-filter-menu-container {
-            width: $grid-filter-menu-width;
-        }
+    // Filter menu
+    .k-filter-menu-popup {
+        width: $grid-column-menu-width;
     }
+    .k-filter-menu {
+        box-sizing: border-box;
+    }
+    .k-filter-menu-container {
+        padding: map-get( $spacing, 2 );
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        gap: map-get( $spacing, 2 );
 
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup,
-    .k-popup .k-filter-menu,
-    .k-popup .k-grid-filter-popup {
-        .k-multicheck-wrap {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-
-            .k-item {
-                padding: $grid-column-menu-list-item-padding-y 0;
-            }
-
-            .k-check-all-wrap {
-                padding-bottom: ($grid-column-menu-list-item-padding-y * 2);
-                border-bottom-width: $grid-filter-menu-check-all-border-bottom-width;
-                border-bottom-style: solid;
-            }
+        .k-filter-and {
+            width: min-content;
+            align-self: start;
         }
 
-        .k-filter-help-text {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        .k-actions {
+            margin: 0;
+            padding: 0;
         }
 
-        .k-filter-selected-items {
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+        // Angular specific
+        kendo-numeric-filter-menu,
+        kendo-grid-string-filter-menu,
+        kendo-grid-date-filter-menu,
+        kendo-grid-filter-menu-input-wrapper {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
+            gap: map-get( $spacing, 2 );
         }
     }
+    .k-ie .k-filter-menu-container {
+        > * { margin-top: map-get( $spacing, 2 ); }
+        > :first-child { margin-top: 0; }
 
-    .k-filter-menu {
-        $item-spacing: $spacer-y / 2;
-        $form-padding: $spacer-y;
-        $form-padding-y: $form-padding - $item-spacing;
-
-        .k-filter-menu-container {
-            box-sizing: border-box;
-        }
-
-        .k-widget,
-        .k-textbox,
-        .k-dropdown,
-        .k-numerictextbox,
-        .k-radio-list,
-        .k-datepicker,
-        .k-input {
-            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-            width: calc( 100% - ( 2 * #{$grid-filter-menu-item-spacing-x} ) );
-            box-sizing: border-box;
-            display: flex;
+        // Angular specific
+        .k-filter-and,
+        kendo-grid-filter-menu-input-wrapper > * {
+            margin-top: map-get( $spacing, 2 );
         }
-
-        .k-switch {
-            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
-            box-sizing: border-box;
-            display: flex;
+        kendo-grid-filter-menu-input-wrapper > :first-child {
+            margin-top: 0;
         }
+    }
 
-        .k-widget.k-filter-and {
-            width: 6em;
-        }
+    .k-filter-menu.k-popup,
+    .k-grid-filter-popup.k-popup {
 
-        .k-widget.k-button-group {
-            width: auto;
-            display: inline-flex;
+        .k-filter-menu-container {
+            width: $grid-column-menu-width;
         }
     }
 
-    .k-multicheck-wrap {
+    .k-popup .k-multicheck-wrap {
+        margin: 0;
+        padding: 0;
         max-height: 300px;
+        font-size: $kendo-list-font-size;
+        line-height: $kendo-list-line-height;
         white-space: nowrap;
         overflow: auto;
+        list-style: none;
+
+        .k-item,
+        .k-check-all-wrap {
+            padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
+
+            > .k-checkbox-label {
+                line-height: inherit;
+                display: block;
+            }
+        }
     }
 
     .k-filter-selected-items {
@@ -1290,17 +1282,48 @@
         .k-detail-row {
             display: none !important;
         }
-
-        input.k-input,
-        span.k-input,
-        input.k-textbox {
-            width: 0 !important;
-        }
     }
 
 }
 
 @include exports("columnmenu/layout") {
+
+    // Column menu
+    .k-column-menu-popup,
+    .k-grid-columnmenu-popup {
+        width: $grid-column-menu-width;
+        box-sizing: border-box;
+
+        &.k-popup {
+            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
+        }
+        .k-popup > & {
+            width: 100%;
+        }
+
+        .k-actions {
+            margin: 0;
+        }
+
+    }
+    .k-column-menu {
+        box-sizing: border-box;
+
+        .k-menu:not(.k-context-menu) {
+            font-weight: 400;
+        }
+
+        .k-expander {
+            border: 0;
+            background: inherit;
+
+            .k-columnmenu-item {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+
     .k-column-list {
         padding: 0;
         margin: 0;
@@ -1345,16 +1368,6 @@
         overflow: hidden;
     }
 
-    .k-filter-menu,
-    .k-column-list-wrapper,
-    .k-columnmenu-item-content {
-
-        .k-actions {
-            margin-top: ($grid-filter-menu-item-spacing-y / 2);
-            padding: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x;
-        }
-    }
-
     .k-column-menu-group-header {
         padding: $grid-column-menu-group-header-padding-y $grid-column-menu-group-header-padding-x;
         display: flex;
@@ -1373,22 +1386,6 @@
         flex: 1 1 auto;
     }
 
-    .k-column-menu {
-        .k-menu:not(.k-context-menu) {
-            font-weight: 400;
-        }
-
-        .k-expander {
-            border: 0;
-            background: inherit;
-
-            .k-columnmenu-item {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-
     [dir="rtl"],
     .k-rtl {
         .k-columnmenu-item > .k-icon {

package/scss/grid/_variables.scss

@@ -135,21 +135,21 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 $grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
 $grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
 
-$grid-filter-menu-width: 230px !default;
+$grid-column-menu-width: 230px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 2 ) !default;
 $grid-filter-menu-item-spacing-y: $grid-filter-menu-item-spacing-x !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y-sm !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x !default;
-$grid-column-menu-item-padding-y: $padding-y !default;
+$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: $padding-y-lg !default;

package/scss/imageeditor/_layout.scss

@@ -50,16 +50,16 @@
 
     // Action Pane
     .k-imageeditor-action-pane {
+        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
+        width: $imageeditor-action-pane-width;
         border-width: 0;
         border-left-width: $imageeditor-content-border-width;
         border-style: solid;
         border-color: inherit;
-        flex-shrink: 0;
+        box-sizing: border-box;
+        flex: none;
         overflow-y: auto;
     }
-    .k-imageeditor-action-pane > .k-form {
-        padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
-    }
 
 
     // Crop Tool
@@ -149,10 +149,6 @@
             flex-direction: row;
             align-self: flex-start;
         }
-
-        .k-imageeditor-action-pane {
-            flex: 0 0 auto;
-        }
     }
 
 }

package/scss/imageeditor/_variables.scss

@@ -13,6 +13,7 @@ $imageeditor-content-border-width: 1px !default;
 
 $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
 $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;

package/scss/index.scss

@@ -21,6 +21,7 @@
 @import "popup/_index.scss";
 @import "ripple/_index.scss";
 @import "table/_index.scss";
+@import "virtual-scroller/_index.scss";
 
 
 // Indicators

package/scss/input/_layout.scss

@@ -95,6 +95,14 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+    .k-input-value-text::before {
+        content: "\200b";
+        width: 0px;
+        overflow: hidden;
+        flex: none;
+        display: inline-block;
+        vertical-align: top;
+    }
 
 
     // Input multiple values
@@ -103,6 +111,7 @@
         padding: $kendo-input-values-margin-y $kendo-input-values-margin-x;
         cursor: text;
     }
+    .k-input-values > .k-searchbar,
     .k-input-values > .k-input-inner {
         margin: (-$kendo-input-values-margin-y) (-$kendo-input-values-margin-x);
     }
@@ -177,6 +186,10 @@
         color: $kendo-input-clear-value-hover-text;
         opacity: $kendo-input-clear-value-hover-opacity;
     }
+    .k-clear-value:focus-visible {
+        outline: 1px dotted;
+        outline-offset: -1px;
+    }
 
 
     // Input button
@@ -192,6 +205,10 @@
             min-width: auto !important; // sass-lint:disable-line no-important
             min-height: auto !important; // sass-lint:disable-line no-important
         }
+
+        &:focus {
+            box-shadow: none;
+        }
     }
     .k-picker .k-input-button {
         color: inherit;

package/scss/input/_variables.scss

@@ -13,17 +13,17 @@ $kendo-input-line-height: $line-height !default;
 
 $kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
 $kendo-input-padding-y-sm: ($kendo-input-padding-y / 2) !default;
-$kendo-input-font-size-sm: $font-size !default;
+$kendo-input-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !default;
 
 $kendo-input-padding-x-md: $kendo-input-padding-x !default;
 $kendo-input-padding-y-md: $kendo-input-padding-y !default;
-$kendo-input-font-size-md: $font-size !default;
+$kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
 $kendo-input-padding-x-lg: ($kendo-input-padding-x * 1.5) !default;
 $kendo-input-padding-y-lg: ($kendo-input-padding-y * 1.5) !default;
-$kendo-input-font-size-lg: $font-size !default;
+$kendo-input-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;
 
 $kendo-input-sizes: (

package/scss/list/_index.scss

@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

package/scss/list/_layout.scss

@@ -32,6 +32,9 @@
         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;
@@ -67,7 +70,7 @@
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
         outline: none;
-        cursor: default;
+        cursor: pointer;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -78,6 +81,10 @@
         transition-duration: 200ms;
         transition-timing-function: ease;
 
+        .k-checkbox-wrap {
+            align-self: flex-start;
+        }
+
         &.k-first::before {
             content: "";
             border-width: 1px 0 0;
@@ -143,7 +150,8 @@
         position: absolute;
         width: 100%;
     }
-    .k-virtual-list .k-list-item-text {
+    .k-virtual-list .k-list-item-text,
+    .k-virtual-list .k-list-header-text {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

package/scss/listbox/_variables.scss

@@ -1,7 +1,7 @@
 // Listbox
 $listbox-margin: $padding-x !default;
 $listbox-button-margin: $padding-x !default;
-$listbox-width: 12.4em !default;
+$listbox-width: 10em !default;
 $listbox-default-height: 200px !default;
 
 $listbox-border-width: 1px !default;

package/scss/listview/_layout.scss

@@ -3,7 +3,7 @@
     .k-listview {
         margin: 0;
         padding: 0;
-        border-width: $listview-border-width;
+        border-width: 0;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -23,7 +23,6 @@
     // Header
     .k-listview-header {
         border-width: 0;
-        border-bottom-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -32,7 +31,7 @@
     }
 
 
-    // Listview contnet
+    // Listview content
     .k-listview-content {
         margin: 0;
         padding: 0;
@@ -87,7 +86,6 @@
     // Listview footer
     .k-listview-footer {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -99,14 +97,9 @@
     // Listview pager
     .k-listview-pager {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-color: inherit;
         font: inherit;
     }
-    .k-listview-pager-top {
-        border-top-width: 0;
-        border-bottom-width: $listview-border-width;
-    }
     .k-listview-bordered > .k-listview-pager-top {
         border-bottom-width: $listview-border-width;
     }

package/scss/map/_layout.scss

@@ -72,21 +72,38 @@
 
 
         // Buttons
+        .k-button {
+            padding: 0;
+            width: auto;
+            height: auto;
+            line-height: 1;
+            box-shadow: none;
+            position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
+        }
+        .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
             right: $map-navigator-padding;
             top: 50%;
         }
+        .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
             bottom: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
             left: $map-navigator-padding;

package/scss/maskedtextbox/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
     .k-maskedtextbox {}

package/scss/maskedtextbox/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
     // Masked textbox
     .k-maskedtextbox {}

package/scss/mediaplayer/_layout.scss

@@ -48,6 +48,11 @@
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown-list {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;