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

package/scss/grid/_variables.scss

@@ -1,172 +1,270 @@
 // Grid
-$grid-border-width: 1px !default;
-$grid-font-family: $font-family !default;
-$grid-font-size: $font-size !default;
-$grid-line-height: $line-height !default;
+$kendo-grid-border-width: 1px !default;
+$kendo-grid-font-family: $font-family !default;
+$kendo-grid-font-size: $font-size !default;
+$kendo-grid-line-height: $line-height !default;
 
-$grid-padding-x: $table-cell-padding-x !default;
-$grid-padding-y: $table-cell-padding-y !default;
-
-$grid-header-padding-x: $grid-padding-x !default;
-$grid-header-padding-y: $grid-padding-y !default;
-$grid-header-font-size: null !default;
+/// Horizontal padding of the grid.
+/// @group grid
+$kendo-grid-padding-x: $kendo-table-cell-padding-x-md !default;
+/// Vertical padding of the grid.
+/// @group grid
+$kendo-grid-padding-y: $kendo-table-cell-padding-y-md !default;
 
-$grid-footer-padding-x: $grid-header-padding-x !default;
-$grid-footer-padding-y: $grid-header-padding-y !default;
+/// Horizontal padding of the grid header.
+/// @group grid
+$kendo-grid-header-padding-x: $kendo-grid-padding-x !default;
+/// Vertical padding of the grid header.
+/// @group grid
+$kendo-grid-header-padding-y: $kendo-grid-padding-y !default;
 
-$grid-grouping-header-padding-x: $grid-padding-y !default;
-$grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
+/// Horizontal padding of the grid grouping header.
+/// @group grid
+$kendo-grid-grouping-header-padding-x: $kendo-grid-padding-y !default;
+/// Vertical padding of the grid grouping header.
+/// @group grid
+$kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-x !default;
 
-$grid-filter-cell-padding-x: $grid-padding-y !default;
-$grid-filter-cell-padding-y: $grid-filter-cell-padding-x !default;
+/// Horizontal padding of the grid cell.
+/// @group grid
+$kendo-grid-cell-padding-x: $kendo-grid-padding-x !default;
+/// Vertical padding of the grid cell.
+/// @group grid
+$kendo-grid-cell-padding-y: $kendo-grid-padding-y !default;
 
-$grid-toolbar-padding-x: $toolbar-padding-x !default;
-$grid-toolbar-padding-y: $toolbar-padding-y !default;
-$grid-toolbar-spacing: $toolbar-spacing !default;
-$grid-toolbar-border-width: $grid-border-width !default;
+/// Horizontal padding of the grid filter cell.
+/// @group grid
+$kendo-grid-filter-cell-padding-x: $kendo-grid-padding-y !default;
+/// Vertical padding of the grid filter cell.
+/// @group grid
+$kendo-grid-filter-cell-padding-y: $kendo-grid-filter-cell-padding-x !default;
 
-$grid-cell-padding-x: $grid-padding-x !default;
-$grid-cell-padding-y: $grid-padding-y !default;
-$grid-cell-horizontal-border-width: 0px !default;
-$grid-cell-vertical-border-width: 1px !default;
+/// Horizontal padding of the grid edit cell.
+/// @group grid
+$kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
+/// Vertical padding of the grid filter cell.
+/// @group grid
+$kendo-grid-edit-cell-padding-y: 3px !default;
+
+$kendo-grid-group-dropclue-size: 6px !default;
+$kendo-grid-group-dropclue-line-size: k-math-div( $kendo-grid-group-dropclue-size, 3 ) !default;
+$kendo-grid-group-dropclue-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-dropclue-size}) !default;
+$kendo-grid-group-dropclue-top: 3px !default;
+
+$kendo-grid-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-padding-y-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-grid-header-padding-x-sm: $kendo-grid-padding-x-sm !default;
+$kendo-grid-header-padding-y-sm: $kendo-grid-padding-y-sm !default;
+$kendo-grid-grouping-header-padding-x-sm: $kendo-grid-padding-x-sm !default;
+$kendo-grid-grouping-header-padding-y-sm: $kendo-grid-padding-y-sm !default;
+$kendo-grid-cell-padding-x-sm: $kendo-grid-padding-x-sm !default;
+$kendo-grid-cell-padding-y-sm: $kendo-grid-padding-y-sm !default;
+$kendo-grid-filter-cell-padding-x-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-grid-filter-cell-padding-y-sm: $kendo-grid-filter-cell-padding-x-sm !default;
+$kendo-grid-edit-cell-padding-x-sm: $kendo-grid-cell-padding-x-sm !default;
+$kendo-grid-edit-cell-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-grid-group-dropclue-height-sm: calc( #{$kendo-chip-calc-size-sm} + #{$kendo-grid-group-dropclue-size}) !default;
+
+$kendo-grid-padding-x-md: $kendo-grid-padding-x !default;
+$kendo-grid-padding-y-md: $kendo-grid-padding-y !default;
+$kendo-grid-header-padding-x-md: $kendo-grid-header-padding-x !default;
+$kendo-grid-header-padding-y-md: $kendo-grid-header-padding-y !default;
+$kendo-grid-grouping-header-padding-x-md: $kendo-grid-grouping-header-padding-x !default;
+$kendo-grid-grouping-header-padding-y-md: $kendo-grid-grouping-header-padding-y !default;
+$kendo-grid-cell-padding-x-md: $kendo-grid-cell-padding-x !default;
+$kendo-grid-cell-padding-y-md: $kendo-grid-cell-padding-y !default;
+$kendo-grid-filter-cell-padding-x-md: $kendo-grid-filter-cell-padding-x !default;
+$kendo-grid-filter-cell-padding-y-md: $kendo-grid-filter-cell-padding-y !default;
+$kendo-grid-edit-cell-padding-x-md: $kendo-grid-edit-cell-padding-x !default;
+$kendo-grid-edit-cell-padding-y-md: $kendo-grid-edit-cell-padding-y !default;
+$kendo-grid-group-dropclue-height-md: $kendo-grid-group-dropclue-height !default;
+
+
+// Kendo Grid sizes
+$kendo-grid-sizes: (
+    sm: (
+        header-padding-x: $kendo-grid-header-padding-x-sm,
+        header-padding-y: $kendo-grid-header-padding-y-sm,
+        grouping-header-padding-x: $kendo-grid-grouping-header-padding-x-sm,
+        grouping-header-padding-y: $kendo-grid-grouping-header-padding-y-sm,
+        cell-padding-x: $kendo-grid-cell-padding-x-sm,
+        cell-padding-y: $kendo-grid-cell-padding-y-sm,
+        filter-cell-padding-x: $kendo-grid-filter-cell-padding-x-sm,
+        filter-cell-padding-y: $kendo-grid-filter-cell-padding-y-sm,
+        edit-cell-padding-x: $kendo-grid-edit-cell-padding-x-sm,
+        edit-cell-padding-y: $kendo-grid-edit-cell-padding-y-sm,
+        button-padding-y: $kendo-button-padding-y-sm,
+        button-calc-size: $kendo-button-calc-size-sm,
+        group-dropclue-height: $kendo-grid-group-dropclue-height-sm
+    ),
+    md: (
+        header-padding-x: $kendo-grid-header-padding-x-md,
+        header-padding-y: $kendo-grid-header-padding-y-md,
+        grouping-header-padding-x: $kendo-grid-grouping-header-padding-x-md,
+        grouping-header-padding-y: $kendo-grid-grouping-header-padding-y-md,
+        cell-padding-x: $kendo-grid-cell-padding-x-md,
+        cell-padding-y: $kendo-grid-cell-padding-y-md,
+        filter-cell-padding-x: $kendo-grid-filter-cell-padding-x-md,
+        filter-cell-padding-y: $kendo-grid-filter-cell-padding-y-md,
+        edit-cell-padding-x: $kendo-grid-edit-cell-padding-x-md,
+        edit-cell-padding-y: $kendo-grid-edit-cell-padding-y-md,
+        button-padding-y: $kendo-button-padding-y-md,
+        button-calc-size: $kendo-button-calc-size-md,
+        group-dropclue-height: $kendo-grid-group-dropclue-height-md
+    ),
+) !default;
+
+$kendo-grid-header-font-size: null !default;
+$kendo-grid-header-first-border: 1px !default;
+$kendo-grid-header-menu-icon-spacing: $icon-spacing !default;
+
+$kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-icon-spacing} ) !default;
+
+$kendo-grid-toolbar-border-width: $kendo-grid-border-width !default;
+
+$kendo-grid-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width !default;
+$kendo-grid-cell-vertical-border-width: $kendo-table-cell-vertical-border-width !default;
+
+$kendo-grid-cell-placeholder-line-width: 80% !default;
 
-$grid-cell-placeholder-line-width: 80% !default;
 
 /// Background color of the grid component
 /// @group grid
-$grid-bg: $component-bg !default;
+$kendo-grid-bg: $kendo-table-bg !default;
 /// Text color of the grid component
 /// @group grid
-$grid-text: $component-text !default;
+$kendo-grid-text: $kendo-table-text !default;
 /// Border color of the grid component
 /// @group grid
-$grid-border: $component-border !default;
+$kendo-grid-border: $kendo-table-border !default;
 
 /// Background color of grid header
 /// @group grid
-$grid-header-bg: $header-bg !default;
+$kendo-grid-header-bg: $kendo-table-header-bg !default;
 /// Text color of grid header
 /// @group grid
-$grid-header-text: $header-text !default;
+$kendo-grid-header-text: $kendo-table-header-text !default;
 /// Border color of grid header
 /// @group grid
-$grid-header-border: $grid-border !default;
+$kendo-grid-header-border: $kendo-table-header-border !default;
 /// Background gradient of grid header
 /// @group grid
-$grid-header-gradient: $header-gradient !default;
+$kendo-grid-header-gradient: $kendo-table-header-gradient !default;
 
 /// Background color of grid footer
 /// @group grid
-$grid-footer-bg: $grid-header-bg !default;
+$kendo-grid-footer-bg: $kendo-grid-header-bg !default;
 /// Text color of grid footer
 /// @group grid
-$grid-footer-text: $grid-header-text !default;
+$kendo-grid-footer-text: $kendo-grid-header-text !default;
 /// Border color of grid footer
 /// @group grid
-$grid-footer-border: $grid-header-border !default;
+$kendo-grid-footer-border: $kendo-grid-header-border !default;
 
 /// Background color of alternating rows in grid
 /// @group grid
-$grid-alt-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$kendo-grid-alt-bg: $kendo-table-alt-row-bg !default;
 /// Text color of alternating rows in grid
 /// @group grid
-$grid-alt-text: null !default;
+$kendo-grid-alt-text: $kendo-table-alt-row-text !default;
 /// Border color of alternating rows in grid
 /// @group grid
-$grid-alt-border: null !default;
+$kendo-grid-alt-border: $kendo-table-alt-row-border !default;
 
 /// Background color of hovered rows in grid
 /// @group grid
-$grid-hovered-bg: darken($grid-bg, 7%) !default;
+$kendo-grid-hover-bg: $kendo-table-hover-bg !default;
 /// Text color of hovered rows in grid
 /// @group grid
-$grid-hovered-text: null !default;
+$kendo-grid-hover-text: $kendo-table-hover-text !default;
 /// Border color of hovered rows in grid
 /// @group grid
-$grid-hovered-border: null !default;
+$kendo-grid-hover-border: $kendo-table-hover-border !default;
 
 /// Background color of selected rows in grid
 /// @group grid
-$grid-selected-bg: rgba($selected-bg, .25) !default;
+$kendo-grid-selected-bg: $kendo-table-selected-bg !default;
 /// Text color of selected rows in grid
 /// @group grid
-$grid-selected-text: null !default;
+$kendo-grid-selected-text: $kendo-table-selected-text !default;
 /// Border color of selected rows in grid
 /// @group grid
-$grid-selected-border: null !default;
+$kendo-grid-selected-border: $kendo-table-selected-border !default;
 
-$grid-selected-alt-bg: shade($grid-selected-bg, .4) !default;
-$grid-selected-hovered-bg: shade($grid-selected-bg, .7) !default;
+$kendo-grid-grouping-row-bg: $base-bg !default;
+$kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
-$grid-grouping-row-bg: $base-bg !default;
-$grid-grouping-row-text: $grid-text !default;
+$kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
+$kendo-grid-sorted-bg: rgba( k-contrast-legacy( $kendo-grid-bg ), .02 ) !default;
+$kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
+$kendo-grid-sorting-index-font-size: $font-size-sm !default;
+$kendo-grid-sorting-index-height: $icon-size !default;
+$kendo-grid-sorting-index-spacing-y: k-math-div( $icon-spacing, 2 ) !default;
+$kendo-grid-sorting-index-spacing-x: -$kendo-grid-sorting-index-spacing-y !default;
 
-$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .02 ) !default;
-$grid-sorting-indicator-text: $primary !default;
-$grid-sorting-index-font-size: $font-size-sm !default;
-$grid-sorting-index-height: $icon-size !default;
-$grid-sorting-index-spacing-y: ($icon-spacing / 2) !default;
-$grid-sorting-index-spacing-x: -$grid-sorting-index-spacing-y !default;
 
+$kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;
 
-$grid-focused-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+// be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
+$kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
 
-$grid-edit-cell-padding-x: $grid-cell-padding-x !default;
-$grid-edit-cell-padding-y: 3px !default;
+$kendo-grid-sticky-bg: $kendo-component-bg !default;
+$kendo-grid-sticky-text: $kendo-grid-text !default;
+$kendo-grid-sticky-border: rgba( black, .3 ) !default;
 
-$grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
+$kendo-grid-sticky-alt-bg: k-color-shade($kendo-grid-bg, 3.5%) !default;
 
-$grid-sticky-bg: $component-bg !default;
-$grid-sticky-text: $grid-text !default;
-$grid-sticky-border: rgba( black, .3 ) !default;
+$kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
+$kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
+$kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 
-$grid-sticky-alt-bg: shade($grid-bg, 3.5%) !default;
+$kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
+$kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$grid-sticky-header-bg: $grid-header-bg !default;
-$grid-sticky-header-text: $grid-header-text !default;
-$grid-sticky-header-border: $grid-sticky-border !default;
+$kendo-grid-sticky-selected-bg: k-color-mix($kendo-selected-bg, #ffffff, 25%) !default;
+$kendo-grid-sticky-selected-alt-bg: k-color-shade($kendo-grid-sticky-selected-bg, .4) !default;
 
-$grid-sticky-footer-bg: $grid-header-bg !default;
-$grid-sticky-footer-hovered-bg: $grid-hovered-bg !default;
+$kendo-grid-sticky-hover-bg: k-color-darken($kendo-grid-bg, 8%) !default;
+$kendo-grid-sticky-selected-hover-bg: k-color-shade($kendo-grid-sticky-selected-bg, .7) !default;
 
-$grid-sticky-selected-bg: mix($selected-bg, #ffffff, 25%) !default;
-$grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
+$kendo-grid-column-menu-width: 230px !default;
 
-$grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
-$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
+$kendo-grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
-$grid-column-menu-width: 230px !default;
+$kendo-grid-filter-menu-item-spacing-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-grid-filter-menu-item-spacing-y: $kendo-grid-filter-menu-item-spacing-x !default;
 
-$grid-filter-menu-check-all-border-bottom-width: 1px !default;
+$kendo-grid-column-menu-popup-padding-x: null !default;
+$kendo-grid-column-menu-popup-padding-y: null !default;
 
-$grid-filter-menu-item-spacing-x: map-get( $spacing, 2 ) !default;
-$grid-filter-menu-item-spacing-y: $grid-filter-menu-item-spacing-x !default;
+$kendo-grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
+$kendo-grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
 
-$grid-column-menu-popup-padding-x: null !default;
-$grid-column-menu-popup-padding-y: null !default;
+$kendo-grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$kendo-grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
-$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
-$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
+$kendo-grid-column-menu-items-wrap-padding-x: 0 !default;
+$kendo-grid-column-menu-items-wrap-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
-$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
-$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-grid-column-menu-group-header-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$kendo-grid-column-menu-group-header-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
-$grid-column-menu-items-wrap-padding-x: 0 !default;
-$grid-column-menu-items-wrap-padding-y: $padding-y-lg !default;
+$kendo-grid-column-menu-group-header-font-size: $font-size-sm !default;
+$kendo-grid-column-menu-group-header-line-height: $line-height !default;
+$kendo-grid-column-menu-group-header-text-transform: uppercase !default;
+$kendo-grid-column-menu-group-header-border-bottom-width: 1px !default;
 
-$grid-column-menu-filter-container-padding-x: $padding-x !default;
-$grid-column-menu-filter-container-padding-y: $padding-y !default;
+$kendo-grid-column-menu-group-header-bg: null !default;
+$kendo-grid-column-menu-group-header-text: $popup-text !default;
+$kendo-grid-column-menu-group-header-border: $popup-border !default;
 
-$grid-column-menu-group-header-padding-x: $kendo-menu-popup-item-padding-x-md !default;
-$grid-column-menu-group-header-padding-y: $kendo-menu-popup-item-padding-y-md !default;
+$kendo-grid-drag-cell-width: ($icon-size * 2.25) !default;
 
-$grid-column-menu-group-header-font-size: $font-size-sm !default;
-$grid-column-menu-group-header-line-height: $line-height !default;
-$grid-column-menu-group-header-text-transform: uppercase !default;
-$grid-column-menu-group-header-border-bottom-width: 1px !default;
+$kendo-grid-row-inner-height: calc( #{$line-height-em} + #{$kendo-grid-cell-padding-y * 2} ) !default;
 
-$grid-column-menu-group-header-bg: null !default;
-$grid-column-menu-group-header-text: $popup-text !default;
-$grid-column-menu-group-header-border: $popup-border !default;
+$kendo-grid-hierarchy-col-width: ($icon-size * 2) !default;
 
-$grid-drag-cell-width: ($icon-size * 2.25) !default;
+$kendo-grid-grouping-row-border-top: 1px !default;
+$kendo-grid-group-footer-border-y: 1px !default;
+$kendo-grid-group-footer-second-cell-border: 1px !default;

package/scss/icons/_index.scss

@@ -6,5 +6,5 @@
 
 
 // Component
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/icons/_layout.scss

@@ -1,7 +1,7 @@
 @import "./font/WebComponentsIcons.scss";
 
 @include exports( "icons/layout" ) {
-    $icon-font-url: map-get( $data-uris, "WebComponentsIcons.ttf" ) !default;
+    $icon-font-url: k-map-get( $data-uris, "WebComponentsIcons.ttf" ) !default;
 
     // Keep this as a root selector, because nested themes will not work
     @at-root {
@@ -1156,7 +1156,6 @@
         font-size: 0;
         line-height: 0;
         text-align: center;
-        -ms-high-contrast-adjust: none;
     }
     .k-image {
         display: inline-block;

package/scss/imageeditor/_index.scss

@@ -11,6 +11,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/imageeditor/_layout.scss

@@ -12,7 +12,7 @@
         font-size: $imageeditor-font-size;
         line-height: $imageeditor-line-height;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -25,7 +25,7 @@
     // Image editor toolbar
     .k-imageeditor-toolbar {
         border-width: 0;
-        border-bottom-width: $toolbar-border-width;
+        border-bottom-width: $kendo-toolbar-border-width;
     }
 
 
@@ -106,14 +106,14 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - (#{$imageeditor-resize-handle-size / 2}) );
+            left: calc( 50% - (#{k-math-div( $imageeditor-resize-handle-size, 2 )}) );
             width: $imageeditor-resize-handle-size;
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - (#{$imageeditor-resize-handle-size / 2}) );
+            top: calc( 50% - (#{k-math-div( $imageeditor-resize-handle-size, 2 )}) );
             width: 0;
             height: $imageeditor-resize-handle-size;
         }
@@ -149,18 +149,3 @@
     }
 
 }
-
-
-
-
-@include exports("imageeditor/layout/IE") {
-
-    .k-ie {
-        .k-imageeditor-canvas {
-            flex-direction: row;
-            align-self: flex-start;
-        }
-    }
-
-}
-

package/scss/imageeditor/_variables.scss

@@ -11,9 +11,9 @@ $imageeditor-font-family: $font-family !default;
 
 $imageeditor-content-border-width: 1px !default;
 
-$imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
-$imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
-$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
+$imageeditor-action-pane-padding-y: k-map-get( $kendo-spacing, 8 ) !default;
+$imageeditor-action-pane-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) ) !default;
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;
@@ -23,9 +23,9 @@ $imageeditor-resize-handle-margin-y: 1px !default;
 $imageeditor-resize-handle-border-width: 0 2px 2px 0 !default;
 $imageeditor-resize-handle-size: 15px !default;
 
-$imageeditor-bg: $component-bg !default;
-$imageeditor-text: $component-text !default;
-$imageeditor-border: $component-border !default;
+$imageeditor-bg: $kendo-component-bg !default;
+$imageeditor-text: $kendo-component-text !default;
+$imageeditor-border: $kendo-component-border !default;
 
 $imageeditor-content-bg: #c6c6c6 !default;
 $imageeditor-content-text: null !default;