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: 1px Computed: 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: 300px Computed: 300px |
Description: The maximum height of the list with uploaded items. | |||
kendo-upload-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface) Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Upload. | |||
kendo-upload-bg | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt) Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the Upload. | |||
kendo-upload-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(border) Computed: 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 | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface) Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Upload dropzone. | |||
kendo-upload-dropzone-bg | k-color(surface)!default | var(--kendo-color-surface, #fafafa) | Default: k-color(surface)!default Computed: 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-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Upload dropzone. | |||
kendo-upload-dropzone-hover-bg | k-color(base-hover) | var(--kendo-color-base-hover, #ebebeb) | Default: k-color(base-hover) Computed: var(--kendo-color-base-hover, #ebebeb) |
Description: The background color of the hovered Upload dropzone. | |||
kendo-upload-status-text | k-color(subtle) | var(--kendo-color-subtle, #666666) | Default: k-color(subtle) Computed: var(--kendo-color-subtle, #666666) |
Description: The text color of the Upload status message. | |||
kendo-upload-status-text-opacity | null | null | Default: null Computed: 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-spacing Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The horizontal spacing of the Upload status icon. | |||
kendo-upload-icon-color | k-color(subtle) | var(--kendo-color-subtle, #666666) | Default: k-color(subtle) Computed: var(--kendo-color-subtle, #666666) |
Description: The color of the uploaded items icon. | |||
kendo-upload-progress-thickness | 2px | 2px | Default: 2px Computed: 2px |
Description: The thickness of the Upload progress bar. | |||
kendo-upload-progress-bg | k-color(info) | var(--kendo-color-info, #0058e9) | Default: k-color(info) Computed: var(--kendo-color-info, #0058e9) |
Description: The background color of the Upload progress bar. | |||
kendo-upload-success-text | k-color(success) | var(--kendo-color-success, #37b400) | Default: k-color(success) Computed: var(--kendo-color-success, #37b400) |
Description: The success text color of the Upload. | |||
kendo-upload-success-bg | k-color(success) | var(--kendo-color-success, #37b400) | Default: k-color(success) Computed: var(--kendo-color-success, #37b400) |
Description: The success background color of the Upload progress bar. | |||
kendo-upload-error-text | k-color(error) | var(--kendo-color-error, #f31700) | Default: k-color(error) Computed: var(--kendo-color-error, #f31700) |
Description: The error text color of the Upload. | |||
kendo-upload-error-bg | k-color(error) | var(--kendo-color-error, #f31700) | Default: k-color(error) Computed: 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. |