Styling & Themes / Material Theme / Customization / 
New to Kendo UI for Angular? Start a free 30-day trial

Customization

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

Variables

Common

NameTypeDefault valueComputed value
$kendo-border-radiusNumber

map-get( $spacing, 1 )

4px

Description
Border radius for all components.
$base-bgColor

map-get( $theme, base-bg )

white

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

map-get($theme, component-text)

rgba(0, 0, 0, 0.87)

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

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

rgba(0, 0, 0, 0.08)

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

null

null

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

map-get( $theme, hover-bg )

rgba(0, 0, 0, 0.04)

Description
The background of hovered items.
$hovered-textColor

$base-text

rgba(0, 0, 0, 0.87)

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

rgba( if($theme-type == dark, white, black), .15 )

rgba(0, 0, 0, 0.15)

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

null

null

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

$secondary

#e51a5f

Description
The background of selected items.
$selected-textColor

$secondary-contrast

white

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

rgba( if($theme-type == dark, white, black), .1 )

rgba(0, 0, 0, 0.1)

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

null

null

Description
The gradient background of selected items.
$kendo-input-font-familyList

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of input components.
@group input

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber

1px

1px

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

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of the avatar.
$kendo-avatar-font-sizeNumber

$font-size

14px

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

$line-height

2

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: 16px, md: 32px, lg: 64px)

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

$kendo-theme-colors

("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)

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

$kendo-border-radius-md

4px

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

map-get( $spacing, 1 )

4px

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

map-get( $spacing, 1 )

4px

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

$font-size-xs

10px

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 + 8px + 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: 2px, padding-y: 2px, font-size: 10px, line-height: 1, min-width: calc( 1em + 4px + 2px )), md: (padding-x: 4px, padding-y: 4px, font-size: 10px, line-height: 1, min-width: calc( 1em + 8px + 2px )), lg: (padding-x: 6px, padding-y: 6px, font-size: 10px, line-height: 1, min-width: calc( 1em + 12px + 2px )))

Description
Sizes map for the badge.

Button

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber

1px

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

map-get( $spacing, 4 )

16px

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

map-get( $spacing, 2 )

8px

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

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of the button.
$kendo-button-font-sizeNumber

$font-size-md

14px

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

( 20 / 14 )

1.4285714286

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.4285714286em + 16px + 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.4285714286em + 16px )

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

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

("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242, "base": white)

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

$base-bg

white

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

$base-text

rgba(0, 0, 0, 0.87)

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

$kendo-button-bg

white

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

null

null

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

$box-shadow-depth-2

0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)

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

null

null

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

null

null

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

null

null

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-bgNull

null

null

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-borderNull

null

null

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-shadowList

$box-shadow-depth-3

0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)

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

$kendo-button-active-bg

null

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

$kendo-button-active-text

null

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

$kendo-button-active-bg

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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-shadowNull

null

null

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

try-shade( $body-bg, 12% )

#e0e0e0

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

$disabled-text

rgba(0, 0, 0, 0.38)

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

$kendo-button-disabled-bg

#e0e0e0

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

null

null

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

none

none

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-opacityNumber

.12

0.12

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

.22

0.22

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

box-shadow 280ms cubic-bezier( .4, 0, .2, 1 )

box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)

Description
The transition of the button.

Charts

NameTypeDefault valueComputed value
$series-aColor

get-base-hue( purple, 500 )

#9c27b0

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

get-base-hue( blue, 500 )

#2196f3

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

get-base-hue( teal, 500 )

#009688

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

get-base-hue( yellow, 500 )

#ffeb3b

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

get-base-hue( red, 500 )

#f44336

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

get-base-hue( green, 500 )

#4caf50

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

$series-a

#9c27b0

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

2px

2px

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

null

null

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

null

null

Description
Color of checkbox.
$kendo-checkbox-borderColor

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

rgba(0, 0, 0, 0.54)

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

#3f51b5

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

#3f51b5

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

$kendo-checkbox-checked-bg

#3f51b5

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

#3f51b5

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

null

null

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

null

null

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

null

null

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

null

null

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-borderColor

try-shade( $component-bg, 4 )

#adadad

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

$kendo-checkbox-disabled-border

#adadad

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

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

white

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

$kendo-checkbox-disabled-checked-bg

#adadad

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

null

null

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

$invalid-text

#f31700

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

$invalid-border

#f31700

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 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%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-width='3' d='M4 10h12'/></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-width='3' d='M4 10h12'/%3e%3c/svg%3e")

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

map-get( $spacing, 1 )

4px

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

map-get( $spacing, 4 )

16px

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

8px

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

$primary

#3f51b5

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

.2

0.2

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 )

4px

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

map-get( $spacing, 1 )

4px

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

map-get( $spacing, 1 )

4px

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

$font-size-md

14px

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

(18 / 14)

1.2857142857

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: 4px, padding-y: 2px, font-size: 14px, line-height: 1.2857142857), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1.2857142857), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1.2857142857))

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

$base-text

rgba(0, 0, 0, 0.87)

Description
The base background 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": rgba(0, 0, 0, 0.87), "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)

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

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

rgba(235, 235, 235, 0.987)

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

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

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

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

rgba(192, 192, 192, 0.961)

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

null

null

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

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

rgba(239, 239, 239, 0.9896)

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% )

rgba(222, 222, 222, 0.9792)

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% )

rgba(205, 205, 205, 0.9688)

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

white

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

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

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

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

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

null

null

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

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

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

rgba(0, 0, 0, 0.87)

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: 4px, md: 4px, lg: 4px)

Description
The sizes of the chip list.

Color System

NameTypeDefault valueComputed value
$primaryColor

material-color( $primary-palette, main )

#3f51b5

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

material-color( $primary-palette, main-contrast )

white

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

material-color( $secondary-palette, main )

#e51a5f

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

material-color( $secondary-palette, main-contrast )

white

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

material-color($tertiary-palette, main)

#00695c

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

material-color($tertiary-palette, main-contrast)

white

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

#0058e9

#0058e9

Description
The color for informational messages and states.
$successColor

#37b400

#37b400

Description
The color for success messages and states.
$warningColor

#ffc000

#ffc000

Description
The color for warning messages and states.
$errorColor

#f31700

#f31700

Description
The color for error messages and states.
$darkColor

get-base-hue( gray, 800 )

#424242

Description
The dark color of the theme.
$lightColor

get-base-hue( gray, 100 )

#f5f5f5

Description
The light color of the theme.
$inverseColor

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

#424242

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

map-get($theme, component-bg)

white

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

map-get($theme, component-text)

rgba(0, 0, 0, 0.87)

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

map-get($theme, component-border)

rgba(0, 0, 0, 0.12)

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

0px

0px

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

$kendo-border-radius-md

4px

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

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of the FAB.
$kendo-fab-font-sizeNumber

$font-size

14px

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

(20 / 14)

1.4285714286

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

$padding-x

16px

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

$kendo-fab-padding-x

16px

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

20px

20px

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

$kendo-fab-icon-width

20px

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

map-get( $spacing, 1 ) * 1.5

6px

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 )

16px

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

map-get( $spacing, 1 )

4px

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

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

4px

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

2px

2px

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

$font-size-xs

10px

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

1.2

1.2

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

map-get( $spacing, 2 )

8px

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

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

8px

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

20px

20px

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

$kendo-fab-item-icon-width

20px

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

$kendo-theme-colors

("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)

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

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

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

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

0px 3px 5px -1px try-tint(rgba(0, 0, 0, .2), .5), 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 -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)

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

0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)

0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)

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

$component-text

rgba(0, 0, 0, 0.87)

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

$component-bg

white

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

$component-border

rgba(0, 0, 0, 0.12)

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

$kendo-button-text

rgba(0, 0, 0, 0.87)

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

$kendo-button-bg

white

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

$kendo-button-border

white

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

$kendo-fab-shadow

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

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

$kendo-fab-disabled-shadow

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

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

$kendo-fab-active-shadow

0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)

Description
The active shadow of the FAB item.

Grid

NameTypeDefault valueComputed value
$grid-bgColor

$component-bg

white

Description
Background color of the grid component
$grid-textColor

$component-text

rgba(0, 0, 0, 0.87)

Description
Text color of the grid component
$grid-borderColor

$component-border

rgba(0, 0, 0, 0.12)

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

$grid-bg

white

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

if($theme-type == dark, $light-secondary-text, $dark-secondary-text)

rgba(0, 0, 0, 0.54)

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

$grid-border

rgba(0, 0, 0, 0.12)

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

null

null

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

$grid-header-bg

white

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

$grid-header-text

rgba(0, 0, 0, 0.54)

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

$grid-header-border

rgba(0, 0, 0, 0.12)

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

transparent

transparent

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
Text color of alternating rows in grid
$grid-hovered-bgColor

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

rgba(0, 0, 0, 0.07)

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

null

null

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

$grid-border

rgba(0, 0, 0, 0.12)

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

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

rgba(0, 0, 0, 0.04)

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

null

null

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

$grid-border

rgba(0, 0, 0, 0.12)

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

1px

1px

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

null

null

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

map-get( $spacing, 4 )

16px

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

map-get( $spacing, 2 )

8px

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

$font-size-lg

16px

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

1.25

1.25

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-weightNull

null

null

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-weightNull

null

null

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

$component-bg

white

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

$component-text

rgba(0, 0, 0, 0.87)

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

$component-border

rgba(0, 0, 0, 0.12)

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

rgba(0, 0, 0, 0.04)

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

$hovered-text

rgba(0, 0, 0, 0.87)

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

$kendo-list-item-hover-bg

rgba(0, 0, 0, 0.04)

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-shadowNull

null

null

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

$component-bg

white

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

$secondary

#e51a5f

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

rgba(0, 0, 0, 0.54)

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

0px

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

$font-size-lg

16px

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

1.25

1.25

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

$popup-bg

white

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

$popup-text

rgba(0, 0, 0, 0.87)

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

$popup-border

rgba(0, 0, 0, 0.12)

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 )

16px

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

map-get( $spacing, 2 )

8px

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( 32px + 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

16px

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( 32px + 16px ) - 8px))

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

rgba(0, 0, 0, 0.04)

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

$kendo-list-item-hover-text

rgba(0, 0, 0, 0.87)

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

white

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

$kendo-list-item-selected-text

#e51a5f

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-shadowNull

null

null

Description
The base shadow of focused menu item in popup.

Menu-button

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

map-get( $spacing, 1 )

4px

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

2px

2px

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

$kendo-checkbox-bg

null

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

$kendo-checkbox-text

null

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

$kendo-checkbox-border

rgba(0, 0, 0, 0.54)

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

null

null

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

null

null

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

null

null

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

null

null

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

$primary

#3f51b5

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

$kendo-radio-checked-text

#3f51b5

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

$kendo-checkbox-focus-border

null

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

$kendo-checkbox-focus-shadow

null

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

$kendo-checkbox-focus-checked-border

null

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

$kendo-checkbox-focus-checked-shadow

null

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

null

null

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

null

null

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

$kendo-checkbox-disabled-border

#adadad

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

null

null

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

$kendo-radio-disabled-border

#adadad

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

$kendo-radio-disabled-border

#adadad

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

#f31700

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

$kendo-checkbox-invalid-border

#f31700

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='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e")

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

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

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e")

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

map-get( $spacing, 1 )

4px

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

map-get( $spacing, 4 )

16px

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

8px

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

$primary

#3f51b5

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

.2

0.2

Description
Opacity of radio button ripple.

Shadows

NameTypeDefault valueComputed value
$elevationColor

map-get( $theme, elevation )

black

Description
Color of shadows
$box-shadow-depth-1List

0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 )

0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)

Description
Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-2List

0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 )

0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)

Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-3List

0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 )

0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)

Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 8.
$box-shadow-depth-4List

0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 )

0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)

Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 16.
$box-shadow-depth-5List

0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 )

0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)

Description
Shadow for window and dialog.
Equivalent to material elevation 24.

Split-button

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

$kendo-button-focus-shadow

null

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

map-get( $spacing, 1 )

4px

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

$kendo-button-padding-y

8px

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-widthNull

null

null

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

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

rgba(0, 0, 0, 0.38)

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-borderNull

null

null

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 hovered switch is not checked.
$kendo-switch-off-track-hover-textNull

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

if( $dark-theme, $black, $white )

white

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

rgba( $primary, .54 )

rgba(63, 81, 181, 0.54)

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-borderNull

null

null

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-ringNull

null

null

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

null

null

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

$primary

#3f51b5

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

1px

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: ( 20 / 14 ), cell-padding-x: map-get( $spacing, 4 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: ( 20 / 14 ), cell-padding-x: map-get( $spacing, 4 ), cell-padding-y: map-get( $spacing, 2 ) ), lg: ( font-size: $font-size-md, line-height: ( 20 / 14 ), cell-padding-x: map-get( $spacing, 4 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ) )

(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 16px, cell-padding-y: 10px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 16px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 16px, cell-padding-y: 10px))

Description
The sizes of the table.
$kendo-table-bgColor

$grid-bg

white

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

$grid-text

rgba(0, 0, 0, 0.87)

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

$grid-border

rgba(0, 0, 0, 0.12)

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

$grid-header-bg

white

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

$grid-header-text

rgba(0, 0, 0, 0.54)

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

$grid-header-border

rgba(0, 0, 0, 0.12)

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

$grid-footer-bg

white

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

$grid-footer-text

rgba(0, 0, 0, 0.54)

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

$grid-footer-border

rgba(0, 0, 0, 0.12)

Description
Border color of table footers.
$kendo-table-group-row-bgColor

$kendo-table-header-bg

white

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

$kendo-table-header-text

rgba(0, 0, 0, 0.54)

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

$kendo-table-header-border

rgba(0, 0, 0, 0.12)

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

$grid-alt-bg

transparent

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.07)

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-borderColor

$grid-hovered-border

rgba(0, 0, 0, 0.12)

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-shadowNull

$grid-focused-shadow

null

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

$grid-selected-bg

rgba(0, 0, 0, 0.04)

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

$grid-selected-text

null

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

$grid-selected-border

rgba(0, 0, 0, 0.12)

Description
Border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$tabstrip-bgNull

null

null

Description
Background color of tabstrip component
$tabstrip-textColor

$subtle-text

rgba(0, 0, 0, 0.54)

Description
Text color of tabstrip component
$tabstrip-borderColor

$component-border

rgba(0, 0, 0, 0.12)

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

24px

24px

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

14px

14px

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

0px

0px

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

0px

0px

Description
Border radius of tabs
$tabstrip-item-gapNumber

0px

0px

Description
Spacing between tabs
$tabstrip-item-bgNull

null

null

Description
Background color of tabs
$tabstrip-item-textColor

$subtle-text

rgba(0, 0, 0, 0.54)

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-bgColor

$hovered-bg

rgba(0, 0, 0, 0.04)

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

$body-text

rgba(0, 0, 0, 0.87)

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

null

null

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

null

null

Description
Background gradent of hovered tabs
$tabstrip-item-selected-bgNull

null

null

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

$body-text

rgba(0, 0, 0, 0.87)

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

null

null

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 )

16px

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

map-get( $spacing, 4 )

16px

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

0px

0px

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

transparent

transparent

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

null

null

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

null

null

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

$component-text

rgba(0, 0, 0, 0.87)

Description
Border color of tabstrip focused content

Toolbar

NameTypeDefault valueComputed value
$toolbar-padding-xNumber

map-get( $spacing, 2 )

8px

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

map-get( $spacing, 2 )

8px

Description
The vertical padding of the container.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of the treeview component.
$kendo-treeview-font-sizeNumber

$font-size-lg

16px

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

1.25

1.25

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, 4 )

16px

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

map-get( $spacing, 2 )

8px

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

0px

0px

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

null

null

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: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 6px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 8px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 16px, item-padding-y: 8px))

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

null

null

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

$component-text

rgba(0, 0, 0, 0.87)

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

null

null

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

rgba( $kendo-treeview-text, .07 )

rgba(0, 0, 0, 0.07)

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

null

null

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

null

null

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-bgNull

null

null

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

$selected-bg

#e51a5f

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

null

null

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-shadowNull

null

null

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

transparent

transparent

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

inherit

inherit

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-textString

inherit

inherit

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-textString

inherit

inherit

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-shadowNull

$kendo-treeview-item-focus-shadow

null

Description
Box shadow of a focused load more.

Typography

NameTypeDefault valueComputed value
$enable-typographyBool

false

false

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

14px

14px

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

Roboto, "Helvetica Neue", sans-serif

Roboto, "Helvetica Neue", sans-serif

Description
Font family across all components.
$font-family-monospaceList

Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace

Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace

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

(28 / 14)

2

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.

Suggested Links

Previous
Overview
Next
Customizing Avatar

In this article

Not finding the help you need?

Contact Support