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

Customizing Timeline

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-timeline-spacing-xmap.get( $kendo-spacing, 10 )
Description
The horizontal spacing of the timeline.
$kendo-timeline-spacing-ymap.get( $kendo-spacing, 10 )
Description
The vertical spacing of the timeline.
$kendo-timeline-items-paddingmap.get( $kendo-spacing, 4 )
Description
The padding between the items in the timeline.
$kendo-timeline-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the timeline.
$kendo-timeline-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the timeline.
$kendo-timeline-line-heightvar( --kendo-line-height, normal )
Description
The line height of the timeline.
$kendo-timeline-mobile-spacing-xmap.get( $kendo-spacing, 4 )
Description
The horizontal mobile spacing of the timeline.
$kendo-timeline-mobile-spacing-ymap.get( $kendo-spacing, 4 )
Description
The vertical mobile spacing of the timeline.
$kendo-timeline-track-arrow-widthmap.get( $kendo-spacing, 7.5 )
Description
The track arrow width of the timeline.
$kendo-timeline-track-arrow-heightmap.get( $kendo-spacing, 7.5 )
Description
The track arrow height of the timeline.
$kendo-timeline-track-sizemap.get( $kendo-spacing, 1.5 )
Description
The size of the track in the timeline.
$kendo-timeline-track-wrap-padding-bottommath.div( $kendo-timeline-track-size, 2 )
Description
The bottom padding of the wrapper of the track in the timeline.
$kendo-timeline-track-border-width1px
Description
The border width of the track in the timeline.
$kendo-timeline-track-margin-bottommap.get( $kendo-spacing, 4 )
Description
The bottom margin of the track in the timeline.
$kendo-timeline-track-bottom-calccalc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } )
Description
The bottom of the track in the timeline.
$kendo-timeline-track-start-calccalc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } )
Description
The left of the track in the timeline.
$kendo-timeline-track-end-calccalc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } )
Description
The right of the track in the timeline.
$kendo-timeline-track-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background of the track in the timeline.
$kendo-timeline-track-border-colorif($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
Description
The border color of the track in the timeline.
$kendo-timeline-arrow-inset-block-endcalc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } )
Description
The inset block end of the arrow in the timeline.
$kendo-timeline-track-arrow-disabled-bgvar( --kendo-disabled-bg, initial )
Description
The disabled background of the arrow in the timeline.
$kendo-timeline-track-arrow-disabled-textvar( --kendo-disabled-text, initial )
Description
The disabled text of the arrow in the timeline.
$kendo-timeline-track-arrow-disabled-bordervar( --kendo-disabled-border, initial)
Description
The disabled border color of the arrow in the timeline.
$kendo-timeline-track-event-offsetmap.get( $kendo-spacing, 8 )
Description
The offset of the track event in the timeline.
$kendo-timeline-flag-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the flag in the timeline.
$kendo-timeline-flag-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the flag in the timeline.
$kendo-timeline-flag-border-radiusmap.get( $kendo-spacing, 0.5 )
Description
The border radius of the flag in the timeline.
$kendo-timeline-flag-line-heightvar( --kendo-line-height, normal )
Description
The line height of the flag in the timeline.
$kendo-timeline-flag-box-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box shadow of the flag in the timeline.
$kendo-timeline-flag-min-widthmap.get( $kendo-spacing, 20 )
Description
The min widht of the flag in the timeline.
$kendo-timeline-flag-max-widthcalc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } )
Description
The max width of the flag in the timeline.
$kendo-timeline-mobile-flag-max-widthcalc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } )
Description
The max width of the mobile flag in the timeline.
$kendo-timeline-horizontal-flag-min-widthmap.get( $kendo-spacing, 15 )
Description
The min width of the horizontal flag in the timeline.
$kendo-timeline-flag-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background of the flag in the timeline.
$kendo-timeline-flag-textvar( --kendo-component-bg, initial )
Description
The text of the flag in the timeline.
$kendo-timeline-flag-callout-widthmap.get( $kendo-spacing, 2.5 )
Description
The width of the flag callout in the timeline.
$kendo-timeline-flag-callout-heightmap.get( $kendo-spacing, 2.5 )
Description
The height of the flag callout in the timeline.
$kendo-timeline-flag-offset-bottommap.get( $kendo-spacing, 1 )
Description
The offset bottom of the flag in the timeline.
$kendo-timeline-flag-margin-bottom-calccalc( #{ $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 flag in the timeline.
$kendo-timeline-card-header-bgvar( --kendo-component-bg, initial )
Description
The background of the card header in the timeline.
$kendo-timeline-card-header-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text of the card header in the timeline.
$kendo-timeline-card-body-scroll-borderif($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
Description
The border of the card body scroll in the timeline.
$kendo-timeline-card-body-scroll-bgvar( --kendo-component-bg, initial )
Description
The background of the card body scroll of the timeline.
$kendo-timeline-card-scroll-thumb-hovervar( --kendo-hover-border, initial )
Description
The hover of the card scroll thumb in the timeline.
$kendo-timeline-date-body-textvar( --kendo-body-text, initial )
Description
The text of the date body in the timeline.
$kendo-timeline-date-widthmap.get( $kendo-spacing, 12 ) + map.get( $kendo-spacing, 0.5 )
Description
The width of the date in the timeline.
$kendo-timeline-date-margin-bottommap.get( $kendo-spacing, 2 )
Description
The bottom margin of the date in the timeline.
$kendo-timeline-vertical-padding-calccalc( #{ $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-calccalc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } )
Description
The padding of the vertical dates timeline.
$kendo-timeline-vertical-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-lg} )
Description
The border radius of the vertical timeline.
$kendo-timeline-mobile-vertical-padding-calccalc( #{ $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-calccalc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } )
Description
The padding of the vertical mobile dates in the timeline.
$kendo-timeline-circle-widthmap.get( $kendo-spacing, 4 )
Description
The width of the circle in the timeline
$kendo-timeline-circle-heightmap.get( $kendo-spacing, 4 )
Description
The height of the circle in the timeline.
$kendo-timeline-circle-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background of the circle in the timeline.
$kendo-timeline-event-width400px
Description
The width of the events in the timeline.
$kendo-timeline-event-height600px
Description
The height of the events in the timeline.
$kendo-timeline-event-min-height-calccalc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) )
Description
The min height of the events in the timeline.
$kendo-timeline-icon-spacingvar( --kendo-icon-spacing, .5rem )
Description
The spacing of the icons in the timeline.

In this article

Not finding the help you need?