New to Kendo UI for Angular? Start a free 30-day trial
Customization
Variables
The following table lists the available variables for customizing the Material theme.
Common
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-border-radius | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
Border radius for all components. | |||
$kendo-base-bg | Color | k-map-get( $theme, base-bg ) | #ffffff |
Description
The background of the components' chrome area. | |||
$kendo-base-text | Color | k-map-get( $theme, component-text ) | rgba(0, 0, 0, 0.87) |
Description
The text color of the components' chrome area. | |||
$kendo-base-border | Color | rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) | rgba(0, 0, 0, 0.08) |
Description
The border of the components' chrome area. | |||
$kendo-base-gradient | Null | null | null |
Description
The gradient background of the components' chrome area. | |||
$kendo-hover-bg | Color | k-map-get( $theme, hover-bg ) | rgba(0, 0, 0, 0.04) |
Description
The background of hovered items. | |||
$kendo-hover-text | Color | $kendo-base-text | rgba(0, 0, 0, 0.87) |
Description
The text color of hovered items. | |||
$kendo-hover-border | Color | rgba( $kendo-base-border, .15 ) | rgba(0, 0, 0, 0.15) |
Description
The border color of hovered items. | |||
$kendo-hover-gradient | Null | null | null |
Description
The gradient background of hovered items. | |||
$kendo-selected-bg | Color | $kendo-color-secondary | #e51a5f |
Description
The background of selected items. | |||
$kendo-selected-text | Color | $kendo-color-secondary-contrast | white |
Description
The text color of selected items. | |||
$kendo-selected-border | Color | rgba( $kendo-base-border, .1 ) | rgba(0, 0, 0, 0.1) |
Description
The border color of selected items. | |||
$kendo-selected-gradient | Null | null | null |
Description
The gradient background of selected items. | |||
$kendo-list-sizes | Map | (
sm: (
font-size: $kendo-list-sm-font-size,
line-height: $kendo-list-sm-line-height,
header-padding-x: $kendo-list-sm-header-padding-x,
header-padding-y: $kendo-list-sm-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-sm-item-padding-x,
item-padding-y: $kendo-list-sm-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-sm-group-item-padding-x,
group-item-padding-y: $kendo-list-sm-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
),
md: (
font-size: $kendo-list-md-font-size,
line-height: $kendo-list-md-line-height,
header-padding-x: $kendo-list-md-header-padding-x,
header-padding-y: $kendo-list-md-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-md-item-padding-x,
item-padding-y: $kendo-list-md-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-md-group-item-padding-x,
group-item-padding-y: $kendo-list-md-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
),
lg: (
font-size: $kendo-list-lg-font-size,
line-height: $kendo-list-lg-line-height,
header-padding-x: $kendo-list-lg-header-padding-x,
header-padding-y: $kendo-list-lg-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-lg-item-padding-x,
item-padding-y: $kendo-list-lg-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-lg-group-item-padding-x,
group-item-padding-y: $kendo-list-lg-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
)
) | (sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 6px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 8px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 10px, group-item-font-size: null, group-item-line-height: null)) |
Description
The map with the sizes of the List. @group list |
Appbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-appbar-margin-x | Null | null | null |
Description
The horizontal margin of the AppBar. | |||
$kendo-appbar-margin-y | Null | null | null |
Description
The vertical margin of the AppBar. | |||
$kendo-appbar-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the AppBar. | |||
$kendo-appbar-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the AppBar. | |||
$kendo-appbar-border-width | Number | 0px | 0px |
Description
The width of the border around the AppBar. | |||
$kendo-appbar-zindex | Number | 1000 | 1000 |
Description
The z-index of the AppBar. | |||
$kendo-appbar-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the AppBar. | |||
$kendo-appbar-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the AppBar. | |||
$kendo-appbar-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the AppBar. | |||
$kendo-appbar-gap | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The spacing between the AppBar sections. | |||
$kendo-appbar-light-bg | Color | $kendo-color-light | #f5f5f5 |
Description
The background color of the AppBar based on light theme color. | |||
$kendo-appbar-light-text | Color | k-contrast-color( $kendo-color-light ) | black |
Description
TThe text color of the AppBar based on light theme color. | |||
$kendo-appbar-dark-bg | Color | $kendo-color-dark | #424242 |
Description
The background color of the AppBar based on dark theme color. | |||
$kendo-appbar-dark-text | Color | k-contrast-color( $kendo-color-dark ) | white |
Description
The text color of the AppBar based on dark theme color. | |||
$kendo-appbar-box-shadow | String | $box-shadow-depth-4 | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the AppBar. | |||
$kendo-appbar-bottom-box-shadow | String | $kendo-appbar-box-shadow | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the AppBar with bottom position. |
Avatar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-avatar-border-width | Number | 1px | 1px |
Description
The border width of the Avatar. | |||
$kendo-avatar-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Avatar. | |||
$kendo-avatar-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Avatar. | |||
$kendo-avatar-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the Avatar. | |||
$kendo-avatar-sizes | Map | (
sm: k-map-get( $kendo-spacing, 4 ),
md: k-map-get( $kendo-spacing, 8 ),
lg: k-map-get( $kendo-spacing, 16 )
) | (sm: 16px, md: 32px, lg: 64px) |
Description
The sizes map of the Avatar. | |||
$kendo-avatar-theme-colors | Map | $kendo-theme-colors | ("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242) |
Description
The theme colors map of the Avatar. |
Badge
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-badge-border-width | Number | 1px | 1px |
Description
The width of the border around the Badge. | |||
$kendo-badge-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border radius of the Badge. | |||
$kendo-badge-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the Badge. | |||
$kendo-badge-sm-padding-x | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
The horizontal padding of the small Badge. | |||
$kendo-badge-md-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the medium Badge. | |||
$kendo-badge-lg-padding-x | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The horizontal padding of the large Badge. | |||
$kendo-badge-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the Badge. | |||
$kendo-badge-sm-padding-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
The vertical padding of the small Badge. | |||
$kendo-badge-md-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the medium Badge. | |||
$kendo-badge-lg-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The vertical padding of the large Badge. | |||
$kendo-badge-font-size | Number | $kendo-font-size-xs | 10px |
Description
The font sizes of the Badge. | |||
$kendo-badge-sm-font-size | Number | $kendo-font-size-xs | 10px |
Description
The font size of the small Badge. | |||
$kendo-badge-md-font-size | Number | $kendo-font-size-xs | 10px |
Description
The font size of the medium Badge. | |||
$kendo-badge-lg-font-size | Number | $kendo-font-size-xs | 10px |
Description
The font size of the large Badge. | |||
$kendo-badge-line-height | Number | 1 | 1 |
Description
The line heights used along with the $kendo-font-size variable. | |||
$kendo-badge-sm-line-height | Number | $kendo-badge-line-height | 1 |
Description
The line height used along with the $kendo-font-size variable of the small Badge. | |||
$kendo-badge-md-line-height | Number | $kendo-badge-line-height | 1 |
Description
The line height used along with the $kendo-font-size variable of the medium Badge. | |||
$kendo-badge-lg-line-height | Number | $kendo-badge-line-height | 1 |
Description
The line height used along with the $kendo-font-size variable of the large Badge. | |||
$kendo-badge-min-width | Calculation | calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) | calc( 1em + 8px + 2px) |
Description
The calculated minimum width of the circular Badge. | |||
$kendo-badge-sm-min-width | Calculation | calc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} ) | calc( 1em + 4px + 2px ) |
Description
The calculated minimum width of the small circular Badge. | |||
$kendo-badge-md-min-width | Calculation | calc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} ) | calc( 1em + 8px + 2px ) |
Description
The calculated minimum width of the medium circular Badge. | |||
$kendo-badge-lg-min-width | Calculation | calc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} ) | calc( 1em + 12px + 2px ) |
Description
The calculated minimum width of the large circular Badge. | |||
$kendo-badge-sizes | Map | (
sm: (
padding-x: $kendo-badge-sm-padding-x,
padding-y: $kendo-badge-sm-padding-y,
font-size: $kendo-badge-sm-font-size,
line-height: $kendo-badge-sm-line-height,
min-width: $kendo-badge-sm-min-width
),
md: (
padding-x: $kendo-badge-md-padding-x,
padding-y: $kendo-badge-md-padding-y,
font-size: $kendo-badge-md-font-size,
line-height: $kendo-badge-md-line-height,
min-width: $kendo-badge-md-min-width
),
lg: (
padding-x: $kendo-badge-lg-padding-x,
padding-y: $kendo-badge-lg-padding-y,
font-size: $kendo-badge-lg-font-size,
line-height: $kendo-badge-lg-line-height,
min-width: $kendo-badge-lg-min-width
)
) | (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
The sizes map for the Badge. |
Bottom-navigation
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-bottom-nav-padding-x | Number | 0px | 0px |
Description
The horizontal padding of the BottomNavigation. | |||
$kendo-bottom-nav-padding-y | Number | $kendo-bottom-nav-padding-x | 0px |
Description
The vertical padding of the BottomNavigation. | |||
$kendo-bottom-nav-gap | Number | $kendo-bottom-nav-padding-x | 0px |
Description
The spacing between the BottomNavigation items. | |||
$kendo-bottom-nav-border-width | List | 1px 0px 0px 0px | 1px 0px 0px 0px |
Description
The width of the border around the BottomNavigation. | |||
$kendo-bottom-nav-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the BottomNavigation. | |||
$kendo-bottom-nav-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the BottomNavigation. | |||
$kendo-bottom-nav-line-height | String | normal | normal |
Description
The line height of the BottomNavigation. | |||
$kendo-bottom-nav-letter-spacing | Number | .2px | 0.2px |
Description
The letter spacing of the BottomNavigation. | |||
$kendo-bottom-nav-item-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the BottomNavigation item. | |||
$kendo-bottom-nav-item-padding-y | Number | 0 | 0 |
Description
The vertical padding of the BottomNavigation item. | |||
$kendo-bottom-nav-item-min-width | Number | 72px | 72px |
Description
The minimum width of the BottomNavigation item. | |||
$kendo-bottom-nav-item-max-width | Null | null | null |
Description
The maximum width of the BottomNavigation item. | |||
$kendo-bottom-nav-item-min-height | Calculation | calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-sm-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) | calc( 40px + 16px - 0px ) |
Description
The minimum height of the BottomNavigation item. | |||
$kendo-bottom-nav-item-border-radius | Null | null | null |
Description
The border radius of the BottomNavigation item. | |||
$kendo-bottom-nav-item-gap | List | 0 k-map-get( $kendo-spacing, 1 ) | 0 4px |
Description
The spacing of the BottomNavigation item. | |||
$kendo-bottom-nav-shadow | String | $box-shadow-depth-4 | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the BottomNavigation. | |||
$kendo-bottom-nav-flat-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the flat BottomNavigation. | |||
$kendo-bottom-nav-flat-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the flat BottomNavigation. | |||
$kendo-bottom-nav-flat-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the flat BottomNavigation. |
Breadcrumb
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-breadcrumb-border-width | Number | 0px | 0px |
Description
The width of the border around the Breadcrumb. | |||
$kendo-breadcrumb-margin-x | Null | null | null |
Description
The horizontal margin of the Breadcrumb. | |||
$kendo-breadcrumb-margin-y | Null | null | null |
Description
The vertical margin of the Breadcrumb. | |||
$kendo-breadcrumb-padding-x | Null | null | null |
Description
The horizontal padding of the Breadcrumb. | |||
$kendo-breadcrumb-padding-y | Null | null | null |
Description
The vertical padding of the Breadcrumb. | |||
$kendo-breadcrumb-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Breadcrumb. | |||
$kendo-breadcrumb-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Breadcrumb. | |||
$kendo-breadcrumb-sm-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the small Breadcrumb. | |||
$kendo-breadcrumb-md-font-size | Number | $kendo-breadcrumb-font-size | 14px |
Description
The font size of the medium Breadcrumb. | |||
$kendo-breadcrumb-lg-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the large Breadcrumb. | |||
$kendo-breadcrumb-line-height | Number | $kendo-line-height-md | 2 |
Description
The line-height of the Breadcrumb. | |||
$kendo-breadcrumb-sm-line-height | Number | $kendo-line-height-md | 2 |
Description
The line-height of the small Breadcrumb. | |||
$kendo-breadcrumb-md-line-height | Number | $kendo-breadcrumb-line-height | 2 |
Description
The line-height of the medium Breadcrumb. | |||
$kendo-breadcrumb-lg-line-height | Number | $kendo-line-height-md | 2 |
Description
The line-height of the height Breadcrumb. | |||
$kendo-breadcrumb-bg | Color | $kendo-component-bg | #ffffff |
Description
The base background of the Breadcrumb. | |||
$kendo-breadcrumb-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The base text color of the Breadcrumb. | |||
$kendo-breadcrumb-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The base border color of the Breadcrumb. | |||
$kendo-breadcrumb-focus-shadow | List | 0 0 2px 1px rgba( black, .06 ) | 0 0 2px 1px rgba(0, 0, 0, 0.06) |
Description
The box shadow of the focused Breadcrumb. | |||
$kendo-breadcrumb-link-padding-x | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The horizontal padding of the Breadcrumb link. | |||
$kendo-breadcrumb-sm-link-padding-x | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The horizontal padding of the small Breadcrumb link. | |||
$kendo-breadcrumb-md-link-padding-x | Number | $kendo-breadcrumb-link-padding-x | 10px |
Description
The horizontal padding of the medium Breadcrumb link. | |||
$kendo-breadcrumb-lg-link-padding-x | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The horizontal padding of the large Breadcrumb link. | |||
$kendo-breadcrumb-link-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the Breadcrumb link. | |||
$kendo-breadcrumb-sm-link-padding-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
The vertical padding of the small Breadcrumb link. | |||
$kendo-breadcrumb-md-link-padding-y | Number | $kendo-breadcrumb-link-padding-y | 4px |
Description
The vertical padding of the medium Breadcrumb link. | |||
$kendo-breadcrumb-lg-link-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The vertical padding of the large Breadcrumb link. | |||
$kendo-breadcrumb-link-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border-radius of the Breadcrumb link. | |||
$kendo-breadcrumb-icon-link-padding-y | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The vertical padding of the Breadcrumb link icon. | |||
$kendo-breadcrumb-sm-icon-link-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the small Breadcrumb link icon. | |||
$kendo-breadcrumb-md-icon-link-padding-y | Number | $kendo-breadcrumb-icon-link-padding-y | 10px |
Description
The vertical padding of the medium Breadcrumb link icon. | |||
$kendo-breadcrumb-lg-icon-link-padding-y | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The vertical padding of the large Breadcrumb link icon. | |||
$kendo-breadcrumb-icon-link-padding-x | Number | $kendo-breadcrumb-icon-link-padding-y | 10px |
Description
The horizontal padding of the Breadcrumb link icon. | |||
$kendo-breadcrumb-sm-icon-link-padding-x | Number | $kendo-breadcrumb-sm-icon-link-padding-y | 8px |
Description
The horizontal padding of the small Breadcrumb link icon. | |||
$kendo-breadcrumb-md-icon-link-padding-x | Number | $kendo-breadcrumb-icon-link-padding-x | 10px |
Description
The horizontal padding of the medium Breadcrumb link icon. | |||
$kendo-breadcrumb-lg-icon-link-padding-x | Number | $kendo-breadcrumb-lg-icon-link-padding-y | 12px |
Description
The horizontal padding of the large Breadcrumb link icon. | |||
$kendo-breadcrumb-link-icon-spacing | Number | $kendo-icon-spacing | 8px |
Description
The spacing of the Breadcrumb link icon. | |||
$kendo-breadcrumb-link-initial-text | String | inherit | inherit |
Description
The text color of the Breadcrumb link. | |||
$kendo-breadcrumb-link-bg | Null | null | null |
Description
The background color of the Breadcrumb link. | |||
$kendo-breadcrumb-link-text | Color | $kendo-color-primary | #3f51b5 |
Description
The text color of the Breadcrumb link. | |||
$kendo-breadcrumb-link-border | Null | null | null |
Description
The border color of the Breadcrumb link. | |||
$kendo-breadcrumb-link-hover-bg | Color | $kendo-hover-bg | rgba(0, 0, 0, 0.04) |
Description
The background color of the hovered Breadcrumb link. | |||
$kendo-breadcrumb-link-hover-text | Null | null | null |
Description
The text color of the hovered Breadcrumb link. | |||
$kendo-breadcrumb-link-hover-border | Null | null | null |
Description
The border color of the hovered Breadcrumb link. | |||
$kendo-breadcrumb-link-focus-bg | Color | k-map-get( $theme, focus-bg ) | rgba(0, 0, 0, 0.12) |
Description
The background color of the focused Breadcrumb link. | |||
$kendo-breadcrumb-link-focus-text | Null | null | null |
Description
The text color of the focused Breadcrumb link. | |||
$kendo-breadcrumb-link-focus-border | Null | null | null |
Description
The border color of the focused Breadcrumb link. | |||
$kendo-breadcrumb-link-focus-shadow | Null | null | null |
Description
The box shadow of the focused Breadcrumb link. | |||
$kendo-breadcrumb-root-link-bg | Null | null | null |
Description
The background color of the Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-text | Null | null | null |
Description
The text color of the Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-border | Null | null | null |
Description
The border color of the Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-hover-bg | Color | $kendo-hover-bg | rgba(0, 0, 0, 0.04) |
Description
The background color of the hovered Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-hover-text | Null | null | null |
Description
The text color of the hovered Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-hover-border | Null | null | null |
Description
The border color of the hovered Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-focus-bg | Color | k-map-get( $theme, focus-bg ) | rgba(0, 0, 0, 0.12) |
Description
The background color of the focused Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-focus-text | Null | null | null |
Description
The text color of the focused Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-focus-border | Null | null | null |
Description
The border color of the focused Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-focus-shadow | Null | null | null |
Description
The box shadow of the focused Breadcrumb root link. | |||
$kendo-breadcrumb-current-item-bg | Null | null | null |
Description
The background color of the current Breadcrumb root link. | |||
$kendo-breadcrumb-current-item-text | Null | null | null |
Description
The text color of the current Breadcrumb root link. | |||
$kendo-breadcrumb-current-item-border | Null | null | null |
Description
The border color of the current Breadcrumb root link. | |||
$kendo-breadcrumb-sizes | Map | (
sm: (
link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
font-size: $kendo-breadcrumb-sm-font-size,
line-height: $kendo-breadcrumb-sm-line-height
),
md: (
link-padding-x: $kendo-breadcrumb-md-link-padding-x,
link-padding-y: $kendo-breadcrumb-md-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
font-size: $kendo-breadcrumb-md-font-size,
line-height: $kendo-breadcrumb-md-line-height
),
lg: (
link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
font-size: $kendo-breadcrumb-lg-font-size,
line-height: $kendo-breadcrumb-lg-line-height
)
) | (sm: (link-padding-x: 10px, link-padding-y: 2px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 2), md: (link-padding-x: 10px, link-padding-y: 4px, icon-link-padding-x: 10px, icon-link-padding-y: 10px, font-size: 14px, line-height: 2), lg: (link-padding-x: 10px, link-padding-y: 6px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 14px, line-height: 2)) |
Description
The sizes map for the Breadcrumb. |
Button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-button-border-width | Number | 1px | 1px |
Description
The width of the border around the Button. | |||
$kendo-button-border-radius | Null | null | null |
Description
The border radius of the Button. | |||
$kendo-button-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the Button. | |||
$kendo-button-sm-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the small Button. | |||
$kendo-button-md-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the medium Button. | |||
$kendo-button-lg-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the large Button. | |||
$kendo-button-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the Button. | |||
$kendo-button-sm-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The vertical padding of the small Button. | |||
$kendo-button-md-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the medium Button. | |||
$kendo-button-lg-padding-y | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The vertical padding of the large Button. | |||
$kendo-button-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Button. | |||
$kendo-button-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Button. | |||
$kendo-button-sm-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the small Button. | |||
$kendo-button-md-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the medium Button. | |||
$kendo-button-lg-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the large Button. | |||
$kendo-button-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
Line heights used along with the $kendo-font-size variable. | |||
$kendo-button-sm-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height used along with the $kendo-font-size variable of the small Button. | |||
$kendo-button-md-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height used along with the $kendo-font-size variable of the medium Button. | |||
$kendo-button-lg-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height used along with the $kendo-font-size variable of the large Button. | |||
$kendo-button-calc-size | Calculation | calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) | calc( 1.4285714286em + 16px + 2px ) |
Description
The calculated height of the Button. | |||
$kendo-button-inner-calc-size | Calculation | calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) | calc( 1.4285714286em + 16px ) |
Description
The calculated inner height of the Button excluding the border width. | |||
$kendo-button-sizes | Map | (
sm: (
padding-x: $kendo-button-sm-padding-x,
padding-y: $kendo-button-sm-padding-y,
font-size: $kendo-button-sm-font-size,
line-height: $kendo-button-sm-line-height
),
md: (
padding-x: $kendo-button-md-padding-x,
padding-y: $kendo-button-md-padding-y,
font-size: $kendo-button-md-font-size,
line-height: $kendo-button-md-line-height
),
lg: (
padding-x: $kendo-button-lg-padding-x,
padding-y: $kendo-button-lg-padding-y,
font-size: $kendo-button-lg-font-size,
line-height: $kendo-button-lg-line-height
)
) | (sm: (padding-x: 16px, padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (padding-x: 16px, padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (padding-x: 16px, padding-y: 10px, font-size: 14px, line-height: 1.4285714286)) |
Description
The sizes map for the Button. | |||
$kendo-button-theme-colors | Map | k-map-merge(
$kendo-theme-colors,
( "base": $kendo-base-bg )
) | ("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242, "base": #ffffff) |
Description
The theme colors map for the Button. | |||
$kendo-button-bg | Color | $kendo-base-bg | #ffffff |
Description
The base background of the Button. | |||
$kendo-button-text | Color | $kendo-base-text | rgba(0, 0, 0, 0.87) |
Description
The base text color of the Button. | |||
$kendo-button-border | Color | $kendo-button-bg | #ffffff |
Description
The base border color of the Button. | |||
$kendo-button-gradient | Null | null | null |
Description
The base background gradient of the Button. | |||
$kendo-button-shadow | String | $box-shadow-depth-2 | var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)) |
Description
The base shadow of the Button. | |||
$kendo-button-hover-bg | Null | null | null |
Description
The base background of the hovered Button. | |||
$kendo-button-hover-text | Null | null | null |
Description
The base text color of the hovered Button. | |||
$kendo-button-hover-border | Null | null | null |
Description
The base border color of the hovered Button. | |||
$kendo-button-hover-gradient | Null | null | null |
Description
The base background gradient of the hovered Button. | |||
$kendo-button-hover-shadow | Null | null | null |
Description
The base shadow of the hovered Button. | |||
$kendo-button-active-bg | Null | null | null |
Description
The base background color of the active Button. | |||
$kendo-button-active-text | Null | null | null |
Description
The base text color of the active Button. | |||
$kendo-button-active-border | Null | null | null |
Description
The base border color of the active Button. | |||
$kendo-button-active-gradient | Null | null | null |
Description
The base background gradient of the active Button. | |||
$kendo-button-active-shadow | String | $box-shadow-depth-6 | var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)) |
Description
The base shadow of the active Button. | |||
$kendo-button-selected-bg | Null | $kendo-button-active-bg | null |
Description
The base background color of the selected Button. | |||
$kendo-button-selected-text | Null | $kendo-button-active-text | null |
Description
The base text color of the selected Button. | |||
$kendo-button-selected-border | Null | $kendo-button-active-bg | null |
Description
The base border color of the selected Button. | |||
$kendo-button-selected-gradient | Null | null | null |
Description
The base background gradient of the selected Button. | |||
$kendo-button-selected-shadow | Null | null | null |
Description
The base shadow of the selected Button. | |||
$kendo-button-focus-bg | Null | null | null |
Description
The base background of the focused Button. | |||
$kendo-button-focus-text | Null | null | null |
Description
The base text color of the focused Button. | |||
$kendo-button-focus-border | Null | null | null |
Description
The base border color of the focused Button. | |||
$kendo-button-focus-gradient | Null | null | null |
Description
The base background gradient of focused Button. | |||
$kendo-button-focus-shadow | Null | null | null |
Description
The base shadow of the focused Button. | |||
$kendo-button-disabled-bg | Color | k-try-shade( $kendo-body-bg, 12% ) | #e0e0e0 |
Description
The base background color of the disabled Button. | |||
$kendo-button-disabled-text | Color | $kendo-disabled-text | rgba(0, 0, 0, 0.38) |
Description
The base text color of the disabled Button. | |||
$kendo-button-disabled-border | Color | $kendo-button-disabled-bg | #e0e0e0 |
Description
The base border color of the disabled Button. | |||
$kendo-button-disabled-gradient | Null | null | null |
Description
The base background gradient of the disabled Button. | |||
$kendo-button-disabled-shadow | String | none | none |
Description
The base shadow of the disabled Button. | |||
$kendo-flat-button-hover-opacity | Number | .08 | 0.08 |
Description
The overlay opacity of the hovered flat Button. Used to create a background for the flat Button. | |||
$kendo-flat-button-focus-opacity | Number | .12 | 0.12 |
Description
The overlay opacity of the focused flat Button. Used to create a background for the flat Button. | |||
$kendo-flat-button-active-opacity | Number | .16 | 0.16 |
Description
The overlay opacity of the active flat Button. Used to create a background for the flat Button. | |||
$kendo-flat-button-selected-opacity | Number | .22 | 0.22 |
Description
The overlay opacity of the selected flat Button. Used to create a background for the flat Button. | |||
$kendo-flat-button-focus-ring-opacity | Null | null | null |
Description
The opacity of the flat Button focus ring. Used to create a border for the flat Button. | |||
$kendo-button-transition | List | box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) | box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) |
Description
The box-shadow transition of the Button. |
Charts
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-series-a | Color | get-base-hue( purple, 500 ) | #9c27b0 |
Description
The first base series color and its light and dark shades. | |||
$kendo-series-b | Color | get-base-hue( blue, 500 ) | #2196f3 |
Description
The second base series color and its light and dark shades. | |||
$kendo-series-c | Color | get-base-hue( teal, 500 ) | #009688 |
Description
The third base series color and its light and dark shades. | |||
$kendo-series-d | Color | get-base-hue( yellow, 500 ) | #ffeb3b |
Description
The fourth base series color and its light and dark shades. | |||
$kendo-series-e | Color | get-base-hue( red, 500 ) | #f44336 |
Description
The fifth base series color and its light and dark shades. | |||
$kendo-series-f | Color | get-base-hue( green, 500 ) | #4caf50 |
Description
The sixth base series color and its light and dark shades. | |||
$kendo-series-1 | Color | $kendo-series-a | #9c27b0 |
Description
The series colors in order: base, light, dark, lighter, darker | |||
$kendo-chart-major-lines | Color | rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) | rgba(0, 0, 0, 0.08) |
Description
The color of the Chart grid lines (major). | |||
$kendo-chart-minor-lines | Color | rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) | rgba(0, 0, 0, 0.04) |
Description
The color of the Chart grid lines (minor). |
Checkbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-checkbox-border-width | Number | 2px | 2px |
Description
The border width of the CheckBox. | |||
$kendo-checkbox-sm-size | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The size of a small CheckBox. | |||
$kendo-checkbox-md-size | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The size of a medium CheckBox. | |||
$kendo-checkbox-lg-size | Number | k-map-get( $kendo-spacing, 5 ) | 20px |
Description
The size of a large CheckBox. | |||
$kendo-checkbox-sm-glyph-size | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The glyph size of a small CheckBox. | |||
$kendo-checkbox-md-glyph-size | Number | k-map-get( $kendo-spacing, 3.5 ) | 14px |
Description
The glyph size of a medium CheckBox. | |||
$kendo-checkbox-lg-glyph-size | Number | k-map-get( $kendo-spacing, 4.5 ) | 18px |
Description
The glyph size of a large CheckBox. | |||
$kendo-checkbox-sm-ripple-size | Number | 300% | 300% |
Description
The ripple size of a small CheckBox. | |||
$kendo-checkbox-md-ripple-size | Number | 300% | 300% |
Description
The ripple size of a medium CheckBox. | |||
$kendo-checkbox-lg-ripple-size | Number | 300% | 300% |
Description
The ripple size of a large CheckBox. | |||
$kendo-checkbox-bg | Null | null | null |
Description
The background color of the CheckBox. | |||
$kendo-checkbox-text | Null | null | null |
Description
The text color of the CheckBox. | |||
$kendo-checkbox-border | Color | rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) | rgba(0, 0, 0, 0.54) |
Description
The border color of the CheckBox. | |||
$kendo-checkbox-hover-bg | Null | null | null |
Description
The background color of the hovered CheckBox. | |||
$kendo-checkbox-hover-text | Null | null | null |
Description
The text color of the hovered CheckBox. | |||
$kendo-checkbox-hover-border | Null | null | null |
Description
The border color of the hovered CheckBox. | |||
$kendo-checkbox-checked-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the checked CheckBox. | |||
$kendo-checkbox-checked-text | Color | k-contrast-color( $kendo-checkbox-checked-bg ) | white |
Description
The text color of the checked CheckBox. | |||
$kendo-checkbox-checked-border | Color | $kendo-checkbox-checked-bg | #3f51b5 |
Description
The border color of the checked CheckBox. | |||
$kendo-checkbox-indeterminate-bg | Color | $kendo-checkbox-checked-bg | #3f51b5 |
Description
The background color of the indeterminate CheckBox. | |||
$kendo-checkbox-indeterminate-text | Color | $kendo-checkbox-checked-text | white |
Description
The text color of the indeterminate CheckBox. | |||
$kendo-checkbox-indeterminate-border | Color | $kendo-checkbox-checked-border | #3f51b5 |
Description
The border color of the indeterminate CheckBox. | |||
$kendo-checkbox-focus-border | Null | null | null |
Description
The border color of the focused CheckBox. | |||
$kendo-checkbox-focus-shadow | Null | null | null |
Description
The box shadow of the focused CheckBox. | |||
$kendo-checkbox-focus-checked-border | Null | null | null |
Description
The border color of the focused and checked CheckBox. | |||
$kendo-checkbox-focus-checked-shadow | Null | null | null |
Description
The box shadow of the focused and checked CheckBox. | |||
$kendo-checkbox-disabled-bg | Null | null | null |
Description
The background color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-text | Null | null | null |
Description
The text color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-border | Color | k-try-shade( $kendo-component-bg, 4 ) | #adadad |
Description
The border color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-checked-bg | Color | $kendo-checkbox-disabled-border | #adadad |
Description
The background color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-checked-text | Color | k-contrast-color( $kendo-checkbox-disabled-checked-bg ) | black |
Description
The text color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-checked-border | Color | $kendo-checkbox-disabled-checked-bg | #adadad |
Description
The border color of the disabled and checked CheckBox. | |||
$kendo-checkbox-invalid-bg | Null | null | null |
Description
The background color of an invalid CheckBox. | |||
$kendo-checkbox-invalid-text | Color | $kendo-invalid-text | #f31700 |
Description
The text color of an invalid CheckBox. | |||
$kendo-checkbox-invalid-border | Color | $kendo-invalid-border | #f31700 |
Description
The border color of an invalid CheckBox. | |||
$kendo-checkbox-indicator-type | String | image | image |
Description
The type of the CheckBox indicator. | |||
$kendo-checkbox-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
The font family of the CheckBox indicator glyph. | |||
$kendo-checkbox-checked-glyph | String | "\e118" | "\e118" |
Description
The glyph of the CheckBox indicator. | |||
$kendo-checkbox-indeterminate-glyph | String | "\e121" | "\e121" |
Description
The glyph of the indeterminate CheckBox indicator. | |||
$kendo-checkbox-checked-image | String | k-escape-svg( url("data:image/svg+xml,") ) | 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
The image for a checked CheckBox indicator. | |||
$kendo-checkbox-indeterminate-image | String | k-escape-svg( url("data:image/svg+xml,") ) | 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
The image for a indeterminate CheckBox indicator. | |||
$kendo-checkbox-label-margin-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal margin of the CheckBox inside a label. | |||
$kendo-checkbox-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The spacing between the items in a horizontal CheckBox list. | |||
$kendo-checkbox-list-item-padding-x | Number | 0px | 0px |
Description
The horizontal padding of the CheckBox list items. | |||
$kendo-checkbox-list-item-padding-y | Number | $kendo-list-md-item-padding-y | 8px |
Description
The vertical padding of the CheckBox list items. | |||
$kendo-checkbox-ripple-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the CheckBox' ripple. | |||
$kendo-checkbox-ripple-opacity | Number | .2 | 0.2 |
Description
The opacity of the CheckBox' ripple. |
Chip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-chip-border-width | Number | 1px | 1px |
Description
The width of the border around the Chip. | |||
$kendo-chip-spacing | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The spacing between the text and the icons of the Chip. | |||
$kendo-chip-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the Chip. | |||
$kendo-chip-sm-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the small Chip. | |||
$kendo-chip-md-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the medium Chip. | |||
$kendo-chip-lg-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the large Chip. | |||
$kendo-chip-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the Chip. | |||
$kendo-chip-sm-padding-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
The vertical padding of the small Chip. | |||
$kendo-chip-md-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the medium Chip. | |||
$kendo-chip-lg-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The vertical padding of the large Chip. | |||
$kendo-chip-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Chip. | |||
$kendo-chip-sm-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the small Chip. | |||
$kendo-chip-md-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the medium Chip. | |||
$kendo-chip-lg-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the large Chip. | |||
$kendo-chip-line-height | Number | k-math-div( 18, 14 ) | 1.2857142857 |
Description
The Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-sm-line-height | Number | $kendo-chip-line-height | 1.2857142857 |
Description
The small Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-md-line-height | Number | $kendo-chip-line-height | 1.2857142857 |
Description
The medium Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-lg-line-height | Number | $kendo-chip-line-height | 1.2857142857 |
Description
The large Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-calc-size | Calculation | calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) | calc( 1.2857142857em + 8px + 2px ) |
Description
The calculated height of the Chip. | |||
$kendo-chip-sizes | Map | (
sm: (
padding-x: $kendo-chip-sm-padding-x,
padding-y: $kendo-chip-sm-padding-y,
font-size: $kendo-chip-sm-font-size,
line-height: $kendo-chip-sm-line-height
),
md: (
padding-x: $kendo-chip-md-padding-x,
padding-y: $kendo-chip-md-padding-y,
font-size: $kendo-chip-md-font-size,
line-height: $kendo-chip-md-line-height
),
lg: (
padding-x: $kendo-chip-lg-padding-x,
padding-y: $kendo-chip-lg-padding-y,
font-size: $kendo-chip-lg-font-size,
line-height: $kendo-chip-lg-line-height
)
) | (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
The map with the sizes of the Chip. | |||
$kendo-chip-base-bg | Color | if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black) | #000000 |
Description
The base background of the Chip. | |||
$kendo-chip-theme-colors | Map | (
"base": $kendo-chip-base-bg,
"error": k-map-get( $kendo-theme-colors, "error" ),
"info": k-map-get( $kendo-theme-colors, "info" ),
"warning": k-map-get( $kendo-theme-colors, "warning" ),
"success": k-map-get( $kendo-theme-colors, "success" )
) | ("base": #000000, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400) |
Description
The theme colors map for the Chip. | |||
$kendo-chip-solid-bg | Color | if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) | #ebebeb |
Description
The base background color of the solid Chip. | |||
$kendo-chip-solid-text | Color | $kendo-button-text | rgba(0, 0, 0, 0.87) |
Description
The base text color of the solid Chip. | |||
$kendo-chip-solid-border | Color | $kendo-chip-solid-bg | #ebebeb |
Description
The base border color of the solid Chip. | |||
$kendo-chip-solid-shadow | Null | null | null |
Description
The base shadow of the solid Chip. | |||
$kendo-chip-solid-gradient | Null | $kendo-button-gradient | null |
Description
The base gradient of the solid Chip. | |||
$kendo-chip-solid-focus-bg | Color | k-try-tint( $kendo-chip-base-bg, 80% ) | #cccccc |
Description
The base background color of the focused solid Chip. | |||
$kendo-chip-solid-focus-text | Null | null | null |
Description
The base text color of the focused solid Chip. | |||
$kendo-chip-solid-hover-bg | Color | k-try-tint( $kendo-chip-base-bg, 84% ) | #d6d6d6 |
Description
The base background color of the hovered solid Chip. | |||
$kendo-chip-solid-hover-text | Null | null | null |
Description
The base text color of the hovered solid Chip. | |||
$kendo-chip-solid-selected-bg | Color | k-try-tint( $kendo-chip-base-bg, 76% ) | #c2c2c2 |
Description
The base background color of the selected solid Chip. | |||
$kendo-chip-solid-selected-text | Null | null | null |
Description
The base text color of the selected solid Chip. | |||
$kendo-chip-outline-bg | Color | $kendo-component-bg | #ffffff |
Description
The base background color of the outline Chip. | |||
$kendo-chip-outline-text | Color | $kendo-chip-solid-text | rgba(0, 0, 0, 0.87) |
Description
The base text color of the outline Chip. | |||
$kendo-chip-outline-border | Color | $kendo-chip-outline-text | rgba(0, 0, 0, 0.87) |
Description
The base border color of the outline Chip. | |||
$kendo-chip-outline-shadow | Null | null | null |
Description
The base shadow of the outline Chip. | |||
$kendo-chip-outline-hover-bg | Color | k-try-tint( $kendo-chip-base-bg, 92% ) | #ebebeb |
Description
The base background color of the hovered outline Chip. | |||
$kendo-chip-outline-hover-text | Color | k-contrast-color( $kendo-chip-outline-hover-bg ) | black |
Description
The base text color of the hovered outline Chip. | |||
$kendo-chip-outline-selected-bg | Color | k-try-tint( $kendo-chip-base-bg, 84% ) | #d6d6d6 |
Description
The base background color of the selected outline Chip. | |||
$kendo-chip-outline-selected-text | Color | $kendo-chip-outline-hover-text | black |
Description
The base text color of the selected outline Chip. | |||
$kendo-chip-list-sizes | Map | (
sm: k-map-get( $kendo-spacing, 1 ),
md: k-map-get( $kendo-spacing, 1 ),
lg: k-map-get( $kendo-spacing, 1 )
) | (sm: 4px, md: 4px, lg: 4px) |
Description
The sizes of the Chip list. |
Cologradient
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-gradient-spacer | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The spacer of the ColorGradient. | |||
$kendo-color-gradient-width | Number | 294px | 294px |
Description
The width of the ColorGradient. | |||
$kendo-color-gradient-border-width | Number | 1px | 1px |
Description
The width of the border around the ColorGradient. | |||
$kendo-color-gradient-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border radius of the ColorGradient. | |||
$kendo-color-gradient-padding-y | Number | $kendo-color-gradient-spacer | 12px |
Description
The vertical padding of the ColorGradient. | |||
$kendo-color-gradient-padding-x | Number | $kendo-color-gradient-padding-y | 12px |
Description
The horizontal padding of the ColorGradient. | |||
$kendo-color-gradient-gap | Number | $kendo-color-gradient-spacer | 12px |
Description
The spacing between the sections of the ColorGradient. | |||
$kendo-color-gradient-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ColorGradient. | |||
$kendo-color-gradient-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the ColorGradient. | |||
$kendo-color-gradient-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the ColorGradient. | |||
$kendo-color-gradient-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ColorGradient. | |||
$kendo-color-gradient-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ColorGradient. | |||
$kendo-color-gradient-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the ColorGradient. | |||
$kendo-color-gradient-focus-border | Color | $kendo-hover-border | rgba(0, 0, 0, 0.15) |
Description
The border color of the focused ColorGradient. | |||
$kendo-color-gradient-focus-shadow | String | $box-shadow-depth-3 | var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the focused ColorGradient. | |||
$kendo-color-gradient-canvas-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border radius of the ColorGradient canvas. | |||
$kendo-color-gradient-canvas-gap | Number | $kendo-color-gradient-spacer | 12px |
Description
The spacing between the items of the ColorGradient canvas. | |||
$kendo-color-gradient-canvas-rectangle-height | Number | 180px | 180px |
Description
The height the ColorGradient canvas hsv rectangle. | |||
$kendo-color-gradient-slider-track-size | Number | 10px | 10px |
Description
The width of the ColorGradient slider. | |||
$kendo-color-gradient-slider-border-radius | Number | 10px | 10px |
Description
The border radius of the ColorGradient slider. | |||
$kendo-color-gradient-slider-draghandle-border-width | Number | 3px | 3px |
Description
The width of the border around the ColorGradient slider drag handle. | |||
$kendo-color-gradient-slider-vertical-size | Number | 180px | 180px |
Description
The height of the ColorGradient vertical slider. | |||
$kendo-color-gradient-slider-horizontal-size | Number | 100% | 100% |
Description
The width of the ColorGradient horizontal slider. | |||
$kendo-color-gradient-draghandle-width | Number | 14px | 14px |
Description
The width of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-height | Number | 14px | 14px |
Description
The height of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-border-width | Number | 1px | 1px |
Description
The width of the border around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-outline-width | Number | 1px | 1px |
Description
The width of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-border-radius | Number | 50% | 50% |
Description
The border radius of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-text | Null | null | null |
Description
The text color of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-bg | Color | transparent | transparent |
Description
The background color of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-border | Color | rgba( white, .8 ) | rgba(255, 255, 255, 0.8) |
Description
The color of the border around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-shadow | Color | rgba( $kendo-color-black, .5) | rgba(0, 0, 0, 0.5) |
Description
The color of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-focus-shadow | Color | $kendo-color-black | #000000 |
Description
The focus color of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-hover-shadow | Color | $kendo-color-black | #000000 |
Description
The outline color of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-shadow | Color | k-elevation(2) | rgba(0, 0, 0, 0.5) |
Description
The box shadow of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-canvas-draghandle-margin-y | Number | - k-math-div( $kendo-color-gradient-draghandle-height, 2 ) | -7px |
Description
The vertical margin of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-canvas-draghandle-margin-x | Number | - k-math-div( $kendo-color-gradient-draghandle-width, 2 ) | -7px |
Description
The horizontal margin of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-input-width | Number | 50px | 50px |
Description
The width of the ColorGradient input. | |||
$kendo-color-gradient-input-gap | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The spacing between the ColorGradient inputs. | |||
$kendo-color-gradient-input-label-gap | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The spacing between the ColorGradient inputs and their labels. | |||
$kendo-color-gradient-input-label-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the ColorGradient input labels. | |||
$kendo-color-gradient-contrast-ratio-font-weight | Number | $kendo-font-weight-medium | 500 |
Description
The font weight of the ColorGradient contrast ratio text. | |||
$kendo-color-gradient-contrast-spacer | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The spacing between the items in the ColorGradient contrast tool. |
Color System
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-white | Color | #ffffff | #ffffff |
Description
The color white. Note: you cannot change this value. | |||
$kendo-color-black | Color | #000000 | #000000 |
Description
The color black. Note: you cannot change this value. | |||
$kendo-color-primary | Color | 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. | |||
$kendo-color-primary-contrast | Color | material-color( $primary-palette, main-contrast ) | white |
Description
The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors. | |||
$kendo-color-secondary | Color | material-color( $secondary-palette, main ) | #e51a5f |
Description
The secondary color of the theme. | |||
$kendo-color-secondary-contrast | Color | material-color( $secondary-palette, main-contrast ) | white |
Description
The color used along with the secondary color denoted by $kendo-color-secondary. Used to provide contrast between the background and foreground colors. | |||
$kendo-color-tertiary | Color | material-color($tertiary-palette, main) | #00695c |
Description
The tertiary color of the theme. | |||
$kendo-color-tertiary-contrast | Color | material-color($tertiary-palette, main-contrast) | white |
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary. Used to provide contrast between the background and foreground colors. | |||
$kendo-color-info | Color | #0058e9 | #0058e9 |
Description
The color for informational messages and states. | |||
$kendo-color-success | Color | #37b400 | #37b400 |
Description
The color for success messages and states. | |||
$kendo-color-warning | Color | #ffc000 | #ffc000 |
Description
The color for warning messages and states. | |||
$kendo-color-error | Color | #f31700 | #f31700 |
Description
The color for error messages and states. | |||
$kendo-color-dark | Color | get-base-hue( gray, 800 ) | #424242 |
Description
The dark color of the theme. | |||
$kendo-color-light | Color | get-base-hue( gray, 100 ) | #f5f5f5 |
Description
The light color of the theme. | |||
$kendo-color-inverse | Color | if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) | #424242 |
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark | |||
$kendo-color-white | Color | #ffffff | #ffffff |
Description
The color white. Note: you cannot change this value. | |||
$kendo-color-black | Color | #000000 | #000000 |
Description
The color black. Note: you cannot change this value. |
Coloreditor
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-editor-spacer | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The spacer of the ColorEditor. | |||
$kendo-color-editor-min-width | Number | 294px | 294px |
Description
The minimum width of the ColorEditor. | |||
$kendo-color-editor-border-width | Number | 1px | 1px |
Description
The width of the border around the ColorEditor. | |||
$kendo-color-editor-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border radius of the ColorEditor. | |||
$kendo-color-editor-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ColorEditor. | |||
$kendo-color-editor-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the ColorEditor. | |||
$kendo-color-editor-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the ColorEditor. | |||
$kendo-color-editor-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ColorEditor. | |||
$kendo-color-editor-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ColorEditor. | |||
$kendo-color-editor-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the ColorEditor. | |||
$kendo-color-editor-focus-border | Color | $kendo-hover-border | rgba(0, 0, 0, 0.15) |
Description
The border color of the focused ColorEditor. | |||
$kendo-color-editor-focus-shadow | String | $box-shadow-depth-3 | var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the focused ColorEditor. | |||
$kendo-color-editor-header-padding-y | Number | $kendo-color-editor-spacer | 12px |
Description
The vertical padding of the ColorEditor header. | |||
$kendo-color-editor-header-padding-x | Number | $kendo-color-editor-header-padding-y | 12px |
Description
The horizontal padding of the ColorEditor header. | |||
$kendo-color-editor-header-actions-gap | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The spacing between the ColorEditor header actions. | |||
$kendo-color-editor-color-preview-width | Number | 32px | 32px |
Description
The width of the ColorEditor preview. | |||
$kendo-color-editor-color-preview-height | Number | 12px | 12px |
Description
The height of the ColorEditor preview. | |||
$kendo-color-editor-preview-gap | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The spacing between the colors in the ColorEditor preview. | |||
$kendo-color-editor-views-padding-y | Number | $kendo-color-editor-spacer | 12px |
Description
The vertical padding of the ColorEditor views container. | |||
$kendo-color-editor-views-padding-x | Number | $kendo-color-editor-views-padding-y | 12px |
Description
The horizontal padding of the ColorEditor views container. | |||
$kendo-color-editor-views-gap | Number | $kendo-color-editor-spacer | 12px |
Description
The spacing of the ColorEditor views container. | |||
$kendo-color-editor-color-gradient-focus-outline-color | Color | rgba(0, 0, 0, .3) | rgba(0, 0, 0, 0.3) |
Description
The outline color of the focused ColorGradient. | |||
$kendo-color-editor-color-gradient-focus-outline | Number | 2px | 2px |
Description
The outline width of the focused ColorGradient. | |||
$kendo-color-editor-color-gradient-focus-outline-offset | Number | 2px | 2px |
Description
The outline offset of the focused ColorGradient. |
Colorpalette
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-palette-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ColorPalette. | |||
$kendo-color-palette-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the ColorPalette. | |||
$kendo-color-palette-line-height | Number | 0 | 0 |
Description
The line height of the ColorPalette. | |||
$kendo-color-palette-tile-width | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The width of the ColorPalette tile. | |||
$kendo-color-palette-tile-height | Number | $kendo-color-palette-tile-width | 24px |
Description
The height of the ColorPalette tile. | |||
$kendo-color-palette-tile-focus-shadow | List | 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) | 0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5) |
Description
The shadow of the ColorPalette focused tile. | |||
$kendo-color-palette-tile-hover-shadow | List | 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) | 0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8) |
Description
The shadow of the ColorPalette hovered tile. | |||
$kendo-color-palette-tile-selected-shadow | List | 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) | 0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white |
Description
The shadow of the ColorPalette selected tile. |
Component
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-component-bg | Color | k-map-get( $theme, component-bg ) | #ffffff |
Description
Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`. | |||
$kendo-component-text | Color | k-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. `$kendo-grid-text: $kendo-component-text !default;`. | |||
$kendo-component-border | Color | k-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. `$kendo-grid-border: $kendo-component-border !default;`. |
Dialog
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dialog-titlebar-bg | Null | null | null |
Description
The background color of the Dialog titlebar. | |||
$kendo-dialog-titlebar-text | Null | null | null |
Description
The text color of the Dialog titlebar. | |||
$kendo-dialog-titlebar-border | Null | null | null |
Description
The border color of the Dialog titlebar. | |||
$kendo-dialog-buttongroup-padding-x | Number | $kendo-actions-padding-x | 8px |
Description
The horizontal padding of the Dialog action buttons. | |||
$kendo-dialog-buttongroup-padding-y | Number | $kendo-actions-padding-y | 8px |
Description
The vertical padding of the Dialog action buttons. | |||
$kendo-dialog-buttongroup-border-width | Number | 1px | 1px |
Description
The width of the top border of the Dialog action buttons. | |||
$kendo-dialog-button-spacing | Number | $kendo-actions-button-spacing | 8px |
Description
The spacing between the Dialog action buttons. | |||
$kendo-dialog-theme-colors | Map | (
"primary": k-map-get($kendo-theme-colors, "primary"),
"light": k-map-get($kendo-theme-colors, "light"),
"dark": k-map-get($kendo-theme-colors, "dark")
) | ("primary": #3f51b5, "light": #f5f5f5, "dark": #424242) |
Description
The theme colors map for the Dialog. |
Dock-manager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dock-manager-border-width | Number | 1px | 1px |
Description
The width of the border around the DockManager component. | |||
$kendo-dock-manager-border-style | String | solid | solid |
Description
The style of the border around the DockManager component. | |||
$kendo-dock-manager-border | Color | $kendo-base-border | rgba(0, 0, 0, 0.08) |
Description
The color of the border around the DockManager component. | |||
$kendo-dock-manager-pane-header-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-padding-x | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The horizontal padding of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-border-width | Number | $kendo-dock-manager-border-width | 1px |
Description
The width of the border around the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-border-style | String | solid | solid |
Description
The style of the border around the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-title-padding-y | Null | null | null |
Description
The vertical padding of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-padding-x | Null | null | null |
Description
The horizontal padding of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-line-height | Number | $kendo-line-height-sm | 1.2 |
Description
The line height of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-weight | Number | $kendo-font-weight-normal | 400 |
Description
The font weight of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-content-padding-x | Number | $kendo-dock-manager-pane-header-padding-x | 24px |
Description
The horizontal padding of the pane content in the DockManager component. | |||
$kendo-dock-manager-pane-content-padding-y | Number | $kendo-dock-manager-pane-header-padding-x | 24px |
Description
The vertical padding of the pane content in the DockManager component. | |||
$kendo-dock-manager-tabbed-pane-padding-y | Null | null | null |
Description
The horizontal padding of the tabbed pane in the DockManager component. | |||
$kendo-dock-manager-tabbed-pane-padding-x | Null | null | null |
Description
The horizontal padding of the tabbed pane in the DockManager component. | |||
$kendo-dock-manager-unpinned-container-width | Number | 300px | 300px |
Description
The width of the unpinned pane container in the DockManager component. | |||
$kendo-dock-manager-unpinned-container-bg | Color | $kendo-color-white | #ffffff |
Description
The background-color of the unpinned pane container in the DockManager component. | |||
$kendo-dock-manager-unpinned-container-shadow | List | 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) | 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) |
Description
The box shadow of the unpinned pane container in the DockManager component. | |||
$kendo-dock-indicator-padding | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The padding of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-bg | Color | $kendo-base-bg | #ffffff |
Description
The background color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-text | Color | $kendo-color-primary | #3f51b5 |
Description
The text color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-outline-width | Number | 1px | 1px |
Description
The outline width of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-outline-style | String | solid | solid |
Description
The outline style of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-outline | Color | $kendo-dock-indicator-text | #3f51b5 |
Description
The outline color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-shadow | List | drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) | drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2)) |
Description
The box shadow of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-hover-bg | Color | k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ) | #4e5fbb |
Description
The background color of the hovered dock indicator in the DockManager component. | |||
$kendo-dock-indicator-hover-text | Color | $kendo-color-white | #ffffff |
Description
The text color of the hovered dock indicator in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border-width | Number | 1px | 1px |
Description
The width of the border around the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border-style | String | dashed | dashed |
Description
The style of the border around the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border-radius | Number | $kendo-border-radius-sm | 2px |
Description
The border radius of the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-bg | Color | rgba( $kendo-color-primary, .16 ) | rgba(63, 81, 181, 0.16) |
Description
The background color of the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border | Color | $kendo-color-primary | #3f51b5 |
Description
The border color of the dropping area in the DockManager component. |
Dropdowntree
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dropdowntree-popup-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the DropdownTree popup | |||
$kendo-dropdowntree-popup-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the DropdownTree popup |
Editor
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-editor-border-width | Number | 1px | 1px |
Description
The width of the border around the Еditor. | |||
$kendo-editor-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Еditor. | |||
$kendo-editor-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Еditor. | |||
$kendo-editor-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the Еditor. | |||
$kendo-editor-placeholder-text | Color | $kendo-input-placeholder-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the Еditor placeholder. | |||
$kendo-editor-placeholder-opacity | Number | $kendo-input-placeholder-opacity | 1 |
Description
The opacity of the Editor placeholder. | |||
$kendo-editor-selected-text | Color | $kendo-color-primary-contrast | white |
Description
The selected text color of the Editor. | |||
$kendo-editor-selected-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The selected background color of the Editor. | |||
$kendo-editor-highlighted-bg | Color | k-color-mix($kendo-color-primary, #ffffff, 20%) | #d9dcf0 |
Description
The highlighted background color of the Editor. | |||
$kendo-editor-export-tool-icon-margin-x | Number | .5em | 0.5em |
Description
The horizontal margin of the Editor's export tool icon. | |||
$kendo-editor-resize-handle-size | Number | 8px | 8px |
Description
The size of the Editor's resize handle. | |||
$kendo-editor-resize-handle-border-width | Number | 1px | 1px |
Description
The border width of the Editor's resize handle. | |||
$kendo-editor-resize-handle-border | Color | #000000 | #000000 |
Description
The border color of the Editor's resize handle. | |||
$kendo-editor-resize-handle-bg | Color | #ffffff | #ffffff |
Description
The background color of the Editor's resize handle. | |||
$kendo-editor-selectednode-outline-width | Number | 2px | 2px |
Description
The outline width of the Editor's selected node. | |||
$kendo-editor-selectednode-outline-color | Color | #88ccff | #88ccff |
Description
The outline color of the Editor's selected node. |
Elevation
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-elevation | Map | $_default-elevation | (1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))) |
Description
Global Elevation. |
Expander
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-expander-spacing-y | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The vertical spacing of the ExpansionPanel. | |||
$kendo-expander-border-width | Number | 1px | 1px |
Description
The width of the border around the ExpansionPanel. | |||
$kendo-expander-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ExpansionPanel. | |||
$kendo-expander-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the ExpansionPanel. | |||
$kendo-expander-line-height | Number | $kendo-line-height-md | 2 |
Description
The hine height of the ExpansionPanel. | |||
$kendo-expander-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ExpansionPanel. | |||
$kendo-expander-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ExpansionPanel. | |||
$kendo-expander-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the ExpansionPanel. | |||
$kendo-expander-focus-shadow | List | inset 0 0 0 2px rgba( black, .08 ) | inset 0 0 0 2px rgba(0, 0, 0, 0.08) |
Description
The box shadow of the focused ExpansionPanel. | |||
$kendo-expander-header-padding-x | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The horizontal padding of the ExpansionPanel header. | |||
$kendo-expander-header-padding-y | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The vertical padding of the ExpansionPanel header. | |||
$kendo-expander-header-text | Color | $kendo-expander-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ExpansionPanel header. | |||
$kendo-expander-header-bg | Color | transparent | transparent |
Description
The background color of the ExpansionPanel header. | |||
$kendo-expander-header-border | Null | null | null |
Description
The border color of the ExpansionPanel header. | |||
$kendo-expander-header-hover-bg | Color | rgba( black, .04 ) | rgba(0, 0, 0, 0.04) |
Description
The background color of the hovered ExpansionPanel header. | |||
$kendo-expander-header-focus-bg | Color | rgba( black, .12 ) | rgba(0, 0, 0, 0.12) |
Description
The background color of the focused ExpansionPanel header. | |||
$kendo-expander-header-focus-shadow | String | none | none |
Description
The box shadow of the focused ExpansionPanel header. | |||
$kendo-expander-title-text | Color | $kendo-color-secondary | #e51a5f |
Description
The text color of the ExpansionPanel title. | |||
$kendo-expander-header-sub-title-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the ExpansionPanel sub-title. | |||
$kendo-expander-indicator-margin-x | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The horizontal margin of the ExpansionPanel indicator. | |||
$kendo-expander-content-padding-x | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The horizontal padding of the ExpansionPanel content. | |||
$kendo-expander-content-padding-y | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The vertical padding of the ExpansionPanel content. |
Filter
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-filter-padding-x | Number | $kendo-padding-sm-x | 8px |
Description
The horizontal padding of the Filter. | |||
$kendo-filter-padding-y | Number | $kendo-filter-padding-x | 8px |
Description
The vertical padding of the Filter. | |||
$kendo-filter-bottom-margin | Number | 2.1em | 2.1em |
Description
The bottom margin of the Filter. | |||
$kendo-filter-line-size | Number | 1px | 1px |
Description
The width of the line that connects the Filter items. | |||
$kendo-filter-operator-dropdown-width | Number | 15em | 15em |
Description
The width of the dropdown elements in the Filter items. | |||
$kendo-filter-preview-field-text | Color | $kendo-color-primary | #3f51b5 |
Description
The text color of the Filter preview field. | |||
$kendo-filter-preview-operator-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the Filter preview operator. | |||
$kendo-filter-toolbar-focus-shadow | List | 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) | 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12) |
Description
The box shadow of the focused Filter toolbar. |
Floating-action-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-fab-border-width | Number | 0px | 0px |
Description
The width of the border around the FAB. | |||
$kendo-fab-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border radius of the FAB. | |||
$kendo-fab-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the FAB. | |||
$kendo-fab-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the FAB. | |||
$kendo-fab-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the FAB. | |||
$kendo-fab-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the FAB. | |||
$kendo-fab-sm-padding-x | Number | k-math-div( $kendo-fab-padding-x, 2 ) | 8px |
Description
The horizontal padding of the small FAB. | |||
$kendo-fab-md-padding-x | Number | $kendo-fab-padding-x | 16px |
Description
The horizontal padding of the medium FAB. | |||
$kendo-fab-lg-padding-x | Number | ( $kendo-fab-padding-x * 1.5 ) | 24px |
Description
The horizontal padding of the large FAB. | |||
$kendo-fab-padding-y | Number | $kendo-fab-padding-x | 16px |
Description
The vertical padding of the FAB. | |||
$kendo-fab-sm-padding-y | Number | k-math-div( $kendo-fab-padding-y, 2 ) | 8px |
Description
The vertical padding of the small FAB. | |||
$kendo-fab-md-padding-y | Number | $kendo-fab-padding-y | 16px |
Description
The vertical padding of the medium FAB. | |||
$kendo-fab-lg-padding-y | Number | ( $kendo-fab-padding-y * 1.5 ) | 24px |
Description
The vertical padding of the large FAB. | |||
$kendo-fab-icon-padding-x | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
The horizontal padding of the FAB icon. | |||
$kendo-fab-icon-padding-y | Number | $kendo-fab-icon-padding-x | 2px |
Description
The vertical padding of the FAB icon. | |||
$kendo-fab-icon-spacing | Number | k-map-get( $kendo-spacing, 1 ) * 1.5 | 6px |
Description
The spacing FAB icon. | |||
$kendo-fab-items-padding-x | Number | 0px | 0px |
Description
The horizontal padding of the FAB items. | |||
$kendo-fab-items-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The vertical padding of the FAB items. | |||
$kendo-fab-item-text-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the FAB item text. | |||
$kendo-fab-item-text-padding-y | Number | $kendo-fab-item-text-padding-x | 4px |
Description
The vertical padding of the FAB item text. | |||
$kendo-fab-item-text-border-width | Number | 1px | 1px |
Description
The width of the FAB item text border. | |||
$kendo-fab-item-text-border-radius | Number | 2px | 2px |
Description
The border radius of the FAB item text. | |||
$kendo-fab-item-text-font-size | Number | $kendo-font-size-xs | 10px |
Description
The font size of the FAB item text. | |||
$kendo-fab-item-text-line-height | Number | 1.2 | 1.2 |
Description
The line height of the FAB item text. | |||
$kendo-fab-item-icon-padding-x | Number | k-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x | 10px |
Description
The horizontal padding of the FAB item icon. | |||
$kendo-fab-item-icon-padding-y | Number | $kendo-fab-item-icon-padding-x | 10px |
Description
The vertical padding of the FAB item icon. | |||
$kendo-fab-item-icon-border-width | Number | 0 | 0 |
Description
The border width of the FAB item icon. | |||
$kendo-fab-item-icon-border-radius | Number | 50% | 50% |
Description
The border radius of the FAB item icon. | |||
$kendo-fab-theme-colors | Map | $kendo-theme-colors | ("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242) |
Description
The theme colors map for the FAB. | |||
$kendo-fab-sizes | Map | (
sm: (
padding-x: $kendo-fab-sm-padding-x,
padding-y: $kendo-fab-sm-padding-y
),
md: (
padding-x: $kendo-fab-md-padding-x,
padding-y: $kendo-fab-md-padding-y
),
lg: (
padding-x: $kendo-fab-lg-padding-x,
padding-y: $kendo-fab-lg-padding-y
)
) | (sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px)) |
Description
The size map for the FAB. | |||
$kendo-fab-shadow | String | $box-shadow-depth-5 | var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)) |
Description
The base shadow of the FAB. | |||
$kendo-fab-disabled-shadow | String | $box-shadow-depth-5 | var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)) |
Description
The shadow of the disabled FAB. | |||
$kendo-fab-active-shadow | String | $box-shadow-depth-7 | var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)) |
Description
The shadow of the active FAB. | |||
$kendo-fab-item-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The base text color of the FAB item. | |||
$kendo-fab-item-bg | Color | $kendo-component-bg | #ffffff |
Description
The base background color of the FAB item. | |||
$kendo-fab-item-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The base border color of the FAB item. | |||
$kendo-fab-item-icon-text | Color | $kendo-button-text | rgba(0, 0, 0, 0.87) |
Description
The base text color of the FAB item icon. | |||
$kendo-fab-item-icon-bg | Color | $kendo-button-bg | #ffffff |
Description
The base background color of the FAB item icon. | |||
$kendo-fab-item-icon-border | Color | $kendo-button-border | #ffffff |
Description
The base border color of the FAB item icon. | |||
$kendo-fab-item-shadow | String | $kendo-fab-shadow | var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)) |
Description
The base shadow of the FAB item. | |||
$kendo-fab-item-disabled-shadow | String | $kendo-fab-disabled-shadow | var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)) |
Description
The shadow of the disabled FAB item. | |||
$kendo-fab-item-active-shadow | String | $kendo-fab-active-shadow | var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)) |
Description
The shadow of the active FAB item. |
Floating-label
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-floating-label-scale | Number | 1 | 1 |
Description
The transformation scale of the Floating Label. | |||
$kendo-floating-label-font-size | Number | $kendo-input-font-size | 16px |
Description
The font size of the Floating Label. | |||
$kendo-floating-label-max-width | Number | 90% | 90% |
Description
The maximum width of the Floating Label. | |||
$kendo-floating-label-line-height | Number | $kendo-input-line-height | 1.25 |
Description
The line height of the Floating Label. | |||
$kendo-floating-label-height | Calculation | calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) | calc( 1.25 * 16px ) |
Description
The height of the Floating Label. | |||
$kendo-floating-label-offset-x | Calculation | calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) | calc( 16px + 1px ) |
Description
The horizontal offset of the Floating Label. | |||
$kendo-floating-label-offset-y | Calculation | calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) | calc( calc( 1.25 * 16px ) + 1px + 8px ) |
Description
The vertical offset of the Floating Label. | |||
$kendo-floating-label-focus-scale | Number | .75 | 0.75 |
Description
The transformation scale of the focused Floating Label. | |||
$kendo-floating-label-focus-offset-x | Number | 0px | 0px |
Description
The horizontal offset of the focused Floating Label. | |||
$kendo-floating-label-focus-offset-y | Number | 0px | 0px |
Description
The vertical offset of the focused Floating Label. | |||
$kendo-floating-label-transition | List | .15s cubic-bezier( .4, 0, .2, 1 ) | 0.15s cubic-bezier(0.4, 0, 0.2, 1) |
Description
The transition of the Floating Label. | |||
$kendo-floating-label-bg | Null | null | null |
Description
The background color of the Floating Label. | |||
$kendo-floating-label-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the Floating Label. | |||
$kendo-floating-label-focus-bg | Null | null | null |
Description
The background color of the focused Floating Label. | |||
$kendo-floating-label-focus-text | Color | $kendo-color-primary | #3f51b5 |
Description
The text color of the focused Floating Label. |
Form
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-form-spacer | Number | $kendo-padding-md-x * 2 | 32px |
Description
The padding of the inline Form. | |||
$kendo-form-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Form. | |||
$kendo-form-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the Form. | |||
$kendo-form-line-height-em | Calculation | calc( #{$kendo-form-line-height} * 1em ) | calc( 2 * 1em ) |
Description
The line height of the Form in em units. | |||
$kendo-form-sm-line-height | Number | $kendo-line-height-sm | 1.2 |
Description
The line height of the small Form. | |||
$kendo-form-lg-line-height | Number | $kendo-line-height-lg | 1.5 |
Description
The line height of the large Form. | |||
$kendo-form-fieldset-margin | List | 2em 0 0 | 2em 0 0 |
Description
The margin of the Form fieldset. | |||
$kendo-form-fieldset-padding | Number | 0px | 0px |
Description
The padding of the Form fieldset. | |||
$kendo-form-legend-margin | List | 0 0 1em | 0 0 1em |
Description
The margin of the Form legend. | |||
$kendo-form-legend-padding | Number | 0px | 0px |
Description
The padding of the Form legend. | |||
$kendo-form-legend-border-width | List | 0 0 2px | 0 0 2px |
Description
The border width of the Form legend. | |||
$kendo-form-legend-border-style | String | solid | solid |
Description
The border style of the Form legend. | |||
$kendo-form-legend-border-color | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the Form legend. | |||
$kendo-form-legend-width | Number | 100% | 100% |
Description
The width of the Form legend. | |||
$kendo-form-legend-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Form legend. | |||
$kendo-form-legend-text-transform | String | uppercase | uppercase |
Description
The text capitalization of the Form legend. | |||
$kendo-form-label-margin-bottom | Number | 0px | 0px |
Description
The bottom margin of the Form label. | |||
$kendo-form-button-margin-x | Number | 8px | 8px |
Description
The horizontal margin of the Form buttons. | |||
$kendo-form-hint-font-size | Number | $kendo-font-size-sm | 12px |
Description
The font size of the Form hint. | |||
$kendo-form-hint-font-style | String | normal | normal |
Description
The font style of the Form hint. | |||
$kendo-form-hint-margin-top | Number | 4px | 4px |
Description
The top margin of the Form hint. | |||
$kendo-form-sm-rows-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The row spacing of the small Form. | |||
$kendo-form-md-rows-spacing | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The row spacing of the medium Form. | |||
$kendo-form-lg-rows-spacing | Number | k-map-get( $kendo-spacing, 7 ) | 28px |
Description
The row spacing of the large Form. | |||
$kendo-form-separator-margin | List | $kendo-form-md-rows-spacing 0 0 | 24px 0 0 |
Description
The margin of the Form separator. | |||
$kendo-form-separator-border-color | Color | $kendo-form-legend-border-color | rgba(0, 0, 0, 0.12) |
Description
The border color of the Form separator. | |||
$kendo-horizontal-form-label-padding-top | Number | 5px | 5px |
Description
The top padding of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-margin-x | Number | 10px | 10px |
Description
The horizontal margin of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-width | Number | 25% | 25% |
Description
The width of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-align | String | flex-end | flex-end |
Description
The horizontal alignment of the label in the horizontal Form. | |||
$kendo-horizontal-form-field-wrap-max-width | Calculation | calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) | calc( ( 100% - 25% ) - 10px ) |
Description
The maximum width of the field wrap in the horizontal Form. | |||
$kendo-inline-form-element-width | Number | 25% | 25% |
Description
The width of the inline Form element. | |||
$kendo-forms-invalid-color | String | inherit | inherit |
Description
The invalid text color of the Form. | |||
$kendo-label-optional-margin-x | Number | 6px | 6px |
Description
The horizontal margin of the optional label in the Form. | |||
$kendo-label-optional-font-size | Number | 12px | 12px |
Description
The font size of the optional label in the Form. | |||
$kendo-label-optional-font-style | String | italic | italic |
Description
The font style of the optional label in the Form. | |||
$kendo-fieldset-margin | Number | 30px | 30px |
Description
The margin of the Form fieldset. | |||
$kendo-fieldset-font-size | Number | $kendo-h4-font-size | 34px |
Description
The font size of the Form fieldset. | |||
$kendo-fieldset-bg | Null | null | null |
Description
The background color of the Form fieldset. | |||
$kendo-fieldset-text | Null | null | null |
Description
The text color of the Form fieldset. | |||
$kendo-fieldset-border | Null | null | null |
Description
The border color of the Form fieldset. | |||
$kendo-fieldset-legend-bg | Null | null | null |
Description
The background color of the Form legend. | |||
$kendo-fieldset-legend-text | Null | null | null |
Description
The text color of the Form legend. | |||
$kendo-fieldset-legend-border | Null | null | null |
Description
The border color of the Form legend. | |||
$kendo-form-sizes | Map | (
sm: (
form-rows-spacing: $kendo-form-sm-rows-spacing
),
md: (
form-rows-spacing: $kendo-form-md-rows-spacing
),
lg: (
form-rows-spacing: $kendo-form-lg-rows-spacing
)
) | (sm: (form-rows-spacing: 16px), md: (form-rows-spacing: 24px), lg: (form-rows-spacing: 28px)) |
Description
The sizes map for the Form. |
Grid
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-grid-padding-x | Number | $kendo-table-md-cell-padding-x | 24px |
Description
Horizontal padding of the grid. | |||
$kendo-grid-padding-y | Number | $kendo-table-md-cell-padding-y | 10px |
Description
Vertical padding of the grid. | |||
$kendo-grid-header-padding-x | Number | $kendo-grid-padding-x | 24px |
Description
Horizontal padding of the grid header. | |||
$kendo-grid-header-padding-y | Number | 16px | 16px |
Description
Vertical padding of the grid header. | |||
$kendo-grid-grouping-header-padding-x | Number | 8px | 8px |
Description
Horizontal padding of the grid grouping header. | |||
$kendo-grid-grouping-header-padding-y | Number | $kendo-grid-grouping-header-padding-x | 8px |
Description
Vertical padding of the grid grouping header. | |||
$kendo-grid-cell-padding-x | Number | $kendo-grid-padding-x | 24px |
Description
Horizontal padding of the grid cell. | |||
$kendo-grid-cell-padding-y | Number | $kendo-grid-padding-y | 10px |
Description
Vertical padding of the grid cell. | |||
$kendo-grid-filter-cell-padding-x | Number | $kendo-grid-padding-x | 24px |
Description
Horizontal padding of the grid filter cell. | |||
$kendo-grid-filter-cell-padding-y | Number | $kendo-grid-padding-y | 10px |
Description
Vertical padding of the grid filter cell. | |||
$kendo-grid-edit-cell-padding-x | Number | $kendo-grid-cell-padding-x | 24px |
Description
Horizontal padding of the grid edit cell. | |||
$kendo-grid-edit-cell-padding-y | Number | 6px | 6px |
Description
Vertical padding of the grid edit cell. | |||
$kendo-grid-bg | Color | $kendo-table-bg | #ffffff |
Description
Background color of the grid component | |||
$kendo-grid-text | Color | $kendo-table-text | rgba(0, 0, 0, 0.87) |
Description
Text color of the grid component | |||
$kendo-grid-border | Color | $kendo-table-border | rgba(0, 0, 0, 0.12) |
Description
Border color of the grid component | |||
$kendo-grid-header-bg | Color | $kendo-table-header-bg | #ffffff |
Description
Background color of grid header | |||
$kendo-grid-header-text | Color | $kendo-table-header-text | rgba(0, 0, 0, 0.54) |
Description
Background color of grid header | |||
$kendo-grid-header-border | Color | $kendo-table-header-border | rgba(0, 0, 0, 0.12) |
Description
Border color of grid header | |||
$kendo-grid-header-gradient | Null | null | null |
Description
Background gradient of grid header | |||
$kendo-grid-footer-bg | Color | $kendo-table-footer-bg | #ffffff |
Description
Background color of grid footer | |||
$kendo-grid-footer-text | Color | $kendo-table-footer-text | rgba(0, 0, 0, 0.54) |
Description
Text color of grid footer | |||
$kendo-grid-footer-border | Color | $kendo-table-footer-border | rgba(0, 0, 0, 0.12) |
Description
Border color of grid footer | |||
$kendo-grid-alt-bg | Color | $kendo-table-alt-row-bg | transparent |
Description
Background color of alternating rows in grid | |||
$kendo-grid-alt-text | Null | $kendo-table-alt-row-text | null |
Description
Text color of alternating rows in grid | |||
$kendo-grid-alt-border | Null | $kendo-table-alt-row-border | null |
Description
Text color of alternating rows in grid | |||
$kendo-grid-hover-bg | Color | $kendo-table-hover-bg | rgba(0, 0, 0, 0.07) |
Description
Background color of hovered rows in grid | |||
$kendo-grid-hover-text | Null | $kendo-table-hover-text | null |
Description
Text color of hovered rows in grid | |||
$kendo-grid-hover-border | Color | $kendo-table-hover-border | rgba(0, 0, 0, 0.12) |
Description
Border color of hovered rows in grid | |||
$kendo-grid-selected-bg | Color | $kendo-table-selected-bg | rgba(0, 0, 0, 0.04) |
Description
Background color of selected rows in grid | |||
$kendo-grid-selected-text | Null | $kendo-table-selected-text | null |
Description
Text color of selected rows in grid | |||
$kendo-grid-selected-border | Null | $kendo-table-selected-border | null |
Description
Border color of selected rows in grid | |||
$kendo-grid-selection-aggregates-bg | Color | $kendo-grid-header-bg | #ffffff |
Description
Background color of the selection aggregates container | |||
$kendo-grid-selection-aggregates-text | Color | $kendo-grid-text | rgba(0, 0, 0, 0.87) |
Description
Text color of the selection aggregates container | |||
$kendo-grid-selection-aggregates-border | Color | $kendo-grid-border | rgba(0, 0, 0, 0.12) |
Description
Border color of the selection aggregates container | |||
$kendo-grid-selection-aggregates-border-width | Number | $kendo-grid-border-width | 1px |
Description
Border width of the selection aggregates container | |||
$kendo-grid-selection-aggregates-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
Spacing between the selection aggregates items | |||
$kendo-grid-selection-aggregates-line-height | Number | 20px | 20px |
Description
Line height of the selection aggregates container | |||
$kendo-grid-selection-aggregates-font-weight | Number | $kendo-font-weight-bold | 700 |
Description
Font weight of the selection aggregates container | |||
$kendo-grid-row-resizer-hover-bg | Color | rgba( k-contrast-color( $kendo-grid-bg ), .24 ) | rgba(0, 0, 0, 0.24) |
Description
Background color of the grid row resize indicator | |||
$kendo-grid-row-resizer-active-bg | Color | $kendo-color-primary | #3f51b5 |
Description
Active background color of the grid row resize indicator | |||
$kendo-grid-row-resizer-height | Number | k-map-get( $kendo-spacing, .5 ) | 2px |
Description
Height of the grid row resize indicator |
Input
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-input-default-width | Number | 100% | 100% |
Description
The default width of the Input components. | |||
$kendo-input-border-width | Number | 1px | 1px |
Description
The border width of the Input components. | |||
$kendo-input-border-radius | Null | null | null |
Description
The border radius of the Input components. | |||
$kendo-input-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the Input components. | |||
$kendo-input-sm-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the small Input components. | |||
$kendo-input-md-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the medium Input components. | |||
$kendo-input-lg-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the large Input components. | |||
$kendo-input-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the Input components. | |||
$kendo-input-sm-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The vertical padding of the small Input components. | |||
$kendo-input-md-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the medium Input components. | |||
$kendo-input-lg-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the large Input components. | |||
$kendo-input-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Input components. | |||
$kendo-input-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the Input components. | |||
$kendo-input-sm-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the small Input components. | |||
$kendo-input-md-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the medium Input components. | |||
$kendo-input-lg-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the large Input components. | |||
$kendo-input-line-height | Number | 1.25 | 1.25 |
Description
The line height of the Input components. | |||
$kendo-input-sm-line-height | Number | 1.25 | 1.25 |
Description
The line height of the small Input components. | |||
$kendo-input-md-line-height | Number | 1.25 | 1.25 |
Description
The line height of the medium Input components. | |||
$kendo-input-lg-line-height | Number | 1.5 | 1.5 |
Description
The line height of the large Input components. | |||
$kendo-input-sizes | Map | (
sm: (
padding-x: $kendo-input-sm-padding-x,
padding-y: $kendo-input-sm-padding-y,
font-size: $kendo-input-sm-font-size,
line-height: $kendo-input-sm-line-height,
button-padding-x: k-map-get( $kendo-spacing, 1 ),
button-padding-y: k-map-get( $kendo-spacing, 1 )
),
md: (
padding-x: $kendo-input-md-padding-x,
padding-y: $kendo-input-md-padding-y,
font-size: $kendo-input-md-font-size,
line-height: $kendo-input-md-line-height,
button-padding-x: k-map-get( $kendo-spacing, 1 ),
button-padding-y: k-map-get( $kendo-spacing, 1 )
),
lg: (
padding-x: $kendo-input-lg-padding-x,
padding-y: $kendo-input-lg-padding-y,
font-size: $kendo-input-lg-font-size,
line-height: $kendo-input-lg-line-height,
button-padding-x: k-map-get( $kendo-spacing, 1 ),
button-padding-y: k-map-get( $kendo-spacing, 1 )
)
) | (sm: (padding-x: 16px, padding-y: 6px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), md: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 4px, button-padding-y: 4px)) |
Description
The sizes map for the Input components. | |||
$kendo-input-bg | Color | k-try-shade( $kendo-component-bg, .5 ) | whitesmoke |
Description
The background color of the Input components. | |||
$kendo-input-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the Input components. | |||
$kendo-input-border | Color | rgba( $kendo-component-border, .38 ) | rgba(0, 0, 0, 0.38) |
Description
The border color of the Input components. | |||
$kendo-input-shadow | Null | null | null |
Description
The shadow of the Input components. | |||
$kendo-input-hover-bg | Null | null | null |
Description
The background color of the hovered Input components. | |||
$kendo-input-hover-text | Null | null | null |
Description
The text color of the hovered Input components. | |||
$kendo-input-hover-border | Color | $kendo-input-text | rgba(0, 0, 0, 0.87) |
Description
The border color of the hovered Input components. | |||
$kendo-input-hover-shadow | Null | null | null |
Description
The shadow of the hovered Input components. | |||
$kendo-input-focus-bg | Null | null | null |
Description
The background color of the focused Input components. | |||
$kendo-input-focus-text | Null | null | null |
Description
The text color of the focused Input components. | |||
$kendo-input-focus-border | Color | $kendo-color-primary | #3f51b5 |
Description
The border color of the focused Input components. | |||
$kendo-input-focus-shadow | Null | null | null |
Description
The shadow of the focused Input components. | |||
$kendo-input-selected-bg | Null | null | null |
Description
The background color of the selected Input components. | |||
$kendo-input-selected-text | Null | null | null |
Description
The text color of the selected Input components. | |||
$kendo-input-disabled-bg | Color | k-try-shade( $kendo-component-bg, .25 ) | #fafafa |
Description
The background color of the disabled Input components. | |||
$kendo-input-disabled-text | Color | $kendo-disabled-text | rgba(0, 0, 0, 0.38) |
Description
The text color of the disabled Input components. | |||
$kendo-input-disabled-border | Color | rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ) | rgba(0, 0, 0, 0.06) |
Description
The border color of the disabled Input components. | |||
$kendo-input-disabled-gradient | Null | null | null |
Description
The gradient of the disabled Input components. | |||
$kendo-input-disabled-shadow | Null | null | null |
Description
The shadow of the disabled Input components. | |||
$kendo-input-outline-bg | Null | null | null |
Description
The background color of the outline Input components. | |||
$kendo-input-outline-text | Color | $kendo-input-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the outline Input components. | |||
$kendo-input-outline-border | Color | $kendo-input-border | rgba(0, 0, 0, 0.38) |
Description
The border color of the outline Input components. | |||
$kendo-input-outline-hover-bg | Null | null | null |
Description
The background color of the outline hovered Input components. | |||
$kendo-input-outline-hover-text | Null | null | null |
Description
The text color of the outline hovered Input components. | |||
$kendo-input-outline-hover-border | Color | $kendo-input-hover-border | rgba(0, 0, 0, 0.87) |
Description
The border color of the outline hovered Input components. | |||
$kendo-input-outline-focus-bg | Null | null | null |
Description
The background color of the outline focused Input components. | |||
$kendo-input-outline-focus-text | Null | null | null |
Description
The text color of the outline focused Input components. | |||
$kendo-input-outline-focus-border | Color | $kendo-input-focus-border | #3f51b5 |
Description
The border color of the outline focused Input components. | |||
$kendo-input-outline-focus-shadow | Null | $kendo-input-focus-shadow | null |
Description
The shadow of the outline focused Input components. | |||
$kendo-input-flat-bg | Null | null | null |
Description
The background color of the flat Input components. | |||
$kendo-input-flat-text | Color | $kendo-input-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the flat Input components. | |||
$kendo-input-flat-border | Color | $kendo-input-border | rgba(0, 0, 0, 0.38) |
Description
The border color of the flat Input components. | |||
$kendo-input-flat-hover-bg | Null | null | null |
Description
The background color of the flat hovered Input components. | |||
$kendo-input-flat-hover-text | Null | null | null |
Description
The text color of the flat hovered Input components. | |||
$kendo-input-flat-hover-border | Color | $kendo-input-hover-border | rgba(0, 0, 0, 0.87) |
Description
The border color of the flat hovered Input components. | |||
$kendo-input-flat-focus-bg | Null | null | null |
Description
The background color of the flat focused Input components. | |||
$kendo-input-flat-focus-text | Null | null | null |
Description
The text color of the flat focused Input components. | |||
$kendo-input-flat-focus-border | Color | $kendo-input-focus-border | #3f51b5 |
Description
The border color of the flat focused Input components. | |||
$kendo-input-flat-focus-shadow | Null | $kendo-input-focus-shadow | null |
Description
The shadow of the flat focused Input components. | |||
$kendo-input-placeholder-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the Input placeholder. | |||
$kendo-input-placeholder-opacity | Number | 1 | 1 |
Description
The opacity of the Input placeholder. | |||
$kendo-input-clear-value-text | Null | null | null |
Description
The color of the Input clear value icon. | |||
$kendo-input-clear-value-opacity | Number | .5 | 0.5 |
Description
The opacity of the Input clear value icon. | |||
$kendo-input-clear-value-hover-text | Null | null | null |
Description
The color of the hovered Input clear value icon. | |||
$kendo-input-clear-value-hover-opacity | Number | 1 | 1 |
Description
The opacity of the hovered Input clear value icon. | |||
$kendo-input-values-margin-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
The vertical margin of the clear value icon. | |||
$kendo-input-values-margin-x | Number | $kendo-input-values-margin-y | 2px |
Description
The horizontal margin of the clear value icon. | |||
$kendo-input-button-width | Null | null | null |
Description
The width of the Input button. | |||
$kendo-input-button-border-width | Number | 1px | 1px |
Description
The border width of the Input button. | |||
$kendo-input-spinner-width | Null | null | null |
Description
The width of the Input spinner button. | |||
$kendo-input-spinner-icon-offset | Null | null | null |
Description
The icon offset of the Input spinner button. | |||
$kendo-input-separator-color | Color | $kendo-input-text | rgba(0, 0, 0, 0.87) |
Description
The color of the Input separator. | |||
$kendo-input-separator-opacity | Number | .5 | 0.5 |
Description
The opacity of the Input separator. | |||
$kendo-input-invalid-border | Color | $kendo-invalid-border | #f31700 |
Description
The border color of the invalid Input components. | |||
$kendo-input-invalid-shadow | Null | $kendo-invalid-shadow | null |
Description
The shadow of the invalid Input components. |
List
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-list-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the List components. | |||
$kendo-list-font-size | Null | null | null |
Description
The font size of the List component, if no size is set. | |||
$kendo-list-line-height | Null | null | null |
Description
The line height of the List component, if no size is set. | |||
$kendo-list-header-padding-x | Null | null | null |
Description
The horizontal padding of the List header, if no size is set. | |||
$kendo-list-header-padding-y | Null | null | null |
Description
The vertical padding of the List header, if no size is set. | |||
$kendo-list-header-border-width | List | 0 0 1px | 0 0 1px |
Description
The border width of the List header. | |||
$kendo-list-header-font-size | Null | null | null |
Description
The font size of the List header, if no size is set. | |||
$kendo-list-header-line-height | Null | null | null |
Description
The line height of the List header, if no size is set. | |||
$kendo-list-header-font-weight | Number | $kendo-font-weight-bold | 700 |
Description
The font weight of the List header. | |||
$kendo-list-item-padding-x | Null | null | null |
Description
The horizontal padding of the List items, when no size is set. | |||
$kendo-list-item-padding-y | Null | null | null |
Description
The vertical padding of the List items, when no size is set. | |||
$kendo-list-item-font-size | Null | null | null |
Description
The font size of the List items, if no size is set. | |||
$kendo-list-item-line-height | Null | null | null |
Description
The line height of the List items, if no size is set. | |||
$kendo-list-group-item-padding-x | Null | null | null |
Description
The horizontal padding of the List group items, when no size is set. | |||
$kendo-list-group-item-padding-y | Null | null | null |
Description
The vertical padding of the List group items, when no size is set. | |||
$kendo-list-group-item-border-width | List | 1px 0 0 | 1px 0 0 |
Description
The border width of the List group items. | |||
$kendo-list-group-item-font-size | Null | null | null |
Description
The font size of the List group items, if no size is set. | |||
$kendo-list-group-item-line-height | Null | null | null |
Description
The line height of the List group items, if no size is set. | |||
$kendo-list-group-item-font-weight | Number | $kendo-font-weight-bold | 700 |
Description
The font weight of a List group item. | |||
$kendo-list-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the List component. | |||
$kendo-list-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the List component. | |||
$kendo-list-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the List component. | |||
$kendo-list-header-bg | Null | null | null |
Description
The background color of the List header. | |||
$kendo-list-header-text | Null | null | null |
Description
The text color of the List header. | |||
$kendo-list-header-border | String | inherit | inherit |
Description
The border color of the List header. | |||
$kendo-list-header-shadow | Null | null | null |
Description
The box shadow of the List header. | |||
$kendo-list-item-bg | Null | null | null |
Description
The background color of the List items. | |||
$kendo-list-item-text | Null | null | null |
Description
The text color of the List items. | |||
$kendo-list-item-hover-bg | Color | $kendo-hover-bg | rgba(0, 0, 0, 0.04) |
Description
The background color of the hovered List items. | |||
$kendo-list-item-hover-text | Color | $kendo-hover-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the hovered List items. | |||
$kendo-list-item-focus-bg | Color | $kendo-list-item-hover-bg | rgba(0, 0, 0, 0.04) |
Description
The background color of the focused List items. | |||
$kendo-list-item-focus-text | Null | null | null |
Description
The text color of the focused List items. | |||
$kendo-list-item-focus-shadow | Null | null | null |
Description
The box shadow of the focused List items. | |||
$kendo-list-item-selected-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the selected List items. | |||
$kendo-list-item-selected-text | Color | $kendo-color-secondary | #e51a5f |
Description
The text color of the selected List items. | |||
$kendo-list-group-item-bg | Null | null | null |
Description
The background color of the List group items. | |||
$kendo-list-group-item-text | Null | null | null |
Description
The text color of the List group items. | |||
$kendo-list-group-item-border | String | inherit | inherit |
Description
The border color of the List group items. | |||
$kendo-list-group-item-shadow | Null | null | null |
Description
The base shadow of the List group items. | |||
$kendo-list-no-data-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The color of the 'No Data' text. | |||
$kendo-list-option-label-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
The color of the 'Option Label' text. |
Listbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listbox-spacing | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The spacing between the ListBox elements. | |||
$kendo-listbox-button-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The spacing between the ListBox buttons. | |||
$kendo-listbox-width | Number | 10em | 10em |
Description
The width of the ListBox. | |||
$kendo-listbox-default-height | Number | 200px | 200px |
Description
The height of the ListBox. | |||
$kendo-listbox-border-width | Number | 1px | 1px |
Description
The width of the border around the ListBox. | |||
$kendo-listbox-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ListBox. | |||
$kendo-listbox-font-size | Number | $kendo-list-md-font-size | 14px |
Description
The font size of the ListBox. | |||
$kendo-listbox-line-height | Number | $kendo-list-md-line-height | 1.4285714286 |
Description
The line height of the ListBox. | |||
$kendo-listbox-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ListBox. | |||
$kendo-listbox-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ListBox. | |||
$kendo-listbox-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the ListBox. | |||
$kendo-listbox-item-padding-x | Number | $kendo-list-md-item-padding-x | 16px |
Description
The inline padding of the ListBox item. | |||
$kendo-listbox-item-padding-y | Number | $kendo-list-md-item-padding-y | 8px |
Description
The block padding of the ListBox item. | |||
$kendo-listbox-drop-hint-width | Number | 2px | 2px |
Description
The width of the ListBox drop hint. | |||
$kendo-listbox-drop-hint-border-width | Number | 2px | 2px |
Description
The width of the border around the ListBox drop hint. |
Listview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listview-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the ListView. | |||
$kendo-listview-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the ListView. | |||
$kendo-listview-border-width | Number | 1px | 1px |
Description
The width of the border around bordered ListView. | |||
$kendo-listview-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ListView. | |||
$kendo-listview-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the ListView. | |||
$kendo-listview-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the ListView. | |||
$kendo-listview-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ListView. | |||
$kendo-listview-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ListView. | |||
$kendo-listview-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the ListView. | |||
$kendo-listview-item-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the ListView items. | |||
$kendo-listview-item-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the ListView items. | |||
$kendo-listview-item-selected-text | Null | null | null |
Description
The text color of the selected ListView items. | |||
$kendo-listview-item-selected-bg | Color | rgba( k-contrast-color( $kendo-listview-bg ), .04 ) | rgba(0, 0, 0, 0.04) |
Description
The background color of the selected ListView items. | |||
$kendo-listview-item-selected-border | Null | null | null |
Description
The border color of the selected ListView items. | |||
$kendo-listview-item-focus-text | Null | null | null |
Description
The text color of the focused ListView items. | |||
$kendo-listview-item-focus-bg | Color | rgba( k-contrast-color( $kendo-listview-bg ), .08 ) | rgba(0, 0, 0, 0.08) |
Description
The background color of the focused ListView items. | |||
$kendo-listview-item-focus-border | Null | null | null |
Description
The border color of the focused ListView items. | |||
$kendo-listview-item-focus-shadow | Null | null | null |
Description
The box shadow of the focused ListView items. |
Loader
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-loader-segment-border-radius | Number | 50% | 50% |
Description
The border radius of the Loader segment. | |||
$kendo-loader-sm-segment-size | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The size of the small Loader segment. | |||
$kendo-loader-md-segment-size | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The size of the medium Loader segment. | |||
$kendo-loader-lg-segment-size | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The size of the large Loader segment. | |||
$kendo-loader-sm-padding | Number | k-math-div( $kendo-loader-sm-segment-size, 2 ) | 2px |
Description
The padding of the small Loader. | |||
$kendo-loader-md-padding | Number | k-math-div( $kendo-loader-md-segment-size, 2 ) | 4px |
Description
The padding of the medium Loader. | |||
$kendo-loader-lg-padding | Number | k-math-div( $kendo-loader-lg-segment-size, 2 ) | 8px |
Description
The padding of the large Loader. | |||
$kendo-loader-sm-spinner-3-width | Number | ( $kendo-loader-sm-segment-size * 4 ) | 16px |
Description
The width of the small spinner-3 Loader. | |||
$kendo-loader-md-spinner-3-width | Number | ( $kendo-loader-md-segment-size * 4 ) | 32px |
Description
The width of the medium spinner-3 Loader. | |||
$kendo-loader-lg-spinner-3-width | Number | ( $kendo-loader-lg-segment-size * 4 ) | 64px |
Description
The width of the large spinner-3 Loader. | |||
$kendo-loader-sm-spinner-3-height | Number | ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) | 13.8564064608px |
Description
The height of the small spinner-3 Loader. | |||
$kendo-loader-md-spinner-3-height | Number | ( $kendo-loader-md-spinner-3-width * $equilateral-height ) | 27.7128129216px |
Description
The height of the medium spinner-3 Loader. | |||
$kendo-loader-lg-spinner-3-height | Number | ( $kendo-loader-lg-spinner-3-width * $equilateral-height ) | 55.4256258432px |
Description
The height of the large spinner-3 Loader. | |||
$kendo-loader-sm-spinner-4-width | Number | $kendo-loader-sm-segment-size * 4 | 16px |
Description
The width of the small spinner-4 Loader. | |||
$kendo-loader-md-spinner-4-width | Number | $kendo-loader-md-segment-size * 4 | 32px |
Description
The width of the medium spinner-4 Loader. | |||
$kendo-loader-lg-spinner-4-width | Number | $kendo-loader-lg-segment-size * 4 | 64px |
Description
The width of the large spinner-4 Loader. | |||
$kendo-loader-sm-spinner-4-height | Number | $kendo-loader-sm-spinner-4-width | 16px |
Description
The height of the small spinner-4 Loader. | |||
$kendo-loader-md-spinner-4-height | Number | $kendo-loader-md-spinner-4-width | 32px |
Description
The height of the medium spinner-4 Loader. | |||
$kendo-loader-lg-spinner-4-height | Number | $kendo-loader-lg-spinner-4-width | 64px |
Description
The height of the large spinner-4 Loader. | |||
$kendo-loader-secondary-bg | Color | #000000 | #000000 |
Description
The color of the Loader based on the secondary theme color. | |||
$kendo-loader-container-panel-border-width | Number | 1px | 1px |
Description
The border width of the container panel. | |||
$kendo-loader-container-panel-border-style | String | solid | solid |
Description
The border style of the container panel. | |||
$kendo-loader-container-panel-border-color | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the container panel. | |||
$kendo-loader-container-panel-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The border radius of the container panel. | |||
$kendo-loader-container-panel-bg | Color | $kendo-color-white | #ffffff |
Description
The background color of the container panel. | |||
$kendo-loader-sm-container-padding | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The padding of the small Loader container. | |||
$kendo-loader-md-container-padding | Number | k-map-get( $kendo-spacing, 5 ) | 20px |
Description
The padding of the medium Loader container. | |||
$kendo-loader-lg-container-padding | Number | k-map-get( $kendo-spacing, 6 ) | 24px |
Description
The padding of the large Loader container. | |||
$kendo-loader-sm-container-gap | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The gap of the small Loader container. | |||
$kendo-loader-md-container-gap | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The gap of the medium Loader container. | |||
$kendo-loader-lg-container-gap | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The gap of the large Loader container. | |||
$kendo-loader-sm-container-font-size | Number | $kendo-font-size-sm | 12px |
Description
The font size of the small Loader container. | |||
$kendo-loader-md-container-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the medium Loader container. | |||
$kendo-loader-lg-container-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the large Loader container. |
Loading
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-loading-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Loading indicator. | |||
$kendo-loading-text | String | currentColor | currentColor |
Description
The text color of the Loading indicator. | |||
$kendo-loading-opacity | Number | .3 | 0.3 |
Description
The opacity of the Loading indicator. |
Menu
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-menu-popup-padding-x | Null | null | null |
Description
Horizontal padding of the menu popup. | |||
$kendo-menu-popup-padding-y | Null | null | null |
Description
Vertical padding of the menu popup. | |||
$kendo-menu-popup-border-width | Number | $kendo-popup-border-width | 0px |
Description
Width of the border around the menu popup. | |||
$kendo-menu-popup-font-size | Number | $kendo-font-size-lg | 16px |
Description
Font sizes of the menu popup. | |||
$kendo-menu-popup-line-height | Number | 1.25 | 1.25 |
Description
Line heights used along with $kendo-font-size. | |||
$kendo-menu-popup-bg | Color | $kendo-popup-bg | #ffffff |
Description
The background of the menu popup. | |||
$kendo-menu-popup-text | Color | $kendo-popup-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the menu popup. | |||
$kendo-menu-popup-border | Color | $kendo-popup-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the menu popup. | |||
$kendo-menu-popup-gradient | Null | null | null |
Description
The background gradient of the menu popup. | |||
$kendo-menu-popup-item-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
Horizontal padding of the menu item in popup. | |||
$kendo-menu-popup-item-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
Vertical padding of the menu item in popup. | |||
$kendo-menu-popup-item-padding-end | Calculation | calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} ) | calc( 32px + 16px ) |
Description
The end padding of the menu item in popup. | |||
$kendo-menu-popup-sm-item-icon-margin-start | Number | $kendo-menu-popup-sm-item-padding-x | 16px |
Description
The start margin of the menu item expand icon. | |||
$kendo-menu-popup-sm-item-icon-margin-end | Calculation | calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) | calc(-1 * (calc( 32px + 16px ) - 8px)) |
Description
The end margin of the menu item expand icon. | |||
$kendo-menu-popup-item-spacing | Number | 0px | 0px |
Description
The spacing between the menu items in popup. | |||
$kendo-menu-popup-item-bg | Null | null | null |
Description
The background of the menu item in popup. | |||
$kendo-menu-popup-item-text | Null | null | null |
Description
The text color of the menu item in popup. | |||
$kendo-menu-popup-item-border | Null | null | null |
Description
The border color of the menu item in popup. | |||
$kendo-menu-popup-item-gradient | Null | null | null |
Description
The background gradient of the menu item in popup. | |||
$kendo-menu-popup-item-hover-bg | Color | $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-text | Color | $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-border | Null | null | null |
Description
The border color of hovered menu item in popup. | |||
$kendo-menu-popup-item-hover-gradient | Null | null | null |
Description
The background gradient of hovered menu item in popup. | |||
$kendo-menu-popup-item-expanded-bg | Color | $kendo-list-item-selected-bg | #ffffff |
Description
The background of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-text | Color | $kendo-list-item-selected-text | #e51a5f |
Description
The text color of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-border | Null | null | null |
Description
The border color of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-gradient | Null | null | null |
Description
The background gradient of expanded menu item in popup. | |||
$kendo-menu-popup-item-focus-shadow | Null | null | null |
Description
The base shadow of focused menu item in popup. |
Menu-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-menu-button-arrow-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the button arrow in the Menu Button. |
Notification
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-notification-padding-x | Number | 16px | 16px |
Description
The horizontal padding of the Notification. | |||
$kendo-notification-padding-y | Number | 14px | 14px |
Description
The vertical padding of the Notification. | |||
$kendo-notification-border-width | Number | 0px | 0px |
Description
The width of the border around the Notification. | |||
$kendo-notification-border-radius | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The border radius of the Notification. | |||
$kendo-notification-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Notification. | |||
$kendo-notification-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Notification. | |||
$kendo-notification-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the Notification. | |||
$kendo-notification-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Notification. | |||
$kendo-notification-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the Notification. | |||
$kendo-notification-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the Notification. | |||
$kendo-notification-shadow | String | $kendo-popup-shadow | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the Notification. | |||
$kendo-notification-icon-spacing | Number | $kendo-icon-spacing | 8px |
Description
The horizontal spacing of the Notification icon. | |||
$kendo-notification-theme-colors | Map | $kendo-theme-colors | ("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242) |
Description
The theme colors map for the Notification. | |||
$kendo-notification-theme | Map | notification-theme( $kendo-notification-theme-colors ) | ("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #f5f5f5, border: #f5f5f5), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: black, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: black, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #00695c, border: #00695c), "secondary": (color: white, background-color: #e51a5f, border: #e51a5f), "primary": (color: white, background-color: #3f51b5, border: #3f51b5)) |
Description
The generated theme colors map for the Notification. |
Pager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-pager-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the Pager. | |||
$kendo-pager-sm-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the small Pager. | |||
$kendo-pager-md-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the medium Pager. | |||
$kendo-pager-lg-padding-x | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The horizontal padding of the large Pager. | |||
$kendo-pager-padding-y | Number | $kendo-pager-padding-x | 8px |
Description
The vertical padding of the Pager. | |||
$kendo-pager-sm-padding-y | Number | $kendo-pager-sm-padding-x | 4px |
Description
The vertical padding of the small Pager. | |||
$kendo-pager-md-padding-y | Number | $kendo-pager-md-padding-x | 8px |
Description
The vertical padding of the medium Pager. | |||
$kendo-pager-lg-padding-y | Number | $kendo-pager-lg-padding-x | 10px |
Description
The vertical padding of the large Pager. | |||
$kendo-pager-sm-item-min-width | Calculation | $kendo-button-sm-calc-size | calc( 1.4285714286em + 12px + 2px ) |
Description
The minimum width of the items in the small Pager. | |||
$kendo-pager-md-item-min-width | Calculation | $kendo-button-md-calc-size | calc( 1.4285714286em + 16px + 2px ) |
Description
The minimum width of the items in the medium Pagers. | |||
$kendo-pager-lg-item-min-width | Calculation | $kendo-button-lg-calc-size | calc( 1.4285714286em + 20px + 2px ) |
Description
The minimum width of the items in the large Pagers. | |||
$kendo-pager-sm-item-group-spacing | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The margin between the item groups in the small Pager. | |||
$kendo-pager-md-item-group-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The margin between the item groups in the medium Pager. | |||
$kendo-pager-lg-item-group-spacing | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The margin between the item groups in the large Pager. | |||
$kendo-pager-border-width | Number | 1px | 1px |
Description
The border width of the Pager. | |||
$kendo-pager-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Pager. | |||
$kendo-pager-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Pager. | |||
$kendo-pager-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the Pager. | |||
$kendo-pager-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Pager. | |||
$kendo-pager-text | Color | if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) | rgba(0, 0, 0, 0.54) |
Description
The text color of the Pager. | |||
$kendo-pager-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the Pager. | |||
$kendo-pager-focus-bg | Color | k-try-shade( $kendo-pager-bg, .5 ) | whitesmoke |
Description
The background color of the focused Pager. | |||
$kendo-pager-focus-shadow | Null | null | null |
Description
The box shadow of the focused Pager. | |||
$kendo-pager-section-spacing | Number | $kendo-pager-padding-x | 8px |
Description
The spacing between the Pager sections. | |||
$kendo-pager-item-border-width | Number | 0px | 0px |
Description
The border width of the Pager items. | |||
$kendo-pager-item-border-radius | Number | 5em | 5em |
Description
The border radius of the Pager items. | |||
$kendo-pager-item-spacing | Number | 0px | 0px |
Description
The spacing around the Pager items. | |||
$kendo-pager-item-bg | Null | null | null |
Description
The background color of the Pager items. | |||
$kendo-pager-item-text | Null | null | null |
Description
The text color of the Pager items. | |||
$kendo-pager-item-border | Null | null | null |
Description
The border color of the Pager items. | |||
$kendo-pager-item-hover-bg | Color | $kendo-list-item-hover-bg | rgba(0, 0, 0, 0.04) |
Description
The background color of the hovered Pager items. | |||
$kendo-pager-item-hover-text | Color | $kendo-pager-text | rgba(0, 0, 0, 0.54) |
Description
The text color of the hovered Pager items. | |||
$kendo-pager-item-hover-border | Null | null | null |
Description
The border color of the hovered Pager items. | |||
$kendo-pager-item-selected-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the selected Pager items. | |||
$kendo-pager-item-selected-text | Color | $kendo-color-primary-contrast | white |
Description
The text color of the selected Pager items. | |||
$kendo-pager-item-selected-border | Null | null | null |
Description
The border color of the selected Pager items. | |||
$kendo-pager-number-border-radius | Number | $kendo-pager-item-border-radius | 5em |
Description
The border radius of the Pager numbers. | |||
$kendo-pager-item-focus-opacity | Number | .12 | 0.12 |
Description
The opacity of the focused Pager items. | |||
$kendo-pager-item-focus-bg | Color | rgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity) | rgba(0, 0, 0, 0.12) |
Description
The background color of the focused Pager items. | |||
$kendo-pager-item-focus-shadow | Null | null | null |
Description
The box shadow of the focused Pager items. | |||
$kendo-pager-input-width | Number | 5em | 5em |
Description
The width of the Inputs in the Pager. | |||
$kendo-pager-sm-dropdown-width | Number | 5em | 5em |
Description
The width of the DropDowns in the small Pager. | |||
$kendo-pager-md-dropdown-width | Number | 5em | 5em |
Description
The width of the DropDowns in the medium Pager. | |||
$kendo-pager-lg-dropdown-width | Number | 5em | 5em |
Description
The width of the DropDowns in the large Pager. | |||
$kendo-pager-sizes | Map | (
sm: (
padding-x: $kendo-pager-sm-padding-x,
padding-y: $kendo-pager-sm-padding-y,
item-group-spacing: $kendo-pager-sm-item-group-spacing,
item-min-width: $kendo-pager-sm-item-min-width,
pager-dropdown-width: $kendo-pager-sm-dropdown-width
),
md: (
padding-x: $kendo-pager-md-padding-x,
padding-y: $kendo-pager-md-padding-y,
item-group-spacing: $kendo-pager-md-item-group-spacing,
item-min-width: $kendo-pager-md-item-min-width,
pager-dropdown-width: $kendo-pager-md-dropdown-width
),
lg: (
padding-x: $kendo-pager-lg-padding-x,
padding-y: $kendo-pager-lg-padding-y,
item-group-spacing: $kendo-pager-lg-item-group-spacing,
item-min-width: $kendo-pager-lg-item-min-width,
pager-dropdown-width: $kendo-pager-lg-dropdown-width
)
) | (sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 6px, item-min-width: calc( 1.4285714286em + 12px + 2px ), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 8px, item-min-width: calc( 1.4285714286em + 16px + 2px ), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 10px, item-min-width: calc( 1.4285714286em + 20px + 2px ), pager-dropdown-width: 5em)) |
Description
The sizes map of the Pager. |
Picker
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-picker-bg | Color | $kendo-input-bg | whitesmoke |
Description
The background color of the Picker components. | |||
$kendo-picker-text | Color | $kendo-input-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the Picker components. | |||
$kendo-picker-border | Color | $kendo-input-border | rgba(0, 0, 0, 0.38) |
Description
The border color of the Picker components. | |||
$kendo-picker-gradient | Null | null | null |
Description
The gradient of the Picker components. | |||
$kendo-picker-shadow | Null | $kendo-input-shadow | null |
Description
The shadow of the Picker components. | |||
$kendo-picker-hover-bg | Null | $kendo-input-hover-bg | null |
Description
The background color of the hovered Picker components. | |||
$kendo-picker-hover-text | Null | $kendo-input-hover-text | null |
Description
The text color of the hovered Picker components. | |||
$kendo-picker-hover-border | Color | $kendo-input-hover-border | rgba(0, 0, 0, 0.87) |
Description
The border color of the hovered Picker components. | |||
$kendo-picker-hover-gradient | Null | null | null |
Description
The gradient of the hovered Picker components. | |||
$kendo-picker-hover-shadow | Null | $kendo-input-hover-shadow | null |
Description
The shadow of the hovered Picker components. | |||
$kendo-picker-focus-bg | Null | $kendo-input-focus-bg | null |
Description
The background color of the focused Picker components. | |||
$kendo-picker-focus-text | Null | $kendo-input-focus-text | null |
Description
The text color of the focused Picker components. | |||
$kendo-picker-focus-border | Color | $kendo-input-focus-border | #3f51b5 |
Description
The border color of the focused Picker components. | |||
$kendo-picker-focus-gradient | Null | null | null |
Description
The gradient of the focused Picker components. | |||
$kendo-picker-focus-shadow | Null | $kendo-input-focus-shadow | null |
Description
The shadow of the focused Picker components. | |||
$kendo-picker-disabled-bg | Color | $kendo-input-disabled-bg | #fafafa |
Description
The background color of the disabled Picker components. | |||
$kendo-picker-disabled-text | Color | $kendo-input-disabled-text | rgba(0, 0, 0, 0.38) |
Description
The text color of the disabled Picker components. | |||
$kendo-picker-disabled-border | Color | $kendo-input-disabled-border | rgba(0, 0, 0, 0.06) |
Description
The border color of the disabled Picker components. | |||
$kendo-picker-disabled-gradient | Null | null | null |
Description
The gradient of the disabled Picker components. | |||
$kendo-picker-disabled-shadow | Null | null | null |
Description
The shadow of the disabled Picker components. | |||
$kendo-picker-outline-bg | Null | null | null |
Description
The background color of the outline Picker components. | |||
$kendo-picker-outline-text | Color | $kendo-picker-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the outline Picker components. | |||
$kendo-picker-outline-border | Color | $kendo-picker-border | rgba(0, 0, 0, 0.38) |
Description
The border color of the outline Picker components. | |||
$kendo-picker-outline-hover-bg | Null | null | null |
Description
The background color of the outline hovered Picker components. | |||
$kendo-picker-outline-hover-text | Null | null | null |
Description
The text color of the outline hovered Picker components. | |||
$kendo-picker-outline-hover-border | Color | $kendo-picker-hover-border | rgba(0, 0, 0, 0.87) |
Description
The border color of the outline hovered Picker components. | |||
$kendo-picker-outline-focus-bg | String | nul | nul |
Description
The background color of the outline focused Picker components. | |||
$kendo-picker-outline-focus-text | Null | null | null |
Description
The text color of the outline focused Picker components. | |||
$kendo-picker-outline-focus-border | Color | $kendo-picker-focus-border | #3f51b5 |
Description
The border color of the outline focused Picker components. | |||
$kendo-picker-outline-focus-shadow | Null | null | null |
Description
The shadow of the outline focused Picker components. | |||
$kendo-picker-outline-hover-focus-bg | Null | null | null |
Description
The background color of the outline hovered and focused Picker components. | |||
$kendo-picker-outline-hover-focus-text | Null | null | null |
Description
The text color of the outline hovered and focused Picker components. | |||
$kendo-picker-outline-hover-focus-border | Null | null | null |
Description
The border color of the outline hovered and focused Picker components. | |||
$kendo-picker-flat-bg | Null | null | null |
Description
The background color of the flat Picker components. | |||
$kendo-picker-flat-text | Color | $kendo-picker-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the flat Picker components. | |||
$kendo-picker-flat-border | Color | $kendo-picker-border | rgba(0, 0, 0, 0.38) |
Description
The border color of the flat Picker components. | |||
$kendo-picker-flat-hover-bg | Null | null | null |
Description
The background color of the flat hovered Picker components. | |||
$kendo-picker-flat-hover-text | Null | null | null |
Description
The text color of the flat hovered Picker components. | |||
$kendo-picker-flat-focus-bg | Null | null | null |
Description
The background color of the flat focused Picker components. | |||
$kendo-picker-flat-focus-text | Null | null | null |
Description
The text color of the flat focused Picker components. | |||
$kendo-picker-flat-focus-border | Color | $kendo-picker-focus-border | #3f51b5 |
Description
The border color of the flat focused Picker components. | |||
$kendo-picker-flat-focus-shadow | Null | null | null |
Description
The shadow of the flat focused Picker components. | |||
$kendo-picker-flat-hover-focus-bg | Null | null | null |
Description
The background color of the flat hovered and focused Picker components. | |||
$kendo-picker-flat-hover-focus-text | Null | null | null |
Description
The text color of the flat hovered and focused Picker components. | |||
$kendo-picker-flat-hover-focus-border | Null | null | null |
Description
The border color of the flat hovered and focused Picker components. |
Pickers
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-picker-flat-hover-border | Color | $kendo-picker-hover-border | rgba(0, 0, 0, 0.87) |
Description
The border color of the flat hovered Picker components. |
Popover
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-popover-border-width | Number | 1px | 1px |
Description
The width of the border around the Popover. | |||
$kendo-popover-border-style | String | solid | solid |
Description
The style of the border around the Popover. | |||
$kendo-popover-border-radius | Number | $kendo-card-border-radius | 4px |
Description
The radius of the border around the Popover. | |||
$kendo-popover-font-family | List | $kendo-card-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Popover. | |||
$kendo-popover-font-size | Number | $kendo-card-font-size | 14px |
Description
The font size of the Popover. | |||
$kendo-popover-line-height | Number | $kendo-card-line-height | 1.4285714286 |
Description
The line height of the Popover. | |||
$kendo-popover-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the Popover. | |||
$kendo-popover-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Popover. | |||
$kendo-popover-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the Popover. | |||
$kendo-popover-shadow | String | $kendo-card-shadow | var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the Popover. | |||
$kendo-popover-header-padding-x | Number | $kendo-card-header-padding-x | 16px |
Description
The horizontal padding of the Popover header. | |||
$kendo-popover-header-padding-y | Number | $kendo-card-header-padding-y | 12px |
Description
The vertical padding of the Popover header. | |||
$kendo-popover-header-border-width | Number | $kendo-card-header-border-width | 1px |
Description
The border width of the Popover header. | |||
$kendo-popover-header-border-style | String | $kendo-popover-border-style | solid |
Description
The border style of the Popover header. | |||
$kendo-popover-header-text | Null | $kendo-card-header-text | null |
Description
The text color of the Popover header. | |||
$kendo-popover-header-bg | Null | $kendo-card-header-bg | null |
Description
The background color of the Popover header. | |||
$kendo-popover-header-border | Color | $kendo-card-header-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the Popover header. | |||
$kendo-popover-body-padding-x | Number | $kendo-card-body-padding-x | 16px |
Description
The horizontal padding of the Popover body. | |||
$kendo-popover-body-padding-y | Number | $kendo-card-body-padding-y | 16px |
Description
The vertical padding of the Popover body. | |||
$kendo-popover-actions-border-width | Number | $kendo-popover-border-width | 1px |
Description
The border width of the Popover actions. | |||
$kendo-popover-callout-width | Number | $kendo-card-callout-width | 20px |
Description
The width of the Popover callout. | |||
$kendo-popover-callout-height | Number | $kendo-card-callout-height | 20px |
Description
The height of the Popover callout. | |||
$kendo-popover-callout-border-width | Number | $kendo-popover-border-width | 1px |
Description
The border width of the Popover callout. | |||
$kendo-popover-callout-border-style | String | $kendo-popover-border-style | solid |
Description
The border style of the Popover callout. | |||
$kendo-popover-callout-bg | Color | $kendo-popover-bg | #ffffff |
Description
The background color of the Popover callout. | |||
$kendo-popover-callout-border | Color | $kendo-popover-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the Popover callout. |
Popup
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-popup-padding-x | Null | null | null |
Description
Horizontal padding of the popup. | |||
$kendo-popup-padding-y | Null | null | null |
Description
Vertical padding of the popup. | |||
$kendo-popup-border-width | Number | 0px | 0px |
Description
Width of the border around the popup. | |||
$kendo-popup-border-radius | Null | null | null |
Description
Border radius of the popup. | |||
$kendo-popup-font-size | Number | $kendo-font-size-md | 14px |
Description
Font size of the popup. | |||
$kendo-popup-line-height | Number | $kendo-line-height-md | 2 |
Description
Line height of the popup. | |||
$kendo-popup-content-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
Horizontal padding of the popup content. | |||
$kendo-popup-content-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
Vertical padding of the popup content. | |||
$kendo-popup-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of the popup. | |||
$kendo-popup-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
Text color of the popup. | |||
$kendo-popup-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
Border color of the popup. | |||
$kendo-popup-shadow | String | $box-shadow-depth-4 | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Description
Box shadow of the popup. |
Progressbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-progressbar-height | Number | 5px | 5px |
Description
The height of the ProgressBar. | |||
$kendo-progressbar-horizontal-width | Number | 100% | 100% |
Description
The horizontal width of the ProgressBar. | |||
$kendo-progressbar-animation-timing | Null | null | null |
Description
The animation timing of the ProgressBar. | |||
$kendo-progressbar-border-width | Number | 0px | 0px |
Description
The width of the border around the ProgressBar. | |||
$kendo-progressbar-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ProgressBar. | |||
$kendo-progressbar-font-size | Number | $kendo-font-size-sm | 12px |
Description
The font size of the ProgressBar. | |||
$kendo-progressbar-line-height | Number | 1 | 1 |
Description
The line height of the ProgressBar. | |||
$kendo-progressbar-bg | Color | k-try-tint( $kendo-color-primary, 8 ) | #bac0e4 |
Description
The background color of the ProgressBar. | |||
$kendo-progressbar-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ProgressBar. | |||
$kendo-progressbar-border | Null | null | null |
Description
The border color of the ProgressBar. | |||
$kendo-progressbar-gradient | Null | null | null |
Description
The background gradient of the ProgressBar. | |||
$kendo-progressbar-value-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The progress background color of the ProgressBar. | |||
$kendo-progressbar-value-text | Color | $kendo-color-primary-contrast | white |
Description
The progress text color of the ProgressBar. | |||
$kendo-progressbar-value-border | Null | null | null |
Description
The progress border color of the ProgressBar. | |||
$kendo-progressbar-value-gradient | Null | null | null |
Description
The progress background gradient of the ProgressBar. | |||
$kendo-progressbar-indeterminate-bg | Color | $kendo-progressbar-bg | #bac0e4 |
Description
The background color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-text | Color | $kendo-progressbar-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-border | Null | $kendo-progressbar-border | null |
Description
The border color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-gradient | Null | null | null |
Description
The background gradient of the indeterminate ProgressBar. | |||
$kendo-progressbar-chunk-border | Color | $kendo-component-bg | #ffffff |
Description
The border color of the chunk ProgressBar. | |||
$kendo-circular-progressbar-arc-stroke | Color | $kendo-color-primary | #3f51b5 |
Description
The arc stroke color of the circular ProgressBar. | |||
$kendo-circular-progressbar-scale-stroke | Color | $kendo-progressbar-bg | #bac0e4 |
Description
The scale stroke background color of the circular ProgressBar. |
Radio
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-radio-radius | Number | 50% | 50% |
Description
The border radius of the RadioButton. | |||
$kendo-radio-border-width | Number | 2px | 2px |
Description
The border width of the RadioButton. | |||
$kendo-radio-sm-size | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The size of a small RadioButton. | |||
$kendo-radio-md-size | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The size of a medium RadioButton. | |||
$kendo-radio-lg-size | Number | k-map-get( $kendo-spacing, 5 ) | 20px |
Description
The size of a large RadioButton. | |||
$kendo-radio-sm-glyph-size | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The glyph size of a small RadioButton. | |||
$kendo-radio-md-glyph-size | Number | k-map-get( $kendo-spacing, 3.5 ) | 14px |
Description
The glyph size of a medium RadioButton. | |||
$kendo-radio-lg-glyph-size | Number | k-map-get( $kendo-spacing, 4.5 ) | 18px |
Description
The glyph size of a large RadioButton. | |||
$kendo-radio-sm-ripple-size | Number | 300% | 300% |
Description
The ripple size of a small RadioButton. | |||
$kendo-radio-md-ripple-size | Number | 300% | 300% |
Description
The ripple size of a medium RadioButton. | |||
$kendo-radio-lg-ripple-size | Number | 300% | 300% |
Description
The ripple size of a large RadioButton. | |||
$kendo-radio-sizes | Map | (
sm: (
size: $kendo-radio-sm-size,
glyph-size: $kendo-radio-sm-glyph-size,
ripple-size: $kendo-radio-sm-ripple-size
),
md: (
size: $kendo-radio-md-size,
glyph-size: $kendo-radio-md-glyph-size,
ripple-size: $kendo-radio-md-ripple-size
),
lg: (
size: $kendo-radio-lg-size,
glyph-size: $kendo-radio-lg-glyph-size,
ripple-size: $kendo-radio-lg-ripple-size
)
) | (sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%)) |
Description
The map with the different RadioButton sizes. | |||
$kendo-radio-bg | Null | $kendo-checkbox-bg | null |
Description
The background color of the RadioButton. | |||
$kendo-radio-text | Null | $kendo-checkbox-text | null |
Description
The color of the RadioButton. | |||
$kendo-radio-border | Color | $kendo-checkbox-border | rgba(0, 0, 0, 0.54) |
Description
The border color of the RadioButton. | |||
$kendo-radio-hover-bg | Null | null | null |
Description
The background color of the hovered RadioButton. | |||
$kendo-radio-hover-text | Null | null | null |
Description
The color of the hovered RadioButton. | |||
$kendo-radio-hover-border | Null | null | null |
Description
The border color of the hovered RadioButton. | |||
$kendo-radio-checked-bg | Null | null | null |
Description
The background color of the checked RadioButton. | |||
$kendo-radio-checked-text | Color | $kendo-color-primary | #3f51b5 |
Description
The color of the checked RadioButton. | |||
$kendo-radio-checked-border | Color | $kendo-radio-checked-text | #3f51b5 |
Description
The border color of the checked RadioButton. | |||
$kendo-radio-focus-border | Null | $kendo-checkbox-focus-border | null |
Description
The border color of the focused RadioButton. | |||
$kendo-radio-focus-shadow | Null | $kendo-checkbox-focus-shadow | null |
Description
The box shadow of the focused RadioButton. | |||
$kendo-radio-focus-checked-border | Null | $kendo-checkbox-focus-checked-border | null |
Description
The border color of the focused and checked RadioButton. | |||
$kendo-radio-focus-checked-shadow | Null | $kendo-checkbox-focus-checked-shadow | null |
Description
The box shadow of the focused and checked RadioButton. | |||
$kendo-radio-disabled-bg | Null | null | null |
Description
The background color of the disabled RadioButton. | |||
$kendo-radio-disabled-text | Null | null | null |
Description
The color of the disabled RadioButton. | |||
$kendo-radio-disabled-border | Color | $kendo-checkbox-disabled-border | #adadad |
Description
The border color of the disabled RadioButton. | |||
$kendo-radio-disabled-checked-bg | Null | null | null |
Description
The background color of the disabled and checked RadioButton. | |||
$kendo-radio-disabled-checked-text | Color | $kendo-radio-disabled-border | #adadad |
Description
The color of the disabled and checked RadioButton. | |||
$kendo-radio-disabled-checked-border | Color | $kendo-radio-disabled-border | #adadad |
Description
The border color of disabled and checked RadioButton. | |||
$kendo-radio-invalid-bg | Null | $kendo-checkbox-invalid-bg | null |
Description
The background color of the invalid RadioButton. | |||
$kendo-radio-invalid-text | Color | $kendo-checkbox-invalid-text | #f31700 |
Description
The color of the invalid RadioButton. | |||
$kendo-radio-invalid-border | Color | $kendo-checkbox-invalid-border | #f31700 |
Description
The border color of the invalid RadioButton. | |||
$kendo-radio-indicator-type | String | image | image |
Description
The type of the RadioButton indicator. | |||
$kendo-radio-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
The font family of the RadioButton indicator glyph. | |||
$kendo-radio-checked-glyph | String | "\e308" | "\e308" |
Description
The glyph of the RadioButton indicator. | |||
$kendo-radio-checked-image | String | k-escape-svg( url("data:image/svg+xml,") ) | 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
The image of the checked RadioButton indicator. | |||
$kendo-radio-disabled-checked-image | String | k-escape-svg( url("data:image/svg+xml,") ) | 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
The image of the disabled and checked RadioButton indicator. | |||
$kendo-radio-label-margin-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal margin of the RadioButton inside of a label. | |||
$kendo-radio-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal list item margin of the RadioButton. | |||
$kendo-radio-list-item-padding-x | Number | 0px | 0px |
Description
The horizontal list item padding of the RadioButton. | |||
$kendo-radio-list-item-padding-y | Number | $kendo-list-md-item-padding-y | 8px |
Description
The vertical list item padding of the RadioButton. | |||
$kendo-radio-ripple-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the RadioButton ripple.. | |||
$kendo-radio-ripple-opacity | Number | .2 | 0.2 |
Description
The opacity of the RadioButton ripple. |
Scrollview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-scrollview-border-width | Number | 1px | 1px |
Description
The width of the border around the ScrollView. | |||
$kendo-scrollview-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the ScrollView. | |||
$kendo-scrollview-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the ScrollView. | |||
$kendo-scrollview-line-height | Number | $kendo-line-height-md | 2 |
Description
The line height of the ScrollView. | |||
$kendo-scrollview-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the ScrollView. | |||
$kendo-scrollview-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ScrollView. | |||
$kendo-scrollview-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The border color of the ScrollView. | |||
$kendo-scrollview-pagebutton-size | Number | 10px | 10px |
Description
The size of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-bg | Color | $kendo-button-bg | #ffffff |
Description
The background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-border | Color | $kendo-button-border | #ffffff |
Description
The border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The primary background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-border | Color | $kendo-color-primary | #3f51b5 |
Description
The primary border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-shadow | List | 0 0 0 2px rgba( black, .13 ) | 0 0 0 2px rgba(0, 0, 0, 0.13) |
Description
The box shadow of the ScrollView page button. | |||
$kendo-scrollview-pager-offset | Number | 0 | 0 |
Description
The offset of the ScrollView pager. | |||
$kendo-scrollview-pager-item-spacing | Number | 20px | 20px |
Description
The spacing between the ScrollView pager items. | |||
$kendo-scrollview-pager-item-border-width | Number | 0px | 0px |
Description
The border width of the ScrollView pager items. | |||
$kendo-scrollview-pager-height | Calculation | calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) | calc( 10px + 0px + 40px ) |
Description
The height of the ScrollView pager. | |||
$kendo-scrollview-arrow-tap-highlight-color | Color | $kendo-color-rgba-transparent | rgba(0, 0, 0, 0) |
Description
The text color of the highlight over the tapped ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-color | Color | white | white |
Description
The color of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-icon-shadow | List | rgba( black, .3 ) 0 0 15px | rgba(0, 0, 0, 0.3) 0 0 15px |
Description
The box shadow of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-bg | Color | rgba( black, 0 ) | rgba(0, 0, 0, 0) |
Description
The background color of the ScrollView navigation. | |||
$kendo-scrollview-navigation-default-opacity | Number | .7 | 0.7 |
Description
The opacity of the ScrollView navigation. | |||
$kendo-scrollview-navigation-hover-opacity | Number | 1 | 1 |
Description
The hover opacity of the ScrollView navigation. | |||
$kendo-scrollview-navigation-hover-span-bg | Null | null | null |
Description
The hover background color of the ScrollView navigation arrows. | |||
$kendo-scrollview-light-bg | Color | rgba( white, .4 ) | rgba(255, 255, 255, 0.4) |
Description
The background color of the ScrollView pager in light mode. | |||
$kendo-scrollview-dark-bg | Color | rgba( black, .4 ) | rgba(0, 0, 0, 0.4) |
Description
The background color of the ScrollView pager in dark mode. | |||
$kendo-scrollview-transition-duration | Number | .3s | 0.3s |
Description
The duration of the ScrollView transition. | |||
$kendo-scrollview-transition-timing-function | String | ease-in-out | ease-in-out |
Description
The timing function of the ScrollView transition. |
Shadows
Name | Type | Default value | Computed value |
---|---|---|---|
$elevation | Color | k-map-get( $theme, elevation ) | #000000 |
Description
Color of shadows | |||
$box-shadow-depth-1 | String | k-elevation(1) | var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for switch. Equivalent to material elevation 1. | |||
$box-shadow-depth-2 | String | k-elevation(2) | var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for resting state of button, card and other widgets. Equivalent to material elevation 2. | |||
$box-shadow-depth-3 | String | k-elevation(3) | var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for menu, popups and raised state of button and card. Equivalent to material elevation 3. | |||
$box-shadow-depth-4 | String | k-elevation(4) | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for drawers and other overlaying elements. Equivalent to material elevation 4. | |||
$box-shadow-depth-5 | String | k-elevation(5) | var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 6. | |||
$box-shadow-depth-6 | String | k-elevation(6) | var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 8. | |||
$box-shadow-depth-7 | String | k-elevation(7) | var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 12. | |||
$box-shadow-depth-8 | String | k-elevation(8) | var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 16. | |||
$box-shadow-depth-9 | String | k-elevation(9) | var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 24. |
Split-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-split-button-focus-shadow | Null | $kendo-button-focus-shadow | null |
Description
The focus shadow of the SplitButton. | |||
$kendo-split-button-arrow-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the arrow Button. | |||
$kendo-split-button-sm-arrow-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the small arrow Button. | |||
$kendo-split-button-md-arrow-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the medium arrow Button. | |||
$kendo-split-button-lg-arrow-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the large arrow Button. | |||
$kendo-split-button-arrow-padding-y | Number | $kendo-button-padding-y | 8px |
Description
The vertical padding of the arrow Button. | |||
$kendo-split-button-sm-arrow-padding-y | Number | $kendo-button-sm-padding-y | 6px |
Description
The vertical padding of the small arrow Button. | |||
$kendo-split-button-md-arrow-padding-y | Number | $kendo-button-md-padding-y | 8px |
Description
The vertical padding of the medium arrow Button. | |||
$kendo-split-button-lg-arrow-padding-y | Number | $kendo-button-lg-padding-y | 10px |
Description
The vertical padding of the large arrow Button. |
Switch
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-switch-font-family | Null | null | null |
Description
The font family of the Switch. | |||
$kendo-switch-track-border-width | Null | null | null |
Description
The border width of the Switch track. | |||
$kendo-switch-thumb-border-width | Null | null | null |
Description
The border width of the Switch thumb. | |||
$kendo-switch-label-text-transform | Null | null | null |
Description
The text transform of the Switch label. | |||
$kendo-switch-label-display | String | none | none |
Description
The display of the Switch label. | |||
$kendo-switch-sizes | Map | (
sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ),
md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ),
lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px )
) | (sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px)) |
Description
The map with the different Switch sizes. | |||
$kendo-switch-off-track-bg | Color | rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 ) | rgba(0, 0, 0, 0.38) |
Description
The background of the track when the Switch is not checked. | |||
$kendo-switch-off-track-text | Null | null | null |
Description
The text color of the track when the Switch is not checked. | |||
$kendo-switch-off-track-border | Null | null | null |
Description
The border color of the track when the Switch is not checked | |||
$kendo-switch-off-track-gradient | Null | null | null |
Description
The background gradient of the track when the Switch is not checked. | |||
$kendo-switch-off-track-hover-bg | Null | null | null |
Description
The background of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-hover-text | Null | null | null |
Description
The text color of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-hover-border | Null | null | null |
Description
The border color of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-hover-gradient | Null | null | null |
Description
The background gradient of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-focus-bg | Null | null | null |
Description
The background of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-focus-text | Null | null | null |
Description
The text color of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-focus-border | Null | null | null |
Description
The border color of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-focus-gradient | Null | null | null |
Description
The background gradient of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-focus-ring | Null | null | null |
Description
The ring around the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-disabled-bg | Null | null | null |
Description
The background of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-track-disabled-text | Null | null | null |
Description
The text color of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-track-disabled-border | Null | null | null |
Description
The border color of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-track-disabled-gradient | Null | null | null |
Description
The background gradient of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-thumb-bg | Color | if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ) | #ffffff |
Description
The background of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-text | Null | null | null |
Description
The text color of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-border | Null | null | null |
Description
The border color of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-gradient | Null | null | null |
Description
The background gradient of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-hover-bg | Null | null | null |
Description
The background of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-off-thumb-hover-text | Null | null | null |
Description
The text color of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-off-thumb-hover-border | Null | null | null |
Description
The border color of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-off-thumb-hover-gradient | Null | null | null |
Description
The background gradient of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-on-track-bg | Color | rgba( $kendo-color-primary, .54 ) | rgba(63, 81, 181, 0.54) |
Description
The background of the track when the Switch is checked. | |||
$kendo-switch-on-track-text | Null | null | null |
Description
The text color of the track when the Switch is checked. | |||
$kendo-switch-on-track-border | Null | null | null |
Description
The border color of the track when the Switch is checked. | |||
$kendo-switch-on-track-gradient | Null | null | null |
Description
The background gradient of the track when the Switch is checked. | |||
$kendo-switch-on-track-hover-bg | Null | null | null |
Description
The background of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-hover-text | Null | null | null |
Description
The text color of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-hover-border | Null | null | null |
Description
The border color of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-hover-gradient | Null | null | null |
Description
The background gradient of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-focus-bg | Null | null | null |
Description
The background of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-focus-text | Null | null | null |
Description
The text color of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-focus-border | Null | null | null |
Description
The border color of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-focus-gradient | Null | null | null |
Description
The background gradient of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-focus-ring | Null | null | null |
Description
The ring around the track when the focused Switch is checked. | |||
$kendo-switch-on-track-disabled-bg | Null | null | null |
Description
The background of the track when the disabled Switch is checked. | |||
$kendo-switch-on-track-disabled-text | Null | null | null |
Description
The text color of the track when the disabled Switch is checked. | |||
$kendo-switch-on-track-disabled-border | Null | null | null |
Description
The border color of the track when the disabled Switch is checked. | |||
$kendo-switch-on-track-disabled-gradient | Null | null | null |
Description
The background gradient of the track when the disabled Switch is checked. | |||
$kendo-switch-on-thumb-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-text | Null | null | null |
Description
The text color of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-border | Null | null | null |
Description
The border color of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-gradient | Null | null | null |
Description
The background gradient of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-hover-bg | Null | null | null |
Description
The background of the thumb when the hovered Switch is checked. | |||
$kendo-switch-on-thumb-hover-text | Null | null | null |
Description
The text color of the thumb when the hovered Switch is checked. | |||
$kendo-switch-on-thumb-hover-border | Null | null | null |
Description
The border color of the thumb when the hovered Switch is checked. | |||
$kendo-switch-on-thumb-hover-gradient | Null | null | null |
Description
The background gradient of the thumb when the hovered Switch is checked. |
Table
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-table-border-width | Number | 1px | 1px |
Description
The width of the table border. | |||
$kendo-table-cell-vertical-border-width | Number | 1px | 1px |
Description
The width of vertical border of table cells. | |||
$kendo-table-cell-horizontal-border-width | Number | 1px | 1px |
Description
The width of horizontal border of table cells. | |||
$kendo-table-font-size | Null | null | null |
Description
The font size of the table if no size is specified. | |||
$kendo-table-line-height | Null | null | null |
Description
The line-height of the table if no size is specified. | |||
$kendo-table-cell-padding-x | Null | null | null |
Description
The horizontal padding of the cells in the table if no size is specified. | |||
$kendo-table-cell-padding-y | Null | null | null |
Description
The vertical padding of the cells in the table if no size is specified. | |||
$kendo-table-sizes | Map | (
sm: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y
),
md: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y
),
lg: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y
)
) | (sm: (font-size: 14px, line-height: 2, cell-padding-x: 10px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px), lg: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px)) |
Description
The sizes of the table. | |||
$kendo-table-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of tables. | |||
$kendo-table-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
Text color of tables. | |||
$kendo-table-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
Border color of tables. | |||
$kendo-table-header-bg | Color | $kendo-table-bg | #ffffff |
Description
Background color of table headers. | |||
$kendo-table-header-text | Color | if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) | rgba(0, 0, 0, 0.54) |
Description
Text color of table headers. | |||
$kendo-table-header-border | Color | $kendo-table-border | rgba(0, 0, 0, 0.12) |
Description
Border color of table headers. | |||
$kendo-table-header-gradient | Null | null | null |
Description
Gradient of table headers. | |||
$kendo-table-footer-bg | Color | $kendo-table-header-bg | #ffffff |
Description
Background color of table footers. | |||
$kendo-table-footer-text | Color | $kendo-table-header-text | rgba(0, 0, 0, 0.54) |
Description
Text color of table footers. | |||
$kendo-table-footer-border | Color | $kendo-table-header-border | rgba(0, 0, 0, 0.12) |
Description
Border color of table footers. | |||
$kendo-table-group-row-bg | Color | $kendo-table-header-bg | #ffffff |
Description
Background color of group rows in table. | |||
$kendo-table-group-row-text | Color | $kendo-table-header-text | rgba(0, 0, 0, 0.54) |
Description
Text color of group rows in table. | |||
$kendo-table-group-row-border | Color | $kendo-table-header-border | rgba(0, 0, 0, 0.12) |
Description
Border color of group rows in table. | |||
$kendo-table-alt-row-bg | Color | transparent | transparent |
Description
Background color of alternating rows in table. | |||
$kendo-table-alt-row-text | Null | null | null |
Description
Text color of alternating rows in table. | |||
$kendo-table-alt-row-border | Null | null | null |
Description
Border color of alternating rows in table. | |||
$kendo-table-hover-bg | Color | rgba( k-contrast-color( $kendo-table-bg ), .07 ) | rgba(0, 0, 0, 0.07) |
Description
Background color of hovered rows in table. | |||
$kendo-table-hover-text | Null | null | null |
Description
Text color of hovered rows in table. | |||
$kendo-table-hover-border | Color | $kendo-table-border | rgba(0, 0, 0, 0.12) |
Description
Border color of hovered rows in table. | |||
$kendo-table-focus-bg | Null | null | null |
Description
Background color of focused rows in table. | |||
$kendo-table-focus-text | Null | null | null |
Description
Text color of focused rows in table. | |||
$kendo-table-focus-border | Null | null | null |
Description
Border color of focused rows in table. | |||
$kendo-table-focus-shadow | Null | $kendo-list-item-focus-shadow | null |
Description
Box shadow of focused rows in table. | |||
$kendo-table-selected-bg | Color | rgba( k-contrast-color( $kendo-table-bg ), .04 ) | rgba(0, 0, 0, 0.04) |
Description
Background color of selected rows in table. | |||
$kendo-table-selected-text | Null | null | null |
Description
Text color of selected rows in table. | |||
$kendo-table-selected-border | Null | null | null |
Description
Border color of selected rows in table. |
Tabstrip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-tabstrip-bg | Null | null | null |
Description
Background color of tabstrip component | |||
$kendo-tabstrip-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
Text color of tabstrip component | |||
$kendo-tabstrip-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
Border color of tabstrip component | |||
$kendo-tabstrip-item-padding-x | Number | 24px | 24px |
Description
Horizontal padding of tabs | |||
$kendo-tabstrip-item-padding-y | Number | 14px | 14px |
Description
Vertical padding of tabs | |||
$kendo-tabstrip-item-border-width | Number | 0px | 0px |
Description
Width of border around of tabs | |||
$kendo-tabstrip-item-border-radius | Number | 0px | 0px |
Description
Border radius of tabs | |||
$kendo-tabstrip-item-gap | Number | 0px | 0px |
Description
Spacing between tabs | |||
$kendo-tabstrip-item-bg | Null | null | null |
Description
Background color of tabs | |||
$kendo-tabstrip-item-text | Color | $kendo-subtle-text | rgba(0, 0, 0, 0.54) |
Description
Text color of tabs | |||
$kendo-tabstrip-item-border | Null | null | null |
Description
Border color of tabs | |||
$kendo-tabstrip-item-gradient | Null | null | null |
Description
Background gradient of tabs | |||
$kendo-tabstrip-item-hover-bg | Color | $kendo-hover-bg | rgba(0, 0, 0, 0.04) |
Description
Background color of hovered tabs | |||
$kendo-tabstrip-item-hover-text | Color | $kendo-body-text | rgba(0, 0, 0, 0.87) |
Description
Text color of hovered tabs | |||
$kendo-tabstrip-item-hover-border | Null | null | null |
Description
Border color of hovered tabs | |||
$kendo-tabstrip-item-hover-gradient | Null | null | null |
Description
Background gradient of hovered tabs | |||
$kendo-tabstrip-item-selected-bg | Null | null | null |
Description
Background color of selected tabs | |||
$kendo-tabstrip-item-selected-text | Color | $kendo-body-text | rgba(0, 0, 0, 0.87) |
Description
Text color of selected tabs | |||
$kendo-tabstrip-item-selected-border | Null | null | null |
Description
Border color of selected tabs | |||
$kendo-tabstrip-item-selected-gradient | Null | null | null |
Description
Background gradient of selected tabs | |||
$kendo-tabstrip-content-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
Horizontal padding of tabstrip content | |||
$kendo-tabstrip-content-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
Vertical padding of tabstrip content | |||
$kendo-tabstrip-content-border-width | Number | 0px | 0px |
Description
Width of border around tabstrip content | |||
$kendo-tabstrip-content-bg | Color | transparent | transparent |
Description
Background color of tabstrip content | |||
$kendo-tabstrip-content-text | Null | null | null |
Description
Text color of tabstrip content | |||
$kendo-tabstrip-content-border | Null | null | null |
Description
Border color of tabstrip content | |||
$kendo-tabstrip-content-focus-border | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
Border color of tabstrip focused content |
Tilelayout
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-tile-layout-border-width | Number | 0px | 0px |
Description
The width of the border around the TileLayout. | |||
$kendo-tile-layout-bg | Color | if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) | #f5f5f5 |
Description
The background color of the TileLayout. | |||
$kendo-tile-layout-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the TileLayout. | |||
$kendo-tile-layout-padding-y | Number | $kendo-tile-layout-padding-x | 16px |
Description
The vertical padding of the TileLayout | |||
$kendo-tile-layout-card-border-width | Number | 1px | 1px |
Description
The width of the border around the TileLayout card. | |||
$kendo-tile-layout-card-focus-shadow | String | $kendo-card-focus-shadow | var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)) |
Description
The focus box shadow of the TileLayout card. | |||
$kendo-tile-layout-hint-border-width | Number | 1px | 1px |
Description
The width of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-border-radius | Number | $kendo-border-radius-md | 4px |
Description
The radius of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The color of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-bg | Color | rgba( white, .2 ) | rgba(255, 255, 255, 0.2) |
Description
The background color of the TileLayout hint. |
Toolbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-toolbar-padding-x | Null | null | null |
Description
The horizontal padding of the Toolbar. | |||
$kendo-toolbar-sm-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the small Toolbar. | |||
$kendo-toolbar-md-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the medium Toolbar. | |||
$kendo-toolbar-lg-padding-x | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The horizontal padding of the large Toolbar. | |||
$kendo-toolbar-padding-y | Null | null | null |
Description
The vertical padding of the Toolbar. | |||
$kendo-toolbar-sm-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The vertical padding of the small Toolbar. | |||
$kendo-toolbar-md-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the medium Toolbar. | |||
$kendo-toolbar-lg-padding-y | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The vertical padding of the large Toolbar. | |||
$kendo-toolbar-spacing | Null | null | null |
Description
The spacing between the Toolbar tools. | |||
$kendo-toolbar-sm-spacing | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The spacing between the tools of the small Toolbar. | |||
$kendo-toolbar-md-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The spacing between the tools of the medium Toolbar. | |||
$kendo-toolbar-lg-spacing | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The spacing between the tools of the large Toolbar. | |||
$kendo-toolbar-border-width | Number | 0 | 0 |
Description
The width of the border around the Toolbar. | |||
$kendo-toolbar-border-radius | Null | null | null |
Description
The border radius of the Toolbar. | |||
$kendo-toolbar-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the Toolbar. | |||
$kendo-toolbar-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Toolbar. | |||
$kendo-toolbar-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the Toolbar. | |||
$kendo-toolbar-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Toolbar. | |||
$kendo-toolbar-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the Toolbar. | |||
$kendo-toolbar-border | Null | null | null |
Description
The color of the border around the Toolbar. | |||
$kendo-toolbar-gradient | Null | null | null |
Description
The gradient of the Toolbar. | |||
$kendo-toolbar-shadow | String | $box-shadow-depth-4 | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Description
The box shadow of the Toolbar. | |||
$kendo-toolbar-separator-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.12) |
Description
The color of the separator border of the Toolbar. | |||
$kendo-toolbar-input-width | Number | 10em | 10em |
Description
The width of the input in the Toolbar. | |||
$kendo-toolbar-item-shadow | List | 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) | 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12) |
Description
The box shadow of the focused Toolbar item. | |||
$kendo-toolbar-flat-border-width | Number | 1px | 1px |
Description
Border width of the flat Toolbar. | |||
$kendo-toolbar-sizes | Map | (
sm: (
padding-x: $kendo-toolbar-sm-padding-x,
padding-y: $kendo-toolbar-sm-padding-y,
spacing: $kendo-toolbar-sm-spacing
),
md: (
padding-x: $kendo-toolbar-md-padding-x,
padding-y: $kendo-toolbar-md-padding-y,
spacing: $kendo-toolbar-md-spacing
),
lg: (
padding-x: $kendo-toolbar-lg-padding-x,
padding-y: $kendo-toolbar-lg-padding-y,
spacing: $kendo-toolbar-lg-spacing
)
) | (sm: (padding-x: 4px, padding-y: 4px, spacing: 6px), md: (padding-x: 8px, padding-y: 8px, spacing: 8px), lg: (padding-x: 10px, padding-y: 10px, spacing: 10px)) |
Description
The sizes map for the Toolbar. |
Treeview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-treeview-font-family | List | $kendo-font-family | Roboto, "Helvetica Neue", sans-serif |
Description
The font family of the TreeView. | |||
$kendo-treeview-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the TreeView. | |||
$kendo-treeview-sm-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the small TreeView. | |||
$kendo-treeview-md-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the medium TreeView. | |||
$kendo-treeview-lg-font-size | Number | $kendo-font-size-lg | 16px |
Description
The font size of the large TreeView. | |||
$kendo-treeview-line-height | Number | 1.25 | 1.25 |
Description
The line height of the TreeView. | |||
$kendo-treeview-sm-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the small TreeView. | |||
$kendo-treeview-md-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the medium TreeView. | |||
$kendo-treeview-lg-line-height | Number | 1.5 | 1.5 |
Description
The line height of the large TreeView. | |||
$kendo-treeview-indent | Number | 24px | 24px |
Description
The indentation of child groups in the TreeView. | |||
$kendo-treeview-item-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the TreeView items. | |||
$kendo-treeview-sm-item-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the small TreeView items. | |||
$kendo-treeview-md-item-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the medium TreeView items. | |||
$kendo-treeview-lg-item-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal padding of the large TreeView items. | |||
$kendo-treeview-item-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the TreeView items. | |||
$kendo-treeview-sm-item-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
The vertical padding of the small TreeView items. | |||
$kendo-treeview-md-item-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the medium TreeView items. | |||
$kendo-treeview-lg-item-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the large TreeView items. | |||
$kendo-treeview-item-border-width | Number | 0px | 0px |
Description
The border width of the TreeView items. | |||
$kendo-treeview-item-border-radius | Null | null | null |
Description
The border radius of the TreeView items. | |||
$kendo-treeview-sm-checkbox-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal padding of the checkbox in the small TreeView. | |||
$kendo-treeview-md-checkbox-padding-x | Number | $kendo-treeview-sm-checkbox-padding-x | 4px |
Description
The horizontal padding of the checkbox in the medium TreeView. | |||
$kendo-treeview-lg-checkbox-padding-x | Number | $kendo-treeview-sm-checkbox-padding-x | 4px |
Description
The horizontal padding of the checkbox in the large TreeView. | |||
$kendo-treeview-sm-checkbox-padding-y | Number | k-map-get( $kendo-spacing, .5 ) | 2px |
Description
The vertical padding of the checkbox in the small TreeView. | |||
$kendo-treeview-md-checkbox-padding-y | Number | $kendo-treeview-sm-checkbox-padding-y | 2px |
Description
The vertical padding of the checkbox in the medium TreeView. | |||
$kendo-treeview-lg-checkbox-padding-y | Null | null | null |
Description
The vertical padding of the checkbox in the large TreeView. | |||
$kendo-treeview-sizes | Map | (
sm: (
font-size: $kendo-treeview-sm-font-size,
line-height: $kendo-treeview-sm-line-height,
item-padding-x: $kendo-treeview-sm-item-padding-x,
item-padding-y: $kendo-treeview-sm-item-padding-y,
checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y
),
md: (
font-size: $kendo-treeview-md-font-size,
line-height: $kendo-treeview-md-line-height,
item-padding-x: $kendo-treeview-md-item-padding-x,
item-padding-y: $kendo-treeview-md-item-padding-y,
checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y
),
lg: (
font-size: $kendo-treeview-lg-font-size,
line-height: $kendo-treeview-lg-line-height,
item-padding-x: $kendo-treeview-lg-item-padding-x,
item-padding-y: $kendo-treeview-lg-item-padding-y,
checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y
)
) | (sm: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 6px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 8px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 16px, item-padding-y: 8px, checkbox-padding-x: 4px, checkbox-padding-y: null)) |
Description
The sizes map of the TreeView. | |||
$kendo-treeview-bg | Null | null | null |
Description
The background color of the TreeView. | |||
$kendo-treeview-text | Color | $kendo-component-text | rgba(0, 0, 0, 0.87) |
Description
The text color of the TreeView. | |||
$kendo-treeview-border | Null | null | null |
Description
The border color of the TreeView. | |||
$kendo-treeview-item-hover-bg | Color | rgba( $kendo-treeview-text, .07 ) | rgba(0, 0, 0, 0.07) |
Description
The background color of hovered TreeView. | |||
$kendo-treeview-item-hover-text | Null | null | null |
Description
The text color of hovered TreeView items. | |||
$kendo-treeview-item-hover-border | Null | null | null |
Description
The border color of hovered TreeView items. | |||
$kendo-treeview-item-hover-gradient | Null | null | null |
Description
The background gradient of hovered TreeView items. | |||
$kendo-treeview-item-selected-bg | Null | null | null |
Description
The background color of selected TreeView items. | |||
$kendo-treeview-item-selected-text | Color | $kendo-selected-bg | #e51a5f |
Description
The text color of selected TreeView items. | |||
$kendo-treeview-item-selected-border | Null | null | null |
Description
The border color of selected TreeView items. | |||
$kendo-treeview-item-selected-gradient | Null | null | null |
Description |