New to Kendo UI for Angular? Start a free 30-day trial
Customization
Variables
The following table lists the available variables for customizing the Bootstrap theme.
Common
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-base-bg | String | $gray-100 | var(--kendo-color-surface, #f8f9fa) |
Description
The background of the components' chrome area. | |||
$kendo-base-text | String | $kendo-body-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the components' chrome area. | |||
$kendo-base-border | String | k-try-shade( $kendo-base-bg, 1 ) | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the components' chrome area. | |||
$kendo-base-gradient | Null | null | null |
Description
The gradient background of the components' chrome area. | |||
$kendo-hover-bg | String | $gray-200 | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background of hovered items. | |||
$kendo-hover-text | String | $kendo-base-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of hovered items. | |||
$kendo-hover-border | String | k-try-shade( $kendo-hover-bg, 1 ) | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of hovered items. | |||
$kendo-hover-gradient | Null | null | null |
Description
The gradient background of hovered items. | |||
$kendo-selected-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background of selected items. | |||
$kendo-selected-text | String | k-contrast-color( $kendo-selected-bg ) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of selected items. | |||
$kendo-selected-border | String | k-try-shade( $kendo-selected-bg, 1 ) | var(--kendo-color-primary, #0d6efd) |
Description
The border color of selected items. | |||
$kendo-selected-gradient | Null | null | null |
Description
The gradient background of selected items. | |||
$kendo-disabled-text | String | if( $kendo-is-dark-theme, $gray-600, $gray-500) | var(--kendo-color-on-app-surface, #212529) |
Description
Text color of disabled items. | |||
$kendo-display | Map | (
1: (
font-size: $kendo-display1-font-size,
font-family: $kendo-display1-font-family,
line-height: $kendo-display1-line-height,
font-weight: $kendo-display1-font-weight,
letter-spacing: $kendo-display1-letter-spacing
),
2: (
font-size: $kendo-display2-font-size,
font-family: $kendo-display2-font-family,
line-height: $kendo-display2-line-height,
font-weight: $kendo-display2-font-weight,
letter-spacing: $kendo-display2-letter-spacing
),
3: (
font-size: $kendo-display3-font-size,
font-family: $kendo-display3-font-family,
line-height: $kendo-display3-line-height,
font-weight: $kendo-display3-font-weight,
letter-spacing: $kendo-display3-letter-spacing
),
4: (
font-size: $kendo-display4-font-size,
font-family: $kendo-display4-font-family,
line-height: $kendo-display4-line-height,
font-weight: $kendo-display4-font-weight,
letter-spacing: $kendo-display4-letter-spacing
),
) | (1: (font-size: 5rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null), 2: (font-size: 4.5rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null), 3: (font-size: 4rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null), 4: (font-size: 3.5rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null)) |
Description
The displays Map |
Accessibility
Name | Type | Default value | Computed value |
---|---|---|---|
$wcag-min-contrast-ratio | Number | 7 | 4.5 |
Description
The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. | |||
$wcag-dark | Color | black | black |
Description
Default dark color for WCAG 2.0. | |||
$wcag-light | Color | white | white |
Description
Default light color for WCAG 2.0. |
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 | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the AppBar. | |||
$kendo-appbar-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the AppBar. | |||
$kendo-appbar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the AppBar. | |||
$kendo-appbar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the AppBar. | |||
$kendo-appbar-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the AppBar sections. | |||
$kendo-appbar-light-bg | String | $kendo-color-light | var(--kendo-color-light, #f8f9fa) |
Description
The background color of the AppBar based on light theme color. | |||
$kendo-appbar-light-text | String | if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) | var(--kendo-color-on-light, #000000) |
Description
The text color of the AppBar based on light theme color. | |||
$kendo-appbar-dark-bg | String | $kendo-color-dark | var(--kendo-color-dark, #212529) |
Description
The background color of the AppBar based on dark theme color. | |||
$kendo-appbar-dark-text | String | if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) | var(--kendo-color-on-dark, #ffffff) |
Description
The text color of the AppBar based on dark theme color. | |||
$kendo-appbar-box-shadow | String | k-elevation(4) | var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125)) |
Description
The box shadow of the AppBar. | |||
$kendo-appbar-bottom-box-shadow | String | k-elevation(4) | var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125)) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Avatar. | |||
$kendo-avatar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Avatar. | |||
$kendo-avatar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Avatar. | |||
$kendo-avatar-sizes | Map | (
sm: k-spacing(4),
md: k-spacing(8),
lg: k-spacing(16)
) | (sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem)) |
Description
The sizes map of the Avatar. | |||
$kendo-avatar-theme-colors | Map | $kendo-theme-colors | ("primary": var(--kendo-color-primary, #0d6efd), "secondary": var(--kendo-color-secondary, #6c757d), "tertiary": var(--kendo-color-tertiary, #6f42c1), "info": var(--kendo-color-info, #0dcaf0), "success": var(--kendo-color-success, #198754), "warning": var(--kendo-color-warning, #ffc107), "error": var(--kendo-color-error, #dc3545), "dark": var(--kendo-color-dark, #212529), "light": var(--kendo-color-light, #f8f9fa), "inverse": var(--kendo-color-dark, #212529)) |
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 | $badge-border-radius | 0.375rem |
Description
The border radius of the Badge. | |||
$kendo-badge-padding-x | Number | $badge-padding-x | 0.65em |
Description
The horizontal padding of the Badge. | |||
$kendo-badge-sm-padding-x | Number | k-math-div( $badge-padding-x, 2 ) | 0.325em |
Description
The horizontal padding of the small Badge. | |||
$kendo-badge-md-padding-x | Number | $badge-padding-x | 0.65em |
Description
The horizontal padding of the medium Badge. | |||
$kendo-badge-lg-padding-x | Number | ( $badge-padding-x * 1.5 ) | 0.975em |
Description
The horizontal padding of the large Badge. | |||
$kendo-badge-padding-y | Number | $badge-padding-y | 0.35em |
Description
The vertical padding of the Badge. | |||
$kendo-badge-sm-padding-y | Number | k-math-div( $badge-padding-y, 2 ) | 0.175em |
Description
The vertical padding of the small Badge. | |||
$kendo-badge-md-padding-y | Number | $badge-padding-y | 0.35em |
Description
The vertical padding of the medium Badge. | |||
$kendo-badge-lg-padding-y | Number | ( $badge-padding-y * 1.5 ) | 0.525em |
Description
The vertical padding of the large Badge. | |||
$kendo-badge-font-size | Number | $badge-font-size | 0.75em |
Description
The font sizes of the Badge. | |||
$kendo-badge-sm-font-size | Number | $badge-font-size | 0.75em |
Description
The font size of the small Badge. | |||
$kendo-badge-md-font-size | Number | $badge-font-size | 0.75em |
Description
The font size of the medium Badge. | |||
$kendo-badge-lg-font-size | Number | $badge-font-size | 0.75em |
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} + calc( #{$kendo-badge-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 )) | calc(1em + 0.35em * 2 + 1px * 2) |
Description
The calculated minimum width of the circular Badge. | |||
$kendo-badge-sm-min-width | Calculation | calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) | calc(1em + 0.175em * 2 + 1px * 2) |
Description
The calculated minimum width of the small circular Badge. | |||
$kendo-badge-md-min-width | Calculation | calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) | calc(1em + 0.35em * 2 + 1px * 2) |
Description
The calculated minimum width of the medium circular Badge. | |||
$kendo-badge-lg-min-width | Calculation | calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) | calc(1em + 0.525em * 2 + 1px * 2) |
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: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc(1em + 0.175em * 2 + 1px * 2)), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc(1em + 0.35em * 2 + 1px * 2)), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc(1em + 0.525em * 2 + 1px * 2))) |
Description
The sizes map for the Badge. |
Bottom-navigation
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-bottom-nav-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the BottomNavigation. | |||
$kendo-bottom-nav-padding-y | String | $kendo-bottom-nav-padding-x | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the BottomNavigation. | |||
$kendo-bottom-nav-gap | String | $kendo-bottom-nav-padding-x | var(--kendo-spacing-0, 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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the BottomNavigation. | |||
$kendo-bottom-nav-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the BottomNavigation. | |||
$kendo-bottom-nav-line-height | String | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, 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 | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the BottomNavigation item. | |||
$kendo-bottom-nav-item-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
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} + #{k-spacing(4)} - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) | calc(40px + var(--kendo-spacing-4, 1rem) - var(--kendo-spacing-0, 0px) * 2) |
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-spacing(1) | 0 var(--kendo-spacing-1, 0.25rem) |
Description
The spacing of the BottomNavigation item. | |||
$kendo-bottom-nav-shadow | String | k-elevation(4) | var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125)) |
Description
The box shadow of the BottomNavigation. | |||
$kendo-bottom-nav-flat-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the flat BottomNavigation. | |||
$kendo-bottom-nav-flat-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the flat BottomNavigation. | |||
$kendo-bottom-nav-flat-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Breadcrumb. | |||
$kendo-breadcrumb-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Breadcrumb. | |||
$kendo-breadcrumb-sm-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small Breadcrumb. | |||
$kendo-breadcrumb-md-font-size | String | $kendo-breadcrumb-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the medium Breadcrumb. | |||
$kendo-breadcrumb-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large Breadcrumb. | |||
$kendo-breadcrumb-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line-height of the Breadcrumb. | |||
$kendo-breadcrumb-sm-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line-height of the small Breadcrumb. | |||
$kendo-breadcrumb-md-line-height | String | $kendo-breadcrumb-line-height | var(--kendo-line-height, normal) |
Description
The line-height of the medium Breadcrumb. | |||
$kendo-breadcrumb-lg-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line-height of the height Breadcrumb. | |||
$kendo-breadcrumb-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The base background of the Breadcrumb. | |||
$kendo-breadcrumb-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The base text color of the Breadcrumb. | |||
$kendo-breadcrumb-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Breadcrumb link. | |||
$kendo-breadcrumb-sm-link-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the small Breadcrumb link. | |||
$kendo-breadcrumb-md-link-padding-x | String | $kendo-breadcrumb-link-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the medium Breadcrumb link. | |||
$kendo-breadcrumb-lg-link-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the large Breadcrumb link. | |||
$kendo-breadcrumb-link-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Breadcrumb link. | |||
$kendo-breadcrumb-sm-link-padding-y | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the small Breadcrumb link. | |||
$kendo-breadcrumb-md-link-padding-y | String | $kendo-breadcrumb-link-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the medium Breadcrumb link. | |||
$kendo-breadcrumb-lg-link-padding-y | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The vertical padding of the large Breadcrumb link. | |||
$kendo-breadcrumb-link-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border-radius of the Breadcrumb link. | |||
$kendo-breadcrumb-icon-link-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Breadcrumb link icon. | |||
$kendo-breadcrumb-sm-icon-link-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the small Breadcrumb link icon. | |||
$kendo-breadcrumb-md-icon-link-padding-y | String | $kendo-breadcrumb-icon-link-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the medium Breadcrumb link icon. | |||
$kendo-breadcrumb-lg-icon-link-padding-y | String | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) |
Description
The vertical padding of the large Breadcrumb link icon. | |||
$kendo-breadcrumb-icon-link-padding-x | String | $kendo-breadcrumb-icon-link-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Breadcrumb link icon. | |||
$kendo-breadcrumb-sm-icon-link-padding-x | String | $kendo-breadcrumb-sm-icon-link-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the small Breadcrumb link icon. | |||
$kendo-breadcrumb-md-icon-link-padding-x | String | $kendo-breadcrumb-icon-link-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the medium Breadcrumb link icon. | |||
$kendo-breadcrumb-lg-icon-link-padding-x | String | $kendo-breadcrumb-lg-icon-link-padding-y | var(--kendo-spacing-3\.5, 0.875rem) |
Description
The horizontal padding of the large Breadcrumb link icon. | |||
$kendo-breadcrumb-link-initial-text | String | inherit | inherit |
Description
The text color of the Breadcrumb link. | |||
$kendo-breadcrumb-link-icon-spacing | String | $kendo-icon-spacing | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Breadcrumb link icon. | |||
$kendo-breadcrumb-link-bg | Null | null | null |
Description
The background color of the Breadcrumb link. | |||
$kendo-breadcrumb-link-text | String | $kendo-link-text | var(--kendo-color-primary, #0d6efd) |
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 | Null | null | null |
Description
The background color of the hovered Breadcrumb link. | |||
$kendo-breadcrumb-link-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
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 | Null | null | null |
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 | List | inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( $kendo-breadcrumb-text, .25 )) | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 25%, transparent) |
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 | String | $kendo-link-text | var(--kendo-color-primary, #0d6efd) |
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 | Null | null | null |
Description
The background color of the hovered Breadcrumb root link. | |||
$kendo-breadcrumb-root-link-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
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 | Null | null | null |
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 | List | $kendo-breadcrumb-link-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 25%, transparent) |
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 | String | $kendo-color-secondary | var(--kendo-color-secondary, #6c757d) |
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: var(--kendo-spacing-3, 0.75rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-sm, inherit), line-height: 1.4285714286), md: (link-padding-x: var(--kendo-spacing-3, 0.75rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-3, 0.75rem), link-padding-y: var(--kendo-spacing-2\.5, 0.625rem), icon-link-padding-x: var(--kendo-spacing-3\.5, 0.875rem), icon-link-padding-y: var(--kendo-spacing-3\.5, 0.875rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal))) |
Description
The sizes map for the Breadcrumb. |
Button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-button-border-width | Number | $btn-border-width | 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 | $btn-padding-x | 0.75rem |
Description
The horizontal padding of the Button. | |||
$kendo-button-sm-padding-x | Number | $btn-padding-x-sm | 0.5rem |
Description
The horizontal padding of the small Button. | |||
$kendo-button-md-padding-x | Number | $btn-padding-x | 0.75rem |
Description
The horizontal padding of the medium Button. | |||
$kendo-button-lg-padding-x | Number | $btn-padding-x-lg | 1rem |
Description
The horizontal padding of the large Button. | |||
$kendo-button-padding-y | Number | $btn-padding-y | 0.375rem |
Description
The vertical padding of the Button. | |||
$kendo-button-sm-padding-y | Number | $btn-padding-y-sm | 0.25rem |
Description
The vertical padding of the small Button. | |||
$kendo-button-md-padding-y | Number | $btn-padding-y | 0.375rem |
Description
The vertical padding of the medium Button. | |||
$kendo-button-lg-padding-y | Number | $btn-padding-y-lg | 0.5rem |
Description
The vertical padding of the large Button. | |||
$kendo-button-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Button. | |||
$kendo-button-font-size | Number | $btn-font-size | 1rem |
Description
The font size of the Button. | |||
$kendo-button-sm-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small Button. | |||
$kendo-button-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Button. | |||
$kendo-button-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large Button. | |||
$kendo-button-line-height | Number | $btn-line-height | 1.5 |
Description
The line height 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 | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height used along with the $kendo-font-size variable of the medium Button. | |||
$kendo-button-lg-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height used along with the $kendo-font-size variable of the large Button. | |||
$kendo-button-calc-size | Calculation | calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) | calc(1.5 * 1em + 0.375rem * 2 + 2px) |
Description
The calculated height of the Button. | |||
$kendo-button-inner-calc-size | Calculation | calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) | calc(1.5 * 1em + 0.375rem * 2) |
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: 0.5rem, padding-y: 0.25rem, font-size: var(--kendo-font-size-sm, inherit), line-height: 1.4285714286), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal))) |
Description
The sizes map for the Button. | |||
$kendo-button-theme-colors | Map | k-map-merge(
$kendo-theme-colors,
( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )
) | ("primary": var(--kendo-color-primary, #0d6efd), "secondary": var(--kendo-color-secondary, #6c757d), "tertiary": var(--kendo-color-tertiary, #6f42c1), "info": var(--kendo-color-info, #0dcaf0), "success": var(--kendo-color-success, #198754), "warning": var(--kendo-color-warning, #ffc107), "error": var(--kendo-color-error, #dc3545), "dark": var(--kendo-color-dark, #212529), "light": var(--kendo-color-light, #f8f9fa), "inverse": var(--kendo-color-dark, #212529), "base": var(--kendo-color-base, #dee2e6)) |
Description
The theme colors map for the Button. | |||
$kendo-button-bg | String | if($kendo-enable-color-system, k-color( base ), #e4e7eb) | var(--kendo-color-base, #dee2e6) |
Description
The base background of the Button. | |||
$kendo-button-text | String | if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 )) | var(--kendo-color-on-base, #212529) |
Description
The base text color of the Button. | |||
$kendo-button-border | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
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 | Null | null | null |
Description
The base shadow of the Button. | |||
$kendo-button-hover-bg | String | if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% )) | var(--kendo-color-base-hover, #ced4da) |
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 | String | if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) | var(--kendo-color-base-hover, #ced4da) |
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 | String | if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) | var(--kendo-color-base-active, #bdc4cb) |
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 | String | if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) | var(--kendo-color-base-active, #bdc4cb) |
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 | Null | null | null |
Description
The base shadow of the active Button. | |||
$kendo-button-selected-bg | String | if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% )) | var(--kendo-color-primary-active, #0a58ca) |
Description
The base background color of the selected Button. | |||
$kendo-button-selected-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected Button. | |||
$kendo-button-selected-border | String | if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% )) | var(--kendo-color-primary-active, #0a58ca) |
Description
The border color of the selected Button. | |||
$kendo-button-selected-gradient | Null | $kendo-button-active-gradient | null |
Description
The background gradient of the selected Button. | |||
$kendo-button-selected-shadow | Null | $kendo-button-active-shadow | null |
Description
The base shadow of the selected Button. | |||
$kendo-button-focus-bg | String | if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) | var(--kendo-color-base-active, #bdc4cb) |
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 | String | if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) | var(--kendo-color-base-active, #bdc4cb) |
Description
The base border color of the focused Button. | |||
$kendo-button-focus-gradient | Null | null | null |
Description
The base background gradient of the focused Button. | |||
$kendo-button-focus-shadow | List | 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 50%, transparent), rgba( $kendo-button-border, .5 )) | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent) |
Description
The base shadow of the focused Button. | |||
$kendo-button-disabled-bg | Null | null | null |
Description
The base background of the disabled Button. | |||
$kendo-button-disabled-text | Null | null | null |
Description
The base text color of the disabled Button. | |||
$kendo-button-disabled-border | Null | null | null |
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 | Null | null | null |
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 | Null | null | null |
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 | .2 | 0.2 |
Description
The overlay opacity of the selected flat Button. Used to create a background for the flat Button. | |||
$kendo-flat-button-focus-ring-opacity | Number | .12 | 0.12 |
Description
The opacity of the flat Button focus ring. Used to create a border for the flat Button. | |||
$kendo-button-transition | List | $kendo-transition | color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out |
Description
The color transition of the Button. |
Calendar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-calendar-border-width | Number | 1px | 1px |
Description
The width of the border around the Calendar. | |||
$kendo-calendar-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Calendar. | |||
$kendo-calendar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Calendar. | |||
$kendo-calendar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Calendar. | |||
$kendo-calendar-cell-size | Number | 38px | 38px |
Description
The size of the cells in the Calendar. | |||
$kendo-calendar-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Calendar. | |||
$kendo-calendar-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Calendar. | |||
$kendo-calendar-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Calendar. | |||
$kendo-calendar-header-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the header in the Calendar. | |||
$kendo-calendar-header-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the header in the Calendar. | |||
$kendo-calendar-header-border-width | Number | 1px | 1px |
Description
The border width of the header in the Calendar. | |||
$kendo-calendar-header-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the header in the Calendar. | |||
$kendo-calendar-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the header in the Calendar. | |||
$kendo-calendar-header-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the header in the Calendar. | |||
$kendo-calendar-header-gradient | Null | $kendo-component-header-gradient | null |
Description
The gradient of the header in the Calendar. | |||
$kendo-calendar-header-shadow | String | none | none |
Description
The box shadow of the header in the Calendar. | |||
$kendo-calendar-nav-gap | Null | null | null |
Description
The gap between the items in the navigation of the Calendar. | |||
$kendo-calendar-footer-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the footer in the Calendar. | |||
$kendo-calendar-footer-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the footer in the Calendar. | |||
$kendo-calendar-cell-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the cells in the Calendar. | |||
$kendo-calendar-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the cells in the Calendar. | |||
$kendo-calendar-cell-line-height | String | $kendo-calendar-line-height | var(--kendo-line-height, normal) |
Description
The line height of the cells in the Calendar. | |||
$kendo-calendar-cell-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the cells in the Calendar. | |||
$kendo-calendar-header-cell-padding-x | Null | null | null |
Description
The horizontal padding of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-padding-y | Null | null | null |
Description
The vertical padding of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-width | Number | $kendo-calendar-cell-size | 38px |
Description
The width of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-height | Number | $kendo-calendar-cell-size | 38px |
Description
The height of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-line-height | Number | 2 | 2 |
Description
The line height of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-bg | Null | null | null |
Description
The background color of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the header cells in the Calendar. | |||
$kendo-calendar-header-cell-opacity | Null | null | null |
Description
The opacity of the header cells in the Calendar. | |||
$kendo-calendar-caption-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the caption in the Calendar. | |||
$kendo-calendar-caption-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the caption in the Calendar. | |||
$kendo-calendar-caption-height | Number | $kendo-calendar-cell-size | 38px |
Description
The height of the caption in the Calendar. | |||
$kendo-calendar-caption-font-size | Null | null | null |
Description
The font size of the caption in the Calendar. | |||
$kendo-calendar-caption-line-height | Null | null | null |
Description
The line height of the caption in the Calendar. | |||
$kendo-calendar-caption-font-weight | String | bold | bold |
Description
The font weight of the caption in the Calendar. | |||
$kendo-calendar-week-number-font-size | Number | $kendo-font-size-sm | 0.875rem |
Description
The font size of the week number cells in the Calendar. | |||
$kendo-calendar-view-width | Number | ($kendo-calendar-cell-size * 8) | 304px |
Description
The width of the Calendar view. | |||
$kendo-calendar-view-height | Number | ($kendo-calendar-cell-size * 7) | 266px |
Description
The height of the Calendar view. | |||
$kendo-calendar-view-gap | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The gap between the items in the Calendar view. | |||
$kendo-calendar-weekend-bg | Null | null | null |
Description
The background color of the weekend cells in the Calendar. | |||
$kendo-calendar-weekend-text | Null | null | null |
Description
The text color of the weekend cells in the Calendar. | |||
$kendo-calendar-today-style | String | box | box |
Description
The style of the current day in the Calendar. | |||
$kendo-calendar-today-color | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The color of the current day in the Calendar. | |||
$kendo-calendar-week-number-bg | Null | null | null |
Description
The background color of the week number cells in the Calendar. | |||
$kendo-calendar-week-number-text | String | $kendo-calendar-header-cell-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the week number cells in the Calendar. | |||
$kendo-calendar-other-month-bg | Null | null | null |
Description
The background color of the preceding/subsequent month cells in the Calendar. | |||
$kendo-calendar-other-month-text | String | $kendo-calendar-header-cell-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the preceding/subsequent month cells in the Calendar. | |||
$kendo-calendar-cell-bg | Null | null | null |
Description
The background color of the cells in the Calendar. | |||
$kendo-calendar-cell-text | Null | null | null |
Description
The text color of the cells in the Calendar. | |||
$kendo-calendar-cell-border | Null | null | null |
Description
The border color of the cells in the Calendar. | |||
$kendo-calendar-cell-gradient | Null | null | null |
Description
The gradient of the cells in the Calendar. | |||
$kendo-calendar-cell-hover-bg | String | $kendo-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of the hovered cells in the Calendar. | |||
$kendo-calendar-cell-hover-text | String | $kendo-hover-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the hovered cells in the Calendar. | |||
$kendo-calendar-cell-hover-border | String | $kendo-hover-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the hovered cells in the Calendar. | |||
$kendo-calendar-cell-hover-gradient | Null | null | null |
Description
The gradient of the hovered cells in the Calendar. | |||
$kendo-calendar-cell-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected cells in the Calendar. | |||
$kendo-calendar-cell-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected cells in the Calendar. | |||
$kendo-calendar-cell-selected-border | String | $kendo-selected-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the selected cells in the Calendar. | |||
$kendo-calendar-cell-selected-gradient | Null | null | null |
Description
The gradient of the selected cells in the Calendar. | |||
$kendo-calendar-cell-selected-hover-bg | String | $kendo-selected-hover-bg | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the selected and hovered cells in the Calendar. | |||
$kendo-calendar-cell-selected-hover-text | String | $kendo-selected-hover-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected and hovered cells in the Calendar. | |||
$kendo-calendar-cell-selected-hover-border | String | $kendo-selected-hover-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the selected and hovered cells in the Calendar. | |||
$kendo-calendar-cell-selected-hover-gradient | Null | null | null |
Description
The gradient of the selected and hovered cells in the Calendar. | |||
$kendo-calendar-cell-focus-shadow | List | inset $kendo-button-focus-shadow | inset (0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)) |
Description
The shadow of the focused cells in the Calendar. | |||
$kendo-calendar-cell-selected-focus-shadow | List | inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary-active ) 50%, transparent), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) | inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-primary-active, #0a58ca) 50%, transparent) |
Description
The shadow of the selected and focused cells in the Calendar. | |||
$kendo-calendar-navigation-width | Number | 5em | 5em |
Description
The width of the Calendar navigation. | |||
$kendo-calendar-navigation-item-height | Number | 2em | 2em |
Description
The height of the items in the Calendar navigation. | |||
$kendo-calendar-navigation-bg | String | $kendo-calendar-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Calendar navigation. | |||
$kendo-calendar-navigation-text | String | $kendo-calendar-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Calendar navigation. | |||
$kendo-calendar-navigation-border | String | $kendo-calendar-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Calendar navigation. | |||
$kendo-calendar-navigation-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
Description
The text color of the hovered items in the Calendar navigation. | |||
$kendo-infinite-calendar-header-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the header in the Infinite Calendar. | |||
$kendo-infinite-calendar-header-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the header in the Infinite Calendar. | |||
$kendo-infinite-calendar-view-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Calendar view in the Infinite Calendar. | |||
$kendo-infinite-calendar-view-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the Calendar view in the Infinite Calendar. | |||
$kendo-infinite-calendar-view-height | Number | ( $kendo-calendar-cell-size * 9 ) | 342px |
Description
The height of the Calendar view in the Infinite Calendar. | |||
$kendo-calendar-range-cell-border-radius | String | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.5rem) |
Description
The border radius of the range cells in the Multiview Calendar. | |||
$kendo-calendar-sm-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the small Calendar. | |||
$kendo-calendar-sm-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the small Calendar. | |||
$kendo-calendar-sm-cell-size | Number | 34px | 34px |
Description
The size of the cells in the small Calendar. | |||
$kendo-calendar-sm-cell-padding-x | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The horizontal padding of the cells in the small Calendar. | |||
$kendo-calendar-sm-cell-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the cells in the small Calendar. | |||
$kendo-calendar-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Calendar. | |||
$kendo-calendar-md-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the medium Calendar. | |||
$kendo-calendar-md-cell-size | Number | 38px | 38px |
Description
The size of the cells in the medium Calendar. | |||
$kendo-calendar-md-cell-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the cells in the medium Calendar. | |||
$kendo-calendar-md-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the cells in the medium Calendar. | |||
$kendo-calendar-lg-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the large Calendar. | |||
$kendo-calendar-lg-line-height | String | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) |
Description
The line height of the large Calendar. | |||
$kendo-calendar-lg-cell-size | Number | 42px | 42px |
Description
The size of the cells in the large Calendar. | |||
$kendo-calendar-lg-cell-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the cells in the large Calendar. | |||
$kendo-calendar-lg-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the cells in the large Calendar. | |||
$kendo-calendar-sizes | Map | (
sm: (
font-size: $kendo-calendar-sm-font-size,
line-height: $kendo-calendar-sm-line-height,
cell-size: $kendo-calendar-sm-cell-size,
cell-padding-x: $kendo-calendar-sm-cell-padding-y,
cell-padding-y: $kendo-calendar-sm-cell-padding-x
),
md: (
font-size: $kendo-calendar-md-font-size,
line-height: $kendo-calendar-md-line-height,
cell-size: $kendo-calendar-md-cell-size,
cell-padding-x: $kendo-calendar-md-cell-padding-y,
cell-padding-y: $kendo-calendar-md-cell-padding-x
),
lg: (
font-size: $kendo-calendar-lg-font-size,
line-height: $kendo-calendar-lg-line-height,
cell-size: $kendo-calendar-lg-cell-size,
cell-padding-x: $kendo-calendar-lg-cell-padding-y,
cell-padding-y: $kendo-calendar-lg-cell-padding-x
)
) | (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 34px, cell-padding-x: var(--kendo-spacing-0\.5, 0.125rem), cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 38px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), cell-size: 42px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem))) |
Description
The sizes Map of the Calendar. |
Captcha
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-captcha-spacer | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacer of the Captcha. | |||
$kendo-captcha-width | Number | 335px | 335px |
Description
The width of the Captcha. | |||
$kendo-captcha-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Captcha. | |||
$kendo-captcha-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Captcha. | |||
$kendo-captcha-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Captcha. | |||
$kendo-captcha-gap | String | $kendo-captcha-spacer | var(--kendo-spacing-2, 0.5rem) |
Description
The gap of the Captcha. | |||
$kendo-captcha-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Captcha. | |||
$kendo-captcha-text | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The text color of the Captcha. | |||
$kendo-captcha-border | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The border color of the Captcha. | |||
$kendo-captcha-image-wrap-gap | String | $kendo-captcha-spacer | var(--kendo-spacing-2, 0.5rem) |
Description
The gap of the Captcha image wrapper. | |||
$kendo-captcha-image-controls-gap | String | $kendo-captcha-spacer | var(--kendo-spacing-2, 0.5rem) |
Description
The gap of the Captcha image controls. | |||
$kendo-captcha-validation-message-margin-top | Calculation | calc( #{$kendo-captcha-spacer} / 2 ) | calc(var(--kendo-spacing-2, 0.5rem) / 2) |
Description
The top margin of the Captcha validation message. | |||
$kendo-captcha-validation-message-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Captcha validation message. | |||
$kendo-captcha-validation-message-font-style | String | italic | italic |
Description
The font style of the Captcha validation message. |
Card
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-card-padding-x | Number | $card-spacer-x | 1rem |
Description
The horizontal padding of the Card. | |||
$kendo-card-padding-y | Number | $card-spacer-y | 1rem |
Description
The vertical padding of the Card. | |||
$kendo-card-border-width | Number | 1px | 1px |
Description
The width of the border around the Card. | |||
$kendo-card-border-radius | Number | $card-border-radius | 0.375rem |
Description
The border radius of the Card. | |||
$kendo-card-inner-border-radius | Calculation | calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) | calc(0.375rem - 1px) |
Description
The inner border radius of the Card. | |||
$kendo-card-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Card. | |||
$kendo-card-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Card. | |||
$kendo-card-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Card. | |||
$kendo-card-deck-gap | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the Cards in the Card deck. | |||
$kendo-card-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Card. | |||
$kendo-card-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Card. | |||
$kendo-card-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Card. | |||
$kendo-card-shadow | Null | null | null |
Description
The shadow of the Card. | |||
$kendo-card-focus-bg | Null | null | null |
Description
The background color of the focused Card. | |||
$kendo-card-focus-text | Null | null | null |
Description
The text color of the focused Card. | |||
$kendo-card-focus-border | Null | null | null |
Description
The border color of the focused Card. | |||
$kendo-card-focus-shadow | String | k-elevation(3) | var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1)) |
Description
The shadow of the focused Card. | |||
$kendo-card-header-padding-x | Number | $kendo-card-padding-x | 1rem |
Description
The horizontal padding of the Card header. | |||
$kendo-card-header-padding-y | Number | $kendo-card-padding-y | 1rem |
Description
The vertical padding of the Card header. | |||
$kendo-card-header-border-width | Number | $kendo-card-border-width | 1px |
Description
The bottom border width of the Card header. | |||
$kendo-card-header-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Card header. | |||
$kendo-card-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Card header. | |||
$kendo-card-header-border | String | $kendo-card-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Card header. | |||
$kendo-card-body-padding-x | Number | $kendo-card-padding-x | 1rem |
Description
The horizontal padding of the Card body. | |||
$kendo-card-body-padding-y | Number | $kendo-card-padding-x | 1rem |
Description
The vertical padding of the Card body. | |||
$kendo-card-footer-padding-x | Number | $kendo-card-padding-x | 1rem |
Description
The horizontal padding of the Card footer. | |||
$kendo-card-footer-padding-y | Number | $kendo-card-padding-y | 1rem |
Description
The vertical padding of the Card footer. | |||
$kendo-card-footer-border-width | Number | $kendo-card-border-width | 1px |
Description
The top border width of the Card footer. | |||
$kendo-card-footer-bg | String | $kendo-card-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Card footer. | |||
$kendo-card-footer-text | String | $kendo-card-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Card footer. | |||
$kendo-card-footer-border | String | $kendo-card-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Card footer. | |||
$kendo-card-title-margin-bottom | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The bottom margin of the Card title. | |||
$kendo-card-title-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the Card title. | |||
$kendo-card-title-font-family | Null | $headings-font-family | null |
Description
The font family of the Card title. | |||
$kendo-card-title-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the Card title. | |||
$kendo-card-title-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the Card title. | |||
$kendo-card-title-letter-spacing | Null | null | null |
Description
The letter spacing of the Card title. | |||
$kendo-card-subtitle-margin-bottom | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The bottom margin of the Card subtitle. | |||
$kendo-card-subtitle-font-size | Number | $kendo-h6-font-size | 1rem |
Description
The font size of the Card subtitle. | |||
$kendo-card-subtitle-font-family | Null | $headings-font-family | null |
Description
The font family of the Card subtitle. | |||
$kendo-card-subtitle-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the Card subtitle. | |||
$kendo-card-subtitle-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the Card subtitle. | |||
$kendo-card-subtitle-letter-spacing | Null | null | null |
Description
The letter spacing of the Card subtitle. | |||
$kendo-card-subtitle-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Card subtitle. | |||
$kendo-card-img-max-width | Number | 100px | 100px |
Description
The maximum width of the Card image. | |||
$kendo-card-avatar-size | Number | 45px | 45px |
Description
The size of the Avatar in the Card. | |||
$kendo-card-avatar-spacing | Number | $kendo-card-header-padding-x | 1rem |
Description
The spacing between the Avatar and the text in the Card. | |||
$kendo-card-actions-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Card actions. | |||
$kendo-card-actions-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Card actions. | |||
$kendo-card-actions-border-width | Number | 1px | 1px |
Description
The top border width of the Card actions. | |||
$kendo-card-actions-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the Card actions. | |||
$kendo-card-deck-scroll-button-radius | Number | 0px | 0px |
Description
The border radius of the scroll button in the Card deck. | |||
$kendo-card-deck-scroll-button-offset | Number | -$kendo-button-border-width | -1px |
Description
The border radius of the scroll button in the Card deck. | |||
$kendo-card-callout-width | Number | 1.3em | 1.3em |
Description
The width of the Card callout. | |||
$kendo-card-callout-height | Number | 1.3em | 1.3em |
Description
The height of the Card callout. |
Charts
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-series-a | String | if($kendo-enable-color-system, k-color( series-a ), $blue) | var(--kendo-color-series-a, #0c64e4) |
Description
The first base series color and its light and dark shades. | |||
$kendo-series-b | String | if($kendo-enable-color-system, k-color( series-b ), $purple) | var(--kendo-color-series-b, #6f42c1) |
Description
The second base series color and its light and dark shades. | |||
$kendo-series-c | String | if($kendo-enable-color-system, k-color( series-c ), $teal) | var(--kendo-color-series-c, #20c997) |
Description
The third base series color and its light and dark shades. | |||
$kendo-series-d | String | if($kendo-enable-color-system, k-color( series-d ), $green) | var(--kendo-color-series-d, #198754) |
Description
The fourth base series color and its light and dark shades. | |||
$kendo-series-e | String | if($kendo-enable-color-system, k-color( series-e ), $yellow) | var(--kendo-color-series-e, #dc3545) |
Description
The fifth base series color and its light and dark shades. | |||
$kendo-series-f | String | if($kendo-enable-color-system, k-color( series-f ), $red) | var(--kendo-color-series-f, #ffc107) |
Description
The sixth base series color and its light and dark shades. | |||
$kendo-series-1 | String | $kendo-series-a | var(--kendo-color-series-a, #0c64e4) |
Description
The series colors in order: base, light, dark, lighter, darker | |||
$kendo-chart-major-lines | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 8%, transparent) |
Description
The color of the Chart grid lines (major). | |||
$kendo-chart-minor-lines | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 4%, transparent) |
Description
The color of the Chart grid lines (minor). |
Chat
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-chat-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Chat. | |||
$kendo-chat-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the Chat. | |||
$kendo-chat-width | Number | 500px | 500px |
Description
The width of the Chat. | |||
$kendo-chat-height | Number | 600px | 600px |
Description
The height of the Chat. | |||
$kendo-chat-border-width | Number | 1px | 1px |
Description
The border width of the Chat. | |||
$kendo-chat-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Chat. | |||
$kendo-chat-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Chat. | |||
$kendo-chat-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Chat. | |||
$kendo-chat-item-spacing-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal spacing between the items of the Chat. | |||
$kendo-chat-item-spacing-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical spacing between the items of the Chat. | |||
$kendo-chat-message-list-padding-x | String | $kendo-chat-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Chat message list. | |||
$kendo-chat-message-list-padding-y | String | $kendo-chat-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the Chat message list. | |||
$kendo-chat-message-list-spacing | String | $kendo-chat-item-spacing-y | var(--kendo-spacing-4, 1rem) |
Description
The spacing of the Chat message list. | |||
$kendo-chat-timestamp-font-size | String | smaller | smaller |
Description
The font size of the Chat timestamp. | |||
$kendo-chat-timestamp-line-height | Null | null | null |
Description
The line height of the Chat timestamp. | |||
$kendo-chat-timestamp-transform | String | uppercase | uppercase |
Description
The text transform of the Chat timestamp. | |||
$kendo-chat-timestamp-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Chat timestamp. | |||
$kendo-chat-timestamp-bg | Null | null | null |
Description
The background color of the Chat timestamp. | |||
$kendo-chat-bubble-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Chat bubble message. | |||
$kendo-chat-bubble-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Chat bubble message. | |||
$kendo-chat-bubble-spacing | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The spacing of the Chat bubble message. | |||
$kendo-chat-bubble-line-height | Number | 1.25 | 1.25 |
Description
The line height of the Chat bubble message. | |||
$kendo-chat-bubble-border-radius | Number | 12px | 12px |
Description
The border radius of the Chat bubble message. | |||
$kendo-chat-bubble-border-radius-sm | Number | 2px | 2px |
Description
The border radius of the Chat small bubble message | |||
$kendo-chat-avatar-size | Number | 32px | 32px |
Description
The size of the Chat Avatar. | |||
$kendo-chat-avatar-spacing | String | $kendo-chat-item-spacing-x | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Chat Avatar. | |||
$kendo-chat-toolbar-padding-x | String | $kendo-toolbar-md-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Chat Toolbar. | |||
$kendo-chat-toolbar-padding-y | String | $kendo-toolbar-md-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Chat Toolbar. | |||
$kendo-chat-toolbar-spacing | String | $kendo-toolbar-md-spacing | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Chat Toolbar. | |||
$kendo-chat-toolbar-bg | String | $kendo-toolbar-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Chat Toolbar. | |||
$kendo-chat-toolbar-text | String | $kendo-toolbar-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Chat Toolbar. | |||
$kendo-chat-toolbar-border | String | inherit | inherit |
Description
The border color of the Chat Toolbar. | |||
$kendo-chat-quick-reply-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Chat quick reply. | |||
$kendo-chat-quick-reply-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Chat quick reply. | |||
$kendo-chat-quick-reply-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Chat quick reply. | |||
$kendo-chat-quick-reply-line-height | Number | $kendo-chat-bubble-line-height | 1.25 |
Description
The line height of the Chat quick reply. | |||
$kendo-chat-bg | String | $kendo-app-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Chat. | |||
$kendo-chat-text | String | $kendo-app-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Chat. | |||
$kendo-chat-border | String | $kendo-app-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Chat. | |||
$kendo-chat-bubble-bg | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The background color of the Chat bubble. | |||
$kendo-chat-bubble-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the Chat bubble. | |||
$kendo-chat-bubble-border | String | $kendo-chat-bubble-bg | var(--kendo-color-base, #dee2e6) |
Description
The border color of the Chat bubble. | |||
$kendo-chat-bubble-shadow | String | none | none |
Description
The box shadow of the Chat bubble. | |||
$kendo-chat-bubble-hover-shadow | String | none | none |
Description
The shadow of the hovered Chat bubble. | |||
$kendo-chat-bubble-selected-shadow | String | none | none |
Description
The shadow of the selected Chat bubble. | |||
$kendo-chat-alt-bubble-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-border | String | $kendo-chat-alt-bubble-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-shadow | String | none | none |
Description
The shadow of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-hover-shadow | String | none | none |
Description
The shadow of the hovered Chat alt bubble. | |||
$kendo-chat-alt-bubble-selected-shadow | String | none | none |
Description
The shadow of the selected Chat alt bubble. | |||
$kendo-chat-quick-reply-bg | Color | transparent | transparent |
Description
The background color of the Chat quick reply. | |||
$kendo-chat-quick-reply-text | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the Chat quick reply. | |||
$kendo-chat-quick-reply-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Chat quick reply. | |||
$kendo-chat-quick-reply-hover-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the hovered Chat quick reply. | |||
$kendo-chat-quick-reply-hover-text | String | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the hovered Chat quick reply. | |||
$kendo-chat-quick-reply-hover-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the hovered Chat quick reply. |
Checkbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-checkbox-border-width | Number | 1px | 1px |
Description
The border width of the CheckBox. | |||
$kendo-checkbox-sm-size | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The size of a small CheckBox. | |||
$kendo-checkbox-md-size | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The size of a medium CheckBox. | |||
$kendo-checkbox-lg-size | String | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) |
Description
The size of a large CheckBox. | |||
$kendo-checkbox-sm-glyph-size | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The glyph size of a small CheckBox. | |||
$kendo-checkbox-md-glyph-size | String | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) |
Description
The glyph size of a medium CheckBox. | |||
$kendo-checkbox-lg-glyph-size | String | k-spacing(4.5) | var(--kendo-spacing-4\.5, 1.125rem) |
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 | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of CheckBox. | |||
$kendo-checkbox-text | Null | null | null |
Description
The text color of CheckBox. | |||
$kendo-checkbox-border | String | if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of 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 | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the checked CheckBox. | |||
$kendo-checkbox-checked-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The color of the checked CheckBox. | |||
$kendo-checkbox-checked-border | String | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the checked CheckBox. | |||
$kendo-checkbox-indeterminate-bg | String | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the indeterminate CheckBox. | |||
$kendo-checkbox-indeterminate-text | String | $kendo-checkbox-checked-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the indeterminate CheckBox. | |||
$kendo-checkbox-indeterminate-border | String | $kendo-checkbox-checked-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the indeterminate CheckBox. | |||
$kendo-checkbox-focus-border | String | if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
Description
The border color of the focused CheckBox. | |||
$kendo-checkbox-focus-shadow | List | 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The box shadow of the focused CheckBox. | |||
$kendo-checkbox-focus-checked-border | String | $kendo-checkbox-checked-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the focused and checked CheckBox. | |||
$kendo-checkbox-focus-checked-shadow | List | $kendo-checkbox-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
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 | Null | null | null |
Description
The border color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-checked-bg | Null | null | null |
Description
The background color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-checked-text | Null | null | null |
Description
The text color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-checked-border | Null | null | null |
Description
The border color of the disabled and checked CheckBox. | |||
$kendo-checkbox-invalid-bg | Null | null | null |
Description
The background color of the invalid CheckBox. | |||
$kendo-checkbox-invalid-text | String | $kendo-invalid-text | var(--kendo-color-error, #dc3545) |
Description
The text color of the invalid CheckBox. | |||
$kendo-checkbox-invalid-border | String | $kendo-invalid-border | var(--kendo-color-error, #dc3545) |
Description
The border color of the 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 20 20'%3e%3cpath fill='none' stroke='var%28--kendo-color-on-primary, %23ffffff%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%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='var%28--kendo-color-on-primary, %23ffffff%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") |
Description
The image for a indeterminate CheckBox indicator. | |||
$kendo-checkbox-label-margin-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal margin of the CheckBox inside a label. | |||
$kendo-checkbox-list-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the items in a horizontal CheckBox list. | |||
$kendo-checkbox-list-item-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the CheckBox list items. | |||
$kendo-checkbox-list-item-padding-y | String | $kendo-list-md-item-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the CheckBox list items | |||
$kendo-checkbox-ripple-bg | String | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the CheckBox' ripple. | |||
$kendo-checkbox-ripple-opacity | Number | .25 | 0.25 |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The spacing between the text and the icons of the Chip. | |||
$kendo-chip-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Chip. | |||
$kendo-chip-sm-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the small Chip. | |||
$kendo-chip-md-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the medium Chip. | |||
$kendo-chip-lg-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the large Chip. | |||
$kendo-chip-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the Chip. | |||
$kendo-chip-sm-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the small Chip. | |||
$kendo-chip-md-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the medium Chip. | |||
$kendo-chip-lg-padding-y | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the large Chip. | |||
$kendo-chip-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Chip. | |||
$kendo-chip-sm-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small Chip. | |||
$kendo-chip-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Chip. | |||
$kendo-chip-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large Chip. | |||
$kendo-chip-line-height | Number | 1.25 | 1.25 |
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.25 |
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.25 |
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.25 |
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} + calc( #{$kendo-chip-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} ) | calc(1.25em + var(--kendo-spacing-1, 0.25rem) * 2 + 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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size-sm, inherit), line-height: 1.25), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: 1.25), lg: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: 1.25)) |
Description
The map with the sizes of the Chip. | |||
$kendo-chip-base-bg | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The base background color 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": var(--kendo-color-base, #dee2e6), "error": var(--kendo-color-error, #dc3545), "info": var(--kendo-color-info, #0dcaf0), "warning": var(--kendo-color-warning, #ffc107), "success": var(--kendo-color-success, #198754)) |
Description
The theme colors map for the Chip. | |||
$kendo-chip-solid-bg | String | $kendo-chip-base-bg | var(--kendo-color-base, #dee2e6) |
Description
The base background color of the solid Chip. | |||
$kendo-chip-solid-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
he base text color of the solid Chip. | |||
$kendo-chip-solid-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The base border color of the solid Chip. | |||
$kendo-chip-solid-shadow | List | 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) | 0 0 0 2px rgba(var(--kendo-color-base, #dee2e6), 0.16) |
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 | Null | null | null |
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 | String | $kendo-button-hover-bg | var(--kendo-color-base-hover, #ced4da) |
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 | String | $kendo-button-active-bg | var(--kendo-color-base-active, #bdc4cb) |
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 | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The base background color of the outline Chip. | |||
$kendo-chip-outline-text | String | if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) | var(--kendo-color-base-on-surface, #212529) |
Description
The base text color of the outline Chip. | |||
$kendo-chip-outline-border | String | $kendo-chip-outline-text | var(--kendo-color-base-on-surface, #212529) |
Description
The base border color of the outline Chip. | |||
$kendo-chip-outline-shadow | List | 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) | 0 0 0 2px rgba(var(--kendo-color-base, #dee2e6), 0.16) |
Description
The base shadow of the outline Chip. | |||
$kendo-chip-outline-hover-bg | String | $kendo-chip-outline-text | var(--kendo-color-base-on-surface, #212529) |
Description
The base background color of the hovered outline Chip. | |||
$kendo-chip-outline-hover-text | String | if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The base text color of the hovered outline Chip. | |||
$kendo-chip-outline-selected-bg | String | $kendo-chip-outline-hover-bg | var(--kendo-color-base-on-surface, #212529) |
Description
The base background color of the selected outline Chip. | |||
$kendo-chip-outline-selected-text | String | $kendo-chip-outline-hover-text | var(--kendo-color-base-subtle, #e9ecef) |
Description
The base text color of the selected outline Chip. | |||
$kendo-chip-list-sizes | Map | (
sm: k-spacing(1),
md: k-spacing(1),
lg: k-spacing(1)
) | (sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1, 0.25rem), lg: var(--kendo-spacing-1, 0.25rem)) |
Description
The sizes of the Chip list. |
Cologradient
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-gradient-spacer | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacer of the ColorGradient. | |||
$kendo-color-gradient-width | Number | 328px | 328px |
Description
The width of the ColorGradient. | |||
$kendo-color-gradient-border-width | Number | 1px | 1px |
$kendo-color-gradient-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the ColorGradient. | |||
$kendo-color-gradient-padding-y | String | $kendo-color-gradient-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the ColorGradient. | |||
$kendo-color-gradient-padding-x | String | $kendo-color-gradient-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the ColorGradient. | |||
$kendo-color-gradient-gap | String | $kendo-color-gradient-spacer | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the sections of the ColorGradient. | |||
$kendo-color-gradient-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ColorGradient. | |||
$kendo-color-gradient-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the ColorGradient. | |||
$kendo-color-gradient-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the ColorGradient. | |||
$kendo-color-gradient-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the ColorGradient. | |||
$kendo-color-gradient-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the ColorGradient. | |||
$kendo-color-gradient-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the ColorGradient. | |||
$kendo-color-gradient-focus-border | String | $kendo-hover-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the focused ColorGradient. | |||
$kendo-color-gradient-focus-shadow | Null | null | null |
Description
The box shadow of the focused ColorGradient. | |||
$kendo-color-gradient-canvas-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the ColorGradient canvas. | |||
$kendo-color-gradient-canvas-gap | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
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( $kendo-color-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 | 56px | 56px |
Description
The width of the ColorGradient input. | |||
$kendo-color-gradient-input-gap | Calculation | calc( #{$kendo-color-gradient-spacer} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The spacing between the ColorGradient inputs. | |||
$kendo-color-gradient-input-label-gap | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The spacing between the ColorGradient inputs and their labels. | |||
$kendo-color-gradient-input-label-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the ColorGradient input labels. | |||
$kendo-color-gradient-contrast-ratio-font-weight | String | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
Description
The font weight of the ColorGradient contrast ratio text. | |||
$kendo-color-gradient-contrast-spacer | Calculation | calc( #{$kendo-color-gradient-spacer} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The spacing between the items in the ColorGradient contrast tool. |
Color System
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-colors | Map | $_default-colors | (app-surface: #ffffff, on-app-surface: #212529, subtle: #596169, surface: #f8f9fa, surface-alt: #ffffff, border: rgba(33, 37, 41, 0.13), border-alt: rgba(33, 37, 41, 0.2), base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: rgba(33, 37, 41, 0.34), base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0c64e4, primary-active: #0a58ca, primary-emphasis: rgba(13, 110, 253, 0.4), primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #596169, secondary-active: #495057, secondary-emphasis: rgba(108, 117, 125, 0.4), secondary-on-subtle: #2B2F32, on-secondary: #ffffff, secondary-on-surface: #6c757d, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: rgba(111, 66, 193, 0.4), tertiary-on-subtle: #432874, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #b7eefa, info-subtle-active: #9eeaf9, info: #0dcaf0, info-hover: #3dd5f3, info-active: #6edff6, info-emphasis: rgba(13, 202, 240, 0.4), info-on-subtle: #055160, on-info: #000000, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #a3cfbb, success: #198754, success-hover: #146C43, success-active: #0F5132, success-emphasis: rgba(25, 135, 84, 0.4), success-on-subtle: #0A3622, on-success: #ffffff, success-on-surface: #198754, warning-subtle: #fff3cd, warning-subtle-hover: #ffecb5, warning-subtle-active: #ffe69c, warning: #ffc107, warning-hover: #ffcd39, warning-active: #ffda6a, warning-emphasis: rgba(255, 193, 7, 0.4), warning-on-subtle: #664d03, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: rgba(220, 53, 69, 0.4), error-on-subtle: #58151c, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #ffffff, light-subtle-hover: #f8f9fa, light-subtle-active: #e9ecef, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: rgba(33, 37, 41, 0.1), light-on-subtle: #495057, on-light: #000000, light-on-surface: #f8f9fa, dark-subtle: #495057, dark-subtle-hover: #596169, dark-subtle-active: #6c757d, dark: #212529, dark-hover: #343a40, dark-active: #495057, dark-emphasis: rgba(33, 37, 41, 0.4), dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #212529, inverse-subtle: #495057, inverse-subtle-hover: #596169, inverse-subtle-active: #6c757d, inverse: #212529, inverse-hover: #343a40, inverse-active: #495057, inverse-emphasis: rgba(33, 37, 41, 0.4), inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #212529, series-a: #0c64e4, series-a-bold: #084298, series-a-bolder: #052c65, series-a-subtle: #3d8bfd, series-a-subtler: #86b6fe, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #8c68cd, series-b-subtler: #b9a3e1, series-c: #20c997, series-c-bold: #13795b, series-c-bolder: #0d503c, series-c-subtle: #79dfc1, series-c-subtler: #c1f0e2, series-d: #198754, series-d-bold: #0F5132, series-d-bolder: #0A3622, series-d-subtle: #479F76, series-d-subtler: #8cc3aa, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #e35d6a, series-e-subtler: #f1aeb5, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffcd39, series-f-subtler: #ffe083) |
Description
The global default Colors map. | |||
$kendo-color-primary | Color | $primary | var(--kendo-color-primary, #0d6efd) |
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 ) | var(--kendo-color-on-primary, #ffffff) |
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 | $secondary | var(--kendo-color-secondary, #6c757d) |
Description
The secondary color of the theme. | |||
$kendo-color-secondary-contrast | Color | k-contrast-color( $kendo-color-secondary ) | 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 | $purple | var(--kendo-color-tertiary, #6f42c1) |
Description
The tertiary color of the theme. | |||
$kendo-color-tertiary-contrast | Color | k-contrast-color( $kendo-color-tertiary ) | 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 | $info | var(--kendo-color-info, #0dcaf0) |
Description
The color for informational messages and states. | |||
$kendo-color-success | Color | $success | var(--kendo-color-success, #198754) |
Description
The color for success messages and states. | |||
$kendo-color-warning | Color | $warning | var(--kendo-color-warning, #ffc107) |
Description
The color for warning messages and states. | |||
$kendo-color-error | Color | $danger | var(--kendo-color-error, #dc3545) |
Description
The color for error messages and states. | |||
$kendo-color-dark | Color | $dark | var(--kendo-color-dark, #212529) |
Description
The dark color of the theme. | |||
$kendo-color-light | Color | $light | var(--kendo-color-light, #f8f9fa) |
Description
The light color of the theme. | |||
$kendo-color-inverse | String | if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) | var(--kendo-color-dark, #212529) |
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. | |||
$kendo-color-rgba-transparent | Color | rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0) |
Description
The color transparent. Note: you cannot change this value. | |||
$kendo-gradient-transparent-to-black | Gradient | rgba(black, 0), black | rgba(0, 0, 0, 0), black |
Description
A gradient that goes from transparent to black. Note: you cannot change this value. | |||
$kendo-gradient-transparent-to-white | Gradient | rgba(white, 0), white | rgba(255, 255, 255, 0), white |
Description
A gradient that goes from transparent to white. Note: you cannot change this value. | |||
$kendo-gradient-black-to-transparent | Gradient | black, rgba(black, 0) | black, rgba(0, 0, 0, 0) |
Description
A gradient that goes from black to transparent. Note: you cannot change this value. | |||
$kendo-gradient-white-to-transparent | Gradient | white, rgba(white, 0) | white, rgba(255, 255, 255, 0) |
Description
A gradient that goes from white to transparent. Note: you cannot change this value. | |||
$kendo-gradient-rainbow | Gradient | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 |
Description
A gradient that cycles through the colors of the rainbow. Note: you cannot change this value. |
Coloreditor
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-editor-spacer | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacer of the ColorEditor. | |||
$kendo-color-editor-min-width | Number | 328px | 328px |
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 | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the ColorEditor. | |||
$kendo-color-editor-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ColorEditor. | |||
$kendo-color-editor-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the ColorEditor. | |||
$kendo-color-editor-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the ColorEditor. | |||
$kendo-color-editor-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the ColorEditor. | |||
$kendo-color-editor-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the ColorEditor. | |||
$kendo-color-editor-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the ColorEditor. | |||
$kendo-color-editor-focus-border | String | $kendo-hover-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the focused ColorEditor. | |||
$kendo-color-editor-focus-shadow | Null | null | null |
Description
The box shadow of the focused ColorEditor. | |||
$kendo-color-editor-header-padding-y | String | $kendo-color-editor-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the ColorEditor header. | |||
$kendo-color-editor-header-padding-x | String | $kendo-color-editor-header-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the ColorEditor header. | |||
$kendo-color-editor-header-actions-gap | Calculation | calc( #{$kendo-color-editor-spacer} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The spacing between the colors in the ColorEditor preview. | |||
$kendo-color-editor-views-padding-y | String | $kendo-color-editor-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the ColorEditor views container. | |||
$kendo-color-editor-views-padding-x | String | $kendo-color-editor-views-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the ColorEditor views container. | |||
$kendo-color-editor-views-gap | String | $kendo-color-editor-spacer | var(--kendo-spacing-4, 1rem) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ColorPalette. | |||
$kendo-color-palette-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
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 | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The width of the ColorPalette tile. | |||
$kendo-color-palette-tile-height | String | $kendo-color-palette-tile-width | var(--kendo-spacing-6, 1.5rem) |
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 | String | $kendo-body-bg | var(--kendo-color-surface-alt, #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 | String | $kendo-body-text | var(--kendo-color-on-app-surface, #212529) |
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 | String | if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | $kendo-actions-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Dialog action buttons. | |||
$kendo-dialog-buttongroup-padding-y | String | $kendo-actions-padding-y | var(--kendo-spacing-2, 0.5rem) |
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 | String | $kendo-actions-button-spacing | var(--kendo-spacing-2, 0.5rem) |
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": var(--kendo-color-primary, #0d6efd), "light": var(--kendo-color-light, #f8f9fa), "dark": var(--kendo-color-dark, #212529)) |
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 | String | $kendo-base-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The color of the border around the DockManager component. | |||
$kendo-dock-manager-pane-header-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
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 | String | $kendo-component-bg | var(--kendo-color-surface-alt, #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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-line-height | String | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) |
Description
The line height of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-content-padding-x | String | $kendo-dock-manager-pane-header-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the pane content in the DockManager component. | |||
$kendo-dock-manager-pane-content-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the pane content in the DockManager component. | |||
$kendo-dock-manager-tabbed-pane-padding-y | String | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) |
Description
The horizontal padding of the tabbed pane in the DockManager component. | |||
$kendo-dock-manager-tabbed-pane-padding-x | String | $kendo-dock-manager-pane-content-padding-y | var(--kendo-spacing-2, 0.5rem) |
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 | String | $kendo-component-bg | var(--kendo-color-surface-alt, #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 | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The padding of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-text | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
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 | String | $kendo-dock-indicator-text | var(--kendo-color-primary, #0d6efd) |
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 | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
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 | String | k-border-radius(sm) | var(--kendo-border-radius-sm, 0.25rem) |
Description
The border radius of the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 16%, transparent) |
Description
The background color of the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the dropping area in the DockManager component. |
Drawer
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-drawer-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Drawer. | |||
$kendo-drawer-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Drawer. | |||
$kendo-drawer-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Drawer. | |||
$kendo-drawer-border-width | Number | 1px | 1px |
Description
The border width of the Drawer. | |||
$kendo-drawer-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Drawer. | |||
$kendo-drawer-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Drawer. | |||
$kendo-drawer-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Drawer. | |||
$kendo-drawer-content-padding-x | Null | null | null |
Description
The horizontal padding of the Drawer content. | |||
$kendo-drawer-content-padding-y | Null | null | null |
Description
The vertical padding of the Drawer content. | |||
$kendo-drawer-scrollbar-width | Number | 7px | 7px |
Description
The width of the Drawer scrollbar. | |||
$kendo-drawer-scrollbar-color | Color | rgba( 156, 156, 156, .7 ) | rgba(156, 156, 156, 0.7) |
Description
The color of the Drawer scrollbar track. | |||
$kendo-drawer-scrollbar-bg | Color | #dedede | #dedede |
Description
The background color of the Drawer scrollbar thumb. | |||
$kendo-drawer-scrollbar-radius | Number | 20px | 20px |
Description
The border radius of the Drawer scrollbar. | |||
$kendo-drawer-scrollbar-hover-color | Color | rgba( 156, 156, 156, 1 ) | rgb(156, 156, 156) |
Description
The hover color of the Drawer scrollbar track. | |||
$kendo-drawer-item-padding-x | String | $kendo-padding-md-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Drawer item. | |||
$kendo-drawer-item-padding-y | String | $kendo-padding-md-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Drawer item. | |||
$kendo-drawer-item-font-size | Number | 16px | 16px |
Description
The font size of the Drawer item. | |||
$kendo-drawer-item-line-height | Number | $kendo-line-height-lg | 2 |
Description
The line height of the Drawer item. | |||
$kendo-drawer-item-level-padding-x | String | $kendo-drawer-item-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Drawer item in each level. | |||
$kendo-drawer-item-level-count | Number | 5 | 5 |
Description
The count of the Drawer item levels. | |||
$kendo-drawer-icon-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the Drawer icon. | |||
$kendo-drawer-icon-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Drawer icon. | |||
$kendo-drawer-mini-initial-width | Calculation | calc( 2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size} ) | calc(2 * var(--kendo-spacing-4, 1rem) + 16px) |
Description
The initial width of the mini Drawer. | |||
$kendo-drawer-hover-bg | String | $kendo-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of the hovered Drawer item. | |||
$kendo-drawer-hover-text | String | $kendo-hover-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the hovered Drawer item. | |||
$kendo-drawer-focus-bg | String | $kendo-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of the focused Drawer item. | |||
$kendo-drawer-focus-shadow | List | inset 0 0 0 2px rgba( black, .15 ) | inset 0 0 0 2px rgba(0, 0, 0, 0.15) |
Description
The box shadow of the focused Drawer item. | |||
$kendo-drawer-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected Drawer item. | |||
$kendo-drawer-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected Drawer item. | |||
$kendo-drawer-selected-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the selected and hovered Drawer item. | |||
$kendo-drawer-selected-hover-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected and hovered Drawer item. |
Dropdowntree
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dropdowntree-popup-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the DropdownTree popup | |||
$kendo-dropdowntree-popup-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the DropdownTree popup |
Dropzone
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dropzone-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the DropZone. | |||
$kendo-dropzone-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the DropZone. | |||
$kendo-dropzone-border-width | Number | 1px | 1px |
Description
The border width of the DropZone. | |||
$kendo-dropzone-min-height | Number | 220px | 220px |
Description
The minimum height of the DropZone. | |||
$kendo-dropzone-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the DropZone. | |||
$kendo-dropzone-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the DropZone. | |||
$kendo-dropzone-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the DropZone. | |||
$kendo-dropzone-bg | String | if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )) | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the DropZone. | |||
$kendo-dropzone-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the DropZone. | |||
$kendo-dropzone-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the DropZone. | |||
$kendo-dropzone-icon-spacing | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The spacing below the DropZone icon. | |||
$kendo-dropzone-icon-text | String | if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 )) | var(--kendo-color-subtle, #596169) |
Description
The text color of the DropZone icon. | |||
$kendo-dropzone-icon-hover-text | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the hovered DropZone icon. | |||
$kendo-dropzone-hint-font-size | Null | null | null |
Description
The font size of the DropZone hint. | |||
$kendo-dropzone-hint-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing below the DropZone hint. | |||
$kendo-dropzone-hint-text | Null | null | null |
Description
The text color of the DropZone hint. | |||
$kendo-dropzone-note-font-size | String | var( --kendo-font-size-xs, inherit ) | var(--kendo-font-size-xs, inherit) |
Description
The font size of the DropZone note. | |||
$kendo-dropzone-note-spacing | Null | null | null |
Description
The spacing below the DropZone note. | |||
$kendo-dropzone-note-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the DropZone note. |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Еditor. | |||
$kendo-editor-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Еditor. | |||
$kendo-editor-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Еditor. | |||
$kendo-editor-placeholder-text | String | $kendo-input-placeholder-text | var(--kendo-color-subtle, #596169) |
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 | String | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) |
Description
The selected text color of the Editor. | |||
$kendo-editor-selected-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The selected background color of the Editor. | |||
$kendo-editor-highlighted-bg | String | if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) | var(--kendo-color-primary-subtle, #cfe2ff) |
Description
The highlighted background color of the Editor. | |||
$kendo-editor-export-tool-icon-margin-x | Number | .25em | 0.25em |
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 2px rgba(0, 0, 0, 0.038),)), 2: ((0px 2px 7px rgba(0, 0, 0, 0.075),)), 3: ((0px 4px 10px rgba(0, 0, 0, 0.1),)), 4: ((0px 6px 13px rgba(0, 0, 0, 0.125),)), 5: ((0px 8px 16px 0px rgba(0, 0, 0, 0.15),)), 6: ((0px 11px 24px 0px rgba(0, 0, 0, 0.159),)), 7: ((0px 14px 36px 0px rgba(0, 0, 0, 0.168),)), 8: ((0px 16px 48px 0px rgba(0, 0, 0, 0.176),)), 9: ((0px 18px 60px 0px rgba(0, 0, 0, 0.185),))) |
Description
The global default Elevation map. |
Expander
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-expander-spacing-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ExpansionPanel. | |||
$kendo-expander-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the ExpansionPanel. | |||
$kendo-expander-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The hine height of the ExpansionPanel. | |||
$kendo-expander-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the ExpansionPanel. | |||
$kendo-expander-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the ExpansionPanel. | |||
$kendo-expander-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the ExpansionPanel. | |||
$kendo-expander-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The box shadow of the focused ExpansionPanel. | |||
$kendo-expander-header-padding-x | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the ExpansionPanel header. | |||
$kendo-expander-header-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the ExpansionPanel header. | |||
$kendo-expander-header-text | String | $kendo-expander-text | var(--kendo-color-on-app-surface, #212529) |
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 | Null | null | null |
Description
The background color of the focused ExpansionPanel header. | |||
$kendo-expander-header-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The box shadow of the focused ExpansionPanel header. | |||
$kendo-expander-title-text | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the ExpansionPanel title. | |||
$kendo-expander-header-sub-title-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the ExpansionPanel sub-title. | |||
$kendo-expander-indicator-margin-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal margin of the ExpansionPanel indicator. | |||
$kendo-expander-content-padding-x | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the ExpansionPanel content. | |||
$kendo-expander-content-padding-y | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The vertical padding of the ExpansionPanel content. |
Filemanager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-file-manager-spacer | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The space between the FileManager items. | |||
$kendo-file-manager-border-width | Number | 1px | 1px |
Description
The border width of the FileManager. | |||
$kendo-file-manager-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the FileManager. | |||
$kendo-file-manager-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the FileManager. | |||
$kendo-file-manager-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the FileManager. | |||
$kendo-file-manager-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the FileManager. | |||
$kendo-file-manager-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the FileManager. | |||
$kendo-file-manager-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the FileManager. | |||
$kendo-file-manager-toolbar-border-width | Number | $kendo-file-manager-border-width | 1px |
Description
The border width of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-bg | Null | null | null |
Description
The background color of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-text | Null | null | null |
Description
The text color of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-border | Null | null | null |
Description
The border color of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-gradient | Null | null | null |
Description
The gradient of the FileManager Toolbar. | |||
$kendo-file-manager-navigation-padding-x | String | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the FileManager Navigation. | |||
$kendo-file-manager-navigation-padding-y | String | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FileManager Navigation. | |||
$kendo-file-manager-navigation-width | Number | 20% | 20% |
Description
The width of the FileManager Navigation. | |||
$kendo-file-manager-navigation-border-width | Number | $kendo-file-manager-border-width | 1px |
Description
The border width of the FileManager Navigation. | |||
$kendo-file-manager-navigation-bg | Null | null | null |
Description
The background color of the FileManager Navigation. | |||
$kendo-file-manager-navigation-text | Null | null | null |
Description
The text color of the FileManager Navigation. | |||
$kendo-file-manager-navigation-border | Null | null | null |
Description
The border color of the FileManager Navigation. | |||
$kendo-file-manager-breadcrumb-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-border-width | Number | $kendo-file-manager-border-width | 1px |
Description
The border width of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-bg | String | $kendo-toolbar-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-text | Null | null | null |
Description
The text color of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-border | Null | null | null |
Description
The border color of the FileManager Breadcrumb. | |||
$kendo-file-manager-listview-bg | Null | null | null |
Description
The background color of the FileManager ListView. | |||
$kendo-file-manager-listview-text | Null | null | null |
Description
The text color of the FileManager ListView. | |||
$kendo-file-manager-listview-border | Null | null | null |
Description
The border color of the FileManager ListView. | |||
$kendo-file-manager-listview-item-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-width | Number | 120px | 120px |
Description
The width of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-height | Number | 120px | 120px |
Description
The height of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-bg | Null | null | null |
Description
The background color of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-text | Null | null | null |
Description
The text color of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-border | Null | null | null |
Description
The border color of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-icon-bg | Null | null | null |
Description
The background color of the FileManager ListView item icon. | |||
$kendo-file-manager-listview-item-icon-text | String | if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) | var(--kendo-color-subtle, #596169) |
Description
The text color of the FileManager ListView item icon. | |||
$kendo-file-manager-listview-item-icon-border | Null | null | null |
Description
The border color of the FileManager ListView item icon. | |||
$kendo-file-manager-listview-item-icon-selected-bg | Null | null | null |
Description
Background color of the FileManager selected ListView item icon. | |||
$kendo-file-manager-listview-item-icon-selected-text | String | inherit | inherit |
Description
Text color of the FileManager selected ListView item icon. | |||
$kendo-file-manager-listview-item-icon-selected-border | Null | null | null |
Description
Border color of the FileManager selected ListView item icon. | |||
$kendo-file-manager-grid-bg | Null | null | null |
Description
The background color of the FileManager Grid. | |||
$kendo-file-manager-grid-text | Null | null | null |
Description
The text color of the FileManager Grid. | |||
$kendo-file-manager-grid-border | Null | null | null |
Description
The border color of the FileManager Grid. | |||
$kendo-file-manager-preview-padding-x | String | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the FileManager preview. | |||
$kendo-file-manager-preview-padding-y | String | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FileManager preview. | |||
$kendo-file-manager-preview-width | Number | 20% | 20% |
Description
The width of the FileManager preview. | |||
$kendo-file-manager-preview-border-width | Number | $kendo-file-manager-border-width | 1px |
Description
The border width of the FileManager preview. | |||
$kendo-file-manager-preview-spacing | String | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) |
Description
The spacing of the FileManager preview. | |||
$kendo-file-manager-preview-column-gap | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The gap between the columns in the FileManager preview. | |||
$kendo-file-manager-preview-bg | Null | null | null |
Description
The background color of the FileManager preview. | |||
$kendo-file-manager-preview-text | Null | null | null |
Description
The text color of the FileManager preview. | |||
$kendo-file-manager-preview-border | Null | null | null |
Description
The border color of the FileManager preview. | |||
$kendo-file-manager-preview-icon-bg | Null | null | null |
Description
The background color of the FileManager preview icon. | |||
$kendo-file-manager-preview-icon-text | String | if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) | var(--kendo-color-subtle, #596169) |
Description
The text color of the FileManager preview icon. | |||
$kendo-file-manager-preview-icon-border | Null | null | null |
Description
The border color of the FileManager preview icon. |
Filter
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-filter-padding-x | String | $kendo-padding-md-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Filter. | |||
$kendo-filter-padding-y | String | $kendo-padding-md-y | var(--kendo-spacing-2, 0.5rem) |
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 | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the Filter preview field. | |||
$kendo-filter-preview-operator-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Filter preview operator. | |||
$kendo-filter-toolbar-focus-shadow | List | 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The box shadow of the focused Filter toolbar. |
Floating-action-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-fab-border-width | Number | 1px | 1px |
Description
The width of the border around the FAB. | |||
$kendo-fab-border-radius | Calculation | calc( #{k-border-radius(md)} / 2 ) | calc(var(--kendo-border-radius-md, 0.375rem) / 2) |
Description
The border radius of the FAB. | |||
$kendo-fab-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the FAB. | |||
$kendo-fab-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the FAB. | |||
$kendo-fab-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the FAB. | |||
$kendo-fab-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the FAB. | |||
$kendo-fab-sm-padding-x | Calculation | calc( #{$kendo-fab-padding-x} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The horizontal padding of the small FAB. | |||
$kendo-fab-md-padding-x | String | $kendo-fab-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the medium FAB. | |||
$kendo-fab-lg-padding-x | Calculation | calc( #{$kendo-fab-padding-x} * 1.5 ) | calc(var(--kendo-spacing-4, 1rem) * 1.5) |
Description
The horizontal padding of the large FAB. | |||
$kendo-fab-padding-y | String | $kendo-fab-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FAB. | |||
$kendo-fab-sm-padding-y | Calculation | calc( #{$kendo-fab-padding-y} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The vertical padding of the small FAB. | |||
$kendo-fab-md-padding-y | String | $kendo-fab-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the medium FAB. | |||
$kendo-fab-lg-padding-y | Calculation | calc( #{$kendo-fab-padding-y} * 1.5 ) | calc(var(--kendo-spacing-4, 1rem) * 1.5) |
Description
The vertical padding of the large FAB. | |||
$kendo-fab-icon-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the FAB icon. | |||
$kendo-fab-icon-padding-y | String | $kendo-fab-icon-padding-x | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the FAB icon. | |||
$kendo-fab-icon-spacing | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The spacing of the FAB icon. | |||
$kendo-fab-items-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the FAB items. | |||
$kendo-fab-items-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FAB items. | |||
$kendo-fab-item-text-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the FAB item text. | |||
$kendo-fab-item-text-padding-y | String | $kendo-fab-item-text-padding-x | var(--kendo-spacing-1, 0.25rem) |
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 | 4px | 4px |
Description
The border radius of the FAB item text. | |||
$kendo-fab-item-text-font-size | String | var( --kendo-font-size-xs, inherit ) | var(--kendo-font-size-xs, inherit) |
Description
The font size of the FAB item text. | |||
$kendo-fab-item-text-line-height | Number | 14px | 14px |
Description
The line height of the FAB item text. | |||
$kendo-fab-item-icon-padding-x | Calculation | calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} ) | calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1, 0.25rem)) |
Description
The horizontal padding of the FAB item icon. | |||
$kendo-fab-item-icon-padding-y | Calculation | $kendo-fab-item-icon-padding-x | calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1, 0.25rem)) |
Description
The vertical padding of the FAB item icon. | |||
$kendo-fab-item-icon-border-width | Number | 0 | 0 |
Description
The width of the FAB item icon border. | |||
$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": var(--kendo-color-primary, #0d6efd), "secondary": var(--kendo-color-secondary, #6c757d), "tertiary": var(--kendo-color-tertiary, #6f42c1), "info": var(--kendo-color-info, #0dcaf0), "success": var(--kendo-color-success, #198754), "warning": var(--kendo-color-warning, #ffc107), "error": var(--kendo-color-error, #dc3545), "dark": var(--kendo-color-dark, #212529), "light": var(--kendo-color-light, #f8f9fa), "inverse": var(--kendo-color-dark, #212529)) |
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: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: calc(var(--kendo-spacing-4, 1rem) / 2)), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)), lg: (padding-x: calc(var(--kendo-spacing-4, 1rem) * 1.5), padding-y: calc(var(--kendo-spacing-4, 1rem) * 1.5))) |
Description
The size map for the FAB. | |||
$kendo-fab-shadow | String | k-elevation(5) | var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15)) |
Description
The base shadow of the FAB. | |||
$kendo-fab-disabled-shadow | String | k-elevation(5) | var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15)) |
Description
The shadow of the disabled FAB. | |||
$kendo-fab-active-shadow | Null | null | null |
Description
The shadow of the active FAB. | |||
$kendo-fab-outline-style | String | solid | solid |
Description
The outline style of the FAB. | |||
$kendo-fab-outline-width | Number | 3px | 3px |
Description
The outline width of the FAB. | |||
$kendo-fab-item-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The base text color of the FAB item. | |||
$kendo-fab-item-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The base background color of the FAB item. | |||
$kendo-fab-item-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The base border color of the FAB item. | |||
$kendo-fab-item-icon-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The base text color of the FAB item icon. | |||
$kendo-fab-item-icon-bg | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The base background color of the FAB item icon. | |||
$kendo-fab-item-icon-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The base border color of the FAB item icon. | |||
$kendo-fab-item-shadow | String | $kendo-fab-shadow | var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15)) |
Description
The base shadow of the FAB item. | |||
$kendo-fab-item-disabled-shadow | String | $kendo-fab-disabled-shadow | var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15)) |
Description
The shadow of the disabled FAB item. | |||
$kendo-fab-item-active-shadow | Null | $kendo-fab-active-shadow | null |
Description
The shadow of the active FAB item. | |||
$kendo-fab-item-outline-style | String | solid | solid |
Description
The outline style of the FAB item. | |||
$kendo-fab-item-outline-width | Number | 3px | 3px |
Description
The outline width of the FAB item. | |||
$kendo-fab-item-outline-color | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The outline color of the 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 | String | $kendo-input-font-size | var(--kendo-font-size, inherit) |
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.5 |
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.5 * var(--kendo-font-size, inherit)) |
Description
The height of the Floating Label. | |||
$kendo-floating-label-offset-x | Calculation | calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) | calc(0.75rem + 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.5 * var(--kendo-font-size, inherit)) + 1px + 0.375rem) |
Description
The vertical offset of the Floating Label. | |||
$kendo-floating-label-focus-scale | Number | 1 | 1 |
Description
The transformation scale of the focused Floating Label. | |||
$kendo-floating-label-focus-offset-x | Number | 0 | 0 |
Description
The horizontal offset of the focused Floating Label. | |||
$kendo-floating-label-focus-offset-y | Number | 0 | 0 |
Description
The vertical offset of the focused Floating Label. | |||
$kendo-floating-label-transition | List | .2s ease-out | 0.2s ease-out |
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 | Null | null | null |
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 | Null | null | null |
Description
The text color of the focused Floating Label. |
Form
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-form-spacer | Calculation | calc( #{$kendo-padding-md-x} * 2 ) | calc(var(--kendo-spacing-4, 1rem) * 2) |
Description
The padding of the inline Form. | |||
$kendo-form-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Form. | |||
$kendo-form-line-height | Number | $input-btn-line-height | 1.5 |
Description
The line height of the Form. | |||
$kendo-form-line-height-em | Calculation | calc( #{$kendo-form-line-height} * 1em ) | calc(1.5 * 1em) |
Description
The line height of the Form in em units. | |||
$kendo-form-sm-line-height | String | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) |
Description
The line height of the small Form. | |||
$kendo-form-lg-line-height | String | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) |
Description
The line height of the large Form. | |||
$kendo-form-fieldset-margin | List | 2rem 0 0 | 2rem 0 0 |
Description
The margin of the Form fieldset. | |||
$kendo-form-fieldset-padding | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The padding of the Form fieldset. | |||
$kendo-form-legend-margin | List | 0 0 1rem | 0 0 1rem |
Description
The margin of the Form legend. | |||
$kendo-form-legend-padding | String | k-spacing(0) | var(--kendo-spacing-0, 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 | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
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 | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The bottom margin of the Form label. | |||
$kendo-form-button-margin-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal margin of the Form buttons. | |||
$kendo-form-hint-font-size | String | var( --kendo-font-size-xs, inherit ) | var(--kendo-font-size-xs, inherit) |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The top margin of the Form hint. | |||
$kendo-form-sm-rows-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The row spacing of the small Form. | |||
$kendo-form-md-rows-spacing | String | $kendo-form-sm-rows-spacing | var(--kendo-spacing-4, 1rem) |
Description
The row spacing of the medium Form. | |||
$kendo-form-lg-rows-spacing | String | $kendo-form-sm-rows-spacing | var(--kendo-spacing-4, 1rem) |
Description
The row spacing of the large Form. | |||
$kendo-form-separator-margin | List | $kendo-form-md-rows-spacing 0 0 | var(--kendo-spacing-4, 1rem) 0 0 |
Description
The margin of the Form separator. | |||
$kendo-form-separator-border-color | String | $kendo-form-legend-border-color | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Form separator. | |||
$kendo-horizontal-form-label-padding-top | Calculation | calc( #{k-spacing(2.5)} / 2 ) | calc(var(--kendo-spacing-2\.5, 0.625rem) / 2) |
Description
The top padding of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-margin-x | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
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% - var(--kendo-spacing-2\.5, 0.625rem)) |
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 | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The invalid text color of the Form. | |||
$kendo-label-optional-margin-x | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The horizontal margin of the optional label in the Form. | |||
$kendo-label-optional-font-size | String | var( --kendo-font-size-xs, inherit ) | var(--kendo-font-size-xs, inherit) |
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 | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The margin of the Form fieldset. | |||
$kendo-fieldset-font-size | Number | $kendo-h4-font-size | 1.5rem |
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: var(--kendo-spacing-4, 1rem)), md: (form-rows-spacing: var(--kendo-spacing-4, 1rem)), lg: (form-rows-spacing: var(--kendo-spacing-4, 1rem))) |
Description
The sizes map for the Form. |
Gantt
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-gantt-border-width | Number | 1px | 1px |
Description
The border width of the Gantt. | |||
$kendo-gantt-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Gantt. | |||
$kendo-gantt-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Gantt. | |||
$kendo-gantt-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Gantt. | |||
$kendo-gantt-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Gantt. | |||
$kendo-gantt-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Gantt. | |||
$kendo-gantt-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Gantt. | |||
$kendo-gantt-treelist-bg | Null | null | null |
Description
The background color of the Gantt TreeList. | |||
$kendo-gantt-treelist-text | Null | null | null |
Description
The text color of the Gantt TreeList. | |||
$kendo-gantt-treelist-border | Null | null | null |
Description
The border color of the Gantt TreeList. | |||
$kendo-gantt-nonwork-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) | color-mix(in srgb, var(--kendo-color-on-base, #212529) 3%, transparent) |
Description
The background color of the Gantt non-working days. | |||
$kendo-gantt-nonwork-text | Null | null | null |
Description
The text color of the Gantt non-working days. | |||
$kendo-gantt-nonwork-border | Null | null | null |
Description
The border color of the Gantt non-working days. | |||
$kendo-gantt-line-size | Number | 2px | 2px |
Description
The size of the Gantt connecting lines. | |||
$kendo-gantt-line-fill | String | if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) | var(--kendo-color-on-base, #212529) |
Description
The background fill color of the Gantt connecting lines. | |||
$kendo-gantt-line-selected-fill | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background fill of the selected Gantt connecting lines. | |||
$kendo-gantt-dot-size | Number | 8px | 8px |
Description
The size of the Gantt task dot. | |||
$kendo-gantt-dot-spacing | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The spacing of the Gantt task dot. | |||
$kendo-gantt-dot-bg | String | $kendo-gantt-text | var(--kendo-color-on-app-surface, #212529) |
Description
The background color of the Gantt task dot. | |||
$kendo-gantt-dot-border | Null | null | null |
Description
The border color of the Gantt task dot. | |||
$kendo-gantt-dot-hover-bg | String | $kendo-gantt-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the hovered Gantt task dot. | |||
$kendo-gantt-dot-hover-border | String | $kendo-gantt-text | var(--kendo-color-on-app-surface, #212529) |
Description
The border color of the hovered Gantt task dot. | |||
$kendo-gantt-milestone-bg | String | if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 )) | var(--kendo-color-base, #dee2e6) |
Description
The background color of the Gantt milestone. | |||
$kendo-gantt-milestone-border | String | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-gantt-milestone-bg, 2 )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of the Gantt milestone. | |||
$kendo-gantt-milestone-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected Gantt milestone. | |||
$kendo-gantt-milestone-selected-border | String | $kendo-selected-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the selected Gantt milestone. | |||
$kendo-gantt-summary-bg | String | if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) | var(--kendo-color-subtle, #596169) |
Description
The background color of the Gantt summary. | |||
$kendo-gantt-summary-progress-bg | String | $kendo-gantt-text | var(--kendo-color-on-app-surface, #212529) |
Description
The background color of the Gantt summary progress. | |||
$kendo-gantt-summary-selected-bg | String | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) | var(--kendo-color-primary-subtle-active, #9ec5fe) |
Description
The background color of the selected Gantt summary. | |||
$kendo-gantt-summary-progress-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected Gantt summary progress. | |||
$kendo-gantt-task-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Gantt task. | |||
$kendo-gantt-task-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the Gantt task. | |||
$kendo-gantt-task-border-width | Number | 1px | 1px |
Description
The border width of the Gantt task. | |||
$kendo-gantt-task-bg | String | if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), $gray-300, $gray-700 )) | var(--kendo-color-base, #dee2e6) |
Description
The background color of the Gantt task. | |||
$kendo-gantt-task-text | String | if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-task-bg )) | var(--kendo-color-on-base, #212529) |
Description
The text color of the Gantt task. | |||
$kendo-gantt-task-border | String | if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of the Gantt task. | |||
$kendo-gantt-task-progress-bg | String | if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), $gray-400, $gray-600 )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The background color of the Gantt task progress. | |||
$kendo-gantt-task-selected-bg | String | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) | var(--kendo-color-primary-subtle-active, #9ec5fe) |
Description
The background color of selected the Gantt task. | |||
$kendo-gantt-task-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected Gantt task. | |||
$kendo-gantt-task-selected-border | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the selected Gantt task. | |||
$kendo-gantt-task-progress-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected Gantt task progress. | |||
$kendo-gantt-planned-margin-y | Number | .35em | 0.35em |
Description
The vertical margin of the Gantt task planned line. | |||
$kendo-gantt-planned-border-width | Number | 2px | 2px |
Description
The border width of the Gantt task planned line. | |||
$kendo-gantt-planned-line-height | Number | .75em | 0.75em |
Description
The line height of the Gantt task planned line. | |||
$kendo-gantt-planned-dependency-margin-y | Number | .6em | 0.6em |
Description
The vertical margin of the Gantt planned dependencies. | |||
$kendo-gantt-planned-moment-width | Number | 6px | 6px |
Description
The default width of the Gantt planned line dot. | |||
$kendo-gantt-planned-moment-height | Number | $kendo-gantt-planned-moment-width | 6px |
Description
The default height of the Gantt planned line dot. | |||
$kendo-gantt-planned-moment-border-radius | Calculation | calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) | calc((4px + 6px) / 2) |
Description
The border radius of the Gantt planned line dot. | |||
$kendo-gantt-planned-moment-left-margin-x | Calculation | calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) | calc(1px - calc((4px + 6px) / 2)) |
Description
The horizontal margin of the Gantt planned line dot. | |||
$kendo-gantt-planned-milestone-moment-margin-x | Number | $kendo-gantt-planned-moment-width | 6px |
Description
The horizontal margin of the Gantt milestone planned line dot. | |||
$kendo-gantt-planned-duration-height | Number | $kendo-gantt-planned-border-width | 2px |
Description
The default height of the Gantt planned line. | |||
$kendo-gantt-planned-duration-hover-height | Calculation | calc( #{$kendo-gantt-planned-border-width} + 1px ) | calc(2px + 1px) |
Description
The height of the hovered Gantt planned line. | |||
$kendo-gantt-planned-single-drag-hint-top | Number | .35em | 0.35em |
Description
The top position of the Gantt drag hint. | |||
$kendo-gantt-planned-summary-drag-hint-top | Number | 1em | 1em |
Description
The top position of the Gantt summary drag hint. | |||
$kendo-gantt-planned-milestone-drag-hint-top | Number | .85em | 0.85em |
Description
The top position of the Gantt planned milestone drag hint. | |||
$kendo-gantt-rtl-milestone-wrap-margin-x | Number | -2.3em | -2.3em |
Description
The horizontal margin of the Gantt milestone wrap. | |||
$kendo-gantt-rtl-milestone-planned-moment-margin-x | Number | .2em | 0.2em |
Description
The horizontal margin of the Gantt milestone line dot. | |||
$kendo-gantt-rtl-milestone-dot-start-margin-x | Number | -.1em | -0.1em |
Description
The horizontal margin of the Gantt milestone task dot. | |||
$kendo-gantt-planned-offset-resize-handler-margin-x | Number | 1.2em | 1.2em |
Description
The horizontal offset of the Gantt delayed task resize handler. | |||
$kendo-gantt-planned-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Gantt planned Tooltip. | |||
$kendo-gantt-planned-border | String | $kendo-gantt-planned-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Gantt planned Tooltip. | |||
$kendo-gantt-delayed-bg | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The background color of the Gantt delayed task. | |||
$kendo-gantt-delayed-bg-lighter | String | if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint( $kendo-gantt-delayed-bg, 5 )) | var(--kendo-color-error-emphasis, rgba(220, 53, 69, 0.4)) |
Description
The complement background color of the Gantt delayed task. | |||
$kendo-gantt-advanced-bg | String | $kendo-color-success | var(--kendo-color-success, #198754) |
Description
The background color of the Gantt advanced task. | |||
$kendo-gantt-advanced-bg-lighter | String | if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint( $kendo-gantt-advanced-bg, 5 )) | var(--kendo-color-success-emphasis, rgba(25, 135, 84, 0.4)) |
Description
The complement background color of the Gantt advanced task. | |||
$kendo-gantt-action-on-offset-text | Color | #000000 | #000000 |
Description
The text color of the Gantt delayed task action. | |||
$kendo-gantt-offset-resize-handler-top | Number | 45% | 45% |
Description
The top position of the Gantt delayed task resize handler. | |||
$kendo-gantt-validation-tooltip-width | Number | 200px | 200px |
Description
The default width of the Gantt validation Tooltip. | |||
$kendo-gantt-validation-tooltip-label-width | Number | 50px | 50px |
Description
The default width of the Gantt validation Tooltip label. | |||
$kendo-gantt-validation-tooltip-border | Color | #656565 | #656565 |
Description
The border color of the Gantt validation Tooltip. | |||
$kendo-gantt-validation-tooltip-valid-border | String | $kendo-color-success | var(--kendo-color-success, #198754) |
Description
The border color of the valid Gantt validation Tooltip. | |||
$kendo-gantt-validation-tooltip-invalid-border | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The border color of the invalid Gantt validation Tooltip. |
Grid
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-grid-padding-x | Number | $kendo-table-md-cell-padding-x | 0.5rem |
Description
The horizontal padding of the Grid. | |||
$kendo-grid-padding-y | Number | $kendo-table-md-cell-padding-y | 0.5rem |
Description
The vertical padding of the Grid. | |||
$kendo-grid-header-padding-x | Number | $kendo-grid-padding-x | 0.5rem |
Description
The horizontal padding of the Grid header. | |||
$kendo-grid-header-padding-y | Number | $kendo-grid-padding-y | 0.5rem |
Description
The vertical padding of the Grid header. | |||
$kendo-grid-grouping-header-padding-x | Number | $kendo-grid-padding-y | 0.5rem |
Description
The horizontal padding of the Grid grouping header. | |||
$kendo-grid-grouping-header-padding-y | Number | $kendo-grid-grouping-header-padding-x | 0.5rem |
Description
The vertical padding of the Grid grouping header. | |||
$kendo-grid-cell-padding-x | Number | $kendo-grid-padding-x | 0.5rem |
Description
The horizontal padding of the Grid cell. | |||
$kendo-grid-cell-padding-y | Number | $kendo-grid-padding-y | 0.5rem |
Description
The vertical padding of the Grid cell. | |||
$kendo-grid-filter-cell-padding-x | Number | $kendo-grid-padding-y | 0.5rem |
Description
The horizontal padding of the Grid filter cell. | |||
$kendo-grid-filter-cell-padding-y | Number | $kendo-grid-filter-cell-padding-x | 0.5rem |
Description
The vertical padding of the Grid filter cell. | |||
$kendo-grid-edit-cell-padding-x | Number | $kendo-grid-cell-padding-x | 0.5rem |
Description
The horizontal padding of the Grid edit cell. | |||
$kendo-grid-edit-cell-padding-y | Calculation | calc( #{k-spacing(2.5)} / 2 ) | calc(var(--kendo-spacing-2\.5, 0.625rem) / 2) |
Description
The vertical padding of the Grid filter cell. | |||
$kendo-grid-bg | String | $kendo-table-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Grid. | |||
$kendo-grid-text | String | $kendo-table-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Grid. | |||
$kendo-grid-border | String | $kendo-table-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Grid. | |||
$kendo-grid-header-bg | String | $kendo-table-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of Grid header. | |||
$kendo-grid-header-text | String | $kendo-table-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of Grid header. | |||
$kendo-grid-header-border | String | $kendo-table-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of Grid header. | |||
$kendo-grid-header-gradient | Null | $kendo-table-header-gradient | null |
Description
The background gradient of Grid header. | |||
$kendo-grid-footer-bg | String | $kendo-table-footer-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of Grid footer. | |||
$kendo-grid-footer-text | String | $kendo-table-footer-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of Grid footer. | |||
$kendo-grid-footer-border | String | $kendo-table-footer-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of Grid footer. | |||
$kendo-grid-alt-bg | String | $kendo-table-alt-row-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 5%, transparent) |
Description
The background color of the Grid alternating rows. | |||
$kendo-grid-alt-text | Null | $kendo-table-alt-row-text | null |
Description
The text color of the Grid alternating rows. | |||
$kendo-grid-alt-border | Null | $kendo-table-alt-row-border | null |
Description
The border color of the Grid alternating rows. | |||
$kendo-grid-hover-bg | String | $kendo-table-hover-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 9%, transparent) |
Description
The background color of hovered Grid rows. | |||
$kendo-grid-hover-text | Null | $kendo-table-hover-text | null |
Description
The text color of hovered Grid rows. | |||
$kendo-grid-hover-border | Null | $kendo-table-hover-border | null |
Description
The border color of hovered Grid rows. | |||
$kendo-grid-selected-bg | String | $kendo-table-selected-bg | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The background color of selected Grid rows. | |||
$kendo-grid-selected-text | String | $kendo-table-selected-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of selected Grid rows. | |||
$kendo-grid-selected-border | Null | $kendo-table-selected-border | null |
Description
The border color of selected Grid rows. | |||
$kendo-grid-selection-aggregates-bg | String | $kendo-grid-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Grid selection aggregates container. | |||
$kendo-grid-selection-aggregates-text | String | $kendo-grid-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Grid selection aggregates container. | |||
$kendo-grid-selection-aggregates-border | String | $kendo-grid-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Grid selection aggregates container. | |||
$kendo-grid-selection-aggregates-border-width | Number | $kendo-grid-border-width | 1px |
Description
The border width of the Grid selection aggregates container. | |||
$kendo-grid-selection-aggregates-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the selection aggregates items. | |||
$kendo-grid-selection-aggregates-line-height | String | $kendo-grid-line-height | var(--kendo-line-height, normal) |
Description
The line height of the Grid selection aggregates container. | |||
$kendo-grid-selection-aggregates-font-weight | String | var( --kendo-font-weight-bold, normal )!default | var(--kendo-font-weight-bold, normal) |
Description
The font weight of the Grid selection aggregates container. | |||
$kendo-grid-row-resizer-hover-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) | color-mix(in srgb, var(--kendo-color-on-base, #212529) 20%, transparent) |
Description
The background color of the Grid row resize indicator. | |||
$kendo-grid-row-resizer-active-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the active Grid row resize indicator. | |||
$kendo-grid-row-resizer-height | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The 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 | $input-border-width | 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 | $input-padding-x | 0.75rem |
Description
The horizontal padding of the Input components. | |||
$kendo-input-sm-padding-x | Number | $input-padding-x-sm | 0.5rem |
Description
The horizontal padding of the small Input components. | |||
$kendo-input-md-padding-x | Number | $input-padding-x | 0.75rem |
Description
The horizontal padding of the medium Input components. | |||
$kendo-input-lg-padding-x | Number | $input-padding-x-lg | 1rem |
Description
The horizontal padding of the large Input components. | |||
$kendo-input-padding-y | Number | $input-padding-y | 0.375rem |
Description
The vertical padding of input components. | |||
$kendo-input-sm-padding-y | Number | $input-padding-y-sm | 0.25rem |
Description
The vertical padding of the small Input components. | |||
$kendo-input-md-padding-y | Number | $input-padding-y | 0.375rem |
Description
The vertical padding of the medium Input components. | |||
$kendo-input-lg-padding-y | Number | $input-padding-y-lg | 0.5rem |
Description
The vertical padding of the large Input components. | |||
$kendo-input-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of input components. | |||
$kendo-input-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of input components. | |||
$kendo-input-sm-font-size | String | var( --kendo-font-size-sm, inherit )!default | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small Input components. | |||
$kendo-input-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Input components. | |||
$kendo-input-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large Input components. | |||
$kendo-input-line-height | Number | $input-line-height | 1.5 |
Description
The line height of input components. | |||
$kendo-input-sm-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the small Input components. | |||
$kendo-input-md-line-height | String | var( --kendo-line-height, normal) | var(--kendo-line-height, normal) |
Description
The line height of the medium Input components. | |||
$kendo-input-lg-line-height | String | var( --kendo-line-height, normal) | var(--kendo-line-height, normal) |
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: $kendo-input-sm-padding-y,
button-padding-y: $kendo-input-sm-padding-y
),
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: $kendo-input-md-padding-y,
button-padding-y: $kendo-input-md-padding-y
),
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: $kendo-input-lg-padding-y,
button-padding-y: $kendo-input-lg-padding-y
)
) | (sm: (padding-x: 0.5rem, padding-y: 0.25rem, font-size: var(--kendo-font-size-sm, inherit), line-height: 1.4285714286, button-padding-x: 0.25rem, button-padding-y: 0.25rem), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), button-padding-x: 0.375rem, button-padding-y: 0.375rem), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), button-padding-x: 0.5rem, button-padding-y: 0.5rem)) |
Description
The sizes map for the Input components. | |||
$kendo-input-bg | String | $input-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Input components. | |||
$kendo-input-text | String | $input-color | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Input components. | |||
$kendo-input-border | String | $input-border-color | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
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 | Null | null | null |
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 | String | $input-focus-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the focused Input components. | |||
$kendo-input-focus-text | String | $input-focus-color | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the focused Input components. | |||
$kendo-input-focus-border | String | $input-focus-border-color | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
Description
The border color of the focused Input components. | |||
$kendo-input-focus-shadow | List | $input-focus-box-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
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 | Null | null | null |
Description
The background color of the disabled Input components. | |||
$kendo-input-disabled-text | Null | null | null |
Description
The text color of the disabled Input components. | |||
$kendo-input-disabled-border | Null | null | null |
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 | String | $kendo-base-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the outline Input components. | |||
$kendo-input-outline-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-base-text, .5 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent) |
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 | Null | null | null |
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 | String | $kendo-input-focus-border | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
Description
The border color of the outline focused Input components. | |||
$kendo-input-outline-focus-shadow | List | $kendo-input-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
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 | String | $kendo-input-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the flat Input components. | |||
$kendo-input-flat-border | String | $kendo-input-border | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
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 | Null | $kendo-input-hover-border | null |
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 | String | $kendo-input-focus-border | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
Description
The border color of the flat focused Input components. | |||
$kendo-input-flat-focus-shadow | List | $kendo-input-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The shadow of the flat focused Input components. | |||
$kendo-input-placeholder-text | String | $input-placeholder-color | var(--kendo-color-subtle, #596169) |
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 | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical margin of the clear value icon. | |||
$kendo-input-values-margin-x | String | $kendo-input-values-margin-y | var(--kendo-spacing-0\.5, 0.125rem) |
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-text | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The color of the Input separator. | |||
$kendo-input-separator-opacity | Number | .5 | 0.5 |
Description
The opacity of the Input separator. | |||
$kendo-input-prefix-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Input prefix. | |||
$kendo-input-suffix-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Input suffix. | |||
$kendo-input-invalid-border | String | $kendo-invalid-border | var(--kendo-color-error, #dc3545) |
Description
The border color of the invalid Input components. | |||
$kendo-input-invalid-shadow | List | $kendo-invalid-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-error, #dc3545) 25%, transparent) |
Description
The shadow of the invalid Input components. |
List
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-list-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
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 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 | String | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
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 | String | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
Description
The font weight of a List group item. | |||
$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: var(--kendo-font-size-sm, inherit), line-height: 1.4285714286, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-4, 1rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-4, 1rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-4, 1rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-4, 1rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-4, 1rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-4, 1rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: null, group-item-line-height: null)) |
Description
The map with the sizes of the List. | |||
$kendo-list-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the List component. | |||
$kendo-list-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the List component. | |||
$kendo-list-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | $kendo-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of the hovered List items. | |||
$kendo-list-item-hover-text | String | $kendo-hover-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the hovered List items. | |||
$kendo-list-item-focus-bg | Null | null | null |
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 | List | inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-list-text, .15 )) | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The box shadow of the focused List items. | |||
$kendo-list-item-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected List items. | |||
$kendo-list-item-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
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 | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The color of the 'No Data' text. | |||
$kendo-list-option-label-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The color of the 'Option Label' text. |
Listbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listbox-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the ListBox elements. | |||
$kendo-listbox-button-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ListBox. | |||
$kendo-listbox-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the ListBox. | |||
$kendo-listbox-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the ListBoxx. | |||
$kendo-listbox-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the ListBox. | |||
$kendo-listbox-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the ListBox. | |||
$kendo-listbox-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the ListBox. | |||
$kendo-listbox-item-padding-x | Null | null | null |
Description
The inline padding of the ListBox item. | |||
$kendo-listbox-item-padding-y | Null | null | null |
Description
The block padding of the ListBox item. | |||
$kendo-listbox-drop-hint-width | Number | 1px | 1px |
Description
The width of the ListBox drop hint. | |||
$kendo-listbox-drop-hint-border-width | Null | null | null |
Description
The width of the border around the ListBox drop hint. |
Listview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listview-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the ListView. | |||
$kendo-listview-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ListView. | |||
$kendo-listview-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the ListView. | |||
$kendo-listview-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the ListView. | |||
$kendo-listview-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the ListView. | |||
$kendo-listview-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the ListView. | |||
$kendo-listview-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the ListView. | |||
$kendo-listview-item-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the ListView items. | |||
$kendo-listview-item-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
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 | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
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 | Null | null | null |
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 | List | inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-listview-text, .15 )) | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The size of the small Loader segment. | |||
$kendo-loader-md-segment-size | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The size of the medium Loader segment. | |||
$kendo-loader-lg-segment-size | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The size of the large Loader segment. | |||
$kendo-loader-sm-padding | Calculation | calc( #{ $kendo-loader-sm-segment-size} / 2 ) | calc(var(--kendo-spacing-1, 0.25rem) / 2) |
Description
The padding of the small Loader. | |||
$kendo-loader-md-padding | Calculation | calc( #{ $kendo-loader-md-segment-size} / 2 ) | calc(var(--kendo-spacing-2, 0.5rem) / 2) |
Description
The padding of the medium Loader. | |||
$kendo-loader-lg-padding | Calculation | calc( #{ $kendo-loader-lg-segment-size} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The padding of the large Loader. | |||
$kendo-loader-sm-spinner-3-width | Calculation | calc( #{ $kendo-loader-sm-segment-size} * 4 ) | calc(var(--kendo-spacing-1, 0.25rem) * 4) |
Description
The width of the small spinner-3 Loader. | |||
$kendo-loader-md-spinner-3-width | Calculation | calc( #{ $kendo-loader-md-segment-size} * 4 ) | calc(var(--kendo-spacing-2, 0.5rem) * 4) |
Description
The width of the medium spinner-3 Loader. | |||
$kendo-loader-lg-spinner-3-width | Calculation | calc( #{ $kendo-loader-lg-segment-size} * 4 ) | calc(var(--kendo-spacing-4, 1rem) * 4) |
Description
The width of the large spinner-3 Loader. | |||
$kendo-loader-sm-spinner-3-height | Calculation | calc( #{ $kendo-loader-sm-spinner-3-width} * #{$equilateral-height} ) | calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.8660254038) |
Description
The height of the small spinner-3 Loader. | |||
$kendo-loader-md-spinner-3-height | Calculation | calc( #{ $kendo-loader-md-spinner-3-width} * #{$equilateral-height} ) | calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.8660254038) |
Description
The height of the medium spinner-3 Loader. | |||
$kendo-loader-lg-spinner-3-height | Calculation | calc( #{ $kendo-loader-lg-spinner-3-width} * #{$equilateral-height} ) | calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.8660254038) |
Description
The height of the large spinner-3 Loader. | |||
$kendo-loader-sm-spinner-4-width | Calculation | calc( #{ $kendo-loader-sm-segment-size} * 4 ) | calc(var(--kendo-spacing-1, 0.25rem) * 4) |
Description
The width of the small spinner-4 Loader. | |||
$kendo-loader-md-spinner-4-width | Calculation | calc( #{ $kendo-loader-md-segment-size} * 4 ) | calc(var(--kendo-spacing-2, 0.5rem) * 4) |
Description
The width of the medium spinner-4 Loader. | |||
$kendo-loader-lg-spinner-4-width | Calculation | calc( #{ $kendo-loader-lg-segment-size} * 4 ) | calc(var(--kendo-spacing-4, 1rem) * 4) |
Description
The width of the large spinner-4 Loader. | |||
$kendo-loader-sm-spinner-4-height | Calculation | $kendo-loader-sm-spinner-4-width | calc(var(--kendo-spacing-1, 0.25rem) * 4) |
Description
The height of the small spinner-4 Loader. | |||
$kendo-loader-md-spinner-4-height | Calculation | $kendo-loader-md-spinner-4-width | calc(var(--kendo-spacing-2, 0.5rem) * 4) |
Description
The height of the medium spinner-4 Loader. | |||
$kendo-loader-lg-spinner-4-height | Calculation | $kendo-loader-lg-spinner-4-width | calc(var(--kendo-spacing-4, 1rem) * 4) |
Description
The height of the large spinner-4 Loader. | |||
$kendo-loader-secondary-bg | Color | #212529 | #212529 |
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 | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the container panel. | |||
$kendo-loader-container-panel-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
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 | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The padding of the small Loader container. | |||
$kendo-loader-md-container-padding | String | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) |
Description
The padding of the medium Loader container. | |||
$kendo-loader-lg-container-padding | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The padding of the large Loader container. | |||
$kendo-loader-sm-container-gap | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The gap of the small Loader container. | |||
$kendo-loader-md-container-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The gap of the medium Loader container. | |||
$kendo-loader-lg-container-gap | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The gap of the large Loader container. | |||
$kendo-loader-sm-container-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small Loader container. | |||
$kendo-loader-md-container-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Loader container. | |||
$kendo-loader-lg-container-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the large Loader container. |
Loading
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-loading-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #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 | 1px |
Description
Width of the border around the menu popup. | |||
$kendo-menu-popup-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
Font sizes of the menu popup. | |||
$kendo-menu-popup-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
Line heights used along with $kendo-font-size. | |||
$kendo-menu-popup-bg | String | $kendo-popup-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background of the menu popup. | |||
$kendo-menu-popup-text | String | $kendo-popup-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the menu popup. | |||
$kendo-menu-popup-border | String | $kendo-popup-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
Horizontal padding of the menu item in popup. | |||
$kendo-menu-popup-item-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
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(var(--kendo-spacing-4, 1rem) * 2 + 16px) |
Description
The end padding of the menu item in popup. | |||
$kendo-menu-popup-sm-item-icon-margin-start | String | $kendo-menu-popup-sm-item-padding-x | var(--kendo-spacing-4, 1rem) |
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(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2)) |
Description
The end margin of the menu item expand icon. | |||
$kendo-menu-popup-item-spacing | String | k-spacing(0) | var(--kendo-spacing-0, 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 | String | $kendo-list-item-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background of hovered menu item in popup. | |||
$kendo-menu-popup-item-hover-text | String | $kendo-list-item-hover-text | var(--kendo-color-on-app-surface, #212529) |
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 | String | $kendo-list-item-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-text | String | $kendo-list-item-selected-text | var(--kendo-color-on-primary, #ffffff) |
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 | List | $kendo-menu-item-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
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 | $kendo-button-padding-y | 0.375rem |
Description
The horizontal padding of the button arrow in the Menu Button. |
Notification
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-notification-group-gap | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The row-gap between the elements in the Notification group. | |||
$kendo-notification-padding-x | Number | $alert-padding-x | 1rem |
Description
The horizontal padding of the Notification. | |||
$kendo-notification-padding-y | Number | $alert-padding-y | 1rem |
Description
The vertical padding of the Notification. | |||
$kendo-notification-border-width | Number | $alert-border-width | 1px |
Description
The width of the border around the Notification. | |||
$kendo-notification-border-radius | Number | $alert-border-radius | 0.375rem |
Description
The border radius of the Notification. | |||
$kendo-notification-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Notification. | |||
$kendo-notification-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Notification. | |||
$kendo-notification-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Notification. | |||
$kendo-notification-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Notification. | |||
$kendo-notification-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Notification. | |||
$kendo-notification-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Notification. | |||
$kendo-notification-shadow | String | $kendo-popup-shadow | var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125)) |
Description
The box shadow of the Notification. | |||
$kendo-notification-icon-spacing | String | $kendo-icon-spacing | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal spacing of the Notification icon. | |||
$kendo-notification-theme-colors | Map | $kendo-theme-colors | ("primary": var(--kendo-color-primary, #0d6efd), "secondary": var(--kendo-color-secondary, #6c757d), "tertiary": var(--kendo-color-tertiary, #6f42c1), "info": var(--kendo-color-info, #0dcaf0), "success": var(--kendo-color-success, #198754), "warning": var(--kendo-color-warning, #ffc107), "error": var(--kendo-color-error, #dc3545), "dark": var(--kendo-color-dark, #212529), "light": var(--kendo-color-light, #f8f9fa), "inverse": var(--kendo-color-dark, #212529)) |
Description
The theme colors map for the Notification. | |||
$kendo-notification-theme | Map | notification-theme( $kendo-notification-theme-colors ) | ("inverse": (color: var(--kendo-color-inverse-on-subtle, #ffffff), background-color: var(--kendo-color-inverse-subtle, #495057), border: var(--kendo-color-inverse-emphasis, rgba(33, 37, 41, 0.4))), "light": (color: var(--kendo-color-light-on-subtle, #495057), background-color: var(--kendo-color-light-subtle, #ffffff), border: var(--kendo-color-light-emphasis, rgba(33, 37, 41, 0.1))), "dark": (color: var(--kendo-color-dark-on-subtle, #ffffff), background-color: var(--kendo-color-dark-subtle, #495057), border: var(--kendo-color-dark-emphasis, rgba(33, 37, 41, 0.4))), "error": (color: var(--kendo-color-error-on-subtle, #58151c), background-color: var(--kendo-color-error-subtle, #f8d7da), border: var(--kendo-color-error-emphasis, rgba(220, 53, 69, 0.4))), "warning": (color: var(--kendo-color-warning-on-subtle, #664d03), background-color: var(--kendo-color-warning-subtle, #fff3cd), border: var(--kendo-color-warning-emphasis, rgba(255, 193, 7, 0.4))), "success": (color: var(--kendo-color-success-on-subtle, #0A3622), background-color: var(--kendo-color-success-subtle, #d1e7dd), border: var(--kendo-color-success-emphasis, rgba(25, 135, 84, 0.4))), "info": (color: var(--kendo-color-info-on-subtle, #055160), background-color: var(--kendo-color-info-subtle, #cff4fc), border: var(--kendo-color-info-emphasis, rgba(13, 202, 240, 0.4))), "tertiary": (color: var(--kendo-color-tertiary-on-subtle, #432874), background-color: var(--kendo-color-tertiary-subtle, #e2d9f3), border: var(--kendo-color-tertiary-emphasis, rgba(111, 66, 193, 0.4))), "secondary": (color: var(--kendo-color-secondary-on-subtle, #2B2F32), background-color: var(--kendo-color-secondary-subtle, #dee2e6), border: var(--kendo-color-secondary-emphasis, rgba(108, 117, 125, 0.4))), "primary": (color: var(--kendo-color-primary-on-subtle, #052c65), background-color: var(--kendo-color-primary-subtle, #cfe2ff), border: var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)))) |
Description
The generated theme colors map for the Notification. |
Orgchart
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-orgchart-spacer | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The spacing index of the OrgChart. | |||
$kendo-orgchart-padding-y | String | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) |
Description
The vertical padding of the OrgChart. | |||
$kendo-orgchart-padding-x | String | $kendo-orgchart-padding-y | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the OrgChart. | |||
$kendo-orgchart-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the OrgChart. | |||
$kendo-orgchart-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the OrgChart. | |||
$kendo-orgchart-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the OrgChart. | |||
$kendo-orgchart-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the OrgChart. | |||
$kendo-orgchart-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the OrgChart. | |||
$kendo-orgchart-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the OrgChart. | |||
$kendo-orgchart-node-gap | String | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) |
Description
The spacing of the OrgChart node. | |||
$kendo-orgchart-group-gap | String | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) |
Description
The spacing of the OrgChart group. | |||
$kendo-orgchart-node-container-gap | String | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) |
Description
The spacing of the OrgChart node container. | |||
$kendo-orgchart-node-group-padding-y | String | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) |
Description
The vertical padding of the OrgChart node group. | |||
$kendo-orgchart-node-group-padding-x | String | $kendo-orgchart-node-group-padding-y | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the OrgChart node group. | |||
$kendo-orgchart-node-group-border-width | Number | 1px | 1px |
Description
The border width of the OrgChart node group. | |||
$kendo-orgchart-node-group-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the OrgChart node group. | |||
$kendo-orgchart-node-group-bg | String | $kendo-base-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the OrgChart node group. | |||
$kendo-orgchart-node-group-text | String | $kendo-base-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the OrgChart node group. | |||
$kendo-orgchart-node-group-border | String | $kendo-base-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the OrgChart node group. | |||
$kendo-orgchart-node-group-focus-border | Null | $kendo-card-focus-border | null |
Description
The border color of the focused OrgChart node group. | |||
$kendo-orgchart-node-group-focus-shadow | String | $kendo-card-focus-shadow | var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1)) |
Description
The shadow of the focused OrgChart node group. | |||
$kendo-orgchart-node-group-title-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the OrgChart node group title. | |||
$kendo-orgchart-node-group-title-margin-bottom | Calculation | calc( #{$kendo-orgchart-spacer} / 4 ) | calc(var(--kendo-spacing-6, 1.5rem) / 4) |
Description
The bottom margin of the OrgChart node group title. | |||
$kendo-orgchart-node-group-title-line-height | String | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) |
Description
The line height of the OrgChart node group title. | |||
$kendo-orgchart-node-group-subtitle-margin-bottom | String | $kendo-orgchart-spacer | var(--kendo-spacing-6, 1.5rem) |
Description
The bottom margin of the OrgChart node group subtitle. | |||
$kendo-orgchart-node-group-subtitle-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the OrgChart node group subtitle. | |||
$kendo-orgchart-node-group-subtitle-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The line height of the OrgChart node group subtitle. | |||
$kendo-orgchart-card-width | Number | 300px | 300px |
Description
The width of the OrgChart Card. | |||
$kendo-orgchart-card-padding-y | Number | $kendo-card-padding-y | 1rem |
Description
The vertical padding of the OrgChart Card. | |||
$kendo-orgchart-card-padding-x | Number | $kendo-orgchart-card-padding-y | 1rem |
Description
The horizontal padding of the OrgChart Card. | |||
$kendo-orgchart-card-border-width | Number | $kendo-card-border-width | 1px |
Description
The border width of the OrgChart Card. | |||
$kendo-orgchart-card-shadow | Null | $kendo-card-shadow | null |
Description
The shadow of the OrgChart Card. | |||
$kendo-orgchart-card-focus-shadow | String | $kendo-card-focus-shadow | var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1)) |
Description
The shadow of the focused OrgChart Card. | |||
$kendo-orgchart-card-title-margin-bottom | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The bottom margin of the OrgChart Card title. | |||
$kendo-orgchart-card-title-font-size | Null | null | null |
Description
The font size of the OrgChart Card title. | |||
$kendo-orgchart-card-subtitle-margin-bottom | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The bottom margin of the OrgChart Card subtitle. | |||
$kendo-orgchart-card-subtitle-font-size | Null | null | null |
Description
The font size of the OrgChart Card subtitle. | |||
$kendo-orgchart-card-body-border-width | List | 2px 0 0 | 2px 0 0 |
Description
The border width of the OrgChart Card body. | |||
$kendo-orgchart-card-body-border-color | Color | transparent | transparent |
Description
The border color of the OrgChart Card body. | |||
$kendo-orgchart-card-body-vbox-margin-right | String | k-math-div( $kendo-orgchart-spacer, 2 ) | var(--kendo-spacing-6, 1.5rem)/2 |
Description
The right margin of the OrgChart Card body title wrap. | |||
$kendo-orgchart-card-body-vbox-min-height | Number | $kendo-card-avatar-size | 45px |
Description
The min height of the OrgChart Card body title wrap. | |||
$kendo-orgchart-line-size | Number | 1px | 1px |
Description
The size of the OrgChart connecting line. | |||
$kendo-orgchart-line-fill | String | $kendo-base-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The fill color of the OrgChart connecting line. | |||
$kendo-orgchart-line-v-height | Number | 25px | 25px |
Description
The height of the OrgChart connecting line. |
Pager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-pager-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Pager. | |||
$kendo-pager-sm-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the small Pager. | |||
$kendo-pager-md-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the medium Pager. | |||
$kendo-pager-lg-padding-x | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The horizontal padding of the large Pager. | |||
$kendo-pager-padding-y | String | $kendo-pager-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Pager. | |||
$kendo-pager-sm-padding-y | String | $kendo-pager-sm-padding-x | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the small Pager. | |||
$kendo-pager-md-padding-y | String | $kendo-pager-md-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the medium Pager. | |||
$kendo-pager-lg-padding-y | String | $kendo-pager-lg-padding-x | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The vertical padding of the large Pager. | |||
$kendo-pager-sm-item-min-width | Calculation | $kendo-button-sm-calc-size | calc(1.4285714286 * 1em + 0.25rem * 2 + 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(var(--kendo-line-height, normal) * 1em + 0.375rem * 2 + 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(var(--kendo-line-height, normal) * 1em + 0.5rem * 2 + 2px) |
Description
The minimum width of the items in the large Pagers. | |||
$kendo-pager-sm-item-group-spacing | String | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) |
Description
The margin between the item groups in the small Pager. | |||
$kendo-pager-md-item-group-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The margin between the item groups in the medium Pager. | |||
$kendo-pager-lg-item-group-spacing | String | k-spacing(4.5) | var(--kendo-spacing-4\.5, 1.125rem) |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Pager. | |||
$kendo-pager-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Pager. | |||
$kendo-pager-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Pager. | |||
$kendo-pager-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Pager. | |||
$kendo-pager-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Pager. | |||
$kendo-pager-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Pager. | |||
$kendo-pager-focus-bg | Null | null | null |
Description
The background color of the focused Pager. | |||
$kendo-pager-focus-shadow | List | inset 0 0 0 2px rgba( $kendo-color-black, .08) | inset 0 0 0 2px rgba(0, 0, 0, 0.08) |
Description
The box shadow of the focused Pager. | |||
$kendo-pager-section-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the Pager sections. | |||
$kendo-pager-item-border-width | Number | 1px | 1px |
Description
The border width of the Pager items. | |||
$kendo-pager-item-border-radius | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The border radius of the Pager items. | |||
$kendo-pager-item-spacing | Number | (-1 * $kendo-pager-item-border-width) | -1px |
Description
The spacing around the Pager items. | |||
$kendo-pager-item-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Pager items. | |||
$kendo-pager-item-text | String | $kendo-link-text | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the Pager items. | |||
$kendo-pager-item-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Pager items. | |||
$kendo-pager-item-hover-bg | String | $kendo-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of the hovered Pager items. | |||
$kendo-pager-item-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
Description
The text color of the hovered Pager items. | |||
$kendo-pager-item-hover-border | String | $kendo-hover-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the hovered Pager items. | |||
$kendo-pager-item-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected Pager items. | |||
$kendo-pager-item-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected Pager items. | |||
$kendo-pager-item-selected-border | String | $kendo-pager-item-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the selected Pager items. | |||
$kendo-pager-item-focus-opacity | Null | null | null |
Description
The opacity of the focused Pager items. | |||
$kendo-pager-item-focus-bg | String | $kendo-pager-item-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the focused Pager items. | |||
$kendo-pager-item-focus-shadow | List | 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-color-primary, .25)) | 0 0 0 3px color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The box shadow of the focused Pager items. | |||
$kendo-pager-number-border-radius | Number | 0px | 0px |
Description
The border radius of the Pager numbers. | |||
$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 | 6em | 6em |
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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), item-group-spacing: var(--kendo-spacing-3\.5, 0.875rem), item-min-width: calc(1.4285714286 * 1em + 0.25rem * 2 + 2px), pager-dropdown-width: 5em), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), item-group-spacing: var(--kendo-spacing-4, 1rem), item-min-width: calc(var(--kendo-line-height, normal) * 1em + 0.375rem * 2 + 2px), pager-dropdown-width: 5em), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), item-group-spacing: var(--kendo-spacing-4\.5, 1.125rem), item-min-width: calc(var(--kendo-line-height, normal) * 1em + 0.5rem * 2 + 2px), pager-dropdown-width: 6em)) |
Description
The sizes map of the Pager. |
Panelbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-panelbar-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the PanelBar. | |||
$kendo-panelbar-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the PanelBar. | |||
$kendo-panelbar-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the PanelBar. | |||
$kendo-panelbar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the PanelBar. | |||
$kendo-panelbar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the PanelBar. | |||
$kendo-panelbar-border-width | Number | 1px | 1px |
Description
The width of the border around the PanelBar. | |||
$kendo-panelbar-border-style | String | solid | solid |
Description
The border style around the the PanelBar. | |||
$kendo-panelbar-item-border-width | Number | 1px | 1px |
Description
The width of the border around the PanelBar items. | |||
$kendo-panelbar-item-border-style | String | solid | solid |
Description
The style of the border around the PanelBar items. | |||
$kendo-panelbar-header-padding-x | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the PanelBar header. | |||
$kendo-panelbar-header-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the PanelBar header. | |||
$kendo-panelbar-item-padding-x | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the PanelBar items. | |||
$kendo-panelbar-item-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the PanelBar items. | |||
$kendo-panelbar-item-level-count | Number | 4 | 4 |
Description
The maximum nesting of the PanelBar items. | |||
$kendo-panelbar-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the PanelBar. | |||
$kendo-panelbar-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the PanelBar. | |||
$kendo-panelbar-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the PanelBar. | |||
$kendo-panelbar-header-bg | String | $kendo-panelbar-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the PanelBar header. | |||
$kendo-panelbar-header-text | String | $kendo-link-text | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the PanelBar header. | |||
$kendo-panelbar-header-border | Null | null | null |
Description
The border color of the PanelBar header. | |||
$kendo-panelbar-header-gradient | Null | null | null |
Description
The gradient of the PanelBar header. | |||
$kendo-panelbar-header-hover-bg | String | if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of the hovered PanelBar header. | |||
$kendo-panelbar-header-hover-text | Null | null | null |
Description
The text color of the hovered PanelBar header. | |||
$kendo-panelbar-header-hover-border | Null | null | null |
Description
The border color of the hovered PanelBar header. | |||
$kendo-panelbar-header-hover-gradient | Null | null | null |
Description
The gradient of the hovered PanelBar header. | |||
$kendo-panelbar-header-focus-bg | Null | null | null |
Description
The background color of the focused PanelBar header. | |||
$kendo-panelbar-header-focus-text | Null | null | null |
Description
The text color of the focused PanelBar header. | |||
$kendo-panelbar-header-focus-border | Null | null | null |
Description
The border color of the focused PanelBar header. | |||
$kendo-panelbar-header-focus-gradient | Null | null | null |
Description
The gradient of the focused PanelBar header. | |||
$kendo-panelbar-header-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The shadow of the focused PanelBar header. | |||
$kendo-panelbar-header-hover-focus-bg | Null | null | null |
Description
The background color of the focused and hovered PanelBar header. | |||
$kendo-panelbar-header-hover-focus-text | Null | null | null |
Description
The text color of the focused and hovered PanelBar header. | |||
$kendo-panelbar-header-hover-focus-border | Null | null | null |
Description
The border color of the focused and hovered PanelBar header. | |||
$kendo-panelbar-header-hover-focus-gradient | Null | null | null |
Description
The gradient of the focused and hovered PanelBar header. | |||
$kendo-panelbar-header-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected PanelBar header. | |||
$kendo-panelbar-header-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected PanelBar header. | |||
$kendo-panelbar-header-selected-border | Null | null | null |
Description
The border color of the selected PanelBar header. | |||
$kendo-panelbar-header-selected-gradient | Null | null | null |
Description
The gradient of the selected PanelBar header. | |||
$kendo-panelbar-header-selected-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the selected and hovered PanelBar header. | |||
$kendo-panelbar-header-selected-hover-text | Null | null | null |
Description
The text color of the selected and hovered PanelBar header. | |||
$kendo-panelbar-header-selected-hover-border | Null | null | null |
Description
The border color of the selected and hovered PanelBar header. | |||
$kendo-panelbar-header-selected-hover-gradient | Null | null | null |
Description
The gradient of the selected and hovered PanelBar header. | |||
$kendo-panelbar-header-selected-focus-bg | Null | null | null |
Description
The background color of the selected and focused PanelBar header. | |||
$kendo-panelbar-header-selected-focus-text | Null | null | null |
Description
The text color of the selected and focused PanelBar header. | |||
$kendo-panelbar-header-selected-focus-border | Null | null | null |
Description
The border color of the selected and focused PanelBar header. | |||
$kendo-panelbar-header-selected-focus-gradient | Null | null | null |
Description
The gradient of the selected and focused PanelBar header. | |||
$kendo-panelbar-header-selected-hover-focus-bg | Null | null | null |
Description
The background color of the selected, hovered and focused PanelBar header. | |||
$kendo-panelbar-header-selected-hover-focus-text | Null | null | null |
Description
The text color of the selected, hovered and focused PanelBar header. | |||
$kendo-panelbar-header-selected-hover-focus-border | Null | null | null |
Description
The border color of the selected, hovered and focused PanelBar header. | |||
$kendo-panelbar-header-selected-hover-focus-gradient | Null | null | null |
Description
The gradient of the selected, hovered and focused PanelBar header. | |||
$kendo-panelbar-item-hover-bg | String | if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, 1 )) | var(--kendo-color-base-hover, #ced4da) |
Description
The background color of the hovered PanelBar items. | |||
$kendo-panelbar-item-hover-text | Null | null | null |
Description
The text color of the hovered PanelBar items. | |||
$kendo-panelbar-item-hover-border | Null | null | null |
Description
The border color of the hovered PanelBar items. | |||
$kendo-panelbar-item-hover-gradient | Null | null | null |
Description
The gradient of the hovered PanelBar items. | |||
$kendo-panelbar-item-focus-bg | Null | null | null |
Description
The background color of the focused PanelBar items. | |||
$kendo-panelbar-item-focus-text | Null | null | null |
Description
The text color of the focused PanelBar items. | |||
$kendo-panelbar-item-focus-border | Null | null | null |
Description
The border color of the focused PanelBar items. | |||
$kendo-panelbar-item-focus-gradient | Null | null | null |
Description
The gradient of the focused PanelBar items. | |||
$kendo-panelbar-item-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The box shadow of the focused PanelBar items. | |||
$kendo-panelbar-item-hover-focus-bg | Null | null | null |
Description
The background color of the focused and hovered PanelBar items. | |||
$kendo-panelbar-item-hover-focus-text | Null | null | null |
Description
The text color of the focused and hovered PanelBar items. | |||
$kendo-panelbar-item-hover-focus-border | Null | null | null |
Description
The border color of the focused and hovered PanelBar items. | |||
$kendo-panelbar-item-hover-focus-gradient | Null | null | null |
Description
The gradient of the focused and hovered PanelBar items. | |||
$kendo-panelbar-item-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected PanelBar items. | |||
$kendo-panelbar-item-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected PanelBar items. | |||
$kendo-panelbar-item-selected-border | Null | null | null |
Description
The border color of the selected PanelBar items. | |||
$kendo-panelbar-item-selected-gradient | Null | null | null |
Description
The gradient of the selected PanelBar items. | |||
$kendo-panelbar-item-selected-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the selected and hovered PanelBar items. | |||
$kendo-panelbar-item-selected-hover-text | Null | null | null |
Description
The text color of the selected and hovered PanelBar items. | |||
$kendo-panelbar-item-selected-hover-border | Null | null | null |
Description
The border color of the selected and hovered PanelBar items. | |||
$kendo-panelbar-item-selected-hover-gradient | Null | null | null |
Description
The gradient of the selected and hovered PanelBar items. | |||
$kendo-panelbar-item-selected-focus-bg | Null | null | null |
Description
The background color of the selected and focused PanelBar items. | |||
$kendo-panelbar-item-selected-focus-text | Null | null | null |
Description
The text color of the selected and focused PanelBar items. | |||
$kendo-panelbar-item-selected-focus-border | Null | null | null |
Description
The border color of the selected and focused PanelBar items. | |||
$kendo-panelbar-item-selected-focus-gradient | Null | null | null |
Description
The gradient of the selected and focused PanelBar items. | |||
$kendo-panelbar-item-selected-hover-focus-bg | Null | null | null |
Description
The background color of the selected, hovered and focused PanelBar items. | |||
$kendo-panelbar-item-selected-hover-focus-text | Null | null | null |
Description
The text color of the selected, hovered and focused PanelBar items. | |||
$kendo-panelbar-item-selected-hover-focus-border | Null | null | null |
Description
The border color of the selected, hovered and focused PanelBar items. | |||
$kendo-panelbar-item-selected-hover-focus-gradient | Null | null | null |
Description
The gradient of the selected, hovered and focused PanelBar items. | |||
$kendo-panelbar-header-expanded-bg | Null | null | null |
Description
The background color of the expanded PanelBar header. | |||
$kendo-panelbar-header-expanded-text | Null | null | null |
Description
The text color of the expanded PanelBar header. | |||
$kendo-panelbar-header-expanded-border | Null | null | null |
Description
The border color of the expanded PanelBar header. | |||
$kendo-panelbar-header-expanded-gradient | Null | null | null |
Description
The gradient of the expanded PanelBar header. |
Pdf-viewer
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-pdf-viewer-border-width | Number | 1px | 1px |
Description
The border width of the PDFViewer. | |||
$kendo-pdf-viewer-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the PDFViewer. | |||
$kendo-pdf-viewer-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the PDFViewer. | |||
$kendo-pdf-viewer-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the PDFViewer. | |||
$kendo-pdf-viewer-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the PDFViewer. | |||
$kendo-pdf-viewer-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the PDFViewer. | |||
$kendo-pdf-viewer-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the PDFViewer. | |||
$kendo-pdf-viewer-toolbar-bg | Null | null | null |
Description
The background color of the PDFViewer Toolbar. | |||
$kendo-pdf-viewer-toolbar-text | Null | null | null |
Description
The text color of the PDFViewer Toolbar. | |||
$kendo-pdf-viewer-toolbar-border | Null | null | null |
Description
The border color of the PDFViewer Toolbar. | |||
$kendo-pdf-viewer-toolbar-gradient | Null | null | null |
Description
The gradient of the PDFViewer Toolbar. | |||
$kendo-pdf-viewer-canvas-bg | String | $kendo-app-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the PDFViewer canvas. | |||
$kendo-pdf-viewer-canvas-text | Null | null | null |
Description
The text color of the PDFViewer canvas. | |||
$kendo-pdf-viewer-canvas-border | Null | null | null |
Description
The border color of the PDFViewer canvas. | |||
$kendo-pdf-viewer-page-spacing | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The spacing of the PDFViewer page. | |||
$kendo-pdf-viewer-page-bg | Color | white | white |
Description
The background color of the PDFViewer page. | |||
$kendo-pdf-viewer-page-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the PDFViewer page. | |||
$kendo-pdf-viewer-page-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the PDFViewer page. | |||
$kendo-pdf-viewer-page-shadow | String | k-elevation(3) | var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1)) |
Description
The shadow of the PDFViewer page. | |||
$kendo-pdf-viewer-search-panel-padding-x | String | $kendo-toolbar-md-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-padding-y | Calculation | calc( #{$kendo-toolbar-md-padding-x} * 2 ) | calc(var(--kendo-spacing-2, 0.5rem) * 2) |
Description
The vertical padding of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-spacing | String | $kendo-toolbar-md-spacing | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-border-width | Number | 1px | 1px |
Description
The border width of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-border-radius | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The border radius of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-shadow | Null | null | null |
Description
The shadow of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-matches-spacing | String | $kendo-padding-sm-x | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the matches container in the PDFViewer search panel. | |||
$kendo-pdf-viewer-selection-line-height | Number | 1.2 | 1.2 |
Description
The line height of the PDFViewer selection. | |||
$kendo-pdf-viewer-search-highlight-bg | String | $kendo-body-text | var(--kendo-color-on-app-surface, #212529) |
Description
The background color of the PDFViewer highlight. | |||
$kendo-pdf-viewer-search-highlight-mark-bg | Color | yellow | yellow |
Description
The background color of the PDFViewer highlight mark. | |||
$kendo-pdf-viewer-icon-text | String | $kendo-dropzone-icon-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the PDFViewer icon. |
Picker
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-picker-bg | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The background color of the Picker components. | |||
$kendo-picker-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the Picker components. | |||
$kendo-picker-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The border color of the Picker components. | |||
$kendo-picker-gradient | Null | $kendo-button-gradient | null |
Description
The gradient of the Picker components. | |||
$kendo-picker-shadow | Null | $kendo-button-shadow | null |
Description
The shadow of the Picker components. | |||
$kendo-picker-hover-bg | String | $kendo-button-hover-bg | var(--kendo-color-base-hover, #ced4da) |
Description
The background color of the hovered Picker components. | |||
$kendo-picker-hover-text | Null | $kendo-button-hover-text | null |
Description
The text color of the hovered Picker components. | |||
$kendo-picker-hover-border | String | $kendo-button-hover-border | var(--kendo-color-base-hover, #ced4da) |
Description
The border color of the hovered Picker components. | |||
$kendo-picker-hover-gradient | Null | $kendo-button-hover-gradient | null |
Description
The gradient of the hovered Picker components. | |||
$kendo-picker-hover-shadow | Null | $kendo-button-hover-shadow | null |
Description
The shadow of the hovered Picker components. | |||
$kendo-picker-focus-bg | String | $kendo-button-active-bg | var(--kendo-color-base-active, #bdc4cb) |
Description
The background color of the focused Picker components. | |||
$kendo-picker-focus-text | Null | $kendo-button-focus-text | null |
Description
The text color of the focused Picker components. | |||
$kendo-picker-focus-border | String | $kendo-button-focus-border | var(--kendo-color-base-active, #bdc4cb) |
Description
The border color of the focused Picker components. | |||
$kendo-picker-focus-gradient | Null | $kendo-button-focus-gradient | null |
Description
The gradient of the focused Picker components. | |||
$kendo-picker-focus-shadow | List | $kendo-button-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent) |
Description
The shadow of the focused Picker components. | |||
$kendo-picker-disabled-bg | Null | null | null |
Description
The background color of the disabled Picker components. | |||
$kendo-picker-disabled-text | Null | null | null |
Description
The text color of the disabled Picker components. | |||
$kendo-picker-disabled-border | Null | null | null |
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 | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the outline Picker components. | |||
$kendo-picker-outline-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent) |
Description
The border color of the outline Picker components. | |||
$kendo-picker-outline-hover-bg | String | $kendo-picker-outline-text | var(--kendo-color-on-base, #212529) |
Description
The background color of the outline hovered Picker components. | |||
$kendo-picker-outline-hover-text | String | if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The text color of the outline hovered Picker components. | |||
$kendo-picker-outline-hover-border | String | $kendo-picker-outline-hover-bg | var(--kendo-color-on-base, #212529) |
Description
The border color of the outline hovered Picker components. | |||
$kendo-picker-outline-focus-bg | Null | null | null |
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 | Null | null | null |
Description
The border color of the outline focused Picker components. | |||
$kendo-picker-outline-focus-shadow | List | $kendo-picker-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent) |
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 | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the flat Picker components. | |||
$kendo-picker-flat-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The border color of the flat Picker components. | |||
$kendo-picker-flat-hover-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 8%, transparent) |
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-hover-border | Null | null | null |
Description
The border 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 | Null | null | null |
Description
The border color of the flat focused Picker components. | |||
$kendo-picker-flat-focus-shadow | List | $kendo-picker-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent) |
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. |
Popover
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-popover-border-width | Number | $kendo-card-border-width | 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 | 0.375rem |
Description
The radius of the border around the Popover. | |||
$kendo-popover-font-family | String | $kendo-card-font-family | var(--kendo-font-family, inherit) |
Description
The font family of the Popover. | |||
$kendo-popover-font-size | String | $kendo-card-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the Popover. | |||
$kendo-popover-line-height | String | $kendo-card-line-height | var(--kendo-line-height, normal) |
Description
The line height of the Popover. | |||
$kendo-popover-text | String | $kendo-card-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Popover. | |||
$kendo-popover-bg | String | $kendo-card-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Popover. | |||
$kendo-popover-border | String | $kendo-card-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Popover. | |||
$kendo-popover-shadow | Null | $kendo-card-shadow | null |
Description
The box shadow of the Popover. | |||
$kendo-popover-header-padding-x | Number | $kendo-card-header-padding-x | 1rem |
Description
The horizontal padding of the Popover header. | |||
$kendo-popover-header-padding-y | Number | $kendo-card-header-padding-y | 1rem |
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 | null | null |
Description
The text color of the Popover header. | |||
$kendo-popover-header-bg | Null | null | null |
Description
The background color of the Popover header. | |||
$kendo-popover-header-border | Null | null | null |
Description
The border color of the Popover header. | |||
$kendo-popover-body-padding-x | Number | $kendo-card-body-padding-x | 1rem |
Description
The horizontal padding of the Popover body. | |||
$kendo-popover-body-padding-y | Number | $kendo-card-body-padding-y | 1rem |
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 | 1.3em |
Description
The width of the Popover callout. | |||
$kendo-popover-callout-height | Number | $kendo-card-callout-height | 1.3em |
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 | String | $kendo-popover-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Popover callout. | |||
$kendo-popover-callout-border | String | $kendo-popover-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | 1px | 1px |
Description
Width of the border around the popup. | |||
$kendo-popup-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
Border radius of the popup. | |||
$kendo-popup-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
Font size of the popup. | |||
$kendo-popup-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
Line height of the popup. | |||
$kendo-popup-content-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
Horizontal padding of the popup content. | |||
$kendo-popup-content-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
Vertical padding of the popup content. | |||
$kendo-popup-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
Background color of the popup. | |||
$kendo-popup-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
Text color of the popup. | |||
$kendo-popup-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
Border color of the popup. | |||
$kendo-popup-shadow | String | k-elevation(4) | var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125)) |
Description
Box shadow of the popup. |
Progressbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-progressbar-height | Number | $progress-height | 1rem |
Description
The height of the ProgressBar. | |||
$kendo-progressbar-horizontal-width | Number | 100% | 100% |
Description
The horizontal width of the ProgressBar. | |||
$kendo-progressbar-animation-timing | List | $progress-bar-animation-timing | 1s linear infinite |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ProgressBar. | |||
$kendo-progressbar-font-size | Number | $progress-font-size | 0.75rem |
Description
The font size of the ProgressBar. | |||
$kendo-progressbar-line-height | Number | 1 | 1 |
Description
The line height of the ProgressBar. | |||
$kendo-progressbar-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The background color of the ProgressBar. | |||
$kendo-progressbar-text | String | if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $gray-200 )) | var(--kendo-color-base-on-subtle, #212529) |
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 | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The progress background color of the ProgressBar. | |||
$kendo-progressbar-value-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
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 | String | $kendo-progressbar-bg | var(--kendo-color-base-subtle, #e9ecef) |
Description
The background color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-text | String | $kendo-progressbar-text | var(--kendo-color-base-on-subtle, #212529) |
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 | String | $kendo-body-bg | var(--kendo-color-app-surface, #ffffff) |
Description
The border color of the chunk ProgressBar. | |||
$kendo-circular-progressbar-arc-stroke | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The arc stroke color of the circular ProgressBar. | |||
$kendo-circular-progressbar-scale-stroke | String | $kendo-progressbar-bg | var(--kendo-color-base-subtle, #e9ecef) |
Description
The scale stroke background color of the circular ProgressBar. |
Prompt
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-prompt-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Prompt. | |||
$kendo-prompt-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Prompt. | |||
$kendo-prompt-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Prompt. | |||
$kendo-prompt-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Prompt header. | |||
$kendo-prompt-header-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Prompt header. | |||
$kendo-prompt-header-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Prompt header. | |||
$kendo-prompt-content-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the Prompt content. | |||
$kendo-prompt-content-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Prompt content. | |||
$kendo-prompt-content-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the items of the Prompt content. | |||
$kendo-prompt-content-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Prompt content. | |||
$kendo-prompt-content-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Prompt content. | |||
$kendo-prompt-content-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The text border of the Prompt content. | |||
$kendo-prompt-expander-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the items of the Prompt content expander. | |||
$kendo-prompt-suggestion-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-bg | String | $kendo-body-bg | var(--kendo-color-app-surface, #ffffff) |
Description
The background color of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-shadow | String | k-elevation(1) | var(--kendo-elevation-1, 0px 1px 2px rgba(0, 0, 0, 0.038)) |
Description
The elevation of the Prompt suggestion container. |
Radii
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-border-radius | Number | $border-radius | 0.375rem |
Description
The global border radius used across the Components. | |||
$kendo-border-radius-none | Number | k-map-get($kendo-spacing, 0) | 0px |
Description
The none border radius used across the Components. | |||
$kendo-border-radius-xs | Number | k-map-get($kendo-spacing, 0.5) | 0.125rem |
Description
The extra small border radius used across the Components. | |||
$kendo-border-radius-sm | Number | $border-radius-sm | 0.25rem |
Description
The small border radius used across the Components. | |||
$kendo-border-radius-md | Number | $kendo-border-radius | 0.375rem |
Description
The medium border radius used across the Components. | |||
$kendo-border-radius-lg | Number | $border-radius-lg | 0.5rem |
Description
The large border radius used across the Components. | |||
$kendo-border-radius-xl | Number | k-map-get($kendo-spacing, 3) | 0.75rem |
Description
The extra large border radius used across the Components. | |||
$kendo-border-radius-xxl | Number | k-map-get($kendo-spacing, 4) | 1rem |
Description
The third largest border radius used across the Components. | |||
$kendo-border-radius-xxxl | Number | k-map-get($kendo-spacing, 8) | 2rem |
Description
The second largest border radius used across the Components. | |||
$kendo-border-radius-full | Number | 50rem | 50rem |
Description
The largest border radius used across the Components. | |||
$kendo-border-radii | Map | (
xs: $kendo-border-radius-xs,
sm: $kendo-border-radius-sm,
md: $kendo-border-radius-md,
lg: $kendo-border-radius-lg,
xl: $kendo-border-radius-xl,
xxl: $kendo-border-radius-xxl,
xxxl: $kendo-border-radius-xxxl,
full: $kendo-border-radius-full
) | (none: 0px, xs: 0.125rem, sm: 0.25rem, md: 0.375rem, lg: 0.5rem, xl: 0.75rem, xxl: 1rem, xxxl: 2rem, full: 50rem) |
Description
The global radii Map. |
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 | 1px | 1px |
Description
The border width of the RadioButton. | |||
$kendo-radio-sm-size | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The size of a small RadioButton. | |||
$kendo-radio-md-size | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The size of a medium RadioButton. | |||
$kendo-radio-lg-size | String | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) |
Description
The size of a large RadioButton. | |||
$kendo-radio-sm-glyph-size | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The glyph size of a small RadioButton. | |||
$kendo-radio-md-glyph-size | String | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) |
Description
The glyph size of a medium RadioButton. | |||
$kendo-radio-lg-glyph-size | String | k-spacing(4.5) | var(--kendo-spacing-4\.5, 1.125rem) |
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: var(--kendo-spacing-3, 0.75rem), glyph-size: var(--kendo-spacing-2\.5, 0.625rem), ripple-size: 300%), md: (size: var(--kendo-spacing-4, 1rem), glyph-size: var(--kendo-spacing-3\.5, 0.875rem), ripple-size: 300%), lg: (size: var(--kendo-spacing-5, 1.25rem), glyph-size: var(--kendo-spacing-4\.5, 1.125rem), ripple-size: 300%)) |
Description
The map with the different RadioButton sizes. | |||
$kendo-radio-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the RadioButton. | |||
$kendo-radio-text | Null | $kendo-checkbox-text | null |
Description
The text color of radio button. | |||
$kendo-radio-border | String | $kendo-checkbox-border | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of the RadioButton. | |||
$kendo-radio-hover-bg | Null | $kendo-checkbox-hover-bg | null |
Description
The background color of the hovered RadioButton. | |||
$kendo-radio-hover-text | Null | $kendo-checkbox-hover-text | null |
Description
The text color of the hovered RadioButton. | |||
$kendo-radio-hover-border | Null | $kendo-checkbox-hover-border | null |
Description
The border color of the hovered RadioButton. | |||
$kendo-radio-checked-bg | String | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the checked RadioButton. | |||
$kendo-radio-checked-text | String | $kendo-checkbox-checked-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the checked RadioButton. | |||
$kendo-radio-checked-border | String | $kendo-checkbox-checked-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the checked RadioButton. | |||
$kendo-radio-focus-border | String | $kendo-checkbox-focus-border | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
Description
The border color of the focused RadioButton. | |||
$kendo-radio-focus-shadow | List | $kendo-checkbox-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The box shadow of the focused RadioButton. | |||
$kendo-radio-focus-checked-border | String | $kendo-checkbox-focus-checked-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the focused and checked RadioButton. | |||
$kendo-radio-focus-checked-shadow | List | $kendo-checkbox-focus-checked-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The box shadow of the focused and checked RadioButton. | |||
$kendo-radio-disabled-bg | Null | $kendo-checkbox-disabled-bg | null |
Description
The background color of the disabled RadioButton. | |||
$kendo-radio-disabled-text | Null | $kendo-checkbox-disabled-text | null |
Description
The color of the disabled RadioButton. | |||
$kendo-radio-disabled-border | Null | $kendo-checkbox-disabled-border | null |
Description
The border color of the disabled RadioButton. | |||
$kendo-radio-disabled-checked-bg | Null | $kendo-checkbox-disabled-checked-bg | null |
Description
The background color of the disabled and checked RadioButton. | |||
$kendo-radio-disabled-checked-text | Null | $kendo-checkbox-disabled-checked-text | null |
Description
The color of the disabled and checked RadioButton. | |||
$kendo-radio-disabled-checked-border | Null | $kendo-checkbox-disabled-checked-border | null |
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 | String | $kendo-checkbox-invalid-text | var(--kendo-color-error, #dc3545) |
Description
The text color of the invalid RadioButton. | |||
$kendo-radio-invalid-border | String | $kendo-checkbox-invalid-border | var(--kendo-color-error, #dc3545) |
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='-4 -4 8 8'%3e%3ccircle r='2' fill='var%28--kendo-color-on-primary, %23ffffff%29'/%3e%3c/svg%3e") |
Description
The image of the checked RadioButton indicator. | |||
$kendo-radio-disabled-checked-image | Null | null | null |
Description
The image of the disabled and checked RadioButton indicator. | |||
$kendo-radio-label-margin-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal margin of the RadioButton inside of a label. | |||
$kendo-radio-list-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal list item margin of the RadioButton. | |||
$kendo-radio-list-item-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal list item padding of the RadioButton. | |||
$kendo-radio-list-item-padding-y | String | $kendo-list-md-item-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical list item padding of the RadioButton. | |||
$kendo-radio-ripple-bg | String | $kendo-radio-checked-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the RadioButton ripple. | |||
$kendo-radio-ripple-opacity | Number | .25 | 0.25 |
Description
The opacity of the RadioButton ripple. |
Rating
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-rating-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Rating. | |||
$kendo-rating-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Rating. | |||
$kendo-rating-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Rating. | |||
$kendo-rating-container-margin-x | String | $kendo-padding-sm-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal margin of the Rating container. | |||
$kendo-rating-item-padding-x | String | $kendo-padding-sm-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Rating item. | |||
$kendo-rating-item-padding-y | String | $kendo-padding-md-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Rating item. | |||
$kendo-rating-label-margin-x | String | $kendo-padding-md-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal margin of the Rating label. | |||
$kendo-rating-label-margin-y | String | $kendo-padding-md-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical margin of the Rating label. | |||
$kendo-rating-label-line-height | Number | $kendo-line-height-lg | 2 |
Description
The line height of the Rating label. | |||
$kendo-rating-icon-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Rating icon. | |||
$kendo-rating-icon-selected-text | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the selected Rating icon. | |||
$kendo-rating-icon-hover-text | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the hovered Rating icon. | |||
$kendo-rating-icon-focus-text | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the focused Rating icon. | |||
$kendo-rating-icon-focus-shadow | List | 0 2px 4px rgba( black, .1 ) | 0 2px 4px rgba(0, 0, 0, 0.1) |
Description
The shadow of the focused Rating icon. | |||
$kendo-rating-icon-focus-selected-shadow | List | 0 2px 4px rgba( black, .1) | 0 2px 4px rgba(0, 0, 0, 0.1) |
Description
The shadow of the focused and selected Rating icon. |
Scheduler
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-scheduler-border-width | Number | 1px | 1px |
Description
The width of the border around the Scheduler. | |||
$kendo-scheduler-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Scheduler. | |||
$kendo-scheduler-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Scheduler. | |||
$kendo-scheduler-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Scheduler. | |||
$kendo-scheduler-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Scheduler. | |||
$kendo-scheduler-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Scheduler. | |||
$kendo-scheduler-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Scheduler. | |||
$kendo-scheduler-toolbar-bg | String | $kendo-toolbar-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Scheduler ToolBar. | |||
$kendo-scheduler-toolbar-text | String | $kendo-toolbar-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Scheduler ToolBar. | |||
$kendo-scheduler-toolbar-border | String | $kendo-toolbar-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Scheduler ToolBar. | |||
$kendo-scheduler-toolbar-gradient | Null | $kendo-toolbar-gradient | null |
Description
The gradient of the Scheduler ToolBar. | |||
$kendo-scheduler-footer-bg | String | $kendo-toolbar-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Scheduler footer. | |||
$kendo-scheduler-footer-text | String | $kendo-toolbar-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Scheduler footer. | |||
$kendo-scheduler-footer-border | String | $kendo-toolbar-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Scheduler footer. | |||
$kendo-scheduler-footer-gradient | Null | $kendo-toolbar-gradient | null |
Description
The gradient of the Scheduler footer. | |||
$kendo-scheduler-event-min-height | Number | 25px | 25px |
Description
The minimum height of the Scheduler event. | |||
$kendo-scheduler-event-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Scheduler event. | |||
$kendo-scheduler-event-line-height | Calculation | calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) | calc(25px - 2 * var(--kendo-spacing-1, 0.25rem)) |
Description
The line height of the Scheduler event. | |||
$kendo-scheduler-event-bg | String | if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Scheduler event. | |||
$kendo-scheduler-event-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Scheduler event. | |||
$kendo-scheduler-event-border | Null | null | null |
Description
The border color of the Scheduler event. | |||
$kendo-scheduler-event-gradient | Null | null | null |
Description
The gradient of the Scheduler event. | |||
$kendo-scheduler-event-shadow | Null | null | null |
Description
The shadow of the Scheduler event. | |||
$kendo-scheduler-event-hover-bg | Null | null | null |
Description
The background color of the hovered Scheduler event. | |||
$kendo-scheduler-event-hover-text | Null | null | null |
Description
The text color of the hovered Scheduler event. | |||
$kendo-scheduler-event-hover-border | Null | null | null |
Description
The border color of the hovered Scheduler event. | |||
$kendo-scheduler-event-hover-gradient | Null | null | null |
Description
The gradient of the hovered Scheduler event. | |||
$kendo-scheduler-event-hover-shadow | Null | null | null |
Description
The shadow of the hovered Scheduler event. | |||
$kendo-scheduler-event-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected Scheduler event. | |||
$kendo-scheduler-event-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected Scheduler event. | |||
$kendo-scheduler-event-selected-border | Null | null | null |
Description
The border color of the selected Scheduler event. | |||
$kendo-scheduler-event-selected-gradient | Null | null | null |
Description
The gradient of the selected Scheduler event. | |||
$kendo-scheduler-event-selected-shadow | List | inset 0 0 0 3px rgba( white, .5 ) | inset 0 0 0 3px rgba(255, 255, 255, 0.5) |
Description
The shadow of the selected Scheduler event. | |||
$kendo-scheduler-event-ongoing-shadow | List | inset 0px 0px 0px 1px #ff0000 | inset 0px 0px 0px 1px #ff0000 |
Description
The shadow of the ongoing Scheduler event. | |||
$kendo-scheduler-cell-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Scheduler cell. | |||
$kendo-scheduler-cell-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Scheduler cell. | |||
$kendo-scheduler-cell-height | Calculation | $kendo-line-height-em | calc(1.5 * 1em) |
Description
The height of the Scheduler cell. | |||
$kendo-scheduler-datecolumn-width | Number | 12em | 12em |
Description
The width of the Scheduler date column. | |||
$kendo-scheduler-timecolumn-width | Number | 11em | 11em |
Description
The width of the Scheduler time column. | |||
$kendo-scheduler-nonwork-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The background color of the non-working hours in the Scheduler. | |||
$kendo-scheduler-nonwork-text | Null | null | null |
Description
The text color of the non-working hours in the Scheduler. | |||
$kendo-scheduler-weekend-bg | Null | null | null |
Description
The background color of the weekends in the Scheduler. | |||
$kendo-scheduler-weekend-text | Null | null | null |
Description
The text color of the weekends in the Scheduler. | |||
$kendo-scheduler-othermonth-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The background color of the preceding/subsequent month cells in the Calendar. | |||
$kendo-scheduler-othermonth-text | Null | null | null |
Description
The text color of the preceding/subsequent month cells in the Calendar. | |||
$kendo-scheduler-yearview-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-padding-y | String | $kendo-scheduler-yearview-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-calendar-gap | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the calendars of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-indicator-size | Number | 3px | 3px |
Description
The days with events indicator size of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-indicator-calc-offset-top | Calculation | calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) | calc(38px - var(--kendo-spacing-1, 0.25rem) * 2) |
Description
The top position of the days with events indicator of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-indicator-calc-offset-left | Calculation | calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2)} ) | calc(50% - 1.5px) |
Description
The left position of the days with events indicator of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-indicator-border-radius | Number | 50% | 50% |
Description
The border radius of the days with events indicator of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-indicator-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the days with events indicator of the year view in the Scheduler. | |||
$kendo-scheduler-yearview-indicator-selected-bg | String | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) |
Description
The background color of the selected days with events indicator of the year view in the Scheduler. | |||
$kendo-scheduler-tooltip-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-border-width | Number | 0 | 0 |
Description
The width of the border of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-bg | String | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) |
Description
The background color of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-text | String | $kendo-base-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-border | Null | null | null |
Description
The border color of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-shadow | String | k-elevation(2) | var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075)) |
Description
The shadow of the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-title-margin-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical margin of the Scheduler Tooltip title. | |||
$kendo-scheduler-tooltip-month-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the month inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-day-font-size | Calculation | calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 2 ) | calc(var(--kendo-font-size-sm, 0.875rem) * 2) |
Description
The font size of the day inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-events-max-height | Number | 250px | 250px |
Description
The max height of the events inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-events-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the events inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-event-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the events inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-event-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the events inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-event-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the events inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-event-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the events items inside the Scheduler Tooltip. | |||
$kendo-scheduler-tooltip-callout-text | String | $kendo-scheduler-tooltip-bg | var(--kendo-color-on-primary, #ffffff) |
Description
The color of the Scheduler Tooltip callout. |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ScrollView. | |||
$kendo-scrollview-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the ScrollView. | |||
$kendo-scrollview-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the ScrollView. | |||
$kendo-scrollview-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the ScrollView. | |||
$kendo-scrollview-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the ScrollView. | |||
$kendo-scrollview-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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 | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The primary background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
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 | String | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) |
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} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) | calc(10px + 0px + var(--kendo-spacing-5, 1.25rem) * 2) |
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. |
Skeleton
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-skeleton-text-transform | String | scale( 1, .6 ) | scale(1, 0.6) |
Description
The transform scale of the Skeleton text. | |||
$kendo-skeleton-text-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Skeleton text. | |||
$kendo-skeleton-rect-border-radius | Number | 0 | 0 |
Description
The border radius of the rectangular Skeleton. | |||
$kendo-skeleton-circle-border-radius | Number | 9999px | 9999px |
Description
The border radius of the circular Skeleton. | |||
$kendo-skeleton-item-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 20%, transparent) |
Description
The background color of the Skeleton item. | |||
$kendo-skeleton-wave-bg | Color | rgba( black, .04 ) | rgba(0, 0, 0, 0.04) |
Description
The background color of the Skeleton wave animation. |
Slider
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-slider-size | Number | 200px | 200px |
Description
The default size of the Slider. | |||
$kendo-slider-tick-size | Null | null | null |
Description
The default size of the Slider tick. | |||
$kendo-slider-alt-size | Number | 30px | 30px |
Description
The default size of the Slider's track wrap. | |||
$kendo-slider-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Slider. | |||
$kendo-slider-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Slider. | |||
$kendo-slider-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Slider. | |||
$kendo-slider-button-offset | Number | 10px | 10px |
Description
The offset of the Slider Buttons. | |||
$kendo-slider-button-size | Number | ($kendo-slider-alt-size - 2) | 28px |
Description
The size of the Slider Buttons. | |||
$kendo-slider-button-spacing | Number | ($kendo-slider-button-size + $kendo-slider-button-offset) | 38px |
Description
The spacing of the Slider Buttons. | |||
$kendo-slider-button-focus-shadow | List | $kendo-button-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent) |
Description
The shadow of the focused Slider Buttons. | |||
$kendo-slider-track-thickness | Number | 4px | 4px |
Description
The thickness of the Slider track. | |||
$kendo-slider-draghandle-size | Number | 14px | 14px |
Description
The size of the Slider drag handle. | |||
$kendo-slider-draghandle-border-width | Number | 1px | 1px |
Description
The border width of the Slider drag handle. | |||
$kendo-slider-draghandle-active-scale | Number | 1 | 1 |
Description
The transition scale of the active Slider drag handle. | |||
$kendo-slider-draghandle-active-size | Null | null | null |
Description
The size of the active Slider drag handle. | |||
$kendo-slider-draghandle-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Slider drag handle. | |||
$kendo-slider-draghandle-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Slider drag handle. | |||
$kendo-slider-draghandle-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Slider drag handle. | |||
$kendo-slider-draghandle-gradient | Null | null | null |
Description
The gradient of the Slider drag handle. | |||
$kendo-slider-draghandle-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% )) | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the hovered Slider drag handle. | |||
$kendo-slider-draghandle-hover-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the hovered Slider drag handle. | |||
$kendo-slider-draghandle-hover-border | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% )) | var(--kendo-color-primary-hover, #0c64e4) |
Description
The border color of the hovered Slider drag handle. | |||
$kendo-slider-draghandle-hover-gradient | Null | null | null |
Description
The gradient of the hovered Slider drag handle. | |||
$kendo-slider-draghandle-pressed-bg | String | if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% )) | var(--kendo-color-primary-active, #0a58ca) |
Description
The background color of the active Slider drag handle. | |||
$kendo-slider-draghandle-pressed-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the active Slider drag handle. | |||
$kendo-slider-draghandle-pressed-border | String | if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% )) | var(--kendo-color-primary-active, #0a58ca) |
Description
The border color of the active Slider drag handle. | |||
$kendo-slider-draghandle-pressed-gradient | Null | null | null |
Description
The gradient of the active Slider drag handle. | |||
$kendo-slider-draghandle-focus-shadow | List | 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), rgba( $kendo-color-primary, .5 )) | 0 0 0 3px color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 50%, transparent) |
Description
The shadow of the focused Slider drag handle. | |||
$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 of the Slider. | |||
$kendo-slider-draghandle-transition-speed | Number | .4s | 0.4s |
Description
The transition speed of the Slider drag handle. | |||
$kendo-slider-draghandle-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 drag handle. | |||
$kendo-slider-track-bg | String | if($kendo-enable-color-system, k-color( base-emphasis ), $gray-200) | var(--kendo-color-base-emphasis, rgba(33, 37, 41, 0.34)) |
Description
The background color of the Slider track. | |||
$kendo-slider-selection-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Slider's track selection. | |||
$kendo-slider-disabled-opacity | Null | null | null |
Spacing
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-spacing | Map | $_default-spacing | (0: 0px, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem, 25: 7rem, 26: 8rem, 27: 9rem, 28: 10rem, 29: 11rem, 30: 12rem) |
Description
The global default Spacing map. |
Split-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-split-button-focus-shadow | List | $kendo-button-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent) |
Description
The focus shadow of the SplitButton. | |||
$kendo-split-button-arrow-padding-x | Number | $kendo-button-padding-y | 0.375rem |
Description
The horizontal padding of the arrow Button. | |||
$kendo-split-button-sm-arrow-padding-x | Number | $kendo-button-sm-padding-y | 0.25rem |
Description
The horizontal padding of the small arrow Button. | |||
$kendo-split-button-md-arrow-padding-x | Number | $kendo-button-md-padding-y | 0.375rem |
Description
The horizontal padding of the medium arrow Button. | |||
$kendo-split-button-lg-arrow-padding-x | Number | $kendo-button-lg-padding-y | 0.5rem |
Description
The horizontal padding of the large arrow Button. | |||
$kendo-split-button-arrow-padding-y | Number | $kendo-button-padding-y | 0.375rem |
Description
The vertical padding of the arrow Button. | |||
$kendo-split-button-sm-arrow-padding-y | Number | $kendo-button-sm-padding-y | 0.25rem |
Description
The vertical padding of the small arrow Button. | |||
$kendo-split-button-md-arrow-padding-y | Number | $kendo-button-md-padding-y | 0.375rem |
Description
The vertical padding of the medium arrow Button. | |||
$kendo-split-button-lg-arrow-padding-y | Number | $kendo-button-lg-padding-y | 0.5rem |
Description
The vertical padding of the large arrow Button. |
Splitter
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-splitter-border-width | Number | 1px | 1px |
Description
The width of the border around the Splitter. | |||
$kendo-splitter-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Splitter. | |||
$kendo-splitter-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Splitter. | |||
$kendo-splitter-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Splitter. | |||
$kendo-splitter-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Splitter. | |||
$kendo-splitter-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Splitter. | |||
$kendo-splitter-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Splitter. | |||
$kendo-splitter-splitbar-size | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The size of the Splitter splitbar. | |||
$kendo-splitter-drag-handle-length | Number | 20px | 20px |
Description
The length of the Splitter drag handle. | |||
$kendo-splitter-drag-handle-thickness | Number | 2px | 2px |
Description
The thickness of the Splitter drag handle. | |||
$kendo-splitter-drag-icon-margin | Calculation | calc( #{k-spacing(3.5)} / 2 ) | calc(var(--kendo-spacing-3\.5, 0.875rem) / 2) |
Description
The margin of the Splitter drag handle icon. | |||
$kendo-splitter-collapse-icon-padding-x | Null | null | null |
Description
The horizontal padding of the collapse icon in the Splitter. | |||
$kendo-splitter-collapse-icon-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the collapse icon in the Splitter. | |||
$kendo-splitbar-bg | String | $kendo-base-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Splitter split bar. | |||
$kendo-splitbar-text | String | $kendo-base-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Splitter split bar. | |||
$kendo-splitbar-hover-bg | String | if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The hover background color of the Splitter split bar. | |||
$kendo-splitbar-hover-text | String | $kendo-splitbar-text | var(--kendo-color-on-app-surface, #212529) |
Description
The hover text color of the Splitter split bar. | |||
$kendo-splitbar-selected-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The selected background color of the Splitter split bar. | |||
$kendo-splitbar-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The selected text color of the Splitter split bar. |
Spreadsheet
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-spreadsheet-border-width | Number | 1px | 1px |
Description
The width of the border around the Spreadsheet. | |||
$kendo-spreadsheet-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Spreadsheet. | |||
$kendo-spreadsheet-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Spreadsheet. | |||
$kendo-spreadsheet-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Spreadsheet. | |||
$kendo-spreadsheet-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Spreadsheet. | |||
$kendo-spreadsheet-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet. | |||
$kendo-spreadsheet-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Spreadsheet. | |||
$kendo-spreadsheet-header-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-gradient | Null | $kendo-component-header-gradient | null |
Description
The gradient of the Spreadsheet header. | |||
$kendo-spreadsheet-table-header-bg | String | $kendo-spreadsheet-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-text | String | $kendo-spreadsheet-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-border | String | $kendo-spreadsheet-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-gradient | Null | $kendo-spreadsheet-header-gradient | null |
Description
The gradient of the Spreadsheet table headers. | |||
$kendo-spreadsheet-action-bar-border-width | Number | 1px | 1px |
Description
The border width of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-font-size | String | $kendo-spreadsheet-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-font-family | List | Arial, Verdana, sans-serif | Arial, Verdana, sans-serif |
Description
The font family of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacings of the Spreadsheet action bar. | |||
$kendo-spreadsheet-formula-bar-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The gap of the Spreadsheet formula bar. | |||
$kendo-spreadsheet-formula-input-padding-x | Number | $kendo-input-padding-x | 0.75rem |
Description
The horizontal padding of the Spreadsheet formula input. | |||
$kendo-spreadsheet-formula-input-padding-y | Number | $kendo-input-padding-y | 0.375rem |
Description
The vertical padding of the Spreadsheet formula input. | |||
$kendo-spreadsheet-formula-input-line-height | Number | $kendo-input-line-height | 1.5 |
Description
The line height of the Spreadsheet formula input. | |||
$kendo-spreadsheet-view-font-family | List | Arial, Verdana, sans-serif | Arial, Verdana, sans-serif |
Description
The font family of the Spreadsheet view. | |||
$kendo-spreadsheet-view-font-size | String | $kendo-spreadsheet-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the Spreadsheet view. | |||
$kendo-spreadsheet-selection-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-text | Null | null | null |
Description
The text color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-border | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-shadow | List | inset 0 0 0 1px $kendo-selected-bg | inset 0 0 0 1px var(--kendo-color-primary, #0d6efd) |
Description
The shadow of the Spreadsheet selection. | |||
$kendo-spreadsheet-single-selection-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-single-selection-text | Null | null | null |
Description
The text color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-single-selection-border | String | $kendo-spreadsheet-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The border color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-partial-selection-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet partial selection. | |||
$kendo-spreadsheet-active-cell-bg | String | $kendo-spreadsheet-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Spreadsheet active cell. | |||
$kendo-spreadsheet-active-cell-shadow | List | inset 0 0 0 1px $kendo-selected-bg | inset 0 0 0 1px var(--kendo-color-primary, #0d6efd) |
Description
The shadow of the Spreadsheet active cell. | |||
$kendo-spreadsheet-auto-fill-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-text | Null | null | null |
Description
The text color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-border | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-shadow | List | inset 0 0 0 1px $kendo-selected-bg | inset 0 0 0 1px var(--kendo-color-primary, #0d6efd) |
Description
The shadow of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-punch-bg | String | rgba( $kendo-spreadsheet-bg, .5 ) | rgba(var(--kendo-color-surface-alt, #ffffff), 0.5) |
Description
The background color of the Spreadsheet auto fill punch. | |||
$kendo-spreadsheet-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the Spreadsheet cell. | |||
$kendo-spreadsheet-cell-padding-x | String | $kendo-spreadsheet-cell-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Spreadsheet cell. | |||
$kendo-spreadsheet-cell-editor-line-height | Number | 20px | 20px |
Description
The line height of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-bg | String | $kendo-spreadsheet-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-text | String | $kendo-spreadsheet-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-border | Null | null | null |
Description
The border color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-resize-handle-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Spreadsheet resize handle. | |||
$kendo-spreadsheet-cell-comment-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet cell comment indicator. | |||
$kendo-spreadsheet-cell-dirty-border | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The border color of the Spreadsheet cell dirty indicator. | |||
$kendo-spreadsheet-sheets-bar-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-sheets-bar-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-sheets-bar-border-width | Number | 1px | 1px |
Description
The border width of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-insert-image-dialog-border-style | String | dashed | dashed |
Description
The border style of the Spreadsheet image Dialog. | |||
$kendo-spreadsheet-insert-image-dialog-border-width | Number | 2px | 2px |
Description
The border width of the Spreadsheet image Dialog. | |||
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The bottom margin of the Spreadsheet image Dialog. | |||
$kendo-spreadsheet-insert-image-dialog-preview-width | Number | 355px | 355px |
Description
The width of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-height | Number | 230px | 230px |
Description
The height of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-img | String | "image-default.png" | "image-default.png" |
Description
The image of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow | List | inset 0 0 0 2000px rgba( black, .5 ) | inset 0 0 0 2000px rgba(0, 0, 0, 0.5) |
Description
The shadow of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Spreadsheet image Dialog preview overlay. | |||
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The text color of the hovered Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-drawing-handle-width | Number | 6px | 6px |
Description
The width of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-height | Number | 6px | 6px |
Description
The height of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-style | String | solid | solid |
Description
The border style of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-width | Number | 1px | 1px |
Description
The border width of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-outline-color | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-color | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The outline color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-radius | String | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.5rem) |
Description
The border radius of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-outline-style | String | solid | solid |
Description
The outline style of the Spreadsheet drawing. | |||
$kendo-spreadsheet-drawing-outline-width | Number | 2px | 2px |
Description
The outline width of the Spreadsheet drawing. | |||
$kendo-spreadsheet-drawing-anchor-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet drawing anchor. | |||
$kendo-spreadsheet-dropzone-spacing-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical spacing of the Spreadsheet DropZone. |
Stepper
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-stepper-margin-x | Null | null | null |
Description
The horizontal margin the Stepper. | |||
$kendo-stepper-margin-y | Null | null | null |
Description
The vertical margin the Stepper. | |||
$kendo-stepper-padding-x | Null | null | null |
Description
The horizontal padding the Stepper. | |||
$kendo-stepper-padding-y | Null | null | null |
Description
The vertical padding the Stepper. | |||
$kendo-stepper-label-margin-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal margin the Stepper label. | |||
$kendo-stepper-label-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding the Stepper label. | |||
$kendo-stepper-label-padding-y | Calculation | calc( #{k-spacing(2.5)} / 2 ) | calc(var(--kendo-spacing-2\.5, 0.625rem) / 2) |
Description
The vertical padding the Stepper label. | |||
$kendo-stepper-border-width | Number | 0px | 0px |
Description
The width of the border around the Stepper. | |||
$kendo-stepper-inline-content-padding-x | String | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) |
Description
The horizontal padding of the Stepper content. | |||
$kendo-stepper-inline-content-padding-y | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The vertical padding of the Stepper content. | |||
$kendo-stepper-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
$kendo-stepper-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
$kendo-stepper-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
$kendo-stepper-bg | Null | null | null |
Description
The background color of the Stepper. | |||
$kendo-stepper-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Stepper. | |||
$kendo-stepper-border | Null | null | null |
Description
The border color of the Stepper. | |||
$kendo-stepper-indicator-width | Number | 28px | 28px |
Description
The width of the Stepper indicator. | |||
$kendo-stepper-indicator-height | Number | $kendo-stepper-indicator-width | 28px |
Description
The height of the Stepper indicator. | |||
$kendo-stepper-indicator-border-radius | Number | 50% | 50% |
Description
The border radius of the Stepper indicator. | |||
$kendo-stepper-indicator-border-width | Number | 1px | 1px |
Description
The border width of the Stepper indicator. | |||
$kendo-stepper-indicator-focus-border-width | Number | 1px | 1px |
Description
The border width of the focused Stepper indicator. | |||
$kendo-stepper-indicator-focus-size | Number | 2px | 2px |
Description
The size of the focused Stepper indicator. | |||
$kendo-stepper-indicator-focus-offset | Number | 3px | 3px |
Description
The offset of the Stepper's focused indicator. | |||
$kendo-stepper-indicator-focus-calc-offset | Calculation | calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) | calc(1px + 3px) |
Description
The calculated offset of the Stepper's focused indicator. | |||
$kendo-stepper-indicator-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Stepper indicator. | |||
$kendo-stepper-indicator-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Stepper indicator. | |||
$kendo-stepper-indicator-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Stepper indicator. | |||
$kendo-stepper-indicator-hover-bg | String | if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) | var(--kendo-color-base-hover, #ced4da) |
Description
The background color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-hover-text | Null | null | null |
Description
The text color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-hover-border | Null | null | null |
Description
The border color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-disabled-bg | Null | null | null |
Description
The background color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-disabled-text | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 65%, transparent), $kendo-disabled-text) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 65%, transparent) |
Description
The text color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-disabled-border | Null | null | null |
Description
The border color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-done-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-border | String | $kendo-stepper-indicator-done-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-hover-text | Null | null | null |
Description
The text color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-hover-border | Null | null | null |
Description
The border color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-disabled-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 60%, transparent) |
Description
The background color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-done-disabled-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-done-disabled-border | String | $kendo-stepper-indicator-done-disabled-bg | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 60%, transparent) |
Description
The border color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-current-bg | String | $kendo-stepper-indicator-done-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Stepper current indicator. | |||
$kendo-stepper-indicator-current-text | String | $kendo-stepper-indicator-done-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Stepper current indicator. | |||
$kendo-stepper-indicator-current-border | String | $kendo-stepper-indicator-done-border | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Stepper current indicator. | |||
$kendo-stepper-indicator-current-hover-bg | String | $kendo-stepper-indicator-done-hover-bg | var(--kendo-color-primary-hover, #0c64e4) |
Description
The background color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-hover-text | Null | $kendo-stepper-indicator-done-hover-text | null |
Description
The text color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-hover-border | Null | $kendo-stepper-indicator-done-hover-border | null |
Description
The border color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-disabled-bg | String | $kendo-stepper-indicator-done-disabled-bg | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 60%, transparent) |
Description
The background color of the Stepper's disabled current indicator. | |||
$kendo-stepper-indicator-current-disabled-text | String | $kendo-stepper-indicator-done-disabled-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Stepper's disabled current indicator. | |||
$kendo-stepper-indicator-current-disabled-border | String | $kendo-stepper-indicator-done-disabled-border | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 60%, transparent) |
Description
The border color of the Stepper's disabled current indicator. | |||
$kendo-stepper-label-text | Null | null | null |
Description
The text color of the Stepper label. | |||
$kendo-stepper-label-success-text | String | $kendo-color-success | var(--kendo-color-success, #198754) |
Description
The success text color of the Stepper label. | |||
$kendo-stepper-label-error-text | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The error text color of the Stepper label. | |||
$kendo-stepper-label-hover-text | Null | null | null |
Description
The text color of the hovered Stepper label. | |||
$kendo-stepper-label-disabled-text | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 65%, transparent), $kendo-disabled-text) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 65%, transparent) |
Description
The text color of the disabled Stepper label. | |||
$kendo-stepper-optional-label-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the optional Stepper label. | |||
$kendo-stepper-optional-label-opacity | Null | null | null |
Description
The opacity of the optional Stepper label. | |||
$kendo-stepper-optional-label-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the optional Stepper label. | |||
$kendo-stepper-optional-label-font-style | Null | null | null |
Description
The font style of the optional Stepper label. | |||
$kendo-stepper-progressbar-size | Number | 2px | 2px |
Description
The size of the Stepper ProgressBar. | |||
$kendo-stepper-progressbar-bg | Null | null | null |
Description
The background color of the Stepper ProgressBar. | |||
$kendo-stepper-progressbar-text | Null | null | null |
Description
The text color of the Stepper ProgressBar. | |||
$kendo-stepper-progressbar-fill-bg | Null | null | null |
Description
The background color of the selected Stepper ProgressBar. | |||
$kendo-stepper-progressbar-fill-text | Null | null | null |
Description
The text color of the selected Stepper ProgressBar. | |||
$kendo-stepper-content-transition-property | String | height | height |
Description
The property name of the Stepper transition. | |||
$kendo-stepper-content-transition-duration | Number | 300ms | 300ms |
Description
The duration of the Stepper transition. | |||
$kendo-stepper-content-transition-timing-function | List | cubic-bezier(.4, 0, .2, 1) 0ms | cubic-bezier(0.4, 0, 0.2, 1) 0ms |
Description
The timing function of the Stepper transition. |
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 | Number | 1px | 1px |
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: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ),
md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ),
lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null )
) | (sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null)) |
Description
The map with the different Switch sizes. | |||
$kendo-switch-off-track-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
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 | String | if($kendo-enable-color-system, k-color( base-emphasis ), $gray-500) | var(--kendo-color-base-emphasis, rgba(33, 37, 41, 0.34)) |
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 | String | if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
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 | List | .25rem solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) | 0.25rem solid color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The ring around the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-disabled-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 )) | var(--kendo-color-base-subtle, #e9ecef) |
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 | String | if($kendo-enable-color-system, k-color( base-emphasis ), $gray-500) | var(--kendo-color-base-emphasis, rgba(33, 37, 41, 0.34)) |
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 | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
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 | String | $kendo-switch-on-track-bg | var(--kendo-color-primary, #0d6efd) |
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 | List | .25rem solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 )) | 0.25rem solid color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
The ring around the track when the focused Switch is checked. | |||
$kendo-switch-on-track-disabled-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), k-try-tint( $kendo-switch-on-track-bg, 50% )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 50%, transparent) |
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 | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg )) | var(--kendo-color-on-primary, #ffffff) |
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 | 0px | 0px |
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: var( --kendo-font-size, inherit ) ,
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y
),
md: (
font-size: var( --kendo-font-size, inherit ) ,
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y
),
lg: (
font-size: var( --kendo-font-size, inherit ) ,
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y
)
) | (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2\.5, 0.625rem))) |
Description
The sizes of the table. | |||
$kendo-table-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
Background color of tables. | |||
$kendo-table-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
Text color of tables. | |||
$kendo-table-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
Border color of tables. | |||
$kendo-table-header-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
Background color of table headers. | |||
$kendo-table-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
Text color of table headers. | |||
$kendo-table-header-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
Border color of table headers. | |||
$kendo-table-header-gradient | Null | $kendo-component-header-gradient | null |
Description
Gradient of table headers. | |||
$kendo-table-footer-bg | String | $kendo-table-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
Background color of table footers. | |||
$kendo-table-footer-text | String | $kendo-table-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
Text color of table footers. | |||
$kendo-table-footer-border | String | $kendo-table-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
Border color of table footers. | |||
$kendo-table-group-row-bg | String | $kendo-table-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
Background color of group rows in table. | |||
$kendo-table-group-row-text | String | $kendo-table-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
Text color of group rows in table. | |||
$kendo-table-group-row-border | String | $kendo-table-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
Border color of group rows in table. | |||
$kendo-table-alt-row-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .04 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 5%, 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 | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .08 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 9%, transparent) |
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 | Null | null | null |
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 | List | inset 0 0 0 2px rgba( $kendo-color-black, .08) | inset 0 0 0 2px rgba(0, 0, 0, 0.08) |
Description
Box shadow of focused rows in table. | |||
$kendo-table-selected-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
Description
Background color of selected rows in table. | |||
$kendo-table-selected-text | String | $kendo-table-text | var(--kendo-color-on-app-surface, #212529) |
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-wrapper-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the TabStrip wrapper. | |||
$kendo-tabstrip-wrapper-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the TabStrip wrapper. | |||
$kendo-tabstrip-wrapper-border-width | Number | 0px | 0px |
Description
The border width around the TabStrip wrapper. | |||
$kendo-tabstrip-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the TabStrip. | |||
$kendo-tabstrip-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the TabStrip. | |||
$kendo-tabstrip-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the TabStrip. | |||
$kendo-tabstrip-border-width | Number | 1px | 1px |
Description
The border width around the TabStrip. | |||
$kendo-tabstrip-wrapper-bg | Null | null | null |
Description
The background color of the TabStrip wrapper. | |||
$kendo-tabstrip-wrapper-text | Null | null | null |
Description
The text color of the TabStrip wrapper. | |||
$kendo-tabstrip-wrapper-border | Null | null | null |
Description
The border color of the TabStrip wrapper. | |||
$kendo-tabstrip-bg | Null | null | null |
Description
The background color of the TabStrip. | |||
$kendo-tabstrip-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the TabStrip. | |||
$kendo-tabstrip-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the TabStrip. | |||
$kendo-tabstrip-item-padding-x | Number | $nav-link-padding-x | 1rem |
Description
The horizontal padding of the TabStrip items. | |||
$kendo-tabstrip-item-padding-y | Number | $nav-link-padding-y | 0.5rem |
Description
The vertical padding of the TabStrip items. | |||
$kendo-tabstrip-item-border-width | Number | 1px | 1px |
Description
The border width around the TabStrip items. | |||
$kendo-tabstrip-item-border-radius | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The border radius of the TabStrip items. | |||
$kendo-tabstrip-item-gap | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The gap between the TabStrip items. | |||
$kendo-tabstrip-item-bg | Null | null | null |
Description
The background color of the TabStrip items. | |||
$kendo-tabstrip-item-text | String | $kendo-link-text | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the TabStrip items. | |||
$kendo-tabstrip-item-border | Null | null | null |
Description
The border color of the TabStrip items. | |||
$kendo-tabstrip-item-gradient | Null | null | null |
Description
The gradient of the TabStrip items. | |||
$kendo-tabstrip-item-hover-bg | Null | null | null |
Description
The background color of the hovered TabStrip items. | |||
$kendo-tabstrip-item-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
Description
The text color of the hovered TabStrip items. | |||
$kendo-tabstrip-item-hover-border | String | if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The border color of the hovered TabStrip items. | |||
$kendo-tabstrip-item-hover-gradient | Null | null | null |
Description
The gradient of the hovered TabStrip items. | |||
$kendo-tabstrip-item-selected-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the selected TabStrip items. | |||
$kendo-tabstrip-item-selected-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the selected TabStrip items. | |||
$kendo-tabstrip-item-selected-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the selected TabStrip items. | |||
$kendo-tabstrip-item-selected-gradient | Null | null | null |
Description
The gradient of the selected TabStrip items. | |||
$kendo-tabstrip-item-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The shadow of the focused TabStrip items. | |||
$kendo-tabstrip-item-dragging-shadow | String | k-elevation(3) | var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1)) |
Description
The shadow of the dragged TabStrip items. | |||
$kendo-tabstrip-item-disabled-bg | Null | null | null |
Description
The background color of the disabled TabStrip items. | |||
$kendo-tabstrip-item-disabled-text | Null | null | null |
Description
The text color of the disabled TabStrip items. | |||
$kendo-tabstrip-item-disabled-border | Null | null | null |
Description
The border color of the disabled TabStrip items. | |||
$kendo-tabstrip-item-disabled-gradient | Null | null | null |
Description
The gradient of the disabled TabStrip items. | |||
$kendo-tabstrip-item-disabled-opacity | Null | null | null |
Description
The opacity of the disabled TabStrip items. | |||
$kendo-tabstrip-item-disabled-filter | Null | null | null |
Description
The filter of the disabled TabStrip items. | |||
$kendo-tabstrip-indicator-size | Null | null | null |
Description
The border width of the TabStrip indicator. | |||
$kendo-tabstrip-indicator-color | Null | null | null |
Description
The border color of the TabStrip ripple. | |||
$kendo-tabstrip-content-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TabStrip content. | |||
$kendo-tabstrip-content-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the TabStrip content. | |||
$kendo-tabstrip-content-border-width | Number | $kendo-tabstrip-border-width | 1px |
Description
The border width around the TabStrip content. | |||
$kendo-tabstrip-content-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the TabStrip content. | |||
$kendo-tabstrip-content-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the TabStrip content. | |||
$kendo-tabstrip-content-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the TabStrip content. | |||
$kendo-tabstrip-content-focus-border | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The border color of the focused TabStrip content. |
Taskboard
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-taskboard-spacer | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing index of the TaskBoard. | |||
$kendo-taskboard-padding-y | Null | null | null |
Description
The vertical padding of the TaskBoard. | |||
$kendo-taskboard-padding-x | Null | null | null |
Description
The horizontal of the TaskBoard. | |||
$kendo-taskboard-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the TaskBoard. | |||
$kendo-taskboard-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the TaskBoard. | |||
$kendo-taskboard-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the TaskBoard. | |||
$kendo-taskboard-bg | Null | null | null |
Description
The background color of the TaskBoard. | |||
$kendo-taskboard-text | Null | null | null |
Description
The text color of the TaskBoard. | |||
$kendo-taskboard-border | Null | null | null |
Description
The border color of the TaskBoard. | |||
$kendo-taskboard-toolbar-padding-y | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the TaskBoard Toolbar. | |||
$kendo-taskboard-toolbar-padding-x | String | $kendo-taskboard-toolbar-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TaskBoard Toolbar. | |||
$kendo-taskboard-toolbar-bg | Null | null | null |
Description
The background color of the TaskBoard Toolbar. | |||
$kendo-taskboard-toolbar-text | Null | null | null |
Description
The text color of the TaskBoard Toolbar. | |||
$kendo-taskboard-toolbar-border | Null | null | null |
Description
The border color of the TaskBoard Toolbar. | |||
$kendo-taskboard-toolbar-gradient | Null | null | null |
Description
The gradient of the TaskBoard Toolbar. | |||
$kendo-taskboard-content-padding-y | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the TaskBoard content. | |||
$kendo-taskboard-content-padding-x | String | $kendo-taskboard-content-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TaskBoard content. | |||
$kendo-taskboard-column-container-spacing-y | Calculation | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The vertical spacing of the TaskBoard column container. | |||
$kendo-taskboard-column-container-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the TaskBoard column container. | |||
$kendo-taskboard-column-container-padding-x | Calculation | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The horizontal padding of the TaskBoard column container. | |||
$kendo-taskboard-columns-container-gap | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The spacing of the TaskBoard columns container. | |||
$kendo-taskboard-column-width | Number | 320px | 320px |
Description
The default width of the TaskBoard column. | |||
$kendo-taskboard-column-border-width | Number | 1px | 1px |
Description
The border width of the TaskBoard column. | |||
$kendo-taskboard-column-border-radius | String | k-border-radius(sm) | var(--kendo-border-radius-sm, 0.25rem) |
Description
The border radius of the TaskBoard column. | |||
$kendo-taskboard-column-bg | String | if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 )) | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the TaskBoard column. | |||
$kendo-taskboard-column-text | Null | null | null |
Description
The text color of the TaskBoard column. | |||
$kendo-taskboard-column-border | Color | transparent | transparent |
Description
The border color of the TaskBoard column. | |||
$kendo-taskboard-column-focus-bg | Null | null | null |
Description
The background color of the focused TaskBoard column. | |||
$kendo-taskboard-column-focus-text | Null | null | null |
Description
The text color of the focused TaskBoard column. | |||
$kendo-taskboard-column-focus-border | String | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of the focused TaskBoard column. | |||
$kendo-taskboard-column-header-padding-y | Calculation | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The vertical padding of the TaskBoard column header. | |||
$kendo-taskboard-column-header-padding-x | Calculation | $kendo-taskboard-column-header-padding-y | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The horizontal padding of the TaskBoard column header. | |||
$kendo-taskboard-column-header-gap | Calculation | calc( #{$kendo-taskboard-spacer} / 4 ) | calc(var(--kendo-spacing-4, 1rem) / 4) |
Description
The spacing of the TaskBoard column header. | |||
$kendo-taskboard-column-header-actions-gap | Calculation | calc( #{$kendo-taskboard-spacer} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The spacing of the TaskBoard column header actions. | |||
$kendo-taskboard-column-header-font-weight | Number | 500 | 500 |
Description
The font weight of the TaskBoard column header. | |||
$kendo-taskboard-column-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the TaskBoard column header. | |||
$kendo-taskboard-column-cards-padding-y | Calculation | calc( #{$kendo-taskboard-spacer} * .25 ) | calc(var(--kendo-spacing-4, 1rem) * 0.25) |
Description
The vertical padding of the TaskBoard column Card wrapper. | |||
$kendo-taskboard-column-cards-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the TaskBoard column Card wrapper. | |||
$kendo-taskboard-column-cards-gap | Calculation | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The spacing of the TaskBoard column Card wrapper. | |||
$kendo-taskboard-pane-width | Number | $kendo-taskboard-column-width | 320px |
Description
The default width of the TaskBoard pane. | |||
$kendo-taskboard-pane-padding-y | Null | null | null |
Description
The vertical padding of the TaskBoard pane. | |||
$kendo-taskboard-pane-padding-x | Null | null | null |
Description
The horizontal padding of the TaskBoard pane. | |||
$kendo-taskboard-pane-border-width | Number | 1px | 1px |
Description
The border width of the TaskBoard pane. | |||
$kendo-taskboard-pane-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the TaskBoard pane. | |||
$kendo-taskboard-pane-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the TaskBoard pane. | |||
$kendo-taskboard-pane-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the TaskBoard pane. | |||
$kendo-taskboard-pane-header-padding-y | Calculation | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The vertical padding of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-padding-x | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-font-weight | Number | 500 | 500 |
Description
The font weight of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the TaskBoard pane header. | |||
$kendo-taskboard-pane-content-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the TaskBoard pane content. | |||
$kendo-taskboard-pane-content-padding-x | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TaskBoard pane content. | |||
$kendo-taskboard-pane-actions-padding-y | Calculation | calc( #{$kendo-taskboard-spacer} * .75 ) | calc(var(--kendo-spacing-4, 1rem) * 0.75) |
Description
The vertical padding of the TaskBoard pane actions. | |||
$kendo-taskboard-pane-actions-padding-x | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TaskBoard pane actions. | |||
$kendo-taskboard-card-padding-y | String | $kendo-taskboard-spacer | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the TaskBoard Card. | |||
$kendo-taskboard-card-padding-x | String | $kendo-taskboard-card-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TaskBoard Card. | |||
$kendo-taskboard-card-border-width | Number | $kendo-card-border-width | 1px |
Description
The border width of the TaskBoard Card. | |||
$kendo-taskboard-card-border-radius | Number | $kendo-card-border-radius | 0.375rem |
Description
The border radius of the TaskBoard Card. | |||
$kendo-taskboard-card-bg | String | $kendo-card-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the TaskBoard Card. | |||
$kendo-taskboard-card-text | String | $kendo-card-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the TaskBoard Card. | |||
$kendo-taskboard-card-border | String | $kendo-card-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the TaskBoard Card. | |||
$kendo-taskboard-card-shadow | Null | $kendo-card-shadow | null |
Description
The shadow of the TaskBoard Card. | |||
$kendo-taskboard-card-category-border-width | Number | 4px | 4px |
Description
The border width of the TaskBoard Card category. | |||
$kendo-taskboard-card-hover-border | String | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of the hovered TaskBoard Card. | |||
$kendo-taskboard-card-focus-border | String | if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) | var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2)) |
Description
The border color of the focused TaskBoard Card. | |||
$kendo-taskboard-card-focus-shadow | String | $kendo-card-focus-shadow | var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1)) |
Description
The shadow of the focused TaskBoard Card. | |||
$kendo-taskboard-card-selected-border | String | if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 )) | var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
Description
The border of the selected TaskBoard Card. | |||
$kendo-taskboard-card-selected-shadow | String | none | none |
Description
The shadow of the selected TaskBoard Card. | |||
$kendo-taskboard-card-header-text | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the TaskBoard Card header text. | |||
$kendo-taskboard-card-header-focus-text | Color | $kendo-color-primary-darker | #0b5cd5 |
Description
The text color of the hovered TaskBoard Card header text. | |||
$kendo-taskboard-card-header-hover-text | Color | $kendo-color-primary-darker | #0b5cd5 |
Description
The text color of the focused TaskBoard Card header text. | |||
$kendo-taskboard-drag-placeholder-border-width | Number | 1px | 1px |
Description
The border width of the TaskBoard Card placeholder. | |||
$kendo-taskboard-drag-placeholder-border-radius | Number | $kendo-taskboard-card-border-radius | 0.375rem |
Description
The border radius of the TaskBoard Card placeholder. | |||
$kendo-taskboard-drag-placeholder-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 10%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .1 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 10%, transparent) |
Description
The background color of the TaskBoard Card placeholder. | |||
$kendo-taskboard-drag-placeholder-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the TaskBoard Card placeholder. |
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 | String | if($kendo-enable-color-system, k-color( surface ), $gray-100) | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the TileLayout. | |||
$kendo-tile-layout-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the TileLayout. | |||
$kendo-tile-layout-padding-y | String | $kendo-tile-layout-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the TileLayout | |||
$kendo-tile-layout-card-border-width | Number | $kendo-card-border-width | 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 4px 10px rgba(0, 0, 0, 0.1)) |
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-card-border-radius | 0.375rem |
Description
The radius of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
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. |
Timeline
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-timeline-spacing-x | String | k-spacing(10) | var(--kendo-spacing-10, 2.5rem) |
Description
The horizontal spacing of the Timeline. | |||
$kendo-timeline-spacing-y | String | k-spacing(10) | var(--kendo-spacing-10, 2.5rem) |
Description
The vertical spacing of the Timeline. | |||
$kendo-timeline-items-padding | String | $kendo-padding-md-x | var(--kendo-spacing-4, 1rem) |
Description
The padding between the Timeline's track items. | |||
$kendo-timeline-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Timeline. | |||
$kendo-timeline-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Timeline. | |||
$kendo-timeline-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Timeline. | |||
$kendo-timeline-mobile-spacing-x | String | $kendo-padding-md-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal spacing of the mobile Timeline. | |||
$kendo-timeline-mobile-spacing-y | String | $kendo-padding-md-x | var(--kendo-spacing-4, 1rem) |
Description
The vertical spacing of the mobile Timeline. | |||
$kendo-timeline-track-arrow-width | Number | 38px | 38px |
Description
The width of the Timeline track arrow. | |||
$kendo-timeline-track-arrow-height | Number | 38px | 38px |
Description
The height of the Timeline track arrow. | |||
$kendo-timeline-track-arrow-disabled-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 65%, transparent), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% )) | color-mix(in srgb, var(--kendo-color-base-subtle, #e9ecef) 65%, transparent) |
Description
The background color of the disabled Timeline track arrow. | |||
$kendo-timeline-track-arrow-disabled-text | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% )) | color-mix(in srgb, var(--kendo-color-on-base, #212529) 65%, transparent) |
Description
The text color of the disabled Timeline track arrow. | |||
$kendo-timeline-track-arrow-disabled-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 15%, transparent), k-true-mix( $kendo-button-border, $kendo-body-bg, 65% )) | color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 15%, transparent) |
Description
The border color of the disabled Timeline track arrow. | |||
$kendo-timeline-track-size | Number | 6px | 6px |
Description
The size of the Timeline track. | |||
$kendo-timeline-track-wrap-padding-bottom | Number | k-math-div( $kendo-timeline-track-size, 2 ) | 3px |
Description
The bottom padding of the Timeline's track wrapper. | |||
$kendo-timeline-track-border-width | Number | 1px | 1px |
Description
The border width of the Timeline track. | |||
$kendo-timeline-track-margin-bottom | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The bottom margin of the Timeline track. | |||
$kendo-timeline-track-bottom-calc | Calculation | calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom}) | calc(19px + 3px) |
Description
The bottom offset of the Timeline track. | |||
$kendo-timeline-track-start-calc | Calculation | calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) | calc(38px - 2 * 1px) |
Description
The left offset of the Timeline track. | |||
$kendo-timeline-track-end-calc | Calculation | calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) | calc(38px - 2 * 1px) |
Description
The right offset of the Timeline track. | |||
$kendo-timeline-track-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The background color of the Timeline track. | |||
$kendo-timeline-track-border-color | String | $kendo-timeline-track-bg | var(--kendo-color-base-subtle, #e9ecef) |
Description
The border color of the Timeline track. | |||
$kendo-timeline-track-item-focus-shadow | String | k-elevation(2) | var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075)) |
Description
The shadow of the Timeline's focused track items. | |||
$kendo-timeline-track-event-offset | Number | 36px | 36px |
Description
The offset of the Timeline track event. | |||
$kendo-timeline-flag-padding-x | Number | $kendo-button-padding-x | 0.75rem |
Description
The horizontal padding of the Timeline flag. | |||
$kendo-timeline-flag-padding-y | Number | $kendo-button-padding-y | 0.375rem |
Description
The vertical padding of the Timeline flag. | |||
$kendo-timeline-flag-line-height | Number | $kendo-button-line-height | 1.5 |
Description
The line height of the Timeline flag. | |||
$kendo-timeline-flag-min-width | Number | 80px | 80px |
Description
The minimum width of the Timeline flag. | |||
$kendo-timeline-flag-max-width | Calculation | calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x}) | calc(80px + 2 * var(--kendo-spacing-10, 2.5rem)) |
Description
The maximum width of the Timeline flag. | |||
$kendo-timeline-mobile-flag-max-width | Calculation | calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) | calc(80px + 2 * var(--kendo-spacing-4, 1rem)) |
Description
The maximum width of the mobile Timeline flag. | |||
$kendo-timeline-horizontal-flag-min-width | Number | 80px | 80px |
Description
The minimum width of the horizontal Timeline flag. | |||
$kendo-timeline-flag-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Timeline flag. | |||
$kendo-timeline-flag-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the Timeline flag. | |||
$kendo-timeline-flag-callout-width | Number | 10px | 10px |
Description
The width of the Timeline's flag callout. | |||
$kendo-timeline-flag-callout-height | Number | 10px | 10px |
Description
The height of the Timeline's flag callout. | |||
$kendo-timeline-flag-offset-bottom | Number | 4px | 4px |
Description
The bottom offset of the Timeline flag. | |||
$kendo-timeline-flag-margin-bottom-calc | Calculation | calc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height}) | calc(6px + 2 * 1px + 4px + 10px) |
Description
The bottom margin of the Timeline flag. | |||
$kendo-timeline-date-width | Number | 50px | 50px |
Description
The width of the Timeline date. | |||
$kendo-timeline-date-margin-bottom | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The bottom margin of the Timeline date. | |||
$kendo-timeline-vertical-padding-calc | Calculation | calc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) | calc(var(--kendo-spacing-10, 2.5rem) + (80px - 6px) / 2) |
Description
The padding of the vertical Timeline. | |||
$kendo-timeline-vertical-padding-with-dates-calc | Calculation | calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width}) | calc(calc(var(--kendo-spacing-10, 2.5rem) + (80px - 6px) / 2) + 50px) |
Description
The padding of the vertical Timeline date. | |||
$kendo-timeline-mobile-vertical-padding-calc | Calculation | calc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) | calc(var(--kendo-spacing-4, 1rem) + (80px - 6px) / 2) |
Description
The padding of the vertical mobile Timeline. | |||
$kendo-timeline-mobile-vertical-padding-with-dates-calc | Calculation | calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width}) | calc(calc(var(--kendo-spacing-4, 1rem) + (80px - 6px) / 2) + 50px) |
Description
The padding of the vertical mobile Timeline date. | |||
$kendo-timeline-circle-width | Number | 16px | 16px |
Description
The width of the Timeline circle. | |||
$kendo-timeline-circle-height | Number | 16px | 16px |
Description
The height of the Timeline circle. | |||
$kendo-timeline-circle-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Timeline circle. | |||
$kendo-timeline-collapse-arrow-padding-x | String | $kendo-padding-sm-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Timeline collapse arrow. | |||
$kendo-timeline-event-width | Number | 400px | 400px |
Description
The width of the Timeline event. | |||
$kendo-timeline-event-height | Number | 600px | 600px |
Description
The height of the Timeline event. | |||
$kendo-timeline-event-min-height-calc | Calculation | calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) | calc(2 * (36px - 1px)) |
Description
The minimum height of the Timeline event. |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the small Toolbar. | |||
$kendo-toolbar-md-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the medium Toolbar. | |||
$kendo-toolbar-lg-padding-x | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the small Toolbar. | |||
$kendo-toolbar-md-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the medium Toolbar. | |||
$kendo-toolbar-lg-padding-y | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
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 | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The spacing between the tools of the small Toolbar. | |||
$kendo-toolbar-md-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the tools of the medium Toolbar. | |||
$kendo-toolbar-lg-spacing | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The spacing between the tools of the large Toolbar. | |||
$kendo-toolbar-border-width | Number | 1px | 1px |
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 | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Toolbar. | |||
$kendo-toolbar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Toolbar. | |||
$kendo-toolbar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Toolbar. | |||
$kendo-toolbar-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Toolbar. | |||
$kendo-toolbar-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Toolbar. | |||
$kendo-toolbar-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The color of the border around the Toolbar. | |||
$kendo-toolbar-gradient | Null | null | null |
Description
The gradient of the Toolbar. | |||
$kendo-toolbar-shadow | Null | null | null |
Description
The box shadow of the Toolbar. | |||
$kendo-toolbar-separator-border | String | inherit | inherit |
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 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent) |
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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-1\.5, 0.375rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), spacing: var(--kendo-spacing-2\.5, 0.625rem))) |
Description
The sizes map for the Toolbar. |
Tooltip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-tooltip-padding-y | Number | $tooltip-padding-y | 0.25rem |
Description
The vertical padding of the Tooltip. | |||
$kendo-tooltip-padding-x | Number | $tooltip-padding-x | 0.5rem |
Description
The horizontal padding of the Tooltip. | |||
$kendo-tooltip-border-width | Number | 0px | 0px |
Description
The width of the border around the Tooltip. | |||
$kendo-tooltip-border-radius | Number | $tooltip-border-radius | 0.375rem |
Description
The border radius of the Tooltip. | |||
$kendo-tooltip-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Tooltip. | |||
$kendo-tooltip-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Tooltip. | |||
$kendo-tooltip-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Tooltip. | |||
$kendo-tooltip-title-font-size | Calculation | calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 1.25 ) | calc(var(--kendo-font-size-sm, 0.875rem) * 1.25) |
Description
The font size of the Tooltip title. | |||
$kendo-tooltip-title-line-height | Number | 1 | 1 |
Description
The line height of the Tooltip title. | |||
$kendo-tooltip-callout-size | Number | $tooltip-arrow-height | 0.4rem |
Description
The size of the Tooltip callout. | |||
$kendo-tooltip-bg | String | if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) | var(--kendo-color-on-app-surface, #212529) |
Description
The default background of the Tooltip. | |||
$kendo-tooltip-text | String | if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) | var(--kendo-color-app-surface, #ffffff) |
Description
The default text color of the Tooltip. | |||
$kendo-tooltip-border | String | $kendo-tooltip-bg | var(--kendo-color-on-app-surface, #212529) |
Description
The default border color of the Tooltip. | |||
$kendo-tooltip-shadow | String | k-elevation(2) | var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075)) |
Description
The box-shadow of the Tooltip. | |||
$kendo-tooltip-theme-colors | Map | $kendo-theme-colors | ("primary": var(--kendo-color-primary, #0d6efd), "secondary": var(--kendo-color-secondary, #6c757d), "tertiary": var(--kendo-color-tertiary, #6f42c1), "info": var(--kendo-color-info, #0dcaf0), "success": var(--kendo-color-success, #198754), "warning": var(--kendo-color-warning, #ffc107), "error": var(--kendo-color-error, #dc3545), "dark": var(--kendo-color-dark, #212529), "light": var(--kendo-color-light, #f8f9fa), "inverse": var(--kendo-color-dark, #212529)) |
Description
The theme colors map for the Tooltip. | |||
$kendo-tooltip-theme | Map | tooltip-theme( $kendo-tooltip-theme-colors ) | ("inverse": (color: var(--kendo-color-on-inverse, #ffffff), background-color: var(--kendo-color-dark, #212529), border: var(--kendo-color-dark, #212529)), "light": (color: var(--kendo-color-on-light, #000000), background-color: var(--kendo-color-light, #f8f9fa), border: var(--kendo-color-light, #f8f9fa)), "dark": (color: var(--kendo-color-on-dark, #ffffff), background-color: var(--kendo-color-dark, #212529), border: var(--kendo-color-dark, #212529)), "error": (color: var(--kendo-color-on-error, #ffffff), background-color: var(--kendo-color-error, #dc3545), border: var(--kendo-color-error, #dc3545)), "warning": (color: var(--kendo-color-on-warning, #000000), background-color: var(--kendo-color-warning, #ffc107), border: var(--kendo-color-warning, #ffc107)), "success": (color: var(--kendo-color-on-success, #ffffff), background-color: var(--kendo-color-success, #198754), border: var(--kendo-color-success, #198754)), "info": (color: var(--kendo-color-on-info, #000000), background-color: var(--kendo-color-info, #0dcaf0), border: var(--kendo-color-info, #0dcaf0)), "tertiary": (color: var(--kendo-color-on-tertiary, #ffffff), background-color: var(--kendo-color-tertiary, #6f42c1), border: var(--kendo-color-tertiary, #6f42c1)), "secondary": (color: var(--kendo-color-on-secondary, #ffffff), background-color: var(--kendo-color-secondary, #6c757d), border: var(--kendo-color-secondary, #6c757d)), "primary": (color: var(--kendo-color-on-primary, #ffffff), background-color: var(--kendo-color-primary, #0d6efd), border: var(--kendo-color-primary, #0d6efd))) |
Description
The generated theme colors map for the Tooltip. |
Treelist
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-treelist-footer-row-bg | String | $kendo-grid-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the TreeList footer row. | |||
$kendo-treelist-footer-row-border-width | Number | 1px | 1px |
Description
The border width of the TreeList footer row. |
Treeview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-treeview-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the TreeView. | |||
$kendo-treeview-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the TreeView. | |||
$kendo-treeview-sm-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small TreeView. | |||
$kendo-treeview-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium TreeView. | |||
$kendo-treeview-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large TreeView. | |||
$kendo-treeview-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
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 | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the medium TreeView. | |||
$kendo-treeview-lg-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
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 | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the TreeView items. | |||
$kendo-treeview-sm-item-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the small TreeView items. | |||
$kendo-treeview-md-item-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the medium TreeView items. | |||
$kendo-treeview-lg-item-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the large TreeView items. | |||
$kendo-treeview-item-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the TreeView items. | |||
$kendo-treeview-sm-item-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the small TreeView items. | |||
$kendo-treeview-md-item-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the medium TreeView items. | |||
$kendo-treeview-lg-item-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The border radius of the TreeView items. | |||
$kendo-treeview-sm-checkbox-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the checkbox in the small TreeView. | |||
$kendo-treeview-md-checkbox-padding-x | String | $kendo-treeview-sm-checkbox-padding-x | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the checkbox in the medium TreeView. | |||
$kendo-treeview-lg-checkbox-padding-x | String | $kendo-treeview-sm-checkbox-padding-x | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the checkbox in the large TreeView. | |||
$kendo-treeview-sm-checkbox-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the checkbox in the small TreeView. | |||
$kendo-treeview-md-checkbox-padding-y | Null | null | null |
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: var(--kendo-font-size-sm, inherit), line-height: 1.4285714286, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), checkbox-padding-x: var(--kendo-spacing-1, 0.25rem), checkbox-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-3, 0.75rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), checkbox-padding-x: var(--kendo-spacing-1, 0.25rem), checkbox-padding-y: null), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-3, 0.75rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), checkbox-padding-x: var(--kendo-spacing-1, 0.25rem), 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 | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
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 | String | $kendo-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
Description
The background color of hovered TreeView items. | |||
$kendo-treeview-item-hover-text | String | $kendo-hover-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of hovered TreeView items. | |||
$kendo-treeview-item-hover-border | String | $kendo-treeview-item-hover-bg | var(--kendo-color-base-subtle-hover, #dee2e6) |
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 | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of selected TreeView items. | |||
$kendo-treeview-item-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of selected TreeView items. | |||
$kendo-treeview-item-selected-border | String | $kendo-treeview-item-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of selected TreeView items. | |||
$kendo-treeview-item-selected-gradient | Null | null | null |
Description
The background gradient of selected TreeView items. | |||
$kendo-treeview-item-focus-shadow | List | inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-treeview-text, .15 )) | inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The box shadow of focused TreeView items. | |||
$kendo-treeview-loadmore-bg | Color | transparent | transparent |
Description
The background color of the Load More button in the TreeView. | |||
$kendo-treeview-loadmore-text | String | $kendo-link-text | var(--kendo-color-primary, #0d6efd) |
Description
The text color of the Load More button in the TreeView. | |||
$kendo-treeview-loadmore-border | Null | null | null |
Description
The border color of the Load More button in the TreeView. | |||
$kendo-treeview-loadmore-hover-bg | Color | transparent | transparent |
Description
The background color of the hovered Load More button in the TreeView. | |||
$kendo-treeview-loadmore-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
Description
The text color of the hovered Load More button in the TreeView. | |||
$kendo-treeview-loadmore-hover-border | Null | null | null |
Description
The border color of the hovered Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-bg | Color | transparent | transparent |
Description
The background color of the focused Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0c64e4) |
Description
The text color of the focused Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-border | Null | null | null |
Description
The border color of the focused Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-shadow | List | $kendo-treeview-item-focus-shadow | inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent) |
Description
The box shadow of the focused Load More button in the TreeView. |
Typography
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-font-size | Number | $font-size-base | 1rem |
Description
The base font size across all components. | |||
$kendo-font-size-xs | Number | ( $kendo-font-size * .75 ) | 0.75rem |
Description
The extra small font size across all components. | |||
$kendo-font-size-sm | Number | $font-size-sm | 0.875rem |
Description
The small font size across all components. | |||
$kendo-font-size-md | Number | $kendo-font-size | 1rem |
Description
The medium font size across all components. | |||
$kendo-font-size-lg | Number | $font-size-lg | 1.25rem |
Description
The large font size across all components. | |||
$kendo-font-size-xl | Number | ( $kendo-font-size-md * 1.5 ) | 1.5rem |
Description
The extra large font size across all components. | |||
$kendo-line-height | Number | $line-height-base | 1.5 |
Description
The base line height across all components. | |||
$kendo-line-height-xs | Number | 1 | 1 |
Description
The extra small line height across all components. | |||
$kendo-line-height-sm | Number | $line-height-sm | 1.25 |
Description
The small line height across all components. | |||
$kendo-line-height-md | Number | $kendo-line-height | 1.5 |
Description
The medium line height across all components. | |||
$kendo-line-height-lg | Number | $line-height-lg | 2 |
Description
The large line height across all components. | |||
$kendo-line-height-em | Calculation | calc( #{$kendo-line-height} * 1em ) | calc(1.5 * 1em) |
Description
The base line height in ems across all components. | |||
$kendo-font-weight-light | Number | $font-weight-light | 300 |
Description
The light font weight across all components. | |||
$kendo-font-weight-normal | Number | $font-weight-normal | 400 |
Description
The base font weight across all components. | |||
$kendo-font-weight-medium | Number | 500 | 500 |
Description
The medium font weight across all components. | |||
$kendo-font-weight-semibold | Number | 600 | 600 |
Description
The semibold font weight across all components. | |||
$kendo-font-weight-bold | Number | $font-weight-bold | 700 |
Description
The bold font weight across all components. | |||
$kendo-font-family-sans-serif | List | $font-family-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The sans-serif font family across all components. | |||
$kendo-font-family-monospace | List | $font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
Description
The monospace font family across all components. | |||
$kendo-font-family | List | $kendo-font-family-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The base font family across all components. | |||
$kendo-font-sizes | Map | $_default-font-sizes | (xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem) |
Description
The font sizes map | |||
$kendo-line-heights | Map | $_default-line-heights | (xs: 1, sm: 1.25, md: 1.5, lg: 2) |
Description
The line heights map | |||
$kendo-font-weights | Map | $_default-font-weights | (light: 300, normal: 400, medium: 500, semibold: 600, bold: 700) |
Description
The font weights map | |||
$kendo-font-families | Map | $_default-font-families | (sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) |
Description
The font families map | |||
$kendo-h1-font-size | Number | $h1-font-size | 2.5rem |
Description
The font size of the highest level heading. | |||
$kendo-h2-font-size | Number | $h2-font-size | 2rem |
Description
The font size of the second highest level heading. | |||
$kendo-h3-font-size | Number | $h3-font-size | 1.75rem |
Description
The font size of the third highest level heading. | |||
$kendo-h4-font-size | Number | $h4-font-size | 1.5rem |
Description
The font size of the fourth highest level heading. | |||
$kendo-h5-font-size | Number | $h5-font-size | 1.25rem |
Description
The font size of the fifth highest level heading. | |||
$kendo-h6-font-size | Number | $h6-font-size | 1rem |
Description
The font size of the sixth highest level heading. | |||
$kendo-h1-font-family | Null | $headings-font-family | null |
Description
The font family of the highest level heading. | |||
$kendo-h2-font-family | Null | $headings-font-family | null |
Description
The font family of the second highest level heading. | |||
$kendo-h3-font-family | Null | $headings-font-family | null |
Description
The font family of the third highest level heading. | |||
$kendo-h4-font-family | Null | $headings-font-family | null |
Description
The font family of the fourth highest level heading. | |||
$kendo-h5-font-family | Null | $headings-font-family | null |
Description
The font family of the fifth highest level heading. | |||
$kendo-h6-font-family | Null | $headings-font-family | null |
Description
The font family of the sixth highest level heading. | |||
$kendo-h1-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the highest level heading. | |||
$kendo-h2-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the second highest level heading. | |||
$kendo-h3-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the third highest level heading. | |||
$kendo-h4-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the fourth highest level heading. | |||
$kendo-h5-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the fifth highest level heading. | |||
$kendo-h6-line-height | Number | $headings-line-height | 1.2 |
Description
The line height of the sixth highest level heading. | |||
$kendo-h1-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the highest level heading. | |||
$kendo-h2-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the second highest level heading. | |||
$kendo-h3-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the third highest level heading. | |||
$kendo-h4-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the fourth highest level heading. | |||
$kendo-h5-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the fifth highest level heading. | |||
$kendo-h6-font-weight | Number | $headings-font-weight | 500 |
Description
The font weight of the sixth highest level heading. | |||
$kendo-h1-letter-spacing | Null | null | null |
Description
The letter spacing of the highest level heading. | |||
$kendo-h2-letter-spacing | Null | null | null |
Description
The letter spacing of the second highest level heading. | |||
$kendo-h3-letter-spacing | Null | null | null |
Description
The letter spacing of the third highest level heading. | |||
$kendo-h4-letter-spacing | Null | null | null |
Description
The letter spacing of the fourth highest level heading. | |||
$kendo-h5-letter-spacing | Null | null | null |
Description
The letter spacing of the fifth highest level heading. | |||
$kendo-h6-letter-spacing | Null | null | null |
Description
The letter spacing of the sixth highest level heading. | |||
$kendo-h1-margin | List | 0 0 $headings-margin-bottom | 0 0 0.5rem |
Description
The margin of the highest level heading. | |||
$kendo-h2-margin | List | 0 0 $headings-margin-bottom | 0 0 0.5rem |
Description
The margin of the second highest level heading. | |||
$kendo-h3-margin | List | 0 0 $headings-margin-bottom | 0 0 0.5rem |
Description
The margin of the third highest level heading. | |||
$kendo-h4-margin | List | 0 0 $headings-margin-bottom | 0 0 0.5rem |
Description
The margin of the fourth highest level heading. | |||
$kendo-h5-margin | List | 0 0 $headings-margin-bottom | 0 0 0.5rem |
Description
The margin of the fifth highest level heading. | |||
$kendo-h6-margin | List | 0 0 $headings-margin-bottom | 0 0 0.5rem |
Description
The margin of the sixth highest level heading. | |||
$kendo-headings | Map | (
h1: (
font-size: $kendo-h1-font-size,
font-family: $kendo-h1-font-family,
line-height: $kendo-h1-line-height,
font-weight: $kendo-h1-font-weight,
letter-spacing: $kendo-h1-letter-spacing,
margin: $kendo-h1-margin
| (h1: (font-size: 2.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h2: (font-size: 2rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h3: (font-size: 1.75rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h4: (font-size: 1.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h5: (font-size: 1.25rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h6: (font-size: 1rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem)) |
Description
The headings Map. | |||
$kendo-paragraph-margin | List | 0 0 $paragraph-margin-bottom | 0 0 1rem |
Description
The margin of the paragraph. | |||
$kendo-paragraph-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the paragraph. | |||
$kendo-paragraph-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the paragraph. | |||
$kendo-paragraph-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the paragraph. | |||
$kendo-paragraph-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the paragraph. | |||
$kendo-paragraph-letter-spacing | Null | null | null |
Description
The letter spacing of the paragraph. | |||
$kendo-code-font-size | String | var( --kendo-font-size-sm, inherit )!default | var(--kendo-font-size-sm, inherit) |
Description
The font size of the code tag. | |||
$kendo-code-font-family | String | var( --kendo-font-family-monospace, normal ) | var(--kendo-font-family-monospace, normal) |
Description
The font family of the code tag. | |||
$kendo-code-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the code tag. | |||
$kendo-code-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the code tag. | |||
$kendo-code-letter-spacing | Null | null | null |
Description
The letter spacing of the code tag. | |||
$kendo-code-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the code tag. | |||
$kendo-code-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the code tag. | |||
$kendo-pre-padding-x | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the preformatted text. | |||
$kendo-pre-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the preformatted text. | |||
$kendo-code-border-width | Number | 1px | 1px |
Description
The width of the border of the code tag. | |||
$kendo-code-bg | String | $kendo-base-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the code tag. | |||
$kendo-code-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the code tag. | |||
$kendo-code-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the code tag. | |||
$kendo-display1-font-size | Number | k-map-get( $display-font-sizes, 1) | 5rem |
Description
The font size of the largest display text. | |||
$kendo-display2-font-size | Number | k-map-get( $display-font-sizes, 2) | 4.5rem |
Description
The font size of the second largest display text. | |||
$kendo-display3-font-size | Number | k-map-get( $display-font-sizes, 3) | 4rem |
Description
The font size of the third largest display text. | |||
$kendo-display4-font-size | Number | k-map-get( $display-font-sizes, 4) | 3.5rem |
Description
The font size of the fourth largest display text. | |||
$kendo-display1-font-family | Null | null | null |
Description
The font family of the largest display text. | |||
$kendo-display2-font-family | Null | null | null |
Description
The font family of the second largest display text. | |||
$kendo-display3-font-family | Null | null | null |
Description
The font family of the third largest display text. | |||
$kendo-display4-font-family | Null | null | null |
Description
The font family of the fourth largest display text. | |||
$kendo-display1-line-height | Number | $display-line-height | 1.2 |
Description
The line height of the largest display text. | |||
$kendo-display2-line-height | Number | $display-line-height | 1.2 |
Description
The line height of the second largest display text. | |||
$kendo-display3-line-height | Number | $display-line-height | 1.2 |
Description
The line height of the third largest display text. | |||
$kendo-display4-line-height | Number | $display-line-height | 1.2 |
Description
The line height of the fourth largest display text. | |||
$kendo-display1-font-weight | Number | $display-font-weight | 300 |
Description
The font weight of the largest display text. | |||
$kendo-display2-font-weight | Number | $display-font-weight | 300 |
Description
The font weight of the second largest display text. | |||
$kendo-display3-font-weight | Number | $display-font-weight | 300 |
Description
The font weight of the third largest display text. | |||
$kendo-display4-font-weight | Number | $display-font-weight | 300 |
Description
The font weight of the fourth largest display text. | |||
$kendo-display1-letter-spacing | Null | null | null |
Description
The letter spacing of the largest display text. | |||
$kendo-display2-letter-spacing | Null | null | null |
Description
The letter spacing of the second largest display text. | |||
$kendo-display3-letter-spacing | Null | null | null |
Description
The letter spacing of the third largest display text. | |||
$kendo-display4-letter-spacing | Null | null | null |
Description
The letter spacing of the fourth largest display text. | |||
$kendo-font-size-xxs | Number | 0.5rem | 0.5rem |
Description
The extra extra small font size across all components. | |||
$kendo-font-weight | Number | 400 | 400 |
Description
The base font weight across all components. | |||
$kendo-font-weight-thin | Number | 100 | 100 |
Description
The thin font weight across all components. | |||
$kendo-font-weight-extra-light | Number | 200 | 200 |
Description
The extra light font weight across all components. | |||
$kendo-font-weight-extra-bold | Number | 800 | 800 |
Description
The extra bold font weight across all components. | |||
$kendo-font-weight-black | Number | 900 | 900 |
Description
The most pronounced font weight across all components. | |||
$kendo-letter-spacing | Null | null | null |
Description
The base letter spacing across all components. | |||
$kendo-letter-spacing-tightest | Number | -.15px | -0.15px |
Description
The tightest letter spacing across all components. | |||
$kendo-letter-spacing-tighter | Number | -.10px | -0.1px |
Description
Slightly looser than the tighter letter spacing across all components. | |||
$kendo-letter-spacing-tight | Number | -.5px | -0.5px |
Description
Moderately tight letter spacing across all components. | |||
$kendo-letter-spacing-normal | Number | 0px | 0px |
Description
The normal letter spacing across all components. | |||
$kendo-letter-spacing-wide | Number | .5px | 0.5px |
Description
Wide letter spacing across all components. | |||
$kendo-letter-spacing-wider | Number | .10px | 0.1px |
Description
Slightly wider than the wide letter spacing across all components. | |||
$kendo-letter-spacing-widest | Number | .15px | 0.15px |
Description
The widest letter spacing across all components. | |||
$kendo-font-family-sans | List | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans |
Description
The sans font family across all components. | |||
$kendo-font-family-serif | List | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | "Times New Roman", Georgia, Garamond, Palatino, Baskerville |
Description
The serif font family across all components. | |||
$kendo-letter-spacings | Map | k-map-merge( $_default-letter-spacings, $kendo-letter-spacings ) | (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) |
Description
The letter spacings map |
Upload
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-upload-border-width | Number | 1px | 1px |
Description
The width of the border around the Upload. | |||
$kendo-upload-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Upload. | |||
$kendo-upload-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Upload. | |||
$kendo-upload-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Upload. | |||
$kendo-upload-max-height | Number | 300px | 300px |
Description
The maximum height of the list with uploaded items. | |||
$kendo-upload-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Upload. | |||
$kendo-upload-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Upload. | |||
$kendo-upload-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Upload. | |||
$kendo-upload-dropzone-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Upload dropzone. | |||
$kendo-upload-dropzone-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Upload dropzone. | |||
$kendo-upload-dropzone-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Upload dropzone. | |||
$kendo-upload-dropzone-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Upload dropzone. | |||
$kendo-upload-dropzone-border | String | $kendo-upload-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Upload dropzone. | |||
$kendo-upload-dropzone-hover-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 )) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The background color of the hovered Upload dropzone. | |||
$kendo-upload-status-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The text color of the Upload status message. | |||
$kendo-upload-status-text-opacity | Null | null | null |
Description
The opacity of the Upload status message. | |||
$kendo-upload-item-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of an uploaded item. | |||
$kendo-upload-item-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of an uploaded item. | |||
$kendo-upload-multiple-items-spacing | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical spacing between uploaded batch items. | |||
$kendo-upload-validation-font-size | Number | 11px | 11px |
Description
The font size of the Upload validation message. | |||
$kendo-upload-icon-spacing | String | $kendo-icon-spacing | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal spacing of the Upload status icon. | |||
$kendo-upload-icon-color | String | $kendo-subtle-text | var(--kendo-color-subtle, #596169) |
Description
The color of the uploaded items icon. | |||
$kendo-upload-progress-thickness | Number | 2px | 2px |
Description
The thickness of the Upload progress bar. | |||
$kendo-upload-progress-bg | String | $kendo-color-info | var(--kendo-color-info, #0dcaf0) |
Description
The background color of the Upload progress bar. | |||
$kendo-upload-success-text | String | $kendo-color-success | var(--kendo-color-success, #198754) |
Description
The success text color of the Upload. | |||
$kendo-upload-success-bg | String | $kendo-color-success | var(--kendo-color-success, #198754) |
Description
The success background color of the Upload progress bar. | |||
$kendo-upload-error-text | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The error text color of the Upload. | |||
$kendo-upload-error-bg | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The error background color of the Upload progress bar. | |||
$kendo-upload-focus-shadow | List | 0 0 0 2px rgba(0, 0, 0, .13) | 0 0 0 2px rgba(0, 0, 0, 0.13) |
Description
The shadow of the focused Upload button, actions and uploaded items. |
Window
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-window-border-width | Number | 1px | 1px |
Description
The width of the border around the Window. | |||
$kendo-window-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Window. | |||
$kendo-window-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Window. | |||
$kendo-window-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Window. | |||
$kendo-window-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Window. | |||
$kendo-window-titlebar-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Window titlebar. | |||
$kendo-window-titlebar-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the Window titlebar. | |||
$kendo-window-titlebar-border-width | List | 0 0 1px | 0 0 1px |
Description
The width of the border of the Window titlebar. | |||
$kendo-window-titlebar-border-style | String | solid | solid |
Description
The style of the border of the Window titlebar. | |||
$kendo-window-title-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the title of the Window. | |||
$kendo-window-title-line-height | Number | 1.5 | 1.5 |
Description
The line height of the title of the Window. | |||
$kendo-window-actions-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the buttons in the Window titlebar. | |||
$kendo-window-action-opacity | Number | .5 | 0.5 |
Description
The opacity of the buttons in the Window titlebar. | |||
$kendo-window-action-hover-opacity | Number | .75 | 0.75 |
Description
The opacity of the hovered buttons in the Window titlebar. | |||
$kendo-window-inner-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the content of the Window. | |||
$kendo-window-inner-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the content of the Window. | |||
$kendo-window-buttongroup-padding-x | String | $kendo-actions-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Window action buttons. | |||
$kendo-window-buttongroup-padding-y | String | $kendo-actions-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Window action buttons. | |||
$kendo-window-buttongroup-border-width | Number | 1px | 1px |
Description
The width of the top border of the Window action buttons. | |||
$kendo-window-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Window. | |||
$kendo-window-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Window. | |||
$kendo-window-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Window. | |||
$kendo-window-shadow | Null | null | null |
Description
The box shadow of the Window. | |||
$kendo-window-focus-shadow | Null | null | null |
Description
The box shadow of the focused Window. | |||
$kendo-window-titlebar-bg | Null | null | null |
Description
The background color of the Window titlebar. | |||
$kendo-window-titlebar-text | Null | null | null |
Description
The text color of the Window titlebar. | |||
$kendo-window-titlebar-border | String | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
Description
The border color of the Window titlebar. | |||
$kendo-window-titlebar-gradient | Null | null | null |
Description
The background gradient of the Window titlebar. | |||
$kendo-window-sizes | Map | (
sm: 300px,
md: 800px,
lg: 1200px
) | (sm: 300px, md: 800px, lg: 1200px) |
Description
The map of the width for the different Window sizes. | |||
$kendo-window-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": var(--kendo-color-primary, #0d6efd), "light": var(--kendo-color-light, #f8f9fa), "dark": var(--kendo-color-dark, #212529)) |
Description
The theme colors map for the Window. |
Wizard
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-wizard-padding-x | Calculation | calc( #{$kendo-padding-md-x} * 1.25 ) | calc(var(--kendo-spacing-4, 1rem) * 1.25) |
Description
The horizontal padding of the Wizard. | |||
$kendo-wizard-padding-y | Calculation | $kendo-wizard-padding-x | calc(var(--kendo-spacing-4, 1rem) * 1.25) |
Description
The vertical padding of the Wizard. | |||
$kendo-wizard-content-padding-x | Calculation | calc( #{$kendo-padding-md-x} * 2 ) | calc(var(--kendo-spacing-4, 1rem) * 2) |
Description
The horizontal padding of the Wizard content. | |||
$kendo-wizard-content-padding-y | Calculation | calc( #{$kendo-padding-md-y} * 4 ) | calc(var(--kendo-spacing-2, 0.5rem) * 4) |
Description
The vertical padding of the Wizard content. | |||
$kendo-wizard-buttons-margin-x | String | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The horizontal margin of the Wizard's Button container. | |||
$kendo-wizard-border-width | Number | 0px | 0px |
Description
The border width of the Wizard. | |||
$kendo-wizard-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Wizard. | |||
$kendo-wizard-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Wizard. | |||
$kendo-wizard-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Wizard. | |||
$kendo-wizard-step-focus-border | Color | #656565 | #656565 |
Description
The outline of the focused Wizard step. |