@progress/kendo-theme-default 4.42.1-dev.3 → 4.43.1-dev.1

package/scss/dropdownlist/_layout.scss

@@ -1,5 +1,6 @@
 @include exports("dropdownlist/layout") {
 
+    // Dropdown list
     .k-dropdown {
         width: $input-default-width;
         border-width: 0;
@@ -30,6 +31,7 @@
             transition: all .1s ease; // sass-lint:disable-line no-transition-all
             cursor: pointer;
             outline: 0;
+            overflow: hidden;
 
 
             // Input
@@ -38,10 +40,11 @@
 
             // Select
             .k-select {
-                @include border-right-radius-only( $input-border-radius );
                 padding: $picker-select-padding-y $picker-select-padding-x;
                 width: if( $use-picker-select-width, $button-inner-calc-size, null );
                 border-width: 0;
+                border-inline-start-width: $picker-select-border-width;
+                border-color: transparent;
                 box-sizing: border-box;
                 border-style: solid;
                 display: flex;
@@ -63,10 +66,6 @@
     .k-rtl .k-dropdown,
     [dir="rtl"] .k-dropdown {
         text-align: right;
-
-        .k-select {
-            @include border-left-radius-only( $input-border-radius );
-        }
     }
 
 

package/scss/dropdownlist/_theme.scss

@@ -40,6 +40,10 @@
             &.k-state-invalid {
                 border-color: $invalid-border;
 
+                .k-input-validation-icon {
+                    color: $invalid-text;
+                }
+
                 &:focus,
                 &.k-state-focused {
                     @include box-shadow($invalid-shadow);
@@ -54,6 +58,10 @@
             > .k-dropdown-wrap {
                 border-color: $invalid-border;
 
+                .k-input-validation-icon {
+                    color: $invalid-text;
+                }
+
                 &:focus,
                 &.k-state-focused {
                     @include box-shadow($invalid-shadow);

package/scss/dropdowntree/_layout.scss

@@ -10,16 +10,8 @@
     .k-popup-dropdowntree {
         padding: 0;
 
-        .k-list-filter {
-            box-shadow: $dropdowntree-filter-shadow;
-            margin: 0 0 $dropdowntree-filter-spacer;
-        }
-
         .k-check-all {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x 0;
-        }
-        .k-list-filter .k-check-all {
-            padding-top: 0;
+            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x;
         }
 
         .k-treeview {

package/scss/dropzone/_layout.scss

@@ -41,20 +41,4 @@
         }
     }
 
-
-    // No flexbox
-    .k-no-flexbox {
-        .k-dropzone-inner {
-            padding-top: ( $dropzone-padding-y * 6 );
-            padding-bottom: ( $dropzone-padding-y * 6 );
-            width: 100%;
-            height: 100%;
-        }
-
-        .k-dropzone-hint,
-        .k-dropzone-note {
-            display: block;
-        }
-    }
-
 }

package/scss/editor/_layout.scss

@@ -78,6 +78,7 @@
         height: $editor-resize-handle-size;
         border-width: $editor-resize-handle-border-width;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
         visibility: visible;
         z-index: 100;
@@ -162,13 +163,6 @@
     .k-editor-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
 
-        // Group
-        .k-tool-group {
-            .k-widget ~ .k-widget {
-                margin-inline-start: $toolbar-spacing;
-            }
-        }
-
         // Tool
         .k-tool {
             padding: $button-padding-y;
@@ -245,26 +239,13 @@
             }
         }
     }
-
-
-    // Editable area
-    .k-editable-area {
+    td.k-editor-content {
         padding: $input-padding-y;
         width: 100%;
         height: 100%;
         border-width: 0;
         outline: 0;
 
-        iframe.k-content {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            border-width: 0;
-            background: none;
-            display: block;
-        }
-
         .k-resizable & {
             padding: $input-padding-y $input-padding-y 16px;
         }
@@ -393,8 +374,6 @@
         .k-edit-field {
             width: 66%;
         }
-
-        .k-edit-buttons {}
     }
 
     // View HTML dialog using flex to fit child textarea

package/scss/editor/_variables.scss

@@ -14,7 +14,7 @@ $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
 $editor-export-tool-icon-margin-x: .25em !default;
 
-$editor-resize-handle-size: 5px !default;
+$editor-resize-handle-size: 8px !default;
 $editor-resize-handle-border-width: 1px !default;
 $editor-resize-handle-border: #000000 !default;
 $editor-resize-handle-bg: #ffffff !default;

package/scss/expansion-panel/_index.scss

@@ -6,6 +6,7 @@
 @import "../utils/_display.scss";
 @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/filemanager/_theme.scss

@@ -67,7 +67,7 @@
             &.k-state-selected .k-file-icon {
                 @include fill(
                     inherit,
-                    none,
+                    transparent,
                     transparent
                 );
             }

package/scss/forms/_index.scss

@@ -7,7 +7,7 @@
 @import "../button/_variables.scss";
 @import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
-@import "../action-buttons/_variables.scss";
+@import "../action-buttons/_index.scss";
 @import "../window/_variables.scss";
 
 

package/scss/forms/_layout.scss

@@ -106,7 +106,6 @@
         }
 
         .k-form-field,
-        .k-form-buttons,
         .k-daterangepicker .k-textbox-container {
             margin-top: $form-field-margin-top;
         }
@@ -170,15 +169,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
@@ -235,28 +228,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;
@@ -364,40 +341,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 {
@@ -458,19 +401,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/_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

@@ -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

@@ -320,11 +320,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;
@@ -664,14 +659,6 @@
             bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $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;
             }
@@ -757,77 +744,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 {
             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-widget,
+            > .k-textbox {
+                width: 100%;
             }
 
-            .k-button,
+            .k-colorpicker,
             .k-dropdown-operator {
-                margin-left: $grid-cell-padding-y / 2;
-
-                .k-ie & {
-                    min-width: $button-inner-calc-size;
-                }
+                width: min-content;
+                flex: none;
             }
 
-            .k-widget {
-                width: auto;
+            > .k-button {
+                flex: none;
             }
         }
 
-        .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-filtercell-operator {
-            margin-left: $grid-cell-padding-y / 2;
-        }
-
-        .k-widget:not(.k-dropdown-operator),
-        .k-filtercell-wrapper > .k-textbox {
-            display: flex;
-            flex: 1 1 auto;
-        }
-
-        .k-filtercell-wrapper > .k-textbox {
-            width: 100%;
-            min-width: 0;
-        }
-
     }
 
     // Grid content
@@ -1056,7 +1004,7 @@
         }
 
         .k-grid-header .k-grid-column-menu {
-            z-index: 5;
+            z-index: 1;
         }
     }
 

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"; }