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 | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) | Default: k-spacing(7.5) Computed: var(--kendo-spacing-7\.5, 1.875rem) |
Description: The width of the Timeline track arrow. | |||
kendo-timeline-track-arrow-height | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) | Default: k-spacing(7.5) Computed: var(--kendo-spacing-7\.5, 1.875rem) |
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 | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) | Default: k-spacing(1.5) Computed: var(--kendo-spacing-1\.5, 0.375rem) |
Description: The size of the Timeline track. | |||
kendo-timeline-track-wrap-padding-bottom | calc( #{$kendo-timeline-track-size} / 2) | calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) | Default: calc( #{$kendo-timeline-track-size} / 2) Computed: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) |
Description: The bottom padding of the Timeline's track wrapper. | |||
kendo-timeline-track-border-width | 1px | 1px | Default: 1px Computed: 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( 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)) | Default: calc( calc( #{$kendo-timeline-track-arrow-height} / 2) + #{$kendo-timeline-track-wrap-padding-bottom}) Computed: 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 | calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) | calc(var(--kendo-spacing-7\.5, 1.875rem) - 2 * 1px) | Default: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) Computed: calc(var(--kendo-spacing-7\.5, 1.875rem) - 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(var(--kendo-spacing-7\.5, 1.875rem) - 2 * 1px) | Default: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) Computed: calc(var(--kendo-spacing-7\.5, 1.875rem) - 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-bg Computed: 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-border Computed: 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: 36px Computed: 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-x Computed: 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-y Computed: 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-height Computed: var(--kendo-line-height, normal) |
Description: The line height of the Timeline flag. | |||
kendo-timeline-flag-min-width | 80px | 80px | Default: 80px Computed: 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: 60px Computed: 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-primary Computed: 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: 10px Computed: 10px |
Description: The width of the Timeline's flag callout. | |||
kendo-timeline-flag-callout-height | 10px | 10px | Default: 10px Computed: 10px |
Description: The height of the Timeline's flag callout. | |||
kendo-timeline-flag-offset-bottom | 4px | 4px | Default: 4px Computed: 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(var(--kendo-spacing-1\.5, 0.375rem) + 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(var(--kendo-spacing-1\.5, 0.375rem) + 2 * 1px + 4px + 10px) |
Description: The bottom margin of the Timeline flag. | |||
kendo-timeline-date-width | 50px | 50px | Default: 50px Computed: 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 - var(--kendo-spacing-1\.5, 0.375rem)) / 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 - var(--kendo-spacing-1\.5, 0.375rem)) / 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 - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + 50px) | Default: calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width}) Computed: calc(calc(var(--kendo-spacing-10, 2.5rem) + (80px - var(--kendo-spacing-1\.5, 0.375rem)) / 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 - var(--kendo-spacing-1\.5, 0.375rem)) / 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 - var(--kendo-spacing-1\.5, 0.375rem)) / 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 - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + 50px) | Default: calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width}) Computed: calc(calc(var(--kendo-spacing-4, 1rem) + (80px - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + 50px) |
Description: The padding of the vertical mobile Timeline date. | |||
kendo-timeline-circle-width | 16px | 16px | Default: 16px Computed: 16px |
Description: The width of the Timeline circle. | |||
kendo-timeline-circle-height | 16px | 16px | Default: 16px Computed: 16px |
Description: The height of the Timeline circle. | |||
kendo-timeline-circle-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primary Computed: var(--kendo-color-primary, #ff6358) |
Description: The background color of the Timeline circle. | |||
kendo-timeline-collapse-arrow-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The horizontal padding of the Timeline collapse arrow. | |||
kendo-timeline-event-width | 400px | 400px | Default: 400px Computed: 400px |
Description: The width of the Timeline event. | |||
kendo-timeline-event-height | 600px | 600px | Default: 600px Computed: 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. |