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

package/dist/all.css

@@ -13900,6 +13900,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;
@@ -13912,6 +13914,8 @@ input.k-input {
 
 select.k-picker {
     padding: 8px 0px;
+    -webkit-appearance: auto;
+            appearance: auto;
 }
 
 .k-input-inner {
@@ -13983,6 +13987,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;
@@ -14034,18 +14040,28 @@ span.k-input-inner .k-value-text {
 }
 
 .k-input-button {
+    width: auto;
     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 {
+    width: auto;
     -ms-flex: none;
         flex: none;
     display: -ms-flexbox;
@@ -14056,7 +14072,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%;
@@ -14066,11 +14081,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 {
@@ -14957,8 +14968,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%;
 }
 
@@ -15016,6 +15027,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;
@@ -17733,6 +17745,7 @@ kendo-label.k-radio-label > .k-label {
 }
 
 .k-actions-horizontal {
+    width: 100%;
     -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
 }
@@ -20563,14 +20576,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;
 }
@@ -23599,6 +23604,7 @@ kendo-label.k-radio-label > .k-label {
     height: 100%;
 }
 
+.k-window-buttons,
 .k-window-buttongroup {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -24731,6 +24737,7 @@ kendo-card-footer {
     height: 20px;
     border-width: 0px 0px 0 0;
     border-style: solid;
+    box-sizing: border-box;
     position: absolute;
 }
 
@@ -33085,6 +33092,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 0 0;
     -ms-flex-negative: 0;
@@ -33151,6 +33251,7 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
     padding: 16px;
     width: 100%;
     height: 100%;
+    position: relative;
     box-sizing: border-box;
     outline: none;
     white-space: pre-wrap;
@@ -33732,6 +33833,15 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
     border-color: rgba(0, 0, 0, 0.12);
 }
 
+.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.1);
     color: white;
@@ -36624,11 +36734,14 @@ kendo-scheduler .k-event .k-event-actions,
 }
 
 .k-message-box {
-    padding: 10px 16px;
+    width: 100%;
+    height: auto;
+    padding: 8px 0px;
+    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;
@@ -36637,6 +36750,11 @@ kendo-scheduler .k-event .k-event-actions,
         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;
 }
@@ -36759,12 +36877,19 @@ kendo-scheduler .k-event .k-event-actions,
 
 .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,
@@ -36775,20 +36900,15 @@ kendo-scheduler .k-event .k-event-actions,
         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,
@@ -36810,15 +36930,6 @@ kendo-scheduler .k-event .k-event-actions,
     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

@@ -1592,6 +1592,8 @@ $enable-flex-classes: true !default;
 $enable-grid-classes: true !default;
 
 $use-calc-badge-size: true !default;
+$use-input-button-width: false !default;
+$use-input-spinner-width: false !default;
 $use-picker-select-width: false !default;
 
 
@@ -8777,18 +8779,15 @@ $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-
 $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
 
 
-// Spinner
+// Input actions
+$kendo-input-button-width: null !default;
 $kendo-input-spinner-width: null !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;
@@ -9885,6 +9884,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;
@@ -9895,6 +9895,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     }
     select.k-picker {
         padding: $kendo-input-padding-y $kendo-input-padding-x;
+        appearance: auto;
     }
 
 
@@ -9952,6 +9953,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;
 
@@ -9995,10 +9997,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;
@@ -10008,24 +10018,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;
             }
         }
     }
@@ -10169,17 +10175,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 );
             }
         }
     }
@@ -11380,7 +11386,7 @@ $window-sizes: (
         .k-daterangepicker-wrap,
         .k-timepicker,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
     }
@@ -11437,6 +11443,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;
@@ -15216,6 +15223,7 @@ $message-box-link-text-decoration: underline !default;
 
     // Actions orientation
     .k-actions-horizontal {
+        width: 100%;
         flex-flow: row nowrap;
     }
     .k-actions-vertical {
@@ -19298,12 +19306,6 @@ $datetime-select-pressed-gradient: null !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
@@ -24030,6 +24032,7 @@ $appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !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;
@@ -25715,6 +25718,7 @@ $card-focus-callout-box-shadow-w: null !default;
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 
@@ -36717,6 +36721,14 @@ $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
 $editor-export-tool-icon-margin-x: .5em !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/material/scss/editor/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/editor/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/editor/_layout.scss
@@ -36790,6 +36802,89 @@ $editor-export-tool-icon-margin-x: .5em !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;
@@ -36863,6 +36958,7 @@ $editor-export-tool-icon-margin-x: .5em !default;
             padding: $padding-x;
             width: 100%;
             height: 100%;
+            position: relative;
             box-sizing: border-box;
             outline: none;
             white-space: pre-wrap;
@@ -37484,6 +37580,15 @@ $editor-export-tool-icon-margin-x: .5em !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 {
@@ -40860,12 +40965,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: try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
@@ -41185,14 +41290,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;
@@ -41330,11 +41445,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.
@@ -41345,18 +41466,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;
         }
 
 
@@ -41373,13 +41489,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-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,7 +50,7 @@
     "postpublish": "echo 'no postpublish for material theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.0.0-alpha.0"
+    "@progress/kendo-theme-default": "^5.0.0-alpha.1"
   },
-  "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: false !default;
+$use-input-spinner-width: false !default;
 $use-picker-select-width: false !default;
 
 

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: try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;

package/scss/editor/_theme.scss

@@ -49,6 +49,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: .5em !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/input/_variables.scss

@@ -76,18 +76,15 @@ $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-
 $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
 
 
-// Spinner
+// Input actions
+$kendo-input-button-width: null !default;
 $kendo-input-spinner-width: null !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;