Sass Variables
The Telerik and Kendo UI TaskBoard 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 Toolbar, Button, and Card components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-taskboard-spacer | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The spacing index of the TaskBoard. | |||
kendo-taskboard-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the TaskBoard. | |||
kendo-taskboard-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal of the TaskBoard. | |||
kendo-taskboard-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 TaskBoard. | |||
kendo-taskboard-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 TaskBoard. | |||
kendo-taskboard-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 TaskBoard. | |||
kendo-taskboard-bg | null | null | Default: nullComputed: null |
| Description: The background color of the TaskBoard. | |||
kendo-taskboard-text | null | null | Default: nullComputed: null |
| Description: The text color of the TaskBoard. | |||
kendo-taskboard-border | null | null | Default: nullComputed: null |
| Description: The border color of the TaskBoard. | |||
kendo-taskboard-toolbar-padding-y | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The vertical padding of the TaskBoard Toolbar. | |||
kendo-taskboard-toolbar-padding-x | $kendo-taskboard-toolbar-padding-y | var(--kendo-spacing-4) | Default: $kendo-taskboard-toolbar-padding-yComputed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the TaskBoard Toolbar. | |||
kendo-taskboard-toolbar-bg | null | null | Default: nullComputed: null |
| Description: The background color of the TaskBoard Toolbar. | |||
kendo-taskboard-toolbar-text | null | null | Default: nullComputed: null |
| Description: The text color of the TaskBoard Toolbar. | |||
kendo-taskboard-toolbar-border | null | null | Default: nullComputed: null |
| Description: The border color of the TaskBoard Toolbar. | |||
kendo-taskboard-toolbar-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the TaskBoard Toolbar. | |||
kendo-taskboard-content-padding-y | 0 $kendo-taskboard-spacer | (0 var(--kendo-spacing-4)) | Default: 0 $kendo-taskboard-spacerComputed: (0 var(--kendo-spacing-4)) |
| Description: The vertical padding of the TaskBoard content. | |||
kendo-taskboard-content-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the TaskBoard content. | |||
kendo-taskboard-column-container-spacing-y | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4) / 2) |
| Description: The vertical spacing of the TaskBoard column container. | |||
kendo-taskboard-column-container-padding-y | k-spacing(0) | var(--kendo-spacing-0) | Default: k-spacing(0)Computed: var(--kendo-spacing-0) |
| Description: The vertical padding of the TaskBoard column container. | |||
kendo-taskboard-column-container-padding-x | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4) / 2) |
| Description: The horizontal padding of the TaskBoard column container. | |||
kendo-taskboard-columns-container-gap | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The spacing of the TaskBoard columns container. | |||
kendo-taskboard-column-width | 320px | 320px | Default: 320pxComputed: 320px |
| Description: The default width of the TaskBoard column. | |||
kendo-taskboard-column-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the TaskBoard column. | |||
kendo-taskboard-column-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 TaskBoard column. | |||
kendo-taskboard-column-bg | k-color(surface) | var(--kendo-color-surface) | Default: k-color(surface)Computed: var(--kendo-color-surface) |
| Description: The background color of the TaskBoard column. | |||
kendo-taskboard-column-text | null | null | Default: nullComputed: null |
| Description: The text color of the TaskBoard column. | |||
kendo-taskboard-column-border | transparent | transparent | Default: transparentComputed: transparent |
| Description: The border color of the TaskBoard column. | |||
kendo-taskboard-column-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused TaskBoard column. | |||
kendo-taskboard-column-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the focused TaskBoard column. | |||
kendo-taskboard-column-focus-border | k-color(border-alt) | var(--kendo-color-border-alt) | Default: k-color(border-alt)Computed: var(--kendo-color-border-alt) |
| Description: The border color of the focused TaskBoard column. | |||
kendo-taskboard-column-header-padding-y | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4) / 2) |
| Description: The vertical padding of the TaskBoard column header. | |||
kendo-taskboard-column-header-padding-x | $kendo-taskboard-column-header-padding-y | calc(var(--kendo-spacing-4) / 2) | Default: $kendo-taskboard-column-header-padding-yComputed: calc(var(--kendo-spacing-4) / 2) |
| Description: The horizontal padding of the TaskBoard column header. | |||
kendo-taskboard-column-header-gap | calc( #{$kendo-taskboard-spacer} / 4 ) | calc(var(--kendo-spacing-4) / 4) | Default: calc( #{$kendo-taskboard-spacer} / 4 )Computed: calc(var(--kendo-spacing-4) / 4) |
| Description: The spacing of the TaskBoard column header. | |||
kendo-taskboard-column-header-actions-gap | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4) / 2) |
| Description: The spacing of the TaskBoard column header actions. | |||
kendo-taskboard-column-header-font-weight | 500 | 500 | Default: 500Computed: 500 |
| Description: The font weight of the TaskBoard column header. | |||
kendo-taskboard-column-header-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 TaskBoard column header. | |||
kendo-taskboard-column-cards-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the TaskBoard column Card wrapper. | |||
kendo-taskboard-column-cards-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the TaskBoard column Card wrapper. | |||
kendo-taskboard-column-cards-gap | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4) / 2) |
| Description: The spacing of the TaskBoard column Card wrapper. | |||
kendo-taskboard-pane-width | $kendo-taskboard-column-width | 320px | Default: $kendo-taskboard-column-widthComputed: 320px |
| Description: The default width of the TaskBoard pane. | |||
kendo-taskboard-pane-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the TaskBoard pane. | |||
kendo-taskboard-pane-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the TaskBoard pane. | |||
kendo-taskboard-pane-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the TaskBoard pane. | |||
kendo-taskboard-pane-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the TaskBoard pane. | |||
kendo-taskboard-pane-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 TaskBoard pane. | |||
kendo-taskboard-pane-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 TaskBoard pane. | |||
kendo-taskboard-pane-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the TaskBoard pane. | |||
kendo-taskboard-pane-header-padding-y | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4) * 0.75) | Default: calc( #{$kendo-taskboard-spacer} * .75 )Computed: calc(var(--kendo-spacing-4) * 0.75) |
| Description: The vertical padding of the TaskBoard pane header. | |||
kendo-taskboard-pane-header-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the TaskBoard pane header. | |||
kendo-taskboard-pane-header-font-weight | 500 | 500 | Default: 500Computed: 500 |
| Description: The font weight of the TaskBoard pane header. | |||
kendo-taskboard-pane-header-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 TaskBoard pane header. | |||
kendo-taskboard-pane-content-padding-y | k-spacing(0) | var(--kendo-spacing-0) | Default: k-spacing(0)Computed: var(--kendo-spacing-0) |
| Description: The vertical padding of the TaskBoard pane content. | |||
kendo-taskboard-pane-content-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the TaskBoard pane content. | |||
kendo-taskboard-pane-actions-padding-y | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4) * 0.75) | Default: calc( #{$kendo-taskboard-spacer} * .75 )Computed: calc(var(--kendo-spacing-4) * 0.75) |
| Description: The vertical padding of the TaskBoard pane actions. | |||
kendo-taskboard-pane-actions-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the TaskBoard pane actions. | |||
kendo-taskboard-card-padding-y | $kendo-taskboard-spacer | var(--kendo-spacing-4) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4) |
| Description: The vertical padding of the TaskBoard Card. | |||
kendo-taskboard-card-padding-x | $kendo-taskboard-card-padding-y | var(--kendo-spacing-4) | Default: $kendo-taskboard-card-padding-yComputed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the TaskBoard Card. | |||
kendo-taskboard-card-border-width | $kendo-card-border-width | 1px | Default: $kendo-card-border-widthComputed: 1px |
| Description: The border width of the TaskBoard Card. | |||
kendo-taskboard-card-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 TaskBoard Card. | |||
kendo-taskboard-card-shadow | $kendo-card-shadow | null | Default: $kendo-card-shadowComputed: null |
| Description: The shadow of the TaskBoard Card. | |||
kendo-taskboard-card-bg | $kendo-card-bg | var(--kendo-color-surface-alt) | Default: $kendo-card-bgComputed: var(--kendo-color-surface-alt) |
| Description: The background color of the TaskBoard Card. | |||
kendo-taskboard-card-text | $kendo-card-text | var(--kendo-color-on-app-surface) | Default: $kendo-card-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of the TaskBoard Card. | |||
kendo-taskboard-card-border | $kendo-card-border | var(--kendo-color-border) | Default: $kendo-card-borderComputed: var(--kendo-color-border) |
| Description: The border color of the TaskBoard Card. | |||
kendo-taskboard-card-category-border-width | 4px | 4px | Default: 4pxComputed: 4px |
| Description: The border width of the TaskBoard Card category. | |||
kendo-taskboard-card-hover-border | k-color(border-alt) | var(--kendo-color-border-alt) | Default: k-color(border-alt)Computed: var(--kendo-color-border-alt) |
| Description: The border color of the hovered TaskBoard Card. | |||
kendo-taskboard-card-focus-border | k-color(border-alt) | var(--kendo-color-border-alt) | Default: k-color(border-alt)Computed: var(--kendo-color-border-alt) |
| Description: The border color of the focused TaskBoard Card. | |||
kendo-taskboard-card-focus-shadow | none | none | Default: noneComputed: none |
| Description: The shadow of the focused TaskBoard Card. | |||
kendo-taskboard-card-selected-border | k-color(primary-emphasis) | var(--kendo-color-primary-emphasis) | Default: k-color(primary-emphasis)Computed: var(--kendo-color-primary-emphasis) |
| Description: The border of the selected TaskBoard Card. | |||
kendo-taskboard-card-selected-shadow | none | none | Default: noneComputed: none |
| Description: The shadow of the selected TaskBoard Card. | |||
kendo-taskboard-card-header-text | k-color(primary-on-surface) | var(--kendo-color-primary-on-surface) | Default: k-color(primary-on-surface)Computed: var(--kendo-color-primary-on-surface) |
| Description: The text color of the TaskBoard Card header text. | |||
kendo-taskboard-card-header-hover-text | k-color(primary-on-surface) | var(--kendo-color-primary-on-surface) | Default: k-color(primary-on-surface)Computed: var(--kendo-color-primary-on-surface) |
| Description: The text color of the hovered TaskBoard Card header text. | |||
kendo-taskboard-card-header-focus-text | k-color(primary-on-surface) | var(--kendo-color-primary-on-surface) | Default: k-color(primary-on-surface)Computed: var(--kendo-color-primary-on-surface) |
| Description: The text color of the focused TaskBoard Card header text. | |||
kendo-taskboard-drag-placeholder-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the TaskBoard Card placeholder. | |||
kendo-taskboard-drag-placeholder-border-radius | $kendo-taskboard-card-border-radius | var(--kendo-border-radius-md) | Default: $kendo-taskboard-card-border-radiusComputed: var(--kendo-border-radius-md) |
| Description: The border radius of the TaskBoard Card placeholder. | |||
kendo-taskboard-drag-placeholder-bg | rgba(255, 255, 255, .2) | rgba(255, 255, 255, 0.2) | Default: rgba(255, 255, 255, .2)Computed: rgba(255, 255, 255, 0.2) |
| Description: The background color of the TaskBoard Card placeholder. | |||
kendo-taskboard-drag-placeholder-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the TaskBoard Card placeholder. | |||
