@progress/kendo-theme-bootstrap 4.42.0-dev.0 → 4.42.1-dev.2

package/dist/all.scss

@@ -914,11 +914,17 @@ $popover-header-padding-y: $spacer !default;
   @return red($value), green($value), blue($value);
 }
 
+// stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
-  @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @if $identifier == "body" and $target == "text" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  }
 }
 
-// stylelint-disable scss/dollar-variable-pattern
 @function map-loop($map, $func, $args...) {
   $_map: ();
 
@@ -1585,23 +1591,33 @@ $body-text-align:           null !default;
 //
 // Extends the default `$theme-colors` maps to help create our utilities.
 
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
 // scss-docs-start utilities-colors
-$utilities-colors: map-merge(
-  $theme-colors-rgb,
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
   (
     "black": to-rgb($black),
     "white": to-rgb($white),
-    "body":  to-rgb($body-color)
+    "body": to-rgb($body-color)
   )
 ) !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !default;
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // Links
@@ -2090,7 +2106,7 @@ $form-check-inline-margin-end:    1rem !default;
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
-$form-switch-color:               rgba(0, 0, 0, .25) !default;
+$form-switch-color:               rgba($black, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
@@ -2138,7 +2154,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $border-radius !default;
+$form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          $box-shadow-inset !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
@@ -2148,10 +2164,12 @@ $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focu
 $form-select-padding-y-sm:        $input-padding-y-sm !default;
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
 $form-select-font-size-sm:        $input-font-size-sm !default;
+$form-select-border-radius-sm:    $input-border-radius-sm !default;
 
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
+$form-select-border-radius-lg:    $input-border-radius-lg !default;
 
 $form-select-transition:          $input-transition !default;
 // scss-docs-end form-select-variables
@@ -2333,7 +2351,7 @@ $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
 $dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($gray-900, 10%) !default;
+$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
 $dropdown-link-hover-bg:            $gray-200 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
@@ -2538,14 +2556,14 @@ $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
 $toast-border-width:                1px !default;
-$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-color:                rgba($black, .1) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
 
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+$toast-header-border-color:         rgba($black, .05) !default;
 // scss-docs-end toast-variables
 
 
@@ -5088,6 +5106,16 @@ $display4-letter-spacing: null !default;
 
 // Component
 // #region @import "_border.scss"; -> packages/bootstrap/scss/utils/_border.scss
+$utils-border-radius: (
+    default: map-get( $spacing, 1 ),
+    0: 0,
+    sm: .2rem,
+    md: .25rem,
+    lg: .3rem,
+    circle: 50%,
+    pill: 9999px
+) !default;
+
 // #region @import "~@progress/kendo-theme-default/scss/utils/_border.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/utils/_border.scss
 @include exports( "utils/border" ) {
 
@@ -5184,6 +5212,11 @@ $display4-letter-spacing: null !default;
                 $_selector-suffix: if( $radius == default, "", "-#{$radius}" );
 
                 .k-#{$_selector-base}#{$_selector-suffix} {
+                    @each $prop in $props {
+                        #{$prop}: $value;
+                    }
+                }
+                .\!k-#{$_selector-base}#{$_selector-suffix} {
                     @each $prop in $props {
                         #{$prop}: $value !important;
                     }
@@ -9061,6 +9094,7 @@ $chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
             font-size: $chip-selected-icon-font-size;
         }
 
+        .k-chip.k-state-selected .k-selected-icon-wrapper,
         .k-chip.k-selected .k-selected-icon-wrapper {
             width: $chip-selected-icon-size;
             visibility: visible;
@@ -9080,6 +9114,7 @@ $chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
                 transition: width .2s, opacity .2s;
             }
 
+            &.k-state-selected .k-selected-icon-wrapper,
             &.k-selected .k-selected-icon-wrapper {
                 opacity: 1;
             }
@@ -9203,6 +9238,7 @@ $chip-error-focus-shadow: 0 0 0 3px rgba( $error, .16 ) !default;
 // #region @import "~@progress/kendo-theme-default/scss/chip/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/chip/_theme.scss
 @include exports("chip/theme") {
 
+    .k-selection-multiple .k-chip-has-icon.k-state-selected .k-selected-icon-wrapper,
     .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
         @include fill(
             $color: $chip-multiple-selected-icon-text,
@@ -10912,7 +10948,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;
@@ -10920,21 +10958,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;
-            }
-        }
     }
 
 
@@ -11452,10 +11475,6 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
                 border-width: 1px;
             }
         }
-
-        .k-separator {
-            height: 0;
-        }
     }
 
     .k-virtual-content {
@@ -12327,7 +12346,7 @@ $window-sizes: (
         .k-maskedtextbox,
         .k-textbox-container,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
 
@@ -12388,6 +12407,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;
@@ -13387,7 +13407,7 @@ $checkbox-ripple-opacity: .3 !default;
 
 
     // Hover state
-    .k-checkbox:hover
+    .k-checkbox:hover,
     .k-checkbox.k-state-hover {
         @include fill(
             $checkbox-hovered-text,
@@ -14164,6 +14184,17 @@ $switch-off-handle-hovered-gradient: null !default;
 
 // #endregion
 
+@include exports( "switch/layout/bootstrap" ) {
+
+    // Switch
+    .k-switch.k-disabled,
+    .k-switch.k-state-disabled {
+        opacity: 1;
+        filter: none;
+    }
+
+}
+
 // #endregion
 // #region @import "_theme.scss"; -> packages/bootstrap/scss/switch/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/switch/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/switch/_theme.scss
@@ -14332,17 +14363,11 @@ $switch-off-handle-hovered-gradient: null !default;
 
 @include exports( "switch/theme/bootstrap" ) {
 
-    // Switch
-    .k-switch.k-state-disabled {
-        opacity: 1;
-        filter: none;
-    }
-
     .k-switch-on.k-state-disabled {
 
         // Switch track
         .k-switch-container {
-            background-color: rgba( $switch-on-bg, .5 );
+            background-color: try-tint( $switch-on-bg, 50% );
         }
 
         // Switch thumb
@@ -15657,6 +15682,7 @@ $message-box-link-text-decoration: underline !default;
 
     // Actions orientation
     .k-actions-horizontal {
+        width: 100%;
         flex-flow: row nowrap;
     }
     .k-actions-vertical {
@@ -17756,19 +17782,6 @@ $slider-disabled-opacity: null !default;
 
 // #endregion
 
-@include exports("slider/theme/bootstrap") {
-
-    .k-slider {
-
-        .k-button {
-            &:active,
-            &.k-state-active {
-                @include box-shadow( $slider-button-focused-shadow );
-            }
-        }
-    }
-}
-
 // #endregion
 
 // #endregion
@@ -17977,26 +17990,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;
-            }
-        }
-
     }
 
 
@@ -18489,23 +18482,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;
@@ -19526,28 +19508,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 );
@@ -20785,26 +20745,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;
@@ -20892,16 +20837,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"] {
@@ -20911,11 +20846,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 });
-            }
         }
     }
 
@@ -20987,16 +20917,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"] {
@@ -21006,11 +20926,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 });
-            }
         }
     }
 
@@ -22284,18 +22199,6 @@ $dropdownlist-focused-shadow: $button-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;
-                }
-            }
         }
 
     }
@@ -22667,18 +22570,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 {
@@ -22700,17 +22595,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;
@@ -23511,6 +23395,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;
@@ -25153,7 +25038,6 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
             height: auto;
             border-width: 0 0 0 1px;
             border-style: solid;
-            flex-shrink: 0;
         }
     }
 
@@ -25715,6 +25599,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;
@@ -27242,13 +27127,6 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
         flex-shrink: 0;
         flex-basis: auto;
         gap: $card-actions-gap;
-
-        > .k-button {
-            padding-left: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            padding-right: calc( #{$card-body-padding-x} - ( #{$card-actions-padding-x} + #{$button-border-width} ) );
-            max-width: 100%;
-            white-space: normal;
-        }
     }
 
 
@@ -27263,40 +27141,9 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
     .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
 
-    // Streched actions
-    .k-card-actions-stretched {
-        padding: 0;
-        gap: 0;
-
-        > .k-button,
-        > .k-card-action {
-            flex: 1 1 auto;
-        }
-
-        // TODO: refactor once we have button size
-        .k-button {
-            @include border-radius( 0 );
-            padding-top: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-            padding-bottom: calc( #{$card-actions-padding-y} + #{$button-padding-y} );
-        }
-
-        .k-card & {
-            border-top-width: $card-actions-border-width;
-        }
-        .k-card-horizontal > & {
-            border-top-width: 0;
-            border-inline-start-width: $card-actions-border-width;
-        }
-        .k-card-vertical > & {
-            border-top-width: $card-actions-border-width;
-        }
-
-        &.k-card-actions-horizontal > .k-card-action + .k-card-action {
-            border-inline-start-width: $card-actions-border-width;
-        }
-        &.k-card-actions-vertical > .k-card-action + .k-card-action {
-            border-top-width: $card-actions-border-width;
-        }
+    // Stretched actions
+    .k-card-actions-stretched > * {
+        flex: 1 1 auto;
     }
 
 
@@ -27422,6 +27269,7 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
         height: $card-callout-height;
         border-width: $card-border-width $card-border-width 0 0;
         border-style: solid;
+        box-sizing: border-box;
         position: absolute;
     }
 
@@ -27470,33 +27318,6 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
 
 
 
-@include exports("card/layout/rtl") {
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        .k-card-actions-stretched {
-            .k-card-action + .k-card-action {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-        .k-card-horizontal {
-            > .k-card-actions-stretched,
-            .k-card-actions-vertical {
-                border-right-width: $card-actions-border-width;
-                border-left-width: 0;
-            }
-        }
-
-    }
-
-}
-
-
-
-
 @include exports("card/layout/ie11") {
 
     .k-ie11 {
@@ -27558,7 +27379,8 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
 
 
     // Separator
-    .k-card-separator {
+    .k-card-separator,
+    .k-card .k-separator {
         border-color: $card-border;
     }
 
@@ -34734,10 +34556,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
     .k-spreadsheet-popup {
         padding: 0;
 
-        .k-separator {
-            display: block;
-        }
-
         .k-button {
             @include border-radius( 0 );
             border-width: 0;
@@ -35896,6 +35714,27 @@ $pivotgrid-remove-text: null !default;
 }
 
 
+@include exports( "pivotgrid/layout/export" ) {
+
+    .k-pdf-export-shadow {
+
+        .k-pivotgrid {
+            height: auto !important; // sass-lint:disable-line no-important
+        }
+
+        .k-pivotgrid-values  {
+            height: auto;
+            overflow: visible;
+        }
+
+        .k-pivotgrid-column-headers .k-pivotgrid-table {
+            padding-inline-end: 0;
+        }
+
+    }
+}
+
+
 @include exports("pivotgrid/layout/legacy") {
 
     .k-pivot {
@@ -37972,6 +37811,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/bootstrap/scss/editor/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/editor/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/editor/_layout.scss
@@ -38045,6 +37892,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;
@@ -38118,6 +38048,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;
@@ -38722,6 +38653,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 {
@@ -42170,12 +42110,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;
@@ -42495,14 +42435,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;
@@ -42640,11 +42590,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.
@@ -42655,18 +42611,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;
         }
 
 
@@ -42683,13 +42634,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;
-        }
-
 
     }