@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

package/scss/grid/_layout.scss

@@ -1,19 +1,20 @@
 @include exports("grid/layout") {
 
-    $filter-rows-span-size: calc( #{$line-height-em} + #{$input-padding-y * 2} + #{$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;
-    $grid-group-dropclue-height: $button-calc-size !default;
+    $grid-group-dropclue-height: $kendo-button-calc-size !default;
     $grid-group-dropclue-top: 3px !default;
 
     $grid-row-inner-height: calc( #{$line-height-em} + #{$table-cell-padding-y * 2} );
     // $grid-row-half-inner-height: calc( #{$line-height-em / 2} + #{$table-cell-padding-y} );
 
     // 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} - (#{$button-calc-size} - #{$line-height-em}) / 2 ) !default;
+    $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;
@@ -27,7 +28,7 @@
     $grid-sorted-icon-spacing: calc( #{$padding-x} - 1px ) !default;
 
     // helper variables
-    $grid-filterable-icon-spacing: calc( #{$button-calc-size} + #{$grid-header-menu-icon-spacing} );
+    $grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$grid-header-menu-icon-spacing} );
 
     .k-grid {
         border-width: $grid-border-width;
@@ -320,11 +321,6 @@
                 border-right-width: 0;
             }
 
-            .k-filtercell-operator {
-                margin-left: 0;
-                margin-right: $table-cell-padding-y / 2;
-            }
-
             .k-dirty {
                 border-color: currentColor currentColor transparent transparent;
                 left: auto;
@@ -416,12 +412,6 @@
     }
 
 
-    // Grid search
-    .k-grid-search {
-        width: $grid-search-width;
-    }
-
-
     // Grouping header
     .k-grouping-header {
         padding: $grid-grouping-header-padding-y $grid-grouping-header-padding-x;
@@ -435,7 +425,7 @@
 
         &::before {
             content: "";
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             display: inline-block;
             vertical-align: middle;
         }
@@ -468,7 +458,7 @@
     .k-group-indicator {
         @include border-radius( $grid-group-indicator-border-radius );
         margin: 0;
-        padding: $button-padding-y $button-padding-x;
+        padding: $kendo-button-padding-y $kendo-button-padding-x;
         border-width: 1px;
         border-style: solid;
         display: inline-flex;
@@ -510,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 );
     }
@@ -639,7 +625,7 @@
             padding-right: $grid-filterable-icon-spacing;
 
             .k-ie & {
-                padding-right: calc( #{ $button-calc-size } + #{ $grid-header-menu-icon-spacing });
+                padding-right: calc( #{ $kendo-button-calc-size } + #{ $grid-header-menu-icon-spacing });
             }
         }
 
@@ -649,9 +635,9 @@
 
         .k-grid-filter,
         .k-header-column-menu {
-            padding: $button-padding-y;
-            width: $button-calc-size;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             outline: 0;
             line-height: $form-line-height;
@@ -661,17 +647,9 @@
             justify-content: center;
             position: absolute;
             right: $grid-header-menu-icon-spacing;
-            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $button-inner-calc-size / 2 } );
+            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $kendo-button-inner-calc-size / 2 } );
             z-index: 1;
 
-            .k-ie & {
-                position: static;
-                float: right;
-                margin-top: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-bottom: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-right: calc( -1 * #{ $button-calc-size });
-            }
-
             &:hover {
                 cursor: pointer;
             }
@@ -731,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;
@@ -757,77 +727,38 @@
         .k-multiselect {
             height: auto;
         }
-
-        .k-filtercell .k-widget.k-sized-input {
-            flex: 0 1 auto;
-        }
     }
 
     .k-filtercell {
         width: auto;
         display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
 
         > 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;
 
-            > label {
-                vertical-align: middle;
-            }
-        }
-
-        .k-filtercell-wrapper > .k-widget {
-            width: 100%;
-        }
-
-        > span {
-            .k-button {
-                visibility: visible;
-                pointer-events: all;
-            }
-
-            .k-button,
-            .k-dropdown-operator {
-                margin-left: $grid-cell-padding-y / 2;
-
-                .k-ie & {
-                    min-width: $button-inner-calc-size;
-                }
-            }
-
-            .k-widget {
-                width: auto;
-            }
-        }
-
-        .k-filtercell-operator {
-            > .k-button.k-clear-button-visible {
-                visibility: visible;
-                height: $button-calc-size;
-            }
-
-            > .k-button:not(.k-clear-button-visible) {
-                visibility: hidden;
-                pointer-events: none;
+            > .k-button {
+                flex: none;
             }
         }
 
-        .k-filtercell-operator {
-            margin-left: $grid-cell-padding-y / 2;
-        }
-
-        .k-widget:not(.k-dropdown-operator),
-        .k-filtercell-wrapper > .k-textbox {
-            display: flex;
+        .k-input,
+        .k-picker {
+            width: auto;
             flex: 1 1 auto;
         }
-
-        .k-filtercell-wrapper > .k-textbox {
-            width: 100%;
-            min-width: 0;
+        .k-color-picker,
+        .k-dropdown-operator {
+            width: min-content;
+            flex: none;
         }
-
     }
 
     // Grid content
@@ -861,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,
@@ -874,16 +817,21 @@
 
         > input:not([type="checkbox"]):not([type="radio"]),
         > select,
-        > .k-textbox,
         > .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;
@@ -1056,7 +1004,7 @@
         }
 
         .k-grid-header .k-grid-column-menu {
-            z-index: 5;
+            z-index: 1;
         }
     }
 
@@ -1114,20 +1062,21 @@
     }
 
     .k-grid-norecords-template {
+        box-sizing: border-box;
+        margin: 0 auto;
         width: 20em;
         height: 4em;
-        line-height: 4em;
-        margin: 0 auto;
         border: 1px solid;
+        line-height: 4em;
     }
 
     .k-header > .k-cell-inner {
-        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
     }
 
     .k-filterable {
         > .k-cell-inner {
-            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
 
             .k-link {
                 padding-right: 0;
@@ -1262,79 +1211,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-radio-list,
-        .k-textbox,
-        .k-searchbox {
-            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-widget.k-filter-and {
-            width: 6em;
+        kendo-grid-filter-menu-input-wrapper > :first-child {
+            margin-top: 0;
         }
+    }
 
-        .k-widget.k-button-group {
-            width: auto;
-            display: inline-flex;
-        }
+    .k-filter-menu.k-popup,
+    .k-grid-filter-popup.k-popup {
 
-        .k-switch {
-            width: $switch-size;
-            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 {
@@ -1358,17 +1308,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;
@@ -1384,10 +1365,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 {
@@ -1413,16 +1401,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;
@@ -1441,22 +1419,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 {
@@ -1466,7 +1428,7 @@
 
         .k-header > .k-cell-inner {
             margin-right: (-1 * $grid-cell-padding-x);
-            margin-left: calc(-1 * calc( #{$button-calc-size} - #{$grid-cell-padding-x}));
+            margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
 
             .k-sort-order {
                 margin-right: $grid-sorting-index-spacing-x;
@@ -1477,7 +1439,7 @@
         .k-filterable {
             > .k-cell-inner {
                 margin-right: (-1 * $grid-cell-padding-x);
-                margin-left: calc(-1 * #{$button-calc-size});
+                margin-left: calc(-1 * #{$kendo-button-calc-size});
 
                 .k-link {
                     padding-right: $grid-header-padding-x;

package/scss/grid/_theme.scss

@@ -73,8 +73,8 @@
         }
 
         // Hover state
-        tbody tr:hover,
-        tbody tr.k-state-hover {
+        tbody tr:not(.k-detail-row):hover,
+        tbody tr:not(.k-detail-row).k-state-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
@@ -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 {
@@ -188,8 +182,8 @@
         .k-header-column-menu,
         .k-hierarchy-cell .k-icon {
             &:hover {
-                color: $button-hovered-text;
-                background-color: $button-hovered-bg;
+                color: $kendo-button-hover-text;
+                background-color: $kendo-button-hover-bg;
             }
             &:focus,
             &.k-state-focus,
@@ -372,20 +366,20 @@
     .k-column-list-item:hover,
     .k-columnmenu-item:hover {
         @include fill(
-            $list-item-hovered-text,
-            $list-item-hovered-bg
+            $kendo-list-item-hover-text,
+            $kendo-list-item-hover-bg
         );
     }
     .k-columnmenu-item:focus,
     .k-columnmenu-item.k-state-focus {
-        @include box-shadow( $list-item-focused-shadow );
+        @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-columnmenu-item {
         &.k-state-selected {
             @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
             );
         }
     }
@@ -402,28 +396,28 @@
 
             .k-item {
                 @include fill(
-                    $list-item-text,
-                    $list-item-bg
+                    $kendo-list-item-text,
+                    $kendo-list-item-bg
                 );
 
                 &:hover,
                 &.k-state-hover {
                     @include fill(
-                        $list-item-hovered-text,
-                        $list-item-hovered-bg
+                        $kendo-list-item-hover-text,
+                        $kendo-list-item-hover-bg
                     );
                 }
 
                 &.k-state-selected {
                     @include fill(
-                        $list-item-selected-text,
-                        $list-item-selected-bg
+                        $kendo-list-item-selected-text,
+                        $kendo-list-item-selected-bg
                     );
                 }
 
                 &:focus,
                 &.k-state-focused {
-                    @include box-shadow( $list-item-focused-shadow );
+                    @include box-shadow( $kendo-list-item-focus-shadow );
                 }
             }
         }