Customizing Panelbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the PanelBar.
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PanelBar.
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PanelBar.
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PanelBar.
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PanelBar.
$kendo-panelbar-border-widthNumber1px1px
Description
The width of the border around the PanelBar.
$kendo-panelbar-border-styleStringsolidsolid
Description
The border style around the the PanelBar.
$kendo-panelbar-item-border-widthNumber1px1px
Description
The width of the border around the PanelBar items.
$kendo-panelbar-item-border-styleStringsolidsolid
Description
The style of the border around the PanelBar items.
$kendo-panelbar-header-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PanelBar header.
$kendo-panelbar-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the PanelBar header.
$kendo-panelbar-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PanelBar items.
$kendo-panelbar-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the PanelBar items.
$kendo-panelbar-item-level-countNumber44
Description
The maximum nesting of the PanelBar items.
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar.
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PanelBar.
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PanelBar.
$kendo-panelbar-header-bgString$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar header.
$kendo-panelbar-header-textString$kendo-link-textvar(--kendo-color-primary, #ff6358)
Description
The text color of the PanelBar header.
$kendo-panelbar-header-borderNullnullnull
Description
The border color of the PanelBar header.
$kendo-panelbar-header-gradientNullnullnull
Description
The gradient of the PanelBar header.
$kendo-panelbar-header-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered PanelBar header.
$kendo-panelbar-header-hover-textNullnullnull
Description
The text color of the hovered PanelBar header.
$kendo-panelbar-header-hover-borderNullnullnull
Description
The border color of the hovered PanelBar header.
$kendo-panelbar-header-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar header.
$kendo-panelbar-header-focus-bgNullnullnull
Description
The background color of the focused PanelBar header.
$kendo-panelbar-header-focus-textNullnullnull
Description
The text color of the focused PanelBar header.
$kendo-panelbar-header-focus-borderNullnullnull
Description
The border color of the focused PanelBar header.
$kendo-panelbar-header-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar header.
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The shadow of the focused PanelBar header.
$kendo-panelbar-header-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar header.
$kendo-panelbar-header-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The background color of the selected PanelBar header.
$kendo-panelbar-header-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar header.
$kendo-panelbar-header-selected-borderNullnullnull
Description
The border color of the selected PanelBar header.
$kendo-panelbar-header-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar header.
$kendo-panelbar-header-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #ea5a51)
Description
The background color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-textNullnullnull
Description
The text color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-bgNullnullnull
Description
The background color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-textNullnullnull
Description
The text color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull
Description
The border color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-gradientNullnullnull
Description
The gradient of the selected, hovered and focused PanelBar header.
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered PanelBar items.
$kendo-panelbar-item-hover-textNullnullnull
Description
The text color of the hovered PanelBar items.
$kendo-panelbar-item-hover-borderNullnullnull
Description
The border color of the hovered PanelBar items.
$kendo-panelbar-item-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar items.
$kendo-panelbar-item-focus-bgNullnullnull
Description
The background color of the focused PanelBar items.
$kendo-panelbar-item-focus-textNullnullnull
Description
The text color of the focused PanelBar items.
$kendo-panelbar-item-focus-borderNullnullnull
Description
The border color of the focused PanelBar items.
$kendo-panelbar-item-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar items.
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused PanelBar items.
$kendo-panelbar-item-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar items.
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The background color of the selected PanelBar items.
$kendo-panelbar-item-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar items.
$kendo-panelbar-item-selected-borderNullnullnull
Description
The border color of the selected PanelBar items.
$kendo-panelbar-item-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar items.
$kendo-panelbar-item-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #ea5a51)
Description
The background color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-textNullnullnull
Description
The text color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-bgNullnullnull
Description
The background color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-textNullnullnull
Description
The text color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-borderNullnullnull
Description
The border color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull
Description
The gradient of the selected, hovered and focused PanelBar items.
$kendo-panelbar-header-expanded-bgNullnullnull
Description
The background color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-textNullnullnull
Description
The text color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-borderNullnullnull
Description
The border color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-gradientNullnullnull
Description
The gradient of the expanded PanelBar header.

In this article

Not finding the help you need?