Sass Variables
The Telerik and Kendo UI Gantt is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Button, TreeList, Splitter, and Grid components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-gantt-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Gantt. | |||
kendo-gantt-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 Gantt. | |||
kendo-gantt-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 Gantt. | |||
kendo-gantt-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 Gantt. | |||
kendo-gantt-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 Gantt. | |||
kendo-gantt-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 Gantt. | |||
kendo-gantt-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 Gantt. | |||
kendo-gantt-treelist-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Gantt TreeList. | |||
kendo-gantt-treelist-text | null | null | Default: nullComputed: null |
| Description: The text color of the Gantt TreeList. | |||
kendo-gantt-treelist-border | null | null | Default: nullComputed: null |
| Description: The border color of the Gantt TreeList. | |||
kendo-gantt-nonwork-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 3%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 ))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 3%, transparent) |
| Description: The background color of the Gantt non-working days. | |||
kendo-gantt-nonwork-text | null | null | Default: nullComputed: null |
| Description: The text color of the Gantt non-working days. | |||
kendo-gantt-nonwork-border | null | null | Default: nullComputed: null |
| Description: The border color of the Gantt non-working days. | |||
kendo-gantt-line-size | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The size of the Gantt connecting lines. | |||
kendo-gantt-line-fill | if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) | var(--kendo-color-on-base, #3d3d3d) | Default: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg ))Computed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The background fill color of the Gantt connecting lines. | |||
kendo-gantt-line-selected-fill | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background fill of the selected Gantt connecting lines. | |||
kendo-gantt-dot-size | 8px | 8px | Default: 8pxComputed: 8px |
| Description: The size of the Gantt task dot. | |||
kendo-gantt-dot-spacing | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing of the Gantt task dot. | |||
kendo-gantt-dot-bg | $kendo-gantt-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-gantt-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The background color of the Gantt task dot. | |||
kendo-gantt-dot-border | null | null | Default: nullComputed: null |
| Description: The border color of the Gantt task dot. | |||
kendo-gantt-dot-hover-bg | $kendo-gantt-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-gantt-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the hovered Gantt task dot. | |||
kendo-gantt-dot-hover-border | $kendo-gantt-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-gantt-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The border color of the hovered Gantt task dot. | |||
kendo-gantt-milestone-bg | $kendo-gantt-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-gantt-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The background color of the Gantt milestone. | |||
kendo-gantt-milestone-border | $kendo-gantt-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-gantt-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Gantt milestone. | |||
kendo-gantt-milestone-selected-bg | $kendo-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the selected Gantt milestone. | |||
kendo-gantt-milestone-selected-border | $kendo-selected-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-selected-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the selected Gantt milestone. | |||
kendo-gantt-summary-bg | if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) | var(--kendo-color-subtle, #666666) | Default: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 ))Computed: var(--kendo-color-subtle, #666666) |
| Description: The background color of the Gantt summary. | |||
kendo-gantt-summary-progress-bg | if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) | var(--kendo-color-on-base, #3d3d3d) | Default: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 ))Computed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The background color of the Gantt summary progress. | |||
kendo-gantt-summary-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) | var(--kendo-color-primary-subtle-active, #ffc8c4) | Default: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 ))Computed: var(--kendo-color-primary-subtle-active, #ffc8c4) |
| Description: The background color of the selected Gantt summary. | |||
kendo-gantt-summary-progress-selected-bg | $kendo-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the selected Gantt summary progress. | |||
kendo-gantt-task-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The border width of the Gantt task. | |||
kendo-gantt-task-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Gantt task. | |||
kendo-gantt-task-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the Gantt task. | |||
kendo-gantt-task-bg | if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) | var(--kendo-color-subtle, #666666) | Default: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 ))Computed: var(--kendo-color-subtle, #666666) |
| Description: The background color of the Gantt task. | |||
kendo-gantt-task-text | if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) | var(--kendo-color-base, #f5f5f5) | Default: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text ))Computed: var(--kendo-color-base, #f5f5f5) |
| Description: The text color of the Gantt task. | |||
kendo-gantt-task-border | null | null | Default: nullComputed: null |
| Description: The border color of the Gantt task. | |||
kendo-gantt-task-progress-bg | $kendo-gantt-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-gantt-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The background color of the Gantt task progress. | |||
kendo-gantt-task-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) | var(--kendo-color-primary-subtle-active, #ffc8c4) | Default: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 ))Computed: var(--kendo-color-primary-subtle-active, #ffc8c4) |
| Description: The background color of selected the Gantt task. | |||
kendo-gantt-task-selected-text | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the selected Gantt task. | |||
kendo-gantt-task-selected-border | null | null | Default: nullComputed: null |
| Description: The border color of the selected Gantt task. | |||
kendo-gantt-task-progress-selected-bg | $kendo-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the selected Gantt task progress. | |||
kendo-gantt-task-actions-padding | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem) |
| Description: The padding of the Gantt task actions. | |||
kendo-gantt-planned-margin-y | .35em | 0.35em | Default: .35emComputed: 0.35em |
| Description: The vertical margin of the Gantt task planned line. | |||
kendo-gantt-planned-border-width | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The border width of the Gantt task planned line. | |||
kendo-gantt-planned-line-height | .75em | 0.75em | Default: .75emComputed: 0.75em |
| Description: The line height of the Gantt task planned line. | |||
kendo-gantt-planned-dependency-margin-y | .55em | 0.55em | Default: .55emComputed: 0.55em |
| Description: The vertical margin of the Gantt planned dependencies. | |||
kendo-gantt-planned-moment-width | 6px | 6px | Default: 6pxComputed: 6px |
| Description: The default width of the Gantt planned line dot. | |||
kendo-gantt-planned-moment-height | $kendo-gantt-planned-moment-width | 6px | Default: $kendo-gantt-planned-moment-widthComputed: 6px |
| Description: The default height of the Gantt planned line dot. | |||
kendo-gantt-planned-moment-border-radius | calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) | calc((4px + 6px) / 2) | Default: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 )Computed: calc((4px + 6px) / 2) |
| Description: The border radius of the Gantt planned line dot. | |||
kendo-gantt-planned-moment-left-margin-x | calc( #{math.div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) | calc(1px - calc((4px + 6px) / 2)) | Default: calc( #{math.div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} )Computed: calc(1px - calc((4px + 6px) / 2)) |
| Description: The horizontal margin of the Gantt planned line dot. | |||
kendo-gantt-planned-milestone-moment-margin-x | math.div( $kendo-gantt-planned-moment-width, 2 ) | 3px | Default: math.div( $kendo-gantt-planned-moment-width, 2 )Computed: 3px |
| Description: The horizontal margin of the Gantt milestone planned line dot. | |||
kendo-gantt-planned-duration-height | $kendo-gantt-planned-border-width | 2px | Default: $kendo-gantt-planned-border-widthComputed: 2px |
| Description: The default height of the Gantt planned line. | |||
kendo-gantt-planned-duration-hover-height | calc( #{$kendo-gantt-planned-border-width} + 1px ) | calc(2px + 1px) | Default: calc( #{$kendo-gantt-planned-border-width} + 1px )Computed: calc(2px + 1px) |
| Description: The height of the hovered Gantt planned line. | |||
kendo-gantt-planned-single-drag-hint-top | 0 | 0 | Default: 0Computed: 0 |
| Description: The top position of the Gantt drag hint. | |||
kendo-gantt-planned-summary-drag-hint-top | .5em | 0.5em | Default: .5emComputed: 0.5em |
| Description: The top position of the Gantt summary drag hint. | |||
kendo-gantt-planned-milestone-drag-hint-top | .3em | 0.3em | Default: .3emComputed: 0.3em |
| Description: The top position of the Gantt planned milestone drag hint. | |||
kendo-gantt-rtl-milestone-wrap-margin-x | -2.4em | -2.4em | Default: -2.4emComputed: -2.4em |
| Description: The horizontal margin of the Gantt milestone wrap. | |||
kendo-gantt-rtl-milestone-planned-moment-margin-x | .2em | 0.2em | Default: .2emComputed: 0.2em |
| Description: The horizontal margin of the Gantt milestone line dot. | |||
kendo-gantt-rtl-milestone-dot-start-margin-x | -.1em | -0.1em | Default: -.1emComputed: -0.1em |
| Description: The horizontal margin of the Gantt milestone task dot. | |||
kendo-gantt-planned-offset-resize-handler-margin-x | 1.4em | 1.4em | Default: 1.4emComputed: 1.4em |
| Description: The horizontal offset of the Gantt delayed task resize handler. | |||
kendo-gantt-planned-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Gantt planned Tooltip. | |||
kendo-gantt-planned-border | $kendo-gantt-planned-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-gantt-planned-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The border color of the Gantt planned Tooltip. | |||
kendo-gantt-delayed-bg | $kendo-color-error | var(--kendo-color-error, #f31700) | Default: $kendo-color-errorComputed: var(--kendo-color-error, #f31700) |
| Description: The background color of the Gantt delayed task. | |||
kendo-gantt-delayed-bg-lighter | if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) | var(--kendo-color-error-emphasis, #f76f60) | Default: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5))Computed: var(--kendo-color-error-emphasis, #f76f60) |
| Description: The complement background color of the Gantt delayed task. | |||
kendo-gantt-advanced-bg | $kendo-color-success | var(--kendo-color-success, #37b400) | Default: $kendo-color-successComputed: var(--kendo-color-success, #37b400) |
| Description: The background color of the Gantt advanced task. | |||
kendo-gantt-advanced-bg-lighter | if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) | var(--kendo-color-success-emphasis, #81d15f) | Default: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5))Computed: var(--kendo-color-success-emphasis, #81d15f) |
| Description: The complement background color of the Gantt advanced task. | |||
kendo-gantt-action-on-offset-text | #000000 | #000000 | Default: #000000Computed: #000000 |
| Description: The text color of the Gantt delayed task action. | |||
kendo-gantt-offset-resize-handler-top | 50% | 50% | Default: 50%Computed: 50% |
| Description: The top position of the Gantt delayed task resize handler. | |||
kendo-gantt-validation-tooltip-width | 200px | 200px | Default: 200pxComputed: 200px |
| Description: The default width of the Gantt validation Tooltip. | |||
kendo-gantt-validation-tooltip-label-width | 50px | 50px | Default: 50pxComputed: 50px |
| Description: The default width of the Gantt validation Tooltip label. | |||
kendo-gantt-validation-tooltip-border | #656565 | #656565 | Default: #656565Computed: #656565 |
| Description: The border color of the Gantt validation Tooltip. | |||
kendo-gantt-validation-tooltip-valid-border | $kendo-color-success | var(--kendo-color-success, #37b400) | Default: $kendo-color-successComputed: var(--kendo-color-success, #37b400) |
| Description: The border color of the valid Gantt validation Tooltip. | |||
kendo-gantt-validation-tooltip-invalid-border | $kendo-color-error | var(--kendo-color-error, #f31700) | Default: $kendo-color-errorComputed: var(--kendo-color-error, #f31700) |
| Description: The border color of the invalid Gantt validation Tooltip. | |||
kendo-gantt-task-tooltip-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Gantt task Tooltip. | |||
kendo-gantt-task-tooltip-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the Gantt task Tooltip. | |||
