@progress/kendo-theme-default 5.0.0-beta.1 → 5.0.0-beta.5

package/scss/grid/_layout.scss

@@ -1,6 +1,8 @@
 @include exports("grid/layout") {
 
-    $filter-rows-span-size: calc( #{$line-height-em} + #{$kendo-input-padding-y * 2} + #{$kendo-input-border-width * 2}) !default;
+    // TODO: see why we need this variable
+    // $filter-rows-span-size: calc( #{$line-height-em} + #{$kendo-input-padding-y-md * 2} + #{$kendo-input-border-width * 2}) !default;
+    $filter-rows-span-size: null !default;
 
     $grid-group-dropclue-size: 6px;
     $grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
@@ -13,7 +15,6 @@
     // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
     $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
 
-    $grid-form-component-vertical-align: middle !default;
     $grid-hierarchy-col-width: ($icon-size * 2) !default;
 
     $grid-group-indicator-border-radius: $border-radius !default;
@@ -499,10 +500,6 @@
         }
     }
 
-    .k-group-indicator {
-        margin-right: ( $grid-group-indicator-gap / 2 );
-    }
-
     .k-group-indicator + .k-group-indicator {
         margin-left: ( $grid-group-indicator-gap / 2 );
     }
@@ -712,14 +709,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;
@@ -748,28 +737,28 @@
 
         > span,
         .k-filtercell-wrapper {
+            width: 100%;
             display: flex;
             flex-flow: row nowrap;
             align-items: center;
             gap: ( $grid-cell-padding-y / 2 );
             flex: 1 1 auto;
 
-            > .k-widget,
-            > .k-textbox {
-                width: 100%;
-            }
-
-            .k-colorpicker,
-            .k-dropdown-operator {
-                width: min-content;
-                flex: none;
-            }
-
             > .k-button {
                 flex: none;
             }
         }
 
+        .k-input,
+        .k-picker {
+            width: auto;
+            flex: 1 1 auto;
+        }
+        .k-color-picker,
+        .k-dropdown-operator {
+            width: min-content;
+            flex: none;
+        }
     }
 
     // Grid content
@@ -803,6 +792,18 @@
     }
 
 
+    // Checkboxes
+    .k-grid th,
+    .k-grid td {
+        > .k-radio,
+        > .k-radio-wrap,
+        > .k-checkbox,
+        > .k-checkbox-wrap {
+            vertical-align: top;
+        }
+    }
+
+
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
@@ -818,13 +819,19 @@
         > select,
         > .k-widget:not(.k-switch) {
             width: 100%;
-            vertical-align: $grid-form-component-vertical-align;
+            vertical-align: middle;
             box-sizing: border-box;
         }
+        > .k-radio,
+        > .k-checkbox,
+        > .k-radio-wrap,
+        > .k-checkbox-wrap {
+            vertical-align: middle;
+        }
     }
 
     .k-grid .k-command-cell > .k-button {
-        vertical-align: $grid-form-component-vertical-align;
+        vertical-align: middle;
     }
     .k-grid .k-command-cell > .k-button + .k-button {
         margin-left: $grid-command-cell-button-spacing;
@@ -1203,83 +1210,80 @@
 
 @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;
+            display: flex;
+            flex-flow: row nowrap;
+        }
     }
 
     .k-filter-selected-items {
@@ -1303,17 +1307,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 > & {
+            max-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;
@@ -1329,10 +1364,17 @@
     }
 
     .k-column-list-item {
-        position: relative;
-        display: block;
         margin: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: 4px;
         cursor: pointer;
+        position: relative;
+
+        .k-checkbox-label {
+            margin: 0;
+        }
     }
 
     .k-columns-items-wrap {
@@ -1358,16 +1400,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;
@@ -1386,22 +1418,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/_theme.scss

@@ -144,12 +144,6 @@
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
             // Selected hover
             .k-state-selected:hover td,
             .k-state-selected.k-state-hover td {

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 !default;
+$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !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
@@ -53,6 +54,7 @@
 
 // Form requirements
 @import "calendar/_index.scss";
+@import "timeselector/_index.scss";
 
 
 // Augmented forms
@@ -68,7 +70,6 @@
 @import "timepicker/_index.scss";
 @import "datetimepicker/_index.scss";
 @import "daterangepicker/_index.scss";
-@import "datetime/_index.scss";
 @import "dropdowngrid/_index.scss";
 @import "dropdownlist/_index.scss";
 @import "dropdowntree/_index.scss";

package/scss/input/_layout.scss

@@ -6,7 +6,7 @@
         @include border-radius( $kendo-input-border-radius );
         margin: 0;
         padding: 0;
-        width: 100%;
+        width: $kendo-input-default-width;
         min-width: 0;
         border-width: $kendo-input-border-width;
         border-style: solid;
@@ -14,10 +14,12 @@
         font-family: $kendo-input-font-family;
         font-size: $kendo-input-font-size;
         line-height: $kendo-input-line-height;
+        text-align: start;
         box-shadow: none;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: stretch;
+        vertical-align: middle;
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -32,10 +34,25 @@
             outline: 0;
             box-shadow: none;
         }
+
+        // fix for Safari
+        & > * {
+            margin: 0;
+        }
     }
+
+
+    // Input
+    .k-input {}
     input.k-input {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
     }
+
+
+    // Picker
+    .k-picker {
+        cursor: pointer;
+    }
     select.k-picker {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
         appearance: auto;
@@ -77,6 +94,7 @@
         }
     }
     span.k-input-inner {
+        white-space: nowrap;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -95,6 +113,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 +129,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);
     }
@@ -112,8 +139,9 @@
     .k-icon-picker {
         .k-input-inner {
             padding: $kendo-input-padding-y;
-            width: $kendo-input-inner-calc-height;
-            height: $kendo-input-inner-calc-height;
+            // TODO we need better way
+            // width: $kendo-input-inner-calc-height;
+            // height: $kendo-input-inner-calc-height;
             justify-content: center;
         }
     }
@@ -122,6 +150,7 @@
     // Input prefix and suffix
     .k-input-prefix,
     .k-input-suffix {
+        border-color: inherit;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -133,13 +162,24 @@
     }
 
 
+    // Input separator
+    .k-input-separator {
+        margin: 0;
+        width: 0;
+        height: $icon-size;
+        border-width: 0 0 0 1px;
+        border-style: solid;
+        border-color: inherit;
+        align-self: center;
+    }
+
+
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
     .k-input-loading-icon {
-        width: $kendo-input-icon-width;
-        height: $kendo-input-icon-height;
         flex: none;
+        align-self: center;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -149,11 +189,10 @@
 
     // Clear value
     .k-clear-value {
-        width: $kendo-input-icon-width;
-        height: $kendo-input-icon-height;
         outline: 0;
         color: $kendo-input-clear-value-text;
         flex: none;
+        align-self: center;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -165,6 +204,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
@@ -178,7 +221,11 @@
 
         > .k-button-icon {
             min-width: auto !important; // sass-lint:disable-line no-important
-            min-height: 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 {
@@ -227,6 +274,24 @@
     }
 
 
+    // Legacy wrappers
+    .k-picker-wrap,
+    .k-dropdown-wrap,
+    .k-dateinput-wrap,
+    .k-multiselect-wrap,
+    .k-numeric-wrap {
+        width: 100%;
+        border-width: 0;
+        border-color: inherit;
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: hidden;
+        position: relative;
+    }
+
+
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
@@ -253,6 +318,7 @@
         $_padding-y: map-get( $size-props, padding-y );
         $_font-size: map-get( $size-props, font-size );
         $_line-height: map-get( $size-props, line-height );
+        $_icon-size: map-get( $size-props, icon-size );
 
         .k-input-#{$size},
         .k-picker-#{$size} {
@@ -262,8 +328,22 @@
             .k-input-inner {
                 padding: $_padding-y $_padding-x;
             }
-        }
 
+            .k-input-icon,
+            .k-input-validation-icon,
+            .k-input-loading-icon,
+            .k-clear-value {
+                width: $_icon-size;
+                height: $_icon-size;
+            }
+
+            &.k-icon-picker .k-input-inner {
+                width: calc( #{$_line-height * 1em} );
+                height: calc( #{$_line-height * 1em} );
+                padding: $_padding-y;
+                box-sizing: content-box;
+            }
+        }
     }
 
 }