New to Kendo UI for Vue? 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 | map.get( $kendo-spacing, 10 ) | ||
Description
The horizontal spacing of the Timeline. | |||
| $kendo-timeline-spacing-y | map.get( $kendo-spacing, 10 ) | ||
Description
The vertical spacing of the Timeline. | |||
| $kendo-timeline-items-padding | map.get( $kendo-spacing, 4 ) | ||
Description
The padding between the Timeline's track items. | |||
| $kendo-timeline-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Timeline. | |||
| $kendo-timeline-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Timeline. | |||
| $kendo-timeline-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Timeline. | |||
| $kendo-timeline-mobile-spacing-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal spacing of the mobile Timeline. | |||
| $kendo-timeline-mobile-spacing-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical spacing of the mobile Timeline. | |||
| $kendo-timeline-track-arrow-width | map.get( $kendo-spacing, 7.5 ) | ||
Description
The width of the Timeline track arrow. | |||
| $kendo-timeline-track-arrow-height | map.get( $kendo-spacing, 7.5 ) | ||
Description
The height of the Timeline track arrow. | |||
| $kendo-timeline-track-size | map.get( $kendo-spacing, 1.5 ) | ||
Description
The size of the Timeline track. | |||
| $kendo-timeline-track-wrap-padding-bottom | math.div( $kendo-timeline-track-size, 2 ) | ||
Description
The bottom padding of the Timeline's track wrapper. | |||
| $kendo-timeline-track-border-width | 1px | ||
Description
The border width of the Timeline track. | |||
| $kendo-timeline-track-margin-bottom | map.get( $kendo-spacing, 4 ) | ||
Description
The bottom margin of the Timeline track. | |||
| $kendo-timeline-track-bottom-calc | calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) | ||
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 } ) | ||
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 } ) | ||
Description
The right offset of the Timeline track. | |||
| $kendo-timeline-track-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Timeline track. | |||
| $kendo-timeline-track-border-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the Timeline track. | |||
| $kendo-timeline-arrow-inset-block-end | calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } ) | ||
Description
The block end inset of the Timeline arrow. | |||
| $kendo-timeline-track-arrow-disabled-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The background color of the disabled Timeline arrow. | |||
| $kendo-timeline-track-arrow-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled Timeline arrow. | |||
| $kendo-timeline-track-arrow-disabled-border | var( --kendo-disabled-border, initial) | ||
Description
The border color of the disabled Timeline arrow. | |||
| $kendo-timeline-track-event-offset | map.get( $kendo-spacing, 8 ) | ||
Description
The offset of the Timeline track event. | |||
| $kendo-timeline-flag-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Timeline flag. | |||
| $kendo-timeline-flag-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Timeline flag. | |||
| $kendo-timeline-flag-border-radius | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border radius of the Timeline flag. | |||
| $kendo-timeline-flag-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Timeline flag. | |||
| $kendo-timeline-flag-box-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box shadow of the Timeline flag. | |||
| $kendo-timeline-flag-min-width | map.get( $kendo-spacing, 20 ) | ||
Description
The minimum width of the Timeline flag. | |||
| $kendo-timeline-flag-max-width | calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) | ||
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 } ) | ||
Description
The maximum width of the mobile Timeline flag. | |||
| $kendo-timeline-horizontal-flag-min-width | map.get( $kendo-spacing, 15 ) | ||
Description
The minimum width of the horizontal Timeline flag. | |||
| $kendo-timeline-flag-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Timeline flag. | |||
| $kendo-timeline-flag-text | var( --kendo-component-bg, initial ) | ||
Description
The text color of the Timeline flag. | |||
| $kendo-timeline-flag-callout-width | map.get( $kendo-spacing, 2.5 ) | ||
Description
The width of the Timeline's flag callout. | |||
| $kendo-timeline-flag-callout-height | map.get( $kendo-spacing, 2.5 ) | ||
Description
The height of the Timeline's flag callout. | |||
| $kendo-timeline-flag-offset-bottom | map.get( $kendo-spacing, 1 ) | ||
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 } ) | ||
Description
The bottom margin of the Timeline flag. | |||
| $kendo-timeline-card-header-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Timeline's Card header. | |||
| $kendo-timeline-card-header-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the Timeline's Card header. | |||
| $kendo-timeline-card-body-scroll-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border of the Timeline's Card body scroll. | |||
| $kendo-timeline-card-body-scroll-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Timeline's Card body scroll. | |||
| $kendo-timeline-card-scroll-thumb-hover | var( --kendo-hover-border, initial ) | ||
Description
The color of the Timeline's hovered card scroll thumb. | |||
| $kendo-timeline-date-body-text | var( --kendo-body-text, initial ) | ||
Description
The text color of the Timeline date body. | |||
| $kendo-timeline-date-width | map.get( $kendo-spacing, 12 ) + map.get( $kendo-spacing, 0.5 ) | ||
Description
The width of the Timeline date. | |||
| $kendo-timeline-date-margin-bottom | map.get( $kendo-spacing, 2 ) | ||
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 ) | ||
Description
The padding of the vertical Timeline. | |||
| $kendo-timeline-vertical-padding-with-dates-calc | calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) | ||
Description
The padding of the vertical Timeline date. | |||
| $kendo-timeline-vertical-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-lg} ) | ||
Description
The border radius of the vertical Timeline. | |||
| $kendo-timeline-mobile-vertical-padding-calc | calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 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 } ) | ||
Description
The padding of the vertical mobile Timeline date. | |||
| $kendo-timeline-circle-width | map.get( $kendo-spacing, 4 ) | ||
Description
The width of the Timeline circle. | |||
| $kendo-timeline-circle-height | map.get( $kendo-spacing, 4 ) | ||
Description
The height of the Timeline circle. | |||
| $kendo-timeline-circle-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Timeline circle. | |||
| $kendo-timeline-event-width | 400px | ||
Description
The width of the Timeline event. | |||
| $kendo-timeline-event-height | 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 } ) ) | ||
Description
The minimum height of the Timeline event. | |||
| $kendo-timeline-icon-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
The spacing of the Timeline icons. | |||
