@progress/kendo-theme-classic 4.43.0 → 4.43.1-dev.0

package/dist/all.css

@@ -13546,6 +13546,68 @@ kendo-toolbar-renderer {
     background-color: #f0f0f0;
 }
 
+.k-actions, .k-edit-buttons,
+.k-action-buttons,
+.k-columnmenu-actions, .k-form-buttons {
+    padding: 8px 8px;
+    border-width: 0px 0 0 0;
+    border-style: solid;
+    border-color: inherit;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+    clear: both;
+}
+
+.k-popup .k-actions, .k-popup .k-edit-buttons,
+.k-popup .k-action-buttons,
+.k-popup .k-columnmenu-actions, .k-popup .k-form-buttons {
+    margin-top: 16px;
+}
+
+.k-ie .k-actions .k-button ~ .k-button, .k-ie .k-edit-buttons .k-button ~ .k-button, .k-ie .k-action-buttons .k-button ~ .k-button, .k-ie .k-columnmenu-actions .k-button ~ .k-button, .k-ie .k-form-buttons .k-button ~ .k-button {
+    margin-left: 8px;
+    flex-shrink: 0;
+}
+
+.k-rtl .k-ie .k-actions .k-button ~ .k-button, .k-rtl .k-ie .k-edit-buttons .k-button ~ .k-button, .k-rtl .k-ie .k-action-buttons .k-button ~ .k-button, .k-rtl .k-ie .k-columnmenu-actions .k-button ~ .k-button, .k-rtl .k-ie .k-form-buttons .k-button ~ .k-button,
+[dir="rtl"] .k-ie .k-actions .k-button ~ .k-button,
+[dir="rtl"] .k-ie .k-edit-buttons .k-button ~ .k-button,
+[dir="rtl"] .k-ie .k-action-buttons .k-button ~ .k-button,
+[dir="rtl"] .k-ie .k-columnmenu-actions .k-button ~ .k-button,
+[dir="rtl"] .k-ie .k-form-buttons .k-button ~ .k-button {
+    margin-left: 0;
+    margin-right: 8px;
+}
+
+.k-actions-start {
+    justify-content: flex-start;
+}
+
+.k-actions-center {
+    justify-content: center;
+}
+
+.k-actions-end {
+    justify-content: flex-end;
+}
+
+.k-actions-stretched > * {
+    flex: 1 0 0%;
+}
+
+.k-actions-horizontal {
+    width: 100%;
+    flex-flow: row nowrap;
+}
+
+.k-actions-vertical {
+    flex-flow: column nowrap;
+}
+
 .k-form,
 .k-form-inline {
     font-size: 14px;
@@ -13639,7 +13701,6 @@ kendo-label > .k-label {
 }
 
 .k-form .k-form-field,
-.k-form .k-form-buttons,
 .k-form .k-daterangepicker .k-textbox-container {
     margin-top: 1em;
 }
@@ -13702,15 +13763,8 @@ kendo-label > .k-label {
 }
 
 .k-form-buttons {
-    display: flex;
-}
-
-.k-form-buttons > * {
-    margin-right: 8px;
-}
-
-.k-form-buttons > *:last-child {
-    margin-right: 0;
+    margin-top: 2em;
+    padding: 0;
 }
 
 .k-form-hint,
@@ -13765,23 +13819,6 @@ kendo-label > .k-label {
     flex: 1 1 auto;
 }
 
-.k-form-horizontal .k-form-buttons {
-    margin-top: 2em;
-}
-
-.k-form [dir="rtl"] .k-form-buttons > *, .k-form [dir="rtl"].k-form-buttons > *,
-.k-rtl .k-form .k-form-buttons > *,
-.k-rtl .k-form.k-form-buttons > * {
-    margin-right: 0;
-    margin-left: 8px;
-}
-
-.k-form [dir="rtl"] .k-form-buttons > *:last-child, .k-form [dir="rtl"].k-form-buttons > *:last-child,
-.k-rtl .k-form .k-form-buttons > *:last-child,
-.k-rtl .k-form.k-form-buttons > *:last-child {
-    margin-left: 0;
-}
-
 .k-form [dir="rtl"] .k-label-optional,
 .k-rtl .k-form .k-label-optional {
     margin-left: 0;
@@ -13883,11 +13920,12 @@ kendo-label > .k-label {
 
 .k-popup-edit-form > .k-actions, .k-popup-edit-form > .k-edit-buttons,
 .k-popup-edit-form > .k-action-buttons,
-.k-popup-edit-form > .k-columnmenu-actions,
+.k-popup-edit-form > .k-columnmenu-actions, .k-popup-edit-form > .k-form-buttons,
 .k-edit-form-container .k-actions,
 .k-edit-form-container .k-edit-buttons,
 .k-edit-form-container .k-action-buttons,
-.k-edit-form-container .k-columnmenu-actions {
+.k-edit-form-container .k-columnmenu-actions,
+.k-edit-form-container .k-form-buttons {
     margin: 1em -12px -12px;
 }
 
@@ -17113,67 +17151,6 @@ kendo-label.k-radio-label > .k-label {
     background: linear-gradient(to left, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
 }
 
-.k-actions, .k-edit-buttons,
-.k-action-buttons,
-.k-columnmenu-actions {
-    padding: 8px 8px;
-    border-width: 0px 0 0 0;
-    border-style: solid;
-    border-color: inherit;
-    flex-shrink: 0;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: 8px;
-    overflow: hidden;
-    clear: both;
-}
-
-.k-popup .k-actions, .k-popup .k-edit-buttons,
-.k-popup .k-action-buttons,
-.k-popup .k-columnmenu-actions {
-    margin-top: 16px;
-}
-
-.k-ie .k-actions .k-button ~ .k-button, .k-ie .k-edit-buttons .k-button ~ .k-button, .k-ie .k-action-buttons .k-button ~ .k-button, .k-ie .k-columnmenu-actions .k-button ~ .k-button {
-    margin-left: 8px;
-    flex-shrink: 0;
-}
-
-.k-rtl .k-ie .k-actions .k-button ~ .k-button, .k-rtl .k-ie .k-edit-buttons .k-button ~ .k-button, .k-rtl .k-ie .k-action-buttons .k-button ~ .k-button, .k-rtl .k-ie .k-columnmenu-actions .k-button ~ .k-button,
-[dir="rtl"] .k-ie .k-actions .k-button ~ .k-button,
-[dir="rtl"] .k-ie .k-edit-buttons .k-button ~ .k-button,
-[dir="rtl"] .k-ie .k-action-buttons .k-button ~ .k-button,
-[dir="rtl"] .k-ie .k-columnmenu-actions .k-button ~ .k-button {
-    margin-left: 0;
-    margin-right: 8px;
-}
-
-.k-actions-start {
-    justify-content: flex-start;
-}
-
-.k-actions-center {
-    justify-content: center;
-}
-
-.k-actions-end {
-    justify-content: flex-end;
-}
-
-.k-actions-stretched > * {
-    flex: 1 0 0%;
-}
-
-.k-actions-horizontal {
-    width: 100%;
-    flex-flow: row nowrap;
-}
-
-.k-actions-vertical {
-    flex-flow: column nowrap;
-}
-
 .k-coloreditor {
     border-radius: 4px;
     min-width: 272px;
@@ -17231,7 +17208,7 @@ kendo-label.k-radio-label > .k-label {
 
 .k-coloreditor-footer.k-actions, .k-coloreditor-footer.k-edit-buttons,
 .k-coloreditor-footer.k-action-buttons,
-.k-coloreditor-footer.k-columnmenu-actions {
+.k-coloreditor-footer.k-columnmenu-actions, .k-coloreditor-footer.k-form-buttons {
     margin: 0;
 }
 
@@ -19852,7 +19829,7 @@ select.k-dropdown:focus, select.k-dropdowntree:focus {
 
 .k-upload .k-actions, .k-upload .k-edit-buttons,
 .k-upload .k-action-buttons,
-.k-upload .k-columnmenu-actions {
+.k-upload .k-columnmenu-actions, .k-upload .k-form-buttons {
     border-top-width: 1px;
 }
 
@@ -23651,7 +23628,7 @@ kendo-card-footer {
 
 .k-tabstrip-content,
 .k-tabstrip > .k-content {
-    padding: 4px 8px;
+    padding: 16px 16px;
     border-width: 1px;
     border-style: solid;
     border-color: inherit;
@@ -25586,12 +25563,6 @@ kendo-card-footer {
     border-right-width: 0;
 }
 
-.k-grid[dir="rtl"] .k-filtercell-operator,
-.k-rtl .k-grid .k-filtercell-operator {
-    margin-left: 0;
-    margin-right: 4px;
-}
-
 .k-grid[dir="rtl"] .k-dirty,
 .k-rtl .k-grid .k-dirty {
     border-color: currentColor currentColor transparent transparent;
@@ -26031,72 +26002,40 @@ div.k-grid-footer {
     height: auto;
 }
 
-.k-filter-row .k-filtercell .k-widget.k-sized-input {
-    flex: 0 1 auto;
-}
-
 .k-filtercell {
     width: auto;
     display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
 .k-filtercell > span,
 .k-filtercell .k-filtercell-wrapper {
     display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 4px;
     flex: 1 1 auto;
 }
 
-.k-filtercell > span > label,
-.k-filtercell .k-filtercell-wrapper > label {
-    vertical-align: middle;
-}
-
-.k-filtercell .k-filtercell-wrapper > .k-widget {
+.k-filtercell > span > .k-widget,
+.k-filtercell > span > .k-textbox,
+.k-filtercell .k-filtercell-wrapper > .k-widget,
+.k-filtercell .k-filtercell-wrapper > .k-textbox {
     width: 100%;
 }
 
-.k-filtercell > span .k-button {
-    visibility: visible;
-    pointer-events: all;
-}
-
-.k-filtercell > span .k-button,
-.k-filtercell > span .k-dropdown-operator {
-    margin-left: 4px;
-}
-
-.k-ie .k-filtercell > span .k-button, .k-ie
-.k-filtercell > span .k-dropdown-operator {
-    min-width: calc(1.4285714286em + 8px);
-}
-
-.k-filtercell > span .k-widget {
-    width: auto;
-}
-
-.k-filtercell .k-filtercell-operator > .k-button.k-clear-button-visible {
-    visibility: visible;
-    height: calc(1.4285714286em + 10px);
-}
-
-.k-filtercell .k-filtercell-operator > .k-button:not(.k-clear-button-visible) {
-    visibility: hidden;
-    pointer-events: none;
-}
-
-.k-filtercell .k-filtercell-operator {
-    margin-left: 4px;
-}
-
-.k-filtercell .k-widget:not(.k-dropdown-operator),
-.k-filtercell .k-filtercell-wrapper > .k-textbox {
-    display: flex;
-    flex: 1 1 auto;
+.k-filtercell > span .k-colorpicker,
+.k-filtercell > span .k-dropdown-operator,
+.k-filtercell .k-filtercell-wrapper .k-colorpicker,
+.k-filtercell .k-filtercell-wrapper .k-dropdown-operator {
+    width: min-content;
+    flex: none;
 }
 
-.k-filtercell .k-filtercell-wrapper > .k-textbox {
-    width: 100%;
-    min-width: 0;
+.k-filtercell > span > .k-button,
+.k-filtercell .k-filtercell-wrapper > .k-button {
+    flex: none;
 }
 
 .k-grid-content,
@@ -26657,15 +26596,17 @@ div.k-grid-norecords {
 
 .k-filter-menu .k-actions, .k-filter-menu .k-edit-buttons,
 .k-filter-menu .k-action-buttons,
-.k-filter-menu .k-columnmenu-actions,
+.k-filter-menu .k-columnmenu-actions, .k-filter-menu .k-form-buttons,
 .k-column-list-wrapper .k-actions,
 .k-column-list-wrapper .k-edit-buttons,
 .k-column-list-wrapper .k-action-buttons,
 .k-column-list-wrapper .k-columnmenu-actions,
+.k-column-list-wrapper .k-form-buttons,
 .k-columnmenu-item-content .k-actions,
 .k-columnmenu-item-content .k-edit-buttons,
 .k-columnmenu-item-content .k-action-buttons,
-.k-columnmenu-item-content .k-columnmenu-actions {
+.k-columnmenu-item-content .k-columnmenu-actions,
+.k-columnmenu-item-content .k-form-buttons {
     margin-top: 4px;
     padding: 8px 8px;
 }
@@ -30299,7 +30240,7 @@ td.k-editor-content {
 
 .k-editor-find-replace .k-actions, .k-editor-find-replace .k-edit-buttons,
 .k-editor-find-replace .k-action-buttons,
-.k-editor-find-replace .k-columnmenu-actions {
+.k-editor-find-replace .k-columnmenu-actions, .k-editor-find-replace .k-form-buttons {
     padding: 0;
 }
 

package/dist/all.scss

@@ -6633,17 +6633,17 @@ $badge-dot-size-lg: 12px !default;
 // Button
 
 /// Width of border around buttons
-/// @group buttons
+/// @group button
 $button-border-width: 1px !default;
 /// Border radius of buttons
-/// @group buttons
+/// @group button
 $button-border-radius: $border-radius !default;
 
 /// Horizontal padding of buttons
-/// @group buttons
+/// @group button
 $button-padding-x: $padding-x !default;
 /// Vertical padding of buttons
-/// @group buttons
+/// @group button
 $button-padding-y: $padding-y !default;
 $button-font-family: $font-family !default;
 $button-font-size: $font-size !default;
@@ -6657,63 +6657,63 @@ $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2}
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
 /// The background of the buttons.
-/// @group buttons
+/// @group button
 $button-bg: $base-bg !default;
 /// The text color of the buttons.
-/// @group buttons
+/// @group button
 $button-text: $base-text !default;
 /// The border color of the buttons.
-/// @group buttons
+/// @group button
 $button-border: try-shade( $button-bg, 2 ) !default;
 /// The background gradient of the buttons.
-/// @group buttons
+/// @group button
 $button-gradient: $base-gradient !default;
 $button-shadow: null !default;
 
 /// The background of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-bg: try-shade( $button-bg, 1 ) !default;
 /// The text color of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-text: null !default;
 /// The border color of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-border: try-shade( $button-hovered-bg, 2 ) !default;
 /// The background gradient of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-gradient: null !default;
 $button-hovered-shadow: null !default;
 
 /// The background color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-bg: try-shade( $button-bg, 2 ) !default;
 /// The text color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-text: null !default;
 /// The border color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-border: try-shade( $button-active-bg, 2 ) !default;
 /// The background gradient of active buttons.
-/// @group buttons
+/// @group button
 $button-active-gradient: null !default;
 $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-bg: $button-active-bg !default;
 /// The text color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-text: $button-active-text !default;
 /// The border color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-border: $button-active-border !default;
 /// The background gradient of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-gradient: null !default;
 $button-selected-shadow: null !default;
 
 /// The shadow of focused buttons.
-/// @group buttons
+/// @group button
 $button-focused-shadow: 0 0 4px 0 rgba( $button-border, .75 ) !default;
 
 
@@ -10758,7 +10758,23 @@ $toolbar-separator-border: inherit !default;
 // #endregion
 
 // #endregion
-// #region @import "../action-buttons/_variables.scss"; -> packages/classic/scss/action-buttons/_variables.scss
+// #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_index.scss
+// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/classic/scss/action-buttons/_variables.scss
 // Actions
 $actions-margin-top: map-get( $spacing, 4 ) !default;
 $actions-padding-x: map-get( $spacing, 2 ) !default;
@@ -10771,6 +10787,102 @@ $actions-text: null !default;
 $actions-border: null !default;
 $actions-gradient: null !default;
 
+// #endregion
+// #region @import "_layout.scss"; -> packages/classic/scss/action-buttons/_layout.scss
+// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss
+@include exports("action-buttons/layout") {
+
+    .k-actions {
+        padding: $actions-padding-y $actions-padding-x;
+        border-width: $actions-border-width 0 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: $actions-button-spacing;
+        overflow: hidden;
+        // TODO: remove
+        clear: both;
+    }
+
+
+    // Actions in popup
+    .k-popup .k-actions {
+        margin-top: $actions-margin-top;
+    }
+
+
+    // Aliases
+    .k-edit-buttons,
+    .k-action-buttons,
+    .k-columnmenu-actions {
+        @extend .k-actions;
+    }
+
+
+    // Legacy spacing
+    .k-ie {
+        .k-actions .k-button ~ .k-button {
+            margin-left: $actions-button-spacing;
+            flex-shrink: 0;
+
+            .k-rtl &,
+            [dir="rtl"] & {
+                margin-left: 0;
+                margin-right: $actions-button-spacing;
+            }
+        }
+    }
+
+    // Actions align
+    .k-actions-start {
+        justify-content: flex-start;
+    }
+    .k-actions-center {
+        justify-content: center;
+    }
+    .k-actions-end {
+        justify-content: flex-end;
+    }
+    .k-actions-stretched > * {
+        flex: 1 0 0%;
+    }
+
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+
+}
+
+// #endregion
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/classic/scss/action-buttons/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss
+@include exports("action-buttons/theme") {
+
+    .k-actions {
+        @include fill(
+            $actions-text,
+            $actions-bg,
+            $actions-border,
+            $actions-gradient
+        );
+    }
+
+}
+
+// #endregion
+
+// #endregion
+
 // #endregion
 // #region @import "../window/_variables.scss"; -> packages/classic/scss/window/_variables.scss
 // Window
@@ -10935,7 +11047,6 @@ $window-sizes: (
         }
 
         .k-form-field,
-        .k-form-buttons,
         .k-daterangepicker .k-textbox-container {
             margin-top: $form-field-margin-top;
         }
@@ -10999,15 +11110,9 @@ $window-sizes: (
 
     // 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
@@ -11064,28 +11169,12 @@ $window-sizes: (
             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;
@@ -16320,119 +16409,7 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../action-buttons/_index.scss"; -> packages/classic/scss/action-buttons/_index.scss
-// #region @import "../core/_index.scss"; -> packages/classic/scss/core/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Dependencies
-// #region @import "../common/_index.scss"; -> packages/classic/scss/common/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../button/_index.scss"; -> packages/classic/scss/button/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Component
-// #region @import "_variables.scss"; -> packages/classic/scss/action-buttons/_variables.scss
 // File already imported_once. Skipping output.
-// #endregion
-// #region @import "_layout.scss"; -> packages/classic/scss/action-buttons/_layout.scss
-// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss
-@include exports("action-buttons/layout") {
-
-    .k-actions {
-        padding: $actions-padding-y $actions-padding-x;
-        border-width: $actions-border-width 0 0 0;
-        border-style: solid;
-        border-color: inherit;
-        flex-shrink: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        gap: $actions-button-spacing;
-        overflow: hidden;
-        // TODO: remove
-        clear: both;
-    }
-
-
-    // Actions in popup
-    .k-popup .k-actions {
-        margin-top: $actions-margin-top;
-    }
-
-
-    // Aliases
-    .k-edit-buttons,
-    .k-action-buttons,
-    .k-columnmenu-actions {
-        @extend .k-actions;
-    }
-
-
-    // Legacy spacing
-    .k-ie {
-        .k-actions .k-button ~ .k-button {
-            margin-left: $actions-button-spacing;
-            flex-shrink: 0;
-
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $actions-button-spacing;
-            }
-        }
-    }
-
-    // Actions align
-    .k-actions-start {
-        justify-content: flex-start;
-    }
-    .k-actions-center {
-        justify-content: center;
-    }
-    .k-actions-end {
-        justify-content: flex-end;
-    }
-    .k-actions-stretched > * {
-        flex: 1 0 0%;
-    }
-
-    // Actions orientation
-    .k-actions-horizontal {
-        width: 100%;
-        flex-flow: row nowrap;
-    }
-    .k-actions-vertical {
-        flex-flow: column nowrap;
-    }
-
-}
-
-// #endregion
-
-// #endregion
-// #region @import "_theme.scss"; -> packages/classic/scss/action-buttons/_theme.scss
-// #region @import "~@progress/kendo-theme-default/scss/action-buttons/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss
-@include exports("action-buttons/theme") {
-
-    .k-actions {
-        @include fill(
-            $actions-text,
-            $actions-bg,
-            $actions-border,
-            $actions-gradient
-        );
-    }
-
-}
-
-// #endregion
-
-// #endregion
-
 // #endregion
 // #region @import "../color-preview/_index.scss"; -> packages/classic/scss/color-preview/_index.scss
 // File already imported_once. Skipping output.
@@ -26230,10 +26207,10 @@ $tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: $tabstrip-item-padding-x !default;
+$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: $tabstrip-item-padding-y !default;
+$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 1px !default;
@@ -29119,11 +29096,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 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;
@@ -29556,77 +29528,38 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .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;
-                }
-            }
-
-            .k-widget {
-                width: auto;
-            }
-        }
-
-        .k-filtercell-operator {
-            > .k-button.k-clear-button-visible {
-                visibility: visible;
-                height: $button-calc-size;
+                width: min-content;
+                flex: none;
             }
 
-            > .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;
-            flex: 1 1 auto;
-        }
-
-        .k-filtercell-wrapper > .k-textbox {
-            width: 100%;
-            min-width: 0;
-        }
-
     }
 
     // Grid content

package/modules/@progress/kendo-theme-default/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "4.43.0",
+  "version": "4.43.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "dart:flat": "gulp dart:flat",
     "prepublishOnly": "echo 'no prebublish for default theme'"
   },
-  "gitHead": "8841c18b8c8f2b159bcd5ed316ce283c5de2fd7c"
+  "gitHead": "e315a28dad00d287edbdf58668becda3d815504f"
 }

package/modules/@progress/kendo-theme-default/scss/button/_variables.scss

@@ -1,17 +1,17 @@
 // Button
 
 /// Width of border around buttons
-/// @group buttons
+/// @group button
 $button-border-width: 1px !default;
 /// Border radius of buttons
-/// @group buttons
+/// @group button
 $button-border-radius: $border-radius !default;
 
 /// Horizontal padding of buttons
-/// @group buttons
+/// @group button
 $button-padding-x: $padding-x !default;
 /// Vertical padding of buttons
-/// @group buttons
+/// @group button
 $button-padding-y: $padding-y !default;
 $button-font-family: $font-family !default;
 $button-font-size: $font-size !default;
@@ -25,63 +25,63 @@ $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2}
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
 /// The background of the buttons.
-/// @group buttons
+/// @group button
 $button-bg: #f5f5f5 !default;
 /// The text color of the buttons.
-/// @group buttons
+/// @group button
 $button-text: #424242 !default;
 /// The border color of the buttons.
-/// @group buttons
+/// @group button
 $button-border: rgba( black, .08 ) !default;
 /// The background gradient of the buttons.
-/// @group buttons
+/// @group button
 $button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
 $button-shadow: null !default;
 
 /// The background of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-bg: try-shade( $button-bg, .5 ) !default;
 /// The text color of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-text: null !default;
 /// The border color of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-border: null !default;
 /// The background gradient of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-gradient: null !default;
 $button-hovered-shadow: null !default;
 
 /// The background color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-bg: try-shade( $button-bg, 1.5 ) !default;
 /// The text color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-text: null !default;
 /// The border color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-border: null !default;
 /// The background gradient of active buttons.
-/// @group buttons
+/// @group button
 $button-active-gradient: null !default;
 $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-bg: $primary !default;
 /// The text color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-text: contrast-wcag( $button-selected-bg ) !default;
 /// The border color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-border: $button-selected-bg !default;
 /// The background gradient of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-gradient: null !default;
 $button-selected-shadow: null !default;
 
 /// The shadow of focused buttons.
-/// @group buttons
+/// @group button
 $button-focused-shadow: 0 0 0 2px rgba( $button-border, .08 ) !default;
 
 

package/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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;

package/modules/@progress/kendo-theme-default/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;
@@ -757,77 +752,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;
-                }
-            }
-
-            .k-widget {
-                width: auto;
-            }
-        }
-
-        .k-filtercell-operator {
-            > .k-button.k-clear-button-visible {
-                visibility: visible;
-                height: $button-calc-size;
+                width: min-content;
+                flex: none;
             }
 
-            > .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;
-            flex: 1 1 auto;
-        }
-
-        .k-filtercell-wrapper > .k-textbox {
-            width: 100%;
-            min-width: 0;
-        }
-
     }
 
     // Grid content

package/modules/@progress/kendo-theme-default/scss/tabstrip/_variables.scss

@@ -86,10 +86,10 @@ $tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: $tabstrip-item-padding-x !default;
+$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: $tabstrip-item-padding-y !default;
+$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 1px !default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "4.43.0",
+  "version": "4.43.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,7 +50,7 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.43.0"
+    "@progress/kendo-theme-default": "^4.43.1-dev.0"
   },
-  "gitHead": "8841c18b8c8f2b159bcd5ed316ce283c5de2fd7c"
+  "gitHead": "e315a28dad00d287edbdf58668becda3d815504f"
 }

package/scss/button/_variables.scss

@@ -1,17 +1,17 @@
 // Button
 
 /// Width of border around buttons
-/// @group buttons
+/// @group button
 $button-border-width: 1px !default;
 /// Border radius of buttons
-/// @group buttons
+/// @group button
 $button-border-radius: $border-radius !default;
 
 /// Horizontal padding of buttons
-/// @group buttons
+/// @group button
 $button-padding-x: $padding-x !default;
 /// Vertical padding of buttons
-/// @group buttons
+/// @group button
 $button-padding-y: $padding-y !default;
 $button-font-family: $font-family !default;
 $button-font-size: $font-size !default;
@@ -25,63 +25,63 @@ $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2}
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
 /// The background of the buttons.
-/// @group buttons
+/// @group button
 $button-bg: $base-bg !default;
 /// The text color of the buttons.
-/// @group buttons
+/// @group button
 $button-text: $base-text !default;
 /// The border color of the buttons.
-/// @group buttons
+/// @group button
 $button-border: try-shade( $button-bg, 2 ) !default;
 /// The background gradient of the buttons.
-/// @group buttons
+/// @group button
 $button-gradient: $base-gradient !default;
 $button-shadow: null !default;
 
 /// The background of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-bg: try-shade( $button-bg, 1 ) !default;
 /// The text color of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-text: null !default;
 /// The border color of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-border: try-shade( $button-hovered-bg, 2 ) !default;
 /// The background gradient of hovered buttons.
-/// @group buttons
+/// @group button
 $button-hovered-gradient: null !default;
 $button-hovered-shadow: null !default;
 
 /// The background color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-bg: try-shade( $button-bg, 2 ) !default;
 /// The text color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-text: null !default;
 /// The border color of active buttons.
-/// @group buttons
+/// @group button
 $button-active-border: try-shade( $button-active-bg, 2 ) !default;
 /// The background gradient of active buttons.
-/// @group buttons
+/// @group button
 $button-active-gradient: null !default;
 $button-active-shadow: null !default;
 
 /// The background color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-bg: $button-active-bg !default;
 /// The text color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-text: $button-active-text !default;
 /// The border color of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-border: $button-active-border !default;
 /// The background gradient of selected buttons.
-/// @group buttons
+/// @group button
 $button-selected-gradient: null !default;
 $button-selected-shadow: null !default;
 
 /// The shadow of focused buttons.
-/// @group buttons
+/// @group button
 $button-focused-shadow: 0 0 4px 0 rgba( $button-border, .75 ) !default;
 
 

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/tabstrip/_variables.scss

@@ -86,10 +86,10 @@ $tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: $tabstrip-item-padding-x !default;
+$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: $tabstrip-item-padding-y !default;
+$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 1px !default;