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) | Default: k-spacing(6)Computed: var(--kendo-spacing-6) |
| Description: The spacing index of the OrgChart. | |||
kendo-orgchart-padding-y | $kendo-orgchart-spacer | var(--kendo-spacing-6) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6) |
| Description: The vertical padding of the OrgChart. | |||
kendo-orgchart-padding-x | $kendo-orgchart-padding-y | var(--kendo-spacing-6) | Default: $kendo-orgchart-padding-yComputed: var(--kendo-spacing-6) |
| Description: The horizontal padding of the OrgChart. | |||
kendo-orgchart-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the OrgChart. | |||
kendo-orgchart-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the OrgChart. | |||
kendo-orgchart-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the OrgChart. | |||
kendo-orgchart-bg | k-color(surface-alt) | var(--kendo-color-surface-alt) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt) |
| Description: The background color of the OrgChart. | |||
kendo-orgchart-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the OrgChart. | |||
kendo-orgchart-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the OrgChart. | |||
kendo-orgchart-node-gap | $kendo-orgchart-spacer | var(--kendo-spacing-6) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6) |
| Description: The spacing of the OrgChart node. | |||
kendo-orgchart-group-gap | $kendo-orgchart-spacer | var(--kendo-spacing-6) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6) |
| Description: The spacing of the OrgChart group. | |||
kendo-orgchart-node-group-padding-y | $kendo-orgchart-spacer | var(--kendo-spacing-6) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6) |
| 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) | Default: $kendo-orgchart-node-group-padding-yComputed: var(--kendo-spacing-6) |
| 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) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md) |
| Description: The border radius of the OrgChart node group. | |||
kendo-orgchart-node-group-bg | k-color(surface) | var(--kendo-color-surface) | Default: k-color(surface)Computed: var(--kendo-color-surface) |
| Description: The background color of the OrgChart node group. | |||
kendo-orgchart-node-group-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the OrgChart node group. | |||
kendo-orgchart-node-group-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the OrgChart node group. | |||
kendo-orgchart-node-group-focus-border | $kendo-card-focus-border | var(--kendo-color-border-alt) | Default: $kendo-card-focus-borderComputed: var(--kendo-color-border-alt) |
| Description: The border color of the focused OrgChart node group. | |||
kendo-orgchart-node-group-focus-shadow | k-elevation(1) | var(--kendo-elevation-1) | Default: k-elevation(1)Computed: var(--kendo-elevation-1) |
| Description: The shadow of the focused OrgChart node group. | |||
kendo-orgchart-node-group-title-font-size | var(--kendo-font-size-lg) | var(--kendo-font-size-lg) | Default: var(--kendo-font-size-lg)Computed: var(--kendo-font-size-lg) |
| 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) / 3) | Default: calc( #{$kendo-orgchart-spacer} / 3 )Computed: calc(var(--kendo-spacing-6) / 3) |
| Description: The bottom margin of the OrgChart node group title. | |||
kendo-orgchart-node-group-title-line-height | var(--kendo-line-height-sm) | var(--kendo-line-height-sm) | Default: var(--kendo-line-height-sm)Computed: var(--kendo-line-height-sm) |
| Description: The line height of the OrgChart node group title. | |||
kendo-orgchart-node-group-subtitle-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the OrgChart node group subtitle. | |||
kendo-orgchart-node-group-subtitle-margin-bottom | $kendo-orgchart-spacer | var(--kendo-spacing-6) | Default: $kendo-orgchart-spacerComputed: var(--kendo-spacing-6) |
| Description: The bottom margin of the OrgChart node group subtitle. | |||
kendo-orgchart-node-group-subtitle-text | k-color(subtle) | var(--kendo-color-subtle) | Default: k-color(subtle)Computed: var(--kendo-color-subtle) |
| 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-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) | Default: k-elevation(1)Computed: var(--kendo-elevation-1) |
| Description: The shadow of the focused OrgChart Card. | |||
kendo-orgchart-card-title-margin-bottom | k-spacing(0) | var(--kendo-spacing-0) | Default: k-spacing(0)Computed: var(--kendo-spacing-0) |
| 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) | Default: k-spacing(0)Computed: var(--kendo-spacing-0) |
| 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 | list.slash( $kendo-orgchart-spacer, 2 ) | (var(--kendo-spacing-6) / 2) | Default: list.slash( $kendo-orgchart-spacer, 2 )Computed: (var(--kendo-spacing-6) / 2) |
| Description: The right margin of the OrgChart Card body title wrap. | |||
kendo-orgchart-card-body-vbox-min-height | k-spacing(11) | var(--kendo-spacing-11) | Default: k-spacing(11)Computed: var(--kendo-spacing-11) |
| 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 | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The fill color of the OrgChart connecting line. | |||
kendo-orgchart-line-v-height | k-spacing(6) | var(--kendo-spacing-6) | Default: k-spacing(6)Computed: var(--kendo-spacing-6) |
| Description: The height of the OrgChart connecting line. | |||
