New to Kendo UI for Vue? Start a free 30-day trial
Customization
Variables
The following table lists the available variables for customizing the Nouvelle theme.
Common
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-interactive-bg | Color | #f6f6f6 | #f6f6f6 |
Description
The background of the components' chrome area. | |||
| $kendo-interactive-text | Color | #656565 | #656565 |
Description
The text color of the components' chrome area. | |||
| $kendo-interactive-border | Color | rgba( black, .08 ) | rgba(0, 0, 0, 0.08) |
Description
The border color of the components' chrome area. | |||
| $kendo-interactive-gradient | List | rgba( black, 0 ), rgba( black, .02 ) | rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) |
Description
The gradient background of the components' chrome area. | |||
| $kendo-hover-bg | Color | k-color-shade( $kendo-component-bg, .5 ) | whitesmoke |
Description
The background of hovered items. | |||
| $kendo-hover-text | Color | $kendo-component-text | #494949 |
Description
The text color of hover items. | |||
| $kendo-hover-border | Color | rgba( black, .15 ) | rgba(0, 0, 0, 0.15) |
Description
The border color of hover items. | |||
| $kendo-hover-gradient | List | rgba( black, 0 ), rgba( black, .02 ) | rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) |
Description
The gradient background of hover items. | |||
| $kendo-selected-bg | Color | $kendo-color-primary | #622331 |
Description
The background of selected items. | |||
| $kendo-selected-text | Color | k-contrast-color( $kendo-selected-bg ) | white |
Description
The text color of selected items. | |||
| $kendo-selected-border | Color | rgba( black, .1 ) | rgba(0, 0, 0, 0.1) |
Description
The border color of selected items. | |||
| $kendo-selected-gradient | String | none | none |
Description
The gradient background of selected items. | |||
Actions
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-actions-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Horizontal padding of actions container. | |||
| $kendo-actions-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Vertical padding of actions container. | |||
| $kendo-actions-border-width | List | 0 0 0 0 | 0 0 0 0 |
Description
Width of the border around actions container. | |||
| $kendo-actions-bg | Null | null | null |
Description
Background color of actions container. | |||
| $kendo-actions-text | Null | null | null |
Description
Text color of actions container. | |||
| $kendo-actions-border | Null | null | null |
Description
Border color of actions container. | |||
| $kendo-actions-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between items in actions container | |||
Actions-list
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-actions-list-spacing | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
Spacing between items in actions list | |||
Avatar
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-avatar-border-width | Number | 1px | 1px |
Description
Border width of the avatar. | |||
| $kendo-avatar-font-family | Null | $kendo-font-family | null |
Description
Font family of the avatar. | |||
| $kendo-avatar-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the avatar. | |||
| $kendo-avatar-line-height | Number | $kendo-line-height-md | 1.5 |
Description
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: 1rem, md: 2rem, lg: 4rem) |
Description
The sizes of the avatar. | |||
| $kendo-avatar-theme | Map | k-process-variant-matrices(
$kendo-avatar-theme-matrix,
$kendo-avatar-palette-matrix
) | (solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null)) |
Description
Theme colors map of the avatar. | |||
Badge
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-badge-border-width | Number | 1px | 1px |
Description
Border width of the badge. | |||
| $kendo-badge-font-family | Null | $kendo-font-family | null |
Description
Font family of the badge. | |||
| $kendo-badge-font-weight | Null | null | null |
Description
Font weight of the badge. | |||
| $kendo-badge-sm-padding-x | Number | k-map-get( $kendo-spacing, 0.5 ) | 0.125rem |
Description
Horizontal padding of the badge. | |||
| $kendo-badge-sm-padding-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 0.125rem |
Description
Vertical padding of the badge. | |||
| $kendo-badge-sm-font-size | Number | $kendo-font-size-xs | 0.75rem |
Description
Font sizes of the badge. | |||
| $kendo-badge-sm-line-height | Null | null | null |
Description
Line heights of the 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 + 0.125rem * 2 + 1px * 2) |
Description
Badge min width used for circle 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: 0.125rem, padding-y: 0.125rem, font-size: 0.75rem, line-height: null, min-width: calc( * 1em + 0.125rem * 2 + 1px * 2)), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: null, min-width: calc( * 1em + 0.25rem * 2 + 1px * 2)), lg: (padding-x: 0.375rem, padding-y: 0.375rem, font-size: 1rem, line-height: null, min-width: calc( * 1em + 0.375rem * 2 + 1px * 2))) |
Description
Size map for the badge. | |||
| $kendo-badge-theme | Map | k-process-variant-matrices(
$kendo-badge-theme-matrix,
$kendo-badge-palette-matrix
) | (solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null)) |
Description
Theme colors map of the badge. | |||
Bottom-nav
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-bottom-nav-shadow | Null | null | null |
Description
Box shadow of the bottom navigation. | |||
| $kendo-bottom-nav-item-focus-offset | Null | null | null |
Description
Offset of the focused bottom navigation item. | |||
| $kendo-bottom-nav-item-focus-outline-width | Number | 1px | 1px |
Description
Outline width of the focused bottom navigation item. | |||
| $kendo-bottom-nav-item-focus-outline-style | String | solid | solid |
Description
Outline style of the focused bottom navigation item. | |||
| $kendo-bottom-nav-item-icon-margin-x | Null | null | null |
Description
Horizontal margin of the focused bottom navigation item icon. | |||
| $kendo-bottom-nav-item-icon-margin-y | Null | null | null |
Description
Vertical margin of the focused bottom navigation item icon. | |||
Bottom-navigation
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-bottom-nav-padding-x | Null | null | null |
Description
Horizontal padding of the bottom navigation. | |||
| $kendo-bottom-nav-padding-y | Null | null | null |
Description
Vertical padding of the bottom navigation. | |||
| $kendo-bottom-nav-gap | Null | null | null |
Description
Spacing of the bottom navigation. | |||
| $kendo-bottom-nav-border-width | Null | null | null |
Description
Border width of the bottom navigation. | |||
| $kendo-bottom-nav-font-family | Null | $kendo-font-family | null |
Description
Font family of the bottom navigation. | |||
| $kendo-bottom-nav-font-size | Null | null | null |
Description
Font size of the bottom navigation. | |||
| $kendo-bottom-nav-line-height | Null | null | null |
Description
Line height of the bottom navigation. | |||
| $kendo-bottom-nav-item-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Horizontal padding of the bottom navigation item. | |||
| $kendo-bottom-nav-item-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
Vertical padding of the bottom navigation item. | |||
| $kendo-bottom-nav-item-min-width | Number | 72px | 72px |
Description
Minimum width of the bottom navigation item. | |||
| $kendo-bottom-nav-item-max-width | String | none | none |
Description
Maximum width of the bottom navigation item. | |||
| $kendo-bottom-nav-item-border-radius | Null | null | null |
Description
Border radius of the bottom navigation item. | |||
| $kendo-bottom-nav-item-gap | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
Spacing of the bottom navigation item. | |||
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 | Null | $kendo-font-family | null |
Description
The font family of the Breadcrumb. | |||
| $kendo-breadcrumb-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the Breadcrumb. | |||
| $kendo-breadcrumb-sm-font-size | Number | $kendo-font-size-sm | 0.875rem |
Description
The font size of the small Breadcrumb. | |||
| $kendo-breadcrumb-md-font-size | Number | $kendo-breadcrumb-font-size | 1rem |
Description
The font size of the medium Breadcrumb. | |||
| $kendo-breadcrumb-lg-font-size | Number | $kendo-font-size-lg | 1.25rem |
Description
The font size of the large Breadcrumb. | |||
| $kendo-breadcrumb-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line-height of the Breadcrumb. | |||
| $kendo-breadcrumb-sm-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line-height of the small Breadcrumb. | |||
| $kendo-breadcrumb-md-line-height | Number | $kendo-breadcrumb-line-height | 1.5 |
Description
The line-height of the medium Breadcrumb. | |||
| $kendo-breadcrumb-lg-line-height | Number | $kendo-line-height-lg | 1.75 |
Description
The line-height of the height Breadcrumb. | |||
| $kendo-breadcrumb-focus-shadow | Null | $kendo-focus-shadow | null |
Description
The box shadow of the focused Breadcrumb. | |||
| $kendo-breadcrumb-link-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The horizontal padding of the Breadcrumb link. | |||
| $kendo-breadcrumb-sm-link-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The horizontal padding of the small Breadcrumb link. | |||
| $kendo-breadcrumb-md-link-padding-x | Number | $kendo-breadcrumb-link-padding-x | 0.5rem |
Description
The horizontal padding of the medium Breadcrumb link. | |||
| $kendo-breadcrumb-lg-link-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The horizontal padding of the large Breadcrumb link. | |||
| $kendo-breadcrumb-link-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 0.375rem |
Description
The vertical padding of the Breadcrumb link. | |||
| $kendo-breadcrumb-sm-link-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The vertical padding of the small Breadcrumb link. | |||
| $kendo-breadcrumb-md-link-padding-y | Number | $kendo-breadcrumb-link-padding-y | 0.375rem |
Description
The vertical padding of the medium Breadcrumb link. | |||
| $kendo-breadcrumb-lg-link-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The vertical padding of the large Breadcrumb link. | |||
| $kendo-breadcrumb-link-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
The border-radius of the Breadcrumb link. | |||
| $kendo-breadcrumb-icon-link-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The vertical padding of the Breadcrumb link icon. | |||
| $kendo-breadcrumb-sm-icon-link-padding-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 0.375rem |
Description
The vertical padding of the small Breadcrumb link icon. | |||
| $kendo-breadcrumb-md-icon-link-padding-y | Number | $kendo-breadcrumb-icon-link-padding-y | 0.5rem |
Description
The vertical padding of the medium Breadcrumb link icon. | |||
| $kendo-breadcrumb-lg-icon-link-padding-y | Number | k-map-get( $kendo-spacing, 3 ) | 0.75rem |
Description
The vertical padding of the large Breadcrumb link icon. | |||
| $kendo-breadcrumb-icon-link-padding-x | Number | $kendo-breadcrumb-icon-link-padding-y | 0.5rem |
Description
The horizontal padding of the Breadcrumb link icon. | |||
| $kendo-breadcrumb-sm-icon-link-padding-x | Number | $kendo-breadcrumb-sm-icon-link-padding-y | 0.375rem |
Description
The horizontal padding of the small Breadcrumb link icon. | |||
| $kendo-breadcrumb-md-icon-link-padding-x | Number | $kendo-breadcrumb-icon-link-padding-x | 0.5rem |
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 | 0.75rem |
Description
The horizontal padding of the large Breadcrumb link icon. | |||
| $kendo-breadcrumb-link-icon-spacing | Number | $kendo-icon-spacing | 0.5rem |
Description
The spacing of the Breadcrumb link icon. | |||
| $kendo-breadcrumb-link-focus-shadow | Null | $kendo-focus-shadow | null |
Description
The box shadow of the focused Breadcrumb 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: 0.5rem, link-padding-y: 0.25rem, icon-link-padding-x: 0.375rem, icon-link-padding-y: 0.375rem, font-size: 0.875rem, line-height: 1.5), md: (link-padding-x: 0.5rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.5rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1.25rem, line-height: 1.75)) |
Description
The sizes map for the Breadcrumb. | |||
Captcha
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-captcha-width | Number | 280px | 280px |
Description
Default width of the captcha. | |||
| $kendo-captcha-font-family | Null | $kendo-font-family | null |
Description
Font family of the captcha. | |||
| $kendo-captcha-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the captcha. | |||
| $kendo-captcha-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the captcha. | |||
| $kendo-captcha-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing of the captcha. | |||
| $kendo-captcha-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of the captcha. | |||
| $kendo-captcha-text | Color | $kendo-component-text | #494949 |
Description
Text color of the captcha. | |||
| $kendo-captcha-border | Color | $kendo-component-border | #ededed |
Description
Border color of the captcha. | |||
| $kendo-captcha-image-wrap-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing of the captcha image wrapper. | |||
| $kendo-captcha-image-controls-spacing | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
Spacing of the captcha image controls. | |||
| $kendo-captcha-validation-offset-y | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
Offset of the captcha validation text. | |||
| $kendo-captcha-validation-font-size | Number | $kendo-font-size-sm | 0.875rem |
Description
Font-size of the captcha validation text. | |||
Card
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-card-padding-x | Null | null | null |
Description
Horizontal padding of the card. | |||
| $kendo-card-padding-y | Null | null | null |
Description
Vertical padding of the card. | |||
| $kendo-card-border-width | Number | 1px | 1px |
Description
Width of the border around the card. | |||
| $kendo-card-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
Border radius of the card. | |||
| $kendo-card-font-family | Null | null | null |
Description
Font family of the card. | |||
| $kendo-card-font-size | Null | null | null |
Description
Font size of the card. | |||
| $kendo-card-line-height | Null | null | null |
Description
Line height of the card. | |||
| $kendo-card-deck-gap | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Spacing between the cards in the card deck. | |||
| $kendo-card-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of the card. | |||
| $kendo-card-text | Color | $kendo-component-text | #494949 |
Description
Text color of the card. | |||
| $kendo-card-border | Color | $kendo-component-border | #ededed |
Description
Border color of the card. | |||
| $kendo-card-shadow | Null | null | null |
Description
Shadow of the card. | |||
| $kendo-card-focus-bg | Color | $kendo-card-bg | #ffffff |
Description
Background color of the card when focused. | |||
| $kendo-card-focus-text | Null | null | null |
Description
Text color of the card when focused. | |||
| $kendo-card-focus-border | Null | null | null |
Description
Border color of the card when focused. | |||
| $kendo-card-focus-shadow | Null | null | null |
Description
Shadow of the card when focused. | |||
| $kendo-card-header-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the card header. | |||
| $kendo-card-header-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the card header. | |||
| $kendo-card-header-border-width | Null | null | null |
Description
Bottom border width of the card header. | |||
| $kendo-card-header-font-weight | Null | null | null |
Description
Text weight of the card header. | |||
| $kendo-card-header-bg | Color | k-get-theme-color( neutral, 50 ) | #f8f8f8 |
Description
Background color of the card header. | |||
| $kendo-card-header-text | Color | $kendo-card-text | #494949 |
Description
Text color of the card header. | |||
| $kendo-card-header-border | Color | $kendo-card-border | #ededed |
Description
Border color of the card header. | |||
| $kendo-card-body-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the card body. | |||
| $kendo-card-body-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the card body. | |||
| $kendo-card-footer-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the card footer. | |||
| $kendo-card-footer-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the card footer. | |||
| $kendo-card-footer-border-width | Null | null | null |
Description
Top border width of the card footer. | |||
| $kendo-card-footer-bg | Null | null | null |
Description
Background color of the card footer. | |||
| $kendo-card-footer-text | Null | null | null |
Description
Text color of the card footer. | |||
| $kendo-card-footer-border | Color | $kendo-card-border | #ededed |
Description
Border color of the card footer. | |||
| $kendo-card-title-margin-bottom | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Bottom margin of the card title. | |||
| $kendo-card-title-font-weight | Null | null | null |
Description
Font weight of the card title. | |||
| $kendo-card-title-text | Null | null | null |
Description
Text color of the card subtitle. | |||
| $kendo-card-subtitle-margin-bottom | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Bottom margin of the card subtitle. | |||
| $kendo-card-subtitle-font-weight | Null | null | null |
Description
Font weight of the card title. | |||
| $kendo-card-subtitle-text | Color | $kendo-subtle-text | #5f5f5f |
Description
Text color of the card subtitle. | |||
| $kendo-card-img-max-width | Number | 100px | 100px |
Description
Maximum width of the card image. | |||
| $kendo-card-avatar-size | Number | 3rem | 3rem |
Description
Size of the avatar in the card. | |||
| $kendo-card-actions-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Horizontal padding of the card actions. | |||
| $kendo-card-actions-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Vertical padding of the card actions. | |||
| $kendo-card-actions-border-width | Null | null | null |
Description
Top border of the card actions. | |||
| $kendo-card-actions-gap | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between the card actions. | |||
| $kendo-card-deck-scroll-button-radius | Null | null | null |
Description
Border radius of the scroll button in the card deck. | |||
| $kendo-card-callout-size | Number | 20px | 20px |
Description
Size of the card callout. | |||
Checkbox
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-checkbox-border-radius | Null | null | null |
Description
Border radius of checkbox | |||
| $kendo-checkbox-border-width | Number | 1px | 1px |
Description
Border width of checkbox. | |||
| $kendo-checkbox-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of checkbox. | |||
| $kendo-checkbox-text | Null | null | null |
Description
Color of checkbox. | |||
| $kendo-checkbox-border | Color | $kendo-component-border | #ededed |
Description
Border color of checkbox. | |||
| $kendo-checkbox-hover-bg | Null | null | null |
Description
Background color of hovered checkbox. | |||
| $kendo-checkbox-hover-text | Null | null | null |
Description
Color of hovered checkbox. | |||
| $kendo-checkbox-hover-border | Null | null | null |
Description
Border color of hovered checkbox. | |||
| $kendo-checkbox-focus-border | Null | null | null |
Description
Border color of focused checkbox. | |||
| $kendo-checkbox-focus-shadow | Null | null | null |
Description
Box shadow of focused checkbox. | |||
| $kendo-checkbox-focus-outline | Null | null | null |
Description
The outline of a focused checkbox. | |||
| $kendo-checkbox-checked-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of checked checkbox. | |||
| $kendo-checkbox-checked-text | Color | k-contrast-color( $kendo-checkbox-checked-bg ) | white |
Description
Color of checked checkbox. | |||
| $kendo-checkbox-checked-border | Color | $kendo-checkbox-checked-bg | #622331 |
Description
Border color of checked checkbox. | |||
| $kendo-checkbox-hover-checked-bg | Null | null | null |
Description
Background of hovered and checked checkbox. | |||
| $kendo-checkbox-hover-checked-text | Null | null | null |
Description
Color of checked checkbox. | |||
| $kendo-checkbox-hover-checked-border | Null | null | null |
Description
Border of hovered and checked checkbox. | |||
| $kendo-checkbox-indeterminate-bg | Color | $kendo-checkbox-checked-bg | #622331 |
Description
Background color of indeterminate checkbox. | |||
| $kendo-checkbox-indeterminate-text | Color | $kendo-checkbox-checked-text | white |
Description
Color of indeterminate checkbox. | |||
| $kendo-checkbox-indeterminate-border | Color | $kendo-checkbox-checked-border | #622331 |
Description
Border color of indeterminate checkbox. | |||
| $kendo-checkbox-hover-indeterminate-bg | Null | null | null |
Description
Background color of hovered and indeterminate checkbox. | |||
| $kendo-checkbox-hover-indeterminate-text | Null | null | null |
Description
Background color of hovered and indeterminate checkbox. | |||
| $kendo-checkbox-hover-indeterminate-border | Null | null | null |
Description
Border color of hovered and indeterminate checkbox. | |||
| $kendo-checkbox-disabled-bg | Null | null | null |
Description
Background color of disabled checkbox. | |||
| $kendo-checkbox-disabled-text | Null | null | null |
Description
Color of disabled checkbox. | |||
| $kendo-checkbox-disabled-border | Null | null | null |
Description
Border color of disabled checkbox. | |||
| $kendo-checkbox-disabled-checked-bg | Null | null | null |
Description
Background color of disabled and checked checkbox. | |||
| $kendo-checkbox-disabled-checked-text | Null | null | null |
Description
Color of disabled and checked checkbox. | |||
| $kendo-checkbox-disabled-checked-border | Null | null | null |
Description
Border color of disabled and checked checkbox. | |||
| $kendo-checkbox-disabled-indeterminate-bg | Null | null | null |
Description
Background color of disabled and indeterminate checkbox. | |||
| $kendo-checkbox-disabled-indeterminate-text | Null | null | null |
Description
Border color of disabled and indeterminate checkbox. | |||
| $kendo-checkbox-disabled-indeterminate-border | Null | null | null |
Description
Border color of disabled and indeterminate checkbox. | |||
| $kendo-checkbox-invalid-bg | Color | $kendo-checkbox-bg | #ffffff |
Description
Background color of invalid checkbox. | |||
| $kendo-checkbox-invalid-text | Color | $kendo-invalid-text | #cf222e |
Description
Color of invalid checkbox. | |||
| $kendo-checkbox-invalid-border | Color | $kendo-invalid-border | #cf222e |
Description
Border color of invalid checkbox. | |||
| $kendo-checkbox-indicator-type | String | glyph | glyph |
Description
Type of checkbox indicator. | |||
| $kendo-checkbox-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
Glyph font family of checkbox indicator. | |||
| $kendo-checkbox-checked-glyph | String | "\e118" | "\e118" |
Description
Glyph of checkbox indicator. | |||
| $kendo-checkbox-indeterminate-glyph | String | "\e121" | "\e121" |
Description
Glyph of indeterminate checkbox indicator. | |||
| $kendo-checkbox-image | Null | null | null |
Description
Image of checkbox indicator. | |||
| $kendo-checkbox-hover-image | Null | null | null |
Description
Image of hovered checkbox indicator. | |||
| $kendo-checkbox-checked-image | Null | null | null |
Description
Image of checked checkbox indicator. | |||
| $kendo-checkbox-indeterminate-image | Null | null | null |
Description
Image of indeterminate checkbox indicator. | |||
| $kendo-checkbox-hover-checked-image | Null | null | null |
Description
Image of hovered and checked checkbox indicator. | |||
| $kendo-checkbox-hover-indeterminate-image | Null | null | null |
Description
Image of hovered and indeterminate checkbox indicator. | |||
| $kendo-checkbox-disabled-checked-image | Null | null | null |
Description
Image of checked checkbox indicator. | |||
| $kendo-checkbox-disabled-indeterminate-image | Null | null | null |
Description
Image of indeterminate checkbox indicator. | |||
| $kendo-checkbox-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Spacing between items of horizontal checkbox list. | |||
| $kendo-checkbox-list-item-padding-x | Null | null | null |
Description
Horizontal padding of checkbox list items. | |||
| $kendo-checkbox-list-item-padding-y | Null | null | null |
Description
Vertical padding of checkbox list items. | |||
| $kendo-checkbox-list-item-spacing | Null | null | null |
Description
Spacing between checkbox and text. | |||
| $kendo-checkbox-ripple-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of checkbox ripple. | |||
| $kendo-checkbox-ripple-opacity | Number | .25 | 0.25 |
Description
Opacity of checkbox ripple. | |||
Chip
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-chip-border-width | Number | 1px | 1px |
Description
Width of the border around the button. | |||
| $kendo-chip-font-family | Null | null | null |
Description
The font family of the chip. | |||
| $kendo-chip-list-sizes | Map | (
sm: (
spacing: k-map-get( $kendo-spacing, 1 )
),
md: (
spacing: k-map-get( $kendo-spacing, 1 )
),
lg: (
spacing: k-map-get( $kendo-spacing, 1 )
)
) | (sm: (spacing: 0.25rem), md: (spacing: 0.25rem), lg: (spacing: 0.25rem)) |
Description
The sizes of the chip list. | |||
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 | #622331 | #622331 |
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 | k-contrast-color( $kendo-color-primary ) | 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-info | Color | #0969da | #0969da |
Description
The color for informational messages and states. | |||
| $kendo-color-success | Color | #1a7f37 | #1a7f37 |
Description
The color for success messages and states. | |||
| $kendo-color-warning | Color | #bc4c00 | #bc4c00 |
Description
The color for warning messages and states. | |||
| $kendo-color-error | Color | #cf222e | #cf222e |
Description
The color for error messages and states. | |||
| $kendo-color-dark | Color | #404040 | #404040 |
Description
The dark color of the theme. | |||
| $kendo-color-light | Color | #ebebeb | #ebebeb |
Description
The light color of the theme. | |||
| $kendo-color-inverse | Color | if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) | #404040 |
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark | |||
Component
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-component-bg | Color | k-get-theme-color( neutral, 0 ) | #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-get-theme-color( neutral, 700 ) | #494949 |
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-get-theme-color( neutral, 100 ) | #ededed |
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;`. | |||
Icon
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-icon-size | Number | 1rem | 16px |
Description
Font size of the icons. | |||
| $kendo-icon-size-md | Number | 1rem | 16px |
Description
Font size of the icons. | |||
| $kendo-icon-size-lg | Calculation | 1.25rem | calc(16px * 1.25) |
Description
Font size of the large icons. | |||
| $kendo-icon-spacing | Number | k-map-get( $kendo-spacing, 1 ) | 0.5rem |
Description
Spacing around the icons. | |||
List
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-list-bg | Color | $kendo-component-bg | #ffffff |
Description
The background of the list. | |||
| $kendo-list-text | Color | $kendo-component-text | #494949 |
Description
The text color of the list. | |||
| $kendo-list-border | Color | $kendo-component-border | #ededed |
Description
The border color of the list. | |||
Popup
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-popup-bg | Color | $kendo-component-bg | #ffffff |
Description
The background of the popup. | |||
| $kendo-popup-text | Color | $kendo-component-text | #494949 |
Description
The text color of the popup. | |||
| $kendo-popup-border | Color | $kendo-component-border | #ededed |
Description
The border color of the popup. | |||
Progressbar
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-progressbar-inline-size | Null | null | null |
Description
Inline size of the progressbar. Width when horizontal, height when vertical. | |||
| $kendo-progressbar-block-size | Null | null | null |
Description
Block size of the progressbar. Height when horizontal, width when vertical. | |||
| $kendo-progressbar-border-width | Null | null | null |
Description
Border width of the progressbar. | |||
| $kendo-progressbar-border-radius | Null | null | null |
Description
Border radius of the progressbar. | |||
| $kendo-progressbar-font-family | Null | null | null |
Description
Font family of the progressbar. | |||
| $kendo-progressbar-font-size | Null | null | null |
Description
Font size of the progressbar. | |||
| $kendo-progressbar-line-height | Null | null | null |
Description
Line height of the progressbar. | |||
| $kendo-progressbar-animation-timing | List | 1s linear infinite | 1s linear infinite |
Description
Animation timing of the progressbar. | |||
| $kendo-progressbar-status-padding-x | Null | null | null |
Description
Inline padding of the progressbar status. | |||
| $kendo-progressbar-status-padding-y | Null | null | null |
Description
Block padding of the progressbar status. | |||
| $kendo-progressbar-bg | Color | k-try-shade( $kendo-component-bg, 1 ) | #ebebeb |
Description
Background color of the progressbar. | |||
| $kendo-progressbar-text | Color | $kendo-component-text | #494949 |
Description
Text color of the progressbar. | |||
| $kendo-progressbar-border | Color | $kendo-component-border | #ededed |
Description
Border color of the progressbar. | |||
| $kendo-progressbar-gradient | Null | null | null |
Description
Background gradient of the progressbar. | |||
| $kendo-progressbar-value-bg | Color | $kendo-color-primary | #622331 |
Description
Progress background color of the progressbar. | |||
| $kendo-progressbar-value-text | Color | k-contrast-legacy( $kendo-progressbar-value-bg ) | white |
Description
Progress text color of the progressbar. | |||
| $kendo-progressbar-value-border | Color | k-try-shade( $kendo-progressbar-value-bg ) | #5a202d |
Description
Progress border color of the progressbar. | |||
| $kendo-progressbar-value-gradient | Null | null | null |
Description
Progress background gradient of the progressbar. | |||
| $kendo-progressbar-indeterminate-bg | Color | $kendo-progressbar-bg | #ebebeb |
Description
Background color of the indeterminate progressbar. | |||
| $kendo-progressbar-indeterminate-text | Color | $kendo-progressbar-text | #494949 |
Description
Text color of the indeterminate progressbar. | |||
| $kendo-progressbar-indeterminate-border | Color | $kendo-progressbar-border | #ededed |
Description
Border color of the indeterminate progressbar. | |||
| $kendo-progressbar-indeterminate-gradient | Null | null | null |
Description
Background gradient of the indeterminate progressbar. | |||
| $kendo-progressbar-chunk-border | Color | $kendo-body-bg | #ffffff |
Description
Border color of the chunk progressbar. | |||
| $kendo-circular-progressbar-arc-stroke | Color | $kendo-color-primary | #622331 |
Description
Arc stroke color of the circular progressbar. | |||
| $kendo-circular-progressbar-scale-stroke | Color | $kendo-progressbar-bg | #ebebeb |
Description
Scale stroke background color of the circular progressbar. | |||
| $kendo-progressbar-theme | Map | (
DEFAULT: (
bg: k-get-theme-color( neutral, 100 ),
text: k-get-theme-color( neutral, 700 ),
border: k-get-theme-color( neutral, 200 ),
| (DEFAULT: (bg: #ededed, text: #494949, border: #d6d6d6, value-bg: #622331, value-text: #ffffff, value-border: #622331)) |
Description
Theme colors map of the progressbar. | |||
Radio
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-radio-border-radius | Number | 50% | 50% |
Description
Border radius of radio button. | |||
| $kendo-radio-border-width | Number | 1px | 1px |
Description
Border width of radio. | |||
| $kendo-radio-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of radio. | |||
| $kendo-radio-text | Null | null | null |
Description
Color of radio. | |||
| $kendo-radio-border | Color | $kendo-component-border | #ededed |
Description
Border color of radio. | |||
| $kendo-radio-hover-bg | Null | null | null |
Description
Background color of hovered radio. | |||
| $kendo-radio-hover-text | Null | null | null |
Description
Color of hovered radio. | |||
| $kendo-radio-hover-border | Null | null | null |
Description
Border color of hovered radio. | |||
| $kendo-radio-focus-border | Null | null | null |
Description
Border color of focused radio. | |||
| $kendo-radio-focus-shadow | Null | null | null |
Description
Box shadow of focused radio. | |||
| $kendo-radio-focus-outline | Null | null | null |
Description
The outline of a focused radio. | |||
| $kendo-radio-checked-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of checked radio. | |||
| $kendo-radio-checked-text | Color | k-contrast-color( $kendo-radio-checked-bg ) | white |
Description
Color of checked radio. | |||
| $kendo-radio-checked-border | Color | $kendo-radio-checked-bg | #622331 |
Description
Border color of checked radio. | |||
| $kendo-radio-hover-checked-bg | Null | null | null |
Description
Background of hovered and checked radio. | |||
| $kendo-radio-hover-checked-text | Null | null | null |
Description
Color of checked radio. | |||
| $kendo-radio-hover-checked-border | Null | null | null |
Description
Border of hovered and checked radio. | |||
| $kendo-radio-disabled-bg | Null | null | null |
Description
Background color of disabled radio. | |||
| $kendo-radio-disabled-text | Null | null | null |
Description
Color of disabled radio. | |||
| $kendo-radio-disabled-border | Null | null | null |
Description
Border color of disabled radio. | |||
| $kendo-radio-disabled-checked-bg | Null | null | null |
Description
Background color of disabled and checked radio. | |||
| $kendo-radio-disabled-checked-text | Null | null | null |
Description
Color of disabled and checked radio. | |||
| $kendo-radio-disabled-checked-border | Null | null | null |
Description
Border color of disabled and checked radio. | |||
| $kendo-radio-invalid-bg | Color | $kendo-radio-bg | #ffffff |
Description
Background color of invalid radio. | |||
| $kendo-radio-invalid-text | Color | $kendo-invalid-text | #cf222e |
Description
Color of invalid radio. | |||
| $kendo-radio-invalid-border | Color | $kendo-invalid-border | #cf222e |
Description
Border color of invalid radio. | |||
| $kendo-radio-indicator-type | String | pseudo | pseudo |
Description
Type of radio indicator. | |||
| $kendo-radio-indicator-border-radius | Number | 50% | 50% |
Description
Border radius radio button indicator. | |||
| $kendo-radio-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
Glyph font family of radio indicator. | |||
| $kendo-radio-checked-glyph | String | "\e308" | "\e308" |
Description
Glyph of radio indicator. | |||
| $kendo-radio-image | Null | null | null |
Description
Image of radio indicator. | |||
| $kendo-radio-hover-image | Null | null | null |
Description
Image of hovered radio indicator. | |||
| $kendo-radio-checked-image | Null | null | null |
Description
Image of checked radio indicator. | |||
| $kendo-radio-hover-checked-image | Null | null | null |
Description
Image of hovered and checked radio indicator. | |||
| $kendo-radio-disabled-checked-image | Null | null | null |
Description
Image of checked radio indicator. | |||
| $kendo-radio-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Spacing between items of horizontal radio list. | |||
| $kendo-radio-list-item-padding-x | Null | null | null |
Description
Horizontal padding of radio list items. | |||
| $kendo-radio-list-item-padding-y | Null | null | null |
Description
Vertical padding of radio list items. | |||
| $kendo-radio-list-item-spacing | Null | null | null |
Description
Spacing between radio and text. | |||
| $kendo-radio-ripple-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of radio ripple. | |||
| $kendo-radio-ripple-opacity | Number | .25 | 0.25 |
Description
Opacity of radio ripple. | |||
Skeleton
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-skeleton-text-transform | String | scale( 1, .6 ) | scale(1, 0.6) |
Description
Text transform scale of the skeleton. | |||
| $kendo-skeleton-text-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
Border radius of the skeleton text. | |||
| $kendo-skeleton-rect-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
Border radius of the rectangle skeleton. | |||
| $kendo-skeleton-circle-border-radius | Number | 9999px | 9999px |
Description
Border radius of the circle skeleton. | |||
| $kendo-skeleton-item-bg | Color | k-get-theme-color( neutral, 100 ) | #ededed |
Description
Background color of the skeleton item. | |||
| $kendo-skeleton-wave-bg | Color | k-get-theme-color( neutral, 50 ) | #f8f8f8 |
Description
Background color of the skeleton wave animation. | |||
Slider
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-slider-inline-size | Number | 20em | 20em |
Description
The default slider size. | |||
| $kendo-slider-block-size | Number | 22px | 22px |
Description
The default slider track wrap size. | |||
| $kendo-slider-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The spacing of the slider. | |||
| $kendo-slider-font-family | Null | null | null |
Description
Font family of the slider. | |||
| $kendo-slider-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the slider. | |||
| $kendo-slider-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the slider. | |||
| $kendo-slider-track-size | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The size of the slider track. | |||
| $kendo-slider-track-border-radius | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The border radius of the slider track. | |||
| $kendo-slider-thumb-size | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
The default size of the slider thumb. | |||
| $kendo-slider-thumb-border-width | Number | k-map-get( $kendo-spacing, 0.5 ) | 0.125rem |
Description
The default border width of the slider thumb. | |||
| $kendo-slider-thumb-border-radius | Number | 9999px | 9999px |
Description
The border radius of the slider thumb. | |||
| $kendo-slider-thumb-active-scale | Null | null | null |
Description
The active transition scale of the slider thumb. | |||
| $kendo-slider-thumb-active-size | Null | null | null |
Description
The active size of the slider thumb. | |||
| $kendo-slider-transition-speed | Number | .3s | 0.3s |
Description
The transition speed of the slider. | |||
| $kendo-slider-transition-function | String | ease-out | ease-out |
Description
The transition function function. | |||
| $kendo-slider-thumb-transition-speed | Number | .4s | 0.4s |
Description
The transition speed of the slider thumb. | |||
| $kendo-slider-thumb-transition-function | String | cubic-bezier(.25, .8, .25, 1) | cubic-bezier(0.25, 0.8, 0.25, 1) |
Description
The transition function of the slider thumb. | |||
Switch
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-switch-font-family | Null | null | null |
Description
Font family of the switch. | |||
| $kendo-switch-track-border-width | Number | 1px | 1px |
Description
Border width of the switch track. | |||
| $kendo-switch-thumb-border-width | Number | 0 | 0 |
Description
Border width of the switch thumb. | |||
| $kendo-switch-label-text-transform | String | uppercase | uppercase |
Description
Text transform of the switch label. | |||
| $kendo-switch-label-display | String | none | none |
Description
Display of the switch label. | |||
| $kendo-switch-sizes | Map | (
sm: (
font-size: $kendo-font-size-sm,
track-width: 36px,
track-height: 16px,
thumb-width: 10px,
thumb-height: 10px,
thumb-offset: 3px,
label-offset: 4px
),
md: (
font-size: $kendo-font-size-sm,
track-width: 40px,
track-height: 20px,
thumb-width: 12px,
thumb-height: 12px,
thumb-offset: 4px,
label-offset: 5px
),
lg: (
font-size: $kendo-font-size-sm,
track-width: 44px,
track-height: 24px,
thumb-width: 14px,
thumb-height: 14px,
thumb-offset: 5px,
label-offset: 6px
)
) | (sm: (font-size: 0.875rem, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 0.875rem, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px), lg: (font-size: 0.875rem, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px)) |
Description
Map with the different switch sizes. | |||
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-header-font-weight | Null | null | null |
Description
Font weight of the table header cells. | |||
| $kendo-table-sizes | Map | (
sm: (
font-size: $kendo-font-size-sm,
line-height: $kendo-line-height-sm,
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y,
group-row-padding-x: 0,
group-row-padding-y: $kendo-table-sm-cell-padding-y,
group-label-padding-x: k-map-get( $kendo-spacing, 2 ),
group-label-padding-y: k-map-get( $kendo-spacing, 1 ),
group-label-font-size: .875em
),
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,
group-row-padding-x: 0,
group-row-padding-y: $kendo-table-md-cell-padding-y,
group-label-padding-x: k-map-get( $kendo-spacing, 2 ),
group-label-padding-y: k-map-get( $kendo-spacing, 1 ),
group-label-font-size: .875em
),
lg: (
font-size: $kendo-font-size-lg,
line-height: $kendo-line-height-lg,
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y,
group-row-padding-x: 0,
group-row-padding-y: $kendo-table-lg-cell-padding-y,
group-label-padding-x: k-map-get( $kendo-spacing, 2 ),
group-label-padding-y: k-map-get( $kendo-spacing, 1 ),
group-label-font-size: .875em
)
) | (sm: (font-size: 0.875rem, line-height: 1.25, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem, group-row-padding-x: 0, group-row-padding-y: 0.25rem, group-label-padding-x: 0.5rem, group-label-padding-y: 0.25rem, group-label-font-size: 0.875em), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.75rem, cell-padding-y: 0.25rem, group-row-padding-x: 0, group-row-padding-y: 0.25rem, group-label-padding-x: 0.5rem, group-label-padding-y: 0.25rem, group-label-font-size: 0.875em), lg: (font-size: 1.25rem, line-height: 1.75, cell-padding-x: 0.75rem, cell-padding-y: 0.25rem, group-row-padding-x: 0, group-row-padding-y: 0.25rem, group-label-padding-x: 0.5rem, group-label-padding-y: 0.25rem, group-label-font-size: 0.875em)) |
Description
The sizes of the table. | |||
Tabstrip
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-tabstrip-wrapper-padding-x | Null | null | null |
Description
The horizontal padding of the tabstrip wrapper | |||
| $kendo-tabstrip-wrapper-padding-y | Null | null | null |
Description
The vertical padding of the tabstrip wrapper | |||
| $kendo-tabstrip-wrapper-border-width | Null | null | null |
Description
The width of the border around the tabstrip wrapper | |||
| $kendo-tabstrip-font-family | Null | null | null |
Description
The font family of the tabstrip | |||
| $kendo-tabstrip-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the tabstrip | |||
| $kendo-tabstrip-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the tabstrip | |||
| $kendo-tabstrip-border-width | Number | 1px | 1px |
Description
The width of the border around the tabstrip | |||
| $kendo-tabstrip-spacing | Null | null | null |
Description
The space between the tabstrip items | |||
| $kendo-tabstrip-item-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
The horizontal padding of the tabstrip item | |||
| $kendo-tabstrip-item-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The vertical padding of the tabstrip item | |||
| $kendo-tabstrip-item-border-width | Number | 1px | 1px |
Description
The width of the border around the tabstrip item | |||
| $kendo-tabstrip-item-border-style | String | solid | solid |
Description
The style of the border around the tabstrip item | |||
| $kendo-tabstrip-item-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
The border radius of the tabstrip item | |||
| $kendo-tabstrip-item-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, 0.8) |
Description
The focus shadow of the tabstrip item | |||
| $kendo-tabstrip-indicator-size | Number | k-map-get( $kendo-spacing, 0.5 ) | 0.125rem |
Description
The border width of the tabstrip indicator | |||
| $kendo-tabstrip-indicator-color | String | k-get-theme-color-var( primary-100 ) | var(--kendo-primary-100, inherit) |
Description
The border color of the tabstrip ripple | |||
| $kendo-tabstrip-content-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
The horizontal padding of tabstrip content | |||
| $kendo-tabstrip-content-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
The vertical padding of tabstrip content | |||
| $kendo-tabstrip-content-border-width | Number | 1px | 1px |
Description
The width of border around tabstrip content | |||
| $kendo-tabstrip-content-border-style | String | solid | solid |
Description
The style of border around tabstrip content | |||
| $kendo-tabstrip-scrollable-button-padding-x | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The horizontal button padding of the scrollable tabstrip | |||
| $kendo-tabstrip-scrollable-button-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Toolbar
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-toolbar-border-width | Number | 1px | 1px |
Description
Width of the border around the toolbar. | |||
| $kendo-toolbar-font-family | Null | null | null |
Description
Font family of the toolbar. | |||
| $kendo-toolbar-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the toolbar. | |||
| $kendo-toolbar-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the toolbar. | |||
| $kendo-toolbar-input-width | Number | 10em | 10em |
Description
The width of the input in the toolbar. | |||
| $kendo-toolbar-item-focus-outline-width | Number | 1px | 1px |
Description
Border width of the focused toolbar item. | |||
| $kendo-toolbar-item-focus-outline-style | String | solid | solid |
Description
Border style of the focused toolbar item. | |||
| $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: 0.25rem, padding-y: 0.25rem, spacing: 0.25rem), md: (padding-x: 0.5rem, padding-y: 0.5rem, spacing: 0.5rem), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: 0.5rem)) |
Description
Sizes map for the toolbar. | |||
Tooltip
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-tooltip-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
The radius of the border around the tooltip | |||
| $kendo-tooltip-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The horizontal padding of the tooltip | |||
| $kendo-tooltip-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The vertical padding of the tooltip | |||
| $kendo-tooltip-border-width | Number | 0px | 0px |
Description
The width of the border around the tooltip | |||
| $kendo-tooltip-font-family | Null | null | null |
Description
The font family of the tooltip | |||
| $kendo-tooltip-font-size | Number | $kendo-font-size-sm | 0.875rem |
Description
The font size of the tooltip | |||
| $kendo-tooltip-line-height | Number | $kendo-line-height-sm | 1.25 |
Description
The line height of the tooltip | |||
| $kendo-tooltip-title-margin | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The margin of the tooltip title | |||
| $kendo-tooltip-title-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the tooltip title | |||
| $kendo-tooltip-title-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the tooltip title | |||
| $kendo-tooltip-title-font-weight | String | normal | normal |
Description
The went weight of the tooltip title | |||
| $kendo-tooltip-callout-size | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The size of the tooltip callout | |||
Treeview
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-treeview-font-family | Null | null | null |
Description
Font family of the treeview component. | |||
| $kendo-treeview-sizes | Map | (
sm: (
font-size: $kendo-font-size-sm,
line-height: $kendo-line-height-sm,
filter-padding-x: k-map-get( $kendo-spacing, 1 ),
filter-padding-y: k-map-get( $kendo-spacing, 1 ),
indent: k-map-get( $kendo-spacing, 4 ),
icon-spacing: k-map-get( $kendo-spacing, 1 ),
checkbox-spacing: k-map-get( $kendo-spacing, 1 ),
item-padding-x: k-map-get( $kendo-spacing, 2 ),
item-padding-y: k-map-get( $kendo-spacing, 1 ),
item-border-radius: k-map-get( $kendo-spacing, 0.5 )
),
md: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
filter-padding-x: k-map-get( $kendo-spacing, 2 ),
filter-padding-y: k-map-get( $kendo-spacing, 2 ),
indent: k-map-get( $kendo-spacing, 4 ),
icon-spacing: k-map-get( $kendo-spacing, 1 ),
checkbox-spacing: k-map-get( $kendo-spacing, 1 ),
item-padding-x: k-map-get( $kendo-spacing, 2.5 ),
item-padding-y: k-map-get( $kendo-spacing, 1.5 ),
item-border-radius: k-map-get( $kendo-spacing, 1 )
),
lg: (
font-size: $kendo-font-size-lg,
line-height: $kendo-line-height-lg,
filter-padding-x: k-map-get( $kendo-spacing, 3 ),
filter-padding-y: k-map-get( $kendo-spacing, 3 ),
indent: k-map-get( $kendo-spacing, 4 ),
icon-spacing: k-map-get( $kendo-spacing, 1 ),
checkbox-spacing: k-map-get( $kendo-spacing, 1 ),
item-padding-x: k-map-get( $kendo-spacing, 3 ),
item-padding-y: k-map-get( $kendo-spacing, 2 ),
item-border-radius: k-map-get( $kendo-spacing, 2 )
)
) | (sm: (font-size: 0.875rem, line-height: 1.25, filter-padding-x: 0.25rem, filter-padding-y: 0.25rem, indent: 1rem, icon-spacing: 0.25rem, checkbox-spacing: 0.25rem, item-padding-x: 0.5rem, item-padding-y: 0.25rem, item-border-radius: 0.125rem), md: (font-size: 1rem, line-height: 1.5, filter-padding-x: 0.5rem, filter-padding-y: 0.5rem, indent: 1rem, icon-spacing: 0.25rem, checkbox-spacing: 0.25rem, item-padding-x: 0.625rem, item-padding-y: 0.375rem, item-border-radius: 0.25rem), lg: (font-size: 1.25rem, line-height: 1.75, filter-padding-x: 0.75rem, filter-padding-y: 0.75rem, indent: 1rem, icon-spacing: 0.25rem, checkbox-spacing: 0.25rem, item-padding-x: 0.75rem, item-padding-y: 0.5rem, item-border-radius: 0.5rem)) |
Description
The sizes of the treeview. | |||
Typography
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-font-size-xs | Number | .75rem | 0.75rem |
Description
Base font size across all components. | |||
| $kendo-font-family-sans-serif | List | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
Font family for text. | |||
| $kendo-font-family-monospace | List | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace |
Description
Font family for monospaced text. Used for styling the code. | |||
| $kendo-font-family | Null | null | null |
Description
Font family across all components. | |||
| $kendo-line-height-sm | Number | 1.25 | 1.25 |
Description
Line height used along with $kendo-font-size. | |||
Window
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-window-border-width | Number | 1px | 1px |
Description
Width of the border around the window. | |||
| $kendo-window-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
Border radius of the window. | |||
| $kendo-window-font-family | Null | null | null |
Description
Font family of the window. | |||
| $kendo-window-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the window. | |||
| $kendo-window-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the window. | |||
| $kendo-window-titlebar-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the window titlebar. | |||
| $kendo-window-titlebar-padding-y | Number | k-map-get( $kendo-spacing, 3 ) | 0.75rem |
Description
Vertical padding of the window titlebar. | |||
| $kendo-window-titlebar-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between title and actions in window titlebar. | |||
| $kendo-window-titlebar-border-width | Null | null | null |
Description
Width of the top border of the window titlebar. | |||
| $kendo-window-titlebar-border-style | String | solid | solid |
Description
Style of the top border of the window titlebar. | |||
| $kendo-window-title-font-size | Number | $kendo-font-size-lg | 1.25rem |
Description
Font size of the title of the window. | |||
| $kendo-window-title-line-height | Number | $kendo-line-height-sm | 1.25 |
Description
Line height of the title of the window. | |||
| $kendo-window-title-font-weight | Null | null | null |
Description
Font weight of the title of the window. | |||
| $kendo-window-titlebar-actions-spacing | Null | null | null |
Description
Spacing between the buttons in the header of the window. | |||
| $kendo-window-titlebar-action-opacity | Number | 1 | 1 |
Description
Opacity of the buttons in the header of the window. | |||
| $kendo-window-titlebar-action-hover-opacity | Number | 1 | 1 |
Description
Opacity of the buttons when hovered in the header of the window. | |||
| $kendo-window-inner-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the content of the window. | |||
| $kendo-window-inner-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the content of the window. | |||
| $kendo-window-actions-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Horizontal padding of the window action buttons. | |||
| $kendo-window-actions-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Vertical padding of the window action buttons. | |||
| $kendo-window-actions-border-width | Number | 1px | 1px |
Description
Width of the top border of the window action buttons. | |||
| $kendo-window-actions-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between the action buttons of the window. | |||
| $kendo-window-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of the window. | |||
| $kendo-window-text | Color | $kendo-component-text | #494949 |
Description
Text color of the window. | |||
| $kendo-window-border | Color | $kendo-component-border | #ededed |
Description
Border color of the window. | |||
| $kendo-window-shadow | String | none | none |
Description
Box shadow around the window. | |||
| $kendo-window-focus-shadow | String | none | none |
Description
Box shadow around the window when hovered. | |||
