Customizing Dropzone

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-dropzone-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the DropZone.
$kendo-dropzone-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the DropZone.
$kendo-dropzone-border-widthNumber1px1px
Description
The border width of the DropZone.
$kendo-dropzone-min-heightNumber220px220px
Description
The minimum height of the DropZone.
$kendo-dropzone-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the DropZone.
$kendo-dropzone-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the DropZone.
$kendo-dropzone-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the DropZone.
$kendo-dropzone-bgString$kendo-base-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the DropZone.
$kendo-dropzone-textString$kendo-base-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the DropZone.
$kendo-dropzone-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the DropZone.
$kendo-dropzone-icon-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing below the DropZone icon.
$kendo-dropzone-icon-textStringif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))var(--kendo-color-subtle, #666666)
Description
The text color of the DropZone icon.
$kendo-dropzone-icon-hover-textString$kendo-color-primaryvar(--kendo-color-primary, #ff6358)
Description
The text color of the hovered DropZone icon.
$kendo-dropzone-hint-font-sizeNullnullnull
Description
The font size of the DropZone hint.
$kendo-dropzone-hint-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing below the DropZone hint.
$kendo-dropzone-hint-textNullnullnull
Description
The text color of the DropZone hint.
$kendo-dropzone-note-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the DropZone note.
$kendo-dropzone-note-spacingNullnullnull
Description
The spacing below the DropZone note.
$kendo-dropzone-note-textString$kendo-subtle-textvar(--kendo-color-subtle, #666666)
Description
The text color of the DropZone note.

In this article

Not finding the help you need?