Customizing Panelbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-panelbar-padding-x0px
Description
Horizontal padding of the panelbar.
$kendo-panelbar-padding-y0px
Description
Vertical padding of the panelbar.
$kendo-panelbar-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the panelbar.
$kendo-panelbar-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the panelbar.
$kendo-panelbar-line-heightvar( --kendo-line-height, inherit )
Description
Line height of the panelbar.
$kendo-panelbar-border-width1px
Description
Width of the border around the panelbar.
$kendo-panelbar-border-stylesolid
Description
Border style around the the panelbar.
$kendo-panelbar-item-border-width0
Description
Width of the border around the panelbar items.
$kendo-panelbar-item-border-stylesolid
Description
Style of the border around the panelbar items.
$kendo-panelbar-icon-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing around the icon of the panelbar items.
$kendo-panelbar-header-padding-x-startcalc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )
Description
Horizontal padding of the panelbar header.
$kendo-panelbar-header-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the panelbar header.
$kendo-panelbar-item-padding-x-startcalc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )
Description
Horizontal padding of the panelbar items.
$kendo-panelbar-item-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the panelbar items.
$kendo-panelbar-item-level-count4
Description
Maximum nesting of the panelbar items.
$kendo-panelbar-bgvar( --kendo-component-bg, initial )
Description
Background color of the panelbar.
$kendo-panelbar-textvar( --kendo-component-text, initial )
Description
Text color of the panelbar.
$kendo-panelbar-bordervar( --kendo-component-border, initial )
Description
Border color of the panelbar.
$kendo-panelbar-header-bgvar( --kendo-panelbar-bg, #{$kendo-panelbar-bg} )
Description
Background color of the panelbar header.
$kendo-panelbar-header-textvar( --kendo-panelbar-text, #{$kendo-panelbar-text} )
Description
Text color of the panelbar header.
$kendo-panelbar-header-borderinherit
Description
Border color of the panelbar header.
$kendo-panelbar-header-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the panelbar header when hovered.
$kendo-panelbar-header-hover-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
Text color of the panelbar header when hovered.
$kendo-panelbar-header-hover-borderinherit
Description
Border color of the panelbar header when hovered.
$kendo-panelbar-header-focus-bginherit
Description
Background color of the panelbar header when focused.
$kendo-panelbar-header-focus-textinherit
Description
Text color of the panelbar header when focused.
$kendo-panelbar-header-focus-borderinherit
Description
Border color of the panelbar header when focused.
$kendo-panelbar-header-focus-shadow$kendo-list-item-focus-shadow
Description
Shadow of the panelbar header when focused.
$kendo-panelbar-header-hover-focus-bg$kendo-panelbar-header-hover-bg
Description
Background color of the panelbar header when focused and hovered.
$kendo-panelbar-header-hover-focus-text$kendo-panelbar-header-hover-text
Description
Text color of the panelbar header when focused and hovered.
$kendo-panelbar-header-hover-focus-bordernull
Description
Border color of the panelbar header when focused and hovered.
$kendo-panelbar-header-selected-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the panelbar header when selected.
$kendo-panelbar-header-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Text color of the panelbar header when selected.
$kendo-panelbar-header-selected-borderinherit
Description
Border color of the panelbar header when selected.
$kendo-panelbar-selected-markerif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Color of the marker of the panelbar header when selected.
$kendo-panelbar-header-selected-hover-bg$kendo-panelbar-header-selected-bg
Description
Background color of the panelbar header when selected and hovered.
$kendo-panelbar-header-selected-hover-text$kendo-panelbar-header-hover-text
Description
Text color of the panelbar header when selected and hovered.
$kendo-panelbar-header-selected-hover-borderinherit
Description
Border color of the panelbar header when selected and hovered.
$kendo-panelbar-header-selected-focus-bg$kendo-panelbar-header-selected-bg
Description
Background color of the panelbar header when selected and focused.
$kendo-panelbar-header-selected-focus-text$kendo-panelbar-header-selected-text
Description
Text color of the panelbar header when selected and focused.
$kendo-panelbar-header-selected-focus-borderinherit
Description
Border color of the panelbar header when selected and focused.
$kendo-panelbar-header-selected-hover-focus-bg$kendo-panelbar-header-selected-hover-bg
Description
Background color of the panelbar header when selected, focused and hovered.
$kendo-panelbar-header-selected-hover-focus-text$kendo-panelbar-header-selected-hover-text
Description
Text color of the panelbar header when selected, focused and hovered.
$kendo-panelbar-header-selected-hover-focus-borderinherit
Description
Border color of the panelbar header when selected, focused and hovered.
$kendo-panelbar-header-expanded-bginherit
Description
Background color of the panelbar header when expanded.
$kendo-panelbar-header-expanded-textinherit
Description
Text color of the panelbar header when expanded.
$kendo-panelbar-header-expanded-borderinherit
Description
Border color of the panelbar header when expanded.
$kendo-panelbar-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the panelbar item when hovered.
$kendo-panelbar-item-hover-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
Text color of the panelbar item when hovered.
$kendo-panelbar-item-hover-borderinherit
Description
Border color of the panelbar item when hovered.
$kendo-panelbar-item-focus-bginherit
Description
Background color of the panelbar item when focused.
$kendo-panelbar-item-focus-textinherit
Description
Text color of the panelbar item when focused.
$kendo-panelbar-item-focus-borderinherit
Description
Border color of the panelbar item when focused.
$kendo-panelbar-item-focus-shadow$kendo-list-item-focus-shadow
Description
Box shadow of the panelbar item when focused.
$kendo-panelbar-item-hover-focus-bg$kendo-panelbar-item-hover-bg
Description
Background color of the panelbar item when focused and hovered.
$kendo-panelbar-item-hover-focus-text$kendo-panelbar-item-hover-text
Description
Text color of the panelbar item when focused and hovered.
$kendo-panelbar-item-hover-focus-borderinherit
Description
Border color of the panelbar item when focused and hovered.
$kendo-panelbar-item-selected-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the panelbar item when selected.
$kendo-panelbar-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Text color of the panelbar item when selected.
$kendo-panelbar-item-selected-borderinherit
Description
Border color of the panelbar item when selected.
$kendo-panelbar-item-selected-hover-bg$kendo-panelbar-item-selected-bg
Description
Background color of the panelbar item when selected and hovered.
$kendo-panelbar-item-selected-hover-text$kendo-panelbar-item-hover-text
Description
Text color of the panelbar item when selected and hovered.
$kendo-panelbar-item-selected-hover-borderinherit
Description
Border color of the panelbar item when selected and hovered.
$kendo-panelbar-item-selected-focus-bg$kendo-panelbar-item-selected-bg
Description
Background color of the panelbar item when selected and focused.
$kendo-panelbar-item-selected-focus-text$kendo-panelbar-item-selected-text
Description
Text color of the panelbar item when selected and focused.
$kendo-panelbar-item-selected-focus-borderinherit
Description
Border color of the panelbar item when selected and focused.
$kendo-panelbar-item-selected-hover-focus-bg$kendo-panelbar-item-selected-hover-bg
Description
Background color of the panelbar item when selected, focused and hovered.
$kendo-panelbar-item-selected-hover-focus-text$kendo-panelbar-item-selected-hover-text
Description
Text color of the panelbar item when selected, focused and hovered.
$kendo-panelbar-item-selected-hover-focus-borderinherit
Description
Border color of the panelbar item when selected, focused and hovered.

In this article

Not finding the help you need?