Sass Variables
The Telerik and Kendo UI OrgChart is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Sass variables provided by the Card, Button, and Avatar components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-orgchart-spacer | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) | Default: k-spacing(6)Computed: var(--kendo-spacing-6, 1.5rem) |
| Description: The spacing index of the OrgChart. | |||
kendo-orgchart-padding-y | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The vertical padding of the OrgChart. | |||
kendo-orgchart-padding-x | $kendo-orgchart-padding-y | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-padding-yComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The horizontal padding of the OrgChart. | |||
kendo-orgchart-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 OrgChart. | |||
kendo-orgchart-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 OrgChart. | |||
kendo-orgchart-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 line height of the OrgChart. | |||
kendo-orgchart-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 OrgChart. | |||
kendo-orgchart-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 OrgChart. | |||
kendo-orgchart-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 OrgChart. | |||
kendo-orgchart-node-gap | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The spacing of the OrgChart node. | |||
kendo-orgchart-group-gap | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The spacing of the OrgChart group. | |||
kendo-orgchart-node-container-gap | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The spacing of the OrgChart node container. | |||
kendo-orgchart-node-group-padding-y | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The vertical padding of the OrgChart node group. | |||
kendo-orgchart-node-group-padding-x | $kendo-orgchart-node-group-padding-y | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-node-group-padding-yComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The horizontal padding of the OrgChart node group. | |||
kendo-orgchart-node-group-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the OrgChart node group. | |||
kendo-orgchart-node-group-border-radius | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border radius of the OrgChart node group. | |||
kendo-orgchart-node-group-bg | $kendo-base-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-base-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the OrgChart node group. | |||
kendo-orgchart-node-group-text | $kendo-base-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-base-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the OrgChart node group. | |||
kendo-orgchart-node-group-border | $kendo-base-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-base-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the OrgChart node group. | |||
kendo-orgchart-node-group-focus-border | $kendo-card-focus-border | rgba(0, 0, 0, 0.15) | Default: $kendo-card-focus-borderComputed: rgba(0, 0, 0, 0.15) |
| Description: The border color of the focused OrgChart node group. | |||
kendo-orgchart-node-group-focus-shadow | k-elevation(1) | var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(1)Computed: var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the focused OrgChart node group. | |||
kendo-orgchart-node-group-title-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit) |
| Description: The font size of the OrgChart node group title. | |||
kendo-orgchart-node-group-title-margin-bottom | calc( #{$kendo-orgchart-spacer} / 3 ) | calc(var(--kendo-spacing-6, 1.5rem) / 3) | Default: calc( #{$kendo-orgchart-spacer} / 3 )Computed: calc(var(--kendo-spacing-6, 1.5rem) / 3) |
| Description: The bottom margin of the OrgChart node group title. | |||
kendo-orgchart-node-group-title-line-height | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) | Default: var( --kendo-line-height-sm, normal )Computed: var(--kendo-line-height-sm, normal) |
| Description: The line height of the OrgChart node group title. | |||
kendo-orgchart-node-group-subtitle-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 OrgChart node group subtitle. | |||
kendo-orgchart-node-group-subtitle-margin-bottom | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6, 1.5rem) |
| Description: The bottom margin of the OrgChart node group subtitle. | |||
kendo-orgchart-node-group-subtitle-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The line height of the OrgChart node group subtitle. | |||
kendo-orgchart-card-width | 300px | 300px | Default: 300pxComputed: 300px |
| Description: The width of the OrgChart Card. | |||
kendo-orgchart-card-padding-y | $kendo-card-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-card-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the OrgChart Card. | |||
kendo-orgchart-card-padding-x | $kendo-orgchart-card-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-orgchart-card-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the OrgChart Card. | |||
kendo-orgchart-card-border-width | $kendo-card-border-width | 1px | Default: $kendo-card-border-widthComputed: 1px |
| Description: The border width of the OrgChart Card. | |||
kendo-orgchart-card-shadow | $kendo-card-shadow | null | Default: $kendo-card-shadowComputed: null |
| Description: The shadow of the OrgChart Card. | |||
kendo-orgchart-card-focus-shadow | k-elevation(1) | var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(1)Computed: var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the focused OrgChart Card. | |||
kendo-orgchart-card-title-margin-bottom | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) |
| Description: The bottom margin of the OrgChart Card title. | |||
kendo-orgchart-card-title-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the OrgChart Card title. | |||
kendo-orgchart-card-subtitle-margin-bottom | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) |
| Description: The bottom margin of the OrgChart Card subtitle. | |||
kendo-orgchart-card-subtitle-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the OrgChart Card subtitle. | |||
kendo-orgchart-card-body-border-width | 2px 0 0 | 2px 0 0 | Default: 2px 0 0Computed: 2px 0 0 |
| Description: The border width of the OrgChart Card body. | |||
kendo-orgchart-card-body-border-color | transparent | transparent | Default: transparentComputed: transparent |
| Description: The border color of the OrgChart Card body. | |||
kendo-orgchart-card-body-vbox-margin-right | k-math-div( $kendo-orgchart-spacer, 2 ) | var(--kendo-spacing-6, 1.5rem)/2 | Default: k-math-div( $kendo-orgchart-spacer, 2 )Computed: var(--kendo-spacing-6, 1.5rem)/2 |
| Description: The right margin of the OrgChart Card body title wrap. | |||
kendo-orgchart-card-body-vbox-min-height | $kendo-card-avatar-size | 45px | Default: $kendo-card-avatar-sizeComputed: 45px |
| Description: The min height of the OrgChart Card body title wrap. | |||
kendo-orgchart-line-size | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The size of the OrgChart connecting line. | |||
kendo-orgchart-line-fill | $kendo-base-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-base-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The fill color of the OrgChart connecting line. | |||
kendo-orgchart-line-v-height | 25px | 25px | Default: 25pxComputed: 25px |
| Description: The height of the OrgChart connecting line. | |||
