New to Kendo UI for Vue? Start a free 30-day trial

Customizing Timeline

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-timeline-spacing-xNumber40px40px
Description
The horizontal spacing of the Timeline.
$kendo-timeline-spacing-yNumber40px40px
Description
The vertical spacing of the Timeline.
$kendo-timeline-items-paddingNumber$kendo-padding-md-x16px
Description
The padding between the Timeline's track items.
$kendo-timeline-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Timeline.
$kendo-timeline-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Timeline.
$kendo-timeline-line-heightNumber$kendo-line-height-md2
Description
The line height of the Timeline.
$kendo-timeline-mobile-spacing-xNumber$kendo-padding-md-x16px
Description
The horizontal spacing of the mobile Timeline.
$kendo-timeline-mobile-spacing-yNumber$kendo-padding-md-x16px
Description
The vertical spacing of the mobile Timeline.
$kendo-timeline-track-arrow-widthNumber36px36px
Description
The width of the Timeline track arrow.
$kendo-timeline-track-arrow-heightNumber36px36px
Description
The height of the Timeline track arrow.
$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-true-mix(#000000, $kendo-body-bg, 8%))#ebebeb
Description
The background color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))#595959
Description
The text color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-borderColorif($kendo-enable-color-system, transparent, k-true-mix($kendo-button-border, $kendo-body-bg, 65%))white
Description
The border color of the disabled Timeline track arrow.
$kendo-timeline-track-sizeNumber6px6px
Description
The size of the Timeline track.
$kendo-timeline-track-wrap-padding-bottomNumberk-math-div( $kendo-timeline-track-size, 2 )3px
Description
The bottom padding of the Timeline's track wrapper.
$kendo-timeline-track-border-widthNumber1px1px
Description
The border width of the Timeline track.
$kendo-timeline-track-margin-bottomNumber18px18px
Description
The bottom margin of the Timeline track.
$kendo-timeline-track-bottom-calcCalculationcalc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})calc(18px + 3px)
Description
The bottom offset of the Timeline track.
$kendo-timeline-track-start-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(36px - 2 * 1px)
Description
The left offset of the Timeline track.
$kendo-timeline-track-end-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(36px - 2 * 1px)
Description
The right offset of the Timeline track.
$kendo-timeline-track-bgColor#e0e0e0#e0e0e0
Description
The background color of the Timeline track.
$kendo-timeline-track-border-colorColor$kendo-timeline-track-bg#e0e0e0
Description
The border color of the Timeline track.
$kendo-timeline-track-item-focus-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the Timeline's focused track items.
$kendo-timeline-track-event-offsetNumber36px36px
Description
The offset of the Timeline track event.
$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x16px
Description
The horizontal padding of the Timeline flag.
$kendo-timeline-flag-padding-yNumber$kendo-button-padding-y8px
Description
The vertical padding of the Timeline flag.
$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.4285714286
Description
The line height of the Timeline flag.
$kendo-timeline-flag-min-widthNumber80px80px
Description
The minimum width of the Timeline flag.
$kendo-timeline-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})calc(80px + 2 * 40px)
Description
The maximum width of the Timeline flag.
$kendo-timeline-mobile-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})calc(80px + 2 * 16px)
Description
The maximum width of the mobile Timeline flag.
$kendo-timeline-horizontal-flag-min-widthNumber60px60px
Description
The minimum width of the horizontal Timeline flag.
$kendo-timeline-flag-bgColor$kendo-color-primary#3f51b5
Description
The background color of the Timeline flag.
$kendo-timeline-flag-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg ))white
Description
The text color of the Timeline flag.
$kendo-timeline-flag-callout-widthNumber10px10px
Description
The width of the Timeline's flag callout.
$kendo-timeline-flag-callout-heightNumber10px10px
Description
The height of the Timeline's flag callout.
$kendo-timeline-flag-offset-bottomNumber4px4px
Description
The bottom offset of the Timeline flag.
$kendo-timeline-flag-margin-bottom-calcCalculationcalc(#{$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)
Description
The bottom margin of the Timeline flag.
$kendo-timeline-date-widthNumber50px50px
Description
The width of the Timeline date.
$kendo-timeline-date-margin-bottomNumber8px8px
Description
The bottom margin of the Timeline date.
$kendo-timeline-vertical-padding-calcCalculationcalc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)calc(40px + (80px - 6px) / 2)
Description
The padding of the vertical Timeline.
$kendo-timeline-vertical-padding-with-dates-calcCalculationcalc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width})calc(calc(40px + (80px - 6px) / 2) + 50px)
Description
The padding of the vertical Timeline date.
$kendo-timeline-mobile-vertical-padding-calcCalculationcalc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)calc(16px + (80px - 6px) / 2)
Description
The padding of the vertical mobile Timeline.
$kendo-timeline-mobile-vertical-padding-with-dates-calcCalculationcalc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width})calc(calc(16px + (80px - 6px) / 2) + 50px)
Description
The padding of the vertical mobile Timeline date.
$kendo-timeline-circle-widthNumber16px16px
Description
The width of the Timeline circle.
$kendo-timeline-circle-heightNumber16px16px
Description
The height of the Timeline circle.
$kendo-timeline-circle-bgColor$kendo-color-primary#3f51b5
Description
The background color of the Timeline circle.
$kendo-timeline-collapse-arrow-padding-xNumber$kendo-padding-sm-x8px
Description
The horizontal padding of the Timeline collapse arrow.
$kendo-timeline-event-widthNumber400px400px
Description
The width of the Timeline event.
$kendo-timeline-event-heightNumber600px600px
Description
The height of the Timeline event.
$kendo-timeline-event-min-height-calcCalculationcalc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))calc(2 * (36px - 0px))
Description
The minimum height of the Timeline event.

In this article

Not finding the help you need?