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, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| 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, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the TaskBoard. | |||
kendo-taskboard-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 TaskBoard. | |||
kendo-taskboard-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 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, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the TaskBoard Toolbar. | |||
kendo-taskboard-toolbar-padding-x | $kendo-taskboard-toolbar-padding-y | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-toolbar-padding-yComputed: var(--kendo-spacing-4, 1rem) |
| 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 | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the TaskBoard content. | |||
kendo-taskboard-content-padding-x | $kendo-taskboard-content-padding-y | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-content-padding-yComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the TaskBoard content. | |||
kendo-taskboard-column-container-spacing-y | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4, 1rem) / 2) |
| Description: The vertical spacing of the TaskBoard column container. | |||
kendo-taskboard-column-container-padding-y | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) |
| 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, 1rem) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4, 1rem) / 2) |
| Description: The horizontal padding of the TaskBoard column container. | |||
kendo-taskboard-columns-container-gap | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| 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, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border radius of the TaskBoard column. | |||
kendo-taskboard-column-bg | $kendo-base-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-base-bgComputed: var(--kendo-color-surface, #fafafa) |
| 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 | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))Computed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) |
| 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, 1rem) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4, 1rem) / 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, 1rem) / 2) | Default: $kendo-taskboard-column-header-padding-yComputed: calc(var(--kendo-spacing-4, 1rem) / 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, 1rem) / 4) | Default: calc( #{$kendo-taskboard-spacer} / 4 )Computed: calc(var(--kendo-spacing-4, 1rem) / 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, 1rem) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4, 1rem) / 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 | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| 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, 1rem) / 2) | Default: calc( #{$kendo-taskboard-spacer} / 2 )Computed: calc(var(--kendo-spacing-4, 1rem) / 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-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 TaskBoard pane. | |||
kendo-taskboard-pane-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 TaskBoard pane. | |||
kendo-taskboard-pane-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 TaskBoard pane. | |||
kendo-taskboard-pane-header-padding-y | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) | Default: calc( #{$kendo-taskboard-spacer} * .75 )Computed: calc(var(--kendo-spacing-4, 1rem) * 0.75) |
| Description: The vertical padding of the TaskBoard pane header. | |||
kendo-taskboard-pane-header-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| 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 | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the TaskBoard pane header. | |||
kendo-taskboard-pane-content-padding-y | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) |
| Description: The vertical padding of the TaskBoard pane content. | |||
kendo-taskboard-pane-content-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| 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, 1rem) * 0.75) | Default: calc( #{$kendo-taskboard-spacer} * .75 )Computed: calc(var(--kendo-spacing-4, 1rem) * 0.75) |
| Description: The vertical padding of the TaskBoard pane actions. | |||
kendo-taskboard-pane-actions-padding-x | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the TaskBoard pane actions. | |||
kendo-taskboard-card-padding-y | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the TaskBoard Card. | |||
kendo-taskboard-card-padding-x | $kendo-taskboard-card-padding-y | var(--kendo-spacing-4, 1rem) | Default: $kendo-taskboard-card-padding-yComputed: var(--kendo-spacing-4, 1rem) |
| 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, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| 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, #ffffff) | Default: $kendo-card-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the TaskBoard Card. | |||
kendo-taskboard-card-text | $kendo-card-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-card-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the TaskBoard Card. | |||
kendo-taskboard-card-border | $kendo-card-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-card-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| 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 | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))Computed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) |
| Description: The border color of the hovered TaskBoard Card. | |||
kendo-taskboard-card-focus-border | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))Computed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) |
| 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 | if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) | var(--kendo-color-primary-emphasis, #ff9d97) | Default: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))Computed: var(--kendo-color-primary-emphasis, #ff9d97) |
| 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 | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the TaskBoard Card header text. | |||
kendo-taskboard-card-header-hover-text | if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) | var(--kendo-color-primary-hover, #ea5a51) | Default: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)Computed: var(--kendo-color-primary-hover, #ea5a51) |
| Description: The text color of the hovered TaskBoard Card header text. | |||
kendo-taskboard-card-header-focus-text | if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) | var(--kendo-color-primary-hover, #ea5a51) | Default: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)Computed: var(--kendo-color-primary-hover, #ea5a51) |
| 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, 0.25rem) | Default: $kendo-taskboard-card-border-radiusComputed: var(--kendo-border-radius-md, 0.25rem) |
| 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 | $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 TaskBoard Card placeholder. | |||
