Drawer

Drawers add dismissible, collapsible, or permanently visible side panels for navigation or additional content.

Sass Variables

The Telerik and Kendo UI Drawer enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-drawer-bg$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the Drawer.
kendo-drawer-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Drawer.
kendo-drawer-border$kendo-component-bordervar(--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 Drawer.
kendo-drawer-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the Drawer.
kendo-drawer-font-familyvar( --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 Drawer.
kendo-drawer-font-sizevar( --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 Drawer.
kendo-drawer-line-heightvar( --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 Drawer.
kendo-drawer-content-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the Drawer content.
kendo-drawer-content-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the Drawer content.
kendo-drawer-scrollbar-width7px7pxDefault: 7pxComputed: 7px
Description: The width of the Drawer scrollbar.
kendo-drawer-scrollbar-color rgba(156, 156, 156, .7) rgba(156, 156, 156, 0.7)Default: rgba(156, 156, 156, .7)Computed: rgba(156, 156, 156, 0.7)
Description: The color of the Drawer scrollbar track.
kendo-drawer-scrollbar-bg #dedede #dededeDefault: #dededeComputed: #dedede
Description: The background color of the Drawer scrollbar thumb.
kendo-drawer-scrollbar-radius20px20pxDefault: 20pxComputed: 20px
Description: The border radius of the Drawer scrollbar.
kendo-drawer-scrollbar-hover-color rgba(156, 156, 156, 1) rgb(156, 156, 156)Default: rgba(156, 156, 156, 1)Computed: rgb(156, 156, 156)
Description: The hover color of the Drawer scrollbar track.
kendo-drawer-item-padding-xk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the Drawer item.
kendo-drawer-item-padding-yk-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 Drawer item.
kendo-drawer-item-font-sizevar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit)
Description: The font size of the Drawer item.
kendo-drawer-item-line-heightvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal)
Description: The line height of the Drawer item.
kendo-drawer-item-level-padding-x$kendo-drawer-item-padding-xvar(--kendo-spacing-4, 1rem)Default: $kendo-drawer-item-padding-xComputed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the Drawer item in each level.
kendo-drawer-item-level-count55Default: 5Computed: 5
Description: The count of the Drawer item levels.
kendo-drawer-icon-padding-xk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The horizontal padding of the Drawer icon.
kendo-drawer-icon-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Drawer icon.
kendo-drawer-mini-initial-widthcalc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size})calc(2 * var(--kendo-spacing-4, 1rem) + 16px)Default: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size})Computed: calc(2 * var(--kendo-spacing-4, 1rem) + 16px)
Description: The initial width of the mini Drawer.
kendo-drawer-hover-bg$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb)
Description: The background color of the hovered Drawer item.
kendo-drawer-hover-text$kendo-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-hover-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the hovered Drawer item.
kendo-drawer-focus-bg$kendo-drawer-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-drawer-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the focused Drawer item.
kendo-drawer-focus-shadow$kendo-list-item-focus-shadow(inset 0 0 0 2px rgba(0, 0, 0, 0.12))Default: $kendo-list-item-focus-shadowComputed: (inset 0 0 0 2px rgba(0, 0, 0, 0.12))
Description: The box shadow of the focused Drawer item.
kendo-drawer-selected-bg$kendo-selected-bgvar(--kendo-color-primary, #ff6358)Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358)
Description: The background color of the selected Drawer item.
kendo-drawer-selected-text$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of the selected Drawer item.
kendo-drawer-selected-hover-bg$kendo-selected-hover-bgvar(--kendo-color-primary-hover, #ea5a51)Default: $kendo-selected-hover-bgComputed: var(--kendo-color-primary-hover, #ea5a51)
Description: The background color of the selected and hovered Drawer item.
kendo-drawer-selected-hover-text$kendo-selected-hover-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-selected-hover-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of the selected and hovered Drawer item.
Feedback