Sass Variables
The Telerik and Kendo UI ExpansionPanel enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-expander-spacing-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical spacing of the ExpansionPanel. | |||
kendo-expander-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the ExpansionPanel. | |||
kendo-expander-font-family | var( --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 ExpansionPanel. | |||
kendo-expander-font-size | var( --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 ExpansionPanel. | |||
kendo-expander-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The hine height of the ExpansionPanel. | |||
kendo-expander-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the ExpansionPanel. | |||
kendo-expander-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the ExpansionPanel. | |||
kendo-expander-border | $kendo-component-border | var(--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 ExpansionPanel. | |||
kendo-expander-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 ExpansionPanel. | |||
kendo-expander-header-padding-x | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the ExpansionPanel header. | |||
kendo-expander-header-padding-y | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the ExpansionPanel header. | |||
kendo-expander-header-text | $kendo-expander-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-expander-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the ExpansionPanel header. | |||
kendo-expander-header-bg | transparent | transparent | Default: transparentComputed: transparent |
| Description: The background color of the ExpansionPanel header. | |||
kendo-expander-header-border | null | null | Default: nullComputed: null |
| Description: The border color of the ExpansionPanel header. | |||
kendo-expander-header-hover-bg | rgba(0, 0, 0, .04) | rgba(0, 0, 0, 0.04) | Default: rgba(0, 0, 0, .04)Computed: rgba(0, 0, 0, 0.04) |
| Description: The background color of the hovered ExpansionPanel header. | |||
kendo-expander-header-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused ExpansionPanel header. | |||
kendo-expander-header-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 ExpansionPanel header. | |||
kendo-expander-title-text | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the ExpansionPanel title. | |||
kendo-expander-header-sub-title-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the ExpansionPanel sub-title. | |||
kendo-expander-indicator-margin-x | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal margin of the ExpansionPanel indicator. | |||
kendo-expander-content-padding-x | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the ExpansionPanel content. | |||
kendo-expander-content-padding-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the ExpansionPanel content. | |||
