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

Customization

The following table lists the available variables for customizing the Bootstrap theme.

Variables

Common

NameTypeDefault valueComputed value
$kendo-border-radiusNumber

$border-radius

0.375rem

Description
Border radius for all components.
$base-bgColor

$gray-100

#f8f9fa

Description
The background of the components' chrome area.
$base-textColor

$body-text

#212529

Description
The text color of the components' chrome area.
$base-borderColor

try-shade( $base-bg, 1 )

#e4e5e6

Description
The border color of the components' chrome area.
$base-gradientNull

null

null

Description
The gradient background of the components' chrome area.
$hovered-bgColor

$gray-200

#e9ecef

Description
The background of hovered items.
$hovered-textColor

$base-text

#212529

Description
The text color of hovered items.
$hovered-borderColor

try-shade( $hovered-bg, 1 )

#d6d9dc

Description
The border color of hovered items.
$hovered-gradientNull

null

null

Description
The gradient background of hovered items.
$selected-bgColor

$primary

#0d6efd

Description
The background of selected items.
$selected-textColor

contrast-wcag( $selected-bg )

white

Description
The text color of selected items.
$selected-borderColor

try-shade( $selected-bg, 1 )

#0c65e9

Description
The border color of selected items.
$selected-gradientNull

null

null

Description
The gradient background of selected items.

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber

1px

1px

Description
Border width of the avatar.
$kendo-avatar-font-familyList

$font-family

system-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
Font family of the avatar.
$kendo-avatar-font-sizeNumber

$font-size

1rem

Description
Font size of the avatar.
$kendo-avatar-line-heightNumber

$line-height

1.5

Description
Line height of the avatar.
$kendo-avatar-sizesMap

( sm: map-get( $spacing, 4 ), md: map-get( $spacing, 8 ), lg: map-get( $spacing, 16 ) )

(sm: 1rem, md: 2rem, lg: 4rem)

Description
The sizes of the avatar.
$kendo-avatar-theme-colorsMap

$kendo-theme-colors

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)

Description
Theme colors map of the avatar.

Badge

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber

1px

1px

Description
Width of the border around the badge.
$kendo-badge-border-radiusNumber

$badge-border-radius

0.375rem

Description
Border radius of the badge.
$kendo-badge-padding-xNumber

$badge-padding-x

0.65em

Description
Horizontal padding of the badge.
$kendo-badge-padding-yNumber

$badge-padding-y

0.35em

Description
Vertical padding of the badge.
$kendo-badge-font-sizeNumber

$badge-font-size

0.75em

Description
Font sizes of the badge.
$kendo-badge-line-heightNumber

1

1

Description
Line heights used along with $font-size.
$kendo-badge-min-widthCalculation

calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})

calc( 1em + 0.7em + 2px)

Description
Badge min width used for circle badge.
$kendo-badge-sizesMap

( sm: ( padding-x: $kendo-badge-padding-x-sm, padding-y: $kendo-badge-padding-y-sm, font-size: $kendo-badge-font-size-sm, line-height: $kendo-badge-line-height-sm, min-width: $kendo-badge-min-width-sm ), md: ( padding-x: $kendo-badge-padding-x-md, padding-y: $kendo-badge-padding-y-md, font-size: $kendo-badge-font-size-md, line-height: $kendo-badge-line-height-md, min-width: $kendo-badge-min-width-md ), lg: ( padding-x: $kendo-badge-padding-x-lg, padding-y: $kendo-badge-padding-y-lg, font-size: $kendo-badge-font-size-lg, line-height: $kendo-badge-line-height-lg, min-width: $kendo-badge-min-width-lg ) )

(sm: (padding-x: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.35em + 2px )), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.7em + 2px )), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 1.05em + 2px )))

Description
Sizes map for the badge.

Button

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber

$btn-border-width

1px

Description
Width of the border around the button.
$kendo-button-border-radiusNull

null

null

Description
Border radius of the button.
$kendo-button-padding-xNumber

$btn-padding-x

0.75rem

Description
Horizontal padding of the button.
$kendo-button-padding-yNumber

$btn-padding-y

0.375rem

Description
Vertical padding of the button.
$kendo-button-font-familyList

$font-family

system-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
Font family of the button.
$kendo-button-font-sizeNumber

$btn-font-size

1rem

Description
Font sizes of the button.
$kendo-button-line-heightNumber

$btn-line-height

1.5

Description
Line heights used along with $font-size.
$kendo-button-calc-sizeCalculation

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )

calc( 1.5em + 0.75rem + 2px )

Description
Calculated height of the button.
$kendo-button-inner-calc-sizeCalculation

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )

calc( 1.5em + 0.75rem )

Description
Calculated inner height of the button. Without the border width.
$kendo-button-theme-colorsMap

map-merge( $kendo-theme-colors, ( "base": #e4e7eb ) )

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)

Description
Theme colors map for the button.
$kendo-button-bgColor

#e4e7eb

#e4e7eb

Description
The base background of the button.
$kendo-button-textColor

contrast-wcag( $kendo-button-bg, $gray-900 )

#212529

Description
The base text color of the button.
$kendo-button-borderColor

$kendo-button-bg

#e4e7eb

Description
The base border color of the button.
$kendo-button-gradientNull

null

null

Description
The base background gradient of the button.
$kendo-button-shadowNull

null

null

Description
The base shadow of the button.
$kendo-button-hover-bgColor

try-darken( $kendo-button-bg, 7.5% )

#ced3db

Description
The base background of hovered button.
$kendo-button-hover-textNull

null

null

Description
The base text color of hovered button.
$kendo-button-hover-borderColor

try-darken( $kendo-button-bg, 10% )

#c7cdd5

Description
The base border color of hovered button.
$kendo-button-hover-gradientNull

null

null

Description
The base background gradient of hovered button.
$kendo-button-hover-shadowNull

null

null

Description
The base shadow of hovered button.
$kendo-button-active-bgColor

try-darken( $kendo-button-bg, 10% )

#c7cdd5

Description
The base background color of active button.
$kendo-button-active-textNull

null

null

Description
The base text color of active button.
$kendo-button-active-borderColor

try-darken( $kendo-button-bg, 12.5% )

#bfc6d0

Description
The base border color of active button.
$kendo-button-active-gradientNull

null

null

Description
The base background gradient of active button.
$kendo-button-active-shadowNull

null

null

Description
The base shadow of active button.
$kendo-button-selected-bgColor

try-darken( $primary, 10% )

#0257d5

Description
The base background color of selected button.
$kendo-button-selected-textColor

contrast-wcag( $kendo-button-selected-bg )

white

Description
The text color of selected buttons.
$kendo-button-selected-borderColor

try-darken( $primary, 12.5% )

#0252c9

Description
The border color of selected buttons.
$kendo-button-selected-gradientNull

$kendo-button-active-gradient

null

Description
The background gradient of selected buttons.
$kendo-button-selected-shadowNull

$kendo-button-active-shadow

null

Description
The base shadow of selected button.
$kendo-button-focus-bgColor

try-darken( $kendo-button-bg, 10% )

#c7cdd5

Description
The base background of focused button.
$kendo-button-focus-textNull

null

null

Description
The base text color of focused button.
$kendo-button-focus-borderColor

try-darken( $kendo-button-bg, 12.5% )

#bfc6d0

Description
The base border color of focused button.
$kendo-button-focus-gradientNull

null

null

Description
The base background gradient of focused button.
$kendo-button-focus-shadowList

0 0 0 .25rem rgba( $kendo-button-border, .5 )

0 0 0 0.25rem rgba(228, 231, 235, 0.5)

Description
The base shadow of focused button.
$kendo-button-disabled-bgNull

null

null

Description
The base background of disabled button.
$kendo-button-disabled-textNull

null

null

Description
The base text color of disabled button.
$kendo-button-disabled-borderNull

null

null

Description
The base border color of disabled buttons.
$kendo-button-disabled-gradientNull

null

null

Description
The base background gradient of disabled button.
$kendo-button-disabled-shadowNull

null

null

Description
The base shadow of disabled button.
$kendo-flat-button-hover-opacityNumber

.08

0.08

Description
The overlay opacity of hovered flat button. Used to create background for the flat button.
$kendo-flat-button-focus-opacityNull

null

null

Description
The overlay opacity of focused flat button. Used to create background for the flat button.
$kendo-flat-button-active-opacityNumber

.16

0.16

Description
The overlay opacity of active flat button. Used to create background for the flat button.
$kendo-flat-button-selected-opacityNumber

.2

0.2

Description
The overlay opacity of selected flat button. Used to create background for the flat button.
$kendo-button-transitionList

$transition

color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out

Description
The color transition of the button.

Charts

NameTypeDefault valueComputed value
$series-aColor

$blue

#0d6efd

Description
The first base series color and its light and dark shades.
$series-bColor

$purple

#6f42c1

Description
The second base series color and its light and dark shades.
$series-cColor

$teal

#20c997

Description
The third base series color and its light and dark shades.
$series-dColor

$green

#198754

Description
The fourth base series color and its light and dark shades.
$series-eColor

$yellow

#ffc107

Description
The fifth base series color and its light and dark shades.
$series-fColor

$red

#dc3545

Description
The sixth base series color and its light and dark shades.
$series-1Color

$series-a

#0d6efd

Description
The series colors in order:
base, light, dark, lighter, darker
$chart-major-linesColor

rgba( if( $dark-theme, $white, $black ), .08 )

rgba(0, 0, 0, 0.08)

Description
The color of the Chart grid lines (major).
$chart-minor-linesColor

rgba( if( $dark-theme, $white, $black ), .04 )

rgba(0, 0, 0, 0.04)

Description
The color of the Chart grid lines (minor).

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber

1px

1px

Description
Border width of checkbox.
$kendo-checkbox-bgColor

$component-bg

#ffffff

Description
Background color of checkbox.
$kendo-checkbox-textNull

null

null

Description
Color of checkbox.
$kendo-checkbox-borderColor

contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 )

#ced4da

Description
Border color of checkbox.
$kendo-checkbox-hover-bgNull

null

null

Description
Background color of hovered checkbox.
$kendo-checkbox-hover-textNull

null

null

Description
Color of hovered checkbox.
$kendo-checkbox-hover-borderNull

null

null

Description
Border color of hovered checkbox.
$kendo-checkbox-checked-bgColor

$primary

#0d6efd

Description
Background color of checked checkbox.
$kendo-checkbox-checked-textColor

contrast-wcag( $kendo-checkbox-checked-bg )

white

Description
Color of checked checkbox.
$kendo-checkbox-checked-borderColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Border color of checked checkbox.
$kendo-checkbox-indeterminate-bgColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-textColor

$kendo-checkbox-checked-text

white

Description
Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-borderColor

$kendo-checkbox-checked-border

#0d6efd

Description
Border color of indeterminate checkbox.
$kendo-checkbox-focus-borderColor

try-tint( $primary, 50% )

#86b7fe

Description
Border color of focused checkbox.
$kendo-checkbox-focus-shadowList

0 0 0 .25rem rgba( $primary, .25 )

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-borderColor

$kendo-checkbox-checked-border

#0d6efd

Description
Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadowList

$kendo-checkbox-focus-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of focused and checked checkbox.
$kendo-checkbox-disabled-bgNull

null

null

Description
Background color of disabled checkbox.
$kendo-checkbox-disabled-textNull

null

null

Description
Color of disabled checkbox.
$kendo-checkbox-disabled-borderNull

null

null

Description
Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bgNull

null

null

Description
Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-textNull

null

null

Description
Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-borderNull

null

null

Description
Color of disabled and checked checkbox.
$kendo-checkbox-invalid-bgNull

null

null

Description
Background color of invalid checkbox.
$kendo-checkbox-invalid-textColor

$invalid-text

#dc3545

Description
Color of invalid checkbox.
$kendo-checkbox-invalid-borderColor

$invalid-border

#dc3545

Description
Border color of invalid checkbox.
$kendo-checkbox-indicator-typeString

image

image

Description
Type of checkbox indicator.
$kendo-checkbox-glyph-font-familyList

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

Description
Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyphString

"\e118"

"\e118"

Description
Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyphString

"\e121"

"\e121"

Description
Glyph of indeterminate checkbox indicator.
$kendo-checkbox-checked-imageString

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")

Description
Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-imageString

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")

Description
Image of checked checkbox indicator.
$kendo-checkbox-label-margin-xNumber

map-get( $spacing, 1 )

0.25rem

Description
The horizontal margin of the checkbox inside a label.
$kendo-checkbox-list-spacingNumber

map-get( $spacing, 4 )

1rem

Description
Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-xNumber

0px

0px

Description
Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-yNumber

$kendo-list-item-padding-y-md

0.25rem

Description
Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bgColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Background color of checkbox ripple.
$kendo-checkbox-ripple-opacityNumber

.25

0.25

Description
Opacity of checkbox ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber

1px

1px

Description
Width of the border around the button.
$kendo-chip-spacingNumber

map-get( $spacing, 1 )

0.25rem

Description
The spacing between the text and the icons of the chip.
$kendo-chip-padding-xNumber

map-get( $spacing, 1 )

0.25rem

Description
Horizontal padding of the chip.
$kendo-chip-padding-yNumber

map-get( $spacing, 1 )

0.25rem

Description
Vertical padding of the chip.
$kendo-chip-font-sizeNumber

$font-size-md

1rem

Description
Font sizes of the chip.
$kendo-chip-line-heightNumber

1.25

1.25

Description
Line heights of the chip that are connected to the $font-size.
$kendo-chip-sizesMap

( sm: ( padding-x: $kendo-chip-padding-x-sm, padding-y: $kendo-chip-padding-y-sm, font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm ), md: ( padding-x: $kendo-chip-padding-x-md, padding-y: $kendo-chip-padding-y-md, font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md ), lg: ( padding-x: $kendo-chip-padding-x-lg, padding-y: $kendo-chip-padding-y-lg, font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg ) )

(sm: (padding-x: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))

Description
Sizes map for the chip.
$kendo-chip-base-bgColor

$base-text

#212529

Description
The base background color of the chip.
$kendo-chip-theme-colorsMap

( "base": $kendo-chip-base-bg, "error": map-get( $kendo-theme-colors, "error" ), "info": map-get( $kendo-theme-colors, "info" ), "warning": map-get( $kendo-theme-colors, "warning" ), "success": map-get( $kendo-theme-colors, "success" ) )

("base": #212529, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)

Description
Theme colors map for the chip.
$kendo-chip-solid-bgColor

try-tint( $kendo-chip-base-bg, 92% )

#edeeee

Description
The base background color of solid chip.
$kendo-chip-solid-textColor

$kendo-chip-base-bg

#212529

Description
The base text color of solid chip.
$kendo-chip-solid-borderColor

try-tint( $kendo-chip-base-bg, 70% )

#bcbebf

Description
The base border color of solid chip.
$kendo-chip-solid-shadowList

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

0 0 0 2px rgba(33, 37, 41, 0.16)

Description
The base shadow of solid chip.
$kendo-chip-solid-focus-bgColor

try-tint( $kendo-chip-base-bg, 92% )

#edeeee

Description
The base background color of focused solid chip.
$kendo-chip-solid-focus-textNull

null

null

Description
The base text color of focused solid chip.
$kendo-chip-solid-hover-bgColor

try-tint( $kendo-chip-base-bg, 84% )

#dbdcdd

Description
The base background color of hovered solid chip.
$kendo-chip-solid-hover-textNull

null

null

Description
The base text color of hovered solid chip.
$kendo-chip-solid-selected-bgColor

try-tint( $kendo-chip-base-bg, 76% )

#cacbcc

Description
The base background color of selected solid chip.
$kendo-chip-solid-selected-textNull

null

null

Description
The base text color of selected solid chip.
$kendo-chip-outline-bgColor

$component-bg

#ffffff

Description
The base background color of outline chip.
$kendo-chip-outline-textColor

$kendo-chip-base-bg

#212529

Description
The base text color of outline chip.
$kendo-chip-outline-borderColor

$kendo-chip-base-bg

#212529

Description
The base border color of outline chip.
$kendo-chip-outline-shadowList

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

0 0 0 2px rgba(33, 37, 41, 0.16)

Description
The base shadow of outline chip.
$kendo-chip-outline-hover-bgColor

$kendo-chip-base-bg

#212529

Description
The base background color of hovered outline chip.
$kendo-chip-outline-hover-textColor

contrast-wcag( $kendo-chip-base-bg )

white

Description
The base text color of hovered outline chip.
$kendo-chip-outline-selected-bgColor

$kendo-chip-outline-hover-bg

#212529

Description
The base background color of selected outline chip.
$kendo-chip-outline-selected-textColor

$kendo-chip-outline-hover-text

white

Description
The base text color of selected outline chip.
$kendo-chip-list-sizesMap

( sm: map-get( $spacing, 1 ), md: map-get( $spacing, 1 ), lg: map-get( $spacing, 1 ) )

(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)

Description
The sizes of the chip list.

Color System

NameTypeDefault valueComputed value
$accentColor

$primary

#0d6efd

Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrastColor

contrast-wcag( $accent )

white

Deprecated
Will be removed in v5. Use `$primary-contrast` variable instead.
Description
The color used along with the primary color denoted by $primary.
$primaryColor

$primary

#0d6efd

Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColor

contrast-wcag( $primary )

white

Description
The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColor

$secondary

#6c757d

Description
The secondary color of the theme.
$secondary-contrastColor

contrast-wcag( $secondary )

white

Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiaryColor

$purple

#6f42c1

Description
The tertiary color of the theme.
$tertiary-contrastColor

contrast-wcag( $tertiary )

white

Description
The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$infoColor

$info

#0dcaf0

Description
The color for informational messages and states.
$successColor

$success

#198754

Description
The color for success messages and states.
$warningColor

$warning

#ffc107

Description
The color for warning messages and states.
$errorColor

$danger

#dc3545

Description
The color for error messages and states.
$darkColor

$dark

#212529

Description
The dark color of the theme.
$lightColor

$light

#f8f9fa

Description
The light color of the theme.
$inverseColor

if( $dark-theme, $light, $dark )

#212529

Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

Component

NameTypeDefault valueComputed value
$component-bgColor

$body-bg

#ffffff

Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
$component-textColor

$body-text

#212529

Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
$component-borderColor

contrast-wcag( $component-bg, $gray-300, $gray-700 )

#dee2e6

Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.

Floating-action-button

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber

1px

1px

Description
Width of the border around the FAB.
$kendo-fab-border-radiusNumber

$kendo-border-radius / 2

0.1875rem

Description
Border radius of the FAB.
$kendo-fab-font-familyList

$font-family

system-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
Font family of the FAB.
$kendo-fab-font-sizeNumber

$font-size

1rem

Description
Font size of the FAB.
$kendo-fab-line-heightNumber

$line-height

1.5

Description
Line height of the FAB.
$kendo-fab-padding-xNumber

$padding-x

1rem

Description
Horizontal padding of the FAB.
$kendo-fab-padding-yNumber

$kendo-fab-padding-x

1rem

Description
Vertical padding of the FAB.
$kendo-fab-icon-widthNumber

24px

24px

Description
FAB icon width.
$kendo-fab-icon-heightNumber

$kendo-fab-icon-width

24px

Description
FAB icon height.
$kendo-fab-icon-spacingNumber

map-get( $spacing, 1 ) / 2

0.125rem

Description
FAB icon spacing.
$kendo-fab-items-padding-xNumber

0px

0px

Description
FAB items horizontal padding.
$kendo-fab-items-padding-yNumber

map-get( $spacing, 4 )

1rem

Description
FAB items vertical padding.
$kendo-fab-item-text-padding-xNumber

map-get( $spacing, 1 )

0.25rem

Description
FAB item text horizontal padding.
$kendo-fab-item-text-padding-yNumber

$kendo-fab-item-text-padding-x

0.25rem

Description
FAB item text vertical padding.
$kendo-fab-item-text-border-widthNumber

1px

1px

Description
Width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber

4px

4px

Description
Border radius of the FAB item text.
$kendo-fab-item-text-font-sizeNumber

$font-size-xs

0.75rem

Description
Font size of the FAB item text.
$kendo-fab-item-text-line-heightNumber

14px

14px

Description
Line height of the FAB item text.
$kendo-fab-item-icon-padding-xNumber

map-get( $spacing, 2 )

0.5rem

Description
FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-yNumber

$kendo-fab-item-icon-padding-x

0.5rem

Description
FAB item icon vertical padding.
$kendo-fab-item-icon-border-widthNumber

0

0

Description
Width of the FAB item icon border.
$kendo-fab-item-icon-border-radiusNumber

50%

50%

Description
Border radius of the FAB item icon.
$kendo-fab-item-icon-widthNumber

24px

24px

Description
Width of the FAB item icon.
$kendo-fab-item-icon-heightNumber

$kendo-fab-item-icon-width

24px

Description
height of the FAB item icon.
$kendo-fab-theme-colorsMap

$kendo-theme-colors

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)

Description
Theme colors map for the FAB.
$kendo-fab-shadowList

0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2)

0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)

Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowList

0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 )

0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)

Description
The disabled shadow of the FAB.
$kendo-fab-active-shadowNull

null

null

Description
The active shadow of the FAB.
$kendo-fab-item-textColor

$component-text

#212529

Description
The base text color of the FAB item.
$kendo-fab-item-bgColor

$component-bg

#ffffff

Description
The base background color of the FAB item.
$kendo-fab-item-borderColor

$component-border

#dee2e6

Description
The base border color of the FAB item.
$kendo-fab-item-icon-textColor

$kendo-button-text

#212529

Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgColor

$kendo-button-bg

#e4e7eb

Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderColor

$kendo-button-border

#e4e7eb

Description
The base border color of the FAB item icon.
$kendo-fab-item-shadowList

$kendo-fab-shadow

0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)

Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowList

$kendo-fab-disabled-shadow

0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)

Description
The disabled shadow of the FAB item.
$kendo-fab-item-active-shadowNull

$kendo-fab-active-shadow

null

Description
The active shadow of the FAB item.

Grid

NameTypeDefault valueComputed value
$grid-bgColor

$component-bg

#ffffff

Description
Background color of the grid component
$grid-textColor

$component-text

#212529

Description
Text color of the grid component
$grid-borderColor

$component-border

#dee2e6

Description
Border color of the grid component
$grid-header-bgColor

$header-bg

#f8f9fa

Description
Background color of grid header
$grid-header-textColor

$header-text

#212529

Description
Text color of grid header
$grid-header-borderColor

$header-border

#dee2e6

Description
Border color of grid header
$grid-header-gradientNull

$header-gradient

null

Description
Background gradient of grid header
$grid-footer-bgColor

$grid-header-bg

#f8f9fa

Description
Background color of grid footer
$grid-footer-textColor

$grid-header-text

#212529

Description
Text color of grid footer
$grid-footer-borderColor

$grid-header-border

#dee2e6

Description
Border color of grid footer
$grid-alt-bgColor

rgba( contrast-wcag( $grid-bg ), .04 )

rgba(0, 0, 0, 0.04)

Description
Background color of alternating rows in grid
$grid-alt-textNull

null

null

Description
Text color of alternating rows in grid
$grid-alt-borderNull

null

null

Description
Border color of alternating rows in grid
$grid-hovered-bgColor

rgba( contrast-wcag( $grid-bg ), .08 )

rgba(0, 0, 0, 0.08)

Description
Background color of hovered rows in grid
$grid-hovered-textNull

null

null

Description
Text color of hovered rows in grid
$grid-hovered-borderNull

null

null

Description
Border color of hovered rows in grid
$grid-selected-bgColor

rgba( $selected-bg, .25 )

rgba(13, 110, 253, 0.25)

Description
Background color of selected rows in grid
$grid-selected-textColor

$grid-text

#212529

Description
Text color of selected rows in grid
$grid-selected-borderColor

$grid-border

#dee2e6

Description
Border color of selected rows in grid

Icons

NameTypeDefault valueComputed value
$icon-font-urlNull

null

null

Description
The URL to the icon font that will be used by the theme
The default value of `null` embeds the package font with a `data:` URL

Input

NameTypeDefault valueComputed value
$kendo-input-default-widthNumber

100%

100%

Description
Default width of input components.
$kendo-input-border-widthNumber

$input-border-width

1px

Description
Border width of input components.
$kendo-input-border-radiusNull

null

null

Description
Border radius of input components.
$kendo-input-padding-xNumber

$input-padding-x

0.75rem

Description
Horizontal padding of input components.
$kendo-input-padding-yNumber

$input-padding-y

0.375rem

Description
Vertical padding of input components.
$kendo-input-font-familyList

$font-family

system-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
Font family of input components.
$kendo-input-font-sizeNumber

$font-size

1rem

Description
Font size of input components.
$kendo-input-line-heightNumber

$input-line-height

1.5

Description
Line height of input components.

List

NameTypeDefault valueComputed value
$kendo-list-font-sizeNull

null

null

Description
Font size of the list component, if no size is set.
$kendo-list-line-heightNull

null

null

Description
Line height of the list component, if no size is set.
$kendo-list-header-padding-xNull

null

null

Description
Horizontal padding of list header, if no size is set.
$kendo-list-header-padding-yNull

null

null

Description
Vertical padding of list header, if no size is set.
$kendo-list-header-border-widthList

0 0 1px

0 0 1px

Description
Border width of list header.
$kendo-list-header-font-sizeNull

null

null

Description
Font size of list header, if no size is set.
$kendo-list-header-line-heightNull

null

null

Description
Line height of list header, if no size is set.
$kendo-list-header-font-weightString

bold

bold

Description
Font weight of list header.
$kendo-list-item-padding-xNull

null

null

Description
Horizontal padding of list items, when no size is set.
$kendo-list-item-padding-yNull

null

null

Description
Vertical padding of list items, when no size is set.
$kendo-list-item-font-sizeNull

null

null

Description
Font size of list items, if no size is set.
$kendo-list-item-line-heightNull

null

null

Description
Line height of list items, if no size is set.
$kendo-list-group-item-padding-xNull

null

null

Description
Horizontal padding of list group items, when no size is set.
$kendo-list-group-item-padding-yNull

null

null

Description
Vertical padding of list group items, when no size is set.
$kendo-list-group-item-border-widthList

1px 0 0

1px 0 0

Description
Border width of list group items.
$kendo-list-group-item-font-sizeNull

null

null

Description
Font size of list group items, if no size is set.
$kendo-list-group-item-line-heightNull

null

null

Description
Line height of list group items, if no size is set.
$kendo-list-group-item-font-weightString

bold

bold

Description
Font weight of list group item.
$kendo-list-bgColor

$component-bg

#ffffff

Description
Background color of the list component.
$kendo-list-textColor

$component-text

#212529

Description
Text color of the list component.
$kendo-list-borderColor

$component-border

#dee2e6

Description
Border color of the list component.
$kendo-list-header-bgNull

null

null

Description
Background color of list header.
$kendo-list-header-textNull

null

null

Description
Text color of list header.
$kendo-list-header-borderString

inherit

inherit

Description
Border color of list header.
$kendo-list-header-shadowNull

null

null

Description
Box shadow of list header.
$kendo-list-item-bgNull

null

null

Description
Background color of list items.
$kendo-list-item-textNull

null

null

Description
Text color of list items.
$kendo-list-item-hover-bgColor

$hovered-bg

#e9ecef

Description
Background color of hovered list items.
$kendo-list-item-hover-textColor

$hovered-text

#212529

Description
Text color of hovered list items.
$kendo-list-item-focus-bgNull

null

null

Description
Background color of focused list items.
$kendo-list-item-focus-textNull

null

null

Description
Text color of focused list items.
$kendo-list-item-focus-shadowList

inset 0 0 0 3px rgba( $kendo-list-text, .15 )

inset 0 0 0 3px rgba(33, 37, 41, 0.15)

Description
Box shadow of focused list items.
$kendo-list-item-selected-bgColor

$selected-bg

#0d6efd

Description
Background color of selected list items.
$kendo-list-item-selected-textColor

$selected-text

white

Description
Text color of selected list items.
$kendo-list-group-item-bgNull

null

null

Description
Background color of list group items.
$kendo-list-group-item-textNull

null

null

Description
Text color of list group items.
$kendo-list-group-item-borderString

inherit

inherit

Description
The border color of list group items.
$kendo-list-group-item-shadowNull

null

null

Description
The base shadow of list group items.
$kendo-list-no-data-textColor

$subtle-text

#6c757d

Description
Text color of the 'No Data' text.

Menu

NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNull

null

null

Description
Horizontal padding of the menu popup.
$kendo-menu-popup-padding-yNull

null

null

Description
Vertical padding of the menu popup.
$kendo-menu-popup-border-widthNumber

$popup-border-width

1px

Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizeNumber

$font-size-md

1rem

Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber

$line-height-md

1.5

Description
Line heights used along with $font-size.
$kendo-menu-popup-bgColor

$popup-bg

#ffffff

Description
The background of the menu popup.
$kendo-menu-popup-textColor

$popup-text

#212529

Description
The text color of the menu popup.
$kendo-menu-popup-borderColor

$popup-border

#dee2e6

Description
The border color of the menu popup.
$kendo-menu-popup-gradientNull

null

null

Description
The background gradient of the menu popup.
$kendo-menu-popup-item-padding-xNumber

map-get( $spacing, 4 )

1rem

Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumber

map-get( $spacing, 1 )

0.25rem

Description
Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-endCalculation

calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} )

calc( 2rem + 16px )

Description
The end padding of the menu item in popup.
$kendo-menu-popup-item-icon-margin-start-smNumber

$kendo-menu-popup-item-padding-x-sm

1rem

Description
The start margin of the menu item expand icon.
$kendo-menu-popup-item-icon-margin-end-smCalculation

calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) )

calc(-1 * (calc( 2rem + 16px ) - 0.5rem))

Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacingNumber

0px

0px

Description
The spacing between the menu items in popup.
$kendo-menu-popup-item-bgNull

null

null

Description
The background of the menu item in popup.
$kendo-menu-popup-item-textNull

null

null

Description
The text color of the menu item in popup.
$kendo-menu-popup-item-borderNull

null

null

Description
The border color of the menu item in popup.
$kendo-menu-popup-item-gradientNull

null

null

Description
The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bgColor

$kendo-list-item-hover-bg

#e9ecef

Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor

$kendo-list-item-hover-text

#212529

Description
The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-borderNull

null

null

Description
The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradientNull

null

null

Description
The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bgColor

$kendo-list-item-selected-bg

#0d6efd

Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textColor

$kendo-list-item-selected-text

white

Description
The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-borderNull

null

null

Description
The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradientNull

null

null

Description
The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadowList

$menu-item-focus-shadow

inset 0 0 0 3px rgba(33, 37, 41, 0.15)

Description
The base shadow of focused menu item in popup.

Menu-button

NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber

$kendo-button-padding-y

0.375rem

Description
Horizontal padding of the arrow button.

Radio

NameTypeDefault valueComputed value
$kendo-radio-radiusNumber

50%

50%

Description
Border radius of radio button.
$kendo-radio-border-widthNumber

1px

1px

Description
Border width of radio button.
$kendo-radio-bgColor

$kendo-checkbox-bg

#ffffff

Description
Background color of radio button.
$kendo-radio-textNull

$kendo-checkbox-text

null

Description
Color of radio button.
$kendo-radio-borderColor

$kendo-checkbox-border

#ced4da

Description
Border color of radio button.
$kendo-radio-hover-bgNull

$kendo-checkbox-hover-bg

null

Description
Background color of hovered radio button.
$kendo-radio-hover-textNull

$kendo-checkbox-hover-text

null

Description
Color of hovered radio button.
$kendo-radio-hover-borderNull

$kendo-checkbox-hover-border

null

Description
Border color of hovered radio button.
$kendo-radio-checked-bgColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Background color of checked radio button.
$kendo-radio-checked-textColor

$kendo-checkbox-checked-text

white

Description
Color of checked radio button.
$kendo-radio-checked-borderColor

$kendo-checkbox-checked-border

#0d6efd

Description
Border color of checked radio button.
$kendo-radio-focus-borderColor

$kendo-checkbox-focus-border

#86b7fe

Description
Border color of focused radio button.
$kendo-radio-focus-shadowList

$kendo-checkbox-focus-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of focused radio button.
$kendo-radio-focus-checked-borderColor

$kendo-checkbox-focus-checked-border

#0d6efd

Description
Border color of focused and checked radio button.
$kendo-radio-focus-checked-shadowList

$kendo-checkbox-focus-checked-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of focused and checked radio button.
$kendo-radio-disabled-bgNull

$kendo-checkbox-disabled-bg

null

Description
Background color of disabled radio button.
$kendo-radio-disabled-textNull

$kendo-checkbox-disabled-text

null

Description
Color of disabled radio button.
$kendo-radio-disabled-borderNull

$kendo-checkbox-disabled-border

null

Description
Border color of disabled radio button.
$kendo-radio-disabled-checked-bgNull

$kendo-checkbox-disabled-checked-bg

null

Description
Background color of disabled and checked radio button.
$kendo-radio-disabled-checked-textNull

$kendo-checkbox-disabled-checked-text

null

Description
Color of disabled and checked radio button.
$kendo-radio-disabled-checked-borderNull

$kendo-checkbox-disabled-checked-border

null

Description
Border color of disabled and checked radio button.
$kendo-radio-invalid-bgNull

$kendo-checkbox-invalid-bg

null

Description
Background color of invalid radio button.
$kendo-radio-invalid-textColor

$kendo-checkbox-invalid-text

#dc3545

Description
Color of invalid radio button.
$kendo-radio-invalid-borderColor

$kendo-checkbox-invalid-border

#dc3545

Description
Border color of invalid radio button.
$kendo-radio-indicator-typeString

image

image

Description
Type of radio button indicator.
$kendo-radio-glyph-font-familyList

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

Description
Glyph font family of radio button indicator.
$kendo-radio-checked-glyphString

"\e308"

"\e308"

Description
Glyph of radio button indicator.
$kendo-radio-checked-imageString

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$kendo-radio-checked-text}'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")

Description
Image of checked radio button indicator.
$kendo-radio-disabled-checked-imageNull

null

null

Description
Image of disabled and checked radio button indicator.
$kendo-radio-label-margin-xNumber

map-get( $spacing, 1 )

0.25rem

Description
The horizontal margin of the radio button inside of a label.
$kendo-radio-list-spacingNumber

map-get( $spacing, 4 )

1rem

Description
Spacing between items of horizontal radio button list.
$kendo-radio-list-item-padding-xNumber

0px

0px

Description
Horizontal padding of radio button list items.
$kendo-radio-list-item-padding-yNumber

$kendo-list-item-padding-y-md

0.25rem

Description
Vertical padding of radio button list items.
$kendo-radio-ripple-bgColor

$kendo-radio-checked-bg

#0d6efd

Description
Background color of radio button ripple.
$kendo-radio-ripple-opacityNumber

.25

0.25

Description
Opacity of radio button ripple.

Split-button

NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList

$kendo-button-focus-shadow

0 0 0 0.25rem rgba(228, 231, 235, 0.5)

Description
Focus shadow of the split button.
$kendo-split-button-arrow-padding-xNumber

$kendo-button-padding-y

0.375rem

Description
Horizontal padding of the arrow button.
$kendo-split-button-arrow-padding-yNumber

$kendo-button-padding-y

0.375rem

Description
Vertical padding of the arrow button.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyNull

null

null

Description
Font family of the switch.
$kendo-switch-track-border-widthNumber

1px

1px

Description
Border width of the switch track.
$kendo-switch-thumb-border-widthNull

null

null

Description
Border width of the switch thumb.
$kendo-switch-label-text-transformNull

null

null

Description
Text transform of the switch label.
$kendo-switch-label-displayString

none

none

Description
Display of the switch label.
$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
Map with the different switch sizes.
$kendo-switch-off-track-bgColor

$component-bg

#ffffff

Description
The background of the track when the switch is not checked.
$kendo-switch-off-track-textNull

null

null

Description
The text color of the track when the switch is not checked.
$kendo-switch-off-track-borderColor

$gray-500

#adb5bd

Description
The border color of the track when the switch is not checked.
$kendo-switch-off-track-gradientNull

null

null

Description
The background gradient of the track when the switch is not checked.
$kendo-switch-off-track-hover-bgNull

null

null

Description
The background of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-textNull

null

null

Description
The text color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-borderNull

null

null

Description
The border color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-gradientNull

null

null

Description
The background gradient of the track when the hovered switch is not checked.
$kendo-switch-off-track-focus-bgNull

null

null

Description
The background of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-textNull

null

null

Description
The text color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-borderColor

mix( $kendo-switch-off-track-bg, $primary )

#86b7fe

Description
The border color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-gradientNull

null

null

Description
The background gradient of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-ringList

.25rem solid rgba( $primary, .25 )

0.25rem solid rgba(13, 110, 253, 0.25)

Description
The ring around the track when the focused switch is not checked.
$kendo-switch-off-track-disabled-bgColor

if( $dark-theme, $gray-800, $gray-200 )

#e9ecef

Description
The background of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-textNull

null

null

Description
The text color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-borderNull

null

null

Description
The border color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-gradientNull

null

null

Description
The background gradient of the track when the disabled switch is not checked.
$kendo-switch-off-thumb-bgColor

$gray-500

#adb5bd

Description
The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-textNull

null

null

Description
The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-borderNull

null

null

Description
The border color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-gradientNull

null

null

Description
The background gradient of the thumb when the switch is not checked.
$kendo-switch-off-thumb-hover-bgNull

null

null

Description
The background of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-textNull

null

null

Description
The text color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-borderNull

null

null

Description
The border color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-gradientNull

null

null

Description
The background gradient of the thumb when the hovered switch is not checked.
$kendo-switch-on-track-bgColor

$primary

#0d6efd

Description
The background of the track when the switch is checked.
$kendo-switch-on-track-textNull

null

null

Description
The text color of the track when the switch is checked.
$kendo-switch-on-track-borderColor

$kendo-switch-on-track-bg

#0d6efd

Description
The border color of the track when the switch is checked.
$kendo-switch-on-track-gradientNull

null

null

Description
The background gradient of the track when the switch is checked.
$kendo-switch-on-track-hover-bgNull

null

null

Description
The background of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-textNull

null

null

Description
The text color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-borderNull

null

null

Description
The border color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-gradientNull

null

null

Description
The background gradient of the track when the hovered switch is checked.
$kendo-switch-on-track-focus-bgNull

null

null

Description
The background of the track when the focused switch is checked.
$kendo-switch-on-track-focus-textNull

null

null

Description
The text color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-borderNull

null

null

Description
The border color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-gradientNull

null

null

Description
The background gradient of the track when the focused switch is checked.
$kendo-switch-on-track-focus-ringList

.25rem solid rgba( $kendo-switch-on-track-border, .25 )

0.25rem solid rgba(13, 110, 253, 0.25)

Description
The ring around the track when the focused switch is checked.
$kendo-switch-on-track-disabled-bgColor

try-tint( $kendo-switch-on-track-bg, 50% )

#86b7fe

Description
The background of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-textNull

null

null

Description
The text color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-borderNull

null

null

Description
The border color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-gradientNull

null

null

Description
The background gradient of the track when the disabled switch is checked.
$kendo-switch-on-thumb-bgColor

contrast-wcag( $kendo-switch-on-track-bg )

white

Description
The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-textNull

null

null

Description
The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-borderNull

null

null

Description
The border color of the thumb when the switch is checked.
$kendo-switch-on-thumb-gradientNull

null

null

Description
The background gradient of the thumb when the switch is checked.
$kendo-switch-on-thumb-hover-bgNull

null

null

Description
The background of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-textNull

null

null

Description
The text color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-borderNull

null

null

Description
The border color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-gradientNull

null

null

Description
The background gradient of the thumb when the hovered switch is checked.

Table

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber

1px

1px

Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber

$grid-cell-vertical-border-width

1px

Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber

$grid-cell-horizontal-border-width

0px

Description
The width of horizontal border of table cells.
$kendo-table-font-sizeNull

null

null

Description
The font size of the table if no size is specified.
$kendo-table-line-heightNull

null

null

Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-xNull

null

null

Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-yNull

null

null

Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizesMap

( sm: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) ), lg: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ) )

(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.375rem), 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-bgColor

$grid-bg

#ffffff

Description
Background color of tables.
$kendo-table-textColor

$grid-text

#212529

Description
Text color of tables.
$kendo-table-borderColor

$grid-border

#dee2e6

Description
Border color of tables.
$kendo-table-header-bgColor

$grid-header-bg

#f8f9fa

Description
Background color of table headers.
$kendo-table-header-textColor

$grid-header-text

#212529

Description
Text color of table headers.
$kendo-table-header-borderColor

$grid-header-border

#dee2e6

Description
Border color of table headers.
$kendo-table-footer-bgColor

$grid-footer-bg

#f8f9fa

Description
Background color of table footers.
$kendo-table-footer-textColor

$grid-footer-text

#212529

Description
Text color of table footers.
$kendo-table-footer-borderColor

$grid-footer-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.
$kendo-table-group-row-textColor

$kendo-table-header-text

#212529

Description
Text color of group rows in table.
$kendo-table-group-row-borderColor

$kendo-table-header-border

#dee2e6

Description
Border color of group rows in table.
$kendo-table-alt-row-bgColor

$grid-alt-bg

rgba(0, 0, 0, 0.04)

Description
Background color of alternating rows in table.
$kendo-table-alt-row-textNull

$grid-alt-text

null

Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderNull

$grid-alt-border

null

Description
Border color of alternating rows in table.
$kendo-table-hover-bgColor

$grid-hovered-bg

rgba(0, 0, 0, 0.08)

Description
Background color of hovered rows in table.
$kendo-table-hover-textNull

$grid-hovered-text

null

Description
Text color of hovered rows in table.
$kendo-table-hover-borderNull

$grid-hovered-border

null

Description
Border color of hovered rows in table.
$kendo-table-focus-bgNull

null

null

Description
Background color of focused rows in table.
$kendo-table-focus-textNull

null

null

Description
Text color of focused rows in table.
$kendo-table-focus-borderNull

null

null

Description
Border color of focused rows in table.
$kendo-table-focus-shadowList

$grid-focused-shadow

inset 0 0 0 2px rgba(0, 0, 0, 0.08)

Description
Box shadow of focused rows in table.
$kendo-table-selected-bgColor

$grid-selected-bg

rgba(13, 110, 253, 0.25)

Description
Background color of selected rows in table.
$kendo-table-selected-textColor

$grid-selected-text

#212529

Description
Text color of selected rows in table.
$kendo-table-selected-borderColor

$grid-selected-border

#dee2e6

Description
Border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$tabstrip-bgNull

null

null

Description
Background color of tabstrip component
$tabstrip-textColor

$component-text

#212529

Description
Text color of tabstrip component
$tabstrip-borderColor

$component-border

#dee2e6

Description
Border color of tabstrip component
$tabstrip-item-padding-xNumber

$nav-item-padding-x

1rem

Description
Horizontal padding of tabs
$tabstrip-item-padding-yNumber

$nav-item-padding-y

0.5rem

Description
Vertical padding of tabs
$tabstrip-item-border-widthNumber

1px

1px

Description
Width of border around tabs
$tabstrip-item-border-radiusNumber

map-get( $spacing, 1 )

0.25rem

Description
Border radius of tabs
$tabstrip-item-gapNumber

$nav-item-margin

0px

Description
Spacing between tabs
$tabstrip-item-bgNull

null

null

Description
Background color of tabs
$tabstrip-item-textColor

$link-text

#0d6efd

Description
Text color of tabs
$tabstrip-item-borderNull

null

null

Description
Border color of tabs
$tabstrip-item-gradientNull

null

null

Description
Background gradient of tabs
$tabstrip-item-hovered-bgNull

null

null

Description
Background color of hovered tabs
$tabstrip-item-hovered-textColor

$link-hover-text

#0a58ca

Description
Text color of hovered tabs
$tabstrip-item-hovered-borderColor

$gray-200

#e9ecef

Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientNull

null

null

Description
Background gradient of hovered tabs
$tabstrip-item-selected-bgColor

$component-bg

#ffffff

Description
Background color of selected tabs
$tabstrip-item-selected-textColor

$component-text

#212529

Description
Text color of selected tabs
$tabstrip-item-selected-borderColor

$component-border

#dee2e6

Description
Border color of selected tabs
$tabstrip-item-selected-gradientNull

null

null

Description
Background gradient of selected tabs
$tabstrip-content-padding-xNumber

map-get( $spacing, 4 )

1rem

Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-yNumber

map-get( $spacing, 4 )

1rem

Description
Vertical padding of tabstrip content
$tabstrip-content-border-widthNumber

$tabstrip-border-width

1px

Description
Width of border around tabstrip content
$tabstrip-content-bgColor

$component-bg

#ffffff

Description
Background color of tabstrip content
$tabstrip-content-textColor

$component-text

#212529

Description
Text color of tabstrip content
$tabstrip-content-borderColor

$component-border

#dee2e6

Description
Border color of tabstrip content
$tabstrip-content-border-focusedColor

$component-text

#212529

Description
Border color of tabstrip focused content

Toolbar

NameTypeDefault valueComputed value
$toolbar-padding-xNumber

map-get( $spacing, 2 )

0.5rem

Description
The horizontal padding of the container.
$toolbar-padding-yNumber

map-get( $spacing, 2 )

0.5rem

Description
The vertical padding of the container.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList

$font-family

system-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
Font family of the treeview component.
$kendo-treeview-font-sizeNumber

$font-size-md

1rem

Description
Font size of the treeview component.
$kendo-treeview-line-heightNumber

$line-height

1.5

Description
Line height of the treeview component.
$kendo-treeview-indentNumber

16px

16px

Description
Indentation of child groups in treeview component.
$kendo-treeview-item-padding-xNumber

map-get( $spacing, 3 )

0.75rem

Description
Horizontal padding of treeview items.
$kendo-treeview-item-padding-yNumber

map-get( $spacing, 1 )

0.25rem

Description
Vertical padding of treeview items.
$kendo-treeview-item-border-widthNumber

0px

0px

Description
Border width of treeview items.
$kendo-treeview-item-border-radiusNumber

map-get( $spacing, 1 )

0.25rem

Description
Border radius of treeview items.
$kendo-treeview-sizesMap

( sm: ( font-size: $kendo-treeview-font-size-sm, line-height: $kendo-treeview-line-height-sm, item-padding-x: $kendo-treeview-item-padding-x-sm, item-padding-y: $kendo-treeview-item-padding-y-sm ), md: ( font-size: $kendo-treeview-font-size-md, line-height: $kendo-treeview-line-height-md, item-padding-x: $kendo-treeview-item-padding-x-md, item-padding-y: $kendo-treeview-item-padding-y-md ), lg: ( font-size: $kendo-treeview-font-size-lg, line-height: $kendo-treeview-line-height-lg, item-padding-x: $kendo-treeview-item-padding-x-lg, item-padding-y: $kendo-treeview-item-padding-y-lg ) )

(sm: (font-size: 0.875rem, line-height: 1.4285714286, item-padding-x: 0.5rem, item-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.25rem), lg: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.5rem))

Description
The sizes of the treeview.
$kendo-treeview-bgNull

null

null

Description
Background color of the treeview component.
$kendo-treeview-textColor

$component-text

#212529

Description
Text color of the treeview component.
$kendo-treeview-borderNull

null

null

Description
Border color of the treeview component.
$kendo-treeview-item-hover-bgColor

$hovered-bg

#e9ecef

Description
Background color of hovered treeview items.
$kendo-treeview-item-hover-textColor

$hovered-text

#212529

Description
Text color of hovered treeview items.
$kendo-treeview-item-hover-borderColor

$kendo-treeview-item-hover-bg

#e9ecef

Description
Border color of hovered treeview items.
$kendo-treeview-item-hover-gradientNull

null

null

Description
Background gradient of hovered treeview items.
$kendo-treeview-item-selected-bgColor

$selected-bg

#0d6efd

Description
Background color of selected treeview items.
$kendo-treeview-item-selected-textColor

$selected-text

white

Description
Text color of selected treeview items.
$kendo-treeview-item-selected-borderColor

$kendo-treeview-item-selected-bg

#0d6efd

Description
Border color of selected treeview items.
$kendo-treeview-item-selected-gradientNull

null

null

Description
Background gradient of selected treeview items.
$kendo-treeview-item-focus-shadowList

inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )

inset 0 0 0 2px rgba(33, 37, 41, 0.15)

Description
Box shadow of focused treeview items.
$kendo-treeview-loadmore-bgColor

transparent

transparent

Description
Background color of load more.
$kendo-treeview-loadmore-textColor

$link-text

#0d6efd

Description
Text color of load more.
$kendo-treeview-loadmore-borderNull

null

null

Description
Border color of load more.
$kendo-treeview-loadmore-hover-bgColor

transparent

transparent

Description
Background color of a hovered load more.
$kendo-treeview-loadmore-hover-textColor

$link-hover-text

#0a58ca

Description
Text color of a hovered load more.
$kendo-treeview-loadmore-hover-borderNull

null

null

Description
Border color of a hovered load more.
$kendo-treeview-loadmore-focus-bgColor

transparent

transparent

Description
Background color of a focused load more.
$kendo-treeview-loadmore-focus-textColor

$link-hover-text

#0a58ca

Description
Text color of a focused load more.
$kendo-treeview-loadmore-focus-borderNull

null

null

Description
Border color of a focused load more.
$kendo-treeview-loadmore-focus-shadowList

$kendo-treeview-item-focus-shadow

inset 0 0 0 2px rgba(33, 37, 41, 0.15)

Description
Box shadow of a focused load more.

Typography

NameTypeDefault valueComputed value
$enable-typographyBool

false

false

Description
Global typography styles for the Kendo Bootstrap theme.
$font-sizeNumber

$font-size-base

1rem

Description
Base font size across all components.
$font-familyList

$font-family-sans-serif

system-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
Font family across all components.
$font-family-monospaceList

$font-family-monospace

SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Description
Font family for monospaced text. Used for styling the code.
$line-heightNumber

$line-height-base

1.5

Description
Line height used along with $font-size.

Mixins

exports

Outputs a module once, no matter how many times it is included.

Parameters

  • name : String - The name of the exported module.