@progress/kendo-theme-material 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/timeselector/_index.scss

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

package/scss/timeselector/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/timeselector/_layout.scss";
+@import "@progress/kendo-theme-default/scss/timeselector/_layout.scss";

package/scss/timeselector/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/timeselector/_theme.scss";
+@import "@progress/kendo-theme-default/scss/timeselector/_theme.scss";
 
 @include exports( "timeselector/theme/material" ) {
 

package/scss/timeselector/_variables.scss

@@ -1,18 +1,22 @@
+@import "../typography/_variables.scss";
+
+
 // Time selector
+
 $time-selector-border-width: 1px !default;
 $time-selector-font-family: $font-family !default;
 $time-selector-font-size: $font-size !default;
 $time-selector-line-height: k-math-div( 20, 14 ) !default;
 
-$time-selector-bg: $component-bg !default;
-$time-selector-text: $component-text !default;
-$time-selector-border: $component-border !default;
+$time-selector-bg: $kendo-component-bg !default;
+$time-selector-text: $kendo-component-text !default;
+$time-selector-border: $kendo-component-border !default;
 
 $time-selector-header-padding-x: $actions-padding-x !default;
 $time-selector-header-padding-y: $actions-padding-y !default;
 $time-selector-header-border-width: 0px !default;
 
-$time-selector-fast-selection-gap: k-map-get( $spacing, 2 ) !default;
+$time-selector-fast-selection-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
 $time-list-width: 4em !default;
 $time-list-height: 240px !default;
@@ -20,18 +24,18 @@ $time-list-height: 240px !default;
 $time-list-title-font-size: $font-size-sm !default;
 $time-list-title-line-height: 1.5 !default;
 $time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
-$time-list-title-text: $subtle-text !default;
-$time-list-title-focus-text: $component-text !default;
+$time-list-title-text: $kendo-subtle-text !default;
+$time-list-title-focus-text: $kendo-component-text !default;
 
 $time-list-item-padding-x: $kendo-list-item-padding-x-md !default;
 $time-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $time-list-highlight-border-width: 1px 0px !default;
 $time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
-$time-list-highlight-bg: $component-bg !default;
-$time-list-highlight-border: $component-border !default;
+$time-list-highlight-bg: $kendo-component-bg !default;
+$time-list-highlight-border: $kendo-component-border !default;
 
-$time-list-focused-bg: null !default;
+$time-list-focus-bg: null !default;
 
 
 // Time selector sizes

package/scss/toolbar/_index.scss

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

package/scss/toolbar/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/toolbar/_layout.scss";
+@import "@progress/kendo-theme-default/scss/toolbar/_layout.scss";
 
 @include exports("toolbar/layout/material") {
 
@@ -22,6 +22,14 @@
         }
     }
 
+}
+
+
+
+
+// Remove once the Overflow Popup uses
+// the proper Menu rendering in all suites.
+@include exports("toolbar/layout/material/legacy") {
 
     // Overflow container
     .k-overflow-container {

package/scss/toolbar/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/toolbar/_theme.scss";
+@import "@progress/kendo-theme-default/scss/toolbar/_theme.scss";
 
 @include exports("toolbar/theme/material") {
 

package/scss/toolbar/_variables.scss

@@ -1,29 +1,87 @@
 // Toolbar
 
-/// The horizontal padding of the container.
+/// The horizontal padding of the toolbar.
 /// @group toolbar
-$toolbar-padding-x: k-map-get( $spacing, 2 ) !default;
-/// The vertical padding of the container.
+$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-x-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-y-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The spacing between the toolbar tools.
 /// @group toolbar
-$toolbar-padding-y: k-map-get( $spacing, 2 ) !default;
-$toolbar-border-width: 0 !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
+$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-toolbar-spacing-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-spacing-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: k-math-div( 20, 14 ) !default;
+/// Width of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 0 !default;
+/// Border radius of the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-radius: null !default;
+
+/// Font family of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: $font-family !default;
+/// Font size of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: $font-size !default;
+/// Line height of the toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: k-math-div( 20, 14 ) !default;
 
-$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+/// Background color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: $kendo-component-bg !default;
+/// Text color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-text: $kendo-component-text !default;
+/// Color of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border: null !default;
+/// Gradient of the toolbar.
+/// @group toolbar
+$kendo-toolbar-gradient: null !default;
+/// Box shadow of the toolbar.
+/// @group toolbar
+$kendo-toolbar-shadow: $box-shadow-depth-2 !default;
 
-$toolbar-bg: $component-bg !default;
-$toolbar-text: $component-text !default;
-$toolbar-border: null !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: $box-shadow-depth-2 !default;
+/// Color of the separator border of the toolbar.
+/// @group toolbar
+$kendo-toolbar-separator-border: $kendo-component-border !default;
 
-$toolbar-separator-border: $component-border !default;
+/// The width of the input in the toolbar.
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;
 
-$toolbar-input-width: 10em !default;
+/// Box shadow of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
 
-$toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
+/// Sizes map for the toolbar.
+/// @group toolbar
+$kendo-toolbar-sizes: (
+    sm: (
+        padding-x: $kendo-toolbar-padding-x-sm,
+        padding-y: $kendo-toolbar-padding-y-sm,
+        spacing: $kendo-toolbar-spacing-sm
+    ),
+    md: (
+        padding-x: $kendo-toolbar-padding-x-md,
+        padding-y: $kendo-toolbar-padding-y-md,
+        spacing: $kendo-toolbar-spacing-md
+    ),
+    lg: (
+        padding-x: $kendo-toolbar-padding-x-lg,
+        padding-y: $kendo-toolbar-padding-y-lg,
+        spacing: $kendo-toolbar-spacing-lg
+    )
+) !default;

package/scss/tooltip/_index.scss

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

package/scss/tooltip/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/tooltip/_layout.scss";
+@import "@progress/kendo-theme-default/scss/tooltip/_layout.scss";

package/scss/tooltip/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/tooltip/_theme.scss";
+@import "@progress/kendo-theme-default/scss/tooltip/_theme.scss";

package/scss/tooltip/_variables.scss

@@ -1,13 +1,14 @@
 // Tooltip
-$tooltip-padding-y: ($padding-y * .75) !default;
-$tooltip-padding-x: ($padding-x / 2) !default;
+
+$tooltip-padding-y: ($kendo-padding-md-y * .75) !default;
+$tooltip-padding-x: k-math-div( $kendo-padding-md-x, 2 ) !default;
 $tooltip-max-width: null !default;
 $tooltip-border-width: 0px !default;
 $tooltip-border-radius: $kendo-border-radius-md !default;
 
 $tooltip-font-family: $font-family !default;
 $tooltip-font-size: $font-size-sm !default;
-$tooltip-line-height: (20 / 14) !default;
+$tooltip-line-height: k-math-div( 20, 14 ) !default;
 
 $tooltip-title-font-size: ($tooltip-font-size * 1.25) !default;
 $tooltip-title-line-height: 1 !default;
@@ -18,18 +19,18 @@ $tooltip-bg: material-color( gray, 700, .9 ) !default;
 $tooltip-text: get-base-contrast( gray, 700 ) !default;
 $tooltip-border: $tooltip-bg !default;
 
-$tooltip-primary-bg: $primary !default;
+$tooltip-primary-bg: $kendo-color-primary !default;
 $tooltip-primary-text: k-contrast-color( $tooltip-primary-bg ) !default;
 $tooltip-primary-border: $tooltip-primary-bg !default;
-$tooltip-info-bg: $info !default;
+$tooltip-info-bg: $kendo-color-info !default;
 $tooltip-info-text: k-contrast-color( $tooltip-info-bg ) !default;
 $tooltip-info-border: $tooltip-info-bg !default;
-$tooltip-success-bg: $success !default;
+$tooltip-success-bg: $kendo-color-success !default;
 $tooltip-success-text: k-contrast-color( $tooltip-success-bg ) !default;
 $tooltip-success-border: $tooltip-success-bg !default;
-$tooltip-warning-bg: $warning !default;
+$tooltip-warning-bg: $kendo-color-warning !default;
 $tooltip-warning-text: k-contrast-color( $tooltip-warning-bg ) !default;
 $tooltip-warning-border: $tooltip-warning-bg !default;
-$tooltip-error-bg: $error !default;
+$tooltip-error-bg: $kendo-color-error !default;
 $tooltip-error-text: k-contrast-color( $tooltip-error-bg ) !default;
 $tooltip-error-border: $tooltip-error-bg !default;

package/scss/treelist/_index.scss

@@ -3,12 +3,12 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_text.scss";
+// @import "../utils/_text.scss";
 @import "../grid/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/treelist/_layout.scss

@@ -1,20 +1,20 @@
-@import "~@progress/kendo-theme-default/scss/treelist/_layout.scss";
+@import "@progress/kendo-theme-default/scss/treelist/_layout.scss";
 
 @include exports("treelist/layout/material") {
     .k-treelist {
         tr.k-footer-template td {
-            border-width: $treelist-footer-row-border-width 0;
+            border-width: $kendo-treelist-footer-row-border-width 0;
         }
 
         tr.k-footer td,
         tr.k-footer-template + tr.k-footer-template td {
-            border-width: 0 0 $treelist-footer-row-border-width 0;
+            border-width: 0 0 $kendo-treelist-footer-row-border-width 0;
         }
     }
 
     .k-treelist-scrollable {
         tr.k-group-footer td {
-            border-bottom-width: $treelist-footer-row-border-width;
+            border-bottom-width: $kendo-treelist-footer-row-border-width;
         }
     }
 }

package/scss/treelist/_theme.scss

@@ -1,11 +1,11 @@
-@import "~@progress/kendo-theme-default/scss/treelist/_theme.scss";
+@import "@progress/kendo-theme-default/scss/treelist/_theme.scss";
 
 @include exports("treelist/theme/material") {
     .k-treelist {
         tr.k-footer,
         tr.k-footer-template {
             &:hover {
-                background-color: $treelist-footer-row-bg;
+                background-color: $kendo-treelist-footer-row-bg;
             }
         }
     }
@@ -21,7 +21,7 @@
         .k-group-footer td,
         .k-grouping-row td,
         tbody .k-group-cell {
-            background-color: $treelist-footer-row-bg;
+            background-color: $kendo-treelist-footer-row-bg;
         }
     }
 }

package/scss/treelist/_variables.scss

@@ -1,3 +1,3 @@
 // Treelist
-$treelist-footer-row-bg: $grid-selected-bg !default;
-$treelist-footer-row-border-width: 1px !default;
+$kendo-treelist-footer-row-bg: $kendo-grid-selected-bg !default;
+$kendo-treelist-footer-row-border-width: 1px !default;

package/scss/treeview/_index.scss

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

package/scss/treeview/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/treeview/_layout.scss";
+@import "@progress/kendo-theme-default/scss/treeview/_layout.scss";

package/scss/treeview/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/treeview/_theme.scss";
+@import "@progress/kendo-theme-default/scss/treeview/_theme.scss";
 
 @include exports( "treeview/theme/material" ) {
 

package/scss/treeview/_variables.scss

@@ -21,16 +21,16 @@ $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-x: k-map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
-$kendo-treeview-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-sm: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-md: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-lg: k-map-get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
-$kendo-treeview-item-padding-y: k-map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
-$kendo-treeview-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-lg: k-map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-treeview-item-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -68,7 +68,7 @@ $kendo-treeview-sizes: (
 $kendo-treeview-bg: null !default;
 /// Text color of the treeview component.
 /// @group treeview
-$kendo-treeview-text: $component-text !default;
+$kendo-treeview-text: $kendo-component-text !default;
 /// Border color of the treeview component.
 /// @group treeview
 $kendo-treeview-border: null !default;
@@ -91,7 +91,7 @@ $kendo-treeview-item-hover-gradient: null !default;
 $kendo-treeview-item-selected-bg: null !default;
 /// Text color of selected treeview items.
 /// @group treeview
-$kendo-treeview-item-selected-text: $selected-bg !default;
+$kendo-treeview-item-selected-text: $kendo-selected-bg !default;
 /// Border color of selected treeview items.
 /// @group treeview
 $kendo-treeview-item-selected-border: null !default;

package/scss/typography/_index.scss

@@ -2,10 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/typography/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/typography/_layout.scss";
+@import "@progress/kendo-theme-default/scss/typography/_layout.scss";

package/scss/typography/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/typography/_theme.scss";
+@import "@progress/kendo-theme-default/scss/typography/_theme.scss";

package/scss/typography/_variables.scss

@@ -4,42 +4,6 @@
 /// @group typography
 $enable-typography: false !default;
 
-/// Base font size across all components.
-/// @group typography
-$font-size: 14px !default;
-$font-size-xs: 10px !default;
-$font-size-sm: 12px !default;
-$font-size-md: 14px !default;
-$font-size-lg: 16px !default;
-$font-size-xl: 20px !default;
-
-/// Font family across all components.
-/// @group typography
-$font-family: Roboto, "Helvetica Neue", sans-serif !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Line height used along with $font-size.
-/// @group typography
-$line-height: (28 / 14) !default;
-$line-height-xs: 1 !default;
-$line-height-sm: 1.2 !default;
-$line-height-md: $line-height !default;
-$line-height-lg: 1.5 !default;
-$line-height-em: calc( #{$line-height} * 1em ) !default;
-
-
-// Font weight
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 500 !default;
-
-
-// Letter Spacing
-$letter-spacing: null !default;
-
 
 // Headings
 $h1-font-size: 96px !default;
@@ -108,13 +72,13 @@ $pre-padding-y: 16px !default;
 $code-border-width: 1px !default;
 
 $code-bg: $base-bg !default;
-$code-text: $component-text !default;
-$code-border: $component-border !default;
+$code-text: $kendo-component-text !default;
+$code-border: $kendo-component-border !default;
 
 
 // Link
-$link-text: $secondary !default;
-$link-hover-text: $secondary-darker !default;
+$link-text: $kendo-color-secondary !default;
+$link-hover-text: $kendo-color-secondary-darker !default;
 
 
 // Display

package/scss/upload/_index.scss

@@ -7,10 +7,9 @@
 @import "../action-buttons/_index.scss";
 @import "../icons/_index.scss";
 @import "../dropzone/_index.scss";
-@import "../toolbar/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/upload/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/upload/_layout.scss";
+@import "@progress/kendo-theme-default/scss/upload/_layout.scss";

package/scss/upload/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/upload/_theme.scss";
+@import "@progress/kendo-theme-default/scss/upload/_theme.scss";
 
 @include exports("upload/theme/material") {
 
@@ -6,7 +6,7 @@
     .k-upload {
         .k-upload-button {
             @include box-shadow( none );
-            background-color: k-try-shade( $upload-dropzone-bg );
+            background-color: k-try-shade( $kendo-upload-dropzone-bg );
         }
     }
 }

package/scss/upload/_variables.scss

@@ -1,48 +1,48 @@
 // Upload
-$upload-border-width: 1px !default;
-$upload-font-family: $font-family !default;
-$upload-font-size: $font-size !default;
-$upload-line-height: k-math-div( 20, 14 ) !default;
-$upload-max-height: 300px !default;
 
-$upload-bg: $component-bg !default;
-$upload-text: $component-text !default;
-$upload-border: $component-border !default;
+$kendo-upload-border-width: 1px !default;
+$kendo-upload-font-family: $font-family !default;
+$kendo-upload-font-size: $font-size !default;
+$kendo-upload-line-height: k-math-div( 20, 14 ) !default;
+$kendo-upload-max-height: 300px !default;
 
-$upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
-$upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
-$upload-dropzone-bg: $header-bg !default;
-$upload-dropzone-text: $header-text !default;
-$upload-dropzone-border: $upload-border !default;
-$upload-dropzone-hover-bg: $hovered-bg !default;
+$kendo-upload-bg: $kendo-component-bg !default;
+$kendo-upload-text: $kendo-component-text !default;
+$kendo-upload-border: $kendo-component-border !default;
 
-$upload-status-text: $subtle-text !default;
-$upload-status-text-opacity: null !default;
+$kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+$kendo-upload-dropzone-text: $kendo-component-header-text !default;
+$kendo-upload-dropzone-border: $kendo-upload-border !default;
+$kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
 
-$upload-item-padding-x: k-map-get( $spacing, 4 ) !default;
-$upload-item-padding-y: k-map-get( $spacing, 4 ) !default;
+$kendo-upload-status-text: $kendo-subtle-text !default;
+$kendo-upload-status-text-opacity: null !default;
 
-$upload-multiple-items-spacing: 12px !default;
+$kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 
-$upload-validation-font-size: 12px !default;
-$upload-icon-spacing: $icon-spacing !default;
-$upload-icon-color: $subtle-text !default;
+$kendo-upload-multiple-items-spacing: 12px !default;
 
-$upload-item-image-width: 24px !default;
-$upload-item-image-height: 28px !default;
-$upload-item-image-border: 2px !default;
+$kendo-upload-validation-font-size: 12px !default;
+$kendo-upload-icon-spacing: $kendo-icon-spacing !default;
+$kendo-upload-icon-color: $kendo-subtle-text !default;
 
-$upload-group-icon-size: $icon-size-lg !default;
+$kendo-upload-item-image-width: 24px !default;
+$kendo-upload-item-image-height: 28px !default;
+$kendo-upload-item-image-border: 2px !default;
 
-$upload-progress-thickness: 2px !default;
-$upload-progress-bg: $info !default;
-$upload-progress-text: $component-text !default;
+$kendo-upload-group-icon-size: $kendo-icon-size-xxl !default;
 
-$upload-success-bg: $success !default;
-$upload-success-text: $success !default;
+$kendo-upload-progress-thickness: 2px !default;
+$kendo-upload-progress-bg: $kendo-color-info !default;
 
-$upload-error-bg: $error !default;
-$upload-error-text: $error !default;
-$upload-error-border: $error !default;
+$kendo-upload-success-bg: $kendo-color-success !default;
+$kendo-upload-success-text: $kendo-color-success !default;
 
-$upload-focused-shadow: 0 0 0 2px rgba( black, .13 ) !default;
+$kendo-upload-error-bg: $kendo-color-error !default;
+$kendo-upload-error-text: $kendo-color-error !default;
+$kendo-upload-error-border: $kendo-color-error !default;
+
+$kendo-upload-focus-shadow: 0 0 0 2px rgba( black, .13 ) !default;