From 29737117cc897182b5e8023e0c5fdbc166ae7b60 Mon Sep 17 00:00:00 2001 From: Zhuliyan Penkov Date: Tue, 30 Jan 2024 10:21:28 +0200 Subject: [PATCH] chore: regen docs --- .../bootstrap/docs/customization-slider.md | 388 ++ .../bootstrap/docs/customization-timeline.md | 538 +++ packages/bootstrap/docs/customization.md | 3648 ++++++++++------- packages/classic/docs/customization-slider.md | 388 ++ .../classic/docs/customization-timeline.md | 538 +++ packages/classic/docs/customization.md | 2766 ++++++++----- packages/default/docs/customization-slider.md | 388 ++ .../default/docs/customization-timeline.md | 538 +++ packages/default/docs/customization.md | 3646 +++++++++------- packages/fluent/docs/customization-slider.md | 90 +- .../fluent/docs/customization-timeline.md | 118 +- packages/fluent/docs/customization.md | 208 +- .../material/docs/customization-slider.md | 388 ++ .../material/docs/customization-timeline.md | 538 +++ packages/material/docs/customization.md | 2766 ++++++++----- 15 files changed, 12105 insertions(+), 4841 deletions(-) create mode 100644 packages/bootstrap/docs/customization-slider.md create mode 100644 packages/bootstrap/docs/customization-timeline.md create mode 100644 packages/classic/docs/customization-slider.md create mode 100644 packages/classic/docs/customization-timeline.md create mode 100644 packages/default/docs/customization-slider.md create mode 100644 packages/default/docs/customization-timeline.md create mode 100644 packages/material/docs/customization-slider.md create mode 100644 packages/material/docs/customization-timeline.md diff --git a/packages/bootstrap/docs/customization-slider.md b/packages/bootstrap/docs/customization-slider.md new file mode 100644 index 00000000000..b90fb113e38 --- /dev/null +++ b/packages/bootstrap/docs/customization-slider.md @@ -0,0 +1,388 @@ +--- +title: Customizing Slider +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_slider +position: 9 +--- + +# Customizing Slider + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-slider-sizeNumber200px200px
Description
The default size of the Slider.
+
$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
+
$kendo-slider-alt-sizeNumber30px30px
Description
The default size of the Slider's track wrap.
+
$kendo-slider-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Slider.
+
$kendo-slider-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Slider.
+
$kendo-slider-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Slider.
+
$kendo-slider-button-offsetNumber10px10px
Description
The offset of the Slider Buttons.
+
$kendo-slider-button-sizeNumber($kendo-slider-alt-size - 2)28px
Description
The size of the Slider Buttons.
+
$kendo-slider-button-spacingNumber($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The spacing of the Slider Buttons.
+
$kendo-slider-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thicknessNumber4px4px
Description
The thickness of the Slider track.
+
$kendo-slider-draghandle-sizeNumber14px14px
Description
The size of the Slider drag handle.
+
$kendo-slider-draghandle-border-widthNumber1px1px
Description
The border width of the Slider drag handle.
+
$kendo-slider-draghandle-active-scaleNumber11
Description
The transition scale of the active Slider drag handle.
+
$kendo-slider-draghandle-active-sizeNullnullnull
Description
The size of the active Slider drag handle.
+
$kendo-slider-draghandle-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Slider drag handle.
+
$kendo-slider-draghandle-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the Slider drag handle.
+
$kendo-slider-draghandle-borderColor$kendo-color-primary#0d6efd
Description
The border color of the Slider drag handle.
+
$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% ))#025ce2
Description
The background color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-borderColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% ))#0257d5
Description
The border color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The gradient of the hovered Slider drag handle.
+
$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% ))#0257d5
Description
The background color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% ))#0252c9
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 ))0 0 0 3px rgba(13, 110, 253, 0.5)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the Slider.
+
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function of the Slider.
+
$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The transition speed of the Slider drag handle.
+
$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The transition function of the Slider drag handle.
+
$kendo-slider-track-bgColor$gray-200#e9ecef
Description
The background color of the Slider track.
+
$kendo-slider-selection-bgColor$kendo-selected-bg#0d6efd
Description
The background color of the Slider's track selection.
+
$kendo-slider-disabled-opacityNullnullnull
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-timeline.md b/packages/bootstrap/docs/customization-timeline.md new file mode 100644 index 00000000000..04b582b102f --- /dev/null +++ b/packages/bootstrap/docs/customization-timeline.md @@ -0,0 +1,538 @@ +--- +title: Customizing Timeline +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_timeline +position: 9 +--- + +# 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-x1rem
Description
The padding between the Timeline's track items.
+
$kendo-timeline-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Timeline.
+
$kendo-timeline-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Timeline.
+
$kendo-timeline-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Timeline.
+
$kendo-timeline-mobile-spacing-xNumber$kendo-padding-md-x1rem
Description
The horizontal spacing of the mobile Timeline.
+
$kendo-timeline-mobile-spacing-yNumber$kendo-padding-md-x1rem
Description
The vertical spacing of the mobile Timeline.
+
$kendo-timeline-track-arrow-widthNumber38px38px
Description
The width of the Timeline track arrow.
+
$kendo-timeline-track-arrow-heightNumber38px38px
Description
The height of the Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .65 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))#edeff2
Description
The background color of the disabled Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))#6f7174
Description
The text color of the disabled Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-borderColorif($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( $kendo-button-border, $kendo-body-bg, 65% ))#edeff2
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-bottomNumberk-map-get( $kendo-spacing, 4 )1rem
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(19px + 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(38px - 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(38px - 2 * 1px)
Description
The right offset of the Timeline track.
+
$kendo-timeline-track-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the Timeline track.
+
$kendo-timeline-track-border-colorColor$kendo-timeline-track-bg#e4e7eb
Description
The border color of the Timeline track.
+
$kendo-timeline-track-item-focus-shadowStringk-elevation(2)var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075))
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-x0.75rem
Description
The horizontal padding of the Timeline flag.
+
$kendo-timeline-flag-padding-yNumber$kendo-button-padding-y0.375rem
Description
The vertical padding of the Timeline flag.
+
$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.5
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 * 1rem)
Description
The maximum width of the mobile Timeline flag.
+
$kendo-timeline-horizontal-flag-min-widthNumber80px80px
Description
The minimum width of the horizontal Timeline flag.
+
$kendo-timeline-flag-bgColor$kendo-color-primary#0d6efd
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-bottomNumber10px10px
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(1rem + (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(1rem + (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#0d6efd
Description
The background color of the Timeline circle.
+
$kendo-timeline-collapse-arrow-padding-xNumber$kendo-padding-sm-x0.5rem
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 - 1px))
Description
The minimum height of the Timeline event.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index b3d14e55583..195001a0036 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -15375,7 +15375,7 @@ The following table lists the available variables for customizing the Bootstrap -### Split-button +### Slider @@ -15393,309 +15393,359 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - + + + + + + + + + + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - -
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)$kendo-slider-sizeNumber200px200px
Description
The focus shadow of the SplitButton.
+
Description
The default size of the Slider.
$kendo-split-button-arrow-padding-x$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
+
$kendo-slider-alt-size Number$kendo-button-padding-y0.375rem30px30px
Description
The horizontal padding of the arrow Button.
+
Description
The default size of the Slider's track wrap.
$kendo-split-button-sm-arrow-padding-x$kendo-slider-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Slider.
+
$kendo-slider-font-size Number$kendo-button-sm-padding-y0.25rem$kendo-font-size-md1rem
Description
The horizontal padding of the small arrow Button.
+
Description
The font size of the Slider.
$kendo-split-button-md-arrow-padding-x$kendo-slider-line-height Number$kendo-button-md-padding-y0.375rem$kendo-line-height-md1.5
Description
The horizontal padding of the medium arrow Button.
+
Description
The line height of the Slider.
$kendo-split-button-lg-arrow-padding-x$kendo-slider-button-offset Number$kendo-button-lg-padding-y0.5rem10px10px
Description
The horizontal padding of the large arrow Button.
+
Description
The offset of the Slider Buttons.
$kendo-split-button-arrow-padding-y$kendo-slider-button-size Number$kendo-button-padding-y0.375rem($kendo-slider-alt-size - 2)28px
Description
The vertical padding of the arrow Button.
+
Description
The size of the Slider Buttons.
$kendo-split-button-sm-arrow-padding-y$kendo-slider-button-spacing Number$kendo-button-sm-padding-y0.25rem($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The vertical padding of the small arrow Button.
+
Description
The spacing of the Slider Buttons.
$kendo-split-button-md-arrow-padding-y$kendo-slider-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thickness Number$kendo-button-md-padding-y0.375rem4px4px
Description
The vertical padding of the medium arrow Button.
+
Description
The thickness of the Slider track.
$kendo-split-button-lg-arrow-padding-y$kendo-slider-draghandle-size Number$kendo-button-lg-padding-y0.5rem14px14px
Description
The vertical padding of the large arrow Button.
+
Description
The size of the Slider drag handle.
- -### Splitter - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-splitter-border-width
$kendo-slider-draghandle-border-width Number 1px 1px
Description
The width of the border around the Splitter.
+
Description
The border width of the Slider drag handle.
$kendo-splitter-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-slider-draghandle-active-scaleNumber11
Description
The font family of the Splitter.
+
Description
The transition scale of the active Slider drag handle.
$kendo-splitter-font-sizeNumber$kendo-font-size-md1rem$kendo-slider-draghandle-active-sizeNullnullnull
Description
The font size of the Splitter.
+
Description
The size of the active Slider drag handle.
$kendo-splitter-line-heightNumber$kendo-line-height-md1.5$kendo-slider-draghandle-bgColor$kendo-color-primary#0d6efd
Description
The line height of the Splitter.
+
Description
The background color of the Slider drag handle.
$kendo-splitter-bg$kendo-slider-draghandle-text Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The background color of the Splitter.
+
Description
The text color of the Slider drag handle.
$kendo-splitter-text$kendo-slider-draghandle-border Color$kendo-component-text#212529$kendo-color-primary#0d6efd
Description
The text color of the Splitter.
+
Description
The border color of the Slider drag handle.
$kendo-splitter-border$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bg Color$kendo-component-border#dee2e6if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% ))#025ce2
Description
The border color of the Splitter.
+
Description
The background color of the hovered Slider drag handle.
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )0.75rem$kendo-slider-draghandle-hover-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The size of the Splitter splitbar.
+
Description
The text color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-lengthNumber20px20px$kendo-slider-draghandle-hover-borderColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% ))#0257d5
Description
The length of the Splitter drag handle.
+
Description
The border color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-thicknessNumber2px2px$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The thickness of the Splitter drag handle.
+
Description
The gradient of the hovered Slider drag handle.
$kendo-splitter-drag-icon-marginNumber7px7px$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% ))#0257d5
Description
The margin of the Splitter drag handle icon.
+
Description
The background color of the active Slider drag handle.
$kendo-splitter-collapse-icon-padding-x$kendo-slider-draghandle-pressed-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% ))#0252c9
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradient Null null null
Description
The horizontal padding of the collapse icon in the Splitter.
+
Description
The gradient of the active Slider drag handle.
$kendo-splitter-collapse-icon-padding-y$kendo-slider-draghandle-focus-shadowList0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 ))0 0 0 3px rgba(13, 110, 253, 0.5)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speed Numberk-map-get( $kendo-spacing, .5 )0.125rem.3s0.3s
Description
The vertical padding of the collapse icon in the Splitter.
+
Description
The transition speed of the Slider.
$kendo-splitbar-bgColor$kendo-base-bg#f8f9fa$kendo-slider-transition-functionStringease-outease-out
Description
The background color of the Splitter split bar.
+
Description
The transition function of the Slider.
$kendo-splitbar-textColor$kendo-base-text#212529$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The text color of the Splitter split bar.
+
Description
The transition speed of the Slider drag handle.
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#eeeff0$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The hover background color of the Splitter split bar.
+
Description
The transition function of the Slider drag handle.
$kendo-splitbar-hover-text$kendo-slider-track-bg Color$kendo-splitbar-text#212529$gray-200#e9ecef
Description
The hover text color of the Splitter split bar.
+
Description
The background color of the Slider track.
$kendo-splitbar-selected-bg$kendo-slider-selection-bg Color $kendo-selected-bg #0d6efd
Description
The selected background color of the Splitter split bar.
+
Description
The background color of the Slider's track selection.
$kendo-splitbar-selected-textColor$kendo-selected-textwhite$kendo-slider-disabled-opacityNullnullnull
Description
The selected text color of the Splitter split bar.
+
-### Stepper +### Split-button @@ -15713,2826 +15763,3666 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - + +
$kendo-stepper-margin-xNullnullnull$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The horizontal margin the Stepper.
+
Description
The focus shadow of the SplitButton.
$kendo-stepper-margin-yNullnullnull$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y0.375rem
Description
The vertical margin the Stepper.
+
Description
The horizontal padding of the arrow Button.
$kendo-stepper-padding-xNullnullnull$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y0.25rem
Description
The horizontal padding the Stepper.
+
Description
The horizontal padding of the small arrow Button.
$kendo-stepper-padding-yNullnullnull$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y0.375rem
Description
The vertical padding the Stepper.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-stepper-label-margin-x$kendo-split-button-lg-arrow-padding-x Number12px12px$kendo-button-lg-padding-y0.5rem
Description
The horizontal margin the Stepper label.
+
Description
The horizontal padding of the large arrow Button.
$kendo-stepper-label-padding-x$kendo-split-button-arrow-padding-y Number12px12px$kendo-button-padding-y0.375rem
Description
The horizontal padding the Stepper label.
+
Description
The vertical padding of the arrow Button.
$kendo-stepper-label-padding-y$kendo-split-button-sm-arrow-padding-y Number5px5px$kendo-button-sm-padding-y0.25rem
Description
The vertical padding the Stepper label.
+
Description
The vertical padding of the small arrow Button.
$kendo-stepper-border-width$kendo-split-button-md-arrow-padding-y Number0px0px$kendo-button-md-padding-y0.375rem
Description
The width of the border around the Stepper.
+
Description
The vertical padding of the medium arrow Button.
$kendo-stepper-inline-content-padding-x$kendo-split-button-lg-arrow-padding-y Number20px20px$kendo-button-lg-padding-y0.5rem
Description
The horizontal padding of the Stepper content.
+
Description
The vertical padding of the large arrow Button.
$kendo-stepper-inline-content-padding-y
+ +### Splitter + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + - - + + - - - - - - - - + +
NameTypeDefault valueComputed value
$kendo-splitter-border-width Number10px10px1px1px
Description
The vertical padding of the Stepper content.
+
Description
The width of the border around the Splitter.
$kendo-stepper-font-sizeNumber$kendo-font-size-md1rem$kendo-splitter-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+
Description
The font family of the Splitter.
$kendo-stepper-line-height$kendo-splitter-font-size Number$kendo-line-height-md1.5$kendo-font-size-md1rem
+
Description
The font size of the Splitter.
$kendo-stepper-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-splitter-line-heightNumber$kendo-line-height-md1.5
+
Description
The line height of the Splitter.
$kendo-stepper-bgNullnullnull$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper.
+
Description
The background color of the Splitter.
$kendo-stepper-text$kendo-splitter-text Color $kendo-component-text #212529
Description
The text color of the Stepper.
+
Description
The text color of the Splitter.
$kendo-stepper-borderNullnullnull$kendo-splitter-borderColor$kendo-component-border#dee2e6
Description
The border color of the Stepper.
+
Description
The border color of the Splitter.
$kendo-stepper-indicator-width$kendo-splitter-splitbar-size Number28px28pxk-map-get( $kendo-spacing, 3 )0.75rem
Description
The width of the Stepper indicator.
+
Description
The size of the Splitter splitbar.
$kendo-stepper-indicator-height$kendo-splitter-drag-handle-length Number$kendo-stepper-indicator-width28px20px20px
Description
The height of the Stepper indicator.
+
Description
The length of the Splitter drag handle.
$kendo-stepper-indicator-border-radius$kendo-splitter-drag-handle-thickness Number50%50%2px2px
Description
The border radius of the Stepper indicator.
+
Description
The thickness of the Splitter drag handle.
$kendo-stepper-indicator-border-width$kendo-splitter-drag-icon-margin Number1px1px7px7px
Description
The border width of the Stepper indicator.
+
Description
The margin of the Splitter drag handle icon.
$kendo-stepper-indicator-focus-border-widthNumber1px1px$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The border width of the focused Stepper indicator.
+
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-size$kendo-splitter-collapse-icon-padding-y Number2px2pxk-map-get( $kendo-spacing, .5 )0.125rem
Description
The size of the focused Stepper indicator.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-offsetNumber3px3px$kendo-splitbar-bgColor$kendo-base-bg#f8f9fa
Description
The offset of the Stepper's focused indicator.
+
Description
The background color of the Splitter split bar.
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)$kendo-splitbar-textColor$kendo-base-text#212529
Description
The calculated offset of the Stepper's focused indicator.
+
Description
The text color of the Splitter split bar.
$kendo-stepper-indicator-bg$kendo-splitbar-hover-bg Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#eeeff0
Description
The background color of the Stepper indicator.
+
Description
The hover background color of the Splitter split bar.
$kendo-stepper-indicator-text$kendo-splitbar-hover-text Color$kendo-component-text$kendo-splitbar-text #212529
Description
The text color of the Stepper indicator.
+
Description
The hover text color of the Splitter split bar.
$kendo-stepper-indicator-border$kendo-splitbar-selected-bg Color$kendo-component-border#dee2e6$kendo-selected-bg#0d6efd
Description
The border color of the Stepper indicator.
+
Description
The selected background color of the Splitter split bar.
$kendo-stepper-indicator-hover-bg$kendo-splitbar-selected-text Colorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb$kendo-selected-textwhite
Description
The background color of the hovered Stepper indicator.
+
Description
The selected text color of the Splitter split bar.
$kendo-stepper-indicator-hover-textNullnullnull
+ +### Stepper + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding of the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding of the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md1rem
+
$kendo-stepper-line-heightNumber$kendo-line-height-md1.5
+
$kendo-stepper-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-text#212529
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper's focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the Stepper's focused indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-text#212529
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor$kendo-component-border#dee2e6
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-border$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Stepper's done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper's done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The border color of the Stepper's done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#0c65e9
Description
The background color of the Stepper's hovered done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the Stepper's hovered done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the Stepper's hovered done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#6ea8fe
Description
The background color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The border color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#0d6efd
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#0c65e9
Description
The background color of the Stepper's hovered current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the Stepper's hovered current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the Stepper's hovered current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The background color of the Stepper's disabled current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the Stepper's disabled current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#6ea8fe
Description
The border color of the Stepper's disabled current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#198754
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#dc3545
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textNullnullnull
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#6c757d
Description
The text color of the optional Stepper label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the optional Stepper label.
+
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the optional Stepper label.
+
$kendo-stepper-optional-label-font-style Null null null
Description
The border color of the hovered Stepper indicator.
+
Description
The font style of the optional Stepper label.
$kendo-stepper-indicator-disabled-bg$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bg Null null null
Description
The background color of the disabled Stepper indicator.
+
Description
The background color of the Stepper ProgressBar.
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the disabled Stepper indicator.
+
Description
The text color of the Stepper ProgressBar.
$kendo-stepper-indicator-disabled-border$kendo-stepper-progressbar-fill-bg Null null null
Description
The border color of the disabled Stepper indicator.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#0d6efd$kendo-stepper-progressbar-fill-textNullnullnull
Description
The background color of the Stepper's done indicator.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white$kendo-stepper-content-transition-propertyStringheightheight
Description
The text color of the Stepper's done indicator.
+
Description
The property name of the Stepper transition.
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#0d6efd$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The border color of the Stepper's done indicator.
+
Description
The duration of the Stepper transition.
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#0c65e9$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The background color of the Stepper's hovered done indicator.
+
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + - - + - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
$kendo-stepper-indicator-done-hover-text$kendo-switch-track-border-widthNumber1px1px
Description
The border width of the Switch track.
+
$kendo-switch-thumb-border-width Null null null
Description
The text color of the Stepper's hovered done indicator.
+
Description
The border width of the Switch thumb.
$kendo-stepper-indicator-done-hover-border$kendo-switch-label-text-transform Null null null
Description
The border color of the Stepper's hovered done indicator.
+
Description
The text transform of the Switch label.
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#6ea8fe$kendo-switch-label-displayStringnonenone
Description
The background color of the Stepper's disabled done indicator.
+
Description
The display of the Switch label.
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white$kendo-switch-sizesMap( + sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), + md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), + lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) +)(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))
Description
The text color of the Stepper's disabled done indicator.
+
Description
The map with the different Switch sizes.
$kendo-stepper-indicator-done-disabled-border$kendo-switch-off-track-bg Color$kendo-stepper-indicator-done-disabled-bg#6ea8fe$kendo-component-bg#ffffff
Description
The border color of the Stepper's disabled done indicator.
+
Description
The background of the track when the Switch is not checked.
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#0d6efd$kendo-switch-off-track-textNullnullnull
Description
The background color of the Stepper current indicator.
+
Description
The text color of the track when the Switch is not checked.
$kendo-stepper-indicator-current-text$kendo-switch-off-track-border Color$kendo-stepper-indicator-done-textwhite$gray-500#adb5bd
Description
The text color of the Stepper current indicator.
+
Description
The border color of the track when the Switch is not checked.
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#0d6efd$kendo-switch-off-track-gradientNullnullnull
Description
The border color of the Stepper current indicator.
+
Description
The background gradient of the track when the Switch is not checked.
+
$kendo-switch-off-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-hover-bg$kendo-switch-off-track-focus-border Color$kendo-stepper-indicator-done-hover-bg#0c65e9if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))#86b7fe
Description
The background color of the Stepper's hovered current indicator.
+
Description
The border color of the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-hover-text$kendo-switch-off-track-focus-gradient Null$kendo-stepper-indicator-done-hover-textnull null
Description
The text color of the Stepper's hovered current indicator.
+
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull$kendo-switch-off-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)
Description
The border color of the Stepper's hovered current indicator.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-disabled-bg$kendo-switch-off-track-disabled-bg Color$kendo-stepper-indicator-done-disabled-bg#6ea8feif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))#e9ecef
Description
The background color of the Stepper's disabled current indicator.
+
Description
The background of the track when the disabled Switch is not checked.
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the Stepper's disabled current indicator.
+
Description
The text color of the track when the disabled Switch is not checked.
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#6ea8fe$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the Stepper's disabled current indicator.
+
Description
The border color of the track when the disabled Switch is not checked.
$kendo-stepper-label-text$kendo-switch-off-track-disabled-gradient Null null null
Description
The text color of the Stepper label.
+
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-stepper-label-success-text$kendo-switch-off-thumb-bg Color$kendo-color-success#198754$gray-500#adb5bd
Description
The success text color of the Stepper label.
+
Description
The background of the thumb when the Switch is not checked.
$kendo-stepper-label-error-textColor$kendo-color-error#dc3545$kendo-switch-off-thumb-textNullnullnull
Description
The error text color of the Stepper label.
+
Description
The text color of the thumb when the Switch is not checked.
$kendo-stepper-label-hover-text$kendo-switch-off-thumb-border Null null null
Description
The text color of the hovered Stepper label.
+
Description
The border color of the thumb when the Switch is not checked.
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd$kendo-switch-off-thumb-gradientNullnullnull
Description
The text color of the disabled Stepper label.
+
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-stepper-optional-label-textColor$kendo-subtle-text#6c757d$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The text color of the optional Stepper label.
+
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-stepper-optional-label-opacity$kendo-switch-off-thumb-hover-text Null null null
Description
The opacity of the optional Stepper label.
+
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm0.875rem$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The font size of the optional Stepper label.
+
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-stepper-optional-label-font-style$kendo-switch-off-thumb-hover-gradient Null null null
Description
The font style of the optional Stepper label.
+
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-stepper-progressbar-sizeNumber2px2px$kendo-switch-on-track-bgColor$kendo-color-primary#0d6efd
Description
The size of the Stepper ProgressBar.
+
Description
The background of the track when the Switch is checked.
$kendo-stepper-progressbar-bg$kendo-switch-on-track-text Null null null
Description
The background color of the Stepper ProgressBar.
+
Description
The text color of the track when the Switch is checked.
$kendo-stepper-progressbar-textNullnullnull$kendo-switch-on-track-borderColor$kendo-switch-on-track-bg#0d6efd
Description
The text color of the Stepper ProgressBar.
+
Description
The border color of the track when the Switch is checked.
$kendo-stepper-progressbar-fill-bg$kendo-switch-on-track-gradient Null null null
Description
The background color of the selected Stepper ProgressBar.
+
Description
The background gradient of the track when the Switch is checked.
$kendo-stepper-progressbar-fill-text$kendo-switch-on-track-hover-bg Null null null
Description
The text color of the selected Stepper ProgressBar.
+
Description
The background of the track when the hovered Switch is checked.
$kendo-stepper-content-transition-propertyStringheightheight$kendo-switch-on-track-hover-textNullnullnull
Description
The property name of the Stepper transition.
+
Description
The text color of the track when the hovered Switch is checked.
$kendo-stepper-content-transition-durationNumber300ms300ms$kendo-switch-on-track-hover-borderNullnullnull
Description
The duration of the Stepper transition.
+
Description
The border color of the track when the hovered Switch is checked.
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms$kendo-switch-on-track-hover-gradientNullnullnull
Description
The timing function of the Stepper transition.
+
Description
The background gradient of the track when the hovered Switch is checked.
- -### Switch - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - + + + + + + + + + - - - - + + + + - - + - - + - - + + - - + - - + - - + - - + - - + - - + - - + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-switch-font-family
$kendo-switch-on-track-focus-bg Null null null
Description
The font family of the Switch.
+
Description
The background of the track when the focused Switch is checked.
$kendo-switch-track-border-widthNumber1px1px$kendo-switch-on-track-focus-textNullnullnull
Description
The border width of the Switch track.
+
Description
The text color of the track when the focused Switch is checked.
$kendo-switch-thumb-border-width$kendo-switch-on-track-focus-border Null null null
Description
The border width of the Switch thumb.
+
Description
The border color of the track when the focused Switch is checked.
$kendo-switch-label-text-transform$kendo-switch-on-track-focus-gradient Null null null
Description
The text transform of the Switch label.
+
Description
The background gradient of the track when the focused Switch is checked.
$kendo-switch-label-displayStringnonenone$kendo-switch-on-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)
Description
The display of the Switch label.
+
Description
The ring around the track when the focused Switch is checked.
$kendo-switch-sizesMap( - sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), - md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), - lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) -)(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))$kendo-switch-on-track-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))#86b7fe
Description
The map with the different Switch sizes.
+
Description
The background of the track when the disabled Switch is checked.
+
$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff$kendo-switch-on-track-disabled-borderNullnullnull
Description
The background of the track when the Switch is not checked.
+
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-off-track-text$kendo-switch-on-track-disabled-gradient Null null null
Description
The text color of the track when the Switch is not checked.
+
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-switch-off-track-border$kendo-switch-on-thumb-bg Color$gray-500#adb5bdif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))white
Description
The border color of the track when the Switch is not checked.
+
Description
The background of the thumb when the Switch is checked.
$kendo-switch-off-track-gradient$kendo-switch-on-thumb-text Null null null
Description
The background gradient of the track when the Switch is not checked.
+
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-off-track-hover-bg$kendo-switch-on-thumb-border Null null null
Description
The background of the track when the hovered Switch is not checked.
+
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-off-track-hover-text$kendo-switch-on-thumb-gradient Null null null
Description
The text color of the track when the hovered Switch is not checked.
+
Description
The background gradient of the thumb when the Switch is checked.
$kendo-switch-off-track-hover-border$kendo-switch-on-thumb-hover-bg Null null null
Description
The border color of the track when the hovered Switch is not checked.
+
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-hover-gradient$kendo-switch-on-thumb-hover-text Null null null
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-focus-bg$kendo-switch-on-thumb-hover-border Null null null
Description
The background of the track when the focused Switch is not checked.
+
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-focus-text$kendo-switch-on-thumb-hover-gradient Null null null
Description
The text color of the track when the focused Switch is not checked.
+
Description
The background gradient of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-focus-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))#86b7fe
+ +### Table + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - + - - + + - - - - - + + + + + + + + + + + + + + + + - + + + + + + - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - - + +
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The border color of the track when the focused Switch is not checked.
+
Description
The width of the table border.
$kendo-switch-off-track-focus-gradientNullnullnull$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
The width of vertical border of table cells.
$kendo-switch-off-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)$kendo-table-cell-horizontal-border-widthNumber0px0px
Description
The ring around the track when the focused Switch is not checked.
+
Description
The width of horizontal border of table cells.
$kendo-switch-off-track-disabled-bgColorif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))#e9ecef$kendo-table-font-sizeNullnullnull
Description
The background of the track when the disabled Switch is not checked.
+
Description
The font size of the table if no size is specified.
$kendo-switch-off-track-disabled-text$kendo-table-line-height Null null null
Description
The text color of the track when the disabled Switch is not checked.
+
Description
The line-height of the table if no size is specified.
$kendo-switch-off-track-disabled-border$kendo-table-cell-padding-x Null null null
Description
The border color of the track when the disabled Switch is not checked.
+
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-switch-off-track-disabled-gradient$kendo-table-cell-padding-y Null null null
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-switch-off-thumb-bg$kendo-table-sizesMap( + sm: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-sm-cell-padding-x, + cell-padding-y: $kendo-table-sm-cell-padding-y + ), + md: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-md-cell-padding-x, + cell-padding-y: $kendo-table-md-cell-padding-y + ), + lg: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-lg-cell-padding-x, + cell-padding-y: $kendo-table-lg-cell-padding-y + ) +)(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))
Description
The sizes of the table.
+
$kendo-table-bg Color$gray-500#adb5bd$kendo-component-bg#ffffff
Description
The background of the thumb when the Switch is not checked.
+
Description
Background color of tables.
$kendo-switch-off-thumb-textNullnullnull$kendo-table-textColor$kendo-component-text#212529
Description
The text color of the thumb when the Switch is not checked.
+
Description
Text color of tables.
$kendo-switch-off-thumb-borderNullnullnull$kendo-table-borderColor$kendo-component-border#dee2e6
Description
The border color of the thumb when the Switch is not checked.
+
Description
Border color of tables.
$kendo-switch-off-thumb-gradientNullnullnull$kendo-table-header-bgColor$kendo-component-header-bg#f8f9fa
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
Background color of table headers.
$kendo-switch-off-thumb-hover-bgNullnullnull$kendo-table-header-textColor$kendo-component-header-text#212529
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
Text color of table headers.
$kendo-switch-off-thumb-hover-textNullnullnull$kendo-table-header-borderColor$kendo-component-header-border#dee2e6
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
Border color of table headers.
$kendo-switch-off-thumb-hover-border$kendo-table-header-gradient Nullnull$kendo-component-header-gradient null
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
Gradient of table headers.
$kendo-switch-off-thumb-hover-gradientNullnullnull$kendo-table-footer-bgColor$kendo-table-header-bg#f8f9fa
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
Background color of table footers.
$kendo-switch-on-track-bg$kendo-table-footer-text Color$kendo-color-primary#0d6efd$kendo-table-header-text#212529
Description
The background of the track when the Switch is checked.
+
Description
Text color of table footers.
$kendo-switch-on-track-textNullnullnull$kendo-table-footer-borderColor$kendo-table-header-border#dee2e6
Description
Border color of table footers.
+
$kendo-table-group-row-bgColor$kendo-table-header-bg#f8f9fa
Description
Background color of group rows in table.
+
Description
The text color of the track when the Switch is checked.
+ 		$kendo-table-group-row-textColor$kendo-table-header-text#212529
Description
Text color of group rows in table.
$kendo-switch-on-track-border$kendo-table-group-row-border Color$kendo-switch-on-track-bg#0d6efd$kendo-table-header-border#dee2e6
Description
The border color of the track when the Switch is checked.
+
Description
Border color of group rows in table.
$kendo-switch-on-track-gradientNullnullnull$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
The background gradient of the track when the Switch is checked.
+
Description
Background color of alternating rows in table.
$kendo-switch-on-track-hover-bg$kendo-table-alt-row-text Null null null
Description
The background of the track when the hovered Switch is checked.
+
Description
Text color of alternating rows in table.
$kendo-switch-on-track-hover-text$kendo-table-alt-row-border Null null null
Description
The text color of the track when the hovered Switch is checked.
+
Description
Border color of alternating rows in table.
$kendo-switch-on-track-hover-borderNullnullnull$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))rgba(0, 0, 0, 0.08)
Description
The border color of the track when the hovered Switch is checked.
+
Description
Background color of hovered rows in table.
$kendo-switch-on-track-hover-gradient$kendo-table-hover-text Null null null
Description
The background gradient of the track when the hovered Switch is checked.
+
Description
Text color of hovered rows in table.
$kendo-switch-on-track-focus-bg$kendo-table-hover-border Null null null
Description
The background of the track when the focused Switch is checked.
+
Description
Border color of hovered rows in table.
$kendo-switch-on-track-focus-text$kendo-table-focus-bg Null null null
Description
The text color of the track when the focused Switch is checked.
+
Description
Background color of focused rows in table.
$kendo-switch-on-track-focus-border$kendo-table-focus-text Null null null
Description
The border color of the track when the focused Switch is checked.
+
Description
Text color of focused rows in table.
$kendo-switch-on-track-focus-gradient$kendo-table-focus-border Null null null
Description
The background gradient of the track when the focused Switch is checked.
+
Description
Border color of focused rows in table.
$kendo-switch-on-track-focus-ring$kendo-table-focus-shadow List.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)inset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The ring around the track when the focused Switch is checked.
+
Description
Box shadow of focused rows in table.
$kendo-switch-on-track-disabled-bg$kendo-table-selected-bg Colorif($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))#86b7feif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The background of the track when the disabled Switch is checked.
+
Description
Background color of selected rows in table.
$kendo-switch-on-track-disabled-textNullnullnull$kendo-table-selected-textColor$kendo-table-text#212529
Description
The text color of the track when the disabled Switch is checked.
+
Description
Text color of selected rows in table.
$kendo-switch-on-track-disabled-border$kendo-table-selected-border Null null null
Description
The border color of the track when the disabled Switch is checked.
+
Description
Border color of selected rows in table.
$kendo-switch-on-track-disabled-gradient
+ +### Tabstrip + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - -
NameTypeDefault valueComputed value
$kendo-tabstrip-bg Null null null
Description
The background gradient of the track when the disabled Switch is checked.
+
Description
Background color of tabstrip component
$kendo-switch-on-thumb-bg$kendo-tabstrip-text Colorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))white$kendo-component-text#212529
Description
The background of the thumb when the Switch is checked.
+
Description
Text color of tabstrip component
$kendo-switch-on-thumb-textNullnullnull$kendo-tabstrip-borderColor$kendo-component-border#dee2e6
Description
The text color of the thumb when the Switch is checked.
+
Description
Border color of tabstrip component
$kendo-switch-on-thumb-borderNullnullnull$kendo-tabstrip-item-padding-xNumber$nav-link-padding-x1rem
Description
The border color of the thumb when the Switch is checked.
+
Description
Horizontal padding of tabs
$kendo-switch-on-thumb-gradientNullnullnull$kendo-tabstrip-item-padding-yNumber$nav-link-padding-y0.5rem
Description
The background gradient of the thumb when the Switch is checked.
+
Description
Vertical padding of tabs
$kendo-switch-on-thumb-hover-bgNullnullnull$kendo-tabstrip-item-border-widthNumber1px1px
Description
The background of the thumb when the hovered Switch is checked.
+
Description
Width of border around tabs
$kendo-switch-on-thumb-hover-textNullnullnull$kendo-tabstrip-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The text color of the thumb when the hovered Switch is checked.
+
Description
Border radius of tabs
$kendo-switch-on-thumb-hover-borderNullnullnull$kendo-tabstrip-item-gapNumber00
Description
The border color of the thumb when the hovered Switch is checked.
+
Description
Spacing between tabs
$kendo-switch-on-thumb-hover-gradient$kendo-tabstrip-item-bg Null null null
Description
The background gradient of the thumb when the hovered Switch is checked.
+
Description
Background color of tabs
- -### Table - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
$kendo-tabstrip-item-textColor$kendo-link-text#0d6efd
Description
The width of the table border.
+
Description
Text color of tabs
$kendo-table-cell-vertical-border-widthNumber1px1px$kendo-tabstrip-item-borderNullnullnull
Description
The width of vertical border of table cells.
+
Description
Border color of tabs
$kendo-table-cell-horizontal-border-widthNumber0px0px$kendo-tabstrip-item-gradientNullnullnull
Description
The width of horizontal border of table cells.
+
Description
Background gradient of tabs
$kendo-table-font-size$kendo-tabstrip-item-hover-bg Null null null
Description
The font size of the table if no size is specified.
+
Description
Background color of hovered tabs
$kendo-table-line-heightNullnullnull$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#0a58ca
Description
The line-height of the table if no size is specified.
+
Description
Text color of hovered tabs
$kendo-table-cell-padding-xNullnullnull$kendo-tabstrip-item-hover-borderColor$gray-200#e9ecef
Description
The horizontal padding of the cells in the table if no size is specified.
+
Description
Border color of hovered tabs
$kendo-table-cell-padding-y$kendo-tabstrip-item-hover-gradient Null null null
Description
The vertical padding of the cells in the table if no size is specified.
-
$kendo-table-sizesMap( - sm: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-sm-cell-padding-x, - cell-padding-y: $kendo-table-sm-cell-padding-y - ), - md: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-md-cell-padding-x, - cell-padding-y: $kendo-table-md-cell-padding-y - ), - lg: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-lg-cell-padding-x, - cell-padding-y: $kendo-table-lg-cell-padding-y - ) -)(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))
Description
The sizes of the table.
+
Description
Background gradient of hovered tabs
$kendo-table-bg$kendo-tabstrip-item-selected-bg Color $kendo-component-bg #ffffff
Description
Background color of tables.
+
Description
Background color of selected tabs
$kendo-table-text$kendo-tabstrip-item-selected-text Color $kendo-component-text #212529
Description
Text color of tables.
+
Description
Text color of selected tabs
$kendo-table-border$kendo-tabstrip-item-selected-border Color $kendo-component-border #dee2e6
Description
Border color of tables.
+
Description
Border color of selected tabs
$kendo-table-header-bgColor$kendo-component-header-bg#f8f9fa$kendo-tabstrip-item-selected-gradientNullnullnull
Description
Background color of table headers.
+
Description
Background gradient of selected tabs
$kendo-table-header-textColor$kendo-component-header-text#212529$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Text color of table headers.
+
Description
Horizontal padding of tabstrip content
$kendo-table-header-borderColor$kendo-component-header-border#dee2e6$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Border color of table headers.
+
Description
Vertical padding of tabstrip content
$kendo-table-header-gradientNull$kendo-component-header-gradientnull$kendo-tabstrip-content-border-widthNumber$kendo-tabstrip-border-width1px
Description
Gradient of table headers.
+
Description
Width of border around tabstrip content
$kendo-table-footer-bg$kendo-tabstrip-content-bg Color$kendo-table-header-bg#f8f9fa$kendo-component-bg#ffffff
Description
Background color of table footers.
+
Description
Background color of tabstrip content
$kendo-table-footer-text$kendo-tabstrip-content-text Color$kendo-table-header-text$kendo-component-text #212529
Description
Text color of table footers.
+
Description
Text color of tabstrip content
$kendo-table-footer-border$kendo-tabstrip-content-border Color$kendo-table-header-border$kendo-component-border #dee2e6
Description
Border color of table footers.
+
Description
Border color of tabstrip content
$kendo-table-group-row-bg$kendo-tabstrip-content-focus-border Color$kendo-table-header-bg#f8f9fa$kendo-component-text#212529
Description
Background color of group rows in table.
+
Description
Border color of tabstrip focused content
$kendo-table-group-row-textColor$kendo-table-header-text#212529
+ +### Taskboard + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Text color of group rows in table.
+
Description
The spacing index of the TaskBoard.
$kendo-table-group-row-borderColor$kendo-table-header-border#dee2e6$kendo-taskboard-padding-yNullnullnull
Description
Border color of group rows in table.
+
Description
The vertical padding of the TaskBoard.
$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)$kendo-taskboard-padding-xNullnullnull
Description
Background color of alternating rows in table.
+
Description
The horizontal of the TaskBoard.
$kendo-table-alt-row-textNullnullnull$kendo-taskboard-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
Text color of alternating rows in table.
+
Description
The font family of the TaskBoard.
$kendo-table-alt-row-borderNullnullnull$kendo-taskboard-font-sizeNumber$kendo-font-size-md1rem
Description
Border color of alternating rows in table.
+
Description
The font size of the TaskBoard.
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))rgba(0, 0, 0, 0.08)$kendo-taskboard-line-heightNumber$kendo-line-height-md1.5
Description
Background color of hovered rows in table.
+
Description
The line height of the TaskBoard.
$kendo-table-hover-text$kendo-taskboard-bg Null null null
Description
Text color of hovered rows in table.
+
Description
The background color of the TaskBoard.
$kendo-table-hover-border$kendo-taskboard-text Null null null
Description
Border color of hovered rows in table.
+
Description
The text color of the TaskBoard.
$kendo-table-focus-bg$kendo-taskboard-border Null null null
Description
Background color of focused rows in table.
+
Description
The border color of the TaskBoard.
$kendo-table-focus-text$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y1rem
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bg Null null null
Description
Text color of focused rows in table.
+
Description
The background color of the TaskBoard Toolbar.
$kendo-table-focus-border$kendo-taskboard-toolbar-text Null null null
Description
Border color of focused rows in table.
+
Description
The text color of the TaskBoard Toolbar.
$kendo-table-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-taskboard-toolbar-borderNullnullnull
Description
Box shadow of focused rows in table.
+
Description
The border color of the TaskBoard Toolbar.
$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)$kendo-taskboard-toolbar-gradientNullnullnull
Description
Background color of selected rows in table.
+
Description
The gradient of the TaskBoard Toolbar.
$kendo-table-selected-textColor$kendo-table-text#212529$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer1rem
Description
Text color of selected rows in table.
+
Description
The vertical padding of the TaskBoard content.
$kendo-table-selected-borderNullnullnull$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y1rem
Description
Border color of selected rows in table.
+
Description
The horizontal padding of the TaskBoard content.
- -### Tabstrip - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + - + - - - - - + + + + - - + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + + + + + + + + + + + + + + + + + + + - - + - + - - + - - + - - + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
$kendo-taskboard-column-container-spacing-yNumber$kendo-taskboard-spacer * .750.75rem
Description
Background color of tabstrip component
+
Description
The vertical spacing of the TaskBoard column container.
$kendo-tabstrip-textColor$kendo-component-text#212529$kendo-taskboard-column-container-padding-yNumber0px0px
Description
Text color of tabstrip component
+
Description
The vertical padding of the TaskBoard column container.
$kendo-tabstrip-borderColor$kendo-component-border#dee2e6$kendo-taskboard-column-container-padding-xNumber$kendo-taskboard-spacer * .750.75rem
Description
Border color of tabstrip component
+
Description
The horizontal padding of the TaskBoard column container.
$kendo-tabstrip-item-padding-x$kendo-taskboard-columns-container-gap Number$nav-link-padding-x$kendo-taskboard-spacer 1rem
Description
Horizontal padding of tabs
+
Description
The spacing of the TaskBoard columns container.
$kendo-tabstrip-item-padding-y$kendo-taskboard-column-width Number$nav-link-padding-y0.5rem320px320px
Description
Vertical padding of tabs
+
Description
The default width of the TaskBoard column.
$kendo-tabstrip-item-border-width$kendo-taskboard-column-border-width Number 1px 1px
Description
Width of border around tabs
+
Description
The border width of the TaskBoard column.
$kendo-tabstrip-item-border-radius$kendo-taskboard-column-border-radius Numberk-map-get( $kendo-spacing, 1 )$kendo-border-radius-sm 0.25rem
Description
Border radius of tabs
+
Description
The border radius of the TaskBoard column.
$kendo-tabstrip-item-gapNumber00$kendo-taskboard-column-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 ))#f8f9fa
Description
Spacing between tabs
+
Description
The background color of the TaskBoard column.
$kendo-tabstrip-item-bg$kendo-taskboard-column-text Null null null
Description
Background color of tabs
+
Description
The text color of the TaskBoard column.
$kendo-tabstrip-item-text$kendo-taskboard-column-border Color$kendo-link-text#0d6efdtransparenttransparent
Description
Text color of tabs
+
Description
The border color of the TaskBoard column.
$kendo-tabstrip-item-border$kendo-taskboard-column-focus-bg Null null null
Description
Border color of tabs
+
Description
The background color of the focused TaskBoard column.
$kendo-tabstrip-item-gradient$kendo-taskboard-column-focus-text Null null null
Description
Background gradient of tabs
+
Description
The text color of the focused TaskBoard column.
$kendo-tabstrip-item-hover-bgNullnullnull$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#b6b7b8
Description
Background color of hovered tabs
+
Description
The border color of the focused TaskBoard column.
$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#0a58ca$kendo-taskboard-column-header-padding-yNumber$kendo-taskboard-spacer * .750.75rem
Description
Text color of hovered tabs
+
Description
The vertical padding of the TaskBoard column header.
$kendo-tabstrip-item-hover-borderColor$gray-200#e9ecef$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y0.75rem
Description
Border color of hovered tabs
+
Description
The horizontal padding of the TaskBoard column header.
$kendo-tabstrip-item-hover-gradientNullnullnull$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )0.25rem
Description
Background gradient of hovered tabs
+
Description
The spacing of the TaskBoard column header.
$kendo-tabstrip-item-selected-bgColor$kendo-component-bg#ffffff$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )0.5rem
Description
Background color of selected tabs
+
Description
The spacing of the TaskBoard column header actions.
$kendo-tabstrip-item-selected-text$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-text Color$kendo-component-text$kendo-component-header-text #212529
Description
Text color of selected tabs
+
Description
The text color of the TaskBoard column header.
$kendo-tabstrip-item-selected-borderColor$kendo-component-border#dee2e6$kendo-taskboard-column-cards-padding-yNumber$kendo-taskboard-spacer * .250.25rem
Description
Border color of selected tabs
+
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-tabstrip-item-selected-gradientNullnullnull$kendo-taskboard-column-cards-padding-xNumber0px0px
Description
Background gradient of selected tabs
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-tabstrip-content-padding-x$kendo-taskboard-column-cards-gap Numberk-map-get( $kendo-spacing, 4 )1rem$kendo-taskboard-spacer * .750.75rem
Description
Horizontal padding of tabstrip content
+
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-tabstrip-content-padding-y$kendo-taskboard-pane-width Numberk-map-get( $kendo-spacing, 4 )1rem$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
Vertical padding of tabstrip content
+
Description
The horizontal padding of the TaskBoard pane.
$kendo-tabstrip-content-border-width$kendo-taskboard-pane-border-width Number$kendo-tabstrip-border-width1px 1px
Description
Width of border around tabstrip content
+
Description
The border width of the TaskBoard pane.
$kendo-tabstrip-content-bg$kendo-taskboard-pane-bg Color $kendo-component-bg #ffffff
Description
Background color of tabstrip content
+
Description
The background color of the TaskBoard pane.
$kendo-tabstrip-content-text$kendo-taskboard-pane-text Color $kendo-component-text #212529
Description
Text color of tabstrip content
+
Description
The text color of the TaskBoard pane.
$kendo-tabstrip-content-border$kendo-taskboard-pane-border Color $kendo-component-border #dee2e6
Description
Border color of tabstrip content
+
Description
The border color of the TaskBoard pane.
$kendo-tabstrip-content-focus-borderColor$kendo-component-text#212529$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )0.75rem
Description
Border color of tabstrip focused content
+
Description
The vertical padding of the TaskBoard pane header.
- -### Taskboard - - - - - - - - - - - - - - - - - - + + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + - + + + + + + - - - - + + + + - - + - - + - - + + - - + - - - - - - - - - - - + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-taskboard-spacer
$kendo-taskboard-pane-header-padding-x Numberk-map-get( $kendo-spacing, 4 )$kendo-taskboard-spacer 1rem
Description
The spacing index of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-padding-yNullnullnull$kendo-taskboard-pane-header-font-weightNumber500500
Description
The vertical padding of the TaskBoard.
+
Description
The font weight of the TaskBoard pane header.
$kendo-taskboard-padding-xNullnullnull$kendo-taskboard-pane-header-textColor$kendo-component-header-text#212529
Description
The horizontal of the TaskBoard.
+
Description
The text color of the TaskBoard pane header.
$kendo-taskboard-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The font family of the TaskBoard.
+
Description
The vertical padding of the TaskBoard pane content.
$kendo-taskboard-font-size$kendo-taskboard-pane-content-padding-x Number$kendo-font-size-md$kendo-taskboard-spacer 1rem
Description
The font size of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-line-height$kendo-taskboard-pane-actions-padding-y Number$kendo-line-height-md1.5( $kendo-taskboard-spacer * .75 )0.75rem
Description
The line height of the TaskBoard.
+
Description
The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-bgNullnullnull$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer1rem
Description
The background color of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-textNullnullnull$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer1rem
Description
The text color of the TaskBoard.
+
Description
The vertical padding of the TaskBoard Card.
$kendo-taskboard-borderNullnullnull$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y1rem
Description
The border color of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard Card.
$kendo-taskboard-toolbar-padding-y$kendo-taskboard-card-border-width Number$kendo-taskboard-spacer1rem$kendo-card-border-width1px
Description
The vertical padding of the TaskBoard Toolbar.
+
Description
The border width of the TaskBoard Card.
$kendo-taskboard-toolbar-padding-x$kendo-taskboard-card-border-radius Number$kendo-taskboard-toolbar-padding-y1rem$kendo-card-border-radius0.375rem
Description
The horizontal padding of the TaskBoard Toolbar.
+
Description
The border radius of the TaskBoard Card.
$kendo-taskboard-toolbar-bgNullnullnull$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Toolbar.
+
Description
The background color of the TaskBoard Card.
$kendo-taskboard-toolbar-textNullnullnull$kendo-taskboard-card-textColor$kendo-card-text#212529
Description
The text color of the TaskBoard Toolbar.
+
Description
The text color of the TaskBoard Card.
$kendo-taskboard-toolbar-borderNullnullnull$kendo-taskboard-card-borderColor$kendo-card-border#dee2e6
Description
The border color of the TaskBoard Toolbar.
+
Description
The border color of the TaskBoard Card.
$kendo-taskboard-toolbar-gradient$kendo-taskboard-card-shadow Nullnull$kendo-card-shadow null
Description
The gradient of the TaskBoard Toolbar.
+
Description
The shadow of the TaskBoard Card.
$kendo-taskboard-content-padding-y$kendo-taskboard-card-category-border-width Number$kendo-taskboard-spacer1rem4px4px
Description
The vertical padding of the TaskBoard content.
+
Description
The border width of the TaskBoard Card category.
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y1rem$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#c8cbcf
Description
The horizontal padding of the TaskBoard content.
+
Description
The border color of the hovered TaskBoard Card.
$kendo-taskboard-column-container-spacing-yNumber$kendo-taskboard-spacer * .750.75rem$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#b6b9bd
Description
The vertical spacing of the TaskBoard column container.
+
Description
The border color of the focused TaskBoard Card.
$kendo-taskboard-column-container-padding-yNumber0px0px$kendo-taskboard-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The vertical padding of the TaskBoard column container.
+
Description
The shadow of the focused TaskBoard Card.
$kendo-taskboard-column-container-padding-xNumber$kendo-taskboard-spacer * .750.75rem$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 ))#b6d3fe
Description
The horizontal padding of the TaskBoard column container.
+
Description
The border of the selected TaskBoard Card.
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer1rem$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#0d6efd
Description
The text color of the TaskBoard Card header text.
+
Description
The spacing of the TaskBoard columns container.
+ 		$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#0b5cd5
Description
The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-column-widthNumber320px320px$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#0b5cd5
Description
The default width of the TaskBoard column.
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-taskboard-column-border-width$kendo-taskboard-drag-placeholder-border-width Number 1px 1px
Description
The border width of the TaskBoard column.
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-column-border-radius$kendo-taskboard-drag-placeholder-border-radius Number$kendo-border-radius-sm0.25rem$kendo-taskboard-card-border-radius0.375rem
Description
The border radius of the TaskBoard column.
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-column-bg$kendo-taskboard-drag-placeholder-bg Colorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 ))#f8f9fa
Description
The background color of the TaskBoard column.
-
$kendo-taskboard-column-textNullnullnullrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .1 )rgba(0, 0, 0, 0.1)
Description
The text color of the TaskBoard column.
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-column-border$kendo-taskboard-drag-placeholder-border Colortransparenttransparent$kendo-component-border#dee2e6
Description
The border color of the TaskBoard column.
+
Description
The border color of the TaskBoard Card placeholder.
$kendo-taskboard-column-focus-bgNullnullnull
+ +### Tilelayout + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The background color of the focused TaskBoard column.
+
Description
The width of the border around the TileLayout.
$kendo-taskboard-column-focus-textNullnullnull$kendo-tile-layout-bgColor$gray-100#f8f9fa
Description
The text color of the focused TaskBoard column.
+
Description
The background color of the TileLayout.
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#b6b7b8$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The border color of the focused TaskBoard column.
+
Description
The horizontal padding of the TileLayout.
$kendo-taskboard-column-header-padding-y$kendo-tile-layout-padding-y Number$kendo-taskboard-spacer * .750.75rem$kendo-tile-layout-padding-x1rem
Description
The vertical padding of the TaskBoard column header.
+
Description
The vertical padding of the TileLayout
$kendo-taskboard-column-header-padding-x$kendo-tile-layout-card-border-width Number$kendo-taskboard-column-header-padding-y0.75rem$kendo-card-border-width1px
Description
The horizontal padding of the TaskBoard column header.
+
Description
The width of the border around the TileLayout card.
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )0.25rem$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The spacing of the TaskBoard column header.
+
Description
The focus box shadow of the TileLayout card.
$kendo-taskboard-column-header-actions-gap$kendo-tile-layout-hint-border-width Numberk-math-div( $kendo-taskboard-spacer, 2 )0.5rem1px1px
Description
The spacing of the TaskBoard column header actions.
+
Description
The width of the border around the TileLayout hint.
$kendo-taskboard-column-header-font-weight$kendo-tile-layout-hint-border-radius Number500500$kendo-card-border-radius0.375rem
Description
The font weight of the TaskBoard column header.
+
Description
The radius of the border around the TileLayout hint.
$kendo-taskboard-column-header-text$kendo-tile-layout-hint-border Color$kendo-component-header-text#212529$kendo-component-border#dee2e6
Description
The text color of the TaskBoard column header.
+
Description
The color of the border around the TileLayout hint.
$kendo-taskboard-column-cards-padding-yNumber$kendo-taskboard-spacer * .250.25rem$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The vertical padding of the TaskBoard column Card wrapper.
+
Description
The background color of the TileLayout hint.
$kendo-taskboard-column-cards-padding-x
+ +### Timeline + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-timeline-spacing-x Number0px0px40px40px
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
Description
The horizontal spacing of the Timeline.
$kendo-taskboard-column-cards-gap$kendo-timeline-spacing-y Number$kendo-taskboard-spacer * .750.75rem40px40px
Description
The spacing of the TaskBoard column Card wrapper.
+
Description
The vertical spacing of the Timeline.
$kendo-taskboard-pane-width$kendo-timeline-items-padding Number$kendo-taskboard-column-width320px$kendo-padding-md-x1rem
Description
The default width of the TaskBoard pane.
+
Description
The padding between the Timeline's track items.
$kendo-taskboard-pane-padding-yNullnullnull$kendo-timeline-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The vertical padding of the TaskBoard pane.
+
Description
The font family of the Timeline.
$kendo-taskboard-pane-padding-xNullnullnull$kendo-timeline-font-sizeNumber$kendo-font-size-md1rem
Description
The horizontal padding of the TaskBoard pane.
+
Description
The font size of the Timeline.
$kendo-taskboard-pane-border-width$kendo-timeline-line-height Number1px1px$kendo-line-height-md1.5
Description
The border width of the TaskBoard pane.
+
Description
The line height of the Timeline.
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff$kendo-timeline-mobile-spacing-xNumber$kendo-padding-md-x1rem
Description
The background color of the TaskBoard pane.
+
Description
The horizontal spacing of the mobile Timeline.
$kendo-taskboard-pane-textColor$kendo-component-text#212529$kendo-timeline-mobile-spacing-yNumber$kendo-padding-md-x1rem
Description
The text color of the TaskBoard pane.
+
Description
The vertical spacing of the mobile Timeline.
$kendo-taskboard-pane-borderColor$kendo-component-border#dee2e6$kendo-timeline-track-arrow-widthNumber38px38px
Description
The border color of the TaskBoard pane.
+
Description
The width of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-y$kendo-timeline-track-arrow-height Number( $kendo-taskboard-spacer * .75 )0.75rem38px38px
Description
The vertical padding of the TaskBoard pane header.
+
Description
The height of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer1rem$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .65 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))#edeff2
Description
The horizontal padding of the TaskBoard pane header.
+
Description
The background color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-font-weightNumber500500$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))#6f7174
Description
The font weight of the TaskBoard pane header.
+
Description
The text color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-text$kendo-timeline-track-arrow-disabled-border Color$kendo-component-header-text#212529if($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( $kendo-button-border, $kendo-body-bg, 65% ))#edeff2
Description
The text color of the TaskBoard pane header.
+
Description
The border color of the disabled Timeline track arrow.
$kendo-taskboard-pane-content-padding-y$kendo-timeline-track-size Number0px0px6px6px
Description
The vertical padding of the TaskBoard pane content.
+
Description
The size of the Timeline track.
$kendo-taskboard-pane-content-padding-x$kendo-timeline-track-wrap-padding-bottom Number$kendo-taskboard-spacer1remk-math-div( $kendo-timeline-track-size, 2 )3px
Description
The horizontal padding of the TaskBoard pane content.
+
Description
The bottom padding of the Timeline's track wrapper.
$kendo-taskboard-pane-actions-padding-y$kendo-timeline-track-border-width Number( $kendo-taskboard-spacer * .75 )0.75rem1px1px
Description
The vertical padding of the TaskBoard pane actions.
+
Description
The border width of the Timeline track.
$kendo-taskboard-pane-actions-padding-x$kendo-timeline-track-margin-bottom Number$kendo-taskboard-spacerk-map-get( $kendo-spacing, 4 ) 1rem
Description
The horizontal padding of the TaskBoard pane actions.
+
Description
The bottom margin of the Timeline track.
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer1rem$kendo-timeline-track-bottom-calcCalculationcalc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})calc(19px + 3px)
Description
The vertical padding of the TaskBoard Card.
+
Description
The bottom offset of the Timeline track.
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y1rem$kendo-timeline-track-start-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(38px - 2 * 1px)
Description
The horizontal padding of the TaskBoard Card.
+
Description
The left offset of the Timeline track.
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px$kendo-timeline-track-end-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(38px - 2 * 1px)
Description
The border width of the TaskBoard Card.
+
Description
The right offset of the Timeline track.
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius0.375rem$kendo-timeline-track-bgColor$kendo-button-bg#e4e7eb
Description
The border radius of the TaskBoard Card.
+
Description
The background color of the Timeline track.
$kendo-taskboard-card-bg$kendo-timeline-track-border-color Color$kendo-card-bg#ffffff$kendo-timeline-track-bg#e4e7eb
Description
The background color of the TaskBoard Card.
+
Description
The border color of the Timeline track.
$kendo-taskboard-card-textColor$kendo-card-text#212529$kendo-timeline-track-item-focus-shadowStringk-elevation(2)var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075))
Description
The text color of the TaskBoard Card.
+
Description
The shadow of the Timeline's focused track items.
$kendo-taskboard-card-borderColor$kendo-card-border#dee2e6$kendo-timeline-track-event-offsetNumber36px36px
Description
The border color of the TaskBoard Card.
+
Description
The offset of the Timeline track event.
$kendo-taskboard-card-shadowNull$kendo-card-shadownull$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x0.75rem
Description
The shadow of the TaskBoard Card.
+
Description
The horizontal padding of the Timeline flag.
$kendo-taskboard-card-category-border-width$kendo-timeline-flag-padding-y Number4px4px$kendo-button-padding-y0.375rem
Description
The border width of the TaskBoard Card category.
+
Description
The vertical padding of the Timeline flag.
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#c8cbcf$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.5
Description
The border color of the hovered TaskBoard Card.
+
Description
The line height of the Timeline flag.
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#b6b9bd$kendo-timeline-flag-min-widthNumber80px80px
Description
The border color of the focused TaskBoard Card.
+
Description
The minimum width of the Timeline flag.
$kendo-taskboard-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))$kendo-timeline-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})calc(80px + 2 * 40px)
Description
The shadow of the focused TaskBoard Card.
+
Description
The maximum width of the Timeline flag.
$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 ))#b6d3fe$kendo-timeline-mobile-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})calc(80px + 2 * 1rem)
Description
The border of the selected TaskBoard Card.
+
Description
The maximum width of the mobile Timeline flag.
$kendo-taskboard-card-selected-shadowStringnonenone$kendo-timeline-horizontal-flag-min-widthNumber80px80px
Description
The shadow of the selected TaskBoard Card.
+
Description
The minimum width of the horizontal Timeline flag.
$kendo-taskboard-card-header-text$kendo-timeline-flag-bg Color $kendo-color-primary #0d6efd
Description
The text color of the TaskBoard Card header text.
+
Description
The background color of the Timeline flag.
$kendo-taskboard-card-header-focus-text$kendo-timeline-flag-text Color$kendo-color-primary-darker#0b5cd5if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg ))white
Description
The text color of the hovered TaskBoard Card header text.
+
Description
The text color of the Timeline flag.
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#0b5cd5$kendo-timeline-flag-callout-widthNumber10px10px
Description
The text color of the focused TaskBoard Card header text.
+
Description
The width of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-width$kendo-timeline-flag-callout-height Number1px1px10px10px
Description
The border width of the TaskBoard Card placeholder.
+
Description
The height of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-radius$kendo-timeline-flag-offset-bottom Number$kendo-taskboard-card-border-radius0.375rem4px4px
Description
The border radius of the TaskBoard Card placeholder.
+
Description
The bottom offset of the Timeline flag.
$kendo-taskboard-drag-placeholder-bgColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .1 )rgba(0, 0, 0, 0.1)$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 background color of the TaskBoard Card placeholder.
+
Description
The bottom margin of the Timeline flag.
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-border#dee2e6$kendo-timeline-date-widthNumber50px50px
Description
The border color of the TaskBoard Card placeholder.
+
Description
The width of the Timeline date.
- -### Tilelayout - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - diff --git a/packages/classic/docs/customization-slider.md b/packages/classic/docs/customization-slider.md new file mode 100644 index 00000000000..3f24b9c151e --- /dev/null +++ b/packages/classic/docs/customization-slider.md @@ -0,0 +1,388 @@ +--- +title: Customizing Slider +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_slider +position: 9 +--- + +# Customizing Slider + +## Variables + +The following table lists the available variables for customization. + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-width
$kendo-timeline-date-margin-bottom Number0px0px10px10px
Description
The width of the border around the TileLayout.
+
Description
The bottom margin of the Timeline date.
$kendo-tile-layout-bgColor$gray-100#f8f9fa$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 background color of the TileLayout.
+
Description
The padding of the vertical Timeline.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem$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 horizontal padding of the TileLayout.
+
Description
The padding of the vertical Timeline date.
$kendo-tile-layout-padding-y$kendo-timeline-mobile-vertical-padding-calcCalculationcalc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)calc(1rem + (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(1rem + (80px - 6px) / 2) + 50px)
Description
The padding of the vertical mobile Timeline date.
+
$kendo-timeline-circle-width Number$kendo-tile-layout-padding-x1rem16px16px
Description
The vertical padding of the TileLayout
+
Description
The width of the Timeline circle.
$kendo-tile-layout-card-border-width$kendo-timeline-circle-height Number$kendo-card-border-width1px16px16px
Description
The width of the border around the TileLayout card.
+
Description
The height of the Timeline circle.
$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))$kendo-timeline-circle-bgColor$kendo-color-primary#0d6efd
Description
The focus box shadow of the TileLayout card.
+
Description
The background color of the Timeline circle.
$kendo-tile-layout-hint-border-width$kendo-timeline-collapse-arrow-padding-x Number1px1px$kendo-padding-sm-x0.5rem
Description
The width of the border around the TileLayout hint.
+
Description
The horizontal padding of the Timeline collapse arrow.
$kendo-tile-layout-hint-border-radius$kendo-timeline-event-width Number$kendo-card-border-radius0.375rem400px400px
Description
The radius of the border around the TileLayout hint.
+
Description
The width of the Timeline event.
$kendo-tile-layout-hint-borderColor$kendo-component-border#dee2e6$kendo-timeline-event-heightNumber600px600px
Description
The color of the border around the TileLayout hint.
+
Description
The height of the Timeline event.
$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)$kendo-timeline-event-min-height-calcCalculationcalc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))calc(2 * (36px - 1px))
Description
The background color of the TileLayout hint.
+
Description
The minimum height of the Timeline event.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-slider-sizeNumber200px200px
Description
The default size of the Slider.
+
$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
+
$kendo-slider-alt-sizeNumber30px30px
Description
The default size of the Slider's track wrap.
+
$kendo-slider-font-familyString$kendo-font-familyinherit
Description
The font family of the Slider.
+
$kendo-slider-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Slider.
+
$kendo-slider-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Slider.
+
$kendo-slider-button-offsetNumber10px10px
Description
The offset of the Slider Buttons.
+
$kendo-slider-button-sizeNumber($kendo-slider-alt-size - 2)28px
Description
The size of the Slider Buttons.
+
$kendo-slider-button-spacingNumber($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The spacing of the Slider Buttons.
+
$kendo-slider-button-focus-shadowNullnullnull
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thicknessNumber4px4px
Description
The thickness of the Slider track.
+
$kendo-slider-draghandle-sizeNumber14px14px
Description
The size of the Slider drag handle.
+
$kendo-slider-draghandle-border-widthNumber1px1px
Description
The border width of the Slider drag handle.
+
$kendo-slider-draghandle-active-scaleNumber11
Description
The transition scale of the active Slider drag handle.
+
$kendo-slider-draghandle-active-sizeNullnullnull
Description
The size of the active Slider drag handle.
+
$kendo-slider-draghandle-bgColor$kendo-color-primary#f35800
Description
The background color of the Slider drag handle.
+
$kendo-slider-draghandle-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))white
Description
The text color of the Slider drag handle.
+
$kendo-slider-draghandle-borderColorif($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))#cc4a00
Description
The border color of the Slider drag handle.
+
$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary, 1 ))#e05100
Description
The background color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-textNullnullnull
Description
The text color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-borderColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-slider-draghandle-hover-bg, 2 ))#bc4400
Description
The border color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The gradient of the hovered Slider drag handle.
+
$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary, 2 ))#cc4a00
Description
The background color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-textNullnullnull
Description
The text color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-slider-draghandle-pressed-bg, 2 ))#ab3e00
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( primary, true ), .75 ), rgba( $kendo-slider-draghandle-border, .75 ))0 0 4px 0 rgba(204, 74, 0, 0.75)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the Slider.
+
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function of the Slider.
+
$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The transition speed of the Slider drag handle.
+
$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The transition function of the Slider drag handle.
+
$kendo-slider-track-bgColorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb
Description
The background color of the Slider track.
+
$kendo-slider-selection-bgColor$kendo-color-primary#f35800
Description
The background color of the Slider's track selection.
+
$kendo-slider-disabled-opacityNullnullnull
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-timeline.md b/packages/classic/docs/customization-timeline.md new file mode 100644 index 00000000000..7552787f3a8 --- /dev/null +++ b/packages/classic/docs/customization-timeline.md @@ -0,0 +1,538 @@ +--- +title: Customizing Timeline +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_timeline +position: 9 +--- + +# 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-paddingNumber16px16px
Description
The padding between the Timeline's track items.
+
$kendo-timeline-font-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the Timeline.
+
$kendo-timeline-mobile-spacing-xNumber16px16px
Description
The horizontal spacing of the mobile Timeline.
+
$kendo-timeline-mobile-spacing-yNumber16px16px
Description
The vertical spacing of the mobile Timeline.
+
$kendo-timeline-track-arrow-widthNumber30px30px
Description
The width of the Timeline track arrow.
+
$kendo-timeline-track-arrow-heightNumber30px30px
Description
The height of the Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))whitesmoke
Description
The background color of the disabled Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))#737373
Description
The text color of the disabled Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-borderColorif($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( #000000, $kendo-body-bg, 4.8% ))#f3f3f3
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-bottomNumber16px16px
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(15px + 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(30px - 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(30px - 2 * 1px)
Description
The right offset of the Timeline track.
+
$kendo-timeline-track-bgColor$kendo-button-bg#f0f0f0
Description
The background color of the Timeline track.
+
$kendo-timeline-track-border-colorColor$kendo-button-border#cacaca
Description
The border color of the Timeline track.
+
$kendo-timeline-track-item-focus-shadowStringk-elevation(2)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-offsetNumber36px36px
Description
The offset of the Timeline track event.
+
$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x8px
Description
The horizontal padding of the Timeline flag.
+
$kendo-timeline-flag-padding-yNumber$kendo-button-padding-y4px
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#f35800
Description
The background color of the Timeline flag.
+
$kendo-timeline-flag-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $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#f35800
Description
The background color of the Timeline circle.
+
$kendo-timeline-collapse-arrow-padding-xNumber$kendo-padding-md-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 - 1px))
Description
The minimum height of the Timeline event.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index 96ed360df7b..aca0ff6a5b8 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -15565,7 +15565,7 @@ The following table lists the available variables for customizing the Classic th -### Split-button +### Slider @@ -15583,309 +15583,359 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - + + + + + + + + + + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - + - - + - - + + - - -
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)$kendo-slider-sizeNumber200px200px
Description
The focus shadow of the SplitButton.
+
Description
The default size of the Slider.
$kendo-split-button-arrow-padding-x$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
+
$kendo-slider-alt-size Number$kendo-button-padding-y4px30px30px
Description
The horizontal padding of the arrow Button.
+
Description
The default size of the Slider's track wrap.
$kendo-split-button-sm-arrow-padding-x$kendo-slider-font-familyString$kendo-font-familyinherit
Description
The font family of the Slider.
+
$kendo-slider-font-size Number$kendo-button-sm-padding-y2px$kendo-font-size-md14px
Description
The horizontal padding of the small arrow Button.
+
Description
The font size of the Slider.
$kendo-split-button-md-arrow-padding-x$kendo-slider-line-height Number$kendo-button-md-padding-y4px$kendo-line-height-md1.4285714286
Description
The horizontal padding of the medium arrow Button.
+
Description
The line height of the Slider.
$kendo-split-button-lg-arrow-padding-x$kendo-slider-button-offset Number$kendo-button-lg-padding-y8px10px10px
Description
The horizontal padding of the large arrow Button.
+
Description
The offset of the Slider Buttons.
$kendo-split-button-arrow-padding-y$kendo-slider-button-size Number$kendo-button-padding-y4px($kendo-slider-alt-size - 2)28px
Description
The vertical padding of the arrow Button.
+
Description
The size of the Slider Buttons.
$kendo-split-button-sm-arrow-padding-y$kendo-slider-button-spacing Number$kendo-button-sm-padding-y2px($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The vertical padding of the small arrow Button.
+
Description
The spacing of the Slider Buttons.
$kendo-split-button-md-arrow-padding-y$kendo-slider-button-focus-shadowNullnullnull
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thickness Number$kendo-button-md-padding-y4px 4px
Description
The vertical padding of the medium arrow Button.
+
Description
The thickness of the Slider track.
$kendo-split-button-lg-arrow-padding-y$kendo-slider-draghandle-size Number$kendo-button-lg-padding-y8px14px14px
Description
The vertical padding of the large arrow Button.
+
Description
The size of the Slider drag handle.
- -### Splitter - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-splitter-border-width
$kendo-slider-draghandle-border-width Number 1px 1px
Description
The width of the border around the Splitter.
+
Description
The border width of the Slider drag handle.
$kendo-splitter-font-familyString$kendo-font-familyinherit$kendo-slider-draghandle-active-scaleNumber11
Description
The font family of the Splitter.
+
Description
The transition scale of the active Slider drag handle.
$kendo-splitter-font-sizeNumber$kendo-font-size-md14px$kendo-slider-draghandle-active-sizeNullnullnull
Description
The font size of the Splitter.
+
Description
The size of the active Slider drag handle.
$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286$kendo-slider-draghandle-bgColor$kendo-color-primary#f35800
Description
The line height of the Splitter.
+
Description
The background color of the Slider drag handle.
$kendo-splitter-bg$kendo-slider-draghandle-text Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))white
Description
The background color of the Splitter.
+
Description
The text color of the Slider drag handle.
$kendo-splitter-text$kendo-slider-draghandle-border Color$kendo-component-text#272727if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))#cc4a00
Description
The text color of the Splitter.
+
Description
The border color of the Slider drag handle.
$kendo-splitter-border$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bg Color$kendo-component-border#cacacaif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary, 1 ))#e05100
Description
The border color of the Splitter.
+
Description
The background color of the hovered Slider drag handle.
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px$kendo-slider-draghandle-hover-textNullnullnull
Description
The size of the Splitter split bar.
+
Description
The text color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-lengthNumber20px20px$kendo-slider-draghandle-hover-borderColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-slider-draghandle-hover-bg, 2 ))#bc4400
Description
The length of the Splitter drag handle.
+
Description
The border color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-thicknessNumber2px2px$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The thickness of the Splitter drag handle.
+
Description
The gradient of the hovered Slider drag handle.
$kendo-splitter-drag-icon-marginNumber7px7px$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary, 2 ))#cc4a00
Description
The margin of the Splitter drag handle icon.
+
Description
The background color of the active Slider drag handle.
$kendo-splitter-collapse-icon-padding-x$kendo-slider-draghandle-pressed-text Null null null
Description
The horizontal padding of the collapse icon in the Splitter.
+
Description
The text color of the active Slider drag handle.
$kendo-splitter-collapse-icon-padding-y$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-slider-draghandle-pressed-bg, 2 ))#ab3e00
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( primary, true ), .75 ), rgba( $kendo-slider-draghandle-border, .75 ))0 0 4px 0 rgba(204, 74, 0, 0.75)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speed Numberk-map-get( $kendo-spacing, .5 )2px.3s0.3s
Description
The vertical padding of the collapse icon in the Splitter.
+
Description
The transition speed of the Slider.
$kendo-splitbar-bgColor$kendo-base-bg#f0f0f0$kendo-slider-transition-functionStringease-outease-out
Description
The background color of the Splitter split bar.
+
Description
The transition function of the Slider.
$kendo-splitbar-textColor$kendo-base-text#272727$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The text color of the Splitter split bar.
+
Description
The transition speed of the Slider drag handle.
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e6e6e6$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The hover background color of the Splitter split bar.
+
Description
The transition function of the Slider drag handle.
$kendo-splitbar-hover-text$kendo-slider-track-bg Color$kendo-splitbar-text#272727if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb
Description
The hover text color of the Splitter split bar.
+
Description
The background color of the Slider track.
$kendo-splitbar-selected-bg$kendo-slider-selection-bg Color$kendo-selected-bg$kendo-color-primary #f35800
Description
The selected background color of the Splitter split bar.
+
Description
The background color of the Slider's track selection.
$kendo-splitbar-selected-textColor$kendo-selected-textwhite$kendo-slider-disabled-opacityNullnullnull
Description
The selected text color of the Splitter split bar.
+
-### Stepper +### Split-button @@ -15903,1151 +15953,1471 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - + +
$kendo-stepper-margin-xNullnullnull$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)
Description
The horizontal margin the Stepper.
+
Description
The focus shadow of the SplitButton.
$kendo-stepper-margin-yNullnullnull$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y4px
Description
The vertical margin the Stepper.
+
Description
The horizontal padding of the arrow Button.
$kendo-stepper-padding-xNullnullnull$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y2px
Description
The horizontal padding the Stepper.
+
Description
The horizontal padding of the small arrow Button.
$kendo-stepper-padding-yNullnullnull$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y4px
Description
The vertical padding the Stepper.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-stepper-label-margin-x$kendo-split-button-lg-arrow-padding-x Number12px12px$kendo-button-lg-padding-y8px
Description
The horizontal margin the Stepper label.
+
Description
The horizontal padding of the large arrow Button.
$kendo-stepper-label-padding-x$kendo-split-button-arrow-padding-y Number12px12px$kendo-button-padding-y4px
Description
The horizontal padding the Stepper label.
+
Description
The vertical padding of the arrow Button.
$kendo-stepper-label-padding-y$kendo-split-button-sm-arrow-padding-y Number5px5px$kendo-button-sm-padding-y2px
Description
The vertical padding the Stepper label.
+
Description
The vertical padding of the small arrow Button.
$kendo-stepper-border-width$kendo-split-button-md-arrow-padding-y Number0px0px$kendo-button-md-padding-y4px
Description
The width of the border around the Stepper.
+
Description
The vertical padding of the medium arrow Button.
$kendo-stepper-inline-content-padding-x$kendo-split-button-lg-arrow-padding-y Number20px20px$kendo-button-lg-padding-y8px
Description
The horizontal padding of the Stepper content.
+
Description
The vertical padding of the large arrow Button.
$kendo-stepper-inline-content-padding-y
+ +### Splitter + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + - - + + - - - - - - - - - - - - + +
NameTypeDefault valueComputed value
$kendo-splitter-border-width Number10px10px1px1px
Description
The vertical padding of the Stepper content.
+
Description
The width of the border around the Splitter.
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px$kendo-splitter-font-familyString$kendo-font-familyinherit
+
Description
The font family of the Splitter.
$kendo-stepper-line-height$kendo-splitter-font-size Number$kendo-line-height-md1.4285714286$kendo-font-size-md14px
+
Description
The font size of the Splitter.
$kendo-stepper-font-familyString$kendo-font-familyinherit$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286
+
Description
The line height of the Splitter.
$kendo-stepper-bgNullnullnull$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper.
+
Description
The background color of the Splitter.
$kendo-stepper-text$kendo-splitter-text Color $kendo-component-text #272727
Description
The text color of the Stepper.
+
Description
The text color of the Splitter.
$kendo-stepper-borderNullnullnull$kendo-splitter-borderColor$kendo-component-border#cacaca
Description
The border color of the Stepper.
+
Description
The border color of the Splitter.
$kendo-stepper-indicator-width$kendo-splitter-splitbar-size Number28px28pxk-map-get( $kendo-spacing, 3 )12px
Description
The width of the Stepper indicator.
+
Description
The size of the Splitter split bar.
$kendo-stepper-indicator-height$kendo-splitter-drag-handle-length Number$kendo-stepper-indicator-width28px20px20px
Description
The height of the Stepper indicator.
+
Description
The length of the Splitter drag handle.
$kendo-stepper-indicator-border-width$kendo-splitter-drag-handle-thickness Number1px1px2px2px
Description
The border width of the Stepper indicator.
+
Description
The thickness of the Splitter drag handle.
$kendo-stepper-indicator-border-radius$kendo-splitter-drag-icon-margin Number50%50%7px7px
Description
The border radius of the Stepper indicator.
+
Description
The margin of the Splitter drag handle icon.
$kendo-stepper-indicator-focus-border-widthNumber1px1px$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The border width of the focused Stepper indicator.
+
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-size$kendo-splitter-collapse-icon-padding-y Number2pxk-map-get( $kendo-spacing, .5 ) 2px
Description
The size of the focused Stepper indicator.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-offsetNumber3px3px$kendo-splitbar-bgColor$kendo-base-bg#f0f0f0
Description
The offset of the Stepper's focused indicator.
+
Description
The background color of the Splitter split bar.
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)$kendo-splitbar-textColor$kendo-base-text#272727
Description
The calculated offset of the Stepper's focused indicator.
+
Description
The text color of the Splitter split bar.
$kendo-stepper-indicator-bg$kendo-splitbar-hover-bg Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e6e6e6
Description
The background color of the Stepper indicator.
+
Description
The hover background color of the Splitter split bar.
$kendo-stepper-indicator-text$kendo-splitbar-hover-text Color$kendo-component-text$kendo-splitbar-text #272727
Description
The text color of the Stepper indicator.
+
Description
The hover text color of the Splitter split bar.
$kendo-stepper-indicator-border$kendo-splitbar-selected-bg Color$kendo-component-border#cacaca$kendo-selected-bg#f35800
Description
The border color of the Stepper indicator.
+
Description
The selected background color of the Splitter split bar.
$kendo-stepper-indicator-hover-bg$kendo-splitbar-selected-text Colorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb$kendo-selected-textwhite
Description
The background color of the hovered Stepper indicator.
+
Description
The selected text color of the Splitter split bar.
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
-
$kendo-stepper-indicator-hover-border
+ +### Stepper + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - - - - - - - - - - + - - - - - - - - - - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-stepper-margin-x Null null null
Description
The border color of the hovered Stepper indicator.
+
Description
The horizontal margin the Stepper.
$kendo-stepper-indicator-disabled-bg$kendo-stepper-margin-y Null null null
Description
The background color of the disabled Stepper indicator.
+
Description
The vertical margin the Stepper.
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d$kendo-stepper-padding-xNullnullnull
Description
The text color of the disabled Stepper indicator.
+
Description
The horizontal padding the Stepper.
$kendo-stepper-indicator-disabled-border$kendo-stepper-padding-y Null null null
Description
The border color of the disabled Stepper indicator.
+
Description
The vertical padding the Stepper.
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#f35800$kendo-stepper-label-margin-xNumber12px12px
Description
The background color of the Stepper's done indicator.
+
Description
The horizontal margin the Stepper label.
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white$kendo-stepper-label-padding-xNumber12px12px
Description
The text color of the Stepper's done indicator.
+
Description
The horizontal padding the Stepper label.
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#f35800$kendo-stepper-label-padding-yNumber5px5px
Description
The border color of the Stepper's done indicator.
+
Description
The vertical padding the Stepper label.
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#e05100$kendo-stepper-border-widthNumber0px0px
Description
The background color of the Stepper's hovered done indicator.
+
Description
The width of the border around the Stepper.
$kendo-stepper-indicator-done-hover-textNullnullnull$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The text color of the Stepper's hovered done indicator.
+
Description
The horizontal padding of the Stepper content.
$kendo-stepper-indicator-done-hover-borderNullnullnull$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The border color of the Stepper's hovered done indicator.
+
Description
The vertical padding of the Stepper content.
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% ))#f89b66$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white$kendo-stepper-line-heightNumber$kendo-line-height-md1.4285714286
Description
The text color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#f89b66$kendo-stepper-font-familyString$kendo-font-familyinherit
Description
The border color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#f35800$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper current indicator.
+
Description
The background color of the Stepper.
$kendo-stepper-indicator-current-text$kendo-stepper-text Color$kendo-stepper-indicator-done-textwhite$kendo-component-text#272727
Description
The text color of the Stepper current indicator.
+
Description
The text color of the Stepper.
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#f35800$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper current indicator.
+
Description
The border color of the Stepper.
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#e05100$kendo-stepper-indicator-widthNumber28px28px
Description
The background color of the Stepper's hovered current indicator.
+
Description
The width of the Stepper indicator.
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The text color of the Stepper's hovered current indicator.
+
Description
The height of the Stepper indicator.
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border color of the Stepper's hovered current indicator.
+
Description
The border width of the Stepper indicator.
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#f89b66$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The background color of the Stepper's disabled current indicator.
+
Description
The border radius of the Stepper indicator.
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The text color of the Stepper's disabled current indicator.
+
Description
The border width of the focused Stepper indicator.
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#f89b66$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The border color of the Stepper's disabled current indicator.
+
Description
The size of the focused Stepper indicator.
$kendo-stepper-label-textNullnullnull$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The text color of the Stepper label.
+
Description
The offset of the Stepper's focused indicator.
$kendo-stepper-label-success-textColor$kendo-color-success#3ea44e$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The success text color of the Stepper label.
+
Description
The calculated offset of the Stepper's focused indicator.
$kendo-stepper-label-error-text$kendo-stepper-indicator-bg Color$kendo-color-error#d92800$kendo-component-bg#ffffff
Description
The error text color of the Stepper label.
+
Description
The background color of the Stepper indicator.
$kendo-stepper-label-hover-textNullnullnull$kendo-stepper-indicator-textColor$kendo-component-text#272727
Description
The text color of the hovered Stepper label.
+
Description
The text color of the Stepper indicator.
$kendo-stepper-label-disabled-text$kendo-stepper-indicator-border Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d$kendo-component-border#cacaca
Description
The text color of the disabled Stepper label.
+
Description
The border color of the Stepper indicator.
$kendo-stepper-optional-label-text$kendo-stepper-indicator-hover-bg Color$kendo-subtle-text#646464if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The text color of the optional Stepper label.
+
Description
The background color of the hovered Stepper indicator.
$kendo-stepper-optional-label-opacity$kendo-stepper-indicator-hover-text Null null null
Description
The opacity of the optional Stepper label.
-
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the optional Stepper label.
+
Description
The text color of the hovered Stepper indicator.
$kendo-stepper-optional-label-font-style$kendo-stepper-indicator-hover-border Null null null
Description
The font style of the optional Stepper label.
-
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
Description
The border color of the hovered Stepper indicator.
$kendo-stepper-progressbar-bg$kendo-stepper-indicator-disabled-bg Null null null
Description
The background color of the Stepper ProgressBar.
+
Description
The background color of the disabled Stepper indicator.
$kendo-stepper-progressbar-textNullnullnull$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d
Description
The text color of the Stepper ProgressBar.
+
Description
The text color of the disabled Stepper indicator.
$kendo-stepper-progressbar-fill-bg$kendo-stepper-indicator-disabled-border Null null null
Description
The background color of the selected Stepper ProgressBar.
+
Description
The border color of the disabled Stepper indicator.
$kendo-stepper-progressbar-fill-textNullnullnull$kendo-stepper-indicator-done-bgColor$kendo-color-primary#f35800
Description
The text color of the selected Stepper ProgressBar.
+
Description
The background color of the Stepper's done indicator.
$kendo-stepper-content-transition-propertyStringheightheight$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The property name of the Stepper transition.
+
Description
The text color of the Stepper's done indicator.
$kendo-stepper-content-transition-durationNumber300ms300ms$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#f35800
Description
The duration of the Stepper transition.
+
Description
The border color of the Stepper's done indicator.
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#e05100
Description
The timing function of the Stepper transition.
+
Description
The background color of the Stepper's hovered done indicator.
- -### Switch - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - - - - + + + + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + +
NameTypeDefault valueComputed value
$kendo-switch-font-family
$kendo-stepper-indicator-done-hover-text Null null null
Description
The font family of the Switch.
+
Description
The text color of the Stepper's hovered done indicator.
$kendo-switch-track-border-widthNumber1px1px$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border width of the Switch track.
+
Description
The border color of the Stepper's hovered done indicator.
$kendo-switch-thumb-border-widthNumber1px1px$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% ))#f89b66
Description
The border width of the Switch thumb.
+
Description
The background color of the Stepper's disabled done indicator.
$kendo-switch-label-text-transformNullnullnull$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text transform of the Switch label.
+
Description
The text color of the Stepper's disabled done indicator.
$kendo-switch-label-displayStringinlineinline$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#f89b66
Description
The display of the Switch label.
+
Description
The border color of the Stepper's disabled done indicator.
$kendo-switch-sizesMap( - sm: ( font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px ), - md: ( font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px ), - lg: ( font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px ) -)(sm: (font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px), lg: (font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px))$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#f35800
Description
The map with the different Switch sizes.
+
Description
The background color of the Stepper current indicator.
$kendo-switch-off-track-bg$kendo-stepper-indicator-current-text Color$kendo-component-bg#ffffff$kendo-stepper-indicator-done-textwhite
Description
The background of the track when the Switch is not checked.
+
Description
The text color of the Stepper current indicator.
$kendo-switch-off-track-text$kendo-stepper-indicator-current-border Color$kendo-component-text#272727$kendo-stepper-indicator-done-border#f35800
Description
The text color of the track when the Switch is not checked.
+
Description
The border color of the Stepper current indicator.
$kendo-switch-off-track-border$kendo-stepper-indicator-current-hover-bg Color$kendo-component-border#cacaca$kendo-stepper-indicator-done-hover-bg#e05100
Description
The border color of the track when the Switch is not checked.
+
Description
The background color of the Stepper's hovered current indicator.
$kendo-switch-off-track-gradient$kendo-stepper-indicator-current-hover-text Nullnull$kendo-stepper-indicator-done-hover-text null
Description
The background gradient of the track when the Switch is not checked.
+
Description
The text color of the Stepper's hovered current indicator.
$kendo-switch-off-track-hover-bg$kendo-stepper-indicator-current-hover-border Nullnull$kendo-stepper-indicator-done-hover-border null
Description
The background of the track when the hovered Switch is not checked.
+
Description
The border color of the Stepper's hovered current indicator.
$kendo-switch-off-track-hover-textNullnullnull$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#f89b66
Description
The text color of the track when the hovered Switch is not checked.
+
Description
The background color of the Stepper's disabled current indicator.
$kendo-switch-off-track-hover-borderNullnullnull$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The border color of the track when the hovered Switch is not checked.
+
Description
The text color of the Stepper's disabled current indicator.
$kendo-switch-off-track-hover-gradientNullnullnull$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#f89b66
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
The border color of the Stepper's disabled current indicator.
$kendo-switch-off-track-focus-bg$kendo-stepper-label-text Null null null
Description
The background of the track when the focused Switch is not checked.
+
Description
The text color of the Stepper label.
$kendo-switch-off-track-focus-text$kendo-stepper-label-success-textColor$kendo-color-success#3ea44e
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#d92800
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-text Null null null
Description
The text color of the track when the focused Switch is not checked.
+
Description
The text color of the hovered Stepper label.
$kendo-switch-off-track-focus-border$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#646464
Description
The text color of the optional Stepper label.
+
$kendo-stepper-optional-label-opacity Null null null
Description
The border color of the track when the focused Switch is not checked.
+
Description
The opacity of the optional Stepper label.
$kendo-switch-off-track-focus-gradient$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the optional Stepper label.
+
$kendo-stepper-optional-label-font-style Null null null
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
The font style of the optional Stepper label.
$kendo-switch-off-track-focus-ringList0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )0 0 3px 1px rgba(0, 0, 0, 0.25)$kendo-stepper-progressbar-sizeNumber2px2px
Description
The ring around the track when the focused Switch is not checked.
+
Description
The size of the Stepper ProgressBar.
$kendo-switch-off-track-disabled-bg$kendo-stepper-progressbar-bg Null null null
Description
The background of the track when the disabled Switch is not checked.
+
Description
The background color of the Stepper ProgressBar.
$kendo-switch-off-track-disabled-text$kendo-stepper-progressbar-text Null null null
Description
The text color of the track when the disabled Switch is not checked.
+
Description
The text color of the Stepper ProgressBar.
$kendo-switch-off-track-disabled-border$kendo-stepper-progressbar-fill-bg Null null null
Description
The border color of the track when the disabled Switch is not checked.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-switch-off-track-disabled-gradient$kendo-stepper-progressbar-fill-text Null null null
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-switch-off-thumb-bgColorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))#ebebeb$kendo-stepper-content-transition-propertyStringheightheight
Description
The background of the thumb when the Switch is not checked.
+
Description
The property name of the Stepper transition.
$kendo-switch-off-thumb-textNullnullnull$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The text color of the thumb when the Switch is not checked.
+
Description
The duration of the Stepper transition.
$kendo-switch-off-thumb-borderColor$kendo-switch-off-track-border#cacaca$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The border color of the thumb when the Switch is not checked.
+
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -18062,667 +18432,1187 @@ The following table lists the available variables for customizing the Classic th - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - + - - + + - - + - - - - - - - - - - - + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
$kendo-switch-off-thumb-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-switch-track-border-widthNumber1px1px
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
The border width of the Switch track.
$kendo-switch-off-thumb-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))#d8d8d8$kendo-switch-thumb-border-widthNumber1px1px
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
The border width of the Switch thumb.
$kendo-switch-off-thumb-hover-text$kendo-switch-label-text-transform Null null null
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
The text transform of the Switch label.
$kendo-switch-off-thumb-hover-borderColor$kendo-switch-off-thumb-border#cacaca$kendo-switch-label-displayStringinlineinline
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
The display of the Switch label.
$kendo-switch-off-thumb-hover-gradientNullnullnull$kendo-switch-sizesMap( + sm: ( font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px ), + md: ( font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px ), + lg: ( font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px ) +)(sm: (font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px), lg: (font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px))
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
The map with the different Switch sizes.
$kendo-switch-on-track-bg$kendo-switch-off-track-bg Color $kendo-component-bg #ffffff
Description
The background of the track when the Switch is checked.
+
Description
The background of the track when the Switch is not checked.
$kendo-switch-on-track-text$kendo-switch-off-track-text Color$kendo-color-primary#f35800$kendo-component-text#272727
Description
The text color of the track when the Switch is checked.
+
Description
The text color of the track when the Switch is not checked.
$kendo-switch-on-track-border$kendo-switch-off-track-border Color $kendo-component-border #cacaca
Description
The border color of the track when the Switch is checked.
+
Description
The border color of the track when the Switch is not checked.
$kendo-switch-on-track-gradient$kendo-switch-off-track-gradient Null null null
Description
The background gradient of the track when the Switch is checked.
+
Description
The background gradient of the track when the Switch is not checked.
$kendo-switch-on-track-hover-bg$kendo-switch-off-track-hover-bg Null null null
Description
The background of the track wen the hovered Switch is checked.
+
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-on-track-hover-text$kendo-switch-off-track-hover-text Null null null
Description
The text color of the track wen the hovered Switch is checked.
+
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-on-track-hover-border$kendo-switch-off-track-hover-border Null null null
Description
The border color of the track wen the hovered Switch is checked.
+
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-on-track-hover-gradient$kendo-switch-off-track-hover-gradient Null null null
Description
The background gradient of the track wen the hovered Switch is checked.
+
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-on-track-focus-bg$kendo-switch-off-track-focus-bg Null null null
Description
The background of the track wen the focused Switch is checked.
+
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-text$kendo-switch-off-track-focus-text Null null null
Description
The text color of the track wen the focused Switch is checked.
+
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-border$kendo-switch-off-track-focus-border Null null null
Description
The border color of the track wen the focused Switch is checked.
+
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-gradient$kendo-switch-off-track-focus-gradient Null null null
Description
The background gradient of the track wen the focused Switch is checked.
+
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-ring$kendo-switch-off-track-focus-ring List 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) 0 0 3px 1px rgba(0, 0, 0, 0.25)
Description
The ring around the track wen the focused Switch is checked.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-switch-on-track-disabled-bg$kendo-switch-off-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is not checked.
+
$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is not checked.
+
$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is not checked.
+
$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is not checked.
+
$kendo-switch-off-thumb-bgColorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))#ebebeb
Description
The background of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-textNullnullnull
Description
The text color of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-borderColor$kendo-switch-off-track-border#cacaca
Description
The border color of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The background gradient of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))#d8d8d8
Description
The background of the thumb when the hovered Switch is not checked.
+
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is not checked.
+
$kendo-switch-off-thumb-hover-borderColor$kendo-switch-off-thumb-border#cacaca
Description
The border color of the thumb when the hovered Switch is not checked.
+
$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
$kendo-switch-on-track-bgColor$kendo-component-bg#ffffff
Description
The background of the track when the Switch is checked.
+
$kendo-switch-on-track-textColor$kendo-color-primary#f35800
Description
The text color of the track when the Switch is checked.
+
$kendo-switch-on-track-borderColor$kendo-component-border#cacaca
Description
The border color of the track when the Switch is checked.
+
$kendo-switch-on-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is checked.
+
$kendo-switch-on-track-hover-bgNullnullnull
Description
The background of the track wen the hovered Switch is checked.
+
$kendo-switch-on-track-hover-textNullnullnull
Description
The text color of the track wen the hovered Switch is checked.
+
$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the track wen the hovered Switch is checked.
+
$kendo-switch-on-track-hover-gradientNullnullnull
Description
The background gradient of the track wen the hovered Switch is checked.
+
$kendo-switch-on-track-focus-bgNullnullnull
Description
The background of the track wen the focused Switch is checked.
+
$kendo-switch-on-track-focus-textNullnullnull
Description
The text color of the track wen the focused Switch is checked.
+
$kendo-switch-on-track-focus-borderNullnullnull
Description
The border color of the track wen the focused Switch is checked.
+
$kendo-switch-on-track-focus-gradientNullnullnull
Description
The background gradient of the track wen the focused Switch is checked.
+
$kendo-switch-on-track-focus-ringList0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )0 0 3px 1px rgba(0, 0, 0, 0.25)
Description
The ring around the track wen the focused Switch is checked.
+
$kendo-switch-on-track-disabled-bg Null null null16px
Description
The spacing of the TaskBoard columns container.
+
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
+
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the TaskBoard column.
+
$kendo-taskboard-column-bgColor$kendo-base-bg#f0f0f0
Description
The background color of the TaskBoard column.
+
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
+
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
+
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#a2a2a2
Description
The border color of the focused TaskBoard column.
+
$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
The horizontal padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
The spacing of the TaskBoard column header.
+
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column header actions.
+
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-textColor$kendo-component-header-text#272727
Description
The text color of the TaskBoard column header.
+
$kendo-taskboard-column-cards-padding-yNullnullnull
Description
The vertical padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column Card wrapper.
+
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
+
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
+
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
+
$kendo-taskboard-pane-textColor$kendo-component-text#272727
Description
The text color of the TaskBoard pane.
+
$kendo-taskboard-pane-borderColor$kendo-component-border#cacaca
Description
The border color of the TaskBoard pane.
+
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-text#272727
Description
The text color of the TaskBoard pane header.
+
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane actions.
+
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane actions.
+
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard Card.
+
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y16px
Description
The horizontal padding of the TaskBoard Card.
+
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the TaskBoard Card.
+
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius8px
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
+
$kendo-taskboard-card-textColor$kendo-card-text#272727
Description
The text color of the TaskBoard Card.
+
$kendo-taskboard-card-borderColor$kendo-card-border#cacaca
Description
The border color of the TaskBoard Card.
+
$kendo-taskboard-card-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the TaskBoard Card.
+
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
+
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#b6b6b6
Description
The border color of the hovered TaskBoard Card.
+
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#a6a6a6
Description
The border color of the focused TaskBoard Card.
+
$kendo-taskboard-card-focus-shadowStringnonenone
Description
The shadow of the focused TaskBoard Card.
+
$kendo-taskboard-card-selected-borderColork-color-tint( $kendo-color-primary-lighter, 5 )#f9ab7f
Description
The border of the selected TaskBoard Card.
+
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#f35800
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#cc4a00
Description
The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-column-widthNumber320px320px$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#cc4a00
Description
The default width of the TaskBoard column.
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-taskboard-column-border-width$kendo-taskboard-drag-placeholder-border-width Number 1px 1px
Description
The border width of the TaskBoard column.
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-column-border-radius$kendo-taskboard-drag-placeholder-border-radius Number$kendo-border-radius-md4px$kendo-taskboard-card-border-radius8px
Description
The border radius of the TaskBoard column.
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-column-bg$kendo-taskboard-drag-placeholder-bg Color$kendo-base-bg#f0f0f0
Description
The background color of the TaskBoard column.
-
$kendo-taskboard-column-textNullnullnullrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The text color of the TaskBoard column.
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-column-border$kendo-taskboard-drag-placeholder-border Colortransparenttransparent$kendo-component-border#cacaca
Description
The border color of the TaskBoard column.
+
Description
The border color of the TaskBoard Card placeholder.
$kendo-taskboard-column-focus-bgNullnullnull
+ +### Tilelayout + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The background color of the focused TaskBoard column.
+
Description
The width of the border around the TileLayout.
$kendo-taskboard-column-focus-textNullnullnull$kendo-tile-layout-bgColor$kendo-base-bg#f0f0f0
Description
The text color of the focused TaskBoard column.
+
Description
The background color of the TileLayout.
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#a2a2a2$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the focused TaskBoard column.
+
Description
The horizontal padding of the TileLayout.
$kendo-taskboard-column-header-padding-y$kendo-tile-layout-padding-y Numberk-math-div( $kendo-taskboard-spacer, 2 )8px$kendo-tile-layout-padding-x16px
Description
The vertical padding of the TaskBoard column header.
+
Description
The vertical padding of the TileLayout
$kendo-taskboard-column-header-padding-x$kendo-tile-layout-card-border-width Number$kendo-taskboard-column-header-padding-y8px$kendo-card-border-width1px
Description
The horizontal padding of the TaskBoard column header.
+
Description
The width of the border around the TileLayout card.
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The spacing of the TaskBoard column header.
+
Description
The focus box shadow of the TileLayout card.
$kendo-taskboard-column-header-actions-gap$kendo-tile-layout-hint-border-width Numberk-math-div( $kendo-taskboard-spacer, 2 )8px1px1px
Description
The spacing of the TaskBoard column header actions.
+
Description
The width of the border around the TileLayout hint.
$kendo-taskboard-column-header-font-weight$kendo-tile-layout-hint-border-radius Number500500$kendo-border-radius-lg8px
Description
The font weight of the TaskBoard column header.
+
Description
The radius of the border around the TileLayout hint.
$kendo-taskboard-column-header-text$kendo-tile-layout-hint-border Color$kendo-component-header-text#272727$kendo-component-border#cacaca
Description
The text color of the TaskBoard column header.
+
Description
The color of the border around the TileLayout hint.
$kendo-taskboard-column-cards-padding-yNullnullnull$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The vertical padding of the TaskBoard column Card wrapper.
+
Description
The background color of the TileLayout hint.
$kendo-taskboard-column-cards-padding-xNullnullnull
+ +### Timeline + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - + + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-timeline-spacing-xNumber40px40px
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
Description
The horizontal spacing of the Timeline.
$kendo-taskboard-column-cards-gap$kendo-timeline-spacing-y Numberk-math-div( $kendo-taskboard-spacer, 2 )8px40px40px
Description
The spacing of the TaskBoard column Card wrapper.
+
Description
The vertical spacing of the Timeline.
$kendo-taskboard-pane-width$kendo-timeline-items-padding Number$kendo-taskboard-column-width320px16px16px
Description
The default width of the TaskBoard pane.
+
Description
The padding between the Timeline's track items.
$kendo-taskboard-pane-padding-yNullnullnull$kendo-timeline-font-familyString$kendo-font-familyinherit
Description
The vertical padding of the TaskBoard pane.
+
Description
The font family of the Timeline.
$kendo-taskboard-pane-padding-xNullnullnull$kendo-timeline-font-sizeNumber$kendo-font-size-md14px
Description
The horizontal padding of the TaskBoard pane.
+
Description
The font size of the Timeline.
$kendo-taskboard-pane-border-width$kendo-timeline-line-height Number1px1px$kendo-line-height-md1.4285714286
Description
The border width of the TaskBoard pane.
+
Description
The line height of the Timeline.
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff$kendo-timeline-mobile-spacing-xNumber16px16px
Description
The background color of the TaskBoard pane.
+
Description
The horizontal spacing of the mobile Timeline.
$kendo-taskboard-pane-textColor$kendo-component-text#272727$kendo-timeline-mobile-spacing-yNumber16px16px
Description
The text color of the TaskBoard pane.
+
Description
The vertical spacing of the mobile Timeline.
$kendo-taskboard-pane-borderColor$kendo-component-border#cacaca$kendo-timeline-track-arrow-widthNumber30px30px
Description
The border color of the TaskBoard pane.
+
Description
The width of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-y$kendo-timeline-track-arrow-height Number( $kendo-taskboard-spacer * .75 )12px30px30px
Description
The vertical padding of the TaskBoard pane header.
+
Description
The height of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))whitesmoke
Description
The horizontal padding of the TaskBoard pane header.
+
Description
The background color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-font-weightNumber500500$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))#737373
Description
The font weight of the TaskBoard pane header.
+
Description
The text color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-text$kendo-timeline-track-arrow-disabled-border Color$kendo-component-header-text#272727if($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( #000000, $kendo-body-bg, 4.8% ))#f3f3f3
Description
The text color of the TaskBoard pane header.
+
Description
The border color of the disabled Timeline track arrow.
$kendo-taskboard-pane-content-padding-y$kendo-timeline-track-size Number0px0px6px6px
Description
The vertical padding of the TaskBoard pane content.
+
Description
The size of the Timeline track.
$kendo-taskboard-pane-content-padding-x$kendo-timeline-track-wrap-padding-bottom Number$kendo-taskboard-spacer16pxk-math-div( $kendo-timeline-track-size, 2 )3px
Description
The horizontal padding of the TaskBoard pane content.
+
Description
The bottom padding of the Timeline's track wrapper.
$kendo-taskboard-pane-actions-padding-y$kendo-timeline-track-border-width Number( $kendo-taskboard-spacer * .75 )12px1px1px
Description
The vertical padding of the TaskBoard pane actions.
+
Description
The border width of the Timeline track.
$kendo-taskboard-pane-actions-padding-x$kendo-timeline-track-margin-bottom Number$kendo-taskboard-spacer16px 16px
Description
The horizontal padding of the TaskBoard pane actions.
+
Description
The bottom margin of the Timeline track.
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer16px$kendo-timeline-track-bottom-calcCalculationcalc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})calc(15px + 3px)
Description
The vertical padding of the TaskBoard Card.
+
Description
The bottom offset of the Timeline track.
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y16px$kendo-timeline-track-start-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(30px - 2 * 1px)
Description
The horizontal padding of the TaskBoard Card.
+
Description
The left offset of the Timeline track.
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px$kendo-timeline-track-end-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(30px - 2 * 1px)
Description
The border width of the TaskBoard Card.
+
Description
The right offset of the Timeline track.
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius8px$kendo-timeline-track-bgColor$kendo-button-bg#f0f0f0
Description
The border radius of the TaskBoard Card.
+
Description
The background color of the Timeline track.
$kendo-taskboard-card-bg$kendo-timeline-track-border-color Color$kendo-card-bg#ffffff$kendo-button-border#cacaca
Description
The background color of the TaskBoard Card.
+
Description
The border color of the Timeline track.
$kendo-taskboard-card-textColor$kendo-card-text#272727$kendo-timeline-track-item-focus-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the TaskBoard Card.
+
Description
The shadow of the Timeline's focused track items.
$kendo-taskboard-card-borderColor$kendo-card-border#cacaca$kendo-timeline-track-event-offsetNumber36px36px
Description
The border color of the TaskBoard Card.
+
Description
The offset of the Timeline track event.
$kendo-taskboard-card-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x8px
Description
The shadow of the TaskBoard Card.
+
Description
The horizontal padding of the Timeline flag.
$kendo-taskboard-card-category-border-width$kendo-timeline-flag-padding-y Number4px$kendo-button-padding-y 4px
Description
The border width of the TaskBoard Card category.
+
Description
The vertical padding of the Timeline flag.
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#b6b6b6$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.4285714286
Description
The border color of the hovered TaskBoard Card.
+
Description
The line height of the Timeline flag.
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#a6a6a6$kendo-timeline-flag-min-widthNumber80px80px
Description
The border color of the focused TaskBoard Card.
+
Description
The minimum width of the Timeline flag.
$kendo-taskboard-card-focus-shadowStringnonenone$kendo-timeline-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})calc(80px + 2 * 40px)
Description
The shadow of the focused TaskBoard Card.
+
Description
The maximum width of the Timeline flag.
$kendo-taskboard-card-selected-borderColork-color-tint( $kendo-color-primary-lighter, 5 )#f9ab7f$kendo-timeline-mobile-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})calc(80px + 2 * 16px)
Description
The border of the selected TaskBoard Card.
+
Description
The maximum width of the mobile Timeline flag.
$kendo-taskboard-card-selected-shadowStringnonenone$kendo-timeline-horizontal-flag-min-widthNumber60px60px
Description
The shadow of the selected TaskBoard Card.
+
Description
The minimum width of the horizontal Timeline flag.
$kendo-taskboard-card-header-text$kendo-timeline-flag-bg Color $kendo-color-primary #f35800
Description
The text color of the TaskBoard Card header text.
+
Description
The background color of the Timeline flag.
$kendo-taskboard-card-header-focus-text$kendo-timeline-flag-text Color$kendo-color-primary-darker#cc4a00if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg ))white
Description
The text color of the hovered TaskBoard Card header text.
+
Description
The text color of the Timeline flag.
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#cc4a00$kendo-timeline-flag-callout-widthNumber10px10px
Description
The text color of the focused TaskBoard Card header text.
+
Description
The width of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-width$kendo-timeline-flag-callout-height Number1px1px10px10px
Description
The border width of the TaskBoard Card placeholder.
+
Description
The height of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-radius$kendo-timeline-flag-offset-bottom Number$kendo-taskboard-card-border-radius8px4px4px
Description
The border radius of the TaskBoard Card placeholder.
+
Description
The bottom offset of the Timeline flag.
$kendo-taskboard-drag-placeholder-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)$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 background color of the TaskBoard Card placeholder.
+
Description
The bottom margin of the Timeline flag.
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-border#cacaca$kendo-timeline-date-widthNumber50px50px
Description
The border color of the TaskBoard Card placeholder.
+
Description
The width of the Timeline date.
- -### Tilelayout - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - diff --git a/packages/default/docs/customization-slider.md b/packages/default/docs/customization-slider.md new file mode 100644 index 00000000000..b372a162aeb --- /dev/null +++ b/packages/default/docs/customization-slider.md @@ -0,0 +1,388 @@ +--- +title: Customizing Slider +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_slider +position: 9 +--- + +# Customizing Slider + +## Variables + +The following table lists the available variables for customization. + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-width
$kendo-timeline-date-margin-bottom Number0px0px8px8px
Description
The width of the border around the TileLayout.
+
Description
The bottom margin of the Timeline date.
$kendo-tile-layout-bgColor$kendo-base-bg#f0f0f0$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 background color of the TileLayout.
+
Description
The padding of the vertical Timeline.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$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 horizontal padding of the TileLayout.
+
Description
The padding of the vertical Timeline date.
$kendo-tile-layout-padding-y$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-width Number$kendo-tile-layout-padding-x16px 16px
Description
The vertical padding of the TileLayout
+
Description
The width of the Timeline circle.
$kendo-tile-layout-card-border-width$kendo-timeline-circle-height Number$kendo-card-border-width1px16px16px
Description
The width of the border around the TileLayout card.
+
Description
The height of the Timeline circle.
$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-timeline-circle-bgColor$kendo-color-primary#f35800
Description
The focus box shadow of the TileLayout card.
+
Description
The background color of the Timeline circle.
$kendo-tile-layout-hint-border-width$kendo-timeline-collapse-arrow-padding-x Number1px1px$kendo-padding-md-x8px
Description
The width of the border around the TileLayout hint.
+
Description
The horizontal padding of the Timeline collapse arrow.
$kendo-tile-layout-hint-border-radius$kendo-timeline-event-width Number$kendo-border-radius-lg8px400px400px
Description
The radius of the border around the TileLayout hint.
+
Description
The width of the Timeline event.
$kendo-tile-layout-hint-borderColor$kendo-component-border#cacaca$kendo-timeline-event-heightNumber600px600px
Description
The color of the border around the TileLayout hint.
+
Description
The height of the Timeline event.
$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)$kendo-timeline-event-min-height-calcCalculationcalc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))calc(2 * (36px - 1px))
Description
The background color of the TileLayout hint.
+
Description
The minimum height of the Timeline event.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-slider-sizeNumber200px200px
Description
The default size of the Slider.
+
$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
+
$kendo-slider-alt-sizeNumber30px30px
Description
The default size of the Slider's track wrap.
+
$kendo-slider-font-familyString$kendo-font-familyinherit
Description
The font family of the Slider.
+
$kendo-slider-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Slider.
+
$kendo-slider-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Slider.
+
$kendo-slider-button-offsetNumber10px10px
Description
The offset of the Slider Buttons.
+
$kendo-slider-button-sizeNumber($kendo-slider-alt-size - 2)28px
Description
The size of the Slider Buttons.
+
$kendo-slider-button-spacingNumber($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The spacing of the Slider Buttons.
+
$kendo-slider-button-focus-shadowNullnullnull
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thicknessNumber4px4px
Description
The thickness of the Slider track.
+
$kendo-slider-draghandle-sizeNumber14px14px
Description
The size of the Slider drag handle.
+
$kendo-slider-draghandle-border-widthNumber1px1px
Description
The border width of the Slider drag handle.
+
$kendo-slider-draghandle-active-scaleNumber11
Description
The transition scale of the active Slider drag handle.
+
$kendo-slider-draghandle-active-sizeNullnullnull
Description
The size of the active Slider drag handle.
+
$kendo-slider-draghandle-bgColor$kendo-color-primary#ff6358
Description
The background color of the Slider drag handle.
+
$kendo-slider-draghandle-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))white
Description
The text color of the Slider drag handle.
+
$kendo-slider-draghandle-borderColor$kendo-color-primary#ff6358
Description
The border color of the Slider drag handle.
+
$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 ))#f55f54
Description
The background color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-textNullnullnull
Description
The text color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-borderColor$kendo-color-primary#ff6358
Description
The border color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The gradient of the hovered Slider drag handle.
+
$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))#e0574d
Description
The background color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-textNullnullnull
Description
The text color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))#e0574d
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 ))0 0 0 2px rgba(255, 99, 88, 0.3)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the Slider.
+
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function of the Slider.
+
$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The transition speed of the Slider drag handle.
+
$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The transition function of the Slider drag handle.
+
$kendo-slider-track-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb
Description
The background color of the Slider track.
+
$kendo-slider-selection-bgColor$kendo-color-primary#ff6358
Description
The background color of the Slider's track selection.
+
$kendo-slider-disabled-opacityNullnullnull
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-timeline.md b/packages/default/docs/customization-timeline.md new file mode 100644 index 00000000000..79dd63604d3 --- /dev/null +++ b/packages/default/docs/customization-timeline.md @@ -0,0 +1,538 @@ +--- +title: Customizing Timeline +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_timeline +position: 9 +--- + +# 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-paddingNumber16px16px
Description
The padding between the Timeline's track items.
+
$kendo-timeline-font-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the Timeline.
+
$kendo-timeline-mobile-spacing-xNumber16px16px
Description
The horizontal spacing of the mobile Timeline.
+
$kendo-timeline-mobile-spacing-yNumber16px16px
Description
The vertical spacing of the mobile Timeline.
+
$kendo-timeline-track-arrow-widthNumber30px30px
Description
The width of the Timeline track arrow.
+
$kendo-timeline-track-arrow-heightNumber30px30px
Description
The height of the Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .6 ), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%))#f9f9f9
Description
The background color of the disabled Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))#848484
Description
The text color of the disabled Timeline track arrow.
+
$kendo-timeline-track-arrow-disabled-borderColorif($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%))#f3f3f3
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-bottomNumber16px16px
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(15px + 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(30px - 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(30px - 2 * 1px)
Description
The right offset of the Timeline track.
+
$kendo-timeline-track-bgColor$kendo-button-bg#f5f5f5
Description
The background color of the Timeline track.
+
$kendo-timeline-track-border-colorColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Timeline track.
+
$kendo-timeline-track-item-focus-shadowStringk-elevation(2)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-offsetNumber36px36px
Description
The offset of the Timeline track event.
+
$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x8px
Description
The horizontal padding of the Timeline flag.
+
$kendo-timeline-flag-padding-yNumber$kendo-button-padding-y4px
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#ff6358
Description
The background color of the Timeline flag.
+
$kendo-timeline-flag-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $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#ff6358
Description
The background color of the Timeline circle.
+
$kendo-timeline-collapse-arrow-padding-xNumber$kendo-padding-md-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 - 1px))
Description
The minimum height of the Timeline event.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index d9e84af9df5..b707fadc494 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -15785,7 +15785,7 @@ The following table lists the available variables for customizing the Default th -### Split-button +### Slider @@ -15803,309 +15803,359 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - + + + + + + + + + + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - + - - + - - + + - - -
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-slider-sizeNumber200px200px
Description
The focus shadow of the SplitButton.
+
Description
The default size of the Slider.
$kendo-split-button-arrow-padding-x$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
+
$kendo-slider-alt-size Number$kendo-button-padding-y4px30px30px
Description
The horizontal padding of the arrow Button.
+
Description
The default size of the Slider's track wrap.
$kendo-split-button-sm-arrow-padding-x$kendo-slider-font-familyString$kendo-font-familyinherit
Description
The font family of the Slider.
+
$kendo-slider-font-size Number$kendo-button-sm-padding-y2px$kendo-font-size-md14px
Description
The horizontal padding of the small arrow Button.
+
Description
The font size of the Slider.
$kendo-split-button-md-arrow-padding-x$kendo-slider-line-height Number$kendo-button-md-padding-y4px$kendo-line-height-md1.4285714286
Description
The horizontal padding of the medium arrow Button.
+
Description
The line height of the Slider.
$kendo-split-button-lg-arrow-padding-x$kendo-slider-button-offset Number$kendo-button-lg-padding-y8px10px10px
Description
The horizontal padding of the large arrow Button.
+
Description
The offset of the Slider Buttons.
$kendo-split-button-arrow-padding-y$kendo-slider-button-size Number$kendo-button-padding-y4px($kendo-slider-alt-size - 2)28px
Description
The vertical padding of the arrow Button.
+
Description
The size of the Slider Buttons.
$kendo-split-button-sm-arrow-padding-y$kendo-slider-button-spacing Number$kendo-button-sm-padding-y2px($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The vertical padding of the small arrow Button.
+
Description
The spacing of the Slider Buttons.
$kendo-split-button-md-arrow-padding-y$kendo-slider-button-focus-shadowNullnullnull
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thickness Number$kendo-button-md-padding-y4px 4px
Description
The vertical padding of the medium arrow Button.
+
Description
The thickness of the Slider track.
$kendo-split-button-lg-arrow-padding-y$kendo-slider-draghandle-size Number$kendo-button-lg-padding-y8px14px14px
Description
The vertical padding of the large arrow Button.
+
Description
The size of the Slider drag handle.
- -### Splitter - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-splitter-border-width
$kendo-slider-draghandle-border-width Number 1px 1px
Description
The width of the border around the Splitter.
+
Description
The border width of the Slider drag handle.
$kendo-splitter-font-familyString$kendo-font-familyinherit$kendo-slider-draghandle-active-scaleNumber11
Description
The font family of the Splitter.
+
Description
The transition scale of the active Slider drag handle.
$kendo-splitter-font-sizeNumber$kendo-font-size-md14px$kendo-slider-draghandle-active-sizeNullnullnull
Description
The font size of the Splitter.
+
Description
The size of the active Slider drag handle.
$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286$kendo-slider-draghandle-bgColor$kendo-color-primary#ff6358
Description
The line height of the Splitter.
+
Description
The background color of the Slider drag handle.
$kendo-splitter-bg$kendo-slider-draghandle-text Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))white
Description
The background color of the Splitter.
+
Description
The text color of the Slider drag handle.
$kendo-splitter-text$kendo-slider-draghandle-border Color$kendo-component-text#424242$kendo-color-primary#ff6358
Description
The text color of the Splitter.
+
Description
The border color of the Slider drag handle.
$kendo-splitter-border$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bg Color$kendo-component-borderrgba(0, 0, 0, 0.08)if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 ))#f55f54
Description
The border color of the Splitter.
+
Description
The background color of the hovered Slider drag handle.
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px$kendo-slider-draghandle-hover-textNullnullnull
Description
The size of the Splitter split bar.
+
Description
The text color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-lengthNumber20px20px$kendo-slider-draghandle-hover-borderColor$kendo-color-primary#ff6358
Description
The length of the Splitter drag handle.
+
Description
The border color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-thicknessNumber2px2px$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The thickness of the Splitter drag handle.
+
Description
The gradient of the hovered Slider drag handle.
$kendo-splitter-drag-icon-marginNumber7px7px$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))#e0574d
Description
The margin of the Splitter drag handle icon.
+
Description
The background color of the active Slider drag handle.
$kendo-splitter-collapse-icon-padding-x$kendo-slider-draghandle-pressed-text Null null null
Description
The horizontal padding of the collapse icon in the Splitter.
+
Description
The text color of the active Slider drag handle.
$kendo-splitter-collapse-icon-padding-y$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))#e0574d
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 ))0 0 0 2px rgba(255, 99, 88, 0.3)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speed Numberk-map-get( $kendo-spacing, .5 )2px.3s0.3s
Description
The vertical padding of the collapse icon in the Splitter.
+
Description
The transition speed of the Slider.
$kendo-splitbar-bgColor$kendo-base-bg#fafafa$kendo-slider-transition-functionStringease-outease-out
Description
The background color of the Splitter split bar.
+
Description
The transition function of the Slider.
$kendo-splitbar-textColor$kendo-base-text#424242$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The text color of the Splitter split bar.
+
Description
The transition speed of the Slider drag handle.
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#f0f0f0$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The hover background color of the Splitter split bar.
+
Description
The transition function of the Slider drag handle.
$kendo-splitbar-hover-text$kendo-slider-track-bg Color$kendo-splitbar-text#424242if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb
Description
The hover text color of the Splitter split bar.
+
Description
The background color of the Slider track.
$kendo-splitbar-selected-bg$kendo-slider-selection-bg Color$kendo-selected-bg$kendo-color-primary #ff6358
Description
The selected background color of the Splitter split bar.
+
Description
The background color of the Slider's track selection.
$kendo-splitbar-selected-textColor$kendo-selected-textwhite$kendo-slider-disabled-opacityNullnullnull
Description
The selected text color of the Splitter split bar.
+
-### Stepper +### Split-button @@ -16123,2826 +16173,3666 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - + +
$kendo-stepper-margin-xNullnullnull$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The horizontal margin the Stepper.
+
Description
The focus shadow of the SplitButton.
$kendo-stepper-margin-yNullnullnull$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y4px
Description
The vertical margin the Stepper.
+
Description
The horizontal padding of the arrow Button.
$kendo-stepper-padding-xNullnullnull$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y2px
Description
The horizontal padding the Stepper.
+
Description
The horizontal padding of the small arrow Button.
$kendo-stepper-padding-yNullnullnull$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y4px
Description
The vertical padding the Stepper.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-stepper-label-margin-x$kendo-split-button-lg-arrow-padding-x Number12px12px$kendo-button-lg-padding-y8px
Description
The horizontal margin the Stepper label.
+
Description
The horizontal padding of the large arrow Button.
$kendo-stepper-label-padding-x$kendo-split-button-arrow-padding-y Number12px12px$kendo-button-padding-y4px
Description
The horizontal padding the Stepper label.
+
Description
The vertical padding of the arrow Button.
$kendo-stepper-label-padding-y$kendo-split-button-sm-arrow-padding-y Number5px5px$kendo-button-sm-padding-y2px
Description
The vertical padding the Stepper label.
+
Description
The vertical padding of the small arrow Button.
$kendo-stepper-border-width$kendo-split-button-md-arrow-padding-y Number0px0px$kendo-button-md-padding-y4px
Description
The width of the border around the Stepper.
+
Description
The vertical padding of the medium arrow Button.
$kendo-stepper-inline-content-padding-x$kendo-split-button-lg-arrow-padding-y Number20px20px$kendo-button-lg-padding-y8px
Description
The horizontal padding of the Stepper content.
+
Description
The vertical padding of the large arrow Button.
$kendo-stepper-inline-content-padding-y
+ +### Splitter + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + - - + + - + + +
NameTypeDefault valueComputed value
$kendo-splitter-border-width Number10px10px1px1px
Description
The vertical padding of the Stepper content.
+
Description
The width of the border around the Splitter.
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px$kendo-splitter-font-familyString$kendo-font-familyinherit
+
Description
The font family of the Splitter.
$kendo-stepper-line-height$kendo-splitter-font-size Number$kendo-line-height-md1.4285714286$kendo-font-size-md14px
+
Description
The font size of the Splitter.
$kendo-stepper-font-familyString$kendo-font-familyinherit$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286
+
Description
The line height of the Splitter.
$kendo-stepper-bgNullnullnull$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper.
+
Description
The background color of the Splitter.
$kendo-stepper-text$kendo-splitter-text Color $kendo-component-text #424242
Description
The text color of the Stepper.
+
Description
The text color of the Splitter.
$kendo-stepper-borderNullnullnull$kendo-splitter-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Stepper.
+
Description
The border color of the Splitter.
$kendo-stepper-indicator-width$kendo-splitter-splitbar-size Number28px28pxk-map-get( $kendo-spacing, 3 )12px
Description
The width of the Stepper indicator.
+
Description
The size of the Splitter split bar.
$kendo-stepper-indicator-height$kendo-splitter-drag-handle-length Number$kendo-stepper-indicator-width28px20px20px
Description
The height of the Stepper indicator.
+
Description
The length of the Splitter drag handle.
$kendo-stepper-indicator-border-width$kendo-splitter-drag-handle-thickness Number1px1px2px2px
Description
The border width of the Stepper indicator.
+
Description
The thickness of the Splitter drag handle.
$kendo-stepper-indicator-border-radius$kendo-splitter-drag-icon-margin Number50%50%7px7px
Description
The border radius of the Stepper indicator.
+
Description
The margin of the Splitter drag handle icon.
$kendo-stepper-indicator-focus-border-widthNumber1px1px$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The border width of the focused Stepper indicator.
+
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-size$kendo-splitter-collapse-icon-padding-y Number2pxk-map-get( $kendo-spacing, .5 ) 2px
Description
The size of the focused Stepper indicator.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-offsetNumber3px3px$kendo-splitbar-bgColor$kendo-base-bg#fafafa
Description
The offset of the Stepper's focused indicator.
+
Description
The background color of the Splitter split bar.
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)$kendo-splitbar-textColor$kendo-base-text#424242
Description
The calculated offset of the Stepper's focused indicator.
+
Description
The text color of the Splitter split bar.
$kendo-stepper-indicator-bg$kendo-splitbar-hover-bg Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#f0f0f0
Description
The background color of the Stepper indicator.
+
Description
The hover background color of the Splitter split bar.
$kendo-stepper-indicator-text$kendo-splitbar-hover-text Color$kendo-component-text$kendo-splitbar-text #424242
Description
The text color of the Stepper indicator.
+
Description
The hover text color of the Splitter split bar.
$kendo-stepper-indicator-border$kendo-splitbar-selected-bg Color#cccccc#cccccc$kendo-selected-bg#ff6358
Description
The border color of the Stepper indicator.
+
Description
The selected background color of the Splitter split bar.
$kendo-stepper-indicator-hover-bg$kendo-splitbar-selected-text Colorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb$kendo-selected-textwhite
Description
The background color of the hovered Stepper indicator.
+
Description
The selected text color of the Splitter split bar.
+
+ +### Stepper + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - + + + + + + - + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding of the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding of the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
+
$kendo-stepper-line-heightNumber$kendo-line-height-md1.4285714286
+
$kendo-stepper-font-familyString$kendo-font-familyinherit
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-text#424242
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper's focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the Stepper's focused indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-text#424242
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor#cccccc#cccccc
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#ff6358
Description
The background color of the Stepper's done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper's done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#ff6358
Description
The border color of the Stepper's done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#eb5b51
Description
The background color of the Stepper's hovered done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the Stepper's hovered done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the Stepper's hovered done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#ffa19b
Description
The background color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#ffa19b
Description
The border color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#ff6358
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#ff6358
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#eb5b51
Description
The background color of the Stepper's hovered current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the Stepper's hovered current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the Stepper's hovered current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#ffa19b
Description
The background color of the Stepper's disabled current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the Stepper's disabled current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#ffa19b
Description
The border color of the Stepper's disabled current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#37b400
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#f31700
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textColorif($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 ))#373737
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#666666
Description
The text color of the optional Stepper label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the optional Stepper label.
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+ 		$kendo-stepper-optional-label-font-sizeNullnullnull
Description
The font size of the optional Stepper label.
$kendo-stepper-indicator-hover-border$kendo-stepper-optional-label-font-styleStringitalicitalic
Description
The font style of the optional Stepper label.
+
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bg Null null null
Description
The border color of the hovered Stepper indicator.
+
Description
The background color of the Stepper ProgressBar.
$kendo-stepper-indicator-disabled-bg$kendo-stepper-progressbar-text Null null null
Description
The background color of the disabled Stepper indicator.
+
Description
The text color of the Stepper ProgressBar.
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The text color of the disabled Stepper indicator.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-stepper-indicator-disabled-border$kendo-stepper-progressbar-fill-text Null null null
Description
The border color of the disabled Stepper indicator.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#ff6358$kendo-stepper-content-transition-propertyStringheightheight
Description
The background color of the Stepper's done indicator.
+
Description
The property name of the Stepper transition.
$kendo-stepper-indicator-done-text$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
+
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
+
$kendo-switch-track-border-widthNumber1px1px
Description
The border width of the Switch track.
+
$kendo-switch-thumb-border-widthNumber1px1px
Description
The border width of the Switch thumb.
+
$kendo-switch-label-text-transformStringuppercaseuppercase
Description
The text transform of the Switch label.
+
$kendo-switch-label-displayStringinlineinline
Description
The display of the Switch label.
+
$kendo-switch-sizesMap( + sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), + md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), + lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) +)(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))
Description
The map with the different Switch sizes.
+
$kendo-switch-off-track-bg Colorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white$kendo-component-bg#ffffff
Description
The text color of the Stepper's done indicator.
+
Description
The background of the track when the Switch is not checked.
$kendo-stepper-indicator-done-border$kendo-switch-off-track-text Color$kendo-stepper-indicator-done-bg#ff6358$kendo-component-text#424242
Description
The border color of the Stepper's done indicator.
+
Description
The text color of the track when the Switch is not checked.
$kendo-stepper-indicator-done-hover-bg$kendo-switch-off-track-border Colorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#eb5b51if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))#ebebeb
Description
The background color of the Stepper's hovered done indicator.
+
Description
The border color of the track when the Switch is not checked.
$kendo-stepper-indicator-done-hover-text$kendo-switch-off-track-gradient Null null null
Description
The text color of the Stepper's hovered done indicator.
+
Description
The background gradient of the track when the Switch is not checked.
$kendo-stepper-indicator-done-hover-border$kendo-switch-off-track-hover-bg Null null null
Description
The border color of the Stepper's hovered done indicator.
+
Description
The background of the track when the hovered Switch is not checked.
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#ffa19b$kendo-switch-off-track-hover-textNullnullnull
Description
The background color of the Stepper's disabled done indicator.
+
Description
The text color of the track when the hovered Switch is not checked.
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white$kendo-switch-off-track-hover-borderNullnullnull
Description
The text color of the Stepper's disabled done indicator.
+
Description
The border color of the track when the hovered Switch is not checked.
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#ffa19b$kendo-switch-off-track-hover-gradientNullnullnull
Description
The border color of the Stepper's disabled done indicator.
+
Description
The background gradient of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#ff6358$kendo-switch-off-track-focus-gradientNullnullnull
Description
The background color of the Stepper current indicator.
+
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite$kendo-switch-off-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))2px solid rgba(0, 0, 0, 0.08)
Description
The text color of the Stepper current indicator.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#ff6358$kendo-switch-off-track-disabled-bgNullnullnull
Description
The border color of the Stepper current indicator.
+
Description
The background of the track when the disabled Switch is not checked.
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#eb5b51$kendo-switch-off-track-disabled-textNullnullnull
Description
The background color of the Stepper's hovered current indicator.
+
Description
The text color of the track when the disabled Switch is not checked.
$kendo-stepper-indicator-current-hover-text$kendo-switch-off-track-disabled-border Null$kendo-stepper-indicator-done-hover-textnull null
Description
The text color of the Stepper's hovered current indicator.
+
Description
The border color of the track when the disabled Switch is not checked.
$kendo-stepper-indicator-current-hover-border$kendo-switch-off-track-disabled-gradient Null$kendo-stepper-indicator-done-hover-bordernull null
Description
The border color of the Stepper's hovered current indicator.
+
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-stepper-indicator-current-disabled-bg$kendo-switch-off-thumb-bg Color$kendo-stepper-indicator-done-disabled-bg#ffa19b$kendo-base-bg#fafafa
Description
The background color of the Stepper's disabled current indicator.
+
Description
The background of the thumb when the Switch is not checked.
$kendo-stepper-indicator-current-disabled-text$kendo-switch-off-thumb-text Color$kendo-stepper-indicator-done-disabled-textwhite$kendo-base-text#424242
Description
The text color of the Stepper's disabled current indicator.
+
Description
The text color of the thumb when the Switch is not checked.
$kendo-stepper-indicator-current-disabled-border$kendo-switch-off-thumb-border Color$kendo-stepper-indicator-done-disabled-border#ffa19b$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Stepper's disabled current indicator.
+
Description
The border color of the thumb when the Switch is not checked.
$kendo-stepper-label-text$kendo-switch-off-thumb-gradient Null null null
Description
The text color of the Stepper label.
+
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-stepper-label-success-textColor$kendo-color-success#37b400$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The success text color of the Stepper label.
+
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-stepper-label-error-textColor$kendo-color-error#f31700$kendo-switch-off-thumb-hover-textNullnullnull
Description
The error text color of the Stepper label.
+
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-stepper-label-hover-textColorif($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 ))#373737$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The text color of the hovered Stepper label.
+
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The text color of the disabled Stepper label.
+
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-stepper-optional-label-text$kendo-switch-on-track-bg Color$kendo-subtle-text#666666$kendo-color-primary#ff6358
Description
The text color of the optional Stepper label.
+
Description
The background of the track when the Switch is checked.
$kendo-stepper-optional-label-opacityNullnullnull$kendo-switch-on-track-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))white
Description
The opacity of the optional Stepper label.
+
Description
The text color of the track when the Switch is checked.
$kendo-stepper-optional-label-font-sizeNullnullnull$kendo-switch-on-track-borderColor$kendo-switch-on-track-bg#ff6358
Description
The font size of the optional Stepper label.
+
Description
The border color of the track when the Switch is checked.
$kendo-stepper-optional-label-font-styleStringitalicitalic$kendo-switch-on-track-gradientNullnullnull
Description
The font style of the optional Stepper label.
+
Description
The background gradient of the track when the Switch is checked.
$kendo-stepper-progressbar-sizeNumber2px2px$kendo-switch-on-track-hover-bgNullnullnull
Description
The size of the Stepper ProgressBar.
+
Description
The background of the track when the hovered Switch is checked.
$kendo-stepper-progressbar-bg$kendo-switch-on-track-hover-text Null null null
Description
The background color of the Stepper ProgressBar.
+
Description
The text color of the track when the hovered Switch is checked.
$kendo-stepper-progressbar-text$kendo-switch-on-track-hover-border Null null null
Description
The text color of the Stepper ProgressBar.
+
Description
The border color of the track when the hovered Switch is checked.
$kendo-stepper-progressbar-fill-bg$kendo-switch-on-track-hover-gradient Null null null
Description
The background color of the selected Stepper ProgressBar.
+
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-stepper-progressbar-fill-text$kendo-switch-on-track-focus-bg Null null null
Description
The text color of the selected Stepper ProgressBar.
+
Description
The background of the track when the focused Switch is checked.
$kendo-stepper-content-transition-propertyStringheightheight$kendo-switch-on-track-focus-textNullnullnull
Description
The property name of the Stepper transition.
+
Description
The text color of the track when the focused Switch is checked.
$kendo-stepper-content-transition-durationNumber300ms300ms$kendo-switch-on-track-focus-borderNullnullnull
Description
The duration of the Stepper transition.
+
Description
The border color of the track when the focused Switch is checked.
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
-
- -### Switch - - - - - - - - - - - - - - - - - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + - - + - - + - - + - - + - + + +
NameTypeDefault valueComputed value
$kendo-switch-font-family$kendo-switch-on-track-focus-gradient Null null null
Description
The font family of the Switch.
+
Description
The background gradient of the track when the focused Switch is checked.
$kendo-switch-track-border-widthNumber1px1px$kendo-switch-on-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))2px solid rgba(255, 99, 88, 0.25)
Description
The border width of the Switch track.
+
Description
The ring around the track when the focused Switch is checked.
$kendo-switch-thumb-border-widthNumber1px1px$kendo-switch-on-track-disabled-bgNullnullnull
Description
The border width of the Switch thumb.
+
Description
The background of the track when the disabled Switch is checked.
$kendo-switch-label-text-transformStringuppercaseuppercase$kendo-switch-on-track-disabled-textNullnullnull
Description
The text transform of the Switch label.
+
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-label-displayStringinlineinline$kendo-switch-on-track-disabled-borderNullnullnull
Description
The display of the Switch label.
+
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-sizesMap( - sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), - md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), - lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) -)(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The map with the different Switch sizes.
+
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-switch-off-track-bg$kendo-switch-on-thumb-bg Color$kendo-component-bg#ffffff$kendo-base-bg#fafafa
Description
The background of the track when the Switch is not checked.
+
Description
The background of the thumb when the Switch is checked.
$kendo-switch-off-track-text$kendo-switch-on-thumb-text Color$kendo-component-text$kendo-base-text #424242
Description
The text color of the track when the Switch is not checked.
+
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-off-track-border$kendo-switch-on-thumb-border Colorif($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))#ebebeb$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the track when the Switch is not checked.
+
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-off-track-gradient$kendo-switch-on-thumb-gradient Null null null
Description
The background gradient of the track when the Switch is not checked.
+
Description
The background gradient of the thumb when the Switch is checked.
$kendo-switch-off-track-hover-bg$kendo-switch-on-thumb-hover-bg Null null null
Description
The background of the track when the hovered Switch is not checked.
+
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-hover-text$kendo-switch-on-thumb-hover-text Null null null
Description
The text color of the track when the hovered Switch is not checked.
+
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-hover-border$kendo-switch-on-thumb-hover-border Null null null
Description
The border color of the track when the hovered Switch is not checked.
+
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-off-track-hover-gradient$kendo-switch-on-thumb-hover-gradient Null null null
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
The background gradient of the thumb when the hovered Switch is checked.
+
+ +### Table + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + - - - + +
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
$kendo-switch-off-track-focus-bgNullnullnull$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The background of the track when the focused Switch is not checked.
+
Description
The width of vertical border of table cells.
$kendo-switch-off-track-focus-textNullnullnull$kendo-table-cell-horizontal-border-widthNumber0px0px
Description
The text color of the track when the focused Switch is not checked.
+
Description
The width of horizontal border of table cells.
$kendo-switch-off-track-focus-border$kendo-table-font-size Null null null
Description
The border color of the track when the focused Switch is not checked.
+
Description
The font size of the table if no size is specified.
$kendo-switch-off-track-focus-gradient$kendo-table-line-height Null null null
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
The line-height of the table if no size is specified.
$kendo-switch-off-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))2px solid rgba(0, 0, 0, 0.08)$kendo-table-cell-padding-xNullnullnull
Description
The ring around the track when the focused Switch is not checked.
+
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-switch-off-track-disabled-bg$kendo-table-cell-padding-y Null null null
Description
The background of the track when the disabled Switch is not checked.
+
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-switch-off-track-disabled-textNullnullnull$kendo-table-sizesMap( + sm: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-sm-cell-padding-x, + cell-padding-y: $kendo-table-sm-cell-padding-y + ), + md: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-md-cell-padding-x, + cell-padding-y: $kendo-table-md-cell-padding-y + ), + lg: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-lg-cell-padding-x, + cell-padding-y: $kendo-table-lg-cell-padding-y + ) +)(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))
Description
The text color of the track when the disabled Switch is not checked.
+
Description
The sizes of the table.
$kendo-switch-off-track-disabled-borderNullnullnull$kendo-table-bgColor$kendo-component-bg#ffffff
Description
The border color of the track when the disabled Switch is not checked.
+
Description
Background color of tables.
$kendo-switch-off-track-disabled-gradientNullnullnull$kendo-table-textColor$kendo-component-text#424242
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
Text color of tables.
$kendo-switch-off-thumb-bg$kendo-table-border Color$kendo-base-bg#fafafa$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The background of the thumb when the Switch is not checked.
+
Description
Border color of tables.
$kendo-switch-off-thumb-text$kendo-table-header-bg Color$kendo-base-text#424242$kendo-component-header-bg#fafafa
Description
The text color of the thumb when the Switch is not checked.
+
Description
Background color of table headers.
$kendo-switch-off-thumb-border$kendo-table-header-text Color$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-component-header-text#424242
Description
The border color of the thumb when the Switch is not checked.
+
Description
Text color of table headers.
$kendo-switch-off-thumb-gradientNullnullnull$kendo-table-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
Border color of table headers.
$kendo-switch-off-thumb-hover-bg$kendo-table-header-gradient Nullnull$kendo-component-header-gradient null
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
Gradient of table headers.
$kendo-switch-off-thumb-hover-textNullnullnull$kendo-table-footer-bgColor$kendo-table-header-bg#fafafa
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
Background color of table footers.
$kendo-switch-off-thumb-hover-borderNullnullnull$kendo-table-footer-textColor$kendo-table-header-text#424242
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
Text color of table footers.
$kendo-switch-off-thumb-hover-gradientNullnullnull$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
Border color of table footers.
$kendo-switch-on-track-bg$kendo-table-group-row-bg Color$kendo-color-primary#ff6358$kendo-table-header-bg#fafafa
Description
The background of the track when the Switch is checked.
+
Description
Background color of group rows in table.
$kendo-switch-on-track-text$kendo-table-group-row-text Colorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))white$kendo-table-header-text#424242
Description
The text color of the track when the Switch is checked.
+
Description
Text color of group rows in table.
$kendo-switch-on-track-border$kendo-table-group-row-border Color$kendo-switch-on-track-bg#ff6358$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
The border color of the track when the Switch is checked.
+
Description
Border color of group rows in table.
$kendo-switch-on-track-gradientNullnullnull$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
The background gradient of the track when the Switch is checked.
+
Description
Background color of alternating rows in table.
$kendo-switch-on-track-hover-bg$kendo-table-alt-row-text Null null null
Description
The background of the track when the hovered Switch is checked.
+
Description
Text color of alternating rows in table.
$kendo-switch-on-track-hover-text$kendo-table-alt-row-border Null null null
Description
The text color of the track when the hovered Switch is checked.
+
Description
Border color of alternating rows in table.
$kendo-switch-on-track-hover-borderNullnullnull$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))#ededed
Description
The border color of the track when the hovered Switch is checked.
+
Description
Background color of hovered rows in table.
$kendo-switch-on-track-hover-gradient$kendo-table-hover-text Null null null
Description
The background gradient of the track when the hovered Switch is checked.
+
Description
Text color of hovered rows in table.
$kendo-switch-on-track-focus-bg$kendo-table-hover-border Null null null
Description
The background of the track when the focused Switch is checked.
+
Description
Border color of hovered rows in table.
$kendo-switch-on-track-focus-text$kendo-table-focus-bg Null null null
Description
The text color of the track when the focused Switch is checked.
+
Description
Background color of focused rows in table.
$kendo-switch-on-track-focus-border$kendo-table-focus-text Null null null
Description
The border color of the track when the focused Switch is checked.
+
Description
Text color of focused rows in table.
$kendo-switch-on-track-focus-gradient$kendo-table-focus-border Null null null
Description
The background gradient of the track when the focused Switch is checked.
+
Description
Border color of focused rows in table.
$kendo-switch-on-track-focus-ring$kendo-table-focus-shadow List2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))2px solid rgba(255, 99, 88, 0.25)$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The ring around the track when the focused Switch is checked.
+
Description
Box shadow of focused rows in table.
$kendo-switch-on-track-disabled-bgNullnullnull$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)
Description
The background of the track when the disabled Switch is checked.
+
Description
Background color of selected rows in table.
$kendo-switch-on-track-disabled-text$kendo-table-selected-text Null null null
Description
The text color of the track when the disabled Switch is checked.
+
Description
Text color of selected rows in table.
$kendo-switch-on-track-disabled-border$kendo-table-selected-border Null null null
Description
The border color of the track when the disabled Switch is checked.
+
Description
Border color of selected rows in table.
$kendo-switch-on-track-disabled-gradient
+ +### Tabstrip + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - -
NameTypeDefault valueComputed value
$kendo-tabstrip-bg Null null null
Description
The background gradient of the track when the disabled Switch is checked.
+
Description
Background color of tabstrip component
$kendo-switch-on-thumb-bg$kendo-tabstrip-text Color$kendo-base-bg#fafafa$kendo-component-text#424242
Description
The background of the thumb when the Switch is checked.
+
Description
Text color of tabstrip component
$kendo-switch-on-thumb-text$kendo-tabstrip-border Color$kendo-base-text#424242$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The text color of the thumb when the Switch is checked.
+
Description
Border color of tabstrip component
$kendo-switch-on-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-tabstrip-item-padding-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
The border color of the thumb when the Switch is checked.
+
Description
Horizontal padding of tabs
$kendo-switch-on-thumb-gradientNullnullnull$kendo-tabstrip-item-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The background gradient of the thumb when the Switch is checked.
+
Description
Vertical padding of tabs
$kendo-switch-on-thumb-hover-bgNullnullnull$kendo-tabstrip-item-border-widthNumber1px1px
Description
The background of the thumb when the hovered Switch is checked.
+
Description
Width of border around tabs
$kendo-switch-on-thumb-hover-textNullnullnull$kendo-tabstrip-item-border-radiusNumber$kendo-border-radius-md4px
Description
The text color of the thumb when the hovered Switch is checked.
+
Description
Border radius of tabs
$kendo-switch-on-thumb-hover-borderNullnullnull$kendo-tabstrip-item-gapNumber00
Description
The border color of the thumb when the hovered Switch is checked.
+
Description
Spacing between tabs
$kendo-switch-on-thumb-hover-gradient$kendo-tabstrip-item-bg Null null null
Description
The background gradient of the thumb when the hovered Switch is checked.
-
- -### Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - + - - - - - - - - - - - + - + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
+
Description
Background color of tabs
$kendo-table-cell-vertical-border-widthNumber1px1px$kendo-tabstrip-item-textColor$kendo-link-text#ff6358
Description
The width of vertical border of table cells.
+
Description
Text color of tabs
$kendo-table-cell-horizontal-border-widthNumber0px0px$kendo-tabstrip-item-borderNullnullnull
Description
The width of horizontal border of table cells.
+
Description
Border color of tabs
$kendo-table-font-size$kendo-tabstrip-item-gradient Null null null
Description
The font size of the table if no size is specified.
+
Description
Background gradient of tabs
$kendo-table-line-height$kendo-tabstrip-item-hover-bg Null null null
Description
The line-height of the table if no size is specified.
+
Description
Background color of hovered tabs
$kendo-table-cell-padding-xNullnullnull$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#d6534a
Description
The horizontal padding of the cells in the table if no size is specified.
+
Description
Text color of hovered tabs
$kendo-table-cell-padding-y$kendo-tabstrip-item-hover-border Null null null
Description
The vertical padding of the cells in the table if no size is specified.
+
Description
Border color of hovered tabs
$kendo-table-sizesMap( - sm: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-sm-cell-padding-x, - cell-padding-y: $kendo-table-sm-cell-padding-y - ), - md: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-md-cell-padding-x, - cell-padding-y: $kendo-table-md-cell-padding-y - ), - lg: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-lg-cell-padding-x, - cell-padding-y: $kendo-table-lg-cell-padding-y - ) -)(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))$kendo-tabstrip-item-hover-gradientNullnullnull
Description
The sizes of the table.
+
Description
Background gradient of hovered tabs
$kendo-table-bg$kendo-tabstrip-item-selected-bg Color $kendo-component-bg #ffffff
Description
Background color of tables.
+
Description
Background color of selected tabs
$kendo-table-text$kendo-tabstrip-item-selected-text Color $kendo-component-text #424242
Description
Text color of tables.
+
Description
Text color of selected tabs
$kendo-table-border$kendo-tabstrip-item-selected-border Color $kendo-component-border rgba(0, 0, 0, 0.08)
Description
Border color of tables.
+
Description
Border color of selected tabs
$kendo-table-header-bgColor$kendo-component-header-bg#fafafa$kendo-tabstrip-item-selected-gradientNullnullnull
Description
Background color of table headers.
+
Description
Background gradient of selected tabs
$kendo-table-header-textColor$kendo-component-header-text#424242$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Text color of table headers.
+
Description
Horizontal padding of tabstrip content
$kendo-table-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
Border color of table headers.
+
Description
Vertical padding of tabstrip content
$kendo-table-header-gradientNull$kendo-component-header-gradientnull$kendo-tabstrip-content-border-widthNumber1px1px
Description
Gradient of table headers.
+
Description
Width of border around tabstrip content
$kendo-table-footer-bg$kendo-tabstrip-content-bg Color$kendo-table-header-bg#fafafa$kendo-component-bg#ffffff
Description
Background color of table footers.
+
Description
Background color of tabstrip content
$kendo-table-footer-text$kendo-tabstrip-content-text Color$kendo-table-header-text$kendo-component-text #424242
Description
Text color of table footers.
+
Description
Text color of tabstrip content
$kendo-table-footer-border$kendo-tabstrip-content-border Color$kendo-table-header-border$kendo-component-border rgba(0, 0, 0, 0.08)
Description
Border color of table footers.
-
$kendo-table-group-row-bgColor$kendo-table-header-bg#fafafa
Description
Background color of group rows in table.
+
Description
Border color of tabstrip content
$kendo-table-group-row-text$kendo-tabstrip-content-focus-border Color$kendo-table-header-text$kendo-component-text #424242
Description
Text color of group rows in table.
+
Description
Border color of tabstrip focused content
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
+ +### Taskboard + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - -
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
Border color of group rows in table.
+
Description
The spacing index of the TaskBoard.
$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)$kendo-taskboard-padding-yNullnullnull
Description
Background color of alternating rows in table.
+
Description
The vertical padding of the TaskBoard.
$kendo-table-alt-row-text$kendo-taskboard-padding-x Null null null
Description
Text color of alternating rows in table.
+
Description
The horizontal of the TaskBoard.
$kendo-table-alt-row-borderNullnullnull$kendo-taskboard-font-familyString$kendo-font-familyinherit
Description
Border color of alternating rows in table.
+
Description
The font family of the TaskBoard.
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))#ededed$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
Background color of hovered rows in table.
+
Description
The font size of the TaskBoard.
$kendo-table-hover-textNullnullnull$kendo-taskboard-line-heightNumber$kendo-line-height-md1.4285714286
Description
Text color of hovered rows in table.
+
Description
The line height of the TaskBoard.
$kendo-table-hover-border$kendo-taskboard-bg Null null null
Description
Border color of hovered rows in table.
+
Description
The background color of the TaskBoard.
$kendo-table-focus-bg$kendo-taskboard-text Null null null
Description
Background color of focused rows in table.
+
Description
The text color of the TaskBoard.
$kendo-table-focus-text$kendo-taskboard-border Null null null
Description
Text color of focused rows in table.
+
Description
The border color of the TaskBoard.
$kendo-table-focus-borderNullnullnull$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
Border color of focused rows in table.
+
Description
The vertical padding of the TaskBoard Toolbar.
$kendo-table-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
Box shadow of focused rows in table.
+
Description
The horizontal padding of the TaskBoard Toolbar.
$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)$kendo-taskboard-toolbar-bgNullnullnull
Description
Background color of selected rows in table.
+
Description
The background color of the TaskBoard Toolbar.
$kendo-table-selected-text$kendo-taskboard-toolbar-text Null null null
Description
Text color of selected rows in table.
+
Description
The text color of the TaskBoard Toolbar.
$kendo-table-selected-border$kendo-taskboard-toolbar-border Null null null
Description
Border color of selected rows in table.
+
Description
The border color of the TaskBoard Toolbar.
- -### Tabstrip - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - + - - - - - + + + + - - + - - + - - + + - - + - - + + - + + + + + + + + + + + + + + + + + + - + - - + - - + - - + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-tabstrip-bg
$kendo-taskboard-toolbar-gradient Null null null
Description
Background color of tabstrip component
+
Description
The gradient of the TaskBoard Toolbar.
$kendo-tabstrip-textColor$kendo-component-text#424242$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer16px
Description
Text color of tabstrip component
+
Description
The vertical padding of the TaskBoard content.
$kendo-tabstrip-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y16px
Description
Border color of tabstrip component
+
Description
The horizontal padding of the TaskBoard content.
$kendo-tabstrip-item-padding-x$kendo-taskboard-column-container-spacing-y Numberk-map-get( $kendo-spacing, 3 )12pxk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Horizontal padding of tabs
+
Description
The vertical spacing of the TaskBoard column container.
$kendo-tabstrip-item-padding-y$kendo-taskboard-column-container-padding-y Numberk-map-get( $kendo-spacing, 1.5 )6px0px0px
Description
Vertical padding of tabs
+
Description
The vertical padding of the TaskBoard column container.
$kendo-tabstrip-item-border-width$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the TaskBoard column container.
+
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-width Number 1px 1px
Description
Width of border around tabs
+
Description
The border width of the TaskBoard column.
$kendo-tabstrip-item-border-radius$kendo-taskboard-column-border-radius Number $kendo-border-radius-md 4px
Description
Border radius of tabs
+
Description
The border radius of the TaskBoard column.
$kendo-tabstrip-item-gapNumber00$kendo-taskboard-column-bgColor$kendo-base-bg#fafafa
Description
Spacing between tabs
+
Description
The background color of the TaskBoard column.
$kendo-tabstrip-item-bg$kendo-taskboard-column-text Null null null
Description
Background color of tabs
+
Description
The text color of the TaskBoard column.
$kendo-tabstrip-item-text$kendo-taskboard-column-border Color$kendo-link-text#ff6358transparenttransparent
Description
Text color of tabs
+
Description
The border color of the TaskBoard column.
$kendo-tabstrip-item-border$kendo-taskboard-column-focus-bg Null null null
Description
Border color of tabs
+
Description
The background color of the focused TaskBoard column.
$kendo-tabstrip-item-gradient$kendo-taskboard-column-focus-text Null null null
Description
Background gradient of tabs
+
Description
The text color of the focused TaskBoard column.
$kendo-tabstrip-item-hover-bgNullnullnull$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)
Description
Background color of hovered tabs
+
Description
The border color of the focused TaskBoard column.
$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#d6534a$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of hovered tabs
+
Description
The vertical padding of the TaskBoard column header.
$kendo-tabstrip-item-hover-borderNullnullnull$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
Border color of hovered tabs
+
Description
The horizontal padding of the TaskBoard column header.
$kendo-tabstrip-item-hover-gradientNullnullnull$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
Background gradient of hovered tabs
+
Description
The spacing of the TaskBoard column header.
$kendo-tabstrip-item-selected-bgColor$kendo-component-bg#ffffff$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Background color of selected tabs
+
Description
The spacing of the TaskBoard column header actions.
$kendo-tabstrip-item-selected-text$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-text Color$kendo-component-text$kendo-component-header-text #424242
Description
Text color of selected tabs
+
Description
The text color of the TaskBoard column header.
$kendo-tabstrip-item-selected-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-column-cards-padding-yNullnullnull
Description
Border color of selected tabs
+
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-tabstrip-item-selected-gradient$kendo-taskboard-column-cards-padding-x Null null null
Description
Background gradient of selected tabs
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-tabstrip-content-padding-x$kendo-taskboard-column-cards-gap Numberk-map-get( $kendo-spacing, 4 )16pxk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Horizontal padding of tabstrip content
+
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-tabstrip-content-padding-y$kendo-taskboard-pane-width Numberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-column-width320px
Description
Vertical padding of tabstrip content
+
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
$kendo-tabstrip-content-border-width$kendo-taskboard-pane-border-width Number 1px 1px
Description
Width of border around tabstrip content
+
Description
The border width of the TaskBoard pane.
$kendo-tabstrip-content-bg$kendo-taskboard-pane-bg Color $kendo-component-bg #ffffff
Description
Background color of tabstrip content
+
Description
The background color of the TaskBoard pane.
$kendo-tabstrip-content-text$kendo-taskboard-pane-text Color $kendo-component-text #424242
Description
Text color of tabstrip content
+
Description
The text color of the TaskBoard pane.
$kendo-tabstrip-content-border$kendo-taskboard-pane-border Color $kendo-component-border rgba(0, 0, 0, 0.08)
Description
Border color of tabstrip content
+
Description
The border color of the TaskBoard pane.
$kendo-tabstrip-content-focus-borderColor$kendo-component-text#424242$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
Border color of tabstrip focused content
+
Description
The vertical padding of the TaskBoard pane header.
- -### Taskboard - - - - - - - - - - - - - - - - - - + + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + - + - - + - - - - - - - - - - - + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-taskboard-spacer
$kendo-taskboard-pane-header-padding-x Numberk-map-get( $kendo-spacing, 4 )$kendo-taskboard-spacer 16px
Description
The spacing index of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-padding-yNullnullnull$kendo-taskboard-pane-header-font-weightNumber500500
Description
The vertical padding of the TaskBoard.
+
Description
The font weight of the TaskBoard pane header.
$kendo-taskboard-padding-xNullnullnull$kendo-taskboard-pane-header-textColor$kendo-component-header-text#424242
Description
The horizontal of the TaskBoard.
+
Description
The text color of the TaskBoard pane header.
$kendo-taskboard-font-familyString$kendo-font-familyinherit$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The font family of the TaskBoard.
+
Description
The vertical padding of the TaskBoard pane content.
$kendo-taskboard-font-size$kendo-taskboard-pane-content-padding-x Number$kendo-font-size-md14px$kendo-taskboard-spacer16px
Description
The font size of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-line-height$kendo-taskboard-pane-actions-padding-y Number$kendo-line-height-md1.4285714286( $kendo-taskboard-spacer * .75 )12px
Description
The line height of the TaskBoard.
+
Description
The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-bgNullnullnull$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer16px
Description
The background color of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-textNullnullnull$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer16px
Description
The text color of the TaskBoard.
+
Description
The vertical padding of the TaskBoard Card.
$kendo-taskboard-borderNullnullnull$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y16px
Description
The border color of the TaskBoard.
+
Description
The horizontal padding of the TaskBoard Card.
$kendo-taskboard-toolbar-padding-y$kendo-taskboard-card-border-width Number$kendo-taskboard-spacer16px$kendo-card-border-width1px
Description
The vertical padding of the TaskBoard Toolbar.
+
Description
The border width of the TaskBoard Card.
$kendo-taskboard-toolbar-padding-x$kendo-taskboard-card-border-radius Number$kendo-taskboard-toolbar-padding-y16px$kendo-border-radius-md4px
Description
The horizontal padding of the TaskBoard Toolbar.
+
Description
The border radius of the TaskBoard Card.
$kendo-taskboard-toolbar-bg$kendo-taskboard-card-shadow Nullnull$kendo-card-shadow null
Description
The background color of the TaskBoard Toolbar.
+
Description
The shadow of the TaskBoard Card.
$kendo-taskboard-toolbar-textNullnullnull$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The text color of the TaskBoard Toolbar.
+
Description
The background color of the TaskBoard Card.
$kendo-taskboard-toolbar-borderNullnullnull$kendo-taskboard-card-textColor$kendo-card-text#424242
Description
The border color of the TaskBoard Toolbar.
+
Description
The text color of the TaskBoard Card.
$kendo-taskboard-toolbar-gradientNullnullnull$kendo-taskboard-card-borderColor$kendo-card-borderrgba(0, 0, 0, 0.08)
Description
The gradient of the TaskBoard Toolbar.
+
Description
The border color of the TaskBoard Card.
$kendo-taskboard-content-padding-y$kendo-taskboard-card-category-border-width Number$kendo-taskboard-spacer16px4px4px
Description
The vertical padding of the TaskBoard content.
+
Description
The border width of the TaskBoard Card category.
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y16px$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)
Description
The horizontal padding of the TaskBoard content.
+
Description
The border color of the hovered TaskBoard Card.
$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))rgba(0, 0, 0, 0.2456)
Description
The vertical spacing of the TaskBoard column container.
+
Description
The border color of the focused TaskBoard Card.
$kendo-taskboard-column-container-padding-yNumber0px0px$kendo-taskboard-card-focus-shadowStringnonenone
Description
The vertical padding of the TaskBoard column container.
+
Description
The shadow of the focused TaskBoard Card.
$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))#ffb0ab
Description
The horizontal padding of the TaskBoard column container.
+
Description
The border of the selected TaskBoard Card.
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#ff6358
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-hover-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a
Description
The spacing of the TaskBoard columns container.
+
Description
The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-column-widthNumber320px320px$kendo-taskboard-card-header-focus-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a
Description
The default width of the TaskBoard column.
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-taskboard-column-border-width$kendo-taskboard-drag-placeholder-border-width Number 1px 1px
Description
The border width of the TaskBoard column.
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-column-border-radius$kendo-taskboard-drag-placeholder-border-radius Number$kendo-border-radius-md$kendo-taskboard-card-border-radius 4px
Description
The border radius of the TaskBoard column.
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-column-bg$kendo-taskboard-drag-placeholder-bg Color$kendo-base-bg#fafafa
Description
The background color of the TaskBoard column.
-
$kendo-taskboard-column-textNullnullnullrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)
Description
The text color of the TaskBoard column.
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-column-border$kendo-taskboard-drag-placeholder-border Colortransparenttransparent$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the TaskBoard column.
+
Description
The border color of the TaskBoard Card placeholder.
$kendo-taskboard-column-focus-bgNullnullnull
+ +### Tilelayout + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The background color of the focused TaskBoard column.
+
Description
The width of the border around the TileLayout.
$kendo-taskboard-column-focus-textNullnullnull$kendo-tile-layout-bgColor$kendo-base-bg#fafafa
Description
The text color of the focused TaskBoard column.
+
Description
The background color of the TileLayout.
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the focused TaskBoard column.
+
Description
The horizontal padding of the TileLayout.
$kendo-taskboard-column-header-padding-y$kendo-tile-layout-padding-y Numberk-math-div( $kendo-taskboard-spacer, 2 )8px$kendo-tile-layout-padding-x16px
Description
The vertical padding of the TaskBoard column header.
+
Description
The vertical padding of the TileLayout
$kendo-taskboard-column-header-padding-x$kendo-tile-layout-card-border-width Number$kendo-taskboard-column-header-padding-y8px$kendo-card-border-width1px
Description
The horizontal padding of the TaskBoard column header.
+
Description
The width of the border around the TileLayout card.
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px$kendo-tile-layout-card-focus-shadowNull$kendo-card-focus-shadownull
Description
The spacing of the TaskBoard column header.
+
Description
The focus box shadow of the TileLayout card.
$kendo-taskboard-column-header-actions-gap$kendo-tile-layout-hint-border-width Numberk-math-div( $kendo-taskboard-spacer, 2 )8px1px1px
Description
The spacing of the TaskBoard column header actions.
+
Description
The width of the border around the TileLayout hint.
$kendo-taskboard-column-header-font-weight$kendo-tile-layout-hint-border-radius Number500500$kendo-border-radius-lg6px
Description
The font weight of the TaskBoard column header.
+
Description
The radius of the border around the TileLayout hint.
$kendo-taskboard-column-header-text$kendo-tile-layout-hint-border Color$kendo-component-header-text#424242$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The text color of the TaskBoard column header.
+
Description
The color of the border around the TileLayout hint.
$kendo-taskboard-column-cards-padding-yNullnullnull$kendo-tile-layout-hint-bgColorrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)
Description
The vertical padding of the TaskBoard column Card wrapper.
+
Description
The background color of the TileLayout hint.
$kendo-taskboard-column-cards-padding-xNullnullnull
+ +### Timeline + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-timeline-spacing-xNumber40px40px
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
Description
The horizontal spacing of the Timeline.
$kendo-taskboard-column-cards-gap$kendo-timeline-spacing-y Numberk-math-div( $kendo-taskboard-spacer, 2 )8px40px40px
Description
The spacing of the TaskBoard column Card wrapper.
+
Description
The vertical spacing of the Timeline.
$kendo-taskboard-pane-width$kendo-timeline-items-padding Number$kendo-taskboard-column-width320px16px16px
Description
The default width of the TaskBoard pane.
+
Description
The padding between the Timeline's track items.
$kendo-taskboard-pane-padding-yNullnullnull$kendo-timeline-font-familyString$kendo-font-familyinherit
Description
The vertical padding of the TaskBoard pane.
+
Description
The font family of the Timeline.
$kendo-taskboard-pane-padding-xNullnullnull$kendo-timeline-font-sizeNumber$kendo-font-size-md14px
Description
The horizontal padding of the TaskBoard pane.
+
Description
The font size of the Timeline.
$kendo-taskboard-pane-border-width$kendo-timeline-line-height Number1px1px$kendo-line-height-md1.4285714286
Description
The border width of the TaskBoard pane.
+
Description
The line height of the Timeline.
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff$kendo-timeline-mobile-spacing-xNumber16px16px
Description
The background color of the TaskBoard pane.
+
Description
The horizontal spacing of the mobile Timeline.
$kendo-taskboard-pane-textColor$kendo-component-text#424242$kendo-timeline-mobile-spacing-yNumber16px16px
Description
The text color of the TaskBoard pane.
+
Description
The vertical spacing of the mobile Timeline.
$kendo-taskboard-pane-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-timeline-track-arrow-widthNumber30px30px
Description
The border color of the TaskBoard pane.
+
Description
The width of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-y$kendo-timeline-track-arrow-height Number( $kendo-taskboard-spacer * .75 )12px30px30px
Description
The vertical padding of the TaskBoard pane header.
+
Description
The height of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .6 ), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%))#f9f9f9
Description
The horizontal padding of the TaskBoard pane header.
+
Description
The background color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-font-weightNumber500500$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))#848484
Description
The font weight of the TaskBoard pane header.
+
Description
The text color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-text$kendo-timeline-track-arrow-disabled-border Color$kendo-component-header-text#424242if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%))#f3f3f3
Description
The text color of the TaskBoard pane header.
+
Description
The border color of the disabled Timeline track arrow.
$kendo-taskboard-pane-content-padding-y$kendo-timeline-track-size Number0px0px6px6px
Description
The vertical padding of the TaskBoard pane content.
+
Description
The size of the Timeline track.
$kendo-taskboard-pane-content-padding-x$kendo-timeline-track-wrap-padding-bottom Number$kendo-taskboard-spacer16pxk-math-div( $kendo-timeline-track-size, 2 )3px
Description
The horizontal padding of the TaskBoard pane content.
+
Description
The bottom padding of the Timeline's track wrapper.
$kendo-taskboard-pane-actions-padding-y$kendo-timeline-track-border-width Number( $kendo-taskboard-spacer * .75 )12px1px1px
Description
The vertical padding of the TaskBoard pane actions.
+
Description
The border width of the Timeline track.
$kendo-taskboard-pane-actions-padding-x$kendo-timeline-track-margin-bottom Number$kendo-taskboard-spacer16px 16px
Description
The horizontal padding of the TaskBoard pane actions.
+
Description
The bottom margin of the Timeline track.
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer16px$kendo-timeline-track-bottom-calcCalculationcalc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})calc(15px + 3px)
Description
The vertical padding of the TaskBoard Card.
+
Description
The bottom offset of the Timeline track.
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y16px$kendo-timeline-track-start-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(30px - 2 * 1px)
Description
The horizontal padding of the TaskBoard Card.
+
Description
The left offset of the Timeline track.
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px$kendo-timeline-track-end-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(30px - 2 * 1px)
Description
The border width of the TaskBoard Card.
+
Description
The right offset of the Timeline track.
$kendo-taskboard-card-border-radiusNumber$kendo-border-radius-md4px$kendo-timeline-track-bgColor$kendo-button-bg#f5f5f5
Description
The border radius of the TaskBoard Card.
+
Description
The background color of the Timeline track.
$kendo-taskboard-card-shadowNull$kendo-card-shadownull$kendo-timeline-track-border-colorColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The shadow of the TaskBoard Card.
+
Description
The border color of the Timeline track.
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff$kendo-timeline-track-item-focus-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the TaskBoard Card.
+
Description
The shadow of the Timeline's focused track items.
$kendo-taskboard-card-textColor$kendo-card-text#424242$kendo-timeline-track-event-offsetNumber36px36px
Description
The text color of the TaskBoard Card.
+
Description
The offset of the Timeline track event.
$kendo-taskboard-card-borderColor$kendo-card-borderrgba(0, 0, 0, 0.08)$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x8px
Description
The border color of the TaskBoard Card.
+
Description
The horizontal padding of the Timeline flag.
$kendo-taskboard-card-category-border-width$kendo-timeline-flag-padding-y Number4px$kendo-button-padding-y 4px
Description
The border width of the TaskBoard Card category.
+
Description
The vertical padding of the Timeline flag.
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.4285714286
Description
The border color of the hovered TaskBoard Card.
+
Description
The line height of the Timeline flag.
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))rgba(0, 0, 0, 0.2456)$kendo-timeline-flag-min-widthNumber80px80px
Description
The border color of the focused TaskBoard Card.
+
Description
The minimum width of the Timeline flag.
$kendo-taskboard-card-focus-shadowStringnonenone$kendo-timeline-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})calc(80px + 2 * 40px)
Description
The shadow of the focused TaskBoard Card.
+
Description
The maximum width of the Timeline flag.
$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))#ffb0ab$kendo-timeline-mobile-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})calc(80px + 2 * 16px)
Description
The border of the selected TaskBoard Card.
+
Description
The maximum width of the mobile Timeline flag.
$kendo-taskboard-card-selected-shadowStringnonenone$kendo-timeline-horizontal-flag-min-widthNumber60px60px
Description
The shadow of the selected TaskBoard Card.
+
Description
The minimum width of the horizontal Timeline flag.
$kendo-taskboard-card-header-text$kendo-timeline-flag-bg Color $kendo-color-primary #ff6358
Description
The text color of the TaskBoard Card header text.
+
Description
The background color of the Timeline flag.
$kendo-taskboard-card-header-hover-text$kendo-timeline-flag-text Colorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534aif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg ))white
Description
The text color of the hovered TaskBoard Card header text.
+
Description
The text color of the Timeline flag.
$kendo-taskboard-card-header-focus-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a$kendo-timeline-flag-callout-widthNumber10px10px
Description
The text color of the focused TaskBoard Card header text.
+
Description
The width of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-width$kendo-timeline-flag-callout-height Number1px1px10px10px
Description
The border width of the TaskBoard Card placeholder.
+
Description
The height of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-radius$kendo-timeline-flag-offset-bottom Number$kendo-taskboard-card-border-radius4px 4px
Description
The border radius of the TaskBoard Card placeholder.
+
Description
The bottom offset of the Timeline flag.
$kendo-taskboard-drag-placeholder-bgColorrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)$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 background color of the TaskBoard Card placeholder.
+
Description
The bottom margin of the Timeline flag.
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-timeline-date-widthNumber50px50px
Description
The border color of the TaskBoard Card placeholder.
+
Description
The width of the Timeline date.
- -### Tilelayout - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - diff --git a/packages/fluent/docs/customization-slider.md b/packages/fluent/docs/customization-slider.md index 65a42b90120..da705e6047c 100644 --- a/packages/fluent/docs/customization-slider.md +++ b/packages/fluent/docs/customization-slider.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. - @@ -44,7 +44,7 @@ The following table lists the available variables for customization. - @@ -54,7 +54,7 @@ The following table lists the available variables for customization. - @@ -64,7 +64,7 @@ The following table lists the available variables for customization. - @@ -74,7 +74,7 @@ The following table lists the available variables for customization. - @@ -84,7 +84,7 @@ The following table lists the available variables for customization. - @@ -94,7 +94,7 @@ The following table lists the available variables for customization. - @@ -104,7 +104,7 @@ The following table lists the available variables for customization. - @@ -114,7 +114,7 @@ The following table lists the available variables for customization. - @@ -124,7 +124,7 @@ The following table lists the available variables for customization. - @@ -134,7 +134,7 @@ The following table lists the available variables for customization. - @@ -144,7 +144,7 @@ The following table lists the available variables for customization. - @@ -154,7 +154,7 @@ The following table lists the available variables for customization. - @@ -164,7 +164,7 @@ The following table lists the available variables for customization. - @@ -174,7 +174,7 @@ The following table lists the available variables for customization. - @@ -184,7 +184,7 @@ The following table lists the available variables for customization. - @@ -194,7 +194,7 @@ The following table lists the available variables for customization. - @@ -204,7 +204,7 @@ The following table lists the available variables for customization. - @@ -214,7 +214,7 @@ The following table lists the available variables for customization. - @@ -224,7 +224,7 @@ The following table lists the available variables for customization. - @@ -234,7 +234,7 @@ The following table lists the available variables for customization. - @@ -244,7 +244,7 @@ The following table lists the available variables for customization. - @@ -254,7 +254,7 @@ The following table lists the available variables for customization. - @@ -264,7 +264,7 @@ The following table lists the available variables for customization. - @@ -274,7 +274,7 @@ The following table lists the available variables for customization. - @@ -284,7 +284,7 @@ The following table lists the available variables for customization. - @@ -294,7 +294,7 @@ The following table lists the available variables for customization. - @@ -304,7 +304,7 @@ The following table lists the available variables for customization. - @@ -314,7 +314,7 @@ The following table lists the available variables for customization. - @@ -324,7 +324,7 @@ The following table lists the available variables for customization. - @@ -334,7 +334,7 @@ The following table lists the available variables for customization. - @@ -344,7 +344,7 @@ The following table lists the available variables for customization. - @@ -354,7 +354,7 @@ The following table lists the available variables for customization. - @@ -364,7 +364,7 @@ The following table lists the available variables for customization. - @@ -374,7 +374,7 @@ The following table lists the available variables for customization. - @@ -384,7 +384,7 @@ The following table lists the available variables for customization. - @@ -394,7 +394,7 @@ The following table lists the available variables for customization. - @@ -404,7 +404,7 @@ The following table lists the available variables for customization. - @@ -414,7 +414,7 @@ The following table lists the available variables for customization. - @@ -424,7 +424,7 @@ The following table lists the available variables for customization. - @@ -434,7 +434,7 @@ The following table lists the available variables for customization. - @@ -444,7 +444,7 @@ The following table lists the available variables for customization. - @@ -454,7 +454,7 @@ The following table lists the available variables for customization. - @@ -464,7 +464,7 @@ The following table lists the available variables for customization. - @@ -474,7 +474,7 @@ The following table lists the available variables for customization. - diff --git a/packages/fluent/docs/customization-timeline.md b/packages/fluent/docs/customization-timeline.md index 8eafd1930bc..150d3a394cf 100644 --- a/packages/fluent/docs/customization-timeline.md +++ b/packages/fluent/docs/customization-timeline.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. - @@ -44,7 +44,7 @@ The following table lists the available variables for customization. - @@ -54,7 +54,7 @@ The following table lists the available variables for customization. - @@ -64,7 +64,7 @@ The following table lists the available variables for customization. - @@ -74,7 +74,7 @@ The following table lists the available variables for customization. - @@ -84,7 +84,7 @@ The following table lists the available variables for customization. - @@ -94,7 +94,7 @@ The following table lists the available variables for customization. - @@ -104,7 +104,7 @@ The following table lists the available variables for customization. - @@ -114,7 +114,7 @@ The following table lists the available variables for customization. - @@ -124,7 +124,7 @@ The following table lists the available variables for customization. - @@ -134,7 +134,7 @@ The following table lists the available variables for customization. - @@ -144,7 +144,7 @@ The following table lists the available variables for customization. - @@ -154,7 +154,7 @@ The following table lists the available variables for customization. - @@ -164,7 +164,7 @@ The following table lists the available variables for customization. - @@ -174,7 +174,7 @@ The following table lists the available variables for customization. - @@ -184,7 +184,7 @@ The following table lists the available variables for customization. - @@ -194,7 +194,7 @@ The following table lists the available variables for customization. - @@ -204,7 +204,7 @@ The following table lists the available variables for customization. - @@ -214,7 +214,7 @@ The following table lists the available variables for customization. - @@ -224,7 +224,7 @@ The following table lists the available variables for customization. - @@ -234,7 +234,7 @@ The following table lists the available variables for customization. - @@ -244,7 +244,7 @@ The following table lists the available variables for customization. - @@ -254,7 +254,7 @@ The following table lists the available variables for customization. - @@ -264,7 +264,7 @@ The following table lists the available variables for customization. - @@ -274,7 +274,7 @@ The following table lists the available variables for customization. - @@ -284,7 +284,7 @@ The following table lists the available variables for customization. - @@ -294,7 +294,7 @@ The following table lists the available variables for customization. - @@ -304,7 +304,7 @@ The following table lists the available variables for customization. - @@ -314,7 +314,7 @@ The following table lists the available variables for customization. - @@ -324,7 +324,7 @@ The following table lists the available variables for customization. - @@ -334,7 +334,7 @@ The following table lists the available variables for customization. - @@ -344,7 +344,7 @@ The following table lists the available variables for customization. - @@ -354,7 +354,7 @@ The following table lists the available variables for customization. - @@ -364,7 +364,7 @@ The following table lists the available variables for customization. - @@ -374,7 +374,7 @@ The following table lists the available variables for customization. - @@ -384,7 +384,7 @@ The following table lists the available variables for customization. - @@ -394,7 +394,7 @@ The following table lists the available variables for customization. - @@ -404,7 +404,7 @@ The following table lists the available variables for customization. - @@ -414,7 +414,7 @@ The following table lists the available variables for customization. - @@ -424,7 +424,7 @@ The following table lists the available variables for customization. - @@ -434,7 +434,7 @@ The following table lists the available variables for customization. - @@ -444,7 +444,7 @@ The following table lists the available variables for customization. - @@ -454,7 +454,7 @@ The following table lists the available variables for customization. - @@ -464,7 +464,7 @@ The following table lists the available variables for customization. - @@ -474,7 +474,7 @@ The following table lists the available variables for customization. - @@ -484,7 +484,7 @@ The following table lists the available variables for customization. - @@ -494,7 +494,7 @@ The following table lists the available variables for customization. - @@ -504,7 +504,7 @@ The following table lists the available variables for customization. - @@ -514,7 +514,7 @@ The following table lists the available variables for customization. - @@ -524,7 +524,7 @@ The following table lists the available variables for customization. - @@ -534,7 +534,7 @@ The following table lists the available variables for customization. - @@ -544,7 +544,7 @@ The following table lists the available variables for customization. - @@ -554,7 +554,7 @@ The following table lists the available variables for customization. - @@ -564,7 +564,7 @@ The following table lists the available variables for customization. - @@ -574,7 +574,7 @@ The following table lists the available variables for customization. - @@ -584,7 +584,7 @@ The following table lists the available variables for customization. - @@ -594,7 +594,7 @@ The following table lists the available variables for customization. - @@ -604,7 +604,7 @@ The following table lists the available variables for customization. - @@ -614,7 +614,7 @@ The following table lists the available variables for customization. - diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md index 9f211f900aa..97f83d1f976 100644 --- a/packages/fluent/docs/customization.md +++ b/packages/fluent/docs/customization.md @@ -24449,7 +24449,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24459,7 +24459,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24469,7 +24469,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24479,7 +24479,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24489,7 +24489,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24499,7 +24499,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24509,7 +24509,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24519,7 +24519,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24529,7 +24529,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24539,7 +24539,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24549,7 +24549,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24559,7 +24559,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24569,7 +24569,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24579,7 +24579,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24589,7 +24589,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24599,7 +24599,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24609,7 +24609,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24619,7 +24619,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24629,7 +24629,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24639,7 +24639,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24649,7 +24649,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24659,7 +24659,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24669,7 +24669,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24679,7 +24679,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24689,7 +24689,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24699,7 +24699,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24709,7 +24709,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24719,7 +24719,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24729,7 +24729,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24739,7 +24739,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24749,7 +24749,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24759,7 +24759,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24769,7 +24769,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24779,7 +24779,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24789,7 +24789,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24799,7 +24799,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24809,7 +24809,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24819,7 +24819,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24829,7 +24829,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24839,7 +24839,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24849,7 +24849,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24859,7 +24859,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24869,7 +24869,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24879,7 +24879,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -24889,7 +24889,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29424,7 +29424,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29434,7 +29434,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29444,7 +29444,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29454,7 +29454,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29464,7 +29464,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29474,7 +29474,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29484,7 +29484,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29494,7 +29494,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29504,7 +29504,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29514,7 +29514,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29524,7 +29524,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29534,7 +29534,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29544,7 +29544,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29554,7 +29554,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29564,7 +29564,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29574,7 +29574,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29584,7 +29584,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29594,7 +29594,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29604,7 +29604,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29614,7 +29614,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29624,7 +29624,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29634,7 +29634,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29644,7 +29644,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29654,7 +29654,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29664,7 +29664,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29674,7 +29674,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29684,7 +29684,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29694,7 +29694,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29704,7 +29704,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29714,7 +29714,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29724,7 +29724,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29734,7 +29734,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29744,7 +29744,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29754,7 +29754,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29764,7 +29764,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29774,7 +29774,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29784,7 +29784,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29794,7 +29794,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29804,7 +29804,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29814,7 +29814,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29824,7 +29824,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29834,7 +29834,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29844,7 +29844,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29854,7 +29854,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29864,7 +29864,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29874,7 +29874,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29884,7 +29884,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29894,7 +29894,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29904,7 +29904,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29914,7 +29914,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29924,7 +29924,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29934,7 +29934,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29944,7 +29944,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29954,7 +29954,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29964,7 +29964,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29974,7 +29974,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29984,7 +29984,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -29994,7 +29994,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -30004,7 +30004,7 @@ The following table lists the available variables for customizing the Fluent the - diff --git a/packages/material/docs/customization-slider.md b/packages/material/docs/customization-slider.md new file mode 100644 index 00000000000..eb4dbbe0be4 --- /dev/null +++ b/packages/material/docs/customization-slider.md @@ -0,0 +1,388 @@ +--- +title: Customizing Slider +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_slider +position: 9 +--- + +# Customizing Slider + +## Variables + +The following table lists the available variables for customization. + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-width
$kendo-timeline-date-margin-bottom Number0px0px8px8px
Description
The width of the border around the TileLayout.
+
Description
The bottom margin of the Timeline date.
$kendo-tile-layout-bgColor$kendo-base-bg#fafafa$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 background color of the TileLayout.
+
Description
The padding of the vertical Timeline.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$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 horizontal padding of the TileLayout.
+
Description
The padding of the vertical Timeline date.
$kendo-tile-layout-padding-y$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-width Number$kendo-tile-layout-padding-x16px 16px
Description
The vertical padding of the TileLayout
+
Description
The width of the Timeline circle.
$kendo-tile-layout-card-border-width$kendo-timeline-circle-height Number$kendo-card-border-width1px16px16px
Description
The width of the border around the TileLayout card.
+
Description
The height of the Timeline circle.
$kendo-tile-layout-card-focus-shadowNull$kendo-card-focus-shadownull$kendo-timeline-circle-bgColor$kendo-color-primary#ff6358
Description
The focus box shadow of the TileLayout card.
+
Description
The background color of the Timeline circle.
$kendo-tile-layout-hint-border-width$kendo-timeline-collapse-arrow-padding-x Number1px1px$kendo-padding-md-x8px
Description
The width of the border around the TileLayout hint.
+
Description
The horizontal padding of the Timeline collapse arrow.
$kendo-tile-layout-hint-border-radius$kendo-timeline-event-width Number$kendo-border-radius-lg6px400px400px
Description
The radius of the border around the TileLayout hint.
+
Description
The width of the Timeline event.
$kendo-tile-layout-hint-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-timeline-event-heightNumber600px600px
Description
The color of the border around the TileLayout hint.
+
Description
The height of the Timeline event.
$kendo-tile-layout-hint-bgColorrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)$kendo-timeline-event-min-height-calcCalculationcalc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))calc(2 * (36px - 1px))
Description
The background color of the TileLayout hint.
+
Description
The minimum height of the Timeline event.
Description
The default slider size.
+
Description
The default size of the Slider.
Description
The default slider track wrap size.
+
Description
The default size of the Slider's track wrap.
Description
The spacing of the slider.
+
Description
The spacing of the Slider.
Description
Font family of the slider.
+
Description
The font family of the Slider.
Description
Font size of the slider.
+
Description
The font size of the Slider.
Description
Line height of the slider.
+
Description
The line height of the Slider.
Description
The text color of the slider.
+
Description
The text color of the Slider.
Description
The size of the slider track.
+
Description
The size of the Slider track.
Description
The border radius of the slider track.
+
Description
The border radius of the Slider track.
Description
The background color of the slider track.
+
Description
The background color of the Slider track.
Description
The border color of the slider track.
+
Description
The border color of the Slider track.
Description
The hover background color of the slider track.
+
Description
The background color of the hovered Slider track.
Description
The hover border color of the slider track.
+
Description
The border color of the hovered Slider track.
Description
The focus background color of the slider track.
+
Description
The background color of the focused Slider track.
Description
The focus border color of the slider track.
+
Description
The border color of the focused Slider track.
Description
The selection background color of the slider track.
+
Description
The background color of the Slider's track selection.
Description
The default size of the slider thumb.
+
Description
The default size of the Slider thumb.
Description
The default border width of the slider thumb.
+
Description
The default border width of the Slider thumb.
Description
The border radius of the slider thumb.
+
Description
The border radius of the Slider thumb.
Description
The active transition scale of the slider thumb.
+
Description
The transition scale of the active Slider thumb.
Description
The active size of the slider thumb.
+
Description
The size of the active Slider thumb.
Description
The background color of the slider thumb.
+
Description
The background color of the Slider thumb.
Description
The text color of the slider thumb.
+
Description
The text color of the Slider thumb.
Description
The border color of the slider thumb.
+
Description
The border color of the Slider thumb.
Description
The gradient of the slider thumb.
+
Description
The gradient of the Slider thumb.
Description
The hover background color of the slider thumb.
+
Description
The background color of the hovered Slider thumb.
Description
The hover text color of the slider thumb.
+
Description
The text color of the hovered Slider thumb.
Description
The hover border color of the slider thumb.
+
Description
The border color of the hovered Slider thumb.
Description
The hover gradient of the slider thumb.
+
Description
The gradient of the hovered Slider thumb.
Description
The active background color of the slider thumb.
+
Description
The background color of the active Slider thumb.
Description
The active text color of the slider thumb.
+
Description
The text color of the active Slider thumb.
Description
The active border color of the slider thumb.
+
Description
The border color of the active Slider thumb.
Description
The active gradient of the slider thumb.
+
Description
The gradient of the active Slider thumb.
Description
The focus background color of the slider thumb.
+
Description
The background color of the focused Slider thumb.
Description
The focus text color of the slider thumb.
+
Description
The text color of the focused Slider thumb.
Description
The focus border color of the slider thumb.
+
Description
The border color of the focused Slider thumb.
Description
The focus gradient of the slider thumb.
+
Description
The gradient of the focused Slider thumb.
Description
The text color of the disabled slider.
+
Description
The text color of the disabled Slider.
Description
The background color of the disabled slider track.
+
Description
The background color of the disabled Slider track.
Description
The selection background color of the disabled slider track.
+
Description
The background color of the disabled Slider's track selection.
Description
The background color of the disabled slider thumb.
+
Description
The background color of the disabled Slider thumb.
Description
The transition speed of the slider.
+
Description
The transition speed of the Slider.
Description
The transition function function.
+
Description
The transition function of the Slider.
Description
The transition speed of the slider thumb.
+
Description
The transition speed of the Slider thumb.
Description
The transition function of the slider thumb.
+
Description
The transition function of the Slider thumb.
Description
The horizontal spacing of the timeline.
+
Description
The horizontal spacing of the Timeline.
Description
The vertical spacing of the timeline.
+
Description
The vertical spacing of the Timeline.
Description
The padding between the items in the timeline.
+
Description
The padding between the Timeline's track items.
Description
The font family of the timeline.
+
Description
The font family of the Timeline.
Description
The font size of the timeline.
+
Description
The font size of the Timeline.
Description
The line height of the timeline.
+
Description
The line height of the Timeline.
Description
The horizontal mobile spacing of the timeline.
+
Description
The horizontal spacing of the mobile Timeline.
Description
The vertical mobile spacing of the timeline.
+
Description
The vertical spacing of the mobile Timeline.
Description
The track arrow width of the timeline.
+
Description
The width of the Timeline track arrow.
Description
The track arrow height of the timeline.
+
Description
The height of the Timeline track arrow.
Description
The size of the track in the timeline.
+
Description
The size of the Timeline track.
Description
The bottom padding of the wrapper of the track in the timeline.
+
Description
The bottom padding of the Timeline's track wrapper.
Description
The border width of the track in the timeline.
+
Description
The border width of the Timeline track.
Description
The bottom margin of the track in the timeline.
+
Description
The bottom margin of the Timeline track.
Description
The bottom of the track in the timeline.
+
Description
The bottom offset of the Timeline track.
Description
The left of the track in the timeline.
+
Description
The left offset of the Timeline track.
Description
The right of the track in the timeline.
+
Description
The right offset of the Timeline track.
Description
The background of the track in the timeline.
+
Description
The background color of the Timeline track.
Description
The border color of the track in the timeline.
+
Description
The border color of the Timeline track.
Description
The inset block end of the arrow in the timeline.
+
Description
The block end inset of the Timeline arrow.
Description
The disabled background of the arrow in the timeline.
+
Description
The background color of the disabled Timeline arrow.
Description
The disabled text of the arrow in the timeline.
+
Description
The text color of the disabled Timeline arrow.
Description
The disabled border color of the arrow in the timeline.
+
Description
The border color of the disabled Timeline arrow.
Description
The offset of the track event in the timeline.
+
Description
The offset of the Timeline track event.
Description
The horizontal padding of the flag in the timeline.
+
Description
The horizontal padding of the Timeline flag.
Description
The vertical padding of the flag in the timeline.
+
Description
The vertical padding of the Timeline flag.
Description
The border radius of the flag in the timeline.
+
Description
The border radius of the Timeline flag.
Description
The line height of the flag in the timeline.
+
Description
The line height of the Timeline flag.
Description
The box shadow of the flag in the timeline.
+
Description
The box shadow of the Timeline flag.
Description
The min widht of the flag in the timeline.
+
Description
The minimum width of the Timeline flag.
Description
The max width of the flag in the timeline.
+
Description
The maximum width of the Timeline flag.
Description
The max width of the mobile flag in the timeline.
+
Description
The maximum width of the mobile Timeline flag.
Description
The min width of the horizontal flag in the timeline.
+
Description
The minimum width of the horizontal Timeline flag.
Description
The background of the flag in the timeline.
+
Description
The background color of the Timeline flag.
Description
The text of the flag in the timeline.
+
Description
The text color of the Timeline flag.
Description
The width of the flag callout in the timeline.
+
Description
The width of the Timeline's flag callout.
Description
The height of the flag callout in the timeline.
+
Description
The height of the Timeline's flag callout.
Description
The offset bottom of the flag in the timeline.
+
Description
The bottom offset of the Timeline flag.
Description
The bottom margin of the flag in the timeline.
+
Description
The bottom margin of the Timeline flag.
Description
The background of the card header in the timeline.
+
Description
The background color of the Timeline's Card header.
Description
The text of the card header in the timeline.
+
Description
The text color of the Timeline's Card header.
Description
The border of the card body scroll in the timeline.
+
Description
The border of the Timeline's Card body scroll.
Description
The background of the card body scroll of the timeline.
+
Description
The background color of the Timeline's Card body scroll.
Description
The hover of the card scroll thumb in the timeline.
+
Description
The color of the Timeline's hovered card scroll thumb.
Description
The text of the date body in the timeline.
+
Description
The text color of the Timeline date body.
Description
The width of the date in the timeline.
+
Description
The width of the Timeline date.
Description
The bottom margin of the date in the timeline.
+
Description
The bottom margin of the Timeline date.
Description
The padding of the vertical timeline.
+
Description
The padding of the vertical Timeline.
Description
The padding of the vertical dates timeline.
+
Description
The padding of the vertical Timeline date.
Description
The border radius of the vertical timeline.
+
Description
The border radius of the vertical Timeline.
Description
The padding of the vertical mobile timeline.
+
Description
The padding of the vertical mobile Timeline.
Description
The padding of the vertical mobile dates in the timeline.
+
Description
The padding of the vertical mobile Timeline date.
Description
The width of the circle in the timeline
+
Description
The width of the Timeline circle.
Description
The height of the circle in the timeline.
+
Description
The height of the Timeline circle.
Description
The background of the circle in the timeline.
+
Description
The background color of the Timeline circle.
Description
The width of the events in the timeline.
+
Description
The width of the Timeline event.
Description
The height of the events in the timeline.
+
Description
The height of the Timeline event.
Description
The min height of the events in the timeline.
+
Description
The minimum height of the Timeline event.
Description
The spacing of the icons in the timeline.
+
Description
The spacing of the Timeline icons.
Description
The default slider size.
+
Description
The default size of the Slider.
Description
The default slider track wrap size.
+
Description
The default size of the Slider's track wrap.
Description
The spacing of the slider.
+
Description
The spacing of the Slider.
Description
Font family of the slider.
+
Description
The font family of the Slider.
Description
Font size of the slider.
+
Description
The font size of the Slider.
Description
Line height of the slider.
+
Description
The line height of the Slider.
Description
The text color of the slider.
+
Description
The text color of the Slider.
Description
The size of the slider track.
+
Description
The size of the Slider track.
Description
The border radius of the slider track.
+
Description
The border radius of the Slider track.
Description
The background color of the slider track.
+
Description
The background color of the Slider track.
Description
The border color of the slider track.
+
Description
The border color of the Slider track.
Description
The hover background color of the slider track.
+
Description
The background color of the hovered Slider track.
Description
The hover border color of the slider track.
+
Description
The border color of the hovered Slider track.
Description
The focus background color of the slider track.
+
Description
The background color of the focused Slider track.
Description
The focus border color of the slider track.
+
Description
The border color of the focused Slider track.
Description
The selection background color of the slider track.
+
Description
The background color of the Slider's track selection.
Description
The default size of the slider thumb.
+
Description
The default size of the Slider thumb.
Description
The default border width of the slider thumb.
+
Description
The default border width of the Slider thumb.
Description
The border radius of the slider thumb.
+
Description
The border radius of the Slider thumb.
Description
The active transition scale of the slider thumb.
+
Description
The transition scale of the active Slider thumb.
Description
The active size of the slider thumb.
+
Description
The size of the active Slider thumb.
Description
The background color of the slider thumb.
+
Description
The background color of the Slider thumb.
Description
The text color of the slider thumb.
+
Description
The text color of the Slider thumb.
Description
The border color of the slider thumb.
+
Description
The border color of the Slider thumb.
Description
The gradient of the slider thumb.
+
Description
The gradient of the Slider thumb.
Description
The hover background color of the slider thumb.
+
Description
The background color of the hovered Slider thumb.
Description
The hover text color of the slider thumb.
+
Description
The text color of the hovered Slider thumb.
Description
The hover border color of the slider thumb.
+
Description
The border color of the hovered Slider thumb.
Description
The hover gradient of the slider thumb.
+
Description
The gradient of the hovered Slider thumb.
Description
The active background color of the slider thumb.
+
Description
The background color of the active Slider thumb.
Description
The active text color of the slider thumb.
+
Description
The text color of the active Slider thumb.
Description
The active border color of the slider thumb.
+
Description
The border color of the active Slider thumb.
Description
The active gradient of the slider thumb.
+
Description
The gradient of the active Slider thumb.
Description
The focus background color of the slider thumb.
+
Description
The background color of the focused Slider thumb.
Description
The focus text color of the slider thumb.
+
Description
The text color of the focused Slider thumb.
Description
The focus border color of the slider thumb.
+
Description
The border color of the focused Slider thumb.
Description
The focus gradient of the slider thumb.
+
Description
The gradient of the focused Slider thumb.
Description
The text color of the disabled slider.
+
Description
The text color of the disabled Slider.
Description
The background color of the disabled slider track.
+
Description
The background color of the disabled Slider track.
Description
The selection background color of the disabled slider track.
+
Description
The background color of the disabled Slider's track selection.
Description
The background color of the disabled slider thumb.
+
Description
The background color of the disabled Slider thumb.
Description
The transition speed of the slider.
+
Description
The transition speed of the Slider.
Description
The transition function function.
+
Description
The transition function of the Slider.
Description
The transition speed of the slider thumb.
+
Description
The transition speed of the Slider thumb.
Description
The transition function of the slider thumb.
+
Description
The transition function of the Slider thumb.
Description
The horizontal spacing of the timeline.
+
Description
The horizontal spacing of the Timeline.
Description
The vertical spacing of the timeline.
+
Description
The vertical spacing of the Timeline.
Description
The padding between the items in the timeline.
+
Description
The padding between the Timeline's track items.
Description
The font family of the timeline.
+
Description
The font family of the Timeline.
Description
The font size of the timeline.
+
Description
The font size of the Timeline.
Description
The line height of the timeline.
+
Description
The line height of the Timeline.
Description
The horizontal mobile spacing of the timeline.
+
Description
The horizontal spacing of the mobile Timeline.
Description
The vertical mobile spacing of the timeline.
+
Description
The vertical spacing of the mobile Timeline.
Description
The track arrow width of the timeline.
+
Description
The width of the Timeline track arrow.
Description
The track arrow height of the timeline.
+
Description
The height of the Timeline track arrow.
Description
The size of the track in the timeline.
+
Description
The size of the Timeline track.
Description
The bottom padding of the wrapper of the track in the timeline.
+
Description
The bottom padding of the Timeline's track wrapper.
Description
The border width of the track in the timeline.
+
Description
The border width of the Timeline track.
Description
The bottom margin of the track in the timeline.
+
Description
The bottom margin of the Timeline track.
Description
The bottom of the track in the timeline.
+
Description
The bottom offset of the Timeline track.
Description
The left of the track in the timeline.
+
Description
The left offset of the Timeline track.
Description
The right of the track in the timeline.
+
Description
The right offset of the Timeline track.
Description
The background of the track in the timeline.
+
Description
The background color of the Timeline track.
Description
The border color of the track in the timeline.
+
Description
The border color of the Timeline track.
Description
The inset block end of the arrow in the timeline.
+
Description
The block end inset of the Timeline arrow.
Description
The disabled background of the arrow in the timeline.
+
Description
The background color of the disabled Timeline arrow.
Description
The disabled text of the arrow in the timeline.
+
Description
The text color of the disabled Timeline arrow.
Description
The disabled border color of the arrow in the timeline.
+
Description
The border color of the disabled Timeline arrow.
Description
The offset of the track event in the timeline.
+
Description
The offset of the Timeline track event.
Description
The horizontal padding of the flag in the timeline.
+
Description
The horizontal padding of the Timeline flag.
Description
The vertical padding of the flag in the timeline.
+
Description
The vertical padding of the Timeline flag.
Description
The border radius of the flag in the timeline.
+
Description
The border radius of the Timeline flag.
Description
The line height of the flag in the timeline.
+
Description
The line height of the Timeline flag.
Description
The box shadow of the flag in the timeline.
+
Description
The box shadow of the Timeline flag.
Description
The min widht of the flag in the timeline.
+
Description
The minimum width of the Timeline flag.
Description
The max width of the flag in the timeline.
+
Description
The maximum width of the Timeline flag.
Description
The max width of the mobile flag in the timeline.
+
Description
The maximum width of the mobile Timeline flag.
Description
The min width of the horizontal flag in the timeline.
+
Description
The minimum width of the horizontal Timeline flag.
Description
The background of the flag in the timeline.
+
Description
The background color of the Timeline flag.
Description
The text of the flag in the timeline.
+
Description
The text color of the Timeline flag.
Description
The width of the flag callout in the timeline.
+
Description
The width of the Timeline's flag callout.
Description
The height of the flag callout in the timeline.
+
Description
The height of the Timeline's flag callout.
Description
The offset bottom of the flag in the timeline.
+
Description
The bottom offset of the Timeline flag.
Description
The bottom margin of the flag in the timeline.
+
Description
The bottom margin of the Timeline flag.
Description
The background of the card header in the timeline.
+
Description
The background color of the Timeline's Card header.
Description
The text of the card header in the timeline.
+
Description
The text color of the Timeline's Card header.
Description
The border of the card body scroll in the timeline.
+
Description
The border of the Timeline's Card body scroll.
Description
The background of the card body scroll of the timeline.
+
Description
The background color of the Timeline's Card body scroll.
Description
The hover of the card scroll thumb in the timeline.
+
Description
The color of the Timeline's hovered card scroll thumb.
Description
The text of the date body in the timeline.
+
Description
The text color of the Timeline date body.
Description
The width of the date in the timeline.
+
Description
The width of the Timeline date.
Description
The bottom margin of the date in the timeline.
+
Description
The bottom margin of the Timeline date.
Description
The padding of the vertical timeline.
+
Description
The padding of the vertical Timeline.
Description
The padding of the vertical dates timeline.
+
Description
The padding of the vertical Timeline date.
Description
The border radius of the vertical timeline.
+
Description
The border radius of the vertical Timeline.
Description
The padding of the vertical mobile timeline.
+
Description
The padding of the vertical mobile Timeline.
Description
The padding of the vertical mobile dates in the timeline.
+
Description
The padding of the vertical mobile Timeline date.
Description
The width of the circle in the timeline
+
Description
The width of the Timeline circle.
Description
The height of the circle in the timeline.
+
Description
The height of the Timeline circle.
Description
The background of the circle in the timeline.
+
Description
The background color of the Timeline circle.
Description
The width of the events in the timeline.
+
Description
The width of the Timeline event.
Description
The height of the events in the timeline.
+
Description
The height of the Timeline event.
Description
The min height of the events in the timeline.
+
Description
The minimum height of the Timeline event.
Description
The spacing of the icons in the timeline.
+
Description
The spacing of the Timeline icons.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-slider-sizeNumber200px200px
Description
The default size of the Slider.
+
$kendo-slider-tick-sizeNumber2px2px
Description
The default size of the Slider tick.
+
$kendo-slider-alt-sizeNumber36px36px
Description
The default size of the Slider's track wrap.
+
$kendo-slider-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Slider.
+
$kendo-slider-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Slider.
+
$kendo-slider-line-heightNumber$kendo-line-height-md2
Description
The line height of the Slider.
+
$kendo-slider-button-offsetNumber22px22px
Description
The offset of the Slider Buttons.
+
$kendo-slider-button-sizeNumber36px36px
Description
The size of the Slider Buttons.
+
$kendo-slider-button-spacingNumber($kendo-slider-button-size + $kendo-slider-button-offset)58px
Description
The spacing of the Slider Buttons.
+
$kendo-slider-button-focus-shadowNullnullnull
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thicknessNumber2px2px
Description
The thickness of the Slider track.
+
$kendo-slider-draghandle-sizeNumber14px14px
Description
The size of the Slider drag handle.
+
$kendo-slider-draghandle-border-widthNumber0px0px
Description
The border width of the Slider drag handle.
+
$kendo-slider-draghandle-active-scaleNumber11
Description
The transition scale of the active Slider drag handle.
+
$kendo-slider-draghandle-active-sizeNumber20px20px
Description
The size of the active Slider drag handle.
+
$kendo-slider-draghandle-bgColor$kendo-color-primary#3f51b5
Description
The background color of the Slider drag handle.
+
$kendo-slider-draghandle-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Slider drag handle.
+
$kendo-slider-draghandle-borderColor$kendo-color-primary#3f51b5
Description
The border color of the Slider drag handle.
+
$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
+
$kendo-slider-draghandle-hover-bgNullnullnull
Description
The background color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-textNullnullnull
Description
The text color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-borderNullnullnull
Description
The border color of the hovered Slider drag handle.
+
$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The gradient of the hovered Slider drag handle.
+
$kendo-slider-draghandle-pressed-bgNullnullnull
Description
The background color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-textNullnullnull
Description
The text color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-borderNullnullnull
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 0 11px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 11px rgba(63, 81, 181, 0.25)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the Slider.
+
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function of the Slider.
+
$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The transition speed of the Slider drag handle.
+
$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The transition function of the Slider drag handle.
+
$kendo-slider-track-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 ))#bac0e4
Description
The background color of the Slider track.
+
$kendo-slider-selection-bgColor$kendo-color-primary#3f51b5
Description
The background color of the Slider's track selection.
+
$kendo-slider-disabled-opacityNumber.650.65
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-timeline.md b/packages/material/docs/customization-timeline.md new file mode 100644 index 00000000000..aa340846899 --- /dev/null +++ b/packages/material/docs/customization-timeline.md @@ -0,0 +1,538 @@ +--- +title: Customizing Timeline +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_timeline +position: 9 +--- + +# 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.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md index 9eacdc55760..dab5bcf3a50 100644 --- a/packages/material/docs/customization.md +++ b/packages/material/docs/customization.md @@ -15465,7 +15465,7 @@ The following table lists the available variables for customizing the Material t -### Split-button +### Slider @@ -15483,309 +15483,359 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - -
$kendo-split-button-focus-shadowNull$kendo-button-focus-shadownull$kendo-slider-sizeNumber200px200px
Description
The focus shadow of the SplitButton.
+
Description
The default size of the Slider.
$kendo-split-button-arrow-padding-x$kendo-slider-tick-size Numberk-map-get( $kendo-spacing, 1 )4px2px2px
Description
The horizontal padding of the arrow Button.
+
Description
The default size of the Slider tick.
$kendo-split-button-sm-arrow-padding-x$kendo-slider-alt-size Numberk-map-get( $kendo-spacing, 1 )4px36px36px
Description
The horizontal padding of the small arrow Button.
+
Description
The default size of the Slider's track wrap.
$kendo-split-button-md-arrow-padding-x$kendo-slider-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Slider.
+
$kendo-slider-font-size Numberk-map-get( $kendo-spacing, 1 )4px$kendo-font-size-md14px
Description
The horizontal padding of the medium arrow Button.
+
Description
The font size of the Slider.
$kendo-split-button-lg-arrow-padding-x$kendo-slider-line-height Numberk-map-get( $kendo-spacing, 1 )4px$kendo-line-height-md2
Description
The horizontal padding of the large arrow Button.
+
Description
The line height of the Slider.
$kendo-split-button-arrow-padding-y$kendo-slider-button-offset Number$kendo-button-padding-y8px22px22px
Description
The vertical padding of the arrow Button.
+
Description
The offset of the Slider Buttons.
$kendo-split-button-sm-arrow-padding-y$kendo-slider-button-size Number$kendo-button-sm-padding-y6px36px36px
Description
The vertical padding of the small arrow Button.
+
Description
The size of the Slider Buttons.
$kendo-split-button-md-arrow-padding-y$kendo-slider-button-spacing Number$kendo-button-md-padding-y8px($kendo-slider-button-size + $kendo-slider-button-offset)58px
Description
The vertical padding of the medium arrow Button.
+
Description
The spacing of the Slider Buttons.
$kendo-split-button-lg-arrow-padding-y$kendo-slider-button-focus-shadowNullnullnull
Description
The shadow of the focused Slider Buttons.
+
$kendo-slider-track-thickness Number$kendo-button-lg-padding-y10px2px2px
Description
The vertical padding of the large arrow Button.
+
Description
The thickness of the Slider track.
- -### Splitter - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-splitter-border-width
$kendo-slider-draghandle-size Number1px1px14px14px
Description
The width of the border around the Splitter.
+
Description
The size of the Slider drag handle.
$kendo-splitter-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-slider-draghandle-border-widthNumber0px0px
Description
The font family of the Splitter.
+
Description
The border width of the Slider drag handle.
$kendo-splitter-font-size$kendo-slider-draghandle-active-scale Number$kendo-font-size-md14px11
Description
The font size of the Splitter.
+
Description
The transition scale of the active Slider drag handle.
$kendo-splitter-line-height$kendo-slider-draghandle-active-size Number$kendo-line-height-md220px20px
Description
The line height of the Splitter.
+
Description
The size of the active Slider drag handle.
$kendo-splitter-bg$kendo-slider-draghandle-bg Color$kendo-component-bg#ffffff$kendo-color-primary#3f51b5
Description
The background color of the Splitter.
+
Description
The background color of the Slider drag handle.
$kendo-splitter-text$kendo-slider-draghandle-text Color$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-color-primary-contrastwhite
Description
The text color of the Splitter.
+
Description
The text color of the Slider drag handle.
$kendo-splitter-border$kendo-slider-draghandle-border Color$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-color-primary#3f51b5
Description
The border color of the Splitter.
+
Description
The border color of the Slider drag handle.
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px$kendo-slider-draghandle-gradientNullnullnull
Description
The size of the Splitter split bar.
+
Description
The gradient of the Slider drag handle.
$kendo-splitter-drag-handle-lengthNumber20px20px$kendo-slider-draghandle-hover-bgNullnullnull
Description
The length of the Splitter drag handle.
+
Description
The background color of the hovered Slider drag handle.
$kendo-splitter-drag-handle-thicknessNumber2px2px$kendo-slider-draghandle-hover-textNullnullnull
Description
The thickness of the Splitter drag handle.
+
Description
The text color of the hovered Slider drag handle.
$kendo-splitter-drag-icon-marginNumber7px7px$kendo-slider-draghandle-hover-borderNullnullnull
Description
The margin of the Splitter drag handle icon.
+
Description
The border color of the hovered Slider drag handle.
$kendo-splitter-collapse-icon-padding-x$kendo-slider-draghandle-hover-gradient Null null null
Description
The horizontal padding of the collapse icon in the Splitter.
+
Description
The gradient of the hovered Slider drag handle.
$kendo-splitter-collapse-icon-padding-y$kendo-slider-draghandle-pressed-bgNullnullnull
Description
The background color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-textNullnullnull
Description
The text color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-borderNullnullnull
Description
The border color of the active Slider drag handle.
+
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
+
$kendo-slider-draghandle-focus-shadowList0 0 0 11px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 11px rgba(63, 81, 181, 0.25)
Description
The shadow of the focused Slider drag handle.
+
$kendo-slider-transition-speed Numberk-map-get( $kendo-spacing, .5 )2px.3s0.3s
Description
The vertical padding of the collapse icon in the Splitter.
+
Description
The transition speed of the Slider.
$kendo-splitbar-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-splitter-bg, 1 ))#ebebeb$kendo-slider-transition-functionStringease-outease-out
Description
The background color of the Splitter split bar.
+
Description
The transition function of the Slider.
$kendo-splitbar-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The text color of the Splitter split bar.
+
Description
The transition speed of the Slider drag handle.
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e2e2e2$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The hover background color of the Splitter split bar.
+
Description
The transition function of the Slider drag handle.
$kendo-splitbar-hover-text$kendo-slider-track-bg Color$kendo-splitbar-textrgba(0, 0, 0, 0.54)if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 ))#bac0e4
Description
The hover text color of the Splitter split bar.
+
Description
The background color of the Slider track.
$kendo-splitbar-selected-bg$kendo-slider-selection-bg Color $kendo-color-primary #3f51b5
Description
The selected background color of the Splitter split bar.
+
Description
The background color of the Slider's track selection.
$kendo-splitbar-selected-textColor$kendo-color-primary-contrastwhite$kendo-slider-disabled-opacityNumber.650.65
Description
The selected text color of the Splitter split bar.
+
-### Stepper +### Split-button @@ -15803,1194 +15853,1514 @@ The following table lists the available variables for customizing the Material t - + - + - - - - - - - - + + + + + + - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - + +
$kendo-stepper-margin-x$kendo-split-button-focus-shadow Nullnull$kendo-button-focus-shadow null
Description
The horizontal margin the Stepper.
+
Description
The focus shadow of the SplitButton.
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+ 		$kendo-split-button-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the arrow Button.
$kendo-stepper-padding-xNullnullnull$kendo-split-button-sm-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding the Stepper.
+
Description
The horizontal padding of the small arrow Button.
$kendo-stepper-padding-yNullnullnull$kendo-split-button-md-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding the Stepper.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-stepper-label-margin-x$kendo-split-button-lg-arrow-padding-x Number12px12pxk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin the Stepper label.
+
Description
The horizontal padding of the large arrow Button.
$kendo-stepper-label-padding-x$kendo-split-button-arrow-padding-y Number12px12px$kendo-button-padding-y8px
Description
The horizontal padding the Stepper label.
+
Description
The vertical padding of the arrow Button.
$kendo-stepper-label-padding-y$kendo-split-button-sm-arrow-padding-y Number5px5px$kendo-button-sm-padding-y6px
Description
The vertical padding the Stepper label.
+
Description
The vertical padding of the small arrow Button.
$kendo-stepper-border-width$kendo-split-button-md-arrow-padding-y Number0px0px$kendo-button-md-padding-y8px
Description
The width of the border around the Stepper.
+
Description
The vertical padding of the medium arrow Button.
$kendo-stepper-inline-content-padding-x$kendo-split-button-lg-arrow-padding-y Number20px20px$kendo-button-lg-padding-y10px
Description
The horizontal padding of the Stepper content.
+
Description
The vertical padding of the large arrow Button.
$kendo-stepper-inline-content-padding-y
+ +### Splitter + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - - - - - - - - + +
NameTypeDefault valueComputed value
$kendo-splitter-border-width Number10px10px1px1px
Description
The vertical padding of the Stepper content.
+
Description
The width of the border around the Splitter.
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px$kendo-splitter-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
+
Description
The font family of the Splitter.
$kendo-stepper-line-height$kendo-splitter-font-size Numberk-math-div( 20, 14 )1.4285714286$kendo-font-size-md14px
+
Description
The font size of the Splitter.
$kendo-stepper-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-splitter-line-heightNumber$kendo-line-height-md2
+
Description
The line height of the Splitter.
$kendo-stepper-bgNullnullnull$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper.
+
Description
The background color of the Splitter.
$kendo-stepper-text$kendo-splitter-text Color $kendo-component-text rgba(0, 0, 0, 0.87)
Description
The text color of the Stepper.
+
Description
The text color of the Splitter.
$kendo-stepper-borderNullnullnull$kendo-splitter-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Stepper.
+
Description
The border color of the Splitter.
$kendo-stepper-indicator-width$kendo-splitter-splitbar-size Number28px28pxk-map-get( $kendo-spacing, 3 )12px
Description
The width of the Stepper indicator.
+
Description
The size of the Splitter split bar.
$kendo-stepper-indicator-height$kendo-splitter-drag-handle-length Number$kendo-stepper-indicator-width28px20px20px
Description
The height of the Stepper indicator.
+
Description
The length of the Splitter drag handle.
$kendo-stepper-indicator-border-radius$kendo-splitter-drag-handle-thickness Number50%50%2px2px
Description
The border radius of the Stepper indicator.
+
Description
The thickness of the Splitter drag handle.
$kendo-stepper-indicator-border-width$kendo-splitter-drag-icon-margin Number1px1px7px7px
Description
The border width of the Stepper indicator.
+
Description
The margin of the Splitter drag handle icon.
$kendo-stepper-indicator-focus-border-widthNumber1px1px$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The border width of the focused Stepper indicator.
+
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-size$kendo-splitter-collapse-icon-padding-y Number2pxk-map-get( $kendo-spacing, .5 ) 2px
Description
The size of the focused Stepper indicator.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-stepper-indicator-focus-offsetNumber3px3px$kendo-splitbar-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-splitter-bg, 1 ))#ebebeb
Description
The offset of the Stepper's focused indicator.
+
Description
The background color of the Splitter split bar.
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)$kendo-splitbar-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The calculated offset of the Stepper's focused indicator.
+
Description
The text color of the Splitter split bar.
$kendo-stepper-indicator-bg$kendo-splitbar-hover-bg Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e2e2e2
Description
The background color of the Stepper indicator.
+
Description
The hover background color of the Splitter split bar.
$kendo-stepper-indicator-text$kendo-splitbar-hover-text Color$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-splitbar-textrgba(0, 0, 0, 0.54)
Description
The text color of the Stepper indicator.
+
Description
The hover text color of the Splitter split bar.
$kendo-stepper-indicator-border$kendo-splitbar-selected-bg Color$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-color-primary#3f51b5
Description
The border color of the Stepper indicator.
+
Description
The selected background color of the Splitter split bar.
$kendo-stepper-indicator-hover-bg$kendo-splitbar-selected-text Colorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb$kendo-color-primary-contrastwhite
Description
The background color of the hovered Stepper indicator.
+
Description
The selected text color of the Splitter split bar.
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
-
$kendo-stepper-indicator-hover-border
+ +### Stepper + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - - - - - - - - - - + - - - - - - - - - - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-stepper-margin-x Null null null
Description
The border color of the hovered Stepper indicator.
+
Description
The horizontal margin the Stepper.
$kendo-stepper-indicator-disabled-bg$kendo-stepper-margin-y Null null null
Description
The background color of the disabled Stepper indicator.
+
Description
The vertical margin the Stepper.
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)$kendo-stepper-padding-xNullnullnull
Description
The text color of the disabled Stepper indicator.
+
Description
The horizontal padding the Stepper.
$kendo-stepper-indicator-disabled-border$kendo-stepper-padding-y Null null null
Description
The border color of the disabled Stepper indicator.
+
Description
The vertical padding the Stepper.
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#3f51b5$kendo-stepper-label-margin-xNumber12px12px
Description
The background color of the Stepper's done indicator.
+
Description
The horizontal margin the Stepper label.
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white$kendo-stepper-label-padding-xNumber12px12px
Description
The text color of the Stepper's done indicator.
+
Description
The horizontal padding the Stepper label.
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#3f51b5$kendo-stepper-label-padding-yNumber5px5px
Description
The border color of the Stepper's done indicator.
+
Description
The vertical padding the Stepper label.
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#3a4ba7$kendo-stepper-border-widthNumber0px0px
Description
The background color of the Stepper's hovered done indicator.
+
Description
The width of the border around the Stepper.
$kendo-stepper-indicator-done-hover-textNullnullnull$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The text color of the Stepper's hovered done indicator.
+
Description
The horizontal padding of the Stepper content.
$kendo-stepper-indicator-done-hover-borderNullnullnull$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The border color of the Stepper's hovered done indicator.
+
Description
The vertical padding of the Stepper content.
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#8c97d3$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white$kendo-stepper-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The text color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#8c97d3$kendo-stepper-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The border color of the Stepper's disabled done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#3f51b5$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper current indicator.
+
Description
The background color of the Stepper.
$kendo-stepper-indicator-current-text$kendo-stepper-text Color$kendo-stepper-indicator-done-textwhite$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Stepper current indicator.
+
Description
The text color of the Stepper.
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#3f51b5$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper current indicator.
+
Description
The border color of the Stepper.
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#3a4ba7$kendo-stepper-indicator-widthNumber28px28px
Description
The background color of the Stepper's hovered current indicator.
+
Description
The width of the Stepper indicator.
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The text color of the Stepper's hovered current indicator.
+
Description
The height of the Stepper indicator.
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border color of the Stepper's hovered current indicator.
+
Description
The border radius of the Stepper indicator.
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#8c97d3$kendo-stepper-indicator-border-widthNumber1px1px
Description
The background color of the Stepper's disabled current indicator.
+
Description
The border width of the Stepper indicator.
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The text color of the Stepper's disabled current indicator.
+
Description
The border width of the focused Stepper indicator.
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#8c97d3$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The border color of the Stepper's disabled current indicator.
+
Description
The size of the focused Stepper indicator.
$kendo-stepper-label-textNullnullnull$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The text color of the Stepper label.
+
Description
The offset of the Stepper's focused indicator.
$kendo-stepper-label-success-textColor$kendo-color-success#37b400$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The success text color of the Stepper label.
+
Description
The calculated offset of the Stepper's focused indicator.
$kendo-stepper-label-error-text$kendo-stepper-indicator-bg Color$kendo-color-error#f31700$kendo-component-bg#ffffff
Description
The error text color of the Stepper label.
+
Description
The background color of the Stepper indicator.
$kendo-stepper-label-hover-textNullnullnull$kendo-stepper-indicator-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the hovered Stepper label.
+
Description
The text color of the Stepper indicator.
$kendo-stepper-label-disabled-text$kendo-stepper-indicator-border Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), k-map-get( $theme, disabled-text ))rgba(0, 0, 0, 0.38)$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The text color of the disabled Stepper label.
+
Description
The border color of the Stepper indicator.
$kendo-stepper-optional-label-text$kendo-stepper-indicator-hover-bg Color$kendo-subtle-textrgba(0, 0, 0, 0.54)if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The text color of the optional Stepper label.
+
Description
The background color of the hovered Stepper indicator.
$kendo-stepper-optional-label-opacity$kendo-stepper-indicator-hover-text Null null null
Description
The opacity of the optional Stepper label.
-
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the optional Stepper label.
+
Description
The text color of the hovered Stepper indicator.
$kendo-stepper-optional-label-font-style$kendo-stepper-indicator-hover-border Null null null
Description
The font style of the optional Stepper label.
-
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
Description
The border color of the hovered Stepper indicator.
$kendo-stepper-progressbar-bg$kendo-stepper-indicator-disabled-bg Null null null
Description
The background color of the Stepper ProgressBar.
+
Description
The background color of the disabled Stepper indicator.
$kendo-stepper-progressbar-textNullnullnull$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)
Description
The text color of the Stepper ProgressBar.
+
Description
The text color of the disabled Stepper indicator.
$kendo-stepper-progressbar-fill-bg$kendo-stepper-indicator-disabled-border Null null null
Description
The background color of the selected Stepper ProgressBar.
+
Description
The border color of the disabled Stepper indicator.
$kendo-stepper-progressbar-fill-textNullnullnull$kendo-stepper-indicator-done-bgColor$kendo-color-primary#3f51b5
Description
The text color of the selected Stepper ProgressBar.
+
Description
The background color of the Stepper's done indicator.
$kendo-stepper-content-transition-propertyStringheightheight$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The property name of the Stepper transition.
+
Description
The text color of the Stepper's done indicator.
$kendo-stepper-content-transition-durationNumber300ms300ms$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#3f51b5
Description
The duration of the Stepper transition.
+
Description
The border color of the Stepper's done indicator.
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#3a4ba7
Description
The timing function of the Stepper transition.
+
Description
The background color of the Stepper's hovered done indicator.
- -### Switch - - - - - - - - - - - - - - - - - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - + + + + + + + + + + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-switch-font-family
$kendo-stepper-indicator-done-hover-text Null null null
Description
The font family of the Switch.
+
Description
The text color of the Stepper's hovered done indicator.
$kendo-switch-track-border-width$kendo-stepper-indicator-done-hover-border Null null null
Description
The border width of the Switch track.
+
Description
The border color of the Stepper's hovered done indicator.
$kendo-switch-thumb-border-widthNullnullnull$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#8c97d3
Description
The border width of the Switch thumb.
+
Description
The background color of the Stepper's disabled done indicator.
$kendo-switch-label-text-transformNullnullnull$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text transform of the Switch label.
+
Description
The text color of the Stepper's disabled done indicator.
$kendo-switch-label-displayStringnonenone$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#8c97d3
Description
The display of the Switch label.
+
Description
The border color of the Stepper's disabled done indicator.
$kendo-switch-sizesMap( - sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), - md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), - lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) -)(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#3f51b5
Description
The map with the different Switch sizes.
+
Description
The background color of the Stepper current indicator.
$kendo-switch-off-track-bg$kendo-stepper-indicator-current-text Colorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 )rgba(0, 0, 0, 0.38)$kendo-stepper-indicator-done-textwhite
Description
The background of the track when the Switch is not checked.
+
Description
The text color of the Stepper current indicator.
$kendo-switch-off-track-textNullnullnull$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#3f51b5
Description
The text color of the track when the Switch is not checked.
+
Description
The border color of the Stepper current indicator.
$kendo-switch-off-track-borderNullnullnull$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#3a4ba7
Description
The border color of the track when the Switch is not checked
+
Description
The background color of the Stepper's hovered current indicator.
$kendo-switch-off-track-gradient$kendo-stepper-indicator-current-hover-text Nullnull$kendo-stepper-indicator-done-hover-text null
Description
The background gradient of the track when the Switch is not checked.
+
Description
The text color of the Stepper's hovered current indicator.
$kendo-switch-off-track-hover-bg$kendo-stepper-indicator-current-hover-border Nullnull$kendo-stepper-indicator-done-hover-border null
Description
The background of the track when the hovered Switch is not checked.
+
Description
The border color of the Stepper's hovered current indicator.
$kendo-switch-off-track-hover-textNullnullnull$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#8c97d3
Description
The text color of the track when the hovered Switch is not checked.
+
Description
The background color of the Stepper's disabled current indicator.
$kendo-switch-off-track-hover-borderNullnullnull$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The border color of the track when the hovered Switch is not checked.
+
Description
The text color of the Stepper's disabled current indicator.
$kendo-switch-off-track-hover-gradientNullnullnull$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#8c97d3
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
The border color of the Stepper's disabled current indicator.
$kendo-switch-off-track-focus-bg$kendo-stepper-label-text Null null null
Description
The background of the track when the focused Switch is not checked.
+
Description
The text color of the Stepper label.
$kendo-switch-off-track-focus-textNullnullnull$kendo-stepper-label-success-textColor$kendo-color-success#37b400
Description
The text color of the track when the focused Switch is not checked.
+
Description
The success text color of the Stepper label.
$kendo-switch-off-track-focus-border$kendo-stepper-label-error-textColor$kendo-color-error#f31700
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-text Null null null
Description
The border color of the track when the focused Switch is not checked.
+
Description
The text color of the hovered Stepper label.
$kendo-switch-off-track-focus-gradient$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), k-map-get( $theme, disabled-text ))rgba(0, 0, 0, 0.38)
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the optional Stepper label.
+
$kendo-stepper-optional-label-opacity Null null null
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
The opacity of the optional Stepper label.
$kendo-switch-off-track-focus-ring$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the optional Stepper label.
+
$kendo-stepper-optional-label-font-style Null null null
Description
The ring around the track when the focused Switch is not checked.
+
Description
The font style of the optional Stepper label.
$kendo-switch-off-track-disabled-bg$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bg Null null null
Description
The background of the track when the disabled Switch is not checked.
+
Description
The background color of the Stepper ProgressBar.
$kendo-switch-off-track-disabled-text$kendo-stepper-progressbar-text Null null null
Description
The text color of the track when the disabled Switch is not checked.
+
Description
The text color of the Stepper ProgressBar.
$kendo-switch-off-track-disabled-border$kendo-stepper-progressbar-fill-bg Null null null
Description
The border color of the track when the disabled Switch is not checked.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-switch-off-track-disabled-gradient$kendo-stepper-progressbar-fill-text Null null null
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-switch-off-thumb-bgColorif($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ))#ffffff$kendo-stepper-content-transition-propertyStringheightheight
Description
The background of the thumb when the Switch is not checked.
+
Description
The property name of the Stepper transition.
$kendo-switch-off-thumb-textNullnullnull$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The text color of the thumb when the Switch is not checked.
+
Description
The duration of the Stepper transition.
$kendo-switch-off-thumb-border$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - + - + - - + - - - - - - - - - - - + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-switch-font-family Null null null
Description
The border color of the thumb when the Switch is not checked.
+
Description
The font family of the Switch.
$kendo-switch-off-thumb-gradient$kendo-switch-track-border-width Null null null
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
The border width of the Switch track.
$kendo-switch-off-thumb-hover-bg$kendo-switch-thumb-border-width Null null null
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
The border width of the Switch thumb.
$kendo-switch-off-thumb-hover-text$kendo-switch-label-text-transform Null null null
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
The text transform of the Switch label.
$kendo-switch-off-thumb-hover-borderNullnullnull$kendo-switch-label-displayStringnonenone
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
The display of the Switch label.
$kendo-switch-off-thumb-hover-gradientNullnullnull$kendo-switch-sizesMap( + sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), + md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), + lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) +)(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
The map with the different Switch sizes.
$kendo-switch-on-track-bg$kendo-switch-off-track-bg Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 ))rgba(63, 81, 181, 0.54)rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 )rgba(0, 0, 0, 0.38)
Description
The background of the track when the Switch is checked.
+
Description
The background of the track when the Switch is not checked.
$kendo-switch-on-track-text$kendo-switch-off-track-text Null null null
Description
The text color of the track when the Switch is checked.
+
Description
The text color of the track when the Switch is not checked.
$kendo-switch-on-track-border$kendo-switch-off-track-border Null null null
Description
The border color of the track when the Switch is checked.
+
Description
The border color of the track when the Switch is not checked
$kendo-switch-on-track-gradient$kendo-switch-off-track-gradient Null null null
Description
The background gradient of the track when the Switch is checked.
+
Description
The background gradient of the track when the Switch is not checked.
$kendo-switch-on-track-hover-bg$kendo-switch-off-track-hover-bg Null null null
Description
The background of the track when the hovered Switch is checked.
+
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-on-track-hover-text$kendo-switch-off-track-hover-text Null null null
Description
The text color of the track when the hovered Switch is checked.
+
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-on-track-hover-border$kendo-switch-off-track-hover-border Null null null
Description
The border color of the track when the hovered Switch is checked.
+
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-on-track-hover-gradient$kendo-switch-off-track-hover-gradient Null null null
Description
The background gradient of the track when the hovered Switch is checked.
+
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-on-track-focus-bg$kendo-switch-off-track-focus-bg Null null null
Description
The background of the track when the focused Switch is checked.
+
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-text$kendo-switch-off-track-focus-text Null null null
Description
The text color of the track when the focused Switch is checked.
+
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-border$kendo-switch-off-track-focus-border Null null null
Description
The border color of the track when the focused Switch is checked.
+
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-gradient$kendo-switch-off-track-focus-gradient Null null null
Description
The background gradient of the track when the focused Switch is checked.
+
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-switch-on-track-focus-ring$kendo-switch-off-track-focus-ring Null null null
Description
The ring around the track when the focused Switch is checked.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-switch-on-track-disabled-bg$kendo-switch-off-track-disabled-bg Null null null
Description
The background of the track when the disabled Switch is checked.
+
Description
The background of the track when the disabled Switch is not checked.
$kendo-switch-on-track-disabled-text$kendo-switch-off-track-disabled-text Null null null
Description
The text color of the track when the disabled Switch is checked.
+
Description
The text color of the track when the disabled Switch is not checked.
$kendo-switch-on-track-disabled-border$kendo-switch-off-track-disabled-border Null null null
Description
The border color of the track when the disabled Switch is checked.
+
Description
The border color of the track when the disabled Switch is not checked.
$kendo-switch-on-track-disabled-gradient$kendo-switch-off-track-disabled-gradient Null null null
Description
The background gradient of the track when the disabled Switch is checked.
+
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-switch-on-thumb-bg$kendo-switch-off-thumb-bg Color$kendo-color-primary#3f51b5if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ))#ffffff
Description
The background of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-textNullnullnull
Description
The text color of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-borderNullnullnull
Description
The border color of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is not checked.
+
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is not checked.
+
$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is not checked.
+
$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
$kendo-switch-on-track-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 ))rgba(63, 81, 181, 0.54)
Description
The background of the track when the Switch is checked.
+
$kendo-switch-on-track-textNullnullnull
Description
The text color of the track when the Switch is checked.
+
$kendo-switch-on-track-borderNullnullnull
Description
The border color of the track when the Switch is checked.
+
$kendo-switch-on-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is checked.
+
$kendo-switch-on-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is checked.
+
$kendo-switch-on-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is checked.
+
$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is checked.
+
$kendo-switch-on-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is checked.
+
$kendo-switch-on-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is checked.
+
$kendo-switch-on-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is checked.
+
$kendo-switch-on-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is checked.
+
$kendo-switch-on-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is checked.
+
$kendo-switch-on-track-focus-ringNullnullnull
Description
The ring around the track when the focused Switch is checked.
+
$kendo-switch-on-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is checked.
+
$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is checked.
+
$kendo-switch-on-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is checked.
+
$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is checked.
+
$kendo-switch-on-thumb-bgColor$kendo-color-primary#3f51b5
Description
The background of the thumb when the Switch is checked.
@@ -17962,667 +18332,1187 @@ The following table lists the available variables for customizing the Material t 		16px
Description
The spacing of the TaskBoard columns container.
+
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
+
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the TaskBoard column.
+
$kendo-taskboard-column-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The background color of the TaskBoard column.
+
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
+
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
+
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)
Description
The border color of the focused TaskBoard column.
+
$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
The horizontal padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
The spacing of the TaskBoard column header.
+
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column header actions.
+
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard column header.
+
$kendo-taskboard-column-cards-padding-yNullnullnull
Description
The vertical padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column Card wrapper.
+
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
+
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
+
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
+
$kendo-taskboard-pane-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard pane.
+
$kendo-taskboard-pane-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the TaskBoard pane.
+
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard pane header.
+
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane actions.
+
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane actions.
+
$kendo-taskboard-card-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard Card.
+
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y8px
Description
The horizontal padding of the TaskBoard Card.
+
$kendo-taskboard-card-border-widthNumber1px1px
Description
The border width of the TaskBoard Card.
+
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius4px
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
+
$kendo-taskboard-card-textColor$kendo-card-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard Card.
+
$kendo-taskboard-card-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the TaskBoard Card.
+
$kendo-taskboard-card-shadowStringnonenone
Description
The shadow of the TaskBoard Card.
+
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
+
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)
Description
The border color of the hovered TaskBoard Card.
+
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 9% ))rgba(0, 0, 0, 0.1628)
Description
The border color of the focused TaskBoard Card.
+
$kendo-taskboard-card-focus-shadowStringnonenone
Description
The shadow of the focused TaskBoard Card.
+
$kendo-taskboard-card-selected-borderColor$kendo-color-primary-lighter#7986cb
Description
The border of the selected TaskBoard Card.
+
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#3f51b5
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#303f9f
Description
The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-column-widthNumber320px320px$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#303f9f
Description
The default width of the TaskBoard column.
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-taskboard-column-border-width$kendo-taskboard-drag-placeholder-border-width Number 1px 1px
Description
The border width of the TaskBoard column.
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-column-border-radius$kendo-taskboard-drag-placeholder-border-radius Number$kendo-border-radius-md$kendo-taskboard-card-border-radius 4px
Description
The border radius of the TaskBoard column.
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-column-bg$kendo-taskboard-drag-placeholder-bg Colorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The background color of the TaskBoard column.
-
$kendo-taskboard-column-textNullnullnullrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The text color of the TaskBoard column.
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-column-border$kendo-taskboard-drag-placeholder-border Colortransparenttransparent$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the TaskBoard column.
+
Description
The border color of the TaskBoard Card placeholder.
$kendo-taskboard-column-focus-bgNullnullnull
+ +### Tilelayout + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The background color of the focused TaskBoard column.
+
Description
The width of the border around the TileLayout.
$kendo-taskboard-column-focus-textNullnullnull$kendo-tile-layout-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The text color of the focused TaskBoard column.
+
Description
The background color of the TileLayout.
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the focused TaskBoard column.
+
Description
The horizontal padding of the TileLayout.
$kendo-taskboard-column-header-padding-y$kendo-tile-layout-padding-y Numberk-math-div( $kendo-taskboard-spacer, 2 )8px$kendo-tile-layout-padding-x16px
Description
The vertical padding of the TaskBoard column header.
+
Description
The vertical padding of the TileLayout
$kendo-taskboard-column-header-padding-x$kendo-tile-layout-card-border-width Number$kendo-taskboard-column-header-padding-y8px1px1px
Description
The horizontal padding of the TaskBoard column header.
+
Description
The width of the border around the TileLayout card.
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The spacing of the TaskBoard column header.
+
Description
The focus box shadow of the TileLayout card.
$kendo-taskboard-column-header-actions-gap$kendo-tile-layout-hint-border-width Numberk-math-div( $kendo-taskboard-spacer, 2 )8px1px1px
Description
The spacing of the TaskBoard column header actions.
+
Description
The width of the border around the TileLayout hint.
$kendo-taskboard-column-header-font-weight$kendo-tile-layout-hint-border-radius Number500500$kendo-border-radius-md4px
Description
The font weight of the TaskBoard column header.
+
Description
The radius of the border around the TileLayout hint.
$kendo-taskboard-column-header-text$kendo-tile-layout-hint-border Color$kendo-component-header-textrgba(0, 0, 0, 0.87)$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The text color of the TaskBoard column header.
+
Description
The color of the border around the TileLayout hint.
$kendo-taskboard-column-cards-padding-yNullnullnull$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The vertical padding of the TaskBoard column Card wrapper.
+
Description
The background color of the TileLayout hint.
$kendo-taskboard-column-cards-padding-xNullnullnull
+ +### Timeline + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-timeline-spacing-xNumber40px40px
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
Description
The horizontal spacing of the Timeline.
$kendo-taskboard-column-cards-gap$kendo-timeline-spacing-y Numberk-math-div( $kendo-taskboard-spacer, 2 )8px40px40px
Description
The spacing of the TaskBoard column Card wrapper.
+
Description
The vertical spacing of the Timeline.
$kendo-taskboard-pane-width$kendo-timeline-items-padding Number$kendo-taskboard-column-width320px$kendo-padding-md-x16px
Description
The default width of the TaskBoard pane.
+
Description
The padding between the Timeline's track items.
$kendo-taskboard-pane-padding-yNullnullnull$kendo-timeline-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The vertical padding of the TaskBoard pane.
+
Description
The font family of the Timeline.
$kendo-taskboard-pane-padding-xNullnullnull$kendo-timeline-font-sizeNumber$kendo-font-size-md14px
Description
The horizontal padding of the TaskBoard pane.
+
Description
The font size of the Timeline.
$kendo-taskboard-pane-border-width$kendo-timeline-line-height Number1px1px$kendo-line-height-md2
Description
The border width of the TaskBoard pane.
+
Description
The line height of the Timeline.
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff$kendo-timeline-mobile-spacing-xNumber$kendo-padding-md-x16px
Description
The background color of the TaskBoard pane.
+
Description
The horizontal spacing of the mobile Timeline.
$kendo-taskboard-pane-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-timeline-mobile-spacing-yNumber$kendo-padding-md-x16px
Description
The text color of the TaskBoard pane.
+
Description
The vertical spacing of the mobile Timeline.
$kendo-taskboard-pane-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-timeline-track-arrow-widthNumber36px36px
Description
The border color of the TaskBoard pane.
+
Description
The width of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-y$kendo-timeline-track-arrow-height Number( $kendo-taskboard-spacer * .75 )12px36px36px
Description
The vertical padding of the TaskBoard pane header.
+
Description
The height of the Timeline track arrow.
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px$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 horizontal padding of the TaskBoard pane header.
+
Description
The background color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-font-weightNumber500500$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 font weight of the TaskBoard pane header.
+
Description
The text color of the disabled Timeline track arrow.
$kendo-taskboard-pane-header-text$kendo-timeline-track-arrow-disabled-border Color$kendo-component-header-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, transparent, k-true-mix($kendo-button-border, $kendo-body-bg, 65%))white
Description
The text color of the TaskBoard pane header.
+
Description
The border color of the disabled Timeline track arrow.
$kendo-taskboard-pane-content-padding-y$kendo-timeline-track-size Number0px0px6px6px
Description
The vertical padding of the TaskBoard pane content.
+
Description
The size of the Timeline track.
$kendo-taskboard-pane-content-padding-x$kendo-timeline-track-wrap-padding-bottom Number$kendo-taskboard-spacer16pxk-math-div( $kendo-timeline-track-size, 2 )3px
Description
The horizontal padding of the TaskBoard pane content.
+
Description
The bottom padding of the Timeline's track wrapper.
$kendo-taskboard-pane-actions-padding-y$kendo-timeline-track-border-width Number( $kendo-taskboard-spacer * .75 )12px1px1px
Description
The vertical padding of the TaskBoard pane actions.
+
Description
The border width of the Timeline track.
$kendo-taskboard-pane-actions-padding-x$kendo-timeline-track-margin-bottom Number$kendo-taskboard-spacer16px18px18px
Description
The horizontal padding of the TaskBoard pane actions.
+
Description
The bottom margin of the Timeline track.
$kendo-taskboard-card-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px$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 vertical padding of the TaskBoard Card.
+
Description
The bottom offset of the Timeline track.
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y8px$kendo-timeline-track-start-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(36px - 2 * 1px)
Description
The horizontal padding of the TaskBoard Card.
+
Description
The left offset of the Timeline track.
$kendo-taskboard-card-border-widthNumber1px1px$kendo-timeline-track-end-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(36px - 2 * 1px)
Description
The border width of the TaskBoard Card.
+
Description
The right offset of the Timeline track.
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius4px$kendo-timeline-track-bgColor#e0e0e0#e0e0e0
Description
The border radius of the TaskBoard Card.
+
Description
The background color of the Timeline track.
$kendo-taskboard-card-bg$kendo-timeline-track-border-color Color$kendo-card-bg#ffffff$kendo-timeline-track-bg#e0e0e0
Description
The background color of the TaskBoard Card.
+
Description
The border color of the Timeline track.
$kendo-taskboard-card-textColor$kendo-card-textrgba(0, 0, 0, 0.87)$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 text color of the TaskBoard Card.
+
Description
The shadow of the Timeline's focused track items.
$kendo-taskboard-card-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-timeline-track-event-offsetNumber36px36px
Description
The border color of the TaskBoard Card.
+
Description
The offset of the Timeline track event.
$kendo-taskboard-card-shadowStringnonenone$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x16px
Description
The shadow of the TaskBoard Card.
+
Description
The horizontal padding of the Timeline flag.
$kendo-taskboard-card-category-border-width$kendo-timeline-flag-padding-y Number4px4px$kendo-button-padding-y8px
Description
The border width of the TaskBoard Card category.
+
Description
The vertical padding of the Timeline flag.
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.4285714286
Description
The border color of the hovered TaskBoard Card.
+
Description
The line height of the Timeline flag.
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 9% ))rgba(0, 0, 0, 0.1628)$kendo-timeline-flag-min-widthNumber80px80px
Description
The border color of the focused TaskBoard Card.
+
Description
The minimum width of the Timeline flag.
$kendo-taskboard-card-focus-shadowStringnonenone$kendo-timeline-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})calc(80px + 2 * 40px)
Description
The shadow of the focused TaskBoard Card.
+
Description
The maximum width of the Timeline flag.
$kendo-taskboard-card-selected-borderColor$kendo-color-primary-lighter#7986cb$kendo-timeline-mobile-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})calc(80px + 2 * 16px)
Description
The border of the selected TaskBoard Card.
+
Description
The maximum width of the mobile Timeline flag.
$kendo-taskboard-card-selected-shadowStringnonenone$kendo-timeline-horizontal-flag-min-widthNumber60px60px
Description
The shadow of the selected TaskBoard Card.
+
Description
The minimum width of the horizontal Timeline flag.
$kendo-taskboard-card-header-text$kendo-timeline-flag-bg Color $kendo-color-primary #3f51b5
Description
The text color of the TaskBoard Card header text.
+
Description
The background color of the Timeline flag.
$kendo-taskboard-card-header-focus-text$kendo-timeline-flag-text Color$kendo-color-primary-darker#303f9fif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg ))white
Description
The text color of the hovered TaskBoard Card header text.
+
Description
The text color of the Timeline flag.
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#303f9f$kendo-timeline-flag-callout-widthNumber10px10px
Description
The text color of the focused TaskBoard Card header text.
+
Description
The width of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-width$kendo-timeline-flag-callout-height Number1px1px10px10px
Description
The border width of the TaskBoard Card placeholder.
+
Description
The height of the Timeline's flag callout.
$kendo-taskboard-drag-placeholder-border-radius$kendo-timeline-flag-offset-bottom Number$kendo-taskboard-card-border-radius4px 4px
Description
The border radius of the TaskBoard Card placeholder.
+
Description
The bottom offset of the Timeline flag.
$kendo-taskboard-drag-placeholder-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)$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 background color of the TaskBoard Card placeholder.
+
Description
The bottom margin of the Timeline flag.
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-timeline-date-widthNumber50px50px
Description
The border color of the TaskBoard Card placeholder.
+
Description
The width of the Timeline date.
- -### Tilelayout - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-tile-layout-border-width
$kendo-timeline-date-margin-bottom Number0px0px8px8px
Description
The width of the border around the TileLayout.
+
Description
The bottom margin of the Timeline date.
$kendo-tile-layout-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5$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 background color of the TileLayout.
+
Description
The padding of the vertical Timeline.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$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 horizontal padding of the TileLayout.
+
Description
The padding of the vertical Timeline date.
$kendo-tile-layout-padding-y$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-width Number$kendo-tile-layout-padding-x16px 16px
Description
The vertical padding of the TileLayout
+
Description
The width of the Timeline circle.
$kendo-tile-layout-card-border-width$kendo-timeline-circle-height Number1px1px16px16px
Description
The width of the border around the TileLayout card.
+
Description
The height of the Timeline circle.
$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))$kendo-timeline-circle-bgColor$kendo-color-primary#3f51b5
Description
The focus box shadow of the TileLayout card.
+
Description
The background color of the Timeline circle.
$kendo-tile-layout-hint-border-width$kendo-timeline-collapse-arrow-padding-x Number1px1px$kendo-padding-sm-x8px
Description
The width of the border around the TileLayout hint.
+
Description
The horizontal padding of the Timeline collapse arrow.
$kendo-tile-layout-hint-border-radius$kendo-timeline-event-width Number$kendo-border-radius-md4px400px400px
Description
The radius of the border around the TileLayout hint.
+
Description
The width of the Timeline event.
$kendo-tile-layout-hint-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-timeline-event-heightNumber600px600px
Description
The color of the border around the TileLayout hint.
+
Description
The height of the Timeline event.
$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)$kendo-timeline-event-min-height-calcCalculationcalc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))calc(2 * (36px - 0px))
Description
The background color of the TileLayout hint.
+
Description
The minimum height of the Timeline event.