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

package/scss/forms/_layout.scss

@@ -106,12 +106,15 @@
         }
 
         .k-form-field,
-        .k-form-buttons {
+        .k-daterangepicker .k-textbox-container {
             margin-top: $form-field-margin-top;
         }
 
-        > &:first-child {
-            margin-top: 0;
+        > *,
+        .k-daterangepicker .k-textbox-container {
+            &:first-child {
+                margin-top: 0;
+            }
         }
 
 
@@ -150,15 +153,9 @@
 
     // Form Buttons Container
     .k-form-buttons {
-        display: flex;
-
-        > * {
-            margin-right: $form-button-margin-x;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+        @extend .k-actions;
+        margin-top: 2 * $form-field-margin-top;
+        padding: 0;
     }
 
     // Form Hint/Error Messages
@@ -215,28 +212,12 @@
             max-width: $horizontal-form-field-wrap-max-width;
             flex: 1 1 auto;
         }
-
-        .k-form-buttons {
-            margin-top: 2 * $form-field-margin-top;
-        }
     }
 
     // RTL Adjustments
     .k-form {
         [dir="rtl"],
         .k-rtl & {
-            .k-form-buttons,
-            &.k-form-buttons {
-                > * {
-                    margin-right: 0;
-                    margin-left: $form-button-margin-x;
-
-                    &:last-child {
-                        margin-left: 0;
-                    }
-                }
-            }
-
             .k-label-optional {
                 margin-left: 0;
                 margin-right: $label-optional-margin-x;
@@ -344,40 +325,6 @@
     }
 
 
-    // Tabstrip
-    .k-edit-form-container .k-tabstrip-wrapper {
-        margin: (-$window-inner-padding-y) (-$window-inner-padding-x);
-    }
-    .k-edit-form-container .k-tabstrip.k-root-tabs {
-        margin-bottom: $window-inner-padding-y;
-    }
-    .k-edit-form-container .k-tabstrip .k-tabstrip-items {
-        padding: $window-inner-padding-y $window-inner-padding-x 0;
-    }
-    .k-edit-form-container .k-tabstrip .k-content {
-        padding: $window-inner-padding-y $window-inner-padding-x;
-        border-width: 0;
-    }
-
-
-    // Edit buttons
-    .k-edit-buttons {
-        padding: $toolbar-padding-y $toolbar-padding-x;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: inherit;
-        text-align: right;
-        clear: both;
-    }
-    .k-edit-buttons .k-button + .k-button {
-        margin-left: ( $spacer-x / 2 );
-    }
-    .k-edit-form-container .k-edit-buttons {
-        margin: $window-inner-padding-y (-$window-inner-padding-x) (-$window-inner-padding-y);
-        padding: $window-inner-padding-y $window-inner-padding-x;
-    }
-
-
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
@@ -433,19 +380,3 @@
     }
 
 }
-
-@include exports("edit-form/rtl") {
-
-    .k-rtl {
-
-        .k-edit-buttons {
-            text-align: left;
-
-            .k-button + .k-button {
-                margin-left: 0;
-                margin-right: .5em;
-            }
-        }
-    }
-
-}

package/scss/gantt/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../validator/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";

package/scss/gantt/_layout.scss

@@ -121,10 +121,11 @@
                 background: none;
 
                 .k-task-milestone-content {
-                    width: .875em;
-                    height: .875em;
+                    width: 100%;
+                    height: 100%;
                     border-width: 1px;
                     border-style: solid;
+                    box-sizing: border-box;
                     transform: rotate(45deg);
                 }
             }
@@ -455,6 +456,7 @@
         height: 1em;
         border-width: 1px;
         border-style: solid;
+        box-sizing: border-box;
         transform: rotate(45deg);
     }
 
@@ -507,6 +509,7 @@
         @include border-radius( $border-radius );
         border-width: $gantt-task-border-width;
         border-style: solid;
+        box-sizing: border-box;
         cursor: default;
 
         .k-resize-handle {
@@ -743,7 +746,6 @@
 
     .k-gantt-edit-form {}
 
-    .k-gantt-edit-form .k-edit-buttons {}
     .k-gantt-edit-form .k-gantt-update {}
     .k-gantt-edit-form .k-gantt-cancel {}
     .k-gantt-edit-form .k-gantt-delete {

package/scss/grid/_index.scss

@@ -14,7 +14,7 @@
 @import "../radio/_index.scss";
 @import "../validator/_index.scss";
 @import "../autocomplete/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../menu/_index.scss";
@@ -23,6 +23,7 @@
 @import "../skeleton/_index.scss";
 @import "../utils/_float.scss";
 @import "../utils/_spacer.scss";
+@import "../list/_index.scss";
 
 
 // Component

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;
@@ -320,11 +322,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;
@@ -504,10 +501,6 @@
         }
     }
 
-    .k-group-indicator {
-        margin-right: ( $grid-group-indicator-gap / 2 );
-    }
-
     .k-group-indicator + .k-group-indicator {
         margin-left: ( $grid-group-indicator-gap / 2 );
     }
@@ -658,14 +651,6 @@
             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( (#{ $kendo-button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-bottom: calc( (#{ $kendo-button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-right: calc( -1 * #{ $kendo-button-calc-size });
-            }
-
             &:hover {
                 cursor: pointer;
             }
@@ -751,46 +736,27 @@
         .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 {
             display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            gap: ( $grid-cell-padding-y / 2 );
             flex: 1 1 auto;
 
-            > label {
-                vertical-align: middle;
+            > .k-button {
+                flex: none;
             }
         }
 
-        .k-filtercell-wrapper > .k-widget {
-            width: 100%;
-        }
-
-        .k-filtercell-operator {
-            > .k-button.k-clear-button-visible {
-                visibility: visible;
-                height: $kendo-button-calc-size;
-            }
-
-            > .k-button:not(.k-clear-button-visible) {
-                visibility: hidden;
-                pointer-events: none;
-            }
-        }
-
-        .k-filtercell-operator {
-            margin-left: $grid-cell-padding-y / 2;
-        }
-
     }
 
     // Grid content
@@ -1018,7 +984,7 @@
         }
 
         .k-grid-header .k-grid-column-menu {
-            z-index: 5;
+            z-index: 1;
         }
     }
 
@@ -1269,13 +1235,24 @@
         }
 
         .k-widget,
-        .k-radio-list {
+        .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;
         }
 
+        .k-switch {
+            margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
+            box-sizing: border-box;
+            display: flex;
+        }
+
         .k-widget.k-filter-and {
             width: 6em;
         }

package/scss/grid/_theme.scss

@@ -372,20 +372,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 +402,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 );
                 }
             }
         }

package/scss/grid/_variables.scss

@@ -109,7 +109,7 @@ $grid-sorting-index-spacing-y: ($icon-spacing / 2) !default;
 $grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
 
 
-$grid-focused-shadow: $list-item-focused-shadow !default;
+$grid-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $grid-edit-cell-padding-x: $grid-cell-padding-x !default;
 $grid-edit-cell-padding-y: 3px !default;
@@ -157,8 +157,8 @@ $grid-column-menu-items-wrap-padding-y: $padding-y-lg !default;
 $grid-column-menu-filter-container-padding-x: $padding-x !default;
 $grid-column-menu-filter-container-padding-y: $padding-y !default;
 
-$grid-column-menu-group-header-padding-x: $menu-popup-item-padding-x !default;
-$grid-column-menu-group-header-padding-y: $menu-popup-item-padding-y !default;
+$grid-column-menu-group-header-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$grid-column-menu-group-header-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
 $grid-column-menu-group-header-font-size: $font-size-sm !default;
 $grid-column-menu-group-header-line-height: $line-height !default;

package/scss/icons/_layout.scss

@@ -41,7 +41,6 @@
             text-decoration: none;
         }
     }
-    .k-no-flexbox { display: inline-block; }
 
     .k-svg-icon {
         width: 1em;
@@ -282,6 +281,8 @@
     .k-i-display-inline-flex::before { content: "\e059"; }
     .k-i-gap-column::before { content: "\e05a"; }
     .k-i-gap-row::before { content: "\e05b"; }
+    .k-i-handle-resize-alt::before { content: "\e05c"; }
+    .k-i-handle-resize::before { content: "\e05d"; }
     .k-i-undo::before { content: "\e100"; }
     .k-i-undo-large::before { content: "\e100"; }
     .k-i-redo::before { content: "\e101"; }
@@ -1068,6 +1069,10 @@
     .k-i-replace-all::before { content: "\e6ad"; }
     .k-i-letter-space::before { content: "\e6ae"; }
     .k-i-line-height::before { content: "\e6af"; }
+    .k-i-blockquote::before { content: "\e6b0"; }
+    .k-i-list-latin-big::before { content: "\e6b1"; }
+    .k-i-list-latin-small::before { content: "\e6b2"; }
+    .k-i-list-unordered-square::before { content: "\e6b3"; }
     .k-i-graph::before { content: "\ea00"; }
     .k-i-chart-column-clustered::before { content: "\ea01"; }
     .k-i-chart-column-stacked::before { content: "\ea02"; }