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

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-heightNumberk-math-div( 20, 14 )1.4285714286
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(6)var(--kendo-spacing-6, 1.5rem)
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(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PanelBar items.
$kendo-panelbar-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
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, #212121)
Description
The text color of the PanelBar.
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
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-secondary, #e51a5f)
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-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 ))var(--kendo-color-base-active, #d6d6d6)
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-shadowNullnullnull
Description
The shadow of the focused PanelBar header.
$kendo-panelbar-header-hover-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 ))var(--kendo-color-base-active, #d6d6d6)
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-secondary, #e51a5f)
Description
The background color of the selected PanelBar header.
$kendo-panelbar-header-selected-textString$kendo-selected-textvar(--kendo-color-on-secondary, #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( secondary-hover ), k-try-tint($kendo-panelbar-header-selected-bg, .95))var(--kendo-color-secondary-hover, #d31857)
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-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3))var(--kendo-color-secondary-active, #c01650)
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-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3.95))var(--kendo-color-secondary-active, #c01650)
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-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 ))var(--kendo-color-base-active, #d6d6d6)
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-shadowNullnullnull
Description
The box shadow of the focused PanelBar items.
$kendo-panelbar-item-hover-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 ))var(--kendo-color-base-active, #d6d6d6)
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-secondary, #e51a5f)
Description
The background color of the selected PanelBar items.
$kendo-panelbar-item-selected-textString$kendo-selected-textvar(--kendo-color-on-secondary, #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( secondary-hover ), k-try-tint($kendo-panelbar-item-selected-bg, .95))var(--kendo-color-secondary-hover, #d31857)
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-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3))var(--kendo-color-secondary-active, #c01650)
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-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3.95))var(--kendo-color-secondary-active, #c01650)
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?