New to Kendo UI for Angular? Start a free 30-day trial
Customizing Timeline
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-timeline-spacing-x | String | k-spacing(10) | var(--kendo-spacing-10, 2.5rem) |
Description
The horizontal spacing of the Timeline. | |||
| $kendo-timeline-spacing-y | String | k-spacing(10) | var(--kendo-spacing-10, 2.5rem) |
Description
The vertical spacing of the Timeline. | |||
| $kendo-timeline-items-padding | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The padding between the Timeline's track items. | |||
| $kendo-timeline-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Timeline. | |||
| $kendo-timeline-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Timeline. | |||
| $kendo-timeline-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Timeline. | |||
| $kendo-timeline-mobile-spacing-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal spacing of the mobile Timeline. | |||
| $kendo-timeline-mobile-spacing-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical spacing of the mobile Timeline. | |||
| $kendo-timeline-track-arrow-width | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The width of the Timeline track arrow. | |||
| $kendo-timeline-track-arrow-height | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The height of the Timeline track arrow. | |||
| $kendo-timeline-track-size | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The size of the Timeline track. | |||
| $kendo-timeline-track-wrap-padding-bottom | Calculation | calc( #{$kendo-timeline-track-size} / 2 ) | calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) |
Description
The bottom padding of the Timeline's track wrapper. | |||
| $kendo-timeline-track-border-width | Number | 1px | 1px |
Description
The border width of the Timeline track. | |||
| $kendo-timeline-track-margin-bottom | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The bottom margin of the Timeline track. | |||
| $kendo-timeline-track-bottom-calc | Calculation | calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) | calc(var(--kendo-spacing-7\.5, 1.875rem) / 2 + calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)) |
Description
The bottom offset of the Timeline track. | |||
| $kendo-timeline-track-start-calc | Calculation | calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) | calc(var(--kendo-spacing-7\.5, 1.875rem) - 2 * 1px) |
Description
The left offset of the Timeline track. | |||
| $kendo-timeline-track-end-calc | Calculation | calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) | calc(var(--kendo-spacing-7\.5, 1.875rem) - 2 * 1px) |
Description
The right offset of the Timeline track. | |||
| $kendo-timeline-track-bg | String | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the Timeline track. | |||
| $kendo-timeline-track-border-color | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent) |
Description
The border color of the Timeline track. | |||
| $kendo-timeline-arrow-inset-block-end | Calculation | calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } ) | calc(var(--kendo-spacing-1\.5, 0.375rem) + calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) + 1px) |
Description
The block end inset of the Timeline arrow. | |||
| $kendo-timeline-track-arrow-disabled-bg | String | var( --kendo-disabled-bg, initial ) | var(--kendo-disabled-bg, initial) |
Description
The background color of the disabled Timeline arrow. | |||
| $kendo-timeline-track-arrow-disabled-text | String | var( --kendo-disabled-text, initial ) | var(--kendo-disabled-text, initial) |
Description
The text color of the disabled Timeline arrow. | |||
| $kendo-timeline-track-arrow-disabled-border | String | var( --kendo-disabled-border, initial) | var(--kendo-disabled-border, initial) |
Description
The border color of the disabled Timeline arrow. | |||
| $kendo-timeline-track-event-offset | String | k-spacing(8) | var(--kendo-spacing-8, 2rem) |
Description
The offset of the Timeline track event. | |||
| $kendo-timeline-flag-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Timeline flag. | |||
| $kendo-timeline-flag-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Timeline flag. | |||
| $kendo-timeline-flag-border-radius | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The border radius of the Timeline flag. | |||
| $kendo-timeline-flag-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Timeline flag. | |||
| $kendo-timeline-flag-box-shadow | String | var( --kendo-box-shadow-depth-2, none ) | var(--kendo-box-shadow-depth-2, none) |
Description
The box shadow of the Timeline flag. | |||
| $kendo-timeline-flag-min-width | String | k-spacing(20) | var(--kendo-spacing-20, 5rem) |
Description
The minimum width of the Timeline flag. | |||
| $kendo-timeline-flag-max-width | Calculation | calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) | calc(var(--kendo-spacing-20, 5rem) + 2 * var(--kendo-spacing-10, 2.5rem)) |
Description
The maximum width of the Timeline flag. | |||
| $kendo-timeline-mobile-flag-max-width | Calculation | calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } ) | calc(var(--kendo-spacing-20, 5rem) + 2 * var(--kendo-spacing-4, 1rem)) |
Description
The maximum width of the mobile Timeline flag. | |||
| $kendo-timeline-horizontal-flag-min-width | String | k-spacing(15) | var(--kendo-spacing-15, 3.75rem) |
Description
The minimum width of the horizontal Timeline flag. | |||
| $kendo-timeline-flag-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The background color of the Timeline flag. | |||
| $kendo-timeline-flag-text | String | var( --kendo-component-bg, initial ) | var(--kendo-component-bg, initial) |
Description
The text color of the Timeline flag. | |||
| $kendo-timeline-flag-callout-width | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The width of the Timeline's flag callout. | |||
| $kendo-timeline-flag-callout-height | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The height of the Timeline's flag callout. | |||
| $kendo-timeline-flag-offset-bottom | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The bottom offset of the Timeline flag. | |||
| $kendo-timeline-flag-margin-bottom-calc | Calculation | calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } ) | calc(var(--kendo-spacing-1\.5, 0.375rem) + 2 * 1px + var(--kendo-spacing-1, 0.25rem) + var(--kendo-spacing-2\.5, 0.625rem)) |
Description
The bottom margin of the Timeline flag. | |||
| $kendo-timeline-card-header-bg | String | var( --kendo-component-bg, initial ) | var(--kendo-component-bg, initial) |
Description
The background color of the Timeline's Card header. | |||
| $kendo-timeline-card-header-text | String | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the Timeline's Card header. | |||
| $kendo-timeline-card-body-scroll-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent) |
Description
The border of the Timeline's Card body scroll. | |||
| $kendo-timeline-card-body-scroll-bg | String | var( --kendo-component-bg, initial ) | var(--kendo-component-bg, initial) |
Description
The background color of the Timeline's Card body scroll. | |||
| $kendo-timeline-card-scroll-thumb-hover | String | var( --kendo-hover-border, initial ) | var(--kendo-hover-border, initial) |
Description
The color of the Timeline's hovered card scroll thumb. | |||
| $kendo-timeline-date-body-text | String | var( --kendo-body-text, initial ) | var(--kendo-body-text, initial) |
Description
The text color of the Timeline date body. | |||
| $kendo-timeline-date-width | Calculation | calc( #{k-spacing(12)} + #{k-spacing(0.5)} ) | calc(var(--kendo-spacing-12, 3rem) + var(--kendo-spacing-0\.5, 0.125rem)) |
Description
The width of the Timeline date. | |||
| $kendo-timeline-date-margin-bottom | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The bottom margin of the Timeline date. | |||
| $kendo-timeline-vertical-padding-calc | Calculation | calc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) | calc(var(--kendo-spacing-10, 2.5rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2) |
Description
The padding of the vertical Timeline. | |||
| $kendo-timeline-vertical-padding-with-dates-calc | Calculation | calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) | calc(calc(var(--kendo-spacing-10, 2.5rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + calc(var(--kendo-spacing-12, 3rem) + var(--kendo-spacing-0\.5, 0.125rem))) |
Description
The padding of the vertical Timeline date. | |||
| $kendo-timeline-vertical-border-radius | String | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.5rem) |
Description
The border radius of the vertical Timeline. | |||
| $kendo-timeline-mobile-vertical-padding-calc | Calculation | calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) | calc(var(--kendo-spacing-4, 1rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2) |
Description
The padding of the vertical mobile Timeline. | |||
| $kendo-timeline-mobile-vertical-padding-with-dates-calc | Calculation | calc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) | calc(calc(var(--kendo-spacing-4, 1rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + calc(var(--kendo-spacing-12, 3rem) + var(--kendo-spacing-0\.5, 0.125rem))) |
Description
The padding of the vertical mobile Timeline date. | |||
| $kendo-timeline-circle-width | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The width of the Timeline circle. | |||
| $kendo-timeline-circle-height | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The height of the Timeline circle. | |||
| $kendo-timeline-circle-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The background color of the Timeline circle. | |||
| $kendo-timeline-event-width | Number | 400px | 400px |
Description
The width of the Timeline event. | |||
| $kendo-timeline-event-height | Number | 600px | 600px |
Description
The height of the Timeline event. | |||
| $kendo-timeline-event-min-height-calc | Calculation | calc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) ) | calc(2 * (var(--kendo-spacing-8, 2rem) - 0px)) |
Description
The minimum height of the Timeline event. | |||
| $kendo-timeline-icon-spacing | String | var( --kendo-icon-spacing, .5rem ) | var(--kendo-icon-spacing, 0.5rem) |
Description
The spacing of the Timeline icons. | |||
