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

package/dist/all.scss

@@ -8752,7 +8752,9 @@ $input-separator-opacity: .5 !default;
     }
 
     // Input with icon styles
-    .k-input-icon {
+    .k-input-icon,
+    .k-input-validation-icon,
+    .k-input-loading-icon {
         width: $input-icon-width;
         height: $input-icon-height;
         display: inline-flex;
@@ -8760,21 +8762,6 @@ $input-separator-opacity: .5 !default;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
-
-        .k-ie9 & {
-            position: absolute;
-            height: 100%;
-            right: 0;
-            top: 0;
-        }
-
-        .k-rtl &,
-        [dir="rtl"] & {
-            .k-ie9 & {
-                left: 0;
-                right: auto;
-            }
-        }
     }
 
 
@@ -10023,7 +10010,7 @@ $window-sizes: (
         .k-maskedtextbox,
         .k-textbox-container,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
 
@@ -10084,6 +10071,7 @@ $window-sizes: (
                 margin-right: $horizontal-form-label-margin-x;
                 padding-top: $horizontal-form-label-padding-top;
                 width: $horizontal-form-label-width;
+                text-align: end;
                 flex-direction: column;
                 align-items: $horizontal-form-label-align;
                 justify-content: flex-start;
@@ -11017,7 +11005,7 @@ $checkbox-ripple-opacity: .3 !default;
 
 
     // Hover state
-    .k-checkbox:hover
+    .k-checkbox:hover,
     .k-checkbox.k-state-hover {
         @include fill(
             $checkbox-hovered-text,
@@ -13215,6 +13203,7 @@ $message-box-link-text-decoration: underline !default;
 
     // Actions orientation
     .k-actions-horizontal {
+        width: 100%;
         flex-flow: row nowrap;
     }
     .k-actions-vertical {
@@ -15453,26 +15442,6 @@ $autocomplete-invalid-shadow: $invalid-shadow !default;
             height: $input-icon-height;
         }
 
-
-        // Clear value
-        .k-clear-value {
-            visibility: hidden;
-        }
-        &:hover,
-        // &:focus-within,
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-        &:focus-within {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-
     }
 
 
@@ -15948,23 +15917,12 @@ $numeric-button-pressed-gradient: $button-active-gradient !default;
             top: -$spinner-icon-offset;
         }
 
-        .k-i-warning {
-            align-self: center;
-            margin-right: $spacer-x / 2;
-        }
-
 
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
             text-align: right;
 
-            .k-numeric-wrap .k-i-warning {
-                align-self: center;
-                margin-right: 0;
-                margin-left: $spacer-x / 2;
-            }
-
             .k-select {
                 @include border-left-radius-only( $input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
@@ -16931,28 +16889,6 @@ $combobox-select-pressed-gradient: $button-active-gradient !default;
         // Input
         .k-input {}
 
-
-        // Clear value
-        .k-clear-value {
-            visibility: hidden;
-        }
-        &:hover,
-        // &:focus-within,
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus,
-        .k-dropdown-wrap.k-state-hover,
-        .k-dropdown-wrap.k-state-focused {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-        &:focus-within {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-
         // Select
         .k-select {
             @include border-right-radius-only( $input-border-radius );
@@ -18164,26 +18100,11 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         }
 
 
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            right: $padding-x;
-            top: 50%;
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
             text-align: right;
 
-            .k-dateinput-wrap .k-i-warning {
-                left: $padding-x;
-                right: auto;
-            }
-
             .k-select {
                 @include border-left-radius-only( $input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
@@ -18271,16 +18192,6 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         }
 
 
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
@@ -18290,11 +18201,6 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
                 @include border-left-radius-only( $input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
             }
-
-            .k-i-warning {
-                right: auto;
-                left: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
-            }
         }
     }
 
@@ -18366,16 +18272,6 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
         }
 
 
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
@@ -18385,11 +18281,6 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
                 @include border-left-radius-only( $input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
             }
-
-            .k-i-warning {
-                right: auto;
-                left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
-            }
         }
     }
 
@@ -19599,18 +19490,6 @@ $dropdownlist-focused-shadow: $input-focused-shadow !default;
                 text-align: center;
                 cursor: pointer;
             }
-
-            // Clear value
-            .k-clear-value {
-                visibility: hidden;
-            }
-            &.k-state-focused,
-            &.k-state-hover,
-            &:hover {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
         }
 
     }
@@ -19964,18 +19843,10 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
 
             // Clear value
             .k-clear-value {
-                visibility: hidden;
                 position: absolute;
                 top: 0;
                 right: 0;
             }
-            &:hover,
-            &.k-state-hover,
-            &.k-state-focused {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
 
             // Select
             > .k-select {
@@ -19997,17 +19868,6 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
             right: $multiselect-clear-right;
         }
 
-
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            > .k-multiselect-wrap {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-        }
-
         &[dir="rtl"],
         .k-rtl & {
             text-align: right;
@@ -20745,6 +20605,7 @@ $searchbox-focus-border: $input-focused-border !default;
         @include border-radius( $searchbox-border-radius );
         border-width: 1px;
         border-style: solid;
+        box-sizing: border-box;
         font-family: $searchbox-font-family;
         font-size: $searchbox-font-size;
         line-height: $searchbox-line-height;
@@ -22863,6 +22724,7 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
     }
 
     // Buttons Layout
+    .k-window-buttons,
     .k-window-buttongroup {
         @include border-bottom-radius( $window-border-radius );
         padding: $window-buttongroup-padding-y $window-buttongroup-padding-x;
@@ -24455,6 +24317,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 
@@ -34577,6 +34440,14 @@ $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-border-width: 1px !default;
+$editor-resize-handle-border: #000000 !default;
+$editor-resize-handle-bg: #ffffff !default;
+
+$editor-selectednode-outline-width: 2px !default;
+$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/editor/_layout.scss
 @include exports("editor/layout") {
@@ -34649,6 +34520,89 @@ $editor-export-tool-icon-margin-x: .25em !default;
         overflow: auto;
     }
 
+    // Resizable images
+    .k-editor-resize-handles-wrapper {
+        position: absolute;
+        visibility: hidden;
+    }
+    .k-editor-resize-handle {
+        width: $editor-resize-handle-size;
+        height: $editor-resize-handle-size;
+        border-width: $editor-resize-handle-border-width;
+        border-style: solid;
+        position: absolute;
+        visibility: visible;
+        z-index: 100;
+
+        &.northwest {
+            top: 0;
+            left: 0;
+            transform: translate(-50%, -50%);
+            cursor: nw-resize;
+        }
+
+        &.north {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            cursor: n-resize;
+        }
+
+        &.northeast {
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+            cursor: ne-resize;
+        }
+
+        &.southwest {
+            left: 0;
+            bottom: 0;
+            transform: translate(-50%, 50%);
+            cursor: sw-resize;
+        }
+
+        &.south {
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 50%);
+            cursor: s-resize;
+        }
+
+        &.southeast {
+            right: 0;
+            bottom: 0;
+            transform: translate(50%, 50%);
+            cursor: se-resize;
+        }
+
+        &.west {
+            top: 50%;
+            left: 0;
+            transform: translate(-50%, -50%);
+            cursor: w-resize;
+        }
+
+        &.east {
+            top: 50%;
+            right: 0;
+            transform: translate(50%, -50%);
+            cursor: e-resize;
+        }
+    }
+    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
+        outline-width: $editor-selectednode-outline-width;
+        outline-style: solid;
+    }
+    .ProseMirror-hideselection { // sass-lint:disable-line class-name-format
+        caret-color: transparent;
+
+        *::selection,
+        *::-moz-selection {
+            background: transparent;
+        }
+    }
+
     // Toolbar
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
@@ -34722,6 +34676,7 @@ $editor-export-tool-icon-margin-x: .25em !default;
             padding: $padding-x;
             width: 100%;
             height: 100%;
+            position: relative;
             box-sizing: border-box;
             outline: none;
             white-space: pre-wrap;
@@ -35323,6 +35278,15 @@ $editor-export-tool-icon-margin-x: .25em !default;
         }
     }
 
+    // Resizable images
+    .k-editor-resize-handle {
+        background-color: $editor-resize-handle-bg;
+        border-color: $editor-resize-handle-border;
+    }
+    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
+        outline-color: $editor-selectednode-outline-color;
+    }
+
 
     // Insert table
     .k-ct-popup {
@@ -38721,12 +38685,12 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $chat-padding-x !default;
-$chat-message-box-padding-y: 10px !default;
+$chat-message-box-padding-x: $input-padding-x !default;
+$chat-message-box-padding-y: $input-padding-y !default;
 
-$chat-toolbar-padding-x: $chat-padding-x !default;
-$chat-toolbar-padding-y: 10px !default;
-$chat-toolbar-spacing: 20px !default;
+$chat-toolbar-padding-x: $toolbar-padding-x !default;
+$chat-toolbar-padding-y: $toolbar-padding-y !default;
+$chat-toolbar-spacing: $toolbar-spacing !default;
 $chat-toolbar-bg: $toolbar-bg !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
@@ -39045,14 +39009,24 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
 
     // Message box
     .k-message-box {
+        width: 100%;
+        height: auto;
         padding: $chat-message-box-padding-y $chat-message-box-padding-x;
+        box-sizing: border-box;
         border-width: 1px 0 0;
         border-style: solid;
-        flex: 0 0 auto;
+        flex: none;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
 
+        &:focus,
+        &.k-state-focus,
+        &:focus-within {
+            outline: 0;
+            box-shadow: none;
+        }
+
         // Input
         .k-input {
             padding: 0;
@@ -39190,11 +39164,17 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
 
     .k-chat-toolbar,
     .k-chat .k-toolbar-box {
+        padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
         width: 100%;
+        border-width: 1px 0 0;
         box-sizing: border-box;
+        flex: none;
         overflow: hidden;
         position: relative;
-        flex: 0 0 auto;
+
+        &::before {
+            display: none;
+        }
 
         .k-button-list {
             // Needed for native scrolling. Will uncoment when it's implemented.
@@ -39205,18 +39185,13 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             overflow: hidden;
             // overflow-x: auto;
             scroll-behavior: smooth;
-            padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
-
-            // fix for flex container disregarding the right padding
-            &::after {
-                content: "";
-                padding-right: $chat-toolbar-padding-x;
-            }
+        }
 
-            .k-button + .k-button {
-                margin-left: $chat-toolbar-spacing;
-                flex-shrink: 0;
-            }
+        .k-button {
+            border-color: transparent;
+            color: inherit;
+            background: none;
+            flex: none;
         }
 
 
@@ -39233,13 +39208,6 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             right: 0;
         }
 
-        .k-button {
-            border-width: 0;
-            color: inherit;
-            background: none;
-            flex-shrink: 0;
-        }
-
 
     }
 

package/package.json

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

package/scss/action-buttons/_layout.scss

@@ -59,6 +59,7 @@
 
     // Actions orientation
     .k-actions-horizontal {
+        width: 100%;
         flex-flow: row nowrap;
     }
     .k-actions-vertical {

package/scss/autocomplete/_layout.scss

@@ -33,26 +33,6 @@
             height: $input-icon-height;
         }
 
-
-        // Clear value
-        .k-clear-value {
-            visibility: hidden;
-        }
-        &:hover,
-        // &:focus-within,
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-        &:focus-within {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-
     }
 
 

package/scss/card/_layout.scss

@@ -329,6 +329,7 @@
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 

package/scss/chat/_layout.scss

@@ -266,14 +266,24 @@
 
     // Message box
     .k-message-box {
+        width: 100%;
+        height: auto;
         padding: $chat-message-box-padding-y $chat-message-box-padding-x;
+        box-sizing: border-box;
         border-width: 1px 0 0;
         border-style: solid;
-        flex: 0 0 auto;
+        flex: none;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
 
+        &:focus,
+        &.k-state-focus,
+        &:focus-within {
+            outline: 0;
+            box-shadow: none;
+        }
+
         // Input
         .k-input {
             padding: 0;
@@ -411,11 +421,17 @@
 
     .k-chat-toolbar,
     .k-chat .k-toolbar-box {
+        padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
         width: 100%;
+        border-width: 1px 0 0;
         box-sizing: border-box;
+        flex: none;
         overflow: hidden;
         position: relative;
-        flex: 0 0 auto;
+
+        &::before {
+            display: none;
+        }
 
         .k-button-list {
             // Needed for native scrolling. Will uncoment when it's implemented.
@@ -426,18 +442,13 @@
             overflow: hidden;
             // overflow-x: auto;
             scroll-behavior: smooth;
-            padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
-
-            // fix for flex container disregarding the right padding
-            &::after {
-                content: "";
-                padding-right: $chat-toolbar-padding-x;
-            }
+        }
 
-            .k-button + .k-button {
-                margin-left: $chat-toolbar-spacing;
-                flex-shrink: 0;
-            }
+        .k-button {
+            border-color: transparent;
+            color: inherit;
+            background: none;
+            flex: none;
         }
 
 
@@ -454,13 +465,6 @@
             right: 0;
         }
 
-        .k-button {
-            border-width: 0;
-            color: inherit;
-            background: none;
-            flex-shrink: 0;
-        }
-
 
     }
 

package/scss/chat/_variables.scss

@@ -32,12 +32,12 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $chat-padding-x !default;
-$chat-message-box-padding-y: 10px !default;
+$chat-message-box-padding-x: $input-padding-x !default;
+$chat-message-box-padding-y: $input-padding-y !default;
 
-$chat-toolbar-padding-x: $chat-padding-x !default;
-$chat-toolbar-padding-y: 10px !default;
-$chat-toolbar-spacing: 20px !default;
+$chat-toolbar-padding-x: $toolbar-padding-x !default;
+$chat-toolbar-padding-y: $toolbar-padding-y !default;
+$chat-toolbar-spacing: $toolbar-spacing !default;
 $chat-toolbar-bg: $toolbar-bg !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;

package/scss/checkbox/_theme.scss

@@ -11,7 +11,7 @@
 
 
     // Hover state
-    .k-checkbox:hover
+    .k-checkbox:hover,
     .k-checkbox.k-state-hover {
         @include fill(
             $checkbox-hovered-text,