Sass Variables
The Telerik and Kendo UI Timeline is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Card Sass variables, as well as the Sass variables provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-timeline-spacing-x | k-spacing(10) | var(--kendo-spacing-10, 2.5rem) | Default: k-spacing(10)Computed: var(--kendo-spacing-10, 2.5rem) |
| Description: The horizontal spacing of the Timeline. | |||
kendo-timeline-spacing-y | k-spacing(10) | var(--kendo-spacing-10, 2.5rem) | Default: k-spacing(10)Computed: var(--kendo-spacing-10, 2.5rem) |
| Description: The vertical spacing of the Timeline. | |||
kendo-timeline-items-padding | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The padding between the Timeline's track items. | |||
kendo-timeline-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 Timeline. | |||
kendo-timeline-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 Timeline. | |||
kendo-timeline-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 Timeline. | |||
kendo-timeline-mobile-spacing-x | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal spacing of the mobile Timeline. | |||
kendo-timeline-mobile-spacing-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical spacing of the mobile Timeline. | |||
kendo-timeline-track-arrow-width | 30px | 30px | Default: 30pxComputed: 30px |
| Description: The width of the Timeline track arrow. | |||
kendo-timeline-track-arrow-height | 30px | 30px | Default: 30pxComputed: 30px |
| Description: The height of the Timeline track arrow. | |||
kendo-timeline-track-arrow-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) | color-mix(in srgb, var(--kendo-color-base-subtle, #ebebeb) 60%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%))Computed: color-mix(in srgb, var(--kendo-color-base-subtle, #ebebeb) 60%, transparent) |
| Description: The background color of the disabled Timeline track arrow. | |||
kendo-timeline-track-arrow-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 60%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 60%, transparent) |
| Description: The text color of the disabled Timeline track arrow. | |||
kendo-timeline-track-arrow-disabled-border | if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%))Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the disabled Timeline track arrow. | |||
kendo-timeline-track-size | 6px | 6px | Default: 6pxComputed: 6px |
| Description: The size of the Timeline track. | |||
kendo-timeline-track-wrap-padding-bottom | k-math-div( $kendo-timeline-track-size, 2 ) | 3px | Default: k-math-div( $kendo-timeline-track-size, 2 )Computed: 3px |
| Description: The bottom padding of the Timeline's track wrapper. | |||
kendo-timeline-track-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Timeline track. | |||
kendo-timeline-track-margin-bottom | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The bottom margin of the Timeline track. | |||
kendo-timeline-track-bottom-calc | calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom}) | calc(15px + 3px) | Default: calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})Computed: calc(15px + 3px) |
| Description: The bottom offset of the Timeline track. | |||
kendo-timeline-track-start-calc | calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) | calc(30px - 2 * 1px) | Default: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})Computed: calc(30px - 2 * 1px) |
| Description: The left offset of the Timeline track. | |||
kendo-timeline-track-end-calc | calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) | calc(30px - 2 * 1px) | Default: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})Computed: calc(30px - 2 * 1px) |
| Description: The right offset of the Timeline track. | |||
kendo-timeline-track-bg | $kendo-button-bg | var(--kendo-color-base, #f5f5f5) | Default: $kendo-button-bgComputed: var(--kendo-color-base, #f5f5f5) |
| Description: The background color of the Timeline track. | |||
kendo-timeline-track-border-color | $kendo-button-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Timeline track. | |||
kendo-timeline-track-item-focus-shadow | k-elevation(2) | var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(2)Computed: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the Timeline's focused track items. | |||
kendo-timeline-track-event-offset | 36px | 36px | Default: 36pxComputed: 36px |
| Description: The offset of the Timeline track event. | |||
kendo-timeline-flag-padding-x | $kendo-button-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-button-padding-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Timeline flag. | |||
kendo-timeline-flag-padding-y | $kendo-button-padding-y | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-button-padding-yComputed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the Timeline flag. | |||
kendo-timeline-flag-line-height | $kendo-button-line-height | var(--kendo-line-height, normal) | Default: $kendo-button-line-heightComputed: var(--kendo-line-height, normal) |
| Description: The line height of the Timeline flag. | |||
kendo-timeline-flag-min-width | 80px | 80px | Default: 80pxComputed: 80px |
| Description: The minimum width of the Timeline flag. | |||
kendo-timeline-flag-max-width | calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x}) | calc(80px + 2 * var(--kendo-spacing-10, 2.5rem)) | Default: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})Computed: calc(80px + 2 * var(--kendo-spacing-10, 2.5rem)) |
| Description: The maximum width of the Timeline flag. | |||
kendo-timeline-mobile-flag-max-width | calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) | calc(80px + 2 * var(--kendo-spacing-4, 1rem)) | Default: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})Computed: calc(80px + 2 * var(--kendo-spacing-4, 1rem)) |
| Description: The maximum width of the mobile Timeline flag. | |||
kendo-timeline-horizontal-flag-min-width | 60px | 60px | Default: 60pxComputed: 60px |
| Description: The minimum width of the horizontal Timeline flag. | |||
kendo-timeline-flag-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Timeline flag. | |||
kendo-timeline-flag-text | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) | var(--kendo-color-on-primary, #ffffff) | Default: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg ))Computed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the Timeline flag. | |||
kendo-timeline-flag-callout-width | 10px | 10px | Default: 10pxComputed: 10px |
| Description: The width of the Timeline's flag callout. | |||
kendo-timeline-flag-callout-height | 10px | 10px | Default: 10pxComputed: 10px |
| Description: The height of the Timeline's flag callout. | |||
kendo-timeline-flag-offset-bottom | 4px | 4px | Default: 4pxComputed: 4px |
| Description: The bottom offset of the Timeline flag. | |||
kendo-timeline-flag-margin-bottom-calc | calc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height}) | calc(6px + 2 * 1px + 4px + 10px) | Default: calc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height})Computed: calc(6px + 2 * 1px + 4px + 10px) |
| Description: The bottom margin of the Timeline flag. | |||
kendo-timeline-date-width | 50px | 50px | Default: 50pxComputed: 50px |
| Description: The width of the Timeline date. | |||
kendo-timeline-date-margin-bottom | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The bottom margin of the Timeline date. | |||
kendo-timeline-vertical-padding-calc | calc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) | calc(var(--kendo-spacing-10, 2.5rem) + (80px - 6px) / 2) | Default: calc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)Computed: calc(var(--kendo-spacing-10, 2.5rem) + (80px - 6px) / 2) |
| Description: The padding of the vertical Timeline. | |||
kendo-timeline-vertical-padding-with-dates-calc | calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width}) | calc(calc(var(--kendo-spacing-10, 2.5rem) + (80px - 6px) / 2) + 50px) | Default: calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width})Computed: calc(calc(var(--kendo-spacing-10, 2.5rem) + (80px - 6px) / 2) + 50px) |
| Description: The padding of the vertical Timeline date. | |||
kendo-timeline-mobile-vertical-padding-calc | calc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) | calc(var(--kendo-spacing-4, 1rem) + (80px - 6px) / 2) | Default: calc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)Computed: calc(var(--kendo-spacing-4, 1rem) + (80px - 6px) / 2) |
| Description: The padding of the vertical mobile Timeline. | |||
kendo-timeline-mobile-vertical-padding-with-dates-calc | calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width}) | calc(calc(var(--kendo-spacing-4, 1rem) + (80px - 6px) / 2) + 50px) | Default: calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width})Computed: calc(calc(var(--kendo-spacing-4, 1rem) + (80px - 6px) / 2) + 50px) |
| Description: The padding of the vertical mobile Timeline date. | |||
kendo-timeline-circle-width | 16px | 16px | Default: 16pxComputed: 16px |
| Description: The width of the Timeline circle. | |||
kendo-timeline-circle-height | 16px | 16px | Default: 16pxComputed: 16px |
| Description: The height of the Timeline circle. | |||
kendo-timeline-circle-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Timeline circle. | |||
kendo-timeline-collapse-arrow-padding-x | $kendo-padding-md-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-padding-md-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Timeline collapse arrow. | |||
kendo-timeline-event-width | 400px | 400px | Default: 400pxComputed: 400px |
| Description: The width of the Timeline event. | |||
kendo-timeline-event-height | 600px | 600px | Default: 600pxComputed: 600px |
| Description: The height of the Timeline event. | |||
kendo-timeline-event-min-height-calc | calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) | calc(2 * (36px - 1px)) | Default: calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))Computed: calc(2 * (36px - 1px)) |
| Description: The minimum height of the Timeline event. | |||
