Sass Variables
The Telerik and Kendo UI Upload enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its buttons, use the Sass variables provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-upload-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the Upload. | |||
kendo-upload-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Upload. | |||
kendo-upload-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Upload. | |||
kendo-upload-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the Upload. | |||
kendo-upload-max-height | 300px | 300px | Default: 300pxComputed: 300px |
| Description: The maximum height of the list with uploaded items. | |||
kendo-upload-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Upload. | |||
kendo-upload-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Upload. | |||
kendo-upload-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Upload. | |||
kendo-upload-dropzone-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Upload dropzone. | |||
kendo-upload-dropzone-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Upload dropzone. | |||
kendo-upload-dropzone-text | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Upload dropzone. | |||
kendo-upload-dropzone-bg | $kendo-component-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-component-header-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the Upload dropzone. | |||
kendo-upload-dropzone-border | $kendo-upload-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-upload-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Upload dropzone. | |||
kendo-upload-dropzone-hover-bg | $kendo-hover-bg | var(--kendo-color-base-hover, #ebebeb) | Default: $kendo-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb) |
| Description: The background color of the hovered Upload dropzone. | |||
kendo-upload-status-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the Upload status message. | |||
kendo-upload-status-text-opacity | null | null | Default: nullComputed: null |
| Description: The opacity of the Upload status message. | |||
kendo-upload-item-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of an uploaded item. | |||
kendo-upload-item-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of an uploaded item. | |||
kendo-upload-multiple-items-spacing | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical spacing between uploaded batch items. | |||
kendo-upload-validation-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the Upload validation message. | |||
kendo-upload-validation-line-height | var( --kendo-line-height-xs, normal ) | var(--kendo-line-height-xs, normal) | Default: var( --kendo-line-height-xs, normal )Computed: var(--kendo-line-height-xs, normal) |
| Description: The line height of the Upload validation message. | |||
kendo-upload-icon-spacing | $kendo-icon-spacing | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-icon-spacingComputed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal spacing of the Upload status icon. | |||
kendo-upload-icon-color | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The color of the uploaded items icon. | |||
kendo-upload-progress-thickness | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The thickness of the Upload progress bar. | |||
kendo-upload-progress-bg | $kendo-color-info | var(--kendo-color-info, #0058e9) | Default: $kendo-color-infoComputed: var(--kendo-color-info, #0058e9) |
| Description: The background color of the Upload progress bar. | |||
kendo-upload-success-text | $kendo-color-success | var(--kendo-color-success, #37b400) | Default: $kendo-color-successComputed: var(--kendo-color-success, #37b400) |
| Description: The success text color of the Upload. | |||
kendo-upload-success-bg | $kendo-color-success | var(--kendo-color-success, #37b400) | Default: $kendo-color-successComputed: var(--kendo-color-success, #37b400) |
| Description: The success background color of the Upload progress bar. | |||
kendo-upload-error-text | $kendo-color-error | var(--kendo-color-error, #f31700) | Default: $kendo-color-errorComputed: var(--kendo-color-error, #f31700) |
| Description: The error text color of the Upload. | |||
kendo-upload-error-bg | $kendo-color-error | var(--kendo-color-error, #f31700) | Default: $kendo-color-errorComputed: var(--kendo-color-error, #f31700) |
| Description: The error background color of the Upload progress bar. | |||
kendo-upload-focus-shadow | 0 0 0 2px rgba(0, 0, 0, .13) | (0 0 0 2px rgba(0, 0, 0, 0.13)) | Default: 0 0 0 2px rgba(0, 0, 0, .13)Computed: (0 0 0 2px rgba(0, 0, 0, 0.13)) |
| Description: The shadow of the focused Upload button, actions and uploaded items. | |||
