New to Kendo UI for Angular? Start a free 30-day trial
Customizing Panelbar
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-panelbar-padding-x | 0px | ||
Description
Horizontal padding of the panelbar. | |||
| $kendo-panelbar-padding-y | 0px | ||
Description
Vertical padding of the panelbar. | |||
| $kendo-panelbar-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the panelbar. | |||
| $kendo-panelbar-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the panelbar. | |||
| $kendo-panelbar-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the panelbar. | |||
| $kendo-panelbar-border-width | 1px | ||
Description
Width of the border around the panelbar. | |||
| $kendo-panelbar-border-style | solid | ||
Description
Border style around the the panelbar. | |||
| $kendo-panelbar-item-border-width | 0 | ||
Description
Width of the border around the panelbar items. | |||
| $kendo-panelbar-item-border-style | solid | ||
Description
Style of the border around the panelbar items. | |||
| $kendo-panelbar-icon-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing around the icon of the panelbar items. | |||
| $kendo-panelbar-header-padding-x-start | calc( 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-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the panelbar header. | |||
| $kendo-panelbar-item-padding-x-start | calc( 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-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the panelbar items. | |||
| $kendo-panelbar-item-level-count | 4 | ||
Description
Maximum nesting of the panelbar items. | |||
| $kendo-panelbar-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the panelbar. | |||
| $kendo-panelbar-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the panelbar. | |||
| $kendo-panelbar-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the panelbar. | |||
| $kendo-panelbar-header-bg | var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} ) | ||
Description
Background color of the panelbar header. | |||
| $kendo-panelbar-header-text | var( --kendo-panelbar-text, #{$kendo-panelbar-text} ) | ||
Description
Text color of the panelbar header. | |||
| $kendo-panelbar-header-border | inherit | ||
Description
Border color of the panelbar header. | |||
| $kendo-panelbar-header-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the panelbar header when hovered. | |||
| $kendo-panelbar-header-hover-text | k-get-theme-color-var( primary-110 ) | ||
Description
Text color of the panelbar header when hovered. | |||
| $kendo-panelbar-header-hover-border | inherit | ||
Description
Border color of the panelbar header when hovered. | |||
| $kendo-panelbar-header-focus-bg | inherit | ||
Description
Background color of the panelbar header when focused. | |||
| $kendo-panelbar-header-focus-text | inherit | ||
Description
Text color of the panelbar header when focused. | |||
| $kendo-panelbar-header-focus-border | inherit | ||
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-border | null | ||
Description
Border color of the panelbar header when focused and hovered. | |||
| $kendo-panelbar-header-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the panelbar header when selected. | |||
| $kendo-panelbar-header-selected-text | $kendo-color-black | ||
Description
Text color of the panelbar header when selected. | |||
| $kendo-panelbar-header-selected-border | inherit | ||
Description
Border color of the panelbar header when selected. | |||
| $kendo-panelbar-selected-marker | 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-border | inherit | ||
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-border | inherit | ||
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-border | inherit | ||
Description
Border color of the panelbar header when selected, focused and hovered. | |||
| $kendo-panelbar-header-expanded-bg | inherit | ||
Description
Background color of the panelbar header when expanded. | |||
| $kendo-panelbar-header-expanded-text | inherit | ||
Description
Text color of the panelbar header when expanded. | |||
| $kendo-panelbar-header-expanded-border | inherit | ||
Description
Border color of the panelbar header when expanded. | |||
| $kendo-panelbar-item-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the panelbar item when hovered. | |||
| $kendo-panelbar-item-hover-text | k-get-theme-color-var( primary-110 ) | ||
Description
Text color of the panelbar item when hovered. | |||
| $kendo-panelbar-item-hover-border | inherit | ||
Description
Border color of the panelbar item when hovered. | |||
| $kendo-panelbar-item-focus-bg | inherit | ||
Description
Background color of the panelbar item when focused. | |||
| $kendo-panelbar-item-focus-text | inherit | ||
Description
Text color of the panelbar item when focused. | |||
| $kendo-panelbar-item-focus-border | inherit | ||
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-border | inherit | ||
Description
Border color of the panelbar item when focused and hovered. | |||
| $kendo-panelbar-item-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the panelbar item when selected. | |||
| $kendo-panelbar-item-selected-text | $kendo-color-black | ||
Description
Text color of the panelbar item when selected. | |||
| $kendo-panelbar-item-selected-border | inherit | ||
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-border | inherit | ||
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-border | inherit | ||
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-border | inherit | ||
Description
Border color of the panelbar item when selected, focused and hovered. | |||
