@progress/kendo-theme-default 5.0.0-alpha.0 → 5.0.0-alpha.1

package/dist/all.css

@@ -13164,6 +13164,8 @@ kendo-badge-container {
     display: inline-flex;
     -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
+    -ms-flex-align: stretch;
+        align-items: stretch;
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13176,6 +13178,8 @@ input.k-input {
 
 select.k-picker {
     padding: 4px 8px;
+    -webkit-appearance: auto;
+            appearance: auto;
 }
 
 .k-input-inner {
@@ -13247,6 +13251,8 @@ span.k-input-inner .k-value-text {
 .k-input-suffix {
     display: -ms-flexbox;
     display: flex;
+    -ms-flex-flow: row nowrap;
+        flex-flow: row nowrap;
     -ms-flex-align: center;
         align-items: center;
     -ms-flex: none;
@@ -13298,20 +13304,28 @@ span.k-input-inner .k-value-text {
 }
 
 .k-input-button {
-    min-width: calc(1.4285714286em + 8px);
+    width: calc(1.4285714286em + 8px);
     border-width: 0;
     -ms-flex: none;
         flex: none;
+    aspect-ratio: auto;
+    color: inherit;
+    background: none;
     box-shadow: none;
 }
 
+.k-input-button > .k-button-icon {
+    min-width: auto !important;
+    min-height: auto !important;
+}
+
 .k-picker .k-input-button {
     color: inherit;
     background: none;
 }
 
 .k-input-spinner {
-    min-width: calc(1.4285714286em + 8px);
+    width: calc(1.4285714286em + 8px);
     -ms-flex: none;
         flex: none;
     display: -ms-flexbox;
@@ -13322,7 +13336,6 @@ span.k-input-inner .k-value-text {
 
 .k-input-spinner .k-spinner-increase,
 .k-input-spinner .k-spinner-decrease {
-    padding: 0;
     border-width: 0;
     -ms-flex: 1 1 50%;
         flex: 1 1 50%;
@@ -13332,11 +13345,7 @@ span.k-input-inner .k-value-text {
 
 .k-input-spinner .k-spinner-increase > .k-button-icon,
 .k-input-spinner .k-spinner-decrease > .k-button-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
+    margin: -1em 0;
 }
 
 .k-searchbar {
@@ -14165,8 +14174,8 @@ kendo-label > .k-label {
 .k-form .k-daterangepicker-wrap,
 .k-form .k-timepicker,
 .k-form .k-floating-label-container {
-    display: -ms-flexbox;
-    display: flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
     width: 100%;
 }
 
@@ -14224,6 +14233,7 @@ kendo-label > .k-label {
     margin-right: 10px;
     padding-top: 5px;
     width: 25%;
+    text-align: end;
     -ms-flex-direction: column;
         flex-direction: column;
     -ms-flex-align: end;
@@ -16719,6 +16729,7 @@ kendo-label.k-radio-label > .k-label {
 }
 
 .k-actions-horizontal {
+    width: 100%;
     -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
 }
@@ -19460,14 +19471,6 @@ kendo-label.k-radio-label > .k-label {
         transform: translateX(50%);
 }
 
-.k-dateinput .k-link-increase .k-icon {
-    bottom: -2px;
-}
-
-.k-dateinput .k-link-decrease .k-icon {
-    top: -2px;
-}
-
 .k-rtl .k-dateinput, .k-dateinput[dir="rtl"] {
     text-align: right;
 }
@@ -22326,6 +22329,7 @@ kendo-label.k-radio-label > .k-label {
     height: 100%;
 }
 
+.k-window-buttons,
 .k-window-buttongroup {
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
@@ -23436,6 +23440,7 @@ kendo-card-footer {
     height: 20px;
     border-width: 1px 1px 0 0;
     border-style: solid;
+    box-sizing: border-box;
     position: absolute;
 }
 
@@ -31038,6 +31043,99 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
     overflow: auto;
 }
 
+.k-editor-resize-handles-wrapper {
+    position: absolute;
+    visibility: hidden;
+}
+
+.k-editor-resize-handle {
+    width: 5px;
+    height: 5px;
+    border-width: 1px;
+    border-style: solid;
+    position: absolute;
+    visibility: visible;
+    z-index: 100;
+}
+
+.k-editor-resize-handle.northwest {
+    top: 0;
+    left: 0;
+    -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    cursor: nw-resize;
+}
+
+.k-editor-resize-handle.north {
+    top: 0;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    cursor: n-resize;
+}
+
+.k-editor-resize-handle.northeast {
+    top: 0;
+    right: 0;
+    -ms-transform: translate(50%, -50%);
+        transform: translate(50%, -50%);
+    cursor: ne-resize;
+}
+
+.k-editor-resize-handle.southwest {
+    left: 0;
+    bottom: 0;
+    -ms-transform: translate(-50%, 50%);
+        transform: translate(-50%, 50%);
+    cursor: sw-resize;
+}
+
+.k-editor-resize-handle.south {
+    bottom: 0;
+    left: 50%;
+    -ms-transform: translate(-50%, 50%);
+        transform: translate(-50%, 50%);
+    cursor: s-resize;
+}
+
+.k-editor-resize-handle.southeast {
+    right: 0;
+    bottom: 0;
+    -ms-transform: translate(50%, 50%);
+        transform: translate(50%, 50%);
+    cursor: se-resize;
+}
+
+.k-editor-resize-handle.west {
+    top: 50%;
+    left: 0;
+    -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    cursor: w-resize;
+}
+
+.k-editor-resize-handle.east {
+    top: 50%;
+    right: 0;
+    -ms-transform: translate(50%, -50%);
+        transform: translate(50%, -50%);
+    cursor: e-resize;
+}
+
+.ProseMirror-selectednode {
+    outline-width: 2px;
+    outline-style: solid;
+}
+
+.ProseMirror-hideselection {
+    caret-color: transparent;
+}
+
+.ProseMirror-hideselection *::selection,
+.ProseMirror-hideselection *::-moz-selection {
+    background: transparent;
+}
+
 .k-editor > .k-toolbar {
     border-width: 0 0 1px 0;
     -ms-flex-negative: 0;
@@ -31104,6 +31202,7 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
     padding: 8px;
     width: 100%;
     height: 100%;
+    position: relative;
     box-sizing: border-box;
     outline: none;
     white-space: pre-wrap;
@@ -31636,6 +31735,15 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
     border-color: rgba(0, 0, 0, 0.08);
 }
 
+.k-editor-resize-handle {
+    background-color: #ffffff;
+    border-color: #000000;
+}
+
+.ProseMirror-selectednode {
+    outline-color: #8cf;
+}
+
 .k-ct-popup .k-state-selected {
     border-color: rgba(0, 0, 0, 0.08);
     color: #ffffff;
@@ -34355,11 +34463,14 @@ kendo-scheduler .k-recurrence-editor {
 }
 
 .k-message-box {
-    padding: 10px 16px;
+    width: 100%;
+    height: auto;
+    padding: 4px 8px;
+    box-sizing: border-box;
     border-width: 1px 0 0;
     border-style: solid;
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
+    -ms-flex: none;
+        flex: none;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-flow: row nowrap;
@@ -34368,6 +34479,11 @@ kendo-scheduler .k-recurrence-editor {
         align-items: center;
 }
 
+.k-message-box:focus, .k-message-box.k-state-focus, .k-message-box:focus-within {
+    outline: 0;
+    box-shadow: none;
+}
+
 .k-message-box .k-input {
     padding: 0;
 }
@@ -34490,12 +34606,19 @@ kendo-scheduler .k-recurrence-editor {
 
 .k-chat-toolbar,
 .k-chat .k-toolbar-box {
+    padding: 8px 8px;
     width: 100%;
+    border-width: 1px 0 0;
     box-sizing: border-box;
+    -ms-flex: none;
+        flex: none;
     overflow: hidden;
     position: relative;
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
+}
+
+.k-chat-toolbar::before,
+.k-chat .k-toolbar-box::before {
+    display: none;
 }
 
 .k-chat-toolbar .k-button-list,
@@ -34506,20 +34629,15 @@ kendo-scheduler .k-recurrence-editor {
         flex-flow: row nowrap;
     overflow: hidden;
     scroll-behavior: smooth;
-    padding: 10px 16px;
-}
-
-.k-chat-toolbar .k-button-list::after,
-.k-chat .k-toolbar-box .k-button-list::after {
-    content: "";
-    padding-right: 16px;
 }
 
-.k-chat-toolbar .k-button-list .k-button + .k-button,
-.k-chat .k-toolbar-box .k-button-list .k-button + .k-button {
-    margin-left: 20px;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
+.k-chat-toolbar .k-button,
+.k-chat .k-toolbar-box .k-button {
+    border-color: transparent;
+    color: inherit;
+    background: none;
+    -ms-flex: none;
+        flex: none;
 }
 
 .k-chat-toolbar .k-scroll-button,
@@ -34541,15 +34659,6 @@ kendo-scheduler .k-recurrence-editor {
     right: 0;
 }
 
-.k-chat-toolbar .k-button,
-.k-chat .k-toolbar-box .k-button {
-    border-width: 0;
-    color: inherit;
-    background: none;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-}
-
 .k-rtl .k-message-group:not(.k-alt),
 [dir="rtl"] .k-message-group:not(.k-alt) {
     text-align: right;

package/dist/all.scss

@@ -837,6 +837,8 @@ $enable-flex-classes: true !default;
 $enable-grid-classes: true !default;
 
 $use-calc-badge-size: true !default;
+$use-input-button-width: true !default;
+$use-input-spinner-width: true !default;
 $use-picker-select-width: true !default;
 
 
@@ -7820,18 +7822,15 @@ $picker-select-calc-size-sm: $kendo-input-inner-calc-height-sm !default;
 $picker-select-calc-size-lg: $kendo-input-inner-calc-height-lg !default;
 
 
-// Spinner
+// Input actions
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
 $kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
-$kendo-input-spinner-icon-offset: 2px !default;
 
 
 // Input icon
 $kendo-input-icon-width: calc( #{$icon-size} + #{$kendo-input-padding-y * 2} ) !default;
 $kendo-input-icon-height: calc( #{$kendo-input-line-height * $kendo-input-font-size} + #{$kendo-input-padding-y * 2} ) !default;
 
-$kendo-input-icon-text: $subtle-text !default;
-$kendo-input-icon-opacity: null !default;
-
 
 // Input separator
 $kendo-input-separator-color: $kendo-input-text !default;
@@ -8686,6 +8685,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         box-shadow: none;
         display: inline-flex;
         flex-flow: row nowrap;
+        align-items: stretch;
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -8696,6 +8696,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     }
     select.k-picker {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
+        appearance: auto;
     }
 
 
@@ -8753,6 +8754,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     .k-input-prefix,
     .k-input-suffix {
         display: flex;
+        flex-flow: row nowrap;
         align-items: center;
         flex: none;
 
@@ -8796,10 +8798,18 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
     // Input button
     .k-input-button {
-        min-width: $kendo-input-spinner-width;
+        width: if( $use-input-button-width, $kendo-input-button-width, auto );
         border-width: 0;
         flex: none;
+        aspect-ratio: auto;
+        color: inherit;
+        background: none;
         box-shadow: none;
+
+        > .k-button-icon {
+            min-width: auto !important; // sass-lint:disable-line no-important
+            min-height: auto !important; // sass-lint:disable-line no-important
+        }
     }
     .k-picker .k-input-button {
         color: inherit;
@@ -8809,24 +8819,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
     // Input spinner
     .k-input-spinner {
-        min-width: $kendo-input-spinner-width;
+        width: if( $use-input-spinner-width, $kendo-input-spinner-width, auto );
         flex: none;
         display: flex;
         flex-flow: column nowrap;
 
         .k-spinner-increase,
         .k-spinner-decrease {
-            padding: 0;
             border-width: 0;
             flex: 1 1 50%;
             aspect-ratio: auto;
             box-shadow: none;
 
             > .k-button-icon {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
+                margin: -1em 0;
             }
         }
     }
@@ -8947,17 +8953,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-button-focus-border,
                 $kendo-button-focus-gradient
             );
-            @include box-shadow( $kendo-input-focus-shadow );
+            @include box-shadow( $kendo-button-focus-shadow );
         }
 
         // Invalid
         &:invalid,
         &.k-invalid {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
     }
@@ -10065,7 +10071,7 @@ $window-sizes: (
         .k-daterangepicker-wrap,
         .k-timepicker,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
     }
@@ -10122,6 +10128,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;
@@ -13538,6 +13545,7 @@ $message-box-link-text-decoration: underline !default;
 
     // Actions orientation
     .k-actions-horizontal {
+        width: 100%;
         flex-flow: row nowrap;
     }
     .k-actions-vertical {
@@ -17348,12 +17356,6 @@ $datetime-select-pressed-gradient: $kendo-button-active-gradient !default;
                 transform: translateX(50%);
             }
         }
-        .k-link-increase .k-icon {
-            bottom: -$kendo-input-spinner-icon-offset;
-        }
-        .k-link-decrease .k-icon {
-            top: -$kendo-input-spinner-icon-offset;
-        }
 
 
         // RTL
@@ -21633,6 +21635,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;
@@ -23210,6 +23213,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;
     }
 
@@ -33237,6 +33241,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") {
@@ -33309,6 +33321,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;
@@ -33382,6 +33477,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;
@@ -33945,6 +34041,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 {
@@ -37043,12 +37148,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: $kendo-input-padding-x !default;
+$chat-message-box-padding-y: $kendo-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;
@@ -37367,14 +37472,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;
@@ -37512,11 +37627,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.
@@ -37527,18 +37648,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;
         }
 
 
@@ -37555,13 +37671,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": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "prepublishOnly": "echo 'no prebublish for default theme'",
     "postpublish": "echo 'no postpublish for default theme'"
   },
-  "gitHead": "3fd060a3f688d79324c6e976857536557f71dc11"
+  "gitHead": "f7771e7fd26ff92503ccbdda09fbbd8a7578abb2"
 }

package/scss/_variables.scss

@@ -11,6 +11,8 @@ $enable-flex-classes: true !default;
 $enable-grid-classes: true !default;
 
 $use-calc-badge-size: true !default;
+$use-input-button-width: true !default;
+$use-input-spinner-width: true !default;
 $use-picker-select-width: true !default;
 
 

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/card/_layout.scss

@@ -325,6 +325,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: $kendo-input-padding-x !default;
+$chat-message-box-padding-y: $kendo-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/datetime/_layout.scss

@@ -68,12 +68,6 @@
                 transform: translateX(50%);
             }
         }
-        .k-link-increase .k-icon {
-            bottom: -$kendo-input-spinner-icon-offset;
-        }
-        .k-link-decrease .k-icon {
-            top: -$kendo-input-spinner-icon-offset;
-        }
 
 
         // RTL

package/scss/editor/_layout.scss

@@ -68,6 +68,89 @@
         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;
@@ -141,6 +224,7 @@
             padding: $padding-x;
             width: 100%;
             height: 100%;
+            position: relative;
             box-sizing: border-box;
             outline: none;
             white-space: pre-wrap;

package/scss/editor/_theme.scss

@@ -52,6 +52,15 @@
         }
     }
 
+    // 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 {

package/scss/editor/_variables.scss

@@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
 $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

package/scss/forms/_layout.scss

@@ -148,7 +148,7 @@
         .k-daterangepicker-wrap,
         .k-timepicker,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
     }
@@ -205,6 +205,7 @@
                 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;

package/scss/input/_layout.scss

@@ -17,6 +17,7 @@
         box-shadow: none;
         display: inline-flex;
         flex-flow: row nowrap;
+        align-items: stretch;
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -27,6 +28,7 @@
     }
     select.k-picker {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
+        appearance: auto;
     }
 
 
@@ -84,6 +86,7 @@
     .k-input-prefix,
     .k-input-suffix {
         display: flex;
+        flex-flow: row nowrap;
         align-items: center;
         flex: none;
 
@@ -127,10 +130,18 @@
 
     // Input button
     .k-input-button {
-        min-width: $kendo-input-spinner-width;
+        width: if( $use-input-button-width, $kendo-input-button-width, auto );
         border-width: 0;
         flex: none;
+        aspect-ratio: auto;
+        color: inherit;
+        background: none;
         box-shadow: none;
+
+        > .k-button-icon {
+            min-width: auto !important; // sass-lint:disable-line no-important
+            min-height: auto !important; // sass-lint:disable-line no-important
+        }
     }
     .k-picker .k-input-button {
         color: inherit;
@@ -140,24 +151,20 @@
 
     // Input spinner
     .k-input-spinner {
-        min-width: $kendo-input-spinner-width;
+        width: if( $use-input-spinner-width, $kendo-input-spinner-width, auto );
         flex: none;
         display: flex;
         flex-flow: column nowrap;
 
         .k-spinner-increase,
         .k-spinner-decrease {
-            padding: 0;
             border-width: 0;
             flex: 1 1 50%;
             aspect-ratio: auto;
             box-shadow: none;
 
             > .k-button-icon {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
+                margin: -1em 0;
             }
         }
     }

package/scss/input/_theme.scss

@@ -69,17 +69,17 @@
                 $kendo-button-focus-border,
                 $kendo-button-focus-gradient
             );
-            @include box-shadow( $kendo-input-focus-shadow );
+            @include box-shadow( $kendo-button-focus-shadow );
         }
 
         // Invalid
         &:invalid,
         &.k-invalid {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
     }

package/scss/input/_variables.scss

@@ -76,18 +76,15 @@ $picker-select-calc-size-sm: $kendo-input-inner-calc-height-sm !default;
 $picker-select-calc-size-lg: $kendo-input-inner-calc-height-lg !default;
 
 
-// Spinner
+// Input actions
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
 $kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
-$kendo-input-spinner-icon-offset: 2px !default;
 
 
 // Input icon
 $kendo-input-icon-width: calc( #{$icon-size} + #{$kendo-input-padding-y * 2} ) !default;
 $kendo-input-icon-height: calc( #{$kendo-input-line-height * $kendo-input-font-size} + #{$kendo-input-padding-y * 2} ) !default;
 
-$kendo-input-icon-text: $subtle-text !default;
-$kendo-input-icon-opacity: null !default;
-
 
 // Input separator
 $kendo-input-separator-color: $kendo-input-text !default;

package/scss/window/_layout.scss

@@ -129,6 +129,7 @@
     }
 
     // Buttons Layout
+    .k-window-buttons,
     .k-window-buttongroup {
         @include border-bottom-radius( $window-border-radius );
         padding: $window-buttongroup-padding-y $window-buttongroup-padding-x;