New to Kendo UI for Vue? Start a free 30-day trial

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-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the DropZone.
$kendo-dropzone-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 ))var(--kendo-color-base-subtle, #ebebeb)
Description
The background color of the DropZone.
$kendo-dropzone-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the DropZone.
$kendo-dropzone-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
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, #757575)
Description
The text color of the DropZone icon.
$kendo-dropzone-icon-hover-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
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, #757575)
Description
The text color of the DropZone note.

In this article

Not finding the help you need?