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

Customizing Drawer

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-drawer-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Drawer.
$kendo-drawer-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Drawer.
$kendo-drawer-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Drawer.
$kendo-drawer-border-widthNumber1px1px
Description
The border width of the Drawer.
$kendo-drawer-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Drawer.
$kendo-drawer-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Drawer.
$kendo-drawer-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Drawer.
$kendo-drawer-content-padding-xNullnullnull
Description
The horizontal padding of the Drawer content.
$kendo-drawer-content-padding-yNullnullnull
Description
The vertical padding of the Drawer content.
$kendo-drawer-scrollbar-widthNumber7px7px
Description
The width of the Drawer scrollbar.
$kendo-drawer-scrollbar-colorColorrgba( 156, 156, 156, .7 )rgba(156, 156, 156, 0.7)
Description
The color of the Drawer scrollbar track.
$kendo-drawer-scrollbar-bgColor#dedede#dedede
Description
The background color of the Drawer scrollbar thumb.
$kendo-drawer-scrollbar-radiusNumber20px20px
Description
The border radius of the Drawer scrollbar.
$kendo-drawer-scrollbar-hover-colorColorrgba( 156, 156, 156, 1 )rgb(156, 156, 156)
Description
The hover color of the Drawer scrollbar track.
$kendo-drawer-item-padding-xString$kendo-padding-md-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Drawer item.
$kendo-drawer-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the Drawer item.
$kendo-drawer-item-font-sizeNumber16px16px
Description
The font size of the Drawer item.
$kendo-drawer-item-line-heightNumber$kendo-line-height-lg1.5
Description
The line height of the Drawer item.
$kendo-drawer-item-level-padding-xString$kendo-drawer-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Drawer item in each level.
$kendo-drawer-item-level-countNumber55
Description
The count of the Drawer item levels.
$kendo-drawer-icon-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the Drawer icon.
$kendo-drawer-icon-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Drawer icon.
$kendo-drawer-mini-initial-widthCalculationcalc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size})calc(2 * var(--kendo-spacing-4, 1rem) + 16px)
Description
The initial width of the mini Drawer.
$kendo-drawer-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered Drawer item.
$kendo-drawer-hover-textString$kendo-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the hovered Drawer item.
$kendo-drawer-focus-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the focused Drawer item.
$kendo-drawer-focus-shadowStringnonenone
Description
The box shadow of the focused Drawer item.
$kendo-drawer-selected-bgNullnullnull
Description
The background color of the selected Drawer item.
$kendo-drawer-selected-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the selected Drawer item.
$kendo-drawer-selected-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the selected and hovered Drawer item.
$kendo-drawer-selected-hover-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the selected and hovered Drawer item.

In this article

Not finding the help you need?