Customization
Variables
The following table lists the available variables for customizing the Fluent theme.
Common
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-adaptive-actionsheet-font-size | $kendo-font-size-lg | ||
Description
Font size of the adaptive action sheet. | |||
$kendo-card-brand-colors | ( primary, error, warning, success, info ) | ||
Description
Theme variations for the card. | |||
$kendo-card-theme-colors | () | ||
Description
Theme colors map for the card variations. | |||
$kendo-chip-theme-colors | () | ||
Description
The theme colors map for the Chip. | |||
$kendo-font-size | 14px | ||
Description
Base font size across all components. | |||
$kendo-font-family | "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif | ||
Description
Font family across all components. | |||
$kendo-line-height | math.div( 20, 14 ) | ||
Description
Line height used along with $kendo-font-size. | |||
$kendo-font-weight | 400 | ||
Description
Font weight. | |||
$kendo-box-shadow-depth-1 | var( --kendo-elevation-1, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for cards and grid item thumbnails. Equivalent to fluent depth 4. | |||
$kendo-box-shadow-depth-2 | var( --kendo-elevation-2, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for color gradient drag handle. Equivalent to fluent depth 8. | |||
$kendo-box-shadow-depth-3 | var( --kendo-elevation-3, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for focus card. | |||
$kendo-box-shadow-depth-4 | var( --kendo-elevation-4, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for panels. Equivalent to fluent depth 16. | |||
$kendo-box-shadow-depth-5 | var( --kendo-elevation-5, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for floating action button. | |||
$kendo-box-shadow-depth-6 | var( --kendo-elevation-6, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for pop up. | |||
$kendo-box-shadow-depth-7 | var( --kendo-elevation-7, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for action sheet. | |||
$kendo-box-shadow-depth-8 | var( --kendo-elevation-8, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for dialogs and window. Equivalent to fluent depth 64. | |||
$kendo-box-shadow-depth-9 | var( --kendo-elevation-8, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for focus window. | |||
$kendo-dialog-brand-colors | (
primary: primary
) | ||
Description
The theme variations for the Dialog. | |||
$kendo-dialog-theme-colors | () | ||
Description
The theme colors map for the Dialog. | |||
$kendo-tooltip-brand-colors | (
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
success: success,
warning: warning,
error: error,
info: info
) | ||
Description
Theme variations for the tooltip. | |||
$kendo-tooltip-theme-colors | () | ||
Description
Theme colors map for the tooltip variations. |
Action-buttons
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-actions-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the action buttons container. | |||
$kendo-actions-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the action buttons container. | |||
$kendo-actions-border-width | 0px | ||
Description
Width of the border around the action buttons container. | |||
$kendo-actions-bg | inherit | ||
Description
The background color of the action buttons container. | |||
$kendo-actions-text | inherit | ||
Description
The text color of the action buttons container. | |||
$kendo-actions-border | inherit | ||
Description
The border color of the action buttons container. |
Action-sheet
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-actionsheet-padding-x | 0px | ||
Description
Horizontal padding of the action sheet. | |||
$kendo-actionsheet-padding-y | 0px | ||
Description
Vertical padding of the action sheet. | |||
$kendo-actionsheet-width | 360px | ||
Description
Width of the action sheet. | |||
$kendo-actionsheet-max-width | 100% | ||
Description
Maximum width of the action sheet. | |||
$kendo-actionsheet-height | 60vh | ||
Description
Height of the action sheet. | |||
$kendo-actionsheet-max-height | 60vh | ||
Description
Maximum height of the action sheet. | |||
$kendo-actionsheet-border-width | 0px | ||
Description
Border width around the action sheet. | |||
$kendo-actionsheet-border-radius | 0px | ||
Description
Border radius of the action sheet. | |||
$kendo-actionsheet-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the action sheet. | |||
$kendo-actionsheet-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the action sheet. | |||
$kendo-actionsheet-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the action sheet. | |||
$kendo-actionsheet-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the action sheet. | |||
$kendo-actionsheet-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the action sheet. | |||
$kendo-actionsheet-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the action sheet. | |||
$kendo-actionsheet-shadow | var( --kendo-box-shadow-depth-7, none ) | ||
Description
Box shadow of the action sheet. | |||
$kendo-actionsheet-header-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
Horizontal padding of the action sheet header. | |||
$kendo-actionsheet-header-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the action sheet header. | |||
$kendo-actionsheet-header-border-width | 1px | ||
Description
Border width of the action sheet header. | |||
$kendo-actionsheet-header-font-size | inherit | ||
Description
Font size of the action sheet header. | |||
$kendo-actionsheet-header-font-family | inherit | ||
Description
Font family of the action sheet header. | |||
$kendo-actionsheet-header-line-height | inherit | ||
Description
Line height of the action sheet header. | |||
$kendo-actionsheet-header-gap | map.get( $kendo-spacing, 4 ) | ||
Description
Spacing between the action sheet header groups. | |||
$kendo-actionsheet-header-bg | inherit | ||
Description
Background color of the action sheet header. | |||
$kendo-actionsheet-header-text | inherit | ||
Description
Text color of the action sheet header. | |||
$kendo-actionsheet-header-border | inherit | ||
Description
Border color of the action sheet header. | |||
$kendo-actionsheet-header-shadow | none | ||
Description
Box shadow of the action sheet header. | |||
$kendo-actionsheet-subtitle-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the action sheet subtitle. | |||
$kendo-actionsheet-subtitle-line-height | var( --kendo-line-height-sm, inherit ) | ||
Description
Line height of the action sheet subtitle. | |||
$kendo-actionsheet-subtitle-text | var( --kendo-subtle-text, inherit ) | ||
Description
Text color of the action sheet subtitle. | |||
$kendo-actionsheet-item-min-height | 40px | ||
Description
Minimum height of the action sheet item. | |||
$kendo-actionsheet-item-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
Horiozontal padding of the action sheet item. | |||
$kendo-actionsheet-item-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the action sheet item. | |||
$kendo-actionsheet-item-border-width | 1px | ||
Description
Border around the action sheet item. | |||
$kendo-actionsheet-item-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the icon and the text in the action sheet item. | |||
$kendo-actionsheet-item-icon-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 )) | ||
Description
Color of the action sheet item icon. | |||
$kendo-actionsheet-item-title-font-weight | inherit | ||
Description
Font weight of the action sheet item text. | |||
$kendo-actionsheet-item-title-text-transform | none | ||
Description
Transform of the action sheet item text. | |||
$kendo-actionsheet-item-description-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the action sheet item description. | |||
$kendo-actionsheet-item-description-text | var( --kendo-subtle-text, inherit ) | ||
Description
Color of the action sheet item description. | |||
$kendo-actionsheet-item-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Hover background color of the action sheet item. | |||
$kendo-actionsheet-item-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Hover text color of the action sheet item. | |||
$kendo-actionsheet-item-hover-border | inherit | ||
Description
Hover border color of the action sheet item. | |||
$kendo-actionsheet-item-focus-bg | inherit | ||
Description
Focus background color of the action sheet item. | |||
$kendo-actionsheet-item-focus-text | inherit | ||
Description
Focus text color of the action sheet item. | |||
$kendo-actionsheet-item-focus-border | inherit | ||
Description
Focus border color of the action sheet item. | |||
$kendo-actionsheet-item-focus-outline | var( --kendo-outline-color, inherit ) | ||
Description
Focus outline color of the action sheet item. | |||
$kendo-actionsheet-item-focus-outline-width | 1px | ||
Description
Focus outline width of the action sheet item. | |||
$kendo-actionsheet-item-focus-hover-bg | $kendo-actionsheet-item-hover-bg | ||
Description
Focus and hover background color of the action sheet item. | |||
$kendo-actionsheet-item-focus-hover-text | $kendo-actionsheet-item-hover-text | ||
Description
Focus and hover text color of the action sheet item. | |||
$kendo-actionsheet-item-focus-hover-border | $kendo-actionsheet-item-hover-border | ||
Description
Focus and hover border color of the action sheet item. | |||
$kendo-actionsheet-item-disabled-bg | $kendo-actionsheet-bg | ||
Description
Disabled background color of the action sheet item. | |||
$kendo-actionsheet-item-disabled-text | var( --kendo-disabled-text, inherit ) | ||
Description
Disabled text color of the action sheet item. | |||
$kendo-actionsheet-item-disabled-border | var( --kendo-disabled-border, inherit ) | ||
Description
Disabled border color of the action sheet item. | |||
$kendo-adaptive-actionsheet-header-border-width | 1px | ||
Description
Border width of the adaptive action sheet titlebar. | |||
$kendo-adaptive-actionsheet-header-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
Vertical padding of the adaptive action sheet titlebar. | |||
$kendo-adaptive-actionsheet-header-padding-x | $kendo-adaptive-actionsheet-header-padding-y | ||
Description
Horizontal padding of the adaptive action sheet titlebar. | |||
$kendo-adaptive-actionsheet-header-border | var( --kendo-component-border, initial ) | ||
Description
Text color of the adaptive action sheet titlebar. | |||
$kendo-adaptive-actionsheet-content-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the adaptive action sheet content. | |||
$kendo-adaptive-actionsheet-content-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
Horizontal padding of the adaptive action sheet content. | |||
$kendo-adaptive-actionsheet-footer-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the adaptive action sheet footer. | |||
$kendo-adaptive-actionsheet-footer-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
Horizontal padding of the adaptive action sheet footer. |
Appbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-appbar-margin-x | 0 | ||
Description
The horizontal margin of the AppBar. | |||
$kendo-appbar-margin-y | 0 | ||
Description
The vertical margin of the AppBar. | |||
$kendo-appbar-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the AppBar. | |||
$kendo-appbar-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the AppBar. | |||
$kendo-appbar-border-width | 0px | ||
Description
The width of the border around the AppBar. | |||
$kendo-appbar-zindex | 1000 | ||
Description
The z-index of the AppBar. | |||
$kendo-appbar-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the AppBar. | |||
$kendo-appbar-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the AppBar. | |||
$kendo-appbar-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the AppBar. | |||
$kendo-appbar-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the AppBar sections. | |||
$kendo-appbar-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the AppBar. | |||
$kendo-appbar-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the AppBar. | |||
$kendo-appbar-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the AppBar. | |||
$kendo-appbar-brand-colors | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the AppBar. | |||
$kendo-appbar-theme-colors | () | ||
Description
The theme colors map for the AppBar variations. |
Avatar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-avatar-border-width | 1px | ||
Description
The border width of the Avatar. | |||
$kendo-avatar-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Avatar. | |||
$kendo-avatar-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Avatar. | |||
$kendo-avatar-line-height | var( --kendo-line-height, inherit ) | ||
Description
The line height of the Avatar. | |||
$kendo-avatar-sizes | (
sm: map.get( $kendo-spacing, 4 ),
md: map.get( $kendo-spacing, 8 ),
lg: map.get( $kendo-spacing, 16 )
) | ||
Description
The sizes map of the Avatar. | |||
$kendo-avatar-brand-colors | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the Avatar. | |||
$kendo-avatar-theme-colors | () | ||
Description
The theme colors map for the Avatar variations. |
Badge
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-badge-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Badge. | |||
$kendo-badge-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Badge. | |||
$kendo-badge-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Badge. | |||
$kendo-badge-border-width | 1px | ||
Description
The border width of the Badge. | |||
$kendo-badge-font-weight | var( --kendo-font-weight, normal ) | ||
Description
The font weight of the Badge. | |||
$kendo-badge-sm-padding-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
Horizontal padding of the small Badge. | |||
$kendo-badge-md-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
Horizontal padding of the medium Badge. | |||
$kendo-badge-lg-padding-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
Horizontal padding of the large Badge. | |||
$kendo-badge-sm-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
Vertical padding of the small Badge. | |||
$kendo-badge-md-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the medium Badge. | |||
$kendo-badge-lg-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
Vertical padding of the large Badge. | |||
$kendo-badge-sm-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
The font size of the small Badge. | |||
$kendo-badge-md-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
The font size of the medium Badge. | |||
$kendo-badge-lg-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
The font size of the large Badge. | |||
$kendo-badge-sm-line-height | var( --kendo-line-height-xs, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the small Badge. | |||
$kendo-badge-md-line-height | var( --kendo-line-height-xs, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the medium Badge. | |||
$kendo-badge-lg-line-height | var( --kendo-line-height-xs, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the large Badge. | |||
$kendo-badge-sm-min-width | calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) | ||
Description
The calculated minimum width of the small circular Badge. | |||
$kendo-badge-md-min-width | calc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) | ||
Description
The calculated minimum width of the medium circular Badge. | |||
$kendo-badge-lg-min-width | calc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) | ||
Description
The calculated minimum width of the large circular Badge. | |||
$kendo-badge-sizes | (
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
)
) | ||
Description
The sizes map for the Badge. | |||
$kendo-badge-brand-colors | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the Badge. | |||
$kendo-badge-theme-colors | () | ||
Description
The theme colors map for the Badge variations. |
Bottom-navigation
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-bottom-nav-padding-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
The horizontal padding of the BottomNavigation. | |||
$kendo-bottom-nav-padding-y | $kendo-bottom-nav-padding-x | ||
Description
The vertical padding of the BottomNavigation. | |||
$kendo-bottom-nav-gap | $kendo-bottom-nav-padding-x | ||
Description
The spacing between the BottomNavigation items. | |||
$kendo-bottom-nav-border-width | 1px 0px 0px 0px | ||
Description
The width of the border around the BottomNavigation. | |||
$kendo-bottom-nav-font-family | var( --kendo-font-family, inherit) | ||
Description
The font family of the BottomNavigation. | |||
$kendo-bottom-nav-font-size | var( --kendo-font-size-md, 1rem ) | ||
Description
The font size of the BottomNavigation. | |||
$kendo-bottom-nav-line-height | var( --kendo-line-height-md, normal ) | ||
Description
The line height of the BottomNavigation. | |||
$kendo-bottom-nav-letter-spacing | .2px | ||
Description
The letter spacing of the BottomNavigation. | |||
$kendo-bottom-nav-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the BottomNavigation item. | |||
$kendo-bottom-nav-item-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
The vertical padding of the BottomNavigation item. | |||
$kendo-bottom-nav-item-min-width | 72px | ||
Description
The minimum width of the BottomNavigation item. | |||
$kendo-bottom-nav-item-max-width | none | ||
Description
The maximum width of the BottomNavigation item. | |||
$kendo-bottom-nav-item-min-height | calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) | ||
Description
The minimum height of the BottomNavigation item. | |||
$kendo-bottom-nav-item-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the BottomNavigation item. | |||
$kendo-bottom-nav-item-gap | map.get( $kendo-spacing, 1 ) | ||
Description
The spacing of the BottomNavigation item. | |||
$kendo-bottom-nav-item-focus-offset | map.get( $kendo-spacing, 0.5 ) | ||
Description
The offset of the focused BottomNavigation item. | |||
$kendo-bottom-nav-item-focus-outline-width | 1px | ||
Description
The outline width of the focused BottomNavigation item. | |||
$kendo-bottom-nav-item-focus-outline-style | solid | ||
Description
The outline style of the focused BottomNavigation item. | |||
$kendo-bottom-nav-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
The box shadow of the BottomNavigation. | |||
$kendo-bottom-nav-brand-colors | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the BottomNavigation. | |||
$kendo-bottom-nav-theme-colors | () | ||
Description
The theme colors map for the BottomNavigation variations. |
Breadcrumb
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-breadcrumb-margin-x | 0px | ||
Description
The horizontal margin of the Breadcrumb | |||
$kendo-breadcrumb-margin-y | 0px | ||
Description
The vertical margin of the Breadcrumb | |||
$kendo-breadcrumb-padding-x | 0px | ||
Description
The horizontal padding of the Breadcrumb | |||
$kendo-breadcrumb-padding-y | 0px | ||
Description
The vertical padding of the Breadcrumb | |||
$kendo-breadcrumb-border-width | 0px | ||
Description
The width of the border around the Breadcrumb | |||
$kendo-breadcrumb-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Breadcrumb | |||
$kendo-breadcrumb-font-size | var( --kendo-font-size, inherit ) | ||
$kendo-breadcrumb-sm-font-size | var( --kendo-font-size-md, inherit ) | ||
Description
The font size of the small breadcrumb. | |||
$kendo-breadcrumb-md-font-size | var( --kendo-font-size-md, inherit ) | ||
Description
The font size of the medium breadcrumb. | |||
$kendo-breadcrumb-lg-font-size | var( --kendo-font-size-md, inherit ) | ||
Description
The font size of the large breadcrumb. | |||
$kendo-breadcrumb-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the Breadcrumb. | |||
$kendo-breadcrumb-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the small breadcrumb. | |||
$kendo-breadcrumb-md-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the medium breadcrumb. | |||
$kendo-breadcrumb-lg-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the large breadcrumb. | |||
$kendo-breadcrumb-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Breadcrumb | |||
$kendo-breadcrumb-text | get-theme-color-var( neutral-130 ) | ||
Description
The text color of the Breadcrumb | |||
$kendo-breadcrumb-border | transparent | ||
Description
The border color of the Breadcrumb | |||
$kendo-breadcrumb-focus-shadow | 0 0 0 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The box shadow of the focused breadcrumb | |||
$kendo-breadcrumb-link-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Breadcrumb link | |||
$kendo-breadcrumb-sm-link-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the small Breadcrumb link. | |||
$kendo-breadcrumb-md-link-padding-x | $kendo-breadcrumb-link-padding-x | ||
Description
The horizontal padding of the medium Breadcrumb link. | |||
$kendo-breadcrumb-lg-link-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the large Breadcrumb link. | |||
$kendo-breadcrumb-link-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Breadcrumb link | |||
$kendo-breadcrumb-sm-link-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the small Breadcrumb link. | |||
$kendo-breadcrumb-md-link-padding-y | $kendo-breadcrumb-link-padding-y | ||
Description
The vertical padding of the medium Breadcrumb link. | |||
$kendo-breadcrumb-lg-link-padding-y | map.get( $kendo-spacing, 2.5 ) | ||
Description
The vertical padding of the large Breadcrumb link. | |||
$kendo-breadcrumb-link-border-radius | 0px | ||
Description
The radius of the border around the Breadcrumb link | |||
$kendo-breadcrumb-link-initial-text | inherit | ||
Description
The initial text color of the Breadcrumb link | |||
$kendo-breadcrumb-link-bg | transparent | ||
Description
The background color of the Breadcrumb link | |||
$kendo-breadcrumb-link-text | get-theme-color-var( neutral-130 ) | ||
Description
The text color of the Breadcrumb link | |||
$kendo-breadcrumb-link-border | transparent | ||
Description
The borer color of the Breadcrumb link | |||
$kendo-breadcrumb-link-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The background color of the hovered breadcrumb link | |||
$kendo-breadcrumb-link-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the hovered breadcrumb link | |||
$kendo-breadcrumb-link-hover-border | var( --kendo-hover-border, initial ) | ||
Description
The border color of the hovered breadcrumb link | |||
$kendo-breadcrumb-link-active-bg | var( --kendo-selected-bg, initial ) | ||
Description
The background color of the active breadcrumb link | |||
$kendo-breadcrumb-link-active-text | var( --kendo-selected-text, initial ) | ||
Description
The text color of the active breadcrumb link | |||
$kendo-breadcrumb-link-active-border | if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the active breadcrumb link | |||
$kendo-breadcrumb-link-focus-bg | transparent | ||
Description
The background color of the focused breadcrumb link | |||
$kendo-breadcrumb-link-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the focused breadcrumb link | |||
$kendo-breadcrumb-link-focus-shadow | inset 0 0 0 1px get-theme-color-var( neutral-130 ) | ||
Description
The box shadow of the focused breadcrumb link | |||
$kendo-breadcrumb-link-focus-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The focus and hover background color of the Breadcrumb link | |||
$kendo-breadcrumb-link-disabled-bg | none | ||
Description
The background color of the disabled breadcrumb link | |||
$kendo-breadcrumb-link-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled breadcrumb link | |||
$kendo-breadcrumb-link-disabled-border | none | ||
Description
The border color of the disabled breadcrumb link | |||
$kendo-breadcrumb-link-selected-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of selected the Breadcrumb link | |||
$kendo-breadcrumb-link-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the selected breadcrumb link | |||
$kendo-breadcrumb-link-selected-border | transparent | ||
Description
The border color of the selected breadcrumb link | |||
$kendo-breadcrumb-link-selected-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the selected breadcrumb link | |||
$kendo-breadcrumb-root-link-bg | $kendo-breadcrumb-link-bg | ||
Description
The background color of the Breadcrumb root link | |||
$kendo-breadcrumb-root-link-text | $kendo-breadcrumb-link-text | ||
Description
The text color of the Breadcrumb root link | |||
$kendo-breadcrumb-root-link-border | $kendo-breadcrumb-link-border | ||
Description
The border color of the Breadcrumb root link | |||
$kendo-breadcrumb-root-link-hover-bg | $kendo-breadcrumb-link-hover-bg | ||
Description
The background color of the hovered breadcrumb root link | |||
$kendo-breadcrumb-root-link-hover-text | $kendo-breadcrumb-link-hover-text | ||
Description
The text color of the hovered breadcrumb root link | |||
$kendo-breadcrumb-root-link-hover-border | $kendo-breadcrumb-link-hover-border | ||
Description
The border color of the hovered breadcrumb root link | |||
$kendo-breadcrumb-root-link-active-bg | $kendo-breadcrumb-link-active-bg | ||
Description
The background color of the active breadcrumb root link | |||
$kendo-breadcrumb-root-link-active-text | $kendo-breadcrumb-link-active-text | ||
Description
The text color of the active breadcrumb root link | |||
$kendo-breadcrumb-root-link-active-border | $kendo-breadcrumb-link-active-border | ||
Description
The border color of the active breadcrumb root link | |||
$kendo-breadcrumb-root-link-focus-bg | $kendo-breadcrumb-link-focus-bg | ||
Description
The background color of the focused breadcrumb root link | |||
$kendo-breadcrumb-root-link-focus-text | $kendo-breadcrumb-link-focus-text | ||
Description
The text color of the focused breadcrumb root link | |||
$kendo-breadcrumb-root-link-focus-shadow | $kendo-breadcrumb-link-focus-shadow | ||
Description
The border color of the focused breadcrumb root link | |||
$kendo-breadcrumb-root-link-focus-hover-bg | $kendo-breadcrumb-link-focus-hover-bg | ||
Description
The focus and hover background color of the Breadcrumb root link | |||
$kendo-breadcrumb-root-link-disabled-text | $kendo-breadcrumb-link-disabled-text | ||
Description
The text color of the disabled breadcrumb root link | |||
$kendo-breadcrumb-icon-link-padding-y | map.get( $kendo-spacing, 2.5 ) | ||
Description
The vertical padding of the Breadcrumb link icon | |||
$kendo-breadcrumb-sm-icon-link-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the small Breadcrumb link icon. | |||
$kendo-breadcrumb-md-icon-link-padding-y | $kendo-breadcrumb-icon-link-padding-y | ||
Description
The vertical padding of the medium Breadcrumb link icon. | |||
$kendo-breadcrumb-lg-icon-link-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the large Breadcrumb link icon. | |||
$kendo-breadcrumb-icon-link-padding-x | $kendo-breadcrumb-icon-link-padding-y | ||
Description
The horizontal padding of the Breadcrumb link icon | |||
$kendo-breadcrumb-sm-icon-link-padding-x | $kendo-breadcrumb-sm-icon-link-padding-y | ||
Description
The horizontal padding of the small Breadcrumb link icon. | |||
$kendo-breadcrumb-md-icon-link-padding-x | $kendo-breadcrumb-icon-link-padding-x | ||
Description
The horizontal padding of the medium Breadcrumb link icon. | |||
$kendo-breadcrumb-lg-icon-link-padding-x | $kendo-breadcrumb-lg-icon-link-padding-y | ||
Description
The horizontal padding of the large Breadcrumb link icon. | |||
$kendo-breadcrumb-sizes | (
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
)
) | ||
Description
The sizes map for the Breadcrumb. |
Button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-actions-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the action buttons. | |||
$kendo-button-border-width | 1px | ||
Description
The width of the border around the Button. | |||
$kendo-button-sm-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the small Button. | |||
$kendo-button-md-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the medium Button. | |||
$kendo-button-lg-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the large Button. | |||
$kendo-button-sm-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the small Button. | |||
$kendo-button-md-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the medium Button. | |||
$kendo-button-lg-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the large Button. | |||
$kendo-button-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the small Button. | |||
$kendo-button-md-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the medium Button. | |||
$kendo-button-lg-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the large Button. | |||
$kendo-button-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the small Button. | |||
$kendo-button-md-line-height | 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 | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the large Button. | |||
$kendo-button-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Button. | |||
$kendo-button-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
The font weight of the Button. | |||
$kendo-button-calc-size | calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) | ||
Description
The calculated height of the Button. | |||
$kendo-button-inner-calc-size | calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) | ||
Description
The calculated inner height of the Button excluding the border width. | |||
$kendo-button-sizes | (
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
)
) | ||
Description
The sizes map for the Button. | |||
$kendo-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The content spacing of the Button. | |||
$kendo-button-focus-offset | map.get( $kendo-spacing, 0.5 ) | ||
Description
The offset of the focused Button. | |||
$kendo-button-focus-outline-width | 1px | ||
Description
The Outline width of the focused Button. | |||
$kendo-button-focus-outline-style | solid | ||
Description
The outline style of the focused Button. | |||
$kendo-button-flat-focus-offset | 1px | ||
Description
The offset of the flat focused Button. | |||
$kendo-button-flat-focus-outline-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The outline width of the flat focused Button. | |||
$kendo-button-link-focus-offset | 0 | ||
Description
The offset of the link focused Button. | |||
$kendo-button-link-focus-outline-width | 1px | ||
Description
The outline width of the flat focused Button. | |||
$kendo-button-theme-colors | () | ||
Description
The theme colors map for the Button. |
Calendar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-calendar-border-width | 1px | ||
Description
Width of the border around the calendar. | |||
$kendo-calendar-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the calendar. | |||
$kendo-calendar-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the calendar. | |||
$kendo-calendar-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the calendar. | |||
$kendo-calendar-cell-size | 28px | ||
Description
Size of the calendar cell. | |||
$kendo-calendar-bg | var( --kendo-component-bg, initial) | ||
Description
Background color of the calendar. | |||
$kendo-calendar-text | var( --kendo-component-text, initial) | ||
Description
Text color of the calendar. | |||
$kendo-calendar-border | var( --kendo-component-border, initial) | ||
Description
Border color of the calendar. | |||
$kendo-calendar-header-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the calendar header. | |||
$kendo-calendar-header-padding-y | map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the calendar header. | |||
$kendo-calendar-header-border-width | 1px | ||
Description
Width of the bottom border of the calendar header. | |||
$kendo-calendar-header-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the calendar header. | |||
$kendo-calendar-header-text | $kendo-calendar-text | ||
Description
Text color of the calendar header. | |||
$kendo-calendar-header-border | $kendo-calendar-border | ||
Description
Border color of the calendar header. | |||
$kendo-calendar-nav-gap | 0 | ||
Description
Spacing between the navigation buttons of the calendar. | |||
$kendo-calendar-footer-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the calendar footer. | |||
$kendo-calendar-footer-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the calendar footer. | |||
$kendo-calendar-cell-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the calendar cell. | |||
$kendo-calendar-cell-padding-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
Horizontal padding of the calendar cell. | |||
$kendo-calendar-cell-padding-y | $kendo-calendar-cell-padding-x | ||
Description
Vertical padding of the calendar cell. | |||
$kendo-calendar-cell-line-height | $kendo-calendar-line-height | ||
Description
Line height of the calendar cell. | |||
$kendo-calendar-cell-border-radius | var( --kendo-border-radius-md, 0) | ||
Description
Border radius of the calendar cell. | |||
$kendo-calendar-header-cell-padding-x | 0 | ||
Description
Horizontal padding of the calendar header cell. | |||
$kendo-calendar-header-cell-padding-y | 0 | ||
Description
Vertical padding of the calendar header cell. | |||
$kendo-calendar-header-cell-width | $kendo-calendar-cell-size | ||
Description
Width of the calendar header cell. | |||
$kendo-calendar-header-cell-height | $kendo-calendar-cell-size | ||
Description
Height of the calendar header cell. | |||
$kendo-calendar-header-cell-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the calendar header cell. | |||
$kendo-calendar-header-cell-line-height | 2 | ||
Description
Line height of the calendar header cell. | |||
$kendo-calendar-header-cell-bg | inherit | ||
Description
Background color of the calendar header cell. | |||
$kendo-calendar-header-cell-text | inherit | ||
Description
Text color of the calendar header cell. | |||
$kendo-calendar-caption-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the calendar captions. | |||
$kendo-calendar-caption-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the calendar captions. | |||
$kendo-calendar-caption-height | $kendo-calendar-cell-size | ||
Description
Height of the calendar captions. | |||
$kendo-calendar-caption-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the calendar captions. | |||
$kendo-calendar-caption-line-height | normal | ||
Description
Line height of the calendar captions. | |||
$kendo-calendar-caption-font-weight | bold | ||
Description
Font weight of the calendar captions. | |||
$kendo-calendar-caption-color | $kendo-subtle-text | ||
Description
Text color of the calendar captions. | |||
$kendo-calendar-view-padding-block-end | map.get( $kendo-spacing, 3 ) | ||
Description
Bottom padding of calendar views. | |||
$kendo-calendar-view-gap | map.get( $kendo-spacing, 4 ) | ||
Description
Spacing between the views in the multiview calendar. | |||
$kendo-calendar-weekend-bg | inherit | ||
Description
Background color of the calendar weekend cell. | |||
$kendo-calendar-weekend-text | inherit | ||
Description
Text color of the calendar weekend cell. | |||
$kendo-calendar-today-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the calendar today cell. | |||
$kendo-calendar-today-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background color of the calendar today cell. | |||
$kendo-calendar-today-hover-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the calendar today cell when hovered. | |||
$kendo-calendar-today-hover-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) | ||
Description
Background color of the calendar today cell when hovered. | |||
$kendo-calendar-today-border-radius | 9999px | ||
Description
Border radius of the calendar today cell. | |||
$kendo-calendar-week-number-bg | inherit | ||
Description
Background color of the calendar week number cell. | |||
$kendo-calendar-week-number-text | var( --kendo-subtle-text, inherit ) | ||
Description
Text color of the calendar week number cell. | |||
$kendo-calendar-other-month-bg | inherit | ||
Description
Background color of the other months calendar cells. | |||
$kendo-calendar-other-month-text | var( --kendo-disabled-text, inherit ) | ||
Description
Text color of the other months calendar cells. | |||
$kendo-calendar-cell-bg | inherit | ||
Description
Background color of the calendar cells. | |||
$kendo-calendar-cell-text | inherit | ||
Description
Text color of the calendar cells. | |||
$kendo-calendar-cell-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the calendar cells when hovered. | |||
$kendo-calendar-cell-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Text color of the calendar cells when hovered. | |||
$kendo-calendar-cell-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the selected calendar cell. | |||
$kendo-calendar-cell-selected-text | var( --kendo-selected-text, inherit ) | ||
Description
Text color of the selected calendar cell. | |||
$kendo-calendar-cell-selected-border | var( --kendo-selected-border, inherit ) | ||
Description
Border color of the selected calendar cell. | |||
$kendo-calendar-cell-selected-shadow | inset 0 0 0 1px $kendo-calendar-cell-selected-border | ||
Description
Shadow of the selected calendar cell. | |||
$kendo-calendar-cell-selected-hover-bg | var( --kendo-selected-hover-bg, inherit ) | ||
Description
Background color of the selected calendar cell when hovered. | |||
$kendo-calendar-cell-selected-hover-text | var( --kendo-selected-hover-text, inherit ) | ||
Description
Text color of the selected calendar cell when hovered. | |||
$kendo-calendar-cell-focus-shadow | inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | ||
Description
Shadow of the selected calendar cell when focused. | |||
$kendo-calendar-cell-selected-focus-shadow | $kendo-calendar-cell-focus-shadow | ||
Description
Shadow of the selected calendar cell when selected and focused. | |||
$kendo-calendar-navigation-width | 5em | ||
Description
Width of the navigation in the infinite calendar. | |||
$kendo-calendar-navigation-item-height | 2em | ||
Description
Height of the navigation items in the infinite calendar. | |||
$kendo-calendar-navigation-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the navigation in the infinite calendar. | |||
$kendo-calendar-navigation-text | $kendo-calendar-header-text | ||
Description
Text color of the navigation in the infinite calendar. | |||
$kendo-calendar-navigation-border | $kendo-calendar-header-border | ||
Description
Border color of the navigation in the infinite calendar. | |||
$kendo-infinite-calendar-header-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Background color of the navigation in the infinite calendar. | |||
$kendo-infinite-calendar-header-padding-y | map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) | ||
Description
Background color of the navigation in the infinite calendar. | |||
$kendo-infinite-calendar-view-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the infinite calendar. | |||
$kendo-infinite-calendar-view-padding-y | 0px | ||
Description
Vertical padding of the infinite calendar. | |||
$kendo-calendar-range-bg | if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) | ||
Description
Background color of the range selection in the calendar. | |||
$kendo-calendar-range-text | inherit | ||
Description
Text color of the range selection in the calendar. | |||
$kendo-calendar-range-border | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
Border color of the range selection in the calendar. | |||
$kendo-calendar-start-range-hover-shadow | inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
Hover shadow of the start range selection in the calendar. | |||
$kendo-calendar-mid-range-hover-shadow | inset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
Hover shadow of the mid range selection in the calendar. | |||
$kendo-calendar-end-range-hover-shadow | inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
Hover shadow of the end range selection in the calendar. |
Captcha
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-captcha-spacer | map.get( $kendo-spacing, 2 ) | ||
Description
The spacer of the Captcha. | |||
$kendo-captcha-width | 280px | ||
Description
The width of the Captcha. | |||
$kendo-captcha-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Captcha. | |||
$kendo-captcha-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Captcha. | |||
$kendo-captcha-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Captcha. | |||
$kendo-captcha-spacing | $kendo-captcha-spacer | ||
Description
The spacing of the Captcha. | |||
$kendo-captcha-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Captcha. | |||
$kendo-captcha-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Captcha. | |||
$kendo-captcha-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Captcha. | |||
$kendo-captcha-image-wrap-spacing | $kendo-captcha-spacer | ||
Description
The spacing of the Captcha image wrapper. | |||
$kendo-captcha-image-controls-spacing | math.div( $kendo-captcha-spacer, 2 ) | ||
Description
The spacing of the Captcha image controls. | |||
$kendo-captcha-validation-offset-y | math.div( $kendo-captcha-spacer, 2 ) | ||
Description
The offset of the Captcha validation message. | |||
$kendo-captcha-validation-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Captcha validation message. |
Card
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-card-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Card. | |||
$kendo-card-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Card. | |||
$kendo-card-border-width | 0px | ||
Description
The width of the border around the Card. | |||
$kendo-card-border-radius | $kendo-border-radius-md | ||
Description
The border radius of the Card. | |||
$kendo-card-inner-border-radius | calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) | ||
Description
The inner border radius of the Card. | |||
$kendo-card-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Card. | |||
$kendo-card-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Card. | |||
$kendo-card-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Card. | |||
$kendo-card-deck-gap | map.get( $kendo-spacing, 4 ) | ||
Description
The spacing between the Cards in the Card deck. | |||
$kendo-card-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Card. | |||
$kendo-card-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Card. | |||
$kendo-card-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Card. | |||
$kendo-card-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The shadow of the Card. | |||
$kendo-card-focus-bg | $kendo-card-bg | ||
Description
The background color of the focused Card. | |||
$kendo-card-focus-text | null | ||
Description
The text color of the focused Card. | |||
$kendo-card-focus-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the focused Card. | |||
$kendo-card-focus-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the focused Card. | |||
$kendo-card-header-font-size | var( --kendo-font-size-lg, inherit ) | ||
Description
The font size of the Card header. | |||
$kendo-card-header-font-family | var( --kendo-font-family, inherit ) | ||
Description
Тhe font family of the Card header. | |||
$kendo-card-header-font-weight | var( --kendo-font-weight, initial ) | ||
Description
The font weight of the Card header. | |||
$kendo-card-header-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Card header. | |||
$kendo-card-header-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Card header. | |||
$kendo-card-header-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Card header. | |||
$kendo-card-header-border-width | 0 | ||
Description
The bottom border width of the Card header. | |||
$kendo-card-header-bg | inherit | ||
Description
The background color of the Card header. | |||
$kendo-card-header-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the Card header. | |||
$kendo-card-header-border | inherit | ||
Description
The border color of the Card header. | |||
$kendo-card-body-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Card body. | |||
$kendo-card-body-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Card body. | |||
$kendo-card-footer-padding-x | $kendo-card-padding-x | ||
Description
The horizontal padding of the Card footer. | |||
$kendo-card-footer-padding-y | $kendo-card-padding-y | ||
Description
The vertical padding of the Card footer. | |||
$kendo-card-footer-border-width | 0 | ||
Description
The top border width of the Card footer. | |||
$kendo-card-footer-bg | inherit | ||
Description
The background color of the Card footer. | |||
$kendo-card-footer-text | inherit | ||
Description
The text color of the Card footer. | |||
$kendo-card-footer-border | inherit | ||
Description
The border color of the Card footer. | |||
$kendo-card-title-font-size | var( --kendo-font-size-lg, inherit ) | ||
Description
The font size of the Card title. | |||
$kendo-card-title-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Card title. | |||
$kendo-card-title-font-weight | $kendo-card-header-font-weight | ||
Description
The font weight of the Card title. | |||
$kendo-card-title-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Card title. | |||
$kendo-card-title-margin-bottom | map.get( $kendo-spacing, 3 ) | ||
Description
The bottom margin of the Card title. | |||
$kendo-card-subtitle-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Card subtitle. | |||
$kendo-card-subtitle-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Card subtitle. | |||
$kendo-card-subtitle-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Card subtitle. | |||
$kendo-card-subtitle-margin-bottom | map.get( $kendo-spacing, 3 ) | ||
Description
The bottom margin of the Card subtitle. | |||
$kendo-card-subtitle-text | $kendo-subtle-text | ||
Description
The text color of the Card subtitle. | |||
$kendo-card-img-max-width | 100px | ||
Description
The maximum width of the Card image. | |||
$kendo-card-avatar-size | 3rem | ||
Description
The size of the Avatar in the Card. | |||
$kendo-card-avatar-spacing | $kendo-card-header-padding-x | ||
Description
The spacing between the Avatar and the text in the Card. | |||
$kendo-card-actions-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Card actions. | |||
$kendo-card-actions-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Card actions. | |||
$kendo-card-actions-border-width | 0 | ||
Description
The top border width of the Card actions. | |||
$kendo-card-actions-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the Card actions. | |||
$kendo-card-deck-scroll-button-radius | 0 | ||
Description
The border radius of the scroll button in the Card deck. | |||
$kendo-card-deck-scroll-button-offset | ( -1 * $kendo-button-border-width ) | ||
Description
The border radius of the scroll button in the Card deck. | |||
$kendo-card-callout-size | 20px | ||
Description
The size of the Card callout. |
Chart
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-chart-label-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font-size of the label of the chart component. | |||
$kendo-chart-inactive-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The inactive background color of the chart component. |
Charts
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-series-a | if($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 )) | ||
Description
The first base series color and its light and dark shades. | |||
$kendo-series-b | if($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 )) | ||
Description
The second base series color and its light and dark shades. | |||
$kendo-series-c | if($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 )) | ||
Description
The third base series color and its light and dark shades. | |||
$kendo-series-d | if($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 )) | ||
Description
The fourth base series color and its light and dark shades. | |||
$kendo-series-e | if($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 )) | ||
Description
The fifth base series color and its light and dark shades. | |||
$kendo-series-f | if($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 )) | ||
Description
The sixth base series color and its light and dark shades. | |||
$kendo-series-1 | $kendo-series-a | ||
Description
The series colors in order: base, light, dark, lighter, darker | |||
$kendo-chart-border-width | 0px default | ||
Description
The border width of the chart component. | |||
$kendo-chart-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font-family of the chart component. | |||
$kendo-chart-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font-size of the chart component. | |||
$kendo-chart-line-height | var( --kendo-line-height, normal ) | ||
Description
The line-height of the chart component. | |||
$kendo-chart-tooltip-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font-size of the tooltip of the chart component. | |||
$kendo-chart-tooltip-line-height | var( --kendo-line-height-sm, normal ) | ||
Description
The line-height of the tooltip of the chart component. | |||
$kendo-chart-title-font-size | var( --kendo-font-size-lg, inherit ) | ||
Description
The font-size of the title of the chart component. | |||
$kendo-chart-pane-title-font-size | var( --kendo-font-size-lg, inherit ) | ||
Description
The font-size of the pane title of the chart component. | |||
$kendo-chart-pane-title-font-weight | var( --kendo-font-weight, inherit ) | ||
Description
The font-weight of the pane title of the chart component. | |||
$kendo-chart-major-lines | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The color of the chart component major grid lines. | |||
$kendo-chart-minor-lines | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The color of the chart component minor grid lines. | |||
$kendo-chart-area-opacity | .6 | ||
Description
The opacity of the chart area. | |||
$kendo-chart-area-inactive-opacity | .1 | ||
Description
The inactive opacity of the chart area. | |||
$kendo-chart-line-inactive-opacity | .3 | ||
Description
The inactive opacity of the chart line. | |||
$kendo-chart-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the chart component. | |||
$kendo-chart-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the chart component. | |||
$kendo-chart-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the chart component. | |||
$kendo-chart-tooltip-color | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the chart tooltip. | |||
$kendo-chart-tooltip-color-inverse | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
The inverse text color of the chart tooltip. | |||
$kendo-chart-crosshair-background | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
The background color of the chart crosshairs. | |||
$kendo-chart-crosshair-shared-tooltip-color | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the chart shared crosshair tooltip. | |||
$kendo-chart-crosshair-shared-tooltip-background | var( --kendo-component-bg, initial ) | ||
Description
The background color of the chart shared crosshair tooltip. | |||
$kendo-chart-crosshair-shared-tooltip-border | transparent | ||
Description
The border color of the chart shared crosshair tooltip. | |||
$kendo-chart-notes-background | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The background color of the chart notes. | |||
$kendo-chart-notes-border | $kendo-chart-notes-background | ||
Description
The border color of the chart notes. | |||
$kendo-chart-notes-lines | $kendo-chart-notes-background | ||
Description
The background color of the chart note lines. | |||
$kendo-chart-handle-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the chart handle. | |||
$kendo-chart-handle-text | $kendo-chart-text | ||
Description
The text color of the chart handle. | |||
$kendo-chart-handle-border | $kendo-chart-handle-bg | ||
Description
The border color of the chart handle. | |||
$kendo-chart-handle-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The hover background color of the chart handle. | |||
$kendo-chart-handle-hover-text | var( --kendo-hover-text, initial ) | ||
Description
The hover text color of the chart handle. | |||
$kendo-chart-handle-hover-border | var( --kendo-hover-border, initial ) | ||
Description
The hover border color of the chart handle. | |||
$kendo-color-error-bars-background | if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) | ||
Description
The color of the chart error bars. | |||
$kendo-selection-handle-size | 24px | ||
Description
The size of the selection handle of the chart component. | |||
$kendo-selection-border-color | var( --kendo-component-border, initial ) | ||
Description
The color of the selection handle of the chart component. | |||
$kendo-treemap-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font-family of the treemap. | |||
$kendo-treemap-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font-size of the treemap. | |||
$kendo-treemap-line-height | var( --kendo-line-height, normal ) | ||
Description
The line-height of the treemap. | |||
$kendo-treemap-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the treemap. | |||
$kendo-treemap-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the treemap. | |||
$kendo-treemap-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the treemap. | |||
$kendo-treemap-title-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the treemap title. | |||
$kendo-treemap-title-text | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
The text color of the treemap title. | |||
$kendo-treemap-title-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the treemap title. |
Chat
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-chat-transition | var( --kendo-transition, inherit ) | ||
Description
The box shadow transition of the Chat. | |||
$kendo-chat-link-hover-text | var( --kendo-link-hover-text, inherit ) | ||
Description
The hover text color of the Chat bubble links. | |||
$kendo-chat-link-text | var( --kendo-link-text, inherit ) | ||
Description
The text color of the Chat bubble links. | |||
$kendo-chat-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the Chat. | |||
$kendo-chat-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the Chat. | |||
$kendo-chat-width | 500px | ||
Description
The width of the Chat. | |||
$kendo-chat-height | 600px | ||
Description
The height of the Chat. | |||
$kendo-chat-border-width | 1px | ||
Description
The border width of the Chat. | |||
$kendo-chat-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Chat. | |||
$kendo-chat-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Chat. | |||
$kendo-chat-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Chat. | |||
$kendo-chat-typing-indicator-dot-size | 8px | ||
Description
The size of the Chat typing indicator dot. | |||
$kendo-chat-typing-indicator-dot-spacing | 5px | ||
Description
The spacing of the Chat typing indicator dot. | |||
$kendo-chat-item-spacing-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal spacing between the items of the Chat. | |||
$kendo-chat-item-spacing-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical spacing between the items of the Chat. | |||
$kendo-chat-message-list-padding-x | $kendo-chat-padding-x | ||
Description
The horizontal padding of the Chat message list. | |||
$kendo-chat-message-list-padding-y | $kendo-chat-padding-y | ||
Description
The vertical padding of the Chat message list. | |||
$kendo-chat-message-list-spacing | $kendo-chat-item-spacing-y | ||
Description
The spacing of the Chat message list. | |||
$kendo-chat-timestamp-font-size | smaller | ||
Description
The font size of the Chat timestamp. | |||
$kendo-chat-timestamp-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Chat timestamp. | |||
$kendo-chat-timestamp-transform | uppercase | ||
Description
The text transform of the Chat timestamp. | |||
$kendo-chat-timestamp-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the Chat timestamp. | |||
$kendo-chat-timestamp-bg | normal | ||
Description
The background color of the Chat timestamp. | |||
$kendo-chat-bubble-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Chat bubble message. | |||
$kendo-chat-bubble-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Chat bubble message. | |||
$kendo-chat-bubble-spacing | map.get( $kendo-spacing, 0.5 ) | ||
Description
The spacing of the Chat bubble message. | |||
$kendo-chat-bubble-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Chat bubble message. | |||
$kendo-chat-scroll-button | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the Chat scroll button. | |||
$kendo-card-deck-scrollbar-size | 20px | ||
Description
The size of the Chat Card deck scrollbar. | |||
$kendo-chat-bubble-border-radius | map.get( $kendo-spacing, 3 ) | ||
Description
The border radius of the Chat bubble message. | |||
$kendo-chat-bubble-border-radius-sm | var( --kendo-border-radius, 0 ) | ||
Description
The border radius of the Chat small bubble message | |||
$kendo-chat-avatar-size | 32px | ||
Description
The size of the Chat Avatar. | |||
$kendo-chat-avatar-spacing | $kendo-chat-item-spacing-x | ||
Description
The spacing of the Chat Avatar. | |||
$kendo-chat-toolbar-padding-x | $kendo-toolbar-md-padding-x | ||
Description
The horizontal padding of the Chat Toolbar. | |||
$kendo-chat-toolbar-padding-y | $kendo-toolbar-md-padding-y | ||
Description
The vertical padding of the Chat Toolbar. | |||
$kendo-chat-toolbar-spacing | $kendo-toolbar-md-spacing | ||
Description
The spacing of the Chat Toolbar. | |||
$kendo-chat-toolbar-bg | $kendo-toolbar-bg | ||
Description
The background color of the Chat Toolbar. | |||
$kendo-chat-toolbar-text | $kendo-toolbar-text | ||
Description
The text color of the Chat Toolbar. | |||
$kendo-chat-toolbar-border | inherit | ||
Description
The border color of the Chat Toolbar. | |||
$kendo-chat-quick-reply-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Chat quick reply. | |||
$kendo-chat-quick-reply-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Chat quick reply. | |||
$kendo-chat-quick-reply-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the Chat quick reply. | |||
$kendo-chat-quick-reply-line-height | $kendo-chat-bubble-line-height | ||
Description
The line height of the Chat quick reply. | |||
$kendo-chat-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Chat. | |||
$kendo-chat-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the Chat. | |||
$kendo-chat-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the Chat. | |||
$kendo-chat-bubble-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the Chat bubble. | |||
$kendo-chat-bubble-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the Chat bubble. | |||
$kendo-chat-bubble-border | $kendo-chat-bubble-bg | ||
Description
The border color of the Chat bubble. | |||
$kendo-chat-bubble-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The box shadow of the Chat bubble. | |||
$kendo-chat-bubble-hover-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The shadow of the hovered Chat bubble. | |||
$kendo-chat-bubble-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the selected Chat bubble. | |||
$kendo-chat-alt-bubble-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-text | var( --kendo-component-bg, inherit ) | ||
Description
The text color of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-border | $kendo-chat-alt-bubble-bg | ||
Description
The border color of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The shadow of the Chat alt bubble. | |||
$kendo-chat-alt-bubble-hover-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The shadow of the hovered Chat alt bubble. | |||
$kendo-chat-alt-bubble-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the selected Chat alt bubble. | |||
$kendo-chat-quick-reply-bg | transparent | ||
Description
The background color of the Chat quick reply. | |||
$kendo-chat-quick-reply-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the Chat quick reply. | |||
$kendo-chat-quick-reply-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Chat quick reply. | |||
$kendo-chat-quick-reply-hover-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the hovered Chat quick reply. | |||
$kendo-chat-quick-reply-hover-text | var( --kendo-component-bg, inherit ) | ||
Description
The text color of the hovered Chat quick reply. | |||
$kendo-chat-quick-reply-hover-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the hovered Chat quick reply. |
Checkbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-checkbox-border-radius | null | ||
Description
The border radius of the CheckBox. | |||
$kendo-checkbox-border-width | 1px | ||
Description
The border width of the CheckBox. | |||
$kendo-checkbox-bg | $kendo-component-bg | ||
Description
The background color of the CheckBox. | |||
$kendo-checkbox-text | transparent | ||
Description
The text color of the CheckBox. | |||
$kendo-checkbox-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the CheckBox. | |||
$kendo-checkbox-hover-bg | $kendo-checkbox-bg | ||
Description
The background color of the hovered CheckBox. | |||
$kendo-checkbox-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) | ||
Description
The text color of the hovered CheckBox. | |||
$kendo-checkbox-hover-border | $kendo-checkbox-border | ||
Description
The border color of the hovered CheckBox. | |||
$kendo-checkbox-checked-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the checked CheckBox. | |||
$kendo-checkbox-checked-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the checked CheckBox. | |||
$kendo-checkbox-checked-border | $kendo-checkbox-checked-bg | ||
Description
The border color of the checked CheckBox. | |||
$kendo-checkbox-hover-checked-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The background of the hovered and checked CheckBox. | |||
$kendo-checkbox-hover-checked-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the hovered and checked CheckBox. | |||
$kendo-checkbox-hover-checked-border | $kendo-checkbox-hover-checked-bg | ||
Description
The border color of the hovered and checked CheckBox. | |||
$kendo-checkbox-focus-border | null | ||
Description
The border color of the focused CheckBox. | |||
$kendo-checkbox-focus-shadow | null | ||
Description
The box shadow of the focused CheckBox. | |||
$kendo-checkbox-focus-outline | 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The outline of the focused CheckBox. | |||
$kendo-checkbox-indeterminate-bg | $kendo-checkbox-bg | ||
Description
The background color of the indeterminate CheckBox. | |||
$kendo-checkbox-indeterminate-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) | ||
Description
The text color of the indeterminate CheckBox. | |||
$kendo-checkbox-indeterminate-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the indeterminate CheckBox. | |||
$kendo-checkbox-hover-indeterminate-bg | $kendo-checkbox-bg | ||
Description
The background color of the hovered and indeterminate CheckBox. | |||
$kendo-checkbox-hover-indeterminate-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) | ||
Description
The text color of the hovered and indeterminate CheckBox. | |||
$kendo-checkbox-hover-indeterminate-border | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The border color of the hovered and indeterminate CheckBox. | |||
$kendo-checkbox-disabled-bg | $kendo-checkbox-bg | ||
Description
The background color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The text color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the disabled CheckBox. | |||
$kendo-checkbox-disabled-checked-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-checked-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-checked-border | if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the disabled and checked CheckBox. | |||
$kendo-checkbox-disabled-indeterminate-bg | $kendo-checkbox-bg | ||
Description
The background color of the disabled and indeterminate CheckBox. | |||
$kendo-checkbox-disabled-indeterminate-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 )) | ||
Description
The border color of the disabled and indeterminate CheckBox. | |||
$kendo-checkbox-disabled-indeterminate-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the disabled and indeterminate CheckBox. | |||
$kendo-checkbox-invalid-bg | $kendo-checkbox-bg | ||
Description
The background color of an invalid CheckBox. | |||
$kendo-checkbox-invalid-text | $kendo-invalid-text | ||
Description
The text color of an invalid CheckBox. | |||
$kendo-checkbox-invalid-border | $kendo-invalid-border | ||
Description
The border color of an invalid CheckBox. | |||
$kendo-checkbox-indicator-type | image | ||
Description
The type of the CheckBox indicator. | |||
$kendo-checkbox-glyph-font-family | "WebComponentsIcons", monospace | ||
Description
The font family of the CheckBox indicator glyph. | |||
$kendo-checkbox-checked-glyph | "\e118" | ||
Description
The glyph of the CheckBox indicator. | |||
$kendo-checkbox-indeterminate-glyph | "\e121" | ||
Description
The glyph of the indeterminate CheckBox indicator. | |||
$kendo-checkbox-hover-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the hovered CheckBox indicator. | |||
$kendo-checkbox-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the checked CheckBox indicator. | |||
$kendo-checkbox-indeterminate-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the indeterminate CheckBox indicator. | |||
$kendo-checkbox-hover-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the hovered and checked CheckBox indicator. | |||
$kendo-checkbox-hover-indeterminate-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the hovered and indeterminate CheckBox indicator. | |||
$kendo-checkbox-disabled-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the checked CheckBox indicator. | |||
$kendo-checkbox-disabled-indeterminate-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the indeterminate CheckBox indicator. | |||
$kendo-checkbox-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the CheckBox inside a label. | |||
$kendo-checkbox-list-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The spacing between the items in a horizontal CheckBox list. | |||
$kendo-checkbox-list-item-padding-x | 0px | ||
Description
The horizontal padding of the CheckBox list items. | |||
$kendo-checkbox-list-item-padding-y | $kendo-list-md-item-padding-y | ||
Description
The vertical padding of the CheckBox list items. | |||
$kendo-checkbox-ripple-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the CheckBox' ripple. | |||
$kendo-checkbox-ripple-opacity | .25 | ||
Description
The opacity of the CheckBox' ripple. |
Chip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-chip-border-width | 1px | ||
Description
The width of the border around the Chip. | |||
$kendo-chip-spacing | map.get( $kendo-spacing, 1 ) | ||
Description
The spacing between the text and the icons of the Chip. | |||
$kendo-chip-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Chip. | |||
$kendo-chip-avatar-width | 1em | ||
Description
The width of the Chip' avatar. | |||
$kendo-chip-avatar-height | 1em | ||
Description
The height of the Chip' avatar. | |||
$kendo-chip-avatar-flex-basis | 1em | ||
Description
The flex basis of the Chip' avatar. | |||
$kendo-chip-disabled-text | var( --kendo-disabled-text, inherit ) | ||
Description
The text color of the disabled Chip. | |||
$kendo-chip-solid-disabled-bg | var( --kendo-disabled-bg, transparent ) | ||
Description
The background color of the solid disabled Chip. | |||
$kendo-chip-solid-disabled-border | var( --kendo-disabled-border, inherit ) | ||
Description
The border color of the solid disabled Chip. | |||
$kendo-chip-outline-disabled-bg | var( $kendo-component-bg, transparent ) | ||
Description
The background color of the outline disabled Chip. | |||
$kendo-chip-outline-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
The border color of the outline disabled Chip. | |||
$kendo-chip-focus-offset | map.get( $kendo-spacing, 0.5 ) | ||
Description
The offset of the outline focused Chip. | |||
$kendo-chip-focus-outline-width | 1px | ||
Description
The outline width of the outline focused Chip. | |||
$kendo-chip-focus-outline-style | solid | ||
Description
The outline style of the outline focused Chip. | |||
$kendo-chip-sm-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the small Chip. | |||
$kendo-chip-md-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the medium Chip. | |||
$kendo-chip-lg-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the large Chip. | |||
$kendo-chip-sm-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
The vertical padding of the small Chip. | |||
$kendo-chip-md-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the medium Chip. | |||
$kendo-chip-lg-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the large Chip. | |||
$kendo-chip-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the small Chip. | |||
$kendo-chip-md-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the medium Chip. | |||
$kendo-chip-lg-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the large Chip. | |||
$kendo-chip-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The small Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-md-line-height | var( --kendo-line-height, normal ) | ||
Description
The medium Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-lg-line-height | var( --kendo-line-height, normal ) | ||
Description
The large Chip's line height that is related to the $kendo-font-size. | |||
$kendo-chip-calc-size | calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) | ||
Description
The calculated height of the Chip. | |||
$kendo-chip-sizes | (
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
)
) | ||
Description
The map with the sizes of the Chip. | |||
$kendo-chip-list-sizes | (
sm: map.get( $kendo-spacing, 1 ),
md: map.get( $kendo-spacing, 1 ),
lg: map.get( $kendo-spacing, 1 )
) | ||
Description
The sizes of the Chip list. |
Cologradient
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-gradient-spacer | map.get( $kendo-spacing, 4 ) | ||
Description
The spacer of the ColorGradient. | |||
$kendo-color-gradient-width | 260px | ||
Description
The width of the ColorGradient. | |||
$kendo-color-gradient-border-width | 2px | ||
Description
The width of the border around the ColorGradient. | |||
$kendo-color-gradient-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the ColorGradient. | |||
$kendo-color-gradient-padding-y | $kendo-color-gradient-spacer | ||
Description
The vertical padding of the ColorGradient. | |||
$kendo-color-gradient-padding-x | math.div( $kendo-color-gradient-spacer, 2 ) | ||
Description
The horizontal padding of the ColorGradient. | |||
$kendo-color-gradient-spacing | $kendo-color-gradient-spacer | ||
Description
The spacing between the sections of the ColorGradient. | |||
$kendo-color-gradient-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ColorGradient. | |||
$kendo-color-gradient-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ColorGradient. | |||
$kendo-color-gradient-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the ColorGradient. | |||
$kendo-color-gradient-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the ColorGradient. | |||
$kendo-color-gradient-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the ColorGradient. | |||
$kendo-color-gradient-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the ColorGradient. | |||
$kendo-color-gradient-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box shadow of the ColorGradient. | |||
$kendo-color-gradient-focus-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The border color of the focused ColorGradient. | |||
$kendo-color-gradient-focus-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The box shadow of the focused ColorGradient. | |||
$kendo-color-gradient-canvas-border-width | 0 | ||
Description
The width of the border around the ColorGradient canvas. | |||
$kendo-color-gradient-canvas-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the ColorGradient canvas. | |||
$kendo-color-gradient-canvas-spacing | math.div( $kendo-color-gradient-spacer, 2 ) | ||
Description
The spacing between the items of the ColorGradient canvas. | |||
$kendo-color-gradient-canvas-rectangle-height | 180px | ||
Description
The height the ColorGradient canvas hsv rectangle. | |||
$kendo-color-gradient-canvas-rectangle-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the ColorGradient canvas hsv rectangle. | |||
$kendo-color-gradient-canvas-draghandle-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box shadow of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-slider-track-size | 20px | ||
Description
The width of the ColorGradient slider. | |||
$kendo-color-gradient-slider-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the ColorGradient slider. | |||
$kendo-color-gradient-slider-border-width | if($kendo-enable-color-system, 0, 1px) | ||
Description
The width of the border around the ColorGradient slider. | |||
$kendo-color-gradient-slider-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The color of the border around the ColorGradient slider. | |||
$kendo-color-gradient-slider-vertical-size | 180px | ||
Description
The height of the ColorGradient vertical slider. | |||
$kendo-color-gradient-slider-horizontal-size | 100% | ||
Description
The width of the ColorGradient horizontal slider. | |||
$kendo-color-gradient-slider-alpha-bgr | "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" | ||
Description
The background image of the ColorGradient alpha slider. | |||
$kendo-color-gradient-draghandle-width | 20px | ||
Description
The width of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-height | 20px | ||
Description
The height of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-border-width | 2px | ||
Description
The width of the border around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-outline-width | 1px | ||
Description
The width of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-border | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The color of the border around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-shadow | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The color of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box shadow of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-focus-border | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The color of the border around the focused ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-focus-shadow | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The focus color of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-draghandle-hover-shadow | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The hover color of the outline around the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-canvas-draghandle-offset-y | ( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) ) | ||
Description
The vertical offset of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-canvas-draghandle-offset-x | ( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) ) | ||
Description
The horizontal offset of the ColorGradient canvas drag handle. | |||
$kendo-color-gradient-input-width | 48px | ||
Description
The width of the ColorGradient input. | |||
$kendo-color-gradient-input-spacing | math.div( $kendo-color-gradient-spacer, 4 ) | ||
Description
The spacing between the ColorGradient inputs. | |||
$kendo-color-gradient-input-label-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the ColorGradient input labels. | |||
$kendo-color-gradient-input-label-spacing | math.div( $kendo-color-gradient-spacer, 4 ) | ||
Description
The spacing between the ColorGradient inputs and their labels. | |||
$kendo-color-gradient-input-label-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the ColorGradient input labels. | |||
$kendo-color-gradient-contrast-ratio-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
The font weight of the ColorGradient contrast ratio text. | |||
$kendo-color-gradient-contrast-spacing | math.div( $kendo-color-gradient-spacer, 1.5 ) | ||
Description
The spacing between the items in the ColorGradient contrast tool. |
Color System
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-colors | $_default-colors | ||
Description
The global default Colors map. |
Color-preview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-preview-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the color preview. | |||
$kendo-color-preview-border-width | 1px | ||
Description
Border width of the color preview. | |||
$kendo-color-preview-bg | transparent | ||
Description
Default background color of the color preview. | |||
$kendo-color-preview-text | inherit | ||
Description
Text color of the color preview. | |||
$kendo-color-preview-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
Border color of the color preview. | |||
$kendo-color-preview-hover-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
Hover Border color of the color preview. | |||
$kendo-color-preview-no-color-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Background color of the color preview when no color is selected. | |||
$kendo-color-preview-no-color-text | if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 )) | ||
Description
Text color of the color preview when no color is selected. | |||
$kendo-color-preview-no-color-border | currentColor | ||
Description
Border color of the color preview when no color is selected. |
Coloreditor
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-editor-spacer | map.get( $kendo-spacing, 2 ) | ||
Description
The spacer of the ColorEditor. | |||
$kendo-color-editor-min-width | 260px | ||
Description
The minimum width of the ColorEditor. | |||
$kendo-color-editor-border-width | 1px | ||
Description
The width of the border around the ColorEditor. | |||
$kendo-color-editor-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the ColorEditor. | |||
$kendo-color-editor-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ColorEditor. | |||
$kendo-color-editor-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ColorEditor. | |||
$kendo-color-editor-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the ColorEditor. | |||
$kendo-color-editor-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the ColorEditor. | |||
$kendo-color-editor-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the ColorEditor. | |||
$kendo-color-editor-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the ColorEditor. | |||
$kendo-color-editor-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box shadow of the ColorEditor. | |||
$kendo-color-editor-focus-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The border color of the focused ColorEditor. | |||
$kendo-color-editor-focus-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The box shadow of the focused ColorEditor. | |||
$kendo-color-editor-header-padding-y | $kendo-color-editor-spacer | ||
Description
The vertical padding of the ColorEditor header. | |||
$kendo-color-editor-header-padding-x | $kendo-color-editor-header-padding-y | ||
Description
The horizontal padding of the ColorEditor header. | |||
$kendo-color-editor-header-actions-spacing | math.div( $kendo-color-editor-spacer, 2 ) | ||
Description
The spacing between the ColorEditor header actions. | |||
$kendo-color-editor-color-preview-width | 34px | ||
Description
The width of the ColorEditor preview. | |||
$kendo-color-editor-color-preview-height | 14px | ||
Description
The height of the ColorEditor preview. | |||
$kendo-color-editor-preview-spacing | map.get( $kendo-spacing, 1 ) | ||
Description
The spacing between the colors in the ColorEditor preview. | |||
$kendo-color-editor-views-padding-y | $kendo-color-editor-spacer | ||
Description
The vertical padding of the ColorEditor views container. | |||
$kendo-color-editor-views-padding-x | $kendo-color-editor-views-padding-y | ||
Description
The horizontal padding of the ColorEditor views container. | |||
$kendo-color-editor-views-spacing | $kendo-color-editor-spacer | ||
Description
The spacing of the ColorEditor views container. | |||
$kendo-color-editor-footer-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the ColorEditor footer. | |||
$kendo-color-editor-footer-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the ColorEditor footer. | |||
$kendo-color-editor-color-gradient-focus-outline-color | rgba(0, 0, 0, 0.3) | ||
Description
The outline color of the focused ColorGradient. | |||
$kendo-color-editor-color-gradient-focus-outline | 2px | ||
Description
The outline width of the focused ColorGradient. | |||
$kendo-color-editor-color-gradient-focus-outline-offset | 2px | ||
Description
The outline offset of the focused ColorGradient. |
Colorpalette
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-color-palette-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ColorPalette. | |||
$kendo-color-palette-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ColorPalette. | |||
$kendo-color-palette-line-height | 0 | ||
Description
The line height of the ColorPalette. | |||
$kendo-color-palette-tile-outline-width | 1px | ||
Description
The outline width of the ColorPalette tile. | |||
$kendo-color-palette-tile-outline-style | solid | ||
Description
The outline style of the ColorPalette tile. | |||
$kendo-color-palette-tile-outline | transparent | ||
Description
The outline color of the ColorPalette tile. | |||
$kendo-color-palette-tile-width | map.get( $kendo-spacing, 6 ) | ||
Description
The width of the ColorPalette tile. | |||
$kendo-color-palette-tile-height | $kendo-color-palette-tile-width | ||
Description
The height of the ColorPalette tile. | |||
$kendo-color-palette-tile-focus-outline | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The outline color of the ColorPalette focused tile. | |||
$kendo-color-palette-tile-focus-shadow | inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The shadow of the ColorPalette focused tile. | |||
$kendo-color-palette-tile-hover-outline | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The outline color of the ColorPalette hovered tile. | |||
$kendo-color-palette-tile-hover-shadow | inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The shadow of the ColorPalette hovered tile. | |||
$kendo-color-palette-tile-selected-outline | $kendo-color-palette-tile-hover-outline | ||
Description
The outline color of the ColorPalette selected tile. | |||
$kendo-color-palette-tile-selected-shadow | $kendo-color-palette-tile-hover-shadow | ||
Description
The shadow of the ColorPalette selected tile. | |||
$kendo-color-palette-tile-selected-hover-outline | $kendo-color-palette-tile-focus-outline | ||
Description
The outline color of the ColorPalette selected hover tile. |
Dialog
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dialog-border-width | 0 | ||
Description
The width of the border around the Dialog. | |||
$kendo-dialog-titlebar-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Dialog titlebar. | |||
$kendo-dialog-titlebar-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Dialog titlebar. | |||
$kendo-dialog-titlebar-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Dialog titlebar. | |||
$kendo-dialog-titlebar-border-width | 0 | ||
Description
The width of the border around the Dialog titlebar. | |||
$kendo-dialog-titlebar-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Dialog titlebar. | |||
$kendo-dialog-titlebar-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the Dialog titlebar. | |||
$kendo-dialog-inner-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the content of the Dialog. | |||
$kendo-dialog-inner-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the content of the Dialog. | |||
$kendo-dialog-buttongroup-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Dialog action buttons. | |||
$kendo-dialog-buttongroup-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical padding of the Dialog action buttons. | |||
$kendo-dialog-buttongroup-border-width | 0 | ||
Description
The width of the top border of the Dialog action buttons. | |||
$kendo-dialog-buttongroup-spacing | map.get( $kendo-spacing, 3 ) | ||
Description
The spacing between the Dialog action buttons. | |||
$kendo-dialog-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the Dialog action buttons. | |||
$kendo-dialog-shadow | var( --kendo-box-shadow-depth-8, none ) | ||
Description
The box shadow around the Dialog. |
Dock-manager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dock-manager-border-width | 1px | ||
Description
The width of the border around the DockManager component. | |||
$kendo-dock-manager-border-style | solid | ||
Description
The style of the border around the DockManager component. | |||
$kendo-dock-manager-border | var( --kendo-component-border, inherit ) | ||
Description
The color of the border around the DockManager component. | |||
$kendo-dock-manager-pane-header-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-border-width | $kendo-dock-manager-border-width | ||
Description
The width of the border around the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-border-style | solid | ||
Description
The style of the border around the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-header-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the pane header in the DockManager component. | |||
$kendo-dock-manager-pane-title-padding-y | null | ||
Description
The vertical padding of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-padding-x | null | ||
Description
The horizontal padding of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-size | 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 | var( --kendo-line-height, normal ) | ||
Description
The line height of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-title-font-weight | var( --kendo-font-weight, normal ) | ||
Description
The font weight of the pane title in the DockManager component. | |||
$kendo-dock-manager-pane-content-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the pane content in the DockManager component. | |||
$kendo-dock-manager-pane-content-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the pane content in the DockManager component. | |||
$kendo-dock-manager-tabbed-pane-padding-y | null | ||
Description
The horizontal padding of the tabbed pane in the DockManager component. | |||
$kendo-dock-manager-tabbed-pane-padding-x | null | ||
Description
The horizontal padding of the tabbed pane in the DockManager component. | |||
$kendo-dock-manager-unpinned-container-width | 300px | ||
Description
The width of the unpinned pane container in the DockManager component. | |||
$kendo-dock-manager-unpinned-container-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background-color of the unpinned pane container in the DockManager component. | |||
$kendo-dock-manager-unpinned-container-shadow | 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) | ||
Description
The box shadow of the unpinned pane container in the DockManager component. | |||
$kendo-dock-indicator-padding | map.get( $kendo-spacing, 1.5 ) | ||
Description
The padding of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-bg | $kendo-component-bg | ||
Description
The background color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-outline-width | 1px | ||
Description
The outline width of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-outline-style | solid | ||
Description
The outline style of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-outline | $kendo-dock-indicator-text | ||
Description
The outline color of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-shadow | 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20) | ||
Description
The box shadow of the dock indicator in the DockManager component. | |||
$kendo-dock-indicator-hover-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The background color of the hovered dock indicator in the DockManager component. | |||
$kendo-dock-indicator-hover-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the hovered dock indicator in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border-width | 1px | ||
Description
The width of the border around the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border-style | dashed | ||
Description
The style of the border around the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border-radius | var( --kendo-border-radius-md, 0) | ||
Description
The border radius of the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)) | ||
Description
The background color of the dropping area in the DockManager component. | |||
$kendo-dock-manager-dock-preview-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the dropping area in the DockManager component. |
Draggable
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-drag-clue-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Borer radius of the drag clue. | |||
$kendo-drag-clue-border-width | 0px | ||
Description
Borer width of the drag clue. | |||
$kendo-drag-clue-border-style | solid | ||
Description
Borer style of the drag clue. | |||
$kendo-drag-clue-padding-x | $kendo-padding-lg-x | ||
Description
Horizontal padding of the drag clue. | |||
$kendo-drag-clue-padding-y | $kendo-padding-lg-y | ||
Description
Vertical padding of the drag clue. | |||
$kendo-drag-clue-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the drag clue. | |||
$kendo-drag-clue-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the drag clue. | |||
$kendo-drag-clue-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the drag clue. | |||
$kendo-drag-clue-spacing | .4ex | ||
Description
Spacing of the drag clue. | |||
$kendo-drag-clue-opacity | .8 | ||
Description
Opacity of the drag clue. | |||
$kendo-drag-clue-text | var( --kendo-selected-text, inherit ) | ||
Description
Text color of the drag clue. | |||
$kendo-drag-clue-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the drag clue. | |||
$kendo-drag-clue-border | var( --kendo-selected-border, inherit ) | ||
Description
Border color of the drag clue. | |||
$kendo-drag-clue-gradient | null | ||
Description
Gradient of the drag clue. | |||
$kendo-drag-clue-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
Box shadow of the drag clue. | |||
$kendo-drop-hint-arrow-size | 6px | ||
Description
Arrow size of the drop hint. | |||
$kendo-drop-hint-arrow-spacing | math.div( $kendo-drop-hint-arrow-size, 2 ) | ||
Description
Arrow spacing of the drop hint. | |||
$kendo-drop-hint-line-h-width | 20px | ||
Description
Width of the horizontal drop hint line. | |||
$kendo-drop-hint-line-h-height | 1px | ||
Description
Height of the horizontal drop hint line. | |||
$kendo-drop-hint-line-v-width | $kendo-drop-hint-line-h-height | ||
Description
Width of the vertical drop hint line. | |||
$kendo-drop-hint-line-v-height | $kendo-drop-hint-line-h-width | ||
Description
Height of the vertical drop hint line. | |||
$kendo-drop-hint-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background-color of the drop hint. |
Drawer
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-drawer-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the drawer. | |||
$kendo-drawer-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the drawer. | |||
$kendo-drawer-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the drawer. | |||
$kendo-drawer-border-width | 1px | ||
Description
Border width of the drawer. | |||
$kendo-drawer-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the drawer. | |||
$kendo-drawer-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the drawer. | |||
$kendo-drawer-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the drawer. | |||
$kendo-drawer-content-padding-x | var( --kendo-padding-x, #{$kendo-padding-md-x} ) | ||
Description
Horizontal padding of the drawer content. | |||
$kendo-drawer-content-padding-y | var( --kendo-padding-y, #{$kendo-padding-md-y} ) | ||
Description
Vertical padding of the drawer content. | |||
$kendo-drawer-scrollbar-width | 7px | ||
Description
Scrollbar width of the drawer. | |||
$kendo-drawer-scrollbar-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
Scrollbar color of the drawer. | |||
$kendo-drawer-scrollbar-bg | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 )) | ||
Description
Scrollbar background of the drawer. | |||
$kendo-drawer-scrollbar-radius | 20px | ||
Description
Scrollbar border radius of the drawer. | |||
$kendo-drawer-scrollbar-hover-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 )) | ||
Description
Scrollbar hover color of the drawer. | |||
$kendo-drawer-item-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
Horizontal padding of the drawer item. | |||
$kendo-drawer-item-padding-y | var( --kendo-padding-x, #{$kendo-padding-md-x} ) | ||
Description
Vertical padding of the drawer item. | |||
$kendo-drawer-item-font-size | $kendo-drawer-font-size | ||
Description
Font size of the drawer item. | |||
$kendo-drawer-item-line-height | var( --kendo-line-height-lg, normal ) | ||
Description
Line height of the drawer item. | |||
$kendo-drawer-item-level-padding-x | $kendo-drawer-item-padding-x | ||
Description
Horizontal padding of the drawer item in each level. | |||
$kendo-drawer-item-level-count | 5 | ||
Description
Count of the drawer item levels. | |||
$kendo-drawer-icon-padding-x | 0 | ||
Description
Horizontal padding of the drawer icon. | |||
$kendo-drawer-icon-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the drawer icon. | |||
$kendo-drawer-mini-initial-width | calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) ) | ||
Description
Initial width of the mini drawer. | |||
$kendo-drawer-item-ripple-border-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border width of the drawer item ripple | |||
$kendo-drawer-item-ripple-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the drawer item ripple | |||
$kendo-drawer-item-bg | $kendo-drawer-bg | ||
Description
Background color of the drawer item. | |||
$kendo-drawer-item-text | $kendo-drawer-text | ||
Description
Text color of the drawer item. | |||
$kendo-drawer-item-icon-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Text color of the drawer item icon. | |||
$kendo-drawer-item-hover-bg | $kendo-drawer-item-bg | ||
Description
Background color of the hovered drawer item. | |||
$kendo-drawer-item-hover-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
Text color of the hovered drawer item. | |||
$kendo-drawer-item-hover-icon-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
Text color of the hovered drawer item icon. | |||
$kendo-drawer-item-focus-bg | $kendo-drawer-item-bg | ||
Description
Background color of the focused drawer item. | |||
$kendo-drawer-item-focus-text | $kendo-drawer-item-text | ||
Description
Text color of the focused drawer item. | |||
$kendo-drawer-item-focus-shadow | inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | ||
Description
Box shadow of the focused drawer item. | |||
$kendo-drawer-item-focus-icon-text | $kendo-drawer-item-icon-text | ||
Description
Text color of the focused drawer item icon. | |||
$kendo-drawer-item-selected-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the selected drawer item. | |||
$kendo-drawer-item-selected-bg | var( --kendo-selected-bg, initial ) | ||
Description
Background color of the selected drawer item. | |||
$kendo-drawer-item-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Text color of the selected drawer item. | |||
$kendo-drawer-item-selected-icon-text | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) | ||
Description
Text color of the selected drawer item icon. | |||
$kendo-drawer-item-selected-hover-bg | var( --kendo-selected-hover-bg, inherit ) | ||
Description
Background color of the selected and hovered drawer item. | |||
$kendo-drawer-item-selected-hover-text | var( --kendo-selected-hover-text, inherit ) | ||
Description
Text color of the selected and hovered drawer item. |
Dropdowntree
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dropdowntree-popup-padding-x | $kendo-popup-content-padding-x | ||
Description
The horizontal padding of the DropdownTree popup | |||
$kendo-dropdowntree-popup-padding-y | $kendo-popup-content-padding-y | ||
Description
The vertical padding of the DropdownTree popup | |||
$kendo-dropdowntree-check-all-padding | map.get( $kendo-spacing, 1 ) | ||
Description
The padding of the check-all CheckBox inside the DropDownTree popup |
Dropzone
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-dropzone-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the DropZone. | |||
$kendo-dropzone-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the DropZone. | |||
$kendo-dropzone-border-width | 1px | ||
Description
The border width of the DropZone. | |||
$kendo-dropzone-min-height | 220px | ||
Description
The minimum height of the DropZone. | |||
$kendo-dropzone-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the DropZone. | |||
$kendo-dropzone-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the DropZone. | |||
$kendo-dropzone-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the DropZone. | |||
$kendo-dropzone-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the DropZone. | |||
$kendo-dropzone-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the dropzone. | |||
$kendo-dropzone-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the DropZone. | |||
$kendo-dropzone-icon-spacing | map.get( $kendo-spacing, 6 ) | ||
Description
The spacing below the DropZone icon. | |||
$kendo-dropzone-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 )) | ||
Description
The text color of the DropZone icon. | |||
$kendo-dropzone-icon-hover-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Text color of the icon when the dropzone is hovered. | |||
$kendo-dropzone-hint-font-size | inherit | ||
Description
The font size of the DropZone hint. | |||
$kendo-dropzone-hint-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the DropZone hint. | |||
$kendo-dropzone-hint-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing below the DropZone hint. | |||
$kendo-dropzone-hint-text | $kendo-dropzone-text | ||
Description
The text color of the DropZone hint. | |||
$kendo-dropzone-note-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the DropZone note. | |||
$kendo-dropzone-note-font-weight | inherit | ||
Description
The font weight of the DropZone note. | |||
$kendo-dropzone-note-spacing | 0 | ||
Description
The spacing below the DropZone note. | |||
$kendo-dropzone-note-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the DropZone note. |
Editor
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-editor-border-width | 1px | ||
Description
The width of the border around the Еditor. | |||
$kendo-editor-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Еditor. | |||
$kendo-editor-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Еditor. | |||
$kendo-editor-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Еditor. | |||
$kendo-editor-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Editor. | |||
$kendo-editor-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Editor. | |||
$kendo-editor-border | var( --kendo-component-border, initial ) | ||
Description
The color of the border around Editor. | |||
$kendo-editor-placeholder-text | var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} ) | ||
Description
The text color of the Еditor's placeholder. | |||
$kendo-editor-placeholder-opacity | var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} ) | ||
Description
The opacity of the Editor's placeholder. | |||
$kendo-editor-content-outline-color | var( --kendo-body-text, initial ) | ||
Description
The outline color of the Editor's content. | |||
$kendo-editor-export-tool-icon-margin-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal margin of the Editor's export tool icon. | |||
$kendo-editor-selectednode-outline-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The outline width of the Editor's selected node. | |||
$kendo-editor-selected-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The selected text color of the Editor. | |||
$kendo-editor-selected-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The selected background color of the Editor. | |||
$kendo-editor-highlighted-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 55%, transparent), k-get-theme-color-var( primary-60 )) | ||
Description
The highlighted background color of the Editor. | |||
$kendo-editor-resize-handle-size | map.get( $kendo-spacing, 2 ) | ||
Description
The size of the Editor's resize handle. | |||
$kendo-editor-resize-handle-border-width | 1px | ||
Description
The border width of the Editor's resize handle. | |||
$kendo-editor-resize-handle-border | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
The border color of the Editor's resize handle. | |||
$kendo-editor-resize-handle-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the Editor's resize handle. | |||
$kendo-editor-selectednode-outline-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The outline color of the Editor's selected node. | |||
$kendo-editor-inline-td-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Inline Editor data cell. | |||
$kendo-editor-inline-hover-border | var( --kendo-component-border, initial ) | ||
Description
The hover border color of the Inline Editor. | |||
$ct-cell-size | 20px | ||
Description
The size of the cell in the Insert table popup. | |||
$kendo-editor-ct-popup-text | var( --kendo-selected-text, initial ) | ||
Description
The text color of the selected cells in the Insert table popup. | |||
$kendo-editor-ct-popup-bg | var( --kendo-selected-bg, initial ) | ||
Description
The background color of the selected cells in the Insert table popup. | |||
$kendo-editor-ct-popup-border | var( --kendo-selected-border, initial ) | ||
Description
The border color of the selected cells in the Insert table popup. |
Elevation
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-elevation | $_default-elevation | ||
Description
The global default Elevation map. |
Expander
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-expander-margin-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical spacing of the ExpansionPanel. | |||
$kendo-expander-border-width | 1px | ||
Description
The width of the border around the ExpansionPanel. | |||
$kendo-expander-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ExpansionPanel. | |||
$kendo-expander-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ExpansionPanel. | |||
$kendo-expander-line-height | var( --kendo-line-height, normal ) | ||
Description
The hine height of the ExpansionPanel. | |||
$kendo-expander-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the ExpansionPanel. | |||
$kendo-expander-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the ExpansionPanel. | |||
$kendo-expander-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the ExpansionPanel. | |||
$kendo-expander-shadow | inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The box shadow of the ExpansionPanel. | |||
$kendo-expander-expanded-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the expanded ExpansionPanel. | |||
$kendo-expander-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled ExpansionPanel. | |||
$kendo-expander-disabled-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The background color of the disabled ExpansionPanel. | |||
$kendo-expander-focus-offset | 1px | ||
Description
The offset of the focused ExpansionPanel. | |||
$kendo-expander-focus-outline-width | 1px | ||
Description
The outline width of the focused ExpansionPanel. | |||
$kendo-expander-focus-outline-style | solid | ||
Description
The outline style of the focused ExpansionPanel. | |||
$kendo-expander-focus-outline | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | ||
Description
The outline color of the focused ExpansionPanel. | |||
$kendo-expander-focus-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the focused ExpansionPanel. | |||
$kendo-expander-focus-shadow | inset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | ||
Description
The box shadow of the focused ExpansionPanel. | |||
$kendo-expander-header-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the ExpansionPanel header. | |||
$kendo-expander-header-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the ExpansionPanel header. | |||
$kendo-expander-header-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the ExpansionPanel header. | |||
$kendo-expander-header-bg | inherit | ||
Description
The background color of the ExpansionPanel header. | |||
$kendo-expander-header-hover-bg | if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the hovered ExpansionPanel header. | |||
$kendo-expander-title-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the ExpansionPanel title. | |||
$kendo-expander-header-sub-title-text | var( --kendo-subtle-text, initial ) | ||
Description
The text color of the ExpansionPanel sub-title. | |||
$kendo-expander-indicator-margin-x | map.get( $kendo-spacing, 2.5 ) | ||
Description
The horizontal margin of the ExpansionPanel indicator. | |||
$kendo-expander-indicator-text | var( --kendo-expander-text, #{$kendo-expander-text} ) | ||
Description
The text color of the ExpansionPanel indicator. | |||
$kendo-expander-content-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the ExpansionPanel content. | |||
$kendo-expander-content-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the ExpansionPanel content. |
Filemanager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-file-manager-spacer | map.get( $kendo-spacing, 4 ) | ||
Description
The space between the FileManager items. | |||
$kendo-file-manager-border-width | 1px | ||
Description
The border width of the FileManager. | |||
$kendo-file-manager-font-family | var( --kendo-font-family, normal ) | ||
Description
The font family of the FileManager. | |||
$kendo-file-manager-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the FileManager. | |||
$kendo-file-manager-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the FileManager. | |||
$kendo-file-manager-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of the FileManager. | |||
$kendo-file-manager-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the FileManager. | |||
$kendo-file-manager-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the FileManager. | |||
$kendo-file-manager-toolbar-border-width | $kendo-file-manager-border-width | ||
Description
The border width of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-bg | $kendo-toolbar-bg | ||
Description
The background color of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-text | $kendo-toolbar-text | ||
Description
The text color of the FileManager Toolbar. | |||
$kendo-file-manager-toolbar-border | $kendo-toolbar-border | ||
Description
The border color of the FileManager Toolbar. | |||
$kendo-file-manager-navigation-padding-x | $kendo-file-manager-spacer | ||
Description
The horizontal padding of the FileManager Navigation. | |||
$kendo-file-manager-navigation-padding-y | $kendo-file-manager-spacer | ||
Description
The vertical padding of the FileManager Navigation. | |||
$kendo-file-manager-navigation-width | 20% | ||
Description
The width of the FileManager Navigation. | |||
$kendo-file-manager-navigation-border-width | $kendo-file-manager-border-width | ||
Description
The border width of the FileManager Navigation. | |||
$kendo-file-manager-navigation-bg | transparent | ||
Description
The background color of the FileManager Navigation. | |||
$kendo-file-manager-navigation-text | inherit | ||
Description
The text color of the FileManager Navigation. | |||
$kendo-file-manager-navigation-border | inherit | ||
Description
The border color of the FileManager Navigation. | |||
$kendo-file-manager-breadcrumb-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-border-width | $kendo-file-manager-border-width | ||
Description
The border width of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-bg | $kendo-toolbar-bg | ||
Description
The background color of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-text | inherit | ||
Description
The text color of the FileManager Breadcrumb. | |||
$kendo-file-manager-breadcrumb-border | inherit | ||
Description
The border color of the FileManager Breadcrumb. | |||
$kendo-file-manager-listview-bg | transparent | ||
Description
The background color of the FileManager ListView. | |||
$kendo-file-manager-listview-text | inherit | ||
Description
The text color of the FileManager ListView. | |||
$kendo-file-manager-listview-border | inherit | ||
Description
The border color of the FileManager ListView. | |||
$kendo-file-manager-listview-item-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-width | 120px | ||
Description
The width of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-height | 120px | ||
Description
The height of the FileManager ListView item. | |||
$kendo-file-manager-listview-item-icon-bg | transparent | ||
Description
The background color of the FileManager ListView item icon. | |||
$kendo-file-manager-listview-item-icon-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the FileManager ListView item icon. | |||
$kendo-file-manager-listview-item-icon-border | inherit | ||
Description
The border color of the FileManager ListView item icon. | |||
$kendo-file-manager-listview-item-icon-focus-bg | transparent | ||
Description
The background color of the FileManager focused ListView item icon. | |||
$kendo-file-manager-listview-item-icon-focus-text | inherit | ||
Description
The text color of the FileManager focused ListView item icon. | |||
$kendo-file-manager-listview-item-icon-focus-border | inherit | ||
Description
The border color of the FileManager focused ListView item icon. | |||
$kendo-file-manager-listview-item-icon-selected-bg | transparent | ||
Description
Background color of the FileManager selected ListView item icon. | |||
$kendo-file-manager-listview-item-icon-selected-text | inherit | ||
Description
Text color of the FileManager selected ListView item icon. | |||
$kendo-file-manager-listview-item-icon-selected-border | inherit | ||
Description
Border color of the FileManager selected ListView item icon. | |||
$kendo-file-manager-grid-bg | transparent | ||
Description
The background color of the FileManager Grid. | |||
$kendo-file-manager-grid-text | inherit | ||
Description
The text color of the FileManager Grid. | |||
$kendo-file-manager-grid-border | inherit | ||
Description
The border color of the FileManager Grid. | |||
$kendo-file-manager-preview-padding-x | $kendo-file-manager-spacer | ||
Description
The horizontal padding of the FileManager preview. | |||
$kendo-file-manager-preview-padding-y | $kendo-file-manager-spacer | ||
Description
The vertical padding of the FileManager preview. | |||
$kendo-file-manager-preview-width | 20% | ||
Description
The width of the FileManager preview. | |||
$kendo-file-manager-preview-border-width | $kendo-file-manager-border-width | ||
Description
The border width of the FileManager preview. | |||
$kendo-file-manager-preview-spacing | $kendo-file-manager-spacer | ||
Description
The spacing of the FileManager preview. | |||
$kendo-file-manager-preview-column-gap | map.get( $kendo-spacing, 1 ) | ||
Description
The gap between the columns in the FileManager preview. | |||
$kendo-file-manager-preview-bg | transparent | ||
Description
The background color of the FileManager preview. | |||
$kendo-file-manager-preview-text | inherit | ||
Description
The text color of the FileManager preview. | |||
$kendo-file-manager-preview-border | inherit | ||
Description
The border color of the FileManager preview. | |||
$kendo-file-manager-preview-icon-bg | transparent | ||
Description
The background color of the FileManager preview icon. | |||
$kendo-file-manager-preview-icon-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the FileManager preview icon. | |||
$kendo-file-manager-preview-icon-border | inherit | ||
Description
The border color of the FileManager preview icon. |
Filter
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-filter-padding-x | $kendo-padding-md-x | ||
Description
The horizontal padding of the Filter. | |||
$kendo-filter-padding-y | $kendo-padding-md-y | ||
Description
The vertical padding of the Filter. | |||
$kendo-filter-bottom-margin | 30px | ||
Description
The bottom margin of the Filter. | |||
$kendo-filter-line-size | 1px | ||
Description
The width of the line that connects the Filter items. | |||
$kendo-filter-operator-dropdown-width | 15em | ||
Description
The width of the dropdown elements in the Filter items. | |||
$kendo-filter-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Filter. | |||
$kendo-filter-preview-field-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the Filter preview field. | |||
$kendo-filter-preview-operator-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Filter preview operator. | |||
$kendo-filter-line-bg | var( --kendo-component-border, initial ) | ||
Description
The background color of the line that connects the Filter items. | |||
$kendo-filter-toolbar-focus-border | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the focused Filter. |
Floating-action-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-fab-border-width | 1px | ||
Description
The width of the border around the FAB. | |||
$kendo-fab-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the FAB. | |||
$kendo-fab-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the FAB. | |||
$kendo-fab-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the FAB. | |||
$kendo-fab-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the FAB. | |||
$kendo-fab-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the FAB. | |||
$kendo-fab-sm-padding-x | math.div( $kendo-fab-padding-x, 2 ) | ||
Description
The horizontal padding of the small FAB. | |||
$kendo-fab-md-padding-x | $kendo-fab-padding-x | ||
Description
The horizontal padding of the medium FAB. | |||
$kendo-fab-lg-padding-x | ( $kendo-fab-padding-x * 1.5 ) | ||
Description
The horizontal padding of the large FAB. | |||
$kendo-fab-padding-y | $kendo-fab-padding-x | ||
Description
The vertical padding of the FAB. | |||
$kendo-fab-sm-padding-y | math.div( $kendo-fab-padding-y, 2 ) | ||
Description
The vertical padding of the small FAB. | |||
$kendo-fab-md-padding-y | $kendo-fab-padding-y | ||
Description
The vertical padding of the medium FAB. | |||
$kendo-fab-lg-padding-y | ( $kendo-fab-padding-y * 1.5 ) | ||
Description
The vertical padding of the large FAB. | |||
$kendo-fab-focus-offset | $kendo-button-focus-offset | ||
Description
The offset of the focused FAB. | |||
$kendo-fab-focus-outline-width | $kendo-button-focus-outline-width | ||
Description
The outline width of the focused FAB. | |||
$kendo-fab-focus-outline-style | $kendo-button-focus-outline-style | ||
Description
The outline style of the focused FAB. | |||
$kendo-fab-icon-padding-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
The horizontal padding of the FAB icon. | |||
$kendo-fab-icon-padding-y | $kendo-fab-icon-padding-x | ||
Description
The vertical padding of the FAB icon. | |||
$kendo-fab-icon-spacing | map.get( $kendo-spacing, 0.5 ) | ||
Description
The spacing of the FAB icon. | |||
$kendo-fab-items-padding-x | 0px | ||
Description
The horizontal padding of the FAB items. | |||
$kendo-fab-items-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the FAB items. | |||
$kendo-fab-item-text-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal padding of the FAB item text. | |||
$kendo-fab-item-text-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the FAB item text. | |||
$kendo-fab-item-text-border-width | 1px | ||
Description
The width of the FAB item text border. | |||
$kendo-fab-item-text-border-style | solid | ||
Description
The border style of the FAB item text. | |||
$kendo-fab-item-text-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the FAB item text. | |||
$kendo-fab-item-text-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the FAB item text. | |||
$kendo-fab-item-text-line-height | var( --kendo-line-height-sm, inherit ) | ||
Description
The line height of the FAB item text. | |||
$kendo-fab-item-text-offset-x | map.get( $kendo-spacing, 2 ) | ||
Description
The bottom margin of the FAB item text. | |||
$kendo-fab-item-focus-offset | $kendo-button-focus-offset | ||
Description
The offset of the focused FAB item. | |||
$kendo-fab-item-focus-outline-width | $kendo-button-focus-outline-width | ||
Description
The outline width of the focused FAB item. | |||
$kendo-fab-item-focus-outline-style | $kendo-button-focus-outline-style | ||
Description
The outline style of the focused FAB item. | |||
$kendo-fab-item-icon-padding-x | map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x | ||
Description
The horizontal padding of the FAB item icon. | |||
$kendo-fab-item-icon-padding-y | $kendo-fab-item-icon-padding-x | ||
Description
The vertical padding of the FAB item icon. | |||
$kendo-fab-item-icon-border-width | 1px | ||
Description
The border width of the FAB item icon. | |||
$kendo-fab-item-icon-border-style | solid | ||
Description
The border style of the FAB item icon. | |||
$kendo-fab-item-icon-border-radius | 50% | ||
Description
The border radius of the FAB item icon. | |||
$kendo-fab-theme-colors | (
solid: map.get( $kendo-button-theme-colors, "solid")
) | ||
Description
The theme colors map for the FAB. | |||
$kendo-fab-sizes | (
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
)
) | ||
Description
The size map for the FAB. | |||
$kendo-fab-item-offset-y | map.get( $kendo-spacing, 2 ) | ||
Description
The bottom margin of the FAB item. | |||
$kendo-fab-item-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The base text color of the FAB item. | |||
$kendo-fab-item-bg | var( --kendo-component-bg, inherit ) | ||
Description
The base background color of the FAB item. | |||
$kendo-fab-item-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The base border color of the FAB item. | |||
$kendo-fab-item-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
The text color of the hovered FAB item. | |||
$kendo-fab-item-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
The background color of the hovered FAB item. | |||
$kendo-fab-item-hover-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the hovered FAB item. | |||
$kendo-fab-item-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused FAB item. | |||
$kendo-fab-item-focus-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the focused FAB item. | |||
$kendo-fab-item-focus-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the focused FAB item. | |||
$kendo-fab-item-active-text | var( --kendo-selected-text, inherit ) | ||
Description
The text color of the active FAB item. | |||
$kendo-fab-item-active-bg | var( --kendo-selected-bg, inherit ) | ||
Description
The background color of the active FAB item. | |||
$kendo-fab-item-active-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the active FAB item. |
Floating-label
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-floating-label-scale | 1 | ||
Description
The transformation scale of the Floating Label. | |||
$kendo-floating-label-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Floating Label. | |||
$kendo-floating-label-max-width | 90% | ||
Description
The maximum width of the Floating Label. | |||
$kendo-floating-label-font-weight | var( --kendo-font-weight-bold, inherit ) | ||
Description
The font weight of the Floating Label. | |||
$kendo-floating-label-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Floating Label. | |||
$kendo-floating-label-height | calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) | ||
Description
The height of the Floating Label. | |||
$kendo-floating-label-offset-x | calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} ) | ||
Description
The horizontal offset of the Floating Label. | |||
$kendo-floating-label-offset-y | calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} ) | ||
Description
The vertical offset of the Floating Label. | |||
$kendo-floating-label-focus-scale | 1 | ||
Description
The transformation scale of the focused Floating Label. | |||
$kendo-floating-label-focus-offset-x | 0 | ||
Description
The horizontal offset of the focused Floating Label. | |||
$kendo-floating-label-focus-offset-y | 0 | ||
Description
The vertical offset of the focused Floating Label. | |||
$kendo-floating-label-transition | .2s ease-out | ||
Description
The transition of the Floating Label. | |||
$kendo-floating-label-bg | inherit | ||
Description
The background color of the Floating Label. | |||
$kendo-floating-label-text | inherit | ||
Description
The text color of the Floating Label. | |||
$kendo-floating-label-focus-bg | inherit | ||
Description
The background color of the focused Floating Label. | |||
$kendo-floating-label-focus-text | inherit | ||
Description
The text color of the focused Floating Label. | |||
$kendo-floating-label-invalid-text | var( --kendo-invalid-text, #{$kendo-invalid-text} ) | ||
Description
The invalid text color of the Floating Label. |
Form
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-form-spacer | ( $kendo-padding-md-x * 2 ) | ||
Description
The padding of the inline Form. | |||
$kendo-form-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Form. | |||
$kendo-form-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Form. | |||
$kendo-form-line-height-em | $kendo-line-height-em | ||
Description
The line height of the Form in em units. | |||
$kendo-form-sm-line-height | var( --kendo-line-height-sm, normal ) | ||
Description
The line height of the small Form. | |||
$kendo-form-lg-line-height | var( --kendo-line-height-lg, normal ) | ||
Description
The line height of the large Form. | |||
$kendo-form-fieldset-margin | 2em 0 0 | ||
Description
The margin of the Form fieldset. | |||
$kendo-form-fieldset-padding | 0px | ||
Description
The padding of the Form fieldset. | |||
$kendo-form-legend-margin | 0 0 map.get( $kendo-spacing, 3 ) | ||
Description
The margin of the Form legend. | |||
$kendo-form-legend-padding | 0px | ||
Description
The padding of the Form legend. | |||
$kendo-form-legend-border-width | 0 0 map.get( $kendo-spacing, 0.5 ) | ||
Description
The border width of the Form legend. | |||
$kendo-form-legend-border-style | solid | ||
Description
The border style of the Form legend. | |||
$kendo-form-legend-border-color | var( --kendo-component-border, initial ) | ||
Description
The border color of the Form legend. | |||
$kendo-form-legend-width | 100% | ||
Description
The width of the Form legend. | |||
$kendo-form-legend-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Form legend. | |||
$kendo-form-legend-text-transform | uppercase | ||
Description
The text capitalization of the Form legend. | |||
$kendo-form-label-margin-bottom | map.get( $kendo-spacing, 2 ) | ||
Description
The bottom margin of the Form label. | |||
$kendo-form-label-font-weight | var( --kendo-font-weight-bold, inherit ) | ||
Description
The font weight of the form label | |||
$kendo-form-button-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the Form buttons. | |||
$kendo-form-hint-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Form hint. | |||
$kendo-form-hint-font-style | normal | ||
Description
The font style of the Form hint. | |||
$kendo-form-hint-margin-top | map.get( $kendo-spacing, 1 ) | ||
Description
The top margin of the Form hint. | |||
$kendo-form-hint-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Form hint. | |||
$kendo-form-sm-rows-spacing | map.get( $kendo-spacing, 3 ) | ||
Description
The row spacing of the small Form. | |||
$kendo-form-md-rows-spacing | $kendo-form-sm-rows-spacing | ||
Description
The row spacing of the medium Form. | |||
$kendo-form-lg-rows-spacing | $kendo-form-sm-rows-spacing | ||
Description
The row spacing of the large Form. | |||
$kendo-form-separator-margin | map.get( $kendo-spacing, 3 ) 0 0 | ||
Description
The margin of the Form separator. | |||
$kendo-form-separator-border-color | $kendo-form-legend-border-color | ||
Description
The border color of the Form separator. | |||
$kendo-horizontal-form-label-padding-top | map.get( $kendo-spacing, 1.5 ) | ||
Description
The top padding of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-width | 25% | ||
Description
The width of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-align | flex-end | ||
Description
The horizontal alignment of the label in the horizontal Form. | |||
$kendo-horizontal-form-field-wrap-max-width | calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) | ||
Description
The maximum width of the field wrap in the horizontal Form. | |||
$kendo-inline-form-element-width | 25% | ||
Description
The width of the inline Form element. | |||
$kendo-forms-invalid-color | var( --kendo-invalid-text, initial ) | ||
Description
The invalid text color of the Form. | |||
$kendo-label-optional-margin-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
The horizontal margin of the optional label in the Form. | |||
$kendo-label-optional-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the optional label in the Form. | |||
$kendo-label-optional-font-style | normal | ||
Description
The font style of the optional label in the Form. | |||
$kendo-fieldset-margin | map.get( $kendo-spacing, 7.5 ) | ||
Description
The margin of the Form fieldset. | |||
$kendo-fieldset-font-size | var( --kendo-font-size-xl, inherit ) | ||
Description
The font size of the Form fieldset. | |||
$kendo-fieldset-bg | transparent | ||
Description
The background color of the Form fieldset. | |||
$kendo-fieldset-text | inherit | ||
Description
The text color of the Form fieldset. | |||
$kendo-fieldset-border | initial | ||
Description
The border color of the Form fieldset. | |||
$kendo-fieldset-legend-bg | transparent | ||
Description
The background color of the Form legend. | |||
$kendo-fieldset-legend-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Form legend. | |||
$kendo-fieldset-legend-border | initial | ||
Description
The border color of the Form legend. | |||
$kendo-form-sizes | (
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
)
) | ||
Description
The sizes map for the Form. |
Gantt
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-gantt-border-width | 1px | ||
Description
Border width of the gantt. | |||
$kendo-gantt-font-family | var( --kendo-font-family, initial ) | ||
Description
Font family of the gantt. | |||
$kendo-gantt-font-size | var( --kendo-font-size, initial ) | ||
Description
Font size of the gantt. | |||
$kendo-gantt-line-height | var( --kendo-line-height, initial ) | ||
Description
Line height of the gantt. | |||
$kendo-gantt-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the gantt. | |||
$kendo-gantt-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the gantt. | |||
$kendo-gantt-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the gantt. | |||
$kendo-gantt-nonwork-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 )) | ||
Description
Background color of the gantt non-working days. | |||
$kendo-gantt-nonwork-text | inherit | ||
Description
Text color of the gantt non-working days. | |||
$kendo-gantt-nonwork-border | inherit | ||
Description
Border color of the gantt non-working days. | |||
$kendo-gantt-line-size | 2px | ||
Description
Size of the gantt connecting lines. | |||
$kendo-gantt-line-fill | black | ||
Description
Background fill color of the gantt connecting lines. | |||
$kendo-gantt-line-selected-fill | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) | ||
Description
Selected background fill of the gantt connecting lines. | |||
$kendo-gantt-dot-size | 8px | ||
Description
Size of the gantt task dot. | |||
$kendo-gantt-dot-spacing | map.get( $kendo-spacing, 0.5 ) | ||
Description
Spacing of the gantt task dot. | |||
$kendo-gantt-dot-bg | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Background color of the gantt task dot. | |||
$kendo-gantt-dot-border | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Border color of the gantt task dot. | |||
$kendo-gantt-dot-hover-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Hover background color of the gantt task dot. | |||
$kendo-gantt-dot-hover-border | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Hover border color of the gantt task dot. | |||
$kendo-gantt-milestone-bg | $kendo-gantt-text | ||
Description
Background color of the gantt milestone. | |||
$kendo-gantt-milestone-border | $kendo-gantt-text | ||
Description
Border color of the gantt milestone. | |||
$kendo-gantt-milestone-selected-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Selected background color of the gantt milestone. | |||
$kendo-gantt-milestone-selected-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Selected border color of the gantt milestone. | |||
$kendo-gantt-summary-bg | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) | ||
Description
Background color of the gantt summary. | |||
$kendo-gantt-summary-progress-bg | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
Background color of the gantt summary progress. | |||
$kendo-gantt-summary-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) | ||
Description
Selected background color of the gantt summary. | |||
$kendo-gantt-summary-progress-selected-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Selected background color of the gantt summary progress. | |||
$kendo-gantt-task-border-width | 0px | ||
Description
Border width of the gantt task. | |||
$kendo-gantt-task-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the gantt task. | |||
$kendo-gantt-task-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the gantt task. | |||
$kendo-gantt-task-bg | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) | ||
Description
Background color of the gantt task. | |||
$kendo-gantt-task-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the gantt task. | |||
$kendo-gantt-task-border | inherit | ||
Description
Border color of the gantt task. | |||
$kendo-gantt-task-progress-bg | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
Background color of the gantt task progress. | |||
$kendo-gantt-task-progress-hover-bg | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
Background hover color of the gantt task progress. | |||
$kendo-gantt-task-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) | ||
Description
Selected background color of the gantt task. | |||
$kendo-gantt-task-selected-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Selected text color of the gantt task. | |||
$kendo-gantt-task-selected-border | transparent | ||
Description
Selected border color of the gantt task. | |||
$kendo-gantt-task-progress-selected-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Selected background color of the gantt task progress. | |||
$kendo-gantt-task-actions-padding-y | $kendo-padding-md-y | ||
Description
Vertical padding of the gantt task actions. | |||
$kendo-gantt-task-actions-padding-x | $kendo-padding-md-x | ||
Description
Horizontal padding of the gantt task actions. | |||
$kendo-gantt-planned-margin-y | .45em | ||
Description
Vertical margin of the gantt task planned line. | |||
$kendo-gantt-planned-border-width | 2px | ||
Description
Border width of the gantt task planned line. | |||
$kendo-gantt-planned-line-height | .85em | ||
Description
Line height of the gantt task planned line. | |||
$kendo-gantt-planned-dependency-margin-y | .65em | ||
Description
Vertical margin of the gantt planned dependencies. | |||
$kendo-gantt-planned-moment-width | 6px | ||
Description
Default width of the gantt planned line dot. | |||
$kendo-gantt-planned-moment-height | $kendo-gantt-planned-moment-width | ||
Description
Default height of the gantt planned line dot. | |||
$kendo-gantt-planned-moment-border-radius | calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) | ||
Description
Border radius of the gantt planned line dot. | |||
$kendo-gantt-planned-moment-left-margin-x | calc( #{$kendo-gantt-planned-border-width} / 2 - #{$kendo-gantt-planned-moment-border-radius} ) | ||
Description
Horizontal margin of the gantt planned line dot. | |||
$kendo-gantt-planned-milestone-moment-margin-x | math.div( $kendo-gantt-planned-moment-width, 2 ) | ||
Description
Horizontal margin of the gantt milestone planned line dot. | |||
$kendo-gantt-planned-duration-height | $kendo-gantt-planned-border-width | ||
Description
Default height of the gantt planned line. | |||
$kendo-gantt-planned-duration-hover-height | calc( #{$kendo-gantt-planned-border-width} + 1px ) | ||
Description
Hover height of the gantt planned line. | |||
$kendo-gantt-planned-single-drag-hint-top | 0 | ||
Description
Top position of the gantt drag hint. | |||
$kendo-gantt-planned-summary-drag-hint-top | .5em | ||
Description
Top position of the gantt summary drag hint. | |||
$kendo-gantt-planned-milestone-drag-hint-top | .3em | ||
Description
Top position of the gantt planned milestone drag hint. | |||
$kendo-gantt-planned-offset-resize-handler-margin-x | 1.4em | ||
Description
of the gantt. | |||
$kendo-gantt-planned-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the gantt planned tooltip. | |||
$kendo-gantt-planned-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background color of the gantt planned tooltip. | |||
$kendo-gantt-planned-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Border color of the gantt planned tooltip. | |||
$kendo-gantt-delayed-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the gantt delayed task. | |||
$kendo-gantt-delayed-bg | if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 )) | ||
Description
Background color of the gantt delayed task. | |||
$kendo-gantt-delayed-bg-lighter | if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110)) | ||
Description
Complement background color of the gantt delayed task. | |||
$kendo-gantt-delayed-hover-bg | if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) | ||
Description
Background hover color of the gantt delayed task. | |||
$kendo-gantt-advanced-bg | if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 )) | ||
Description
Background color of the gantt advanced task. | |||
$kendo-gantt-advanced-bg-lighter | if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 )) | ||
Description
Complement background color of the gantt advanced task. | |||
$kendo-gantt-advanced-hover-bg | if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 )) | ||
Description
Background hover color of the gantt advanced task. | |||
$kendo-gantt-action-on-offset-text | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Text color of the gantt delayed task action. | |||
$kendo-gantt-offset-resize-handler-top | 50% | ||
Description
Top position of the gantt delayed task resize handler. | |||
$kendo-gantt-validation-tooltip-width | 200px | ||
Description
Default width of the gantt validation tooltip. | |||
$kendo-gantt-validation-tooltip-label-width | 50px | ||
Description
Default width of the gantt validation tooltip label. | |||
$kendo-gantt-validation-tooltip-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the gantt validation tooltip. | |||
$kendo-gantt-validation-tooltip-valid-border | if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 )) | ||
Description
Border color of the gantt validation tooltip in valid state. | |||
$kendo-gantt-validation-tooltip-invalid-border | if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) | ||
Description
Border color of the gantt validation tooltip in invalid state. |
Grid
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-grid-border-width | 1px | ||
Description
Border width of the grid. | |||
$kendo-grid-border-style | solid | ||
Description
Border style of the grid. | |||
$kendo-grid-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the grid. | |||
$kendo-grid-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the grid. | |||
$kendo-grid-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the grid. | |||
$kendo-grid-padding-x | $kendo-table-cell-padding-x | ||
Description
Horizontal padding of the grid. | |||
$kendo-grid-padding-y | $kendo-table-cell-padding-y | ||
Description
Vertical padding of the grid. | |||
$kendo-grid-header-padding-x | $kendo-grid-padding-x | ||
Description
Horizontal padding of the grid header. | |||
$kendo-grid-header-padding-y | $kendo-grid-padding-y | ||
Description
Vertical padding of the grid header. | |||
$kendo-grid-grouping-header-padding-x | $kendo-toolbar-md-padding-x | ||
Description
Horizontal padding of the grid grouping header. | |||
$kendo-grid-grouping-header-padding-y | $kendo-toolbar-md-padding-y | ||
Description
Vertical padding of the grid grouping header. | |||
$kendo-grid-cell-padding-x | $kendo-grid-padding-x | ||
Description
Horizontal padding of the grid cell. | |||
$kendo-grid-cell-padding-y | $kendo-grid-padding-y | ||
Description
Vertical padding of the grid cell. | |||
$kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | ||
Description
Horizontal padding of the grid filter cell. | |||
$kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | ||
Description
Vertical padding of the grid filter cell. | |||
$kendo-grid-edit-cell-padding-x | $kendo-grid-cell-padding-x | ||
Description
Horizontal padding of the grid edit cells. | |||
$kendo-grid-edit-cell-padding-y | 5px | ||
Description
Vertical padding of the grid edit cells. | |||
$kendo-grid-group-drop-hint-size | 6px | ||
Description
Size of the grid group drop clue. | |||
$kendo-grid-group-drop-hint-line-size | 1px | ||
Description
Line size of the grid group drop clue. | |||
$kendo-grid-group-drop-hint-dot-size | $kendo-grid-group-drop-hint-size | ||
Description
Dot size of the grid group drop clue. | |||
$kendo-grid-group-drop-hint-height | calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} ) | ||
Description
Height of the grid group drop clue. | |||
$kendo-grid-group-drop-hint-top | 2px | ||
Description
Top offset of the grid group drop clue. | |||
$kendo-grid-bg | $kendo-table-bg | ||
Description
Background color of the grid. | |||
$kendo-grid-text | $kendo-table-text | ||
Description
Text color of the grid. | |||
$kendo-grid-border | $kendo-table-border | ||
Description
Border color of the grid. | |||
$kendo-grid-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Focus shadow of the grid. | |||
$kendo-grid-alt-bg | $kendo-table-alt-row-bg | ||
Description
Background color of alternating rows in grid. | |||
$kendo-grid-alt-text | $kendo-table-alt-row-text | ||
Description
Text color of alternating rows in grid. | |||
$kendo-grid-alt-border | $kendo-table-alt-row-border | ||
Description
Border color of alternating rows in grid. | |||
$kendo-grid-hover-bg | $kendo-table-hover-bg | ||
Description
Background color of hover rows in grid. | |||
$kendo-grid-hover-text | $kendo-table-hover-text | ||
Description
Text color of hover rows in grid. | |||
$kendo-grid-hover-border | $kendo-table-hover-border | ||
Description
Border color of hover rows in grid. | |||
$kendo-grid-selected-bg | $kendo-table-selected-bg | ||
Description
Background color of selected rows in grid. | |||
$kendo-grid-selected-text | $kendo-table-selected-text | ||
Description
Text color of selected rows in grid. | |||
$kendo-grid-selected-border | $kendo-table-selected-border | ||
Description
Border color of selected rows in grid. | |||
$kendo-grid-selected-hover-bg | $kendo-table-selected-hover-bg | ||
Description
Hover background color of selected rows in grid. | |||
$kendo-grid-selected-hover-text | $kendo-table-selected-hover-text | ||
Description
Hover text color of selected rows in grid. | |||
$kendo-grid-selected-hover-border | $kendo-table-selected-hover-border | ||
Description
Hover border color of selected rows in grid. | |||
$kendo-grid-header-border-width-y | $kendo-grid-border-width | ||
Description
Vertical border width of the grid header. | |||
$kendo-grid-header-border-width-x | 0 | ||
Description
Horizontal border width of the grid header. | |||
$kendo-grid-header-font-size | inherit | ||
Description
Font size of the grid header. | |||
$kendo-grid-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the grid header. | |||
$kendo-grid-header-menu-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
Menu spacing of the grid header. | |||
$kendo-grid-header-first-border-width | $kendo-grid-border-width | ||
Description
Border width of the first cell in the grid header. | |||
$kendo-grid-header-bg | $kendo-table-header-bg | ||
Description
Background color of grid header. | |||
$kendo-grid-header-text | $kendo-table-header-text | ||
Description
Text color of grid header. | |||
$kendo-grid-header-border | $kendo-table-header-border | ||
Description
Border color of grid header. | |||
$kendo-grid-header-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Background color of grid header icons. | |||
$kendo-grid-footer-bg | $kendo-table-footer-bg | ||
$kendo-grid-footer-text | $kendo-table-footer-text | ||
Description
Text color of grid footer. | |||
$kendo-grid-footer-border | $kendo-table-footer-border | ||
Description
Border color of grid footer. | |||
$kendo-grid-selection-aggregates-bg | $kendo-toolbar-bg | ||
Description
Background color of the selection aggregates container | |||
$kendo-grid-selection-aggregates-text | $kendo-grid-text | ||
Description
Text color of the selection aggregates container | |||
$kendo-grid-selection-aggregates-border | $kendo-grid-border | ||
Description
Border color of the selection aggregates container | |||
$kendo-grid-selection-aggregates-border-width | $kendo-grid-border-width | ||
Description
Border width of the selection aggregates container | |||
$kendo-grid-selection-aggregates-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the selection aggregates items | |||
$kendo-grid-selection-aggregates-line-height | $kendo-grid-line-height | ||
Description
Line height of the selection aggregates container | |||
$kendo-grid-selection-aggregates-font-weight | $kendo-font-weight-bold | ||
Description
Font weight of the selection aggregates container | |||
$kendo-grid-grouping-header-bg | $kendo-toolbar-bg | ||
Description
Background color of the grid grouping header. | |||
$kendo-grid-grouping-header-text | $kendo-toolbar-text | ||
Description
Text color of the grid grouping header. | |||
$kendo-grid-grouping-header-border | $kendo-toolbar-border | ||
Description
Border color of the grid grouping header. | |||
$kendo-grid-grouping-row-border-width-y | $kendo-grid-border-width | ||
Description
Vertical border width of the grid grouping row. | |||
$kendo-grid-grouping-row-bg | $kendo-table-group-row-bg | ||
Description
Background color of the grid grouping row. | |||
$kendo-grid-grouping-row-text | $kendo-table-group-row-text | ||
Description
Text color of the grid grouping row. | |||
$kendo-grid-grouping-row-border | $kendo-table-group-row-border | ||
Description
Border color of the grid grouping row. | |||
$kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | ||
Description
Horizontal padding of the grid filter cell. | |||
$kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | ||
Description
Vertical padding of the grid filter cell. | |||
$kendo-grid-toolbar-padding-x | $kendo-toolbar-md-padding-x | ||
Description
Horizontal padding of the grid toolbar. | |||
$kendo-grid-toolbar-padding-y | $kendo-toolbar-md-padding-y | ||
Description
Vertical padding of the grid toolbar. | |||
$kendo-grid-toolbar-spacing | $kendo-toolbar-md-spacing | ||
Description
Spacing of the grid toolbar. | |||
$kendo-grid-toolbar-border-width | $kendo-grid-border-width | ||
Description
Border width of the grid toolbar. | |||
$kendo-grid-cell-border-width-y | $kendo-grid-border-width | ||
Description
Vertical border width of the grid cell. | |||
$kendo-grid-cell-border-width-x | 0px | ||
Description
Horizontal border width of the grid cell. | |||
$kendo-grid-sort-index-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the grid sort index. | |||
$kendo-grid-sort-index-height | var( --kendo-icon-size, 1rem ) | ||
Description
Default height of the grid sort index. | |||
$kendo-grid-sort-index-spacing-y | calc( var( --kendo-icon-spacing, .5rem ) / 4 ) | ||
Description
Horizontal offset of the grid sort index. | |||
$kendo-grid-sort-index-spacing-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
Vertical offset of the grid sort index. | |||
$kendo-grid-sort-icon-spacing | var( --kendo-icon-lg-spacing, .5rem ) | ||
Description
Spacing of the grid sort icon. | |||
$kendo-grid-sort-indicator-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Text color of the grid sort indicator. | |||
$kendo-grid-sort-indicator-order-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Text color of the grid sort order indicator. | |||
$kendo-grid-sorted-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the sorted grid cells. | |||
$kendo-grid-command-cell-padding-y | calc( #{$kendo-table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em} ) / 2 ) | ||
Description
Horizontal padding of the grid command cells. | |||
$kendo-grid-command-cell-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the grid command cells. | |||
$kendo-grid-group-indicator-padding-x | $kendo-button-md-padding-x | ||
Description
Horizontal padding of the grid group indicator. | |||
$kendo-grid-group-indicator-padding-y | $kendo-button-md-padding-y | ||
Description
Vertical padding of the grid group indicator. | |||
$kendo-grid-group-indicator-border-width | $kendo-button-border-width | ||
Description
Border width of the grid group indicator. | |||
$kendo-grid-group-indicator-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the grid group indicator. | |||
$kendo-grid-group-indicator-gap | $kendo-table-cell-padding-y | ||
Description
Spacing of the grid group indicator. | |||
$kendo-grid-group-indicator-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the grid group indicator. | |||
$kendo-grid-group-indicator-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the grid group indicator. | |||
$kendo-grid-group-indicator-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
Border color of the grid group indicator. | |||
$kendo-grid-group-indicator-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Text color of the grid group indicator icon. | |||
$kendo-grid-group-footer-border-width-y | 0px | ||
Description
Horizontal border width of the grid group footer. | |||
$kendo-grid-group-footer-border-width-x | 0px | ||
Description
Vertical border width of the grid group footer. | |||
$kendo-grid-group-drop-hint-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Text color of the grid group drop clue. | |||
$kendo-grid-sticky-cell-border-width | $kendo-grid-border-width | ||
Description
Border width of the grid sticky cell. | |||
$kendo-grid-sticky-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the grid sticky cell. | |||
$kendo-grid-sticky-text | $kendo-grid-text | ||
Description
Text color of the grid sticky cell. | |||
$kendo-grid-sticky-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
Border color of the grid sticky cell. | |||
$kendo-grid-sticky-alt-bg | $kendo-grid-sticky-bg | ||
Description
Alt background color of the grid sticky cell. | |||
$kendo-grid-sticky-hover-bg | $kendo-grid-hover-bg | ||
Description
Hover background color of the grid sticky cell. | |||
$kendo-grid-sticky-header-bg | $kendo-grid-header-bg | ||
Description
Background color of the grid sticky header. | |||
$kendo-grid-sticky-header-text | $kendo-grid-header-text | ||
Description
Text color of the grid sticky header. | |||
$kendo-grid-sticky-header-border | $kendo-grid-sticky-border | ||
Description
Border color of the grid sticky header. | |||
$kendo-grid-sticky-footer-bg | $kendo-grid-header-bg | ||
Description
Background color of the grid sticky footer. | |||
$kendo-grid-sticky-footer-hover-bg | $kendo-grid-hover-bg | ||
Description
Hover background color of the grid sticky footer. | |||
$kendo-grid-sticky-selected-bg | $kendo-grid-selected-bg | ||
Description
Selected background color of the grid sticky cells. | |||
$kendo-grid-sticky-selected-alt-bg | $kendo-grid-sticky-selected-bg | ||
Description
Alt selected background color of the grid sticky cells. | |||
$kendo-grid-sticky-selected-hover-bg | if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg) | ||
Description
Selected hover background color of the grid sticky cells. | |||
$kendo-filter-menu-container-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the grid filter menu container. | |||
$kendo-filter-menu-container-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the grid filter menu container. | |||
$kendo-grid-column-menu-width | 230px | ||
Description
Default width of the grid column menu. | |||
$kendo-grid-column-menu-max-width | 320px | ||
Description
Max width of the grid column menu. | |||
$kendo-grid-column-menu-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing of the grid column menu. | |||
$kendo-grid-column-menu-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
Focus shadow of the grid column menu. | |||
$kendo-grid-column-menu-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the grid column menu. | |||
$kendo-grid-column-menu-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the grid column menu. | |||
$kendo-grid-column-menu-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the grid column menu. | |||
$kendo-grid-column-menu-multicheck-font-size | $kendo-list-md-font-size | ||
Description
Font size of the grid column menu checkbox container. | |||
$kendo-grid-column-menu-multicheck-line-height | $kendo-list-md-line-height | ||
Description
Line height of the grid column menu checkbox container. | |||
$kendo-grid-column-menu-items-wrap-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the grid column menu items wrap. | |||
$kendo-grid-column-menu-items-wrap-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the grid column menu items wrap. | |||
$kendo-grid-column-menu-item-padding-y | $kendo-list-md-item-padding-y | ||
Description
Horizontal padding of the grid column menu item. | |||
$kendo-grid-column-menu-item-padding-x | $kendo-list-md-item-padding-x | ||
Description
Vertical padding of the grid column menu item. | |||
$kendo-grid-column-menu-item-gap | $kendo-list-md-item-padding-x | ||
Description
Spacing of the grid column menu item. | |||
$kendo-grid-column-menu-item-icon-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
Icon spacing of the grid column menu item. | |||
$kendo-grid-column-menu-item-bg | $kendo-list-item-bg | ||
Description
Background color of the grid column menu item. | |||
$kendo-grid-column-menu-item-text | $kendo-list-item-text | ||
Description
Text color of the grid column menu item. | |||
$kendo-grid-column-menu-item-hover-bg | $kendo-list-item-hover-bg | ||
Description
Hover background color of the grid column menu item. | |||
$kendo-grid-column-menu-item-hover-text | $kendo-list-item-hover-text | ||
Description
Hover text color of the grid column menu item. | |||
$kendo-grid-column-menu-item-selected-bg | $kendo-list-item-selected-bg | ||
Description
Selected background color of the grid column menu item. | |||
$kendo-grid-column-menu-item-selected-text | $kendo-list-item-selected-text | ||
Description
Selected text color of the grid column menu item. | |||
$kendo-grid-column-menu-item-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Focus shadow of the grid column menu item. | |||
$kendo-grid-column-menu-item-icon-text | $kendo-list-item-icon-text | ||
Description
Text color of the grid column menu item icon. | |||
$kendo-grid-column-menu-group-header-padding-y | $kendo-grid-column-menu-item-padding-y | ||
Description
Vertical padding of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-padding-x | $kendo-grid-column-menu-item-padding-x | ||
Description
Horizontal padding of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-border-width | 1px | ||
Description
Border width of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-border-style | solid | ||
Description
Border style of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-text-transform | uppercase | ||
Description
Text transform of the grid column menu group header. | |||
$kendo-grid-column-menu-group-header-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the grid column menu group. | |||
$kendo-grid-column-menu-group-header-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the grid column menu group. | |||
$kendo-grid-column-menu-group-header-border | var( --kendo-component-border, inherit) | ||
Description
Border color of the grid column menu group. | |||
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x | 0 | ||
Description
Horizontal padding of the tabstrip content in the grid tabbed column menu. | |||
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the tabstrip content in the grid tabbed column menu. | |||
$kendo-grid-column-menu-tabbed-bg | var( --kendo-base-bg, inherit ) | ||
Description
Background color of the grid tabbed column menu. | |||
$kendo-grid-drag-cell-width | calc( var( --kendo-icon-size, 1rem ) * 2.25 ) | ||
Description
Default width of the grid drag cell. | |||
$kendo-grid-hierarchy-col-width | calc( var( --kendo-icon-size, 1rem ) * 2 ) | ||
Description
Default width of the grid hierarchy cell. | |||
$kendo-grid-filterable-icon-spacing | calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} ) | ||
Description
Spacing of the grid filterable icon. | |||
$kendo-grid-row-resizer-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
Background color of the grid row resize indicator | |||
$kendo-grid-row-resizer-active-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Active background color of the grid row indicator | |||
$kendo-grid-row-resizer-height | map.get( $kendo-spacing, 0.5 ) | ||
Description
Height of the grid row resize indicator |
Icon
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-icon-size | 1rem | ||
Description
Font sizes of the icons. | |||
$kendo-icon-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing around the icons. | |||
$kendo-icon-padding | map.get( $kendo-spacing, 1 ) | ||
Description
Padding of the action icons container. |
Imageeditor
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-image-editor-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the imageeditor. | |||
$kendo-image-editor-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the imageeditor. | |||
$kendo-image-editor-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
Border color of the imageeditor. | |||
$kendo-image-editor-margin-y | 0 | ||
Description
Vertical margin of the imageeditor. | |||
$kendo-image-editor-margin-x | 0 | ||
Description
Horizontal margin of the imageeditor. | |||
$kendo-image-editor-padding-y | 0 | ||
Description
Vertical padding of the imageeditor. | |||
$kendo-image-editor-padding-x | 0 | ||
Description
Horizontal padding of the imageeditor. | |||
$kendo-image-editor-border-width | 1px | ||
Description
Border width of the imageeditor. | |||
$kendo-image-editor-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the imageeditor. | |||
$kendo-image-editor-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the imageeditor. | |||
$kendo-image-editor-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the imageeditor. | |||
$kendo-image-editor-content-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) | ||
Description
Imageeditor content background color. | |||
$kendo-image-editor-content-text | inherit | ||
Description
Imageeditor content text color. | |||
$kendo-image-editor-content-border | inherit | ||
Description
Imageeditor content border color. | |||
$kendo-image-editor-content-border-width | 0 | ||
Description
Imageeditor content border width. | |||
$kendo-image-editor-action-pane-bg | var( --kendo-component-bg, inherit ) | ||
Description
Imageeditor action pane background color. | |||
$kendo-image-editor-action-pane-text | inherit | ||
Description
Imageeditor action pane text color. | |||
$kendo-image-editor-action-pane-border | inherit | ||
Description
Imageeditor action pane border. | |||
$kendo-image-editor-action-pane-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Imageeditor action pane vertical padding. | |||
$kendo-image-editor-action-pane-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Imageeditor action pane horizontal padding. | |||
$kendo-image-editor-action-pane-width | if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) | ||
Description
Imageeditor action pane width. | |||
$kendo-image-editor-crop-bg | inherit | ||
Description
Crop background color of the imageeditor. | |||
$kendo-image-editor-crop-text | inherit | ||
Description
Crop text color of the imageeditor. | |||
$kendo-image-editor-crop-border | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Crop border color of the imageeditor. | |||
$kendo-image-editor-crop-overlay-bg | rgba( $kendo-color-black, .3 ) | ||
Description
Crop overlay background color of the imageeditor. | |||
$kendo-image-editor-crop-border-width | 1px | ||
Description
Crop border width of the imageeditor. | |||
$kendo-image-editor-crop-border-style | dashed | ||
Description
Crop border style of the imageeditor. | |||
$kendo-image-editor-resize-handle-margin-x | 1px | ||
Description
Imageeditor resize handle horizontal margin. | |||
$kendo-image-editor-resize-handle-margin-y | 1px | ||
Description
Imageeditor resize handle vertical margin. | |||
$kendo-image-editor-resize-handle-border-width | 0 2px 2px 0 | ||
Description
Imageeditor resize handle border width. | |||
$kendo-image-editor-resize-handle-size | map.get( $kendo-spacing, 4 ) | ||
Description
Imageeditor resize handle size. | |||
$kendo-image-editor-resize-top-offset | math.div( $kendo-image-editor-resize-handle-size, 2 ) | ||
Description
Imageeditor resize handle top offset. | |||
$kendo-image-editor-resize-left-offset | math.div( $kendo-image-editor-resize-handle-size, 2 ) | ||
Description
Imageeditor resize handle left offset. |
Input
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-input-width | 100% | ||
Description
The width of the Input components. | |||
$kendo-input-border-width | 1px | ||
Description
The width of the border around the Input components. | |||
$kendo-input-border-height | ( $kendo-input-border-width * 2 ) | ||
Description
The height of the border around the Input components. | |||
$kendo-input-sm-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the small Input components. | |||
$kendo-input-md-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the medium Input components. | |||
$kendo-input-lg-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the large Input components. | |||
$kendo-input-sm-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the small Input components. | |||
$kendo-input-md-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the medium Input components. | |||
$kendo-input-lg-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the large Input components. | |||
$kendo-input-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the small Input components. | |||
$kendo-input-md-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the medium Input components. | |||
$kendo-input-lg-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the large Input components. | |||
$kendo-input-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the small Input components. | |||
$kendo-input-md-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the medium Input components. | |||
$kendo-input-lg-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the large Input components. | |||
$kendo-input-sm-button-width | calc( #{$kendo-button-sm-line-height} * 1em + #{$kendo-button-sm-padding-y} * 2 ) | ||
Description
The width of the small Input button. | |||
$kendo-input-md-button-width | calc( #{$kendo-button-md-line-height} * 1em + #{$kendo-button-md-padding-y} * 2 ) | ||
Description
The width of the medium Input button. | |||
$kendo-input-lg-button-width | calc( #{$kendo-button-lg-line-height} * 1em + #{$kendo-button-lg-padding-y} * 2 ) | ||
Description
The width of the large Input button. | |||
$kendo-input-button-border-width | 1px | ||
Description
The border width of the Input button. | |||
$kendo-input-sm-spinner-width | $kendo-input-sm-button-width | ||
Description
The width of the small Input spinner button. | |||
$kendo-input-md-spinner-width | $kendo-input-md-button-width | ||
Description
The width of the medium Input spinner button. | |||
$kendo-input-lg-spinner-width | $kendo-input-lg-button-width | ||
Description
The width of the large Input spinner button. | |||
$kendo-input-spinner-icon-offset | null | ||
Description
The icon offset of the Input spinner button. | |||
$kendo-input-solid-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the solid Input components. | |||
$kendo-input-solid-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the solid Input components. | |||
$kendo-input-solid-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the solid Input components. | |||
$kendo-input-solid-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered solid Input components. | |||
$kendo-input-solid-hover-bg | $kendo-input-solid-bg | ||
Description
The background color of the hovered solid Input components. | |||
$kendo-input-solid-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the hovered solid Input components. | |||
$kendo-input-solid-focus-text | $kendo-input-solid-text | ||
Description
The text color of the focused solid Input components. | |||
$kendo-input-solid-focus-bg | $kendo-input-solid-bg | ||
Description
The background color of the focused solid Input components. | |||
$kendo-input-solid-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the focused solid Input components. | |||
$kendo-input-solid-hover-focus-text | $kendo-input-solid-focus-text | ||
Description
The text color of the hovered and focused solid Input components. | |||
$kendo-input-solid-hover-focus-bg | $kendo-input-solid-focus-bg | ||
Description
The background color of the hovered and focused solid Input components. | |||
$kendo-input-solid-hover-focus-border | $kendo-input-solid-focus-border | ||
Description
The border color of the hovered and focused solid Input components. | |||
$kendo-input-solid-disabled-text | $kendo-disabled-text | ||
Description
The text color of the disabled solid Input components. | |||
$kendo-input-solid-disabled-bg | $kendo-disabled-bg | ||
Description
The background color of the disabled solid Input components. | |||
$kendo-input-solid-disabled-border | $kendo-disabled-border | ||
Description
The border color of the disabled solid Input components. | |||
$kendo-input-outline-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the outline Input components. | |||
$kendo-input-outline-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the outline Input components. | |||
$kendo-input-outline-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the outline Input components. | |||
$kendo-input-outline-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered outline Input components. | |||
$kendo-input-outline-hover-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the hovered outline Input components. | |||
$kendo-input-outline-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the hovered outline Input components. | |||
$kendo-input-outline-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused outline Input components. | |||
$kendo-input-outline-focus-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the focused outline Input components. | |||
$kendo-input-outline-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the focused outline Input components. | |||
$kendo-input-outline-hover-focus-text | $kendo-input-outline-focus-text | ||
Description
The text color of the hovered and focused outline Input components. | |||
$kendo-input-outline-hover-focus-bg | $kendo-input-outline-focus-bg | ||
Description
The background color of the hovered and focused outline Input components. | |||
$kendo-input-outline-hover-focus-border | $kendo-input-outline-focus-border | ||
Description
The border color of the hovered and focused outline Input components. | |||
$kendo-input-outline-disabled-text | $kendo-disabled-text | ||
Description
The text color of the disabled outline Input components. | |||
$kendo-input-outline-disabled-bg | none | ||
Description
The background color of the disabled outline Input components. | |||
$kendo-input-outline-disabled-border | $kendo-disabled-text | ||
Description
The border color of the disabled outline Input components. | |||
$kendo-input-flat-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the flat Input components. | |||
$kendo-input-flat-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the flat Input components. | |||
$kendo-input-flat-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the flat Input components. | |||
$kendo-input-flat-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered flat Input components. | |||
$kendo-input-flat-hover-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the hovered flat Input components. | |||
$kendo-input-flat-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the hovered flat Input components. | |||
$kendo-input-flat-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused flat Input components. | |||
$kendo-input-flat-focus-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the focused flat Input components. | |||
$kendo-input-flat-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the focused flat Input components. | |||
$kendo-input-flat-hover-focus-text | $kendo-input-flat-focus-text | ||
Description
The text color of the hovered and focused flat Input components. | |||
$kendo-input-flat-hover-focus-bg | $kendo-input-flat-focus-bg | ||
Description
The background color of the hovered and focused flat Input components. | |||
$kendo-input-flat-hover-focus-border | $kendo-input-flat-focus-border | ||
Description
The border color of the hovered and focused flat Input components. | |||
$kendo-input-flat-disabled-text | $kendo-disabled-text | ||
Description
The text color of the disabled flat Input components. | |||
$kendo-input-flat-disabled-bg | none | ||
Description
The background color of the disabled flat Input components. | |||
$kendo-input-flat-disabled-border | $kendo-disabled-text | ||
Description
The border color of the disabled flat Input components. | |||
$kendo-picker-solid-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the solid Picker components. | |||
$kendo-picker-solid-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the solid Picker components. | |||
$kendo-picker-solid-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default | ||
Description
The border color of the solid Picker components. | |||
$kendo-picker-solid-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered solid Picker components. | |||
$kendo-picker-solid-hover-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of hovered the solid Picker components. | |||
$kendo-picker-solid-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the hovered solid Picker components. | |||
$kendo-picker-solid-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused solid Picker components. | |||
$kendo-picker-solid-focus-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the focused solid Picker components. | |||
$kendo-picker-solid-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the focused solid Picker components. | |||
$kendo-picker-solid-hover-focus-text | $kendo-picker-solid-focus-text | ||
Description
The text color of the hovered and focused solid Picker components. | |||
$kendo-picker-solid-hover-focus-bg | $kendo-picker-solid-focus-bg | ||
Description
The background color of the hovered and focused solid Picker components. | |||
$kendo-picker-solid-hover-focus-border | $kendo-picker-solid-focus-border | ||
Description
The border color of the hovered and focused solid Picker components. | |||
$kendo-picker-solid-disabled-text | $kendo-disabled-text | ||
Description
The text color of the disabled solid Picker components. | |||
$kendo-picker-solid-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The background color of the disabled solid Picker components. | |||
$kendo-picker-solid-disabled-border | $kendo-disabled-border | ||
Description
The border color of the disabled solid Picker components. | |||
$kendo-picker-outline-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the outline Picker components. | |||
$kendo-picker-outline-bg | none | ||
Description
The background color of the outline Picker components. | |||
$kendo-picker-outline-border | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the outline Picker components. | |||
$kendo-picker-outline-hover-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the hovered outline Picker components. | |||
$kendo-picker-outline-hover-bg | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The background color of the hovered outline Picker components. | |||
$kendo-picker-outline-hover-border | $kendo-picker-outline-hover-bg!default | ||
Description
The border color of the hovered outline Picker components. | |||
$kendo-picker-outline-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused outline Picker components. | |||
$kendo-picker-outline-focus-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the focused outline Picker components. | |||
$kendo-picker-outline-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the focused outline Picker components. | |||
$kendo-picker-outline-hover-focus-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the hovered and focused outline Picker components. | |||
$kendo-picker-outline-hover-focus-bg | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The background color of the hovered and focused outline Picker components. | |||
$kendo-picker-outline-hover-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the hovered and focused outline Picker components. | |||
$kendo-picker-outline-disabled-text | $kendo-disabled-text | ||
Description
The text color of the disabled outline Picker components. | |||
$kendo-picker-outline-disabled-bg | none | ||
Description
The background color of the disabled outline Picker components. | |||
$kendo-picker-outline-disabled-border | $kendo-picker-outline-disabled-text!default | ||
Description
The border color of the disabled outline Picker components. | |||
$kendo-picker-flat-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the flat Picker components. | |||
$kendo-picker-flat-bg | none | ||
Description
The background color of the flat Picker components. | |||
$kendo-picker-flat-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the flat Picker components. | |||
$kendo-picker-flat-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered flat Picker components. | |||
$kendo-picker-flat-hover-bg | if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the hovered flat Picker components. | |||
$kendo-picker-flat-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the hovered flat Picker components. | |||
$kendo-picker-flat-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused flat Picker components. | |||
$kendo-picker-flat-focus-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the focused flat Picker components. | |||
$kendo-picker-flat-focus-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the focused flat Picker components. | |||
$kendo-picker-flat-hover-focus-text | $kendo-picker-flat-hover-text | ||
Description
The text color of the hovered and focused flat Picker components. | |||
$kendo-picker-flat-hover-focus-bg | $kendo-picker-flat-hover-bg | ||
Description
The background color of the hovered and focused flat Picker components. | |||
$kendo-picker-flat-hover-focus-border | $kendo-picker-flat-border | ||
Description
The border color of the hovered and focused flat Picker components. | |||
$kendo-picker-flat-disabled-text | $kendo-disabled-text | ||
Description
The text color of the disabled flat Picker components. | |||
$kendo-picker-flat-disabled-bg | none | ||
Description
The background color of the disabled flat Picker components. | |||
$kendo-picker-flat-disabled-border | $kendo-picker-flat-disabled-text | ||
Description
The border color of the disabled flat Picker components. | |||
$kendo-input-sizes | (
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,
icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ),
button-padding-x: $kendo-input-sm-padding-y,
button-padding-y: $kendo-input-sm-padding-y,
button-width: $kendo-input-sm-button-width
),
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,
icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ),
button-padding-x: $kendo-input-md-padding-y,
button-padding-y: $kendo-input-md-padding-y,
button-width: $kendo-input-md-button-width
),
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,
icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-lg-padding-y * 2} ),
button-padding-x: $kendo-input-lg-padding-y,
button-padding-y: $kendo-input-lg-padding-y,
button-width: $kendo-input-lg-button-width
)
) | ||
Description
The sizes map for the Input components. | |||
$kendo-input-theme-colors | (
input: (
solid: (
text: $kendo-input-solid-text,
bg: $kendo-input-solid-bg,
border: $kendo-input-solid-border,
| ||
Description
Colors map of the input. | |||
$kendo-input-prefix-bg | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the Input prefix. | |||
$kendo-input-suffix-bg | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the Input suffix. | |||
$kendo-input-separator-text | k-get-theme-color-var( neutral-30 ) | ||
Description
The color of the Input separator. | |||
$kendo-input-prefix-text | k-get-theme-color-var( neutral-130 ) | ||
Description
The text color of the Input prefix. | |||
$kendo-input-suffix-text | k-get-theme-color-var( neutral-130 ) | ||
Description
The text color of the Input suffix. | |||
$kendo-input-prefix-disabled-text | k-get-theme-color-var( neutral-60 ) | ||
Description
The text color of the disabled Input prefix. | |||
$kendo-input-suffix-disabled-text | k-get-theme-color-var( neutral-60 ) | ||
Description
The text color of the disabled Input suffix. | |||
$kendo-input-invalid-border | var( --kendo-invalid-border, #{$kendo-invalid-border} ) | ||
Description
The border color of the invalid Input components. | |||
$kendo-input-invalid-text | var( --kendo-invalid-text, #{$kendo-invalid-text} ) | ||
Description
The text color of the invalid Input components. | |||
$kendo-input-placeholder-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Input placeholder. | |||
$kendo-input-placeholder-opacity | 1 | ||
Description
The opacity of the Input placeholder. | |||
$kendo-input-clear-value-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The color of the Input clear value icon. | |||
$kendo-input-clear-value-opacity | .6 | ||
Description
The opacity of the Input clear value icon. | |||
$kendo-input-clear-value-hover-text | inherit | ||
Description
The color of the hovered Input clear value icon. | |||
$kendo-input-clear-value-hover-opacity | 1 | ||
Description
The opacity of the hovered Input clear value icon. |
List
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-list-font-family | var( --kendo-font-family, inherit) | ||
Description
The font family of the List components. | |||
$kendo-list-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the List component. | |||
$kendo-list-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the List component. | |||
$kendo-list-sm-header-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the List header. | |||
$kendo-list-sm-header-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the List header. | |||
$kendo-list-header-border-width | 0 | ||
Description
The border width of the List header. | |||
$kendo-list-sm-header-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the List header. | |||
$kendo-list-sm-header-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the List header. | |||
$kendo-list-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
The font weight of the List header. | |||
$kendo-list-sm-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the List items. | |||
$kendo-list-sm-item-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the List items. | |||
$kendo-list-sm-item-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the List items. | |||
$kendo-list-sm-item-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the List items. | |||
$kendo-list-item-group-label-sm-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
The font size of the List item group label. | |||
$kendo-list-sm-group-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the List group items. | |||
$kendo-list-sm-group-item-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the List group items. | |||
$kendo-list-item-group-label-sm-padding-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
The horizontal padding of the List item group label. | |||
$kendo-list-item-group-label-sm-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
The vertical padding of the List item group label. | |||
$kendo-list-group-item-border-width | 1px 0 0 | ||
Description
The border width of the List group items. | |||
$kendo-list-sm-group-item-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the List group items. | |||
$kendo-list-sm-group-item-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the List group items. | |||
$kendo-list-group-item-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
The font weight of the List group item. | |||
$kendo-list-item-icon-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the List item icon | |||
$kendo-list-sizes | (
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: $kendo-list-sm-header-font-size,
header-line-height: $kendo-list-sm-header-line-height,
item-padding-x: $kendo-list-sm-item-padding-x,
item-padding-y: $kendo-list-sm-item-padding-y,
item-font-size: $kendo-list-sm-item-font-size,
item-line-height: $kendo-list-sm-item-line-height,
item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
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: $kendo-list-sm-group-item-font-size,
group-item-line-height: $kendo-list-sm-group-item-line-height
),
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: $kendo-list-md-header-font-size,
header-line-height: $kendo-list-md-header-line-height,
item-padding-x: $kendo-list-md-item-padding-x,
item-padding-y: $kendo-list-md-item-padding-y,
item-font-size: $kendo-list-md-item-font-size,
item-line-height: $kendo-list-md-item-line-height,
item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
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: $kendo-list-md-group-item-font-size,
group-item-line-height: $kendo-list-md-group-item-line-height
),
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: $kendo-list-lg-header-font-size,
header-line-height: $kendo-list-lg-header-line-height,
item-padding-x: $kendo-list-lg-item-padding-x,
item-padding-y: $kendo-list-lg-item-padding-y,
item-font-size: $kendo-list-lg-item-font-size,
item-line-height: $kendo-list-lg-item-line-height,
item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
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: $kendo-list-lg-group-item-font-size,
group-item-line-height: $kendo-list-lg-group-item-line-height
)
) | ||
Description
The map with the sizes of the List. | |||
$kendo-list-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of the List component. | |||
$kendo-list-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the List component. | |||
$kendo-list-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the List component. | |||
$kendo-list-header-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the List header. | |||
$kendo-list-header-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the List header. | |||
$kendo-list-header-border | inherit | ||
Description
The border color of the List header. | |||
$kendo-list-header-shadow | $kendo-box-shadow-depth-3 | ||
Description
The box shadow of the List header. | |||
$kendo-list-item-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the List items. | |||
$kendo-list-item-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the List items. | |||
$kendo-list-item-hover-bg | if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the hovered List items. | |||
$kendo-list-item-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered List items. | |||
$kendo-list-item-focus-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the focused List items. | |||
$kendo-list-item-focus-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the focused List items. | |||
$kendo-list-item-focus-shadow | inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | ||
Description
The box shadow of the focused List items. | |||
$kendo-list-item-selected-bg | if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 )) | ||
Description
The background color of the selected List items. | |||
$kendo-list-item-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the selected List items. | |||
$kendo-list-item-selected-hover-bg | if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 )) | ||
Description
The background color of the selected hovered List items. | |||
$kendo-list-item-selected-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the selected hovered List items. | |||
$kendo-list-item-disabled-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the disabled List items. | |||
$kendo-list-item-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
The text color of the disabled List items. | |||
$kendo-list-group-item-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the List group items. | |||
$kendo-list-group-item-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the List group items. | |||
$kendo-list-group-item-border | inherit | ||
Description
The border color of the List group items. | |||
$kendo-list-group-item-shadow | none | ||
Description
The base shadow of the List group items. | |||
$kendo-list-no-data-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the 'No Data' text. | |||
$kendo-list-option-label-text | $kendo-subtle-text | ||
Description
The color of the 'Option Label' text. | |||
$kendo-list-option-label-disabled-text | $kendo-disabled-text | ||
Description
The color of the disabled 'Option Label' text. |
Listbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listbox-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the ListBox elements. | |||
$kendo-listbox-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the ListBox buttons. | |||
$kendo-listbox-width | 10em | ||
Description
WThe width of the ListBox. | |||
$kendo-listbox-height | 200px | ||
Description
The height of the ListBox. | |||
$kendo-listbox-border-width | 1px | ||
Description
The width of the border around the ListBox. | |||
$kendo-listbox-font-family | var( --kendo-font-family, normal ) | ||
Description
The font family of the ListBox. | |||
$kendo-listbox-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ListBox. | |||
$kendo-listbox-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the ListBox. | |||
$kendo-listbox-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the ListBox. | |||
$kendo-listbox-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of the ListBox. | |||
$kendo-listbox-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the ListBox. | |||
$kendo-listbox-drop-hint-width | 1px | ||
Description
The width of the ListBox drop hint. | |||
$kendo-listbox-drop-hint-border-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the ListBox drop hint. |
Listgroup
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listgroup-border-width | 1px | ||
Description
Border width of the listgroup. | |||
$kendo-listgroup-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the listgroup. | |||
$kendo-listgroup-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the listgroup. | |||
$kendo-listgroup-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the listgroup. | |||
$kendo-listgroup-bg | var( --kendo-component-bg, transparent ) | ||
Description
Background color of the listgroup component. | |||
$kendo-listgroup-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the listgroup component. | |||
$kendo-listgroup-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the listgroup component. | |||
$kendo-listgroup-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the listgroup items. | |||
$kendo-listgroup-item-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the listgroup items. | |||
$kendo-listgroup-item-border-width | 1px | ||
Description
Border width of the listgroup item. |
Listview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-listview-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal padding of the ListView. | |||
$kendo-listview-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the ListView. | |||
$kendo-listview-border-width | 1px | ||
Description
The width of the border around bordered ListView. | |||
$kendo-listview-header-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the ListView header. | |||
$kendo-listview-header-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the ListView header. | |||
$kendo-listview-footer-padding-x | $kendo-listview-header-padding-x | ||
Description
The horizontal padding of the ListView footer. | |||
$kendo-listview-footer-padding-y | $kendo-listview-header-padding-y | ||
Description
The vertical padding of the ListView footer. | |||
$kendo-listview-item-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal padding of the ListView items. | |||
$kendo-listview-item-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the ListView items. | |||
$kendo-listview-font-family | var( --kendo-font-family, initial ) | ||
Description
The font family of the ListView. | |||
$kendo-listview-font-size | var( --kendo-font-size, initial ) | ||
Description
The font size of the ListView. | |||
$kendo-listview-line-height | var( --kendo-line-height, initial ) | ||
Description
The line height of the ListView. | |||
$kendo-listview-grid-gap | map.get( $kendo-spacing, 0 ) | ||
Description
The gap between items of ListView with grid layout. | |||
$kendo-listview-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the ListView. | |||
$kendo-listview-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the ListView. | |||
$kendo-listview-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the ListView. | |||
$kendo-listview-header-text | initial | ||
Description
The text color of the ListView header. | |||
$kendo-listview-header-bg | initial | ||
Description
The background color of the ListView header. | |||
$kendo-listview-header-border | $kendo-listview-border | ||
Description
The border color of the ListView header. | |||
$kendo-listview-footer-text | initial | ||
Description
The text color of the ListView footer. | |||
$kendo-listview-footer-bg | initial | ||
Description
The background color of the ListView footer. | |||
$kendo-listview-item-selected-text | initial | ||
Description
The text color of the selected ListView items. | |||
$kendo-listview-item-selected-bg | if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the selected ListView items. | |||
$kendo-listview-item-focus-text | initial | ||
Description
The text color of the focused ListView items. | |||
$kendo-listview-item-focus-bg | initial | ||
Description
The background color of the focused ListView items. | |||
$kendo-listview-item-focus-shadow | var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) | ||
Description
The box shadow of the focused ListView items. |
Loader
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-loader-segment-border-radius | 50% | ||
Description
The border radius of the Loader segment. | |||
$kendo-loader-sm-segment-size | map.get( $kendo-spacing, 1 ) | ||
Description
The size of the small Loader segment. | |||
$kendo-loader-md-segment-size | map.get( $kendo-spacing, 2 ) | ||
Description
The size of the medium Loader segment. | |||
$kendo-loader-lg-segment-size | map.get( $kendo-spacing, 4 ) | ||
Description
The size of the large Loader segment. | |||
$kendo-loader-sm-padding-x | math.div( $kendo-loader-sm-segment-size, 2 ) | ||
Description
The horizontal padding of the small Loader. | |||
$kendo-loader-md-padding-x | math.div( $kendo-loader-md-segment-size, 2 ) | ||
Description
The horizontal padding of the medium Loader. | |||
$kendo-loader-lg-padding-x | math.div( $kendo-loader-lg-segment-size, 2 ) | ||
Description
The horizontal padding of the large Loader. | |||
$kendo-loader-sm-padding-y | math.div( $kendo-loader-sm-segment-size, 2 ) | ||
Description
The vertical padding of the small Loader. | |||
$kendo-loader-md-padding-y | math.div( $kendo-loader-md-segment-size, 2 ) | ||
Description
The vertical padding of the medium Loader. | |||
$kendo-loader-lg-padding-y | math.div( $kendo-loader-lg-segment-size, 2 ) | ||
Description
The vertical padding of the large Loader. | |||
$kendo-loader-equilateral-height | .8660 | ||
Description
The equilateral height of the Loader. | |||
$kendo-loader-sm-spinner-3-width | ( $kendo-loader-sm-segment-size * 4 ) | ||
Description
The width of the small spinner-3 Loader. | |||
$kendo-loader-md-spinner-3-width | ( $kendo-loader-md-segment-size * 4 ) | ||
Description
The width of the medium spinner-3 Loader. | |||
$kendo-loader-lg-spinner-3-width | ( $kendo-loader-lg-segment-size * 4 ) | ||
Description
The width of the large spinner-3 Loader. | |||
$kendo-loader-sm-spinner-3-height | ( $kendo-loader-sm-spinner-3-width * $kendo-loader-equilateral-height ) | ||
Description
The height of the small spinner-3 Loader. | |||
$kendo-loader-md-spinner-3-height | ( $kendo-loader-md-spinner-3-width * $kendo-loader-equilateral-height ) | ||
Description
The height of the medium spinner-3 Loader. | |||
$kendo-loader-lg-spinner-3-height | ( $kendo-loader-lg-spinner-3-width * $kendo-loader-equilateral-height ) | ||
Description
The height of the large spinner-3 Loader. | |||
$kendo-loader-sm-spinner-4-width | ( $kendo-loader-sm-segment-size * 4 ) | ||
Description
The width of the small spinner-4 Loader. | |||
$kendo-loader-md-spinner-4-width | ( $kendo-loader-md-segment-size * 4 ) | ||
Description
The width of the medium spinner-4 Loader. | |||
$kendo-loader-lg-spinner-4-width | ( $kendo-loader-lg-segment-size * 4 ) | ||
Description
The width of the large spinner-4 Loader. | |||
$kendo-loader-sm-spinner-4-height | $kendo-loader-sm-spinner-4-width | ||
Description
The height of the small spinner-4 Loader. | |||
$kendo-loader-md-spinner-4-height | $kendo-loader-md-spinner-4-width | ||
Description
The height of the medium spinner-4 Loader. | |||
$kendo-loader-lg-spinner-4-height | $kendo-loader-lg-spinner-4-width | ||
Description
The height of the large spinner-4 Loader. | |||
$kendo-loader-container-panel-border-width | 1px | ||
Description
The border width of the container panel. | |||
$kendo-loader-container-panel-border-style | solid | ||
Description
The border style of the container panel. | |||
$kendo-loader-container-panel-border-color | var( --kendo-component-border, initial ) | ||
Description
The border color of the container panel. | |||
$kendo-loader-container-panel-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the container panel. | |||
$kendo-loader-container-panel-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the container panel. | |||
$kendo-loader-sm-container-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the small Loader container. | |||
$kendo-loader-md-container-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the medium Loader container. | |||
$kendo-loader-lg-container-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the large Loader container. | |||
$kendo-loader-sm-container-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the small Loader container. | |||
$kendo-loader-md-container-padding-y | map.get( $kendo-spacing, 5 ) | ||
Description
The vertical padding of the medium Loader container. | |||
$kendo-loader-lg-container-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical padding of the large Loader container. | |||
$kendo-loader-sm-container-gap | map.get( $kendo-spacing, 1 ) | ||
Description
The gap of the small Loader container. | |||
$kendo-loader-md-container-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The gap of the medium Loader container. | |||
$kendo-loader-lg-container-gap | map.get( $kendo-spacing, 3 ) | ||
Description
The gap of the large Loader container. | |||
$kendo-loader-sm-container-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the small Loader container. | |||
$kendo-loader-md-container-font-size | var( --kendo-font-size-md, inherit ) | ||
Description
The font size of the medium Loader container. | |||
$kendo-loader-lg-container-font-size | var( --kendo-font-size-lg, inherit ) | ||
Description
The font size of the large Loader container. | |||
$kendo-loader-brand-colors | (
primary: primary,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
error: error,
success: success,
warning: warning,
info: info
) | ||
Description
The theme variations for the Loader. | |||
$kendo-loader-theme-colors | () | ||
Description
The theme colors map for the Loader variations. |
Map
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-map-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the map. | |||
$kendo-map-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the map. | |||
$kendo-map-font-family | var( --kendo-font-family, normal ) | ||
Description
Font family of the map. | |||
$kendo-map-bg | var( --kendo-component-bg, transparent ) | ||
Description
Background color of the map. | |||
$kendo-map-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the map. | |||
$kendo-map-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
Border color of the map. | |||
$kendo-map-border-width | 0px | ||
Description
Border width of the map. | |||
$kendo-map-height | 600px | ||
Description
Height of the map. | |||
$kendo-map-navigator-margin-x | map.get( $kendo-spacing, 4 ) | ||
Description
Map navigator horizontal margin. | |||
$kendo-map-navigator-margin-y | map.get( $kendo-spacing, 4 ) | ||
Description
Map navigator vertical margin. | |||
$kendo-map-navigator-padding | map.get( $kendo-spacing, 0.5 ) | ||
Description
Map navigator padding. | |||
$kendo-map-navigator-width | calc( var( --kendo-icon-size) * 3 + #{$kendo-map-navigator-padding * 2} ) | ||
Description
Map navigator width. | |||
$kendo-map-navigator-height | $kendo-map-navigator-width | ||
Description
Map navigator height. | |||
$kendo-map-navigator-border-width | 1px | ||
Description
Map navigator border width. | |||
$kendo-map-navigator-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Map navigator background color. | |||
$kendo-map-navigator-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
Map navigator text color. | |||
$kendo-map-navigator-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
Map navigator border color. | |||
$kendo-map-zoom-control-margin | map.get( $kendo-spacing, 4 ) | ||
Description
Map zoom control margin. | |||
$kendo-map-zoom-control-button-padding-x | $kendo-button-md-padding-y | ||
Description
Map zoom control horizontal padding. | |||
$kendo-map-zoom-control-button-padding-y | $kendo-map-zoom-control-button-padding-x | ||
Description
Map zoom control vertical padding. | |||
$kendo-map-attribution-padding-x | $kendo-padding-sm-x | ||
Description
Map attribution horizontal padding. | |||
$kendo-map-attribution-padding-y | $kendo-padding-sm-y | ||
Description
Map attribution vertical padding. | |||
$kendo-map-attribution-font-size | calc( #{$kendo-map-font-size} * .75 ) | ||
Description
Map attribution font size. | |||
$kendo-map-attribution-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Map attribution background color. | |||
$kendo-map-marker-fill | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Map marker fill color. |
Mediaplayer
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-media-player-border-width | 1px | ||
Description
Border width of the mediaplayer. | |||
$kendo-media-player-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the mediaplayer. | |||
$kendo-media-player-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the mediaplayer. | |||
$kendo-media-player-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the mediaplayer. | |||
$kendo-media-player-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the mediaplayer. | |||
$kendo-media-player-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the mediaplayer. | |||
$kendo-media-player-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the mediaplayer. | |||
$kendo-media-player-overlay-bg | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
Mediaplayer overlay background color. | |||
$kendo-media-player-quality-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
Mediaplayer quality button border color. | |||
$kendo-media-player-title-font-size | var( --kendo-font-size-xl, inherit ) | ||
Description
Media player title font size. | |||
$kendo-media-player-titlebar-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Mediaplayer titlebar horizontal padding. | |||
$kendo-media-player-titlebar-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Mediaplayer titlebar vertical padding. | |||
$kendo-media-player-titlebar-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 )) | ||
Description
Mediaplayer titlebar background color. | |||
$kendo-media-player-titlebar-text | $kendo-media-player-bg | ||
Description
Mediaplayer titlebar text color. |
Menu
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-menu-border-width | map.get( $kendo-spacing, 0 ) | ||
Description
Width of the menu border. | |||
$kendo-menu-font-family | var( --kendo-font-family, inherit ) | ||
$kendo-menu-font-size | var( --kendo-font-size, inherit ) | ||
$kendo-menu-line-height | var( --kendo-line-height, normal ) | ||
Description
Line heights used along with $kendo-font-size. | |||
$kendo-menu-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Padding of menu root items. | |||
$kendo-menu-item-spacing | map.get( $kendo-spacing, 0 ) | ||
Description
Spacing between menu root items. | |||
$kendo-menu-item-icon-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
Spacing between menu root items text and icons. | |||
$kendo-menu-separator-margin | map.get( $kendo-spacing, 1 ) | ||
Description
Spacing between menu separator and items. | |||
$kendo-menu-separator-width | 1px | ||
Description
Separator width | |||
$kendo-menu-item-focus-outline-offset | - map.get( $kendo-spacing, 0.5 ) | ||
Description
The base outline of focused menu item. | |||
$kendo-menu-text | var( --kendo-body-text, inherit ) | ||
Description
The text color of the menu. | |||
$kendo-menu-bg | transparent | ||
Description
The background color of the menu. | |||
$kendo-menu-border | initial | ||
Description
The border color of the menu. | |||
$kendo-menu-shadow | none | ||
Description
The shadow of the menu. | |||
$kendo-menu-item-text | $kendo-menu-text | ||
Description
The text color of menu items. | |||
$kendo-menu-item-bg | transparent | ||
Description
The background color of menu items. | |||
$kendo-menu-item-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
The text color of hover menu items. | |||
$kendo-menu-item-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The background color of hover menu items. | |||
$kendo-menu-item-focus-text | $kendo-menu-item-text | ||
Description
The text color of focused menu items. | |||
$kendo-menu-item-focus-bg | $kendo-menu-item-bg | ||
Description
The background color of focused menu items. | |||
$kendo-menu-item-focus-outline | var( --kendo-focus-outline, none ) | ||
Description
The outline of focused menu items. | |||
$kendo-menu-item-expanded-text | $kendo-menu-item-hover-text | ||
Description
The text color of expanded menu items. | |||
$kendo-menu-item-expanded-bg | var( --kendo-selected-bg, initial ) | ||
Description
The background color of expanded menu items. | |||
$kendo-menu-item-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of disabled menu items. | |||
$kendo-menu-item-disabled-bg | $kendo-menu-item-bg | ||
Description
The background color of disabled menu items. | |||
$kendo-menu-popup-padding-x | $kendo-popup-padding-x | ||
Description
Horizontal padding of the menu popup. | |||
$kendo-menu-popup-padding-y | $kendo-popup-padding-y | ||
Description
Vertical padding of the menu popup. | |||
$kendo-menu-popup-border-width | $kendo-popup-border-width | ||
Description
Width of the border around the menu popup. | |||
$kendo-menu-popup-font-size | var( --kendo-font-size-md, inherit ) | ||
Description
Font sizes of the menu popup. | |||
$kendo-menu-popup-line-height | var( --kendo-line-height-md, 30px ) | ||
Description
Line heights used along with $kendo-font-size. | |||
$kendo-menu-popup-bg | var( --kendo-component-bg, initial ) | ||
Description
The background of the menu popup. | |||
$kendo-menu-popup-border | initial | ||
Description
The border color of the menu popup. | |||
$kendo-menu-popup-shadow | var( --kendo-box-shadow-depth-6, none ) | ||
Description
The shadow of the menu popup. | |||
$kendo-menu-popup-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the menu item in popup. | |||
$kendo-menu-popup-sm-item-padding-y | $kendo-list-sm-item-padding-y | ||
Description
Vertical padding of the menu item in popup. | |||
$kendo-menu-popup-sm-item-padding-end | calc( #{$kendo-menu-popup-sm-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) ) | ||
Description
The end padding of the menu item in popup. | |||
$kendo-menu-popup-sm-item-icon-margin-start | map.get( $kendo-spacing, 0 ) | ||
Description
The start margin of the menu item expand icon. | |||
$kendo-menu-popup-sm-item-icon-margin-end | calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) | ||
Description
The end margin of the menu item expand icon. | |||
$kendo-menu-popup-focus-outline-offset | $kendo-menu-item-focus-outline-offset | ||
Description
The base shadow of focused menu item in popup. | |||
$kendo-menu-popup-item-spacing | map.get( $kendo-spacing, 0 ) | ||
Description
The spacing between the menu items in popup. | |||
$kendo-menu-sizes | (
sm: (
group-font-size: $kendo-menu-popup-sm-font-size,
group-line-height: $kendo-menu-popup-sm-line-height,
link-padding-x: $kendo-menu-popup-sm-item-padding-x,
link-padding-y: $kendo-menu-popup-sm-item-padding-y,
link-padding-inline-end: $kendo-menu-popup-sm-item-padding-end,
arrow-margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start,
arrow-margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end,
),
md: (
group-font-size: $kendo-menu-popup-md-font-size,
group-line-height: $kendo-menu-popup-md-line-height,
link-padding-x: $kendo-menu-popup-md-item-padding-x,
link-padding-y: $kendo-menu-popup-md-item-padding-y,
link-padding-inline-end: $kendo-menu-popup-md-item-padding-end,
arrow-margin-inline-start: $kendo-menu-popup-item-icon-md-margin-start,
arrow-margin-inline-end: $kendo-menu-popup-item-icon-md-margin-end,
),
lg: (
group-font-size: $kendo-menu-popup-lg-font-size,
group-line-height: $kendo-menu-popup-lg-line-height,
link-padding-x: $kendo-menu-popup-lg-item-padding-x,
link-padding-y: $kendo-menu-popup-lg-item-padding-y,
link-padding-inline-end: $kendo-menu-popup-lg-item-padding-end,
arrow-margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start,
arrow-margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end
)
) | ||
Description
Sizes map for the menu. | |||
$kendo-menu-popup-item-text | $kendo-list-item-text | ||
Description
The text color of the menu item in popup. | |||
$kendo-menu-popup-item-bg | $kendo-list-item-bg | ||
Description
The background of the menu item in popup. | |||
$kendo-menu-popup-item-hover-text | $kendo-list-item-hover-text | ||
Description
The text color of hovered menu item in popup. | |||
$kendo-menu-popup-item-hover-bg | $kendo-list-item-hover-bg | ||
Description
The background of hovered menu item in popup. | |||
$kendo-menu-popup-item-focus-text | $kendo-menu-item-text | ||
Description
The text color of focused menu items. | |||
$kendo-menu-popup-item-focus-bg | $kendo-menu-item-bg | ||
Description
The background color of focused menu items. | |||
$kendo-menu-popup-item-focus-outline | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | ||
Description
The outline of focused menu items. | |||
$kendo-menu-popup-item-expanded-text | $kendo-list-item-selected-text | ||
Description
The text color of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-bg | $kendo-list-item-selected-bg | ||
Description
The background of expanded menu item in popup. | |||
$kendo-menu-popup-item-disabled-text | $kendo-list-item-disabled-text | ||
Description
The text color of disabled menu item in popup. | |||
$kendo-menu-popup-item-disabled-bg | $kendo-list-item-disabled-bg | ||
Description
The background of disabled menu item in popup. | |||
$kendo-menu-scroll-button-bg | var( --kendo-component-bg, $kendo-component-bg ) | ||
Description
The background color of scroll menu buttons. | |||
$kendo-menu-scroll-button-border | var( --kendo-component-border, $kendo-component-border ) | ||
Description
The border color of scroll menu buttons. | |||
$kendo-menu-scroll-button-hover-bg | null | ||
Description
The background color of hover scroll menu buttons. | |||
$kendo-menu-scroll-button-hover-border | null | ||
Description
The border color of scroll hover menu buttons. | |||
$kendo-menu-icon-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The color of menu items icon. |
Messagebox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-message-box-margin | 0 0 map.get( $kendo-spacing, 3 ) 0 | ||
Description
Margin around the message box. | |||
$kendo-message-box-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the message box. | |||
$kendo-message-box-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the message box. | |||
$kendo-message-box-border-width | 0 | ||
Description
Border width of the message box. | |||
$kendo-message-box-border-style | solid | ||
Description
Border style of the message box. | |||
$kendo-message-box-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the message box. | |||
$kendo-message-box-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the message box. | |||
$kendo-message-box-line-height | var( --kendo-line-height-sm, normal ) | ||
Description
Line height of the message box. | |||
$kendo-message-box-link-font-style | normal | ||
Description
Font style of the message box links. | |||
$kendo-message-box-link-decoration | underline | ||
Description
Text decoration of the message box links. | |||
$kendo-message-box-link-text | var( --kendo-link-text, initial ) | ||
Description
Text color of the message box links. | |||
$kendo-message-box-link-hover-text | var( --kendo-link-hover-text, initial ) | ||
Description
Hover text color of the message box links. |
Notification
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-notification-group-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The row-gap between the elements in the Notification group. | |||
$kendo-notification-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Notification. | |||
$kendo-notification-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Notification. | |||
$kendo-notification-border-width | 1px | ||
$kendo-notification-border-radius | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border radius of the Notification. | |||
$kendo-notification-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Notification. | |||
$kendo-notification-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Notification. | |||
$kendo-notification-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Notification. | |||
$kendo-notification-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the Notification. | |||
$kendo-notification-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the Notification. | |||
$kendo-notification-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the Notification. | |||
$kendo-notification-box-shadow | none | ||
Description
The box shadow of the Notification. | |||
$kendo-notification-icon-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal spacing of the Notification icon. | |||
$kendo-notification-close-icon-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal spacing of the Notification close icon. | |||
$kendo-notification-icon-text | var( --kendo-component-text, inherit ) | ||
Description
The color of the Notification icon. | |||
$kendo-notification-brand-colors | (
primary: primary,
error: error,
warning: warning,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the Notification. | |||
$kendo-notification-theme-colors | () | ||
Description
The theme colors map for the Notification variations. |
Orgchart
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-orgchart-spacer | map.get( $kendo-spacing, 6) | ||
Description
The spacing index of the OrgChart. | |||
$kendo-orgchart-padding-y | $kendo-orgchart-spacer | ||
Description
The vertical padding of the OrgChart. | |||
$kendo-orgchart-padding-x | $kendo-orgchart-padding-y | ||
Description
The horizontal padding of the OrgChart. | |||
$kendo-orgchart-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the OrgChart. | |||
$kendo-orgchart-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the OrgChart. | |||
$kendo-orgchart-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the OrgChart. | |||
$kendo-orgchart-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the OrgChart. | |||
$kendo-orgchart-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the OrgChart. | |||
$kendo-orgchart-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the OrgChart. | |||
$kendo-orgchart-node-spacing | $kendo-orgchart-spacer | ||
Description
The spacing of the OrgChart node. | |||
$kendo-orgchart-group-spacing | $kendo-orgchart-spacer | ||
Description
The spacing of the OrgChart group. | |||
$kendo-orgchart-node-container-spacing | $kendo-orgchart-spacer | ||
Description
The spacing of the OrgChart node container. | |||
$kendo-orgchart-node-group-padding-y | $kendo-orgchart-spacer | ||
Description
The vertical padding of the OrgChart node group. | |||
$kendo-orgchart-node-group-padding-x | $kendo-orgchart-node-group-padding-y | ||
Description
The horizontal padding of the OrgChart node group. | |||
$kendo-orgchart-node-group-border-width | 1px | ||
Description
The border width of the OrgChart node group. | |||
$kendo-orgchart-node-group-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the OrgChart node group. | |||
$kendo-orgchart-node-group-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the OrgChart node group. | |||
$kendo-orgchart-node-group-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the OrgChart node group. | |||
$kendo-orgchart-node-group-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the OrgChart node group. | |||
$kendo-orgchart-node-group-focus-border | $kendo-card-focus-border | ||
Description
The border color of the focused OrgChart node group. | |||
$kendo-orgchart-node-group-focus-shadow | $kendo-card-focus-shadow | ||
Description
The shadow of the focused OrgChart node group. | |||
$kendo-orgchart-node-group-title-margin-y | 0px | ||
Description
The vertical margin of the OrgChart node group title. | |||
$kendo-orgchart-node-group-title-font-size | var( --kendo-font-size-xl, inherit ) | ||
Description
The font size of the OrgChart node group title. | |||
$kendo-orgchart-node-group-title-line-height | var( --kendo-line-height-md, normal ) | ||
Description
The line height of the OrgChart node group title. | |||
$kendo-orgchart-node-group-subtitle-margin-y | $kendo-orgchart-spacer - map.get( $kendo-spacing, 1 ) | ||
Description
The vertical margin of the OrgChart node group subtitle. | |||
$kendo-orgchart-node-group-subtitle-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the OrgChart node group subtitle. | |||
$kendo-orgchart-node-group-subtitle-text | var( --kendo-subtle-text, inherit ) | ||
Description
The line height of the OrgChart node group subtitle. | |||
$kendo-orgchart-card-width | 300px | ||
Description
The width of the OrgChart Card. | |||
$kendo-orgchart-card-border-width | $kendo-card-border-width | ||
Description
The border width of the OrgChart Card. | |||
$kendo-orgchart-card-shadow | $kendo-card-shadow | ||
Description
The shadow of the OrgChart Card. | |||
$kendo-orgchart-card-focus-shadow | $kendo-card-focus-shadow | ||
Description
The shadow of the focused OrgChart Card. | |||
$kendo-orgchart-card-title-margin-y | 0px | ||
Description
The vertical margin of the OrgChart Card title. | |||
$kendo-orgchart-card-title-font-size | $kendo-card-title-font-size | ||
Description
The font size of the OrgChart Card title. | |||
$kendo-orgchart-card-title-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the OrgChart Card title. | |||
$kendo-orgchart-card-subtitle-margin-y | 0px | ||
Description
The vertical margin of the OrgChart Card subtitle. | |||
$kendo-orgchart-card-subtitle-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the OrgChart Card subtitle. | |||
$kendo-orgchart-card-subtitle-line-height | var( --kendo-line-height-md, inherit ) | ||
Description
The line height of the OrgChart Card subtitle. | |||
$kendo-orgchart-card-body-padding-y | $kendo-orgchart-spacer - map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the OrgChart Card body. | |||
$kendo-orgchart-card-body-padding-x | $kendo-orgchart-card-body-padding-y | ||
Description
The horizontal padding of the OrgChart Card body. | |||
$kendo-orgchart-card-body-border-width | 2px 0 0 | ||
Description
The top border width of the OrgChart Card body. | |||
$kendo-orgchart-card-body-border-color | transparent | ||
Description
The border color of the OrgChart Card body. | |||
$kendo-orgchart-card-body-vbox-margin-x | $kendo-orgchart-spacer - map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the OrgChart Card body title wrap. | |||
$kendo-orgchart-card-body-vbox-min-height | $kendo-card-avatar-size | ||
Description
The min height of the OrgChart Card body title wrap. | |||
$kendo-orgchart-line-size | 1px | ||
Description
The size of the OrgChart connecting line. | |||
$kendo-orgchart-line-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The fill color of the OrgChart connecting line. | |||
$kendo-orgchart-line-v-height | 25px | ||
Description
The height of the OrgChart connecting line. |
Overlay
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-overlay-opacity | .4 | ||
Description
Opacity of the overlay. | |||
$kendo-overlay-dark | $kendo-color-black | ||
Description
Background color of the dark overlay. | |||
$kendo-overlay-light | $kendo-color-white | ||
Description
Background color of the light overlay. |
Pager
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-pager-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Pager. | |||
$kendo-pager-sm-padding-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
The horizontal padding of the small Pager. | |||
$kendo-pager-md-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the medium Pager. | |||
$kendo-pager-lg-padding-x | map.get( $kendo-spacing, 2.5 ) | ||
Description
The horizontal padding of the large Pager. | |||
$kendo-pager-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Pager. | |||
$kendo-pager-sm-padding-y | $kendo-pager-sm-padding-x | ||
Description
The vertical padding of the small Pager. | |||
$kendo-pager-md-padding-y | $kendo-pager-md-padding-x | ||
Description
The vertical padding of the medium Pager. | |||
$kendo-pager-lg-padding-y | $kendo-pager-lg-padding-x | ||
Description
The vertical padding of the large Pager. | |||
$kendo-pager-border-width | 1px | ||
Description
The border width of the Pager. | |||
$kendo-pager-font-family | var( --kendo-font-family, normal ) | ||
Description
The font family of the Pager. | |||
$kendo-pager-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Pager. | |||
$kendo-pager-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Pager. | |||
$kendo-pager-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Pager. | |||
$kendo-pager-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the Pager. | |||
$kendo-pager-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the Pager. | |||
$kendo-pager-focus-bg | var( --kendo-pager-bg, #{$kendo-pager-bg}) | ||
Description
The background color of the focused Pager. | |||
$kendo-pager-focus-text | var( --kendo-pager-text, #{$kendo-pager-text}) | ||
Description
The text color of the focused Pager. | |||
$kendo-pager-focus-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the focused Pager. | |||
$kendo-pager-item-border-radius | 0 | ||
Description
The border radius of the Pager items. | |||
$kendo-pager-item-spacing | null | ||
Description
The spacing around the Pager items. | |||
$kendo-pager-sm-item-group-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the item groups of the small Pager. | |||
$kendo-pager-md-item-group-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the item groups of the medium Pager. | |||
$kendo-pager-lg-item-group-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the item groups of the large Pager. | |||
$kendo-pager-sizes-label-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the Pagers' sizes label. | |||
$kendo-pager-info-label-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Pagers' info label. | |||
$kendo-pager-input-width | 5em | ||
Description
The width of the Inputs in the Pager. | |||
$kendo-pager-dropdown-width | 5em | ||
Description
The width of the DropDowns in the Pager. | |||
$kendo-pager-sizes | (
sm: (
padding-x: $kendo-pager-sm-padding-x,
padding-y: $kendo-pager-sm-padding-y,
item-group-spacing: $kendo-pager-sm-item-group-spacing
),
md: (
padding-x: $kendo-pager-md-padding-x,
padding-y: $kendo-pager-md-padding-y,
item-group-spacing: $kendo-pager-md-item-group-spacing
),
lg: (
padding-x: $kendo-pager-lg-padding-x,
padding-y: $kendo-pager-lg-padding-y,
item-group-spacing: $kendo-pager-lg-item-group-spacing
)
) | ||
Description
The sizes map of the Pager. |
Panelbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-panelbar-padding-x | 0px | ||
Description
Horizontal padding of the panelbar. | |||
$kendo-panelbar-padding-y | 0px | ||
Description
Vertical padding of the panelbar. | |||
$kendo-panelbar-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the panelbar. | |||
$kendo-panelbar-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the panelbar. | |||
$kendo-panelbar-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the panelbar. | |||
$kendo-panelbar-border-width | 1px | ||
Description
Width of the border around the panelbar. | |||
$kendo-panelbar-border-style | solid | ||
Description
Border style around the the panelbar. | |||
$kendo-panelbar-item-border-width | 0 | ||
Description
Width of the border around the panelbar items. | |||
$kendo-panelbar-item-border-style | solid | ||
Description
Style of the border around the panelbar items. | |||
$kendo-panelbar-icon-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing around the icon of the panelbar items. | |||
$kendo-panelbar-header-padding-x-start | calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) | ||
Description
Horizontal padding of the panelbar header. | |||
$kendo-panelbar-header-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the panelbar header. | |||
$kendo-panelbar-item-padding-x-start | calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) | ||
Description
Horizontal padding of the panelbar items. | |||
$kendo-panelbar-item-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the panelbar items. | |||
$kendo-panelbar-item-level-count | 4 | ||
Description
Maximum nesting of the panelbar items. | |||
$kendo-panelbar-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the panelbar. | |||
$kendo-panelbar-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the panelbar. | |||
$kendo-panelbar-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the panelbar. | |||
$kendo-panelbar-header-bg | var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} ) | ||
Description
Background color of the panelbar header. | |||
$kendo-panelbar-header-text | var( --kendo-panelbar-text, #{$kendo-panelbar-text} ) | ||
Description
Text color of the panelbar header. | |||
$kendo-panelbar-header-border | inherit | ||
Description
Border color of the panelbar header. | |||
$kendo-panelbar-header-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the panelbar header when hovered. | |||
$kendo-panelbar-header-hover-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
Text color of the panelbar header when hovered. | |||
$kendo-panelbar-header-hover-border | inherit | ||
Description
Border color of the panelbar header when hovered. | |||
$kendo-panelbar-header-focus-bg | inherit | ||
Description
Background color of the panelbar header when focused. | |||
$kendo-panelbar-header-focus-text | inherit | ||
Description
Text color of the panelbar header when focused. | |||
$kendo-panelbar-header-focus-border | inherit | ||
Description
Border color of the panelbar header when focused. | |||
$kendo-panelbar-header-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Shadow of the panelbar header when focused. | |||
$kendo-panelbar-header-hover-focus-bg | $kendo-panelbar-header-hover-bg | ||
Description
Background color of the panelbar header when focused and hovered. | |||
$kendo-panelbar-header-hover-focus-text | $kendo-panelbar-header-hover-text | ||
Description
Text color of the panelbar header when focused and hovered. | |||
$kendo-panelbar-header-hover-focus-border | null | ||
Description
Border color of the panelbar header when focused and hovered. | |||
$kendo-panelbar-header-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the panelbar header when selected. | |||
$kendo-panelbar-header-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Text color of the panelbar header when selected. | |||
$kendo-panelbar-header-selected-border | inherit | ||
Description
Border color of the panelbar header when selected. | |||
$kendo-panelbar-selected-marker | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Color of the marker of the panelbar header when selected. | |||
$kendo-panelbar-header-selected-hover-bg | $kendo-panelbar-header-selected-bg | ||
Description
Background color of the panelbar header when selected and hovered. | |||
$kendo-panelbar-header-selected-hover-text | $kendo-panelbar-header-hover-text | ||
Description
Text color of the panelbar header when selected and hovered. | |||
$kendo-panelbar-header-selected-hover-border | inherit | ||
Description
Border color of the panelbar header when selected and hovered. | |||
$kendo-panelbar-header-selected-focus-bg | $kendo-panelbar-header-selected-bg | ||
Description
Background color of the panelbar header when selected and focused. | |||
$kendo-panelbar-header-selected-focus-text | $kendo-panelbar-header-selected-text | ||
Description
Text color of the panelbar header when selected and focused. | |||
$kendo-panelbar-header-selected-focus-border | inherit | ||
Description
Border color of the panelbar header when selected and focused. | |||
$kendo-panelbar-header-selected-hover-focus-bg | $kendo-panelbar-header-selected-hover-bg | ||
Description
Background color of the panelbar header when selected, focused and hovered. | |||
$kendo-panelbar-header-selected-hover-focus-text | $kendo-panelbar-header-selected-hover-text | ||
Description
Text color of the panelbar header when selected, focused and hovered. | |||
$kendo-panelbar-header-selected-hover-focus-border | inherit | ||
Description
Border color of the panelbar header when selected, focused and hovered. | |||
$kendo-panelbar-header-expanded-bg | inherit | ||
Description
Background color of the panelbar header when expanded. | |||
$kendo-panelbar-header-expanded-text | inherit | ||
Description
Text color of the panelbar header when expanded. | |||
$kendo-panelbar-header-expanded-border | inherit | ||
Description
Border color of the panelbar header when expanded. | |||
$kendo-panelbar-item-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the panelbar item when hovered. | |||
$kendo-panelbar-item-hover-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
Text color of the panelbar item when hovered. | |||
$kendo-panelbar-item-hover-border | inherit | ||
Description
Border color of the panelbar item when hovered. | |||
$kendo-panelbar-item-focus-bg | inherit | ||
Description
Background color of the panelbar item when focused. | |||
$kendo-panelbar-item-focus-text | inherit | ||
Description
Text color of the panelbar item when focused. | |||
$kendo-panelbar-item-focus-border | inherit | ||
Description
Border color of the panelbar item when focused. | |||
$kendo-panelbar-item-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Box shadow of the panelbar item when focused. | |||
$kendo-panelbar-item-hover-focus-bg | $kendo-panelbar-item-hover-bg | ||
Description
Background color of the panelbar item when focused and hovered. | |||
$kendo-panelbar-item-hover-focus-text | $kendo-panelbar-item-hover-text | ||
Description
Text color of the panelbar item when focused and hovered. | |||
$kendo-panelbar-item-hover-focus-border | inherit | ||
Description
Border color of the panelbar item when focused and hovered. | |||
$kendo-panelbar-item-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the panelbar item when selected. | |||
$kendo-panelbar-item-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) | ||
Description
Text color of the panelbar item when selected. | |||
$kendo-panelbar-item-selected-border | inherit | ||
Description
Border color of the panelbar item when selected. | |||
$kendo-panelbar-item-selected-hover-bg | $kendo-panelbar-item-selected-bg | ||
Description
Background color of the panelbar item when selected and hovered. | |||
$kendo-panelbar-item-selected-hover-text | $kendo-panelbar-item-hover-text | ||
Description
Text color of the panelbar item when selected and hovered. | |||
$kendo-panelbar-item-selected-hover-border | inherit | ||
Description
Border color of the panelbar item when selected and hovered. | |||
$kendo-panelbar-item-selected-focus-bg | $kendo-panelbar-item-selected-bg | ||
Description
Background color of the panelbar item when selected and focused. | |||
$kendo-panelbar-item-selected-focus-text | $kendo-panelbar-item-selected-text | ||
Description
Text color of the panelbar item when selected and focused. | |||
$kendo-panelbar-item-selected-focus-border | inherit | ||
Description
Border color of the panelbar item when selected and focused. | |||
$kendo-panelbar-item-selected-hover-focus-bg | $kendo-panelbar-item-selected-hover-bg | ||
Description
Background color of the panelbar item when selected, focused and hovered. | |||
$kendo-panelbar-item-selected-hover-focus-text | $kendo-panelbar-item-selected-hover-text | ||
Description
Text color of the panelbar item when selected, focused and hovered. | |||
$kendo-panelbar-item-selected-hover-focus-border | inherit | ||
Description
Border color of the panelbar item when selected, focused and hovered. |
Pdf-viewer
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-pdf-viewer-border-width | 1px | ||
Description
The border width of the PDFViewer. | |||
$kendo-pdf-viewer-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the PDFViewer. | |||
$kendo-pdf-viewer-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the PDFViewer. | |||
$kendo-pdf-viewer-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the PDFViewer. | |||
$kendo-pdf-viewer-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the PDFViewer. | |||
$kendo-pdf-viewer-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the PDFViewer. | |||
$kendo-pdf-viewer-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the PDFViewer. | |||
$kendo-pdf-viewer-canvas-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the PDFViewer canvas. | |||
$kendo-pdf-viewer-canvas-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the PDF viewer canvas. | |||
$kendo-pdf-viewer-canvas-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the PDFViewer canvas. | |||
$kendo-pdf-viewer-page-spacing | map.get( $kendo-spacing, 7.5 ) | ||
Description
The spacing of the PDFViewer page. | |||
$kendo-pdf-viewer-page-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the PDFViewer page. | |||
$kendo-pdf-viewer-page-text | var( --kendo-component-text, inherit )!default | ||
Description
The text color of the PDFViewer page. | |||
$kendo-pdf-viewer-page-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the PDFViewer page. | |||
$kendo-pdf-viewer-page-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the PDFViewer page. | |||
$kendo-pdf-viewer-search-panel-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-padding-y | $kendo-pdf-viewer-search-panel-padding-x | ||
Description
The vertical padding of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-border-width | 1px | ||
Description
The border width of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-border | var( --kendo-component-border, inherit )!default | ||
Description
The border color of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-shadow | none | ||
Description
The shadow of the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-matches-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
The spacing of the matches container in the PDFViewer search panel. | |||
$kendo-pdf-viewer-search-panel-margin-y | calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 ) | ||
Description
The vertical margin of the PDFViewer search panel. | |||
$kendo-pdf-viewer-selection-line-height | var( --kendo-line-height-sm, normal ) | ||
Description
The line height of the PDFViewer selection. | |||
$kendo-pdf-viewer-search-highlight-bg | var( --kendo-component-text, inherit ) | ||
Description
The background color of the PDFViewer highlight. | |||
$kendo-pdf-viewer-search-highlight-mark-bg | yellow | ||
Description
The background color of the PDFViewer highlight mark. | |||
$kendo-pdf-viewer-icon-text | $kendo-dropzone-icon-text | ||
Description
The text color of the PDFViewer icon. |
Pivotgrid
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-pivotgrid-spacer | map.get( $kendo-spacing, 3 ) | ||
Description
Spacer of the PivotGrid. | |||
$kendo-pivotgrid-padding-x | 0px | ||
Description
Horizontal padding of the PivotGrid. | |||
$kendo-pivotgrid-padding-y | 0px | ||
Description
Vertical of the PivotGrid. | |||
$kendo-pivotgrid-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the PivotGrid. | |||
$kendo-pivotgrid-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the PivotGrid. | |||
$kendo-pivotgrid-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the PivotGrid. | |||
$kendo-pivotgrid-border-width | 1px | ||
Description
Border width of the PivotGrid. | |||
$kendo-pivotgrid-icon-spacing | map.get( $kendo-spacing, 1 ) | ||
Description
Icon spacing of the PivotGrid. | |||
$kendo-pivotgrid-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the PivotGrid. | |||
$kendo-pivotgrid-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the PivotGrid. | |||
$kendo-pivotgrid-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the PivotGrid. | |||
$kendo-pivotgrid-alt-border | $kendo-pivotgrid-border | ||
Description
Alt border color of the PivotGrid. | |||
$kendo-pivotgrid-row-header-width | 300px | ||
Description
Default width of the PivotGrid row header. | |||
$kendo-pivotgrid-column-header-height | 75px | ||
Description
Default height of the PivotGrid column header. | |||
$kendo-pivotgrid-cell-padding-x | $kendo-table-cell-padding-x | ||
Description
Horizontal padding of the PivotGrid cell. | |||
$kendo-pivotgrid-cell-padding-y | $kendo-table-cell-padding-y | ||
Description
Vertical padding of the PivotGrid cell. | |||
$kendo-pivotgrid-cell-border-width | 1px | ||
Description
Border width of the PivotGrid cell. | |||
$kendo-pivotgrid-headers-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the PivotGrid header. | |||
$kendo-pivotgrid-headers-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
Text color of the PivotGrid header. | |||
$kendo-pivotgrid-headers-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the PivotGrid header. | |||
$kendo-pivotgrid-total-bg | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) | ||
Description
Background color of the PivotGrid total cells. | |||
$kendo-pivotgrid-total-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the PivotGrid total cells. | |||
$kendo-pivotgrid-total-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the PivotGrid total cells. | |||
$kendo-pivotgrid-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Hover background color of the PivotGrid. | |||
$kendo-pivotgrid-hover-text | inherit | ||
Description
Hover text color of the PivotGrid. | |||
$kendo-pivotgrid-hover-border | inherit | ||
Description
Hover border color of the PivotGrid. | |||
$kendo-pivotgrid-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Selected background color of the PivotGrid. | |||
$kendo-pivotgrid-selected-text | inherit | ||
Description
Selected text color of the PivotGrid. | |||
$kendo-pivotgrid-selected-border | inherit | ||
Description
Selected border color of the PivotGrid. | |||
$kendo-pivotgrid-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Focus shadow of the PivotGrid. | |||
$kendo-pivotgrid-configurator-padding-x | 0px | ||
Description
Horizontal padding of the PivotGrid configurator. | |||
$kendo-pivotgrid-configurator-padding-y | 0px | ||
Description
Vertical padding of the PivotGrid configurator. | |||
$kendo-pivotgrid-configurator-border-width | 1px | ||
Description
Border width of the PivotGrid configurator. | |||
$kendo-pivotgrid-configurator-header-padding-x | $kendo-pivotgrid-spacer | ||
Description
Horizontal padding of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-header-padding-y | $kendo-pivotgrid-configurator-header-padding-x | ||
Description
Vertical padding of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-header-font-size | calc( var( --kendo-font-size-xl, 2rem ) * .9 ) | ||
Description
Font size of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-header-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
Font weight of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-content-padding-x | $kendo-pivotgrid-spacer | ||
Description
Horizontal padding of the PivotGrid configurator content. | |||
$kendo-pivotgrid-configurator-content-padding-y | 0px | ||
Description
Vertical padding of the PivotGrid configurator content. | |||
$kendo-pivotgrid-configurator-fields-margin-x | 0px | ||
Description
Horizontal margin of the PivotGrid configurator fields. | |||
$kendo-pivotgrid-configurator-fields-margin-y | math.div( $kendo-pivotgrid-spacer, 2 ) | ||
Description
Vertical margin of the PivotGrid configurator fields. | |||
$kendo-pivotgrid-configurator-fields-gap | map.get( $kendo-spacing, 2) | ||
Description
Spacing of the PivotGrid configurator fields. | |||
$kendo-pivotgrid-configurator-vertical-width | 320px | ||
Description
Default width of the PivotGrid vertical configurator. | |||
$kendo-pivotgrid-configurator-horizontal-height | 420px | ||
Description
Default height of the PivotGrid horizontal configurator. | |||
$kendo-pivotgrid-configurator-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the PivotGrid configurator. | |||
$kendo-pivotgrid-configurator-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
Text color of the PivotGrid configurator. | |||
$kendo-pivotgrid-configurator-border | var( --kendo-component-border, inherit )!default | ||
Description
Border color of the PivotGrid configurator. | |||
$kendo-pivotgrid-configurator-header-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-header-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-header-border | inherit | ||
Description
Border color of the PivotGrid configurator header. | |||
$kendo-pivotgrid-configurator-button-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
Horizontal padding of the PivotGrid configurator button. | |||
$kendo-pivotgrid-configurator-button-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the PivotGrid configurator button. | |||
$kendo-pivotgrid-configurator-button-border-width | 1px | ||
Description
Border width of the PivotGrid configurator button. | |||
$kendo-pivotgrid-configurator-button-size | calc( #{$kendo-pivotgrid-line-height} * 1em + #{$kendo-pivotgrid-configurator-button-padding-y * 2} + #{$kendo-pivotgrid-configurator-button-border-width * 2} ) | ||
Description
Size of the PivotGrid configurator button. | |||
$kendo-pivotgrid-configurator-button-icon-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Icon spacing of the PivotGrid configurator button. | |||
$kendo-pivotgrid-calculated-field-padding-x | $kendo-pivotgrid-spacer | ||
Description
Horizontal padding of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-padding-y | $kendo-pivotgrid-spacer | ||
Description
Vertical padding of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-border-width | 1px | ||
Description
Border width of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-gap | $kendo-pivotgrid-spacer | ||
Description
Spacing of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the PivotGrid calculated field. | |||
$kendo-pivotgrid-calculated-field-header-bg | inherit | ||
Description
Background color of the PivotGrid calculated field header. | |||
$kendo-pivotgrid-calculated-field-header-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the PivotGrid calculated field header. | |||
$kendo-pivotgrid-calculated-field-header-border | inherit | ||
Description
Border color of the PivotGrid calculated field header. | |||
$kendo-pivotgrid-treeview-padding-x | math.div( $kendo-pivotgrid-spacer, 2 ) | ||
Description
Horizontal padding of the PivotGrid treeview. | |||
$kendo-pivotgrid-treeview-padding-y | 0px | ||
Description
Vertical padding of the PivotGrid treeview. |
Popover
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-popover-border-width | $kendo-dialog-border-width | ||
Description
The width of the border around the Popover. | |||
$kendo-popover-border-style | solid | ||
Description
The style of the border around the Popover. | |||
$kendo-popover-border-radius | $kendo-window-border-radius | ||
Description
The radius of the border around the Popover. | |||
$kendo-popover-font-family | $kendo-window-font-family | ||
Description
The font family of the Popover. | |||
$kendo-popover-font-size | $kendo-window-font-size | ||
Description
The font size of the Popover. | |||
$kendo-popover-line-height | $kendo-window-line-height | ||
Description
The line height of the Popover. | |||
$kendo-popover-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Popover. | |||
$kendo-popover-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Popover. | |||
$kendo-popover-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Popover. | |||
$kendo-popover-shadow | var( --kendo-box-shadow-depth-6, none ) | ||
Description
The box shadow of the Popover. | |||
$kendo-popover-header-padding-x | $kendo-dialog-titlebar-padding-x | ||
Description
The horizontal padding of the Popover header. | |||
$kendo-popover-header-padding-y | $kendo-dialog-titlebar-padding-y | ||
Description
The vertical padding of the Popover header. | |||
$kendo-popover-header-border-width | $kendo-dialog-titlebar-border-width | ||
Description
The border width of the Popover header. | |||
$kendo-popover-header-border-style | $kendo-popover-border-style | ||
Description
The border style of the Popover header. | |||
$kendo-popover-header-text | $kendo-dialog-titlebar-text | ||
Description
The text color of the Popover header. | |||
$kendo-popover-header-bg | $kendo-dialog-titlebar-bg | ||
Description
The background color of the Popover header. | |||
$kendo-popover-header-border | $kendo-dialog-titlebar-border | ||
Description
The border color of the Popover header. | |||
$kendo-popover-body-padding-x | $kendo-window-inner-padding-x | ||
Description
The horizontal padding of the Popover body. | |||
$kendo-popover-body-padding-y | $kendo-window-inner-padding-y | ||
Description
The vertical padding of the Popover body. | |||
$kendo-popover-actions-border-width | 0 | ||
Description
The border width of the Popover actions. | |||
$kendo-popover-actions-padding-x | $kendo-popover-body-padding-x | ||
Description
The horizontal padding of the Popover actions. | |||
$kendo-popover-actions-padding-y | $kendo-popover-body-padding-y | ||
Description
The vertical padding of the Popover actions. | |||
$kendo-popover-actions-gap | map.get( $kendo-spacing, 3 ) | ||
Description
The spacing between the Popover actions. | |||
$kendo-popover-callout-width | map.get( $kendo-spacing, 5 ) | ||
Description
The width of the Popover callout. | |||
$kendo-popover-callout-height | $kendo-popover-callout-width | ||
Description
The height of the Popover callout. | |||
$kendo-popover-callout-border-width | $kendo-popover-border-width | ||
Description
The border width of the Popover callout. | |||
$kendo-popover-callout-border-style | $kendo-popover-border-style | ||
Description
The border style of the Popover callout. |
Popup
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-popup-padding-x | 0 | ||
Description
Horizontal padding of the popup. | |||
$kendo-popup-padding-y | 0 | ||
Description
Vertical padding of the popup. | |||
$kendo-popup-border-width | 0 | ||
Description
Width of the border around the popup. | |||
$kendo-popup-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the popup. | |||
$kendo-popup-font-size | var( --kendo-font-size, inherit) | ||
Description
Font size of the popup. | |||
$kendo-popup-line-height | var( --kendo-line-height, normal) | ||
Description
Line height of the popup. | |||
$kendo-popup-content-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the content inside the popup. | |||
$kendo-popup-content-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the content inside the popup. | |||
$kendo-popup-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the popup. | |||
$kendo-popup-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the popup. | |||
$kendo-popup-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the popup. | |||
$kendo-popup-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
Box shadow around the popup. |
Progressbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-progressbar-height | 4px | ||
Description
The height of the ProgressBar. | |||
$kendo-progressbar-horizontal-width | 100% | ||
Description
The horizontal width of the ProgressBar. | |||
$kendo-progressbar-animation-timing | 1s linear infinite | ||
Description
The animation timing of the ProgressBar. | |||
$kendo-progressbar-border-width | 0px | ||
Description
The width of the border around the ProgressBar. | |||
$kendo-progressbar-border-radius | var( --kendo-border-radius-sm, initial ) | ||
Description
The border radius of the ProgressBar. | |||
$kendo-progressbar-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ProgressBar. | |||
$kendo-progressbar-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the ProgressBar. | |||
$kendo-progressbar-line-height | var( --kendo-line-height, inherit ) | ||
Description
The line height of the ProgressBar. | |||
$kendo-progressbar-padding-x | 0 | ||
Description
The horizontal padding of the ProgressBar. | |||
$kendo-progressbar-padding-y | 0 | ||
Description
The vertical padding of the ProgressBar. | |||
$kendo-progressbar-bg | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) | ||
Description
The background color of the ProgressBar. | |||
$kendo-progressbar-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the ProgressBar. | |||
$kendo-progressbar-border | $kendo-progressbar-bg | ||
Description
The border color of the ProgressBar. | |||
$kendo-progressbar-gradient | null | ||
Description
The background gradient of the ProgressBar. | |||
$kendo-progressbar-value-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The progress background color of the ProgressBar. | |||
$kendo-progressbar-value-text | var( --kendo-component-text, initial ) | ||
Description
The progress text color of the ProgressBar. | |||
$kendo-progressbar-value-border | $kendo-progressbar-value-bg | ||
Description
The progress border color of the ProgressBar. | |||
$kendo-progressbar-value-gradient | null | ||
Description
The progress background gradient of the ProgressBar. | |||
$kendo-progressbar-offset-y | map.get( $kendo-spacing, 2 ) | ||
Description
The progress status offset of the ProgressBar. | |||
$kendo-progressbar-vertical-status-offset | calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) | ||
Description
The progress status offset of the vertical ProgressBar. | |||
$kendo-progressbar-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the disabled ProgressBar. | |||
$kendo-progressbar-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
The text color of the disabled ProgressBar. | |||
$kendo-progressbar-disabled-border | $kendo-progressbar-disabled-bg | ||
Description
The border color of the disabled ProgressBar. | |||
$kendo-progressbar-value-disabled-bg | if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 )) | ||
Description
The progress background color of the disabled ProgressBar. | |||
$kendo-progressbar-indeterminate-bg | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) | ||
Description
The background color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-text | $kendo-progressbar-text | ||
Description
The text color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-border | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-gradient-horizontal | linear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%) | ||
Description
The background gradient of the horizontal indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-gradient-vertical | linear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%) | ||
Description
The background gradient of the vertical indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-animation-horizontal | 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal | ||
Description
The gradient size of the horizontal indeterminate ProgressBar. | |||
$kendo-progressbar-indeterminate-animation-vertical | 3s ease 0s infinite running progressbar-indeterminate-animation-vertical | ||
Description
The gradient size of the vertical indeterminate ProgressBar. | |||
$kendo-progressbar-chunk-border | var( --kendo-body-bg, initial ) | ||
Description
The border color of the chunk ProgressBar. | |||
$kendo-circular-progressbar-arc-stroke | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The arc stroke color of the circular ProgressBar. | |||
$kendo-circular-progressbar-scale-stroke | $kendo-progressbar-bg | ||
Description
The scale stroke background color of the circular ProgressBar. |
Prompt
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-prompt-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Prompt. | |||
$kendo-prompt-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Prompt. | |||
$kendo-prompt-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Prompt. | |||
$kendo-prompt-header-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Prompt header. | |||
$kendo-prompt-header-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Prompt header. | |||
$kendo-prompt-header-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Prompt header. | |||
$kendo-prompt-content-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the Prompt content. | |||
$kendo-prompt-content-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the Prompt content. | |||
$kendo-prompt-content-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The spacing between the items of the Prompt content. | |||
$kendo-prompt-content-text | k-get-theme-color-var( neutral-190 ) | ||
Description
The text color of the Prompt content. | |||
$kendo-prompt-content-bg | k-get-theme-color-var( neutral-10 ) | ||
Description
The background color of the Prompt content. | |||
$kendo-prompt-content-border | var( --kendo-component-border, initial ) | ||
Description
The text border of the Prompt content. | |||
$kendo-prompt-expander-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the items of the Prompt content expander. | |||
$kendo-prompt-suggestion-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Prompt suggestion container. | |||
$kendo-prompt-suggestion-shadow | k-elevation(1) | ||
Description
The elevation of the Prompt suggestion container. |
Radio
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-radio-border-radius | 50% | ||
Description
The border radius of the RadioButton. | |||
$kendo-radio-border-width | 1px | ||
Description
The border width of the RadioButton. | |||
$kendo-radio-sizes | (
sm: (
size: map.get( $kendo-spacing, 4 ),
glyph-size: map.get( $kendo-spacing, 3.5 ),
indicator-size: map.get( $kendo-spacing, 2 ),
ripple-size: 300%
),
md: (
size: map.get( $kendo-spacing, 5 ),
glyph-size: map.get( $kendo-spacing, 4.5 ),
indicator-size: map.get( $kendo-spacing, 2.5 ),
ripple-size: 300%
),
lg: (
size: map.get( $kendo-spacing, 6 ),
glyph-size: map.get( $kendo-spacing, 5.5 ),
indicator-size: map.get( $kendo-spacing, 3 ),
ripple-size: 300%
)
) | ||
Description
The map with the different RadioButton sizes. | |||
$kendo-radio-bg | $kendo-component-bg | ||
Description
The background color of the RadioButton. | |||
$kendo-radio-text | transparent | ||
Description
The color of the RadioButton. | |||
$kendo-radio-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the RadioButton. | |||
$kendo-radio-hover-bg | $kendo-radio-bg | ||
Description
The background color of the hovered RadioButton. | |||
$kendo-radio-hover-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 )) | ||
Description
The color of the hovered RadioButton. | |||
$kendo-radio-hover-border | $kendo-radio-border | ||
Description
The border color of the hovered RadioButton. | |||
$kendo-radio-checked-bg | $kendo-radio-bg | ||
Description
The background color of the checked RadioButton. | |||
$kendo-radio-checked-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The color of the checked RadioButton. | |||
$kendo-radio-checked-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the checked RadioButton. | |||
$kendo-radio-hover-checked-bg | $kendo-radio-bg | ||
Description
The background color of the checked and hovered RadioButton. | |||
$kendo-radio-hover-checked-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The color of the checked and hovered RadioButton. | |||
$kendo-radio-hover-checked-border | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The border color of the checked and hovered RadioButton. | |||
$kendo-radio-focus-border | null | ||
Description
The border color of the focused RadioButton. | |||
$kendo-radio-focus-shadow | null | ||
Description
The box shadow of the focused RadioButton. | |||
$kendo-radio-focus-outline | 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The outline of the focused RadioButton. | |||
$kendo-radio-focus-outline-offset | 2px | ||
Description
The outline offset of the focused RadioButton. | |||
$kendo-radio-disabled-bg | $kendo-radio-bg | ||
Description
The background color of the disabled RadioButton. | |||
$kendo-radio-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The color of the disabled RadioButton. | |||
$kendo-radio-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the disabled RadioButton. | |||
$kendo-radio-disabled-checked-bg | $kendo-radio-disabled-bg | ||
Description
The background color of the disabled and checked RadioButton. | |||
$kendo-radio-disabled-checked-text | $kendo-radio-disabled-text | ||
Description
The color of the disabled and checked RadioButton. | |||
$kendo-radio-disabled-checked-border | $kendo-radio-disabled-border | ||
Description
The border color of the disabled and checked RadioButton. | |||
$kendo-radio-invalid-bg | $kendo-radio-bg | ||
Description
The background color of the invalid RadioButton. | |||
$kendo-radio-invalid-text | $kendo-invalid-text | ||
Description
The color of the invalid RadioButton. | |||
$kendo-radio-invalid-border | $kendo-invalid-border | ||
Description
The border color of the invalid RadioButton. | |||
$kendo-radio-indicator-type | pseudo | ||
Description
The type of the RadioButton indicator. | |||
$kendo-radio-indicator-border-radius | 50% | ||
Description
The border radius of the RadioButton indicator. | |||
$kendo-radio-glyph-font-family | "WebComponentsIcons", monospace | ||
Description
The glyph font family of the RadioButton indicator. | |||
$kendo-radio-checked-glyph | "\e308" | ||
Description
The glyph of the RadioButton indicator. | |||
$kendo-radio-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the checked RadioButton indicator. | |||
$kendo-radio-disabled-checked-image | null | ||
Description
The image of the disabled and checked RadioButton indicator. | |||
$kendo-radio-label-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the RadioButton inside of a label. | |||
$kendo-radio-list-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal list item margin of the RadioButton. | |||
$kendo-radio-list-item-padding-x | 0px | ||
Description
The horizontal list item padding of the RadioButton. | |||
$kendo-radio-list-item-padding-y | $kendo-list-md-item-padding-y | ||
Description
The vertical list item padding of the RadioButton. | |||
$kendo-radio-list-item-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The gap between the list items of the RadioButton. | |||
$kendo-radio-ripple-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the RadioButton ripple. | |||
$kendo-radio-ripple-opacity | .25 | ||
Description
The opacity of the RadioButton ripple. |
Rating
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-rating-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Rating. | |||
$kendo-rating-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Rating. | |||
$kendo-rating-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Rating. | |||
$kendo-rating-spacing | map.get( $kendo-spacing, 1 ) | ||
Description
The content spacing of the Rating. | |||
$kendo-rating-item-padding-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
The horizontal padding of the Rating item. | |||
$kendo-rating-item-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Rating item. | |||
$kendo-rating-item-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Rating item. | |||
$kendo-rating-item-hover-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the hovered Rating item. | |||
$kendo-rating-item-focus-text | $kendo-rating-item-text | ||
Description
The text color of the focused Rating item. | |||
$kendo-rating-item-focus-outline-width | 1px | ||
Description
The outline width of the focused Rating item. | |||
$kendo-rating-item-focus-outline-style | solid | ||
Description
The outline style of the focused Rating item. | |||
$kendo-rating-item-focus-outline | currentColor | ||
Description
The outline color of the focused Rating item. | |||
$kendo-rating-item-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the selected Rating item. | |||
$kendo-rating-item-selected-hover-text | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) | ||
Description
The text color of the selected and hovered Rating item. |
Scheduler
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-scheduler-border-width | 1px | ||
Description
Width of the border around the scheduler. | |||
$kendo-scheduler-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the scheduler. | |||
$kendo-scheduler-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the scheduler. | |||
$kendo-scheduler-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the scheduler. | |||
$kendo-scheduler-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the scheduler. | |||
$kendo-scheduler-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the scheduler. | |||
$kendo-scheduler-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the scheduler. | |||
$kendo-scheduler-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) | ||
Description
Background color of the selected row in scheduler. | |||
$kendo-scheduler-selected-text | $kendo-scheduler-text | ||
Description
Text color of the selected row in scheduler. | |||
$kendo-scheduler-selected-border | $kendo-scheduler-border | ||
Description
Border color of the selected row in scheduler. | |||
$kendo-scheduler-toolbar-bg | var( --kendo-toolbar-bg, $kendo-toolbar-bg ) | ||
Description
Background color of the scheduler toolbar. | |||
$kendo-scheduler-toolbar-text | var( --kendo-toolbar-text, $kendo-toolbar-text ) | ||
Description
Text color of the scheduler toolbar. | |||
$kendo-scheduler-toolbar-border | var( --kendo-toolbar-border, $kendo-toolbar-border ) | ||
Description
Border color of the scheduler toolbar. | |||
$kendo-scheduler-toolbar-gradient | null | ||
Description
Gradient of the scheduler toolbar. | |||
$kendo-scheduler-footer-bg | var( --kendo-toolbar-bg, $kendo-toolbar-bg ) | ||
Description
Background color of the scheduler footer. | |||
$kendo-scheduler-footer-text | var( --kendo-toolbar-text, $kendo-toolbar-text ) | ||
Description
Text color of the scheduler footer. | |||
$kendo-scheduler-footer-border | var( --kendo-toolbar-border, $kendo-toolbar-border ) | ||
Description
Border color of the scheduler footer. | |||
$kendo-scheduler-footer-gradient | null | ||
Description
Gradient of the scheduler footer. | |||
$kendo-scheduler-event-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the scheduler event. | |||
$kendo-scheduler-event-line-height | $kendo-scheduler-line-height | ||
Description
Line height of the scheduler event. | |||
$kendo-scheduler-event-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the scheduler event. | |||
$kendo-scheduler-event-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
Vertical padding of the scheduler event. | |||
$kendo-scheduler-event-min-height | calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) | ||
Description
Minumum height of the scheduler event. | |||
$kendo-scheduler-event-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background color of the scheduler event. | |||
$kendo-scheduler-event-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the scheduler event. | |||
$kendo-scheduler-event-border | $kendo-scheduler-event-bg | ||
Description
Border color of the scheduler event. | |||
$kendo-scheduler-event-gradient | null | ||
Description
Gradient of the scheduler event. | |||
$kendo-scheduler-event-shadow | null | ||
Description
Shadow of the scheduler event. | |||
$kendo-scheduler-event-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the hovered scheduler event. | |||
$kendo-scheduler-event-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Text color of the hovered scheduler event. | |||
$kendo-scheduler-event-hover-border | var( --kendo-hover-border, inherit ) | ||
Description
Boeswe color of the hovered scheduler event. | |||
$kendo-scheduler-event-hover-gradient | null | ||
Description
Gradient of the hovered scheduler event. | |||
$kendo-scheduler-event-hover-shadow | null | ||
Description
Shadow of the hovered scheduler event. | |||
$kendo-scheduler-event-selected-bg | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) | ||
Description
Background color of the selected scheduler event. | |||
$kendo-scheduler-event-selected-text | $kendo-scheduler-event-text | ||
Description
Text color of the selected scheduler event. | |||
$kendo-scheduler-event-selected-border | $kendo-scheduler-event-bg | ||
Description
Border color of the selected scheduler event. | |||
$kendo-scheduler-event-selected-gradient | null | ||
Description
Gradient of the selected scheduler event. | |||
$kendo-scheduler-event-selected-shadow | none | ||
Description
Shadow of the selected scheduler event. | |||
$kendo-scheduler-event-ongoing-shadow | inset 0px 0px 0px 1px #ff0000 | ||
Description
Shadow of the ongoing scheduler event. | |||
$kendo-scheduler-cell-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the scheduler cell. | |||
$kendo-scheduler-cell-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the scheduler cell. | |||
$kendo-scheduler-cell-height | $kendo-line-height-em | ||
Description
Height of the scheduler cell. | |||
$kendo-scheduler-datecolumn-width | 12em | ||
Description
Width of the scheduler date column. | |||
$kendo-scheduler-timecolumn-width | 11em | ||
Description
Width of the scheduler time column. | |||
$kendo-scheduler-nonwork-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the non-working hours in the scheduler. | |||
$kendo-scheduler-nonwork-text | null | ||
Description
Text color of the non-working hours in the scheduler. | |||
$kendo-scheduler-weekend-bg | null | ||
Description
Background color of the weekends in the scheduler. | |||
$kendo-scheduler-weekend-text | null | ||
Description
Text color of the weekends in the scheduler. | |||
$kendo-scheduler-othermonth-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the other months in the scheduler. | |||
$kendo-scheduler-othermonth-text | null | ||
Description
Text color of the other months in the scheduler. | |||
$kendo-scheduler-yearview-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the scheduler year view. | |||
$kendo-scheduler-yearview-padding-y | $kendo-scheduler-yearview-padding-x | ||
Description
Vertical padding of the scheduler year view. | |||
$kendo-scheduler-yearview-calendar-gap | map.get( $kendo-spacing, 3 ) | ||
Description
Spacing between the calendars in the scheduler year view. | |||
$kendo-scheduler-yearview-indicator-size | 3px | ||
Description
Days with events indicator size in the scheduler year view. | |||
$kendo-scheduler-yearview-indicator-calc-offset-top | calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) ) | ||
Description
Top position of the days with events indicator in the scheduler year view. | |||
$kendo-scheduler-yearview-indicator-calc-offset-left | calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) ) | ||
Description
Left position of the days with events indicator in the scheduler year view. | |||
$kendo-scheduler-yearview-indicator-border-radius | 50% | ||
Description
Border radius of the days with events indicator in the scheduler year view. | |||
$kendo-scheduler-yearview-indicator-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background color of the days with events indicator in the scheduler year view. | |||
$kendo-scheduler-yearview-indicator-selected-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Background color of the selected days with events indicator in the scheduler year view. | |||
$kendo-scheduler-tooltip-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-padding-y | $kendo-scheduler-tooltip-padding-x | ||
Description
Vertical padding of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-border-width | 0 | ||
Description
Width of the border of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Background color of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Text color of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-border | null | ||
Description
Border color of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-shadow | k-elevation(5) | ||
Description
Shadow of the scheduler tooltip. | |||
$kendo-scheduler-tooltip-title-margin-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical spacing of the scheduler tooltip title. | |||
$kendo-scheduler-tooltip-month-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the month inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-day-font-size | calc( $kendo-scheduler-tooltip-month-font-size * 2 ) | ||
Description
Font size of the day inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-events-max-height | 250px | ||
Description
Max height of the events inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-events-gap | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the events inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-event-padding-x | $kendo-scheduler-event-padding-x | ||
Description
Horizontal padding of the events inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-event-padding-y | $kendo-scheduler-event-padding-y | ||
Description
Vertical padding of the events inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-event-border-radius | $kendo-scheduler-event-border-radius | ||
Description
Border radius of the events inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-event-gap | map.get( $kendo-spacing, 0.5 ) | ||
Description
Spacing between the events items inside the scheduler tooltip. | |||
$kendo-scheduler-tooltip-callout-color | $kendo-scheduler-tooltip-bg | ||
Description
Color of the scheduler tooltip callout. | |||
$kendo-scheduler-resize-handle-width | 2em | ||
Description
Width of the scheduler resize handle. | |||
$kendo-scheduler-more-btn-height | 13px | ||
Description
Height of the scheduler more events button. | |||
$kendo-scheduler-marquee-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Color of the scheduler marquee. |
Scrollview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-scrollview-border-width | 0px | ||
Description
The width of the border around the ScrollView. | |||
$kendo-scrollview-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ScrollView. | |||
$kendo-scrollview-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ScrollView. | |||
$kendo-scrollview-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the ScrollView. | |||
$kendo-scrollview-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the ScrollView. | |||
$kendo-scrollview-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the ScrollView. | |||
$kendo-scrollview-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the ScrollView. | |||
$kendo-scrollview-pagebutton-size | 10px | ||
Description
The size of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-border | $kendo-scrollview-pagebutton-bg | ||
Description
The border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The primary background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-border | $kendo-scrollview-pagebutton-primary-bg | ||
Description
The primary border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-hover-shadow | 0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) | ||
Description
The hover box shadow of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-focus-shadow | 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The focus box shadow of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-hover-shadow | 0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) | ||
Description
The primary hover box shadow of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-focus-shadow | 0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The primary focus box shadow of the ScrollView page button. | |||
$kendo-scrollview-pager-offset | 0px | ||
Description
The offset of the ScrollView pager. | |||
$kendo-scrollview-pager-item-spacing | 20px | ||
Description
The spacing between the ScrollView pager items. | |||
$kendo-scrollview-pager-item-border-width | 0px | ||
Description
The border width of the ScrollView pager items. | |||
$kendo-scrollview-pager-height | calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) | ||
Description
The height of the ScrollView pager. | |||
$kendo-scrollview-navigation-color | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The color of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-arrow-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The box shadow of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-bg | transparent | ||
Description
The background color of the ScrollView navigation. | |||
$kendo-scrollview-navigation-focus-shadow | 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The focus box shadow of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-arrow-hover-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
The hover box shadow of the ScrollView navigation arrows. | |||
$kendo-scrollview-pager-light-bg | rgba( $kendo-color-white, .4 ) | ||
Description
The background color of the ScrollView pager in light mode. | |||
$kendo-scrollview-pager-dark-bg | rgba( $kendo-color-black, .4 ) | ||
Description
The background color of the ScrollView pager in dark mode. | |||
$kendo-scrollview-transition-duration | .3s | ||
Description
The duration of the ScrollView transition. | |||
$kendo-scrollview-transition-timing-function | ease-in-out | ||
Description
The timing function of the ScrollView transition. |
Searchbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-searchbox-icon-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Color of the searchbox icon. |
Signature
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-signature-width | 250px | ||
Description
The default width of the signature component. | |||
$kendo-signature-height | 84px | ||
Description
The default height of the signature component. | |||
$kendo-signature-maximized-width | 750px | ||
Description
The default width of the maximized signature component. | |||
$kendo-signature-maximized-height | 252px | ||
Description
The default height of the maximized signature component. | |||
$kendo-signature-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal paddings of the signature component. | |||
$kendo-signature-padding-y | $kendo-signature-padding-x | ||
Description
The vertical paddings of the signature component. | |||
$kendo-signature-disabled-opacity | .3 | ||
Description
The opacity of the disabled signature component. | |||
$kendo-signature-line-width | 1px | ||
Description
The bottom-border width of the row line of the signature component. | |||
$kendo-signature-line-style | dashed | ||
Description
The border style of the row line of the signature component. | |||
$kendo-signature-line-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 )) | ||
Description
The color of the row line of the signature component. | |||
$kendo-signature-line-disabled-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The color of the row line of the disabled signature component. | |||
$kendo-signature-line-size | calc( 100% - 2 * #{$kendo-signature-padding-x} ) | ||
Description
The width of the row line of the signature component. | |||
$kendo-signature-line-bottom-offset | 33% | ||
Description
The bottom offset of the row line of the signature component. | |||
$kendo-signature-sizes | (
sm: (
padding-x: $kendo-signature-sm-padding-x,
padding-y: $kendo-signature-sm-padding-y,
line-size: $kendo-signature-sm-line-size
),
md: (
padding-x: $kendo-signature-md-padding-x,
padding-y: $kendo-signature-md-padding-y,
line-size: $kendo-signature-md-line-size
),
lg: (
padding-x: $kendo-signature-lg-padding-x,
padding-y: $kendo-signature-lg-padding-y,
line-size: $kendo-signature-lg-line-size
)
) | ||
Description
The sizes map of the signature component. | |||
$kendo-signature-actions-gap | map.get( $kendo-spacing, 1 ) | ||
Description
The gap between individual action items of the signature component | |||
$kendo-signature-maximized-line-width | 3px | ||
Description
The bottom-border width of the row line of the maximized signature component. | |||
$kendo-signature-lg-min-height | 110px | ||
Description
The min-height of the large size signature component. |
Skeleton
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-skeleton-text-transform | scale( 1, .6 ) | ||
Description
The transform scale of the Skeleton text. | |||
$kendo-skeleton-text-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the Skeleton text. | |||
$kendo-skeleton-rect-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the rectangular Skeleton. | |||
$kendo-skeleton-circle-border-radius | 9999px | ||
Description
The border radius of the circular Skeleton. | |||
$kendo-skeleton-item-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) | ||
Description
The background color of the Skeleton item. | |||
$kendo-skeleton-wave-bg | if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the Skeleton wave animation. |
Slider
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-slider-size | 200px | ||
Description
The default size of the Slider. | |||
$kendo-slider-alt-size | 26px | ||
Description
The default size of the Slider's track wrap. | |||
$kendo-slider-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the Slider. | |||
$kendo-slider-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Slider. | |||
$kendo-slider-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Slider. | |||
$kendo-slider-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Slider. | |||
$kendo-slider-text | inherit | ||
Description
The text color of the Slider. | |||
$kendo-slider-track-size | map.get( $kendo-spacing, 1 ) | ||
Description
The size of the Slider track. | |||
$kendo-slider-track-border-radius | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border radius of the Slider track. | |||
$kendo-slider-track-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the Slider track. | |||
$kendo-slider-track-border | inherit | ||
Description
The border color of the Slider track. | |||
$kendo-slider-track-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the hovered Slider track. | |||
$kendo-slider-track-hover-border | inherit | ||
Description
The border color of the hovered Slider track. | |||
$kendo-slider-track-focus-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the focused Slider track. | |||
$kendo-slider-track-focus-border | inherit | ||
Description
The border color of the focused Slider track. | |||
$kendo-slider-selection-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Slider's track selection. | |||
$kendo-slider-thumb-size | 16px | ||
Description
The default size of the Slider thumb. | |||
$kendo-slider-thumb-border-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The default border width of the Slider thumb. | |||
$kendo-slider-thumb-border-radius | 999em | ||
Description
The border radius of the Slider thumb. | |||
$kendo-slider-thumb-active-scale | null | ||
Description
The transition scale of the active Slider thumb. | |||
$kendo-slider-thumb-active-size | null | ||
Description
The size of the active Slider thumb. | |||
$kendo-slider-thumb-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of the Slider thumb. | |||
$kendo-slider-thumb-text | inherit | ||
Description
The text color of the Slider thumb. | |||
$kendo-slider-thumb-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Slider thumb. | |||
$kendo-slider-thumb-gradient | transparent | ||
Description
The gradient of the Slider thumb. | |||
$kendo-slider-thumb-hover-bg | $kendo-slider-thumb-bg | ||
Description
The background color of the hovered Slider thumb. | |||
$kendo-slider-thumb-hover-text | inherit | ||
Description
The text color of the hovered Slider thumb. | |||
$kendo-slider-thumb-hover-border | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) | ||
Description
The border color of the hovered Slider thumb. | |||
$kendo-slider-thumb-hover-gradient | transparent | ||
Description
The gradient of the hovered Slider thumb. | |||
$kendo-slider-thumb-active-bg | $kendo-slider-thumb-hover-bg | ||
Description
The background color of the active Slider thumb. | |||
$kendo-slider-thumb-active-text | inherit | ||
Description
The text color of the active Slider thumb. | |||
$kendo-slider-thumb-active-border | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 )) | ||
Description
The border color of the active Slider thumb. | |||
$kendo-slider-thumb-active-gradient | transparent | ||
Description
The gradient of the active Slider thumb. | |||
$kendo-slider-thumb-focus-bg | $kendo-slider-thumb-hover-bg | ||
Description
The background color of the focused Slider thumb. | |||
$kendo-slider-thumb-focus-text | inherit | ||
Description
The text color of the focused Slider thumb. | |||
$kendo-slider-thumb-focus-border | $kendo-slider-thumb-active-border | ||
Description
The border color of the focused Slider thumb. | |||
$kendo-slider-thumb-focus-gradient | transparent | ||
Description
The gradient of the focused Slider thumb. | |||
$kendo-slider-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the disabled Slider. | |||
$kendo-slider-track-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the disabled Slider track. | |||
$kendo-slider-selection-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
The background color of the disabled Slider's track selection. | |||
$kendo-slider-thumb-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the disabled Slider thumb. | |||
$kendo-slider-transition-speed | .3s | ||
Description
The transition speed of the Slider. | |||
$kendo-slider-transition-function | ease-out | ||
Description
The transition function of the Slider. | |||
$kendo-slider-thumb-transition-speed | .4s | ||
Description
The transition speed of the Slider thumb. | |||
$kendo-slider-thumb-transition-function | cubic-bezier(.25, .8, .25, 1) | ||
Description
The transition function of the Slider thumb. |
Split-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-split-button-sm-arrow-padding-y | $kendo-button-sm-padding-y | ||
Description
The vertical padding of the small arrow Button. | |||
$kendo-split-button-md-arrow-padding-y | $kendo-button-md-padding-y | ||
Description
The vertical padding of the medium arrow Button. | |||
$kendo-split-button-lg-arrow-padding-y | $kendo-button-lg-padding-y | ||
Description
The vertical padding of the large arrow Button. | |||
$kendo-split-button-sm-arrow-padding-x | $kendo-split-button-sm-arrow-padding-y | ||
Description
The horizontal padding of the small arrow Button. | |||
$kendo-split-button-md-arrow-padding-x | $kendo-split-button-md-arrow-padding-y | ||
Description
The horizontal padding of the medium arrow Button. | |||
$kendo-split-button-lg-arrow-padding-x | $kendo-split-button-lg-arrow-padding-y | ||
Description
The horizontal padding of the large arrow Button. | |||
$kendo-split-button-arrow-delimiter-size | calc( #{$kendo-button-inner-calc-size} / 2 ) | ||
Description
The height of the SplitButton arrow delimiter. | |||
$kendo-split-button-arrow-delimiter-line-size | 1px | ||
Description
The width of the SplitButton arrow delimiter. | |||
$kendo-split-button-arrow-delimiter-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background color of the SplitButton arrow delimiter. | |||
$kendo-split-button-sizes | (
sm: $kendo-split-button-sm-arrow-padding-y,
md: $kendo-split-button-md-arrow-padding-y,
lg: $kendo-split-button-lg-arrow-padding-y
) | ||
Description
The sizes map for the SplitButton. |
Splitter
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-splitter-border-width | 1px | ||
Description
The width of the border around the Splitter. | |||
$kendo-splitter-font-size | var( --kendo-font-size, initial ) | ||
Description
The font size of the Splitter. | |||
$kendo-splitter-line-height | var( --kendo-line-height, initial ) | ||
Description
The line height of the Splitter. | |||
$kendo-splitter-font-family | var( --kendo-font-family, initial ) | ||
Description
The font family of the Splitter. | |||
$kendo-splitter-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Splitter. | |||
$kendo-splitter-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Splitter. | |||
$kendo-splitter-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Splitter. | |||
$kendo-splitter-splitbar-size | map.get( $kendo-spacing, 3 ) | ||
Description
The size of the Splitter split bar. | |||
$kendo-splitter-drag-handle-length | map.get( $kendo-spacing, 5 ) | ||
Description
The length of the Splitter drag handle. | |||
$kendo-splitter-drag-handle-thickness | map.get( $kendo-spacing, 0.5 ) | ||
Description
The thickness of the Splitter drag handle. | |||
$kendo-splitter-drag-icon-margin | map.get( $kendo-spacing, 2 ) | ||
Description
The margin of the Splitter drag handle icon. | |||
$kendo-splitter-collapse-icon-padding-x | null | ||
Description
The horizontal padding of the collapse icon in the Splitter. | |||
$kendo-splitter-collapse-icon-padding-y | map.get( $kendo-spacing, .5 ) | ||
Description
The vertical padding of the collapse icon in the Splitter. | |||
$kendo-splitbar-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Splitter split bar. | |||
$kendo-splitbar-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Splitter split bar. | |||
$kendo-splitbar-hover-bg | if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) | ||
Description
The hover background color of the Splitter split bar. | |||
$kendo-splitbar-hover-text | $kendo-splitbar-text | ||
Description
The hover text color of the Splitter split bar. | |||
$kendo-splitbar-selected-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The selected background color of the Splitter split bar. | |||
$kendo-splitbar-selected-text | var( --kendo-component-bg, inherit ) | ||
Description
The selected text color of the Splitter split bar. | |||
$kendo-splitter-splitbar-static-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The size of the Splitter static split bar. |
Spreadsheet
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-spreadsheet-border-width | 1px | ||
Description
The width of the border around the Spreadsheet. | |||
$kendo-spreadsheet-font-family | var( --kendo-font-family, initial ) | ||
Description
The font family of the Spreadsheet. | |||
$kendo-spreadsheet-font-size | var( --kendo-font-size, initial ) | ||
Description
The font size of the Spreadsheet. | |||
$kendo-spreadsheet-line-height | var( --kendo-line-height, initial ) | ||
Description
The line height of the Spreadsheet. | |||
$kendo-spreadsheet-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Spreadsheet. | |||
$kendo-spreadsheet-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Spreadsheet. | |||
$kendo-spreadsheet-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Spreadsheet. | |||
$kendo-spreadsheet-primary-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The primary border color of the Spreadsheet. | |||
$kendo-spreadsheet-primary-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The primary background color of the Spreadsheet. | |||
$kendo-spreadsheet-header-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-text | $kendo-table-header-text | ||
Description
The text color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-border | $kendo-table-header-border | ||
Description
The border color of the Spreadsheet header. | |||
$kendo-spreadsheet-table-header-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-text | $kendo-spreadsheet-header-text | ||
Description
The text color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-border | $kendo-spreadsheet-header-border | ||
Description
The border color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-selected-text | if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 )) | ||
Description
The text color of the selected Spreadsheet. | |||
$kendo-spreadsheet-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 )) | ||
Description
The background color of the selected Spreadsheet. | |||
$kendo-spreadsheet-selected-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the selected Spreadsheet. | |||
$kendo-spreadsheet-popup-menu-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Spreadsheet popup Menu. | |||
$kendo-spreadsheet-popup-menu-padding-y | $kendo-spreadsheet-popup-menu-padding-x | ||
Description
The vertical padding of the Spreadsheet popup Menu. | |||
$kendo-spreadsheet-action-bar-border-width | 1px | ||
Description
The border width of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal padding of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-font-size | $kendo-spreadsheet-font-size | ||
Description
The font size of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-font-family | Arial, Verdana, sans-serif | ||
Description
The font family of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacings of the Spreadsheet action bar. | |||
$kendo-spreadsheet-formula-bar-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The gap of the Spreadsheet formula bar. | |||
$kendo-spreadsheet-formula-input-padding-x | var( --kendo-input-md-padding-x, #{$kendo-input-md-padding-x} ) | ||
Description
The horizontal padding of the Spreadsheet formula input. | |||
$kendo-spreadsheet-formula-input-padding-y | var( --kendo-input-md-padding-y, #{$kendo-input-md-padding-y} ) | ||
Description
The vertical padding of the Spreadsheet formula input. | |||
$kendo-spreadsheet-formula-input-line-height | var( --kendo-input-md-line-height, #{$kendo-input-md-line-height} ) | ||
Description
The line height of the Spreadsheet formula input. | |||
$kendo-spreadsheet-view-font-family | Arial, Verdana, sans-serif | ||
Description
The font family of the Spreadsheet view. | |||
$kendo-spreadsheet-view-font-size | $kendo-spreadsheet-font-size | ||
Description
The font size of the Spreadsheet view. | |||
$kendo-spreadsheet-selection-bg | transparent | ||
Description
The background color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-text | null | ||
Description
The text color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-border | $kendo-spreadsheet-primary-border | ||
Description
The border color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-shadow | none | ||
Description
The shadow of the Spreadsheet selection. | |||
$kendo-spreadsheet-single-selection-bg | $kendo-spreadsheet-selected-border | ||
Description
The background color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-single-selection-text | null | ||
Description
The text color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-single-selection-border | $kendo-spreadsheet-border | ||
Description
The border color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-partial-selection-bg | color-mix(in srgb, $kendo-spreadsheet-selected-bg 75%, transparent) | ||
Description
The background color of the Spreadsheet partial selection. | |||
$kendo-spreadsheet-active-cell-bg | $kendo-spreadsheet-bg | ||
Description
The background color of the Spreadsheet active cell. | |||
$kendo-spreadsheet-active-cell-shadow | inset 0 0 0 1px $kendo-spreadsheet-selected-bg | ||
Description
The shadow of the Spreadsheet active cell. | |||
$kendo-spreadsheet-auto-fill-bg | color-mix(in srgb, $kendo-spreadsheet-selected-bg 75%, transparent) | ||
Description
The background color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-text | null | ||
Description
The text color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-border | $kendo-spreadsheet-selected-bg | ||
Description
The border color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-shadow | inset 0 0 0 1px $kendo-spreadsheet-selected-bg | ||
Description
The shadow of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-punch-bg | color-mix(in srgb, $kendo-spreadsheet-bg 50%, transparent) | ||
Description
The background color of the Spreadsheet auto fill punch. | |||
$kendo-spreadsheet-cell-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the Spreadsheet cell. | |||
$kendo-spreadsheet-cell-padding-x | $kendo-spreadsheet-cell-padding-y | ||
Description
The horizontal padding of the Spreadsheet cell. | |||
$kendo-spreadsheet-cell-editor-line-height | var( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height ) | ||
Description
The line height of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal padding of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-padding-y | 0px | ||
Description
The vertical padding of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-bg | $kendo-spreadsheet-bg | ||
Description
The background color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-text | $kendo-spreadsheet-text | ||
Description
The text color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-border | null | ||
Description
The border color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-resize-handle-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Spreadsheet resize handle. | |||
$kendo-spreadsheet-cell-comment-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Spreadsheet cell comment indicator. | |||
$kendo-spreadsheet-cell-dirty-border | if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) | ||
Description
The border color of the Spreadsheet cell dirty indicator. | |||
$kendo-spreadsheet-sheets-bar-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-sheets-bar-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-sheets-bar-border-width | 1px | ||
Description
The border width of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-sheets-remove-inline-start | - map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the Spreadsheet sheets remove. | |||
$kendo-spreadsheet-sheets-remove-inline-end | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical margin of the Spreadsheet sheets remove. | |||
$kendo-filter-menu-padding-left | calc( var( --kendo-icon-size, 1rem ) + 2 * var( --kendo-padding-y, #{$kendo-padding-md-y} ) ) | ||
Description
The left padding of the Spreadsheet sheets menu. | |||
$kendo-spreadsheet-filter-button-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-hover-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the hovered Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-hover-bg | if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the hovered Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-hover-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the hovered Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-active-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the active Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-active-bg | f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) | ||
Description
The background color of the active Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-button-active-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the active Spreadsheet filter Button. | |||
$kendo-spreadsheet-filter-menu-icon-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The color of the Spreadsheet Menu icon. | |||
$kendo-spreadsheet-error-border | if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) | ||
Description
The border color of the Spreadsheet error. | |||
$kendo-spreadsheet-insert-image-dialog-border-style | dashed | ||
Description
The border style of the Spreadsheet image Dialog. | |||
$kendo-spreadsheet-insert-image-dialog-border-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border width of the Spreadsheet image Dialog. | |||
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom | 30px | ||
Description
The bottom margin of the Spreadsheet image Dialog. | |||
$kendo-spreadsheet-insert-image-dialog-preview-width | 355px | ||
Description
The width of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-height | 230px | ||
Description
The height of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-img | "image-fluent.png" | ||
Description
The image of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-border | var( --kendo-component-border, initial ) | ||
Description
The border of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-border-radius | var( --kendo-border-radius-md, initial ) | ||
Description
The border radius of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow | inset 0 0 0 2000px rgba(0, 0, 0, .5) | ||
Description
The shadow of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius | var( --kendo-border-radius-md, initial ) | ||
Description
The border radius of the Spreadsheet image Dialog preview overlay. | |||
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text | var( --kendo-component-bg, initial ) | ||
Description
The text color of the hovered Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-drawing-handle-width | map.get( $kendo-spacing, 1.5 ) | ||
Description
The width of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-height | map.get( $kendo-spacing, 1.5 ) | ||
Description
The height of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-style | solid | ||
Description
The border style of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-width | 1px | ||
Description
The border width of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-color | var( --kendo-selected-bg, initial ) | ||
Description
The border color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-outline-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The outline color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-radius | var( --kendo-border-radius-lg, initial ) | ||
Description
The border radius of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-outline-style | solid | ||
Description
The outline style of the Spreadsheet drawing. | |||
$kendo-spreadsheet-drawing-outline-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The outline width of the Spreadsheet drawing. | |||
$kendo-spreadsheet-drawing-anchor-bg | $kendo-spreadsheet-selected-bg | ||
Description
The background color of the Spreadsheet drawing anchor. | |||
$kendo-spreadsheet-dropzone-spacing-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical spacing of the Spreadsheet DropZone. | |||
$kendo-spreadsheet-insert-image-dialog-img | url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==") | ||
Description
The image of the Spreadsheet insert image Dialog. |
Stepper
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-stepper-border-width | 0px | ||
Description
The width of the border around the Stepper. | |||
$kendo-stepper-font-size | var( --kendo-font-size, inherit ) | ||
$kendo-stepper-font-family | var( --kendo-font-family, inherit ) | ||
$kendo-stepper-line-height | var( --kendo-line-height, normal ) | ||
$kendo-stepper-bg | transparent | ||
Description
The background color of the Stepper. | |||
$kendo-stepper-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Stepper. | |||
$kendo-stepper-border | transparent | ||
Description
The border color of the Stepper. | |||
$kendo-stepper-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin the Stepper label. | |||
$kendo-stepper-label-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding the Stepper label. | |||
$kendo-stepper-label-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding the Stepper label. | |||
$kendo-stepper-inline-content-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the Stepper content. | |||
$kendo-stepper-inline-content-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Stepper content. | |||
$kendo-stepper-indicator-width | map.get( $kendo-spacing, 7.5 ) | ||
Description
The width of the Stepper indicator. | |||
$kendo-stepper-indicator-height | $kendo-stepper-indicator-width | ||
Description
The height of the Stepper indicator. | |||
$kendo-stepper-indicator-border-width | 1px | ||
Description
The border width of the Stepper indicator. | |||
$kendo-stepper-indicator-border-radius | 50% | ||
Description
The border radius of the Stepper indicator. | |||
$kendo-stepper-indicator-focus-border-width | $kendo-stepper-indicator-border-width | ||
Description
The border width of the focused Stepper indicator. | |||
$kendo-stepper-indicator-focus-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The size of the focused Stepper indicator. | |||
$kendo-stepper-indicator-focus-offset | 3px | ||
Description
The offset of the Stepper's focused indicator. | |||
$kendo-stepper-indicator-focus-calc-offset | calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) | ||
Description
The calculated offset of the Stepper's focused indicator. | |||
$kendo-stepper-indicator-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Stepper indicator. | |||
$kendo-stepper-indicator-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Stepper indicator. | |||
$kendo-stepper-indicator-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the Stepper indicator. | |||
$kendo-stepper-indicator-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The background color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-hover-text | var( --kendo-hover-text, initial ) | ||
Description
The text color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-hover-border | $kendo-stepper-indicator-border | ||
Description
The border color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-disabled-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The background color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-disabled-text | var( --kendo-disabled-text, initial) | ||
Description
The text color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The border color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-done-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-text | if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white) | ||
Description
The text color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-border | $kendo-stepper-indicator-done-bg | ||
Description
The border color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-hover-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The background color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-hover-text | $kendo-stepper-indicator-done-text | ||
Description
The text color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-hover-border | $kendo-stepper-indicator-done-hover-bg | ||
Description
The border color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 )) | ||
Description
The background color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-done-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-done-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The border color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-current-bg | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) | ||
Description
The background color of the Stepper current indicator. | |||
$kendo-stepper-indicator-current-text | $kendo-stepper-indicator-done-text | ||
Description
The text color of the Stepper current indicator. | |||
$kendo-stepper-indicator-current-border | $kendo-stepper-indicator-current-bg | ||
Description
The border color of the Stepper current indicator. | |||
$kendo-stepper-indicator-current-hover-bg | $kendo-stepper-indicator-done-hover-bg | ||
Description
The background color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-hover-text | $kendo-stepper-indicator-done-hover-text | ||
Description
The text color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-hover-border | $kendo-stepper-indicator-done-hover-border | ||
Description
The border color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-disabled-bg | $kendo-stepper-indicator-done-disabled-bg | ||
Description
The background color of the Stepper's disabled current indicator. | |||
$kendo-stepper-indicator-current-disabled-text | $kendo-stepper-indicator-done-disabled-text | ||
Description
The text color of the Stepper's disabled current indicator. | |||
$kendo-stepper-indicator-current-disabled-border | $kendo-stepper-indicator-done-disabled-border | ||
Description
The border color of the Stepper's disabled current indicator. | |||
$kendo-stepper-label-text | inherit | ||
Description
The text color of the Stepper label. | |||
$kendo-stepper-label-success-text | if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) | ||
Description
The success text color of the Stepper label. | |||
$kendo-stepper-label-error-text | if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) | ||
Description
The error text color of the Stepper label. | |||
$kendo-stepper-label-hover-text | $kendo-stepper-text | ||
Description
The text color of the hovered Stepper label. | |||
$kendo-stepper-label-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled Stepper label. | |||
$kendo-stepper-current-label-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the disabled Stepper label. | |||
$kendo-stepper-optional-label-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the optional Stepper label. | |||
$kendo-stepper-optional-label-font-size | inherit | ||
Description
The font size of the optional Stepper label. | |||
$kendo-stepper-optional-label-font-style | italic | ||
Description
The font style of the optional Stepper label. | |||
$kendo-stepper-progressbar-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The size of the Stepper ProgressBar. | |||
$kendo-stepper-content-transition-property | none | ||
Description
The property name of the Stepper transition. | |||
$kendo-stepper-content-transition-duration | 300ms | ||
Description
The duration of the Stepper transition. | |||
$kendo-stepper-content-transition-timing-function | cubic-bezier(.4, 0, .2, 1) 0ms | ||
Description
The timing function of the Stepper transition. |
Switch
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-switch-font-family | var( --kendo-font-family, normal ) | ||
Description
The font family of the Switch. | |||
$kendo-switch-track-border-width | 1px | ||
Description
The border width of the Switch track. | |||
$kendo-switch-thumb-border-width | 0 | ||
Description
The border width of the Switch thumb. | |||
$kendo-switch-label-text-transform | uppercase | ||
Description
The text transform of the Switch label. | |||
$kendo-switch-label-display | none | ||
Description
The display of the Switch label. | |||
$kendo-switch-sizes | (
sm: ( font-size: 10px, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ),
md: ( font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ),
lg: ( font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px )
) | ||
Description
The map with the different Switch sizes. | |||
$kendo-switch-focus-ring | 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The ring around the focused Switch. | |||
$kendo-switch-off-track-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background of the track when the Switch is not checked. | |||
$kendo-switch-off-track-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the track when the Switch is not checked. | |||
$kendo-switch-off-track-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the track when the Switch is not checked. | |||
$kendo-switch-off-track-hover-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-hover-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the track when the hovered Switch is not checked. | |||
$kendo-switch-off-track-focus-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-focus-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-focus-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the track when the focused Switch is not checked. | |||
$kendo-switch-off-track-disabled-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-track-disabled-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-track-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the track when the disabled Switch is not checked. | |||
$kendo-switch-off-thumb-bg | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The background of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-text | inherit | ||
Description
The text color of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the thumb when the Switch is not checked. | |||
$kendo-switch-off-thumb-hover-bg | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The background of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-off-thumb-hover-text | inherit | ||
Description
The text color of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-off-thumb-hover-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the thumb when the hovered Switch is not checked. | |||
$kendo-switch-off-thumb-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background of the thumb when the disabled Switch is not checked. | |||
$kendo-switch-off-thumb-disabled-text | inherit | ||
Description
The text color of the thumb when the disabled Switch is not checked. | |||
$kendo-switch-off-thumb-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the thumb when the disabled Switch is not checked. | |||
$kendo-switch-on-track-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background of the track when the Switch is checked. | |||
$kendo-switch-on-track-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the track when the Switch is checked. | |||
$kendo-switch-on-track-border | $kendo-switch-on-track-bg | ||
Description
The border color of the track when the Switch is checked. | |||
$kendo-switch-on-track-hover-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The background of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-hover-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-hover-border | $kendo-switch-on-track-hover-bg | ||
Description
The border color of the track when the hovered Switch is checked. | |||
$kendo-switch-on-track-focus-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-focus-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-focus-border | $kendo-switch-on-track-focus-bg | ||
Description
The border color of the track when the focused Switch is checked. | |||
$kendo-switch-on-track-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The background of the track when the disabled Switch is checked. | |||
$kendo-switch-on-track-disabled-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The text color of the track when the disabled Switch is checked. | |||
$kendo-switch-on-track-disabled-border | if($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg) | ||
Description
The border color of the track when the disabled Switch is checked. | |||
$kendo-switch-on-thumb-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-text | inherit | ||
Description
The text color of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-border | inherit | ||
Description
The border color of the thumb when the Switch is checked. | |||
$kendo-switch-on-thumb-hover-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background of the thumb when the hovered Switch is checked. | |||
$kendo-switch-on-thumb-hover-text | inherit | ||
Description
The text color of the thumb when the hovered Switch is checked. | |||
$kendo-switch-on-thumb-hover-border | inherit | ||
Description
The border color of the thumb when the hovered Switch is checked. | |||
$kendo-switch-on-thumb-disabled-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background of the thumb when the disabled Switch is checked. | |||
$kendo-switch-on-thumb-disabled-text | inherit | ||
Description
The text color of the thumb when the disabled Switch is checked. | |||
$kendo-switch-on-thumb-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) | ||
Description
The border color of the thumb when the disabled Switch is checked. |
Table
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-table-border-width | 1px | ||
Description
The width of the table border. | |||
$kendo-table-cell-vertical-border-width | 0px | ||
Description
The width of vertical border of table cells. | |||
$kendo-table-cell-horizontal-border-width | 1px | ||
Description
The width of horizontal border of table cells. | |||
$kendo-table-cell-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the cells in the table if no size is specified. | |||
$kendo-table-cell-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the cells in the table if no size is specified. | |||
$kendo-table-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the table header cells. | |||
$kendo-table-sizes | (
sm: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, inherit ),
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y,
group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
group-label-font-size: $kendo-list-item-group-label-sm-font-size
),
md: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, inherit ),
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y,
group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
group-label-font-size: $kendo-list-item-group-label-md-font-size
),
lg: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, inherit ),
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y,
group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
group-label-font-size: $kendo-list-item-group-label-lg-font-size
)
) | ||
Description
The sizes of the table. | |||
$kendo-table-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of tables. | |||
$kendo-table-text | var( --kendo-component-text, initial ) | ||
Description
Text color of tables. | |||
$kendo-table-border | var( --kendo-component-border, initial ) | ||
Description
Border color of tables. | |||
$kendo-table-header-bg | $kendo-table-bg | ||
Description
Background color of table headers. | |||
$kendo-table-header-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
Text color of table headers. | |||
$kendo-table-header-border | $kendo-table-border | ||
Description
Border color of table headers. | |||
$kendo-table-sticky-header-text | $kendo-list-header-text | ||
Description
Text color of the sticky table header. | |||
$kendo-table-sticky-header-bg | $kendo-list-header-bg | ||
Description
Background color of the sticky table header. | |||
$kendo-table-sticky-header-border | $kendo-list-header-border | ||
Description
Border color of the sticky table header. | |||
$kendo-table-sticky-header-shadow | $kendo-list-header-shadow | ||
Description
Shadow of the sticky table header. | |||
$kendo-table-footer-bg | $kendo-table-header-bg | ||
Description
Background color of table footers. | |||
$kendo-table-footer-text | $kendo-table-header-text | ||
Description
Text color of table footers. | |||
$kendo-table-footer-border | $kendo-table-header-border | ||
Description
Border color of table footers. | |||
$kendo-table-group-row-bg | $kendo-table-header-bg | ||
Description
Background color of group rows in table. | |||
$kendo-table-group-row-text | $kendo-table-header-text | ||
Description
Text color of group rows in table. | |||
$kendo-table-group-row-border | $kendo-table-header-border | ||
Description
Border color of group rows in table. | |||
$kendo-table-group-label-text | $kendo-list-bg | ||
Description
Text color of group label in table. | |||
$kendo-table-group-label-bg | $kendo-list-text | ||
Description
Background color of group label in table. | |||
$kendo-table-alt-row-bg | initial | ||
Description
Background color of alternating rows in table. | |||
$kendo-table-alt-row-text | $kendo-table-text | ||
Description
Text color of alternating rows in table. | |||
$kendo-table-alt-row-border | $kendo-table-border | ||
Description
Border color of alternating rows in table. | |||
$kendo-table-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of hovered rows in table. | |||
$kendo-table-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Text color of hovered rows in table. | |||
$kendo-table-hover-border | $kendo-table-border | ||
Description
Border color of hovered rows in table. | |||
$kendo-table-focus-bg | inherit | ||
Description
Background color of focused rows in table. | |||
$kendo-table-focus-text | inherit | ||
Description
Text color of focused rows in table. | |||
$kendo-table-focus-border | inherit | ||
Description
Border color of focused rows in table. | |||
$kendo-table-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Box shadow of focused rows in table. | |||
$kendo-table-selected-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 )) | ||
Description
Background color of selected rows in table. | |||
$kendo-table-selected-text | $kendo-table-text | ||
Description
Text color of selected rows in table. | |||
$kendo-table-selected-border | $kendo-table-border | ||
Description
Border color of selected rows in table. | |||
$kendo-table-selected-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 )) | ||
Description
Hover background color of selected rows in table. | |||
$kendo-table-selected-hover-text | $kendo-table-selected-text | ||
Description
Hover text color of selected rows in table. | |||
$kendo-table-selected-hover-border | $kendo-table-selected-border | ||
Description
Hover border color of selected rows in table. |
Tabstrip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-tabstrip-wrapper-padding-x | 0px | ||
Description
The horizontal padding of the tabstrip wrapper | |||
$kendo-tabstrip-wrapper-padding-y | 0px | ||
Description
The vertical padding of the tabstrip wrapper | |||
$kendo-tabstrip-wrapper-border-width | 0px | ||
Description
The width of the border around the tabstrip wrapper | |||
$kendo-tabstrip-wrapper-bg | transparent | ||
Description
The background color of the tabstrip wrapper | |||
$kendo-tabstrip-wrapper-text | initial | ||
Description
The text color of the tabstrip wrapper | |||
$kendo-tabstrip-wrapper-border | initial | ||
Description
The border color of the tabstrip wrapper | |||
$kendo-tabstrip-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the tabstrip | |||
$kendo-tabstrip-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the tabstrip | |||
$kendo-tabstrip-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the tabstrip | |||
$kendo-tabstrip-border-width | 0px | ||
Description
The width of the border around the tabstrip | |||
$kendo-tabstrip-bg | transparent | ||
Description
The background color of the tabstrip | |||
$kendo-tabstrip-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the tabstrip | |||
$kendo-tabstrip-border | transparent | ||
Description
The border color of the tabstrip | |||
$kendo-tabstrip-item-padding-x | var( --kendo-padding-x, #{$kendo-padding-md-x} ) | ||
Description
The horizontal padding of the tabstrip item | |||
$kendo-tabstrip-item-padding-y | map.get( $kendo-spacing, 2 ) + map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the tabstrip item | |||
$kendo-tabstrip-item-border-width | 0px | ||
Description
The width of the border around the tabstrip item | |||
$kendo-tabstrip-item-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the tabstrip item | |||
$kendo-tabstrip-item-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The gap between the tabstrip items | |||
$kendo-tabstrip-item-bg | transparent | ||
Description
The background color of the tabstrip item | |||
$kendo-tabstrip-item-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the tabstrip item | |||
$kendo-tabstrip-item-border | transparent | ||
Description
The border color of the tabstrip item | |||
$kendo-tabstrip-item-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled tabstrip item | |||
$kendo-tabstrip-item-disabled-bg | none | ||
Description
The background color of the disabled tabstrip item | |||
$kendo-tabstrip-item-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The border color of the disabled tabstrip item | |||
$kendo-tabstrip-item-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
The background color of hovered tabs | |||
$kendo-tabstrip-item-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
The text color of hovered tabs | |||
$kendo-tabstrip-item-hover-border | var( --kendo-hover-bg, inherit ) | ||
Description
The border color of hovered tabs | |||
$kendo-tabstrip-item-selected-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of selected tabs | |||
$kendo-tabstrip-item-selected-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of selected tabs | |||
$kendo-tabstrip-item-selected-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of selected tabs | |||
$kendo-tabstrip-item-selected-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
The background gradient of selected tabs | |||
$kendo-tabstrip-item-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
The focus shadow of the tabstrip item | |||
$kendo-tabstrip-item-dragging-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the sortable tabstrip item | |||
$kendo-tabstrip-indicator-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border width of the tabstrip indicator | |||
$kendo-tabstrip-indicator-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the tabstrip ripple | |||
$kendo-tabstrip-content-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of tabstrip content | |||
$kendo-tabstrip-content-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of tabstrip content | |||
$kendo-tabstrip-content-border-width | 1px | ||
Description
The width of border around tabstrip content | |||
$kendo-tabstrip-content-bg | var( --kendo-component-bg, transparent ) | ||
Description
The background color of tabstrip content | |||
$kendo-tabstrip-content-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of tabstrip content | |||
$kendo-tabstrip-content-border | transparent | ||
Description
The border color of tabstrip content | |||
$kendo-tabstrip-content-focus-border | var( --kendo-component-text, initial ) | ||
Description
The border color of tabstrip focused content | |||
$kendo-tabstrip-scrollable-button-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal button padding of the scrollable tabstrip | |||
$kendo-tabstrip-scrollable-button-padding-y | map.get( $kendo-spacing, 1 ) | ||
Taskboard
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-taskboard-spacer | map.get( $kendo-spacing, 4 ) | ||
Description
The spacing index of the TaskBoard. | |||
$kendo-taskboard-border-width | 1px | ||
Description
The border width of the TaskBoard. | |||
$kendo-taskboard-border-style | solid | ||
Description
The border style of the TaskBoard. | |||
$kendo-taskboard-padding-y | 0px | ||
Description
The vertical padding of the TaskBoard. | |||
$kendo-taskboard-padding-x | 0px | ||
Description
The horizontal of the TaskBoard. | |||
$kendo-taskboard-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the TaskBoard. | |||
$kendo-taskboard-font-size | var( --kendo-font-size-md, inherit ) | ||
Description
The font size of the TaskBoard. | |||
$kendo-taskboard-line-height | var( --kendo-line-height, inherit ) | ||
Description
The line height of the TaskBoard. | |||
$kendo-taskboard-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the TaskBoard. | |||
$kendo-taskboard-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the TaskBoard. | |||
$kendo-taskboard-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the TaskBoard. | |||
$kendo-taskboard-content-padding-y | 0px | ||
Description
The vertical padding of the TaskBoard content. | |||
$kendo-taskboard-content-padding-x | 0px | ||
Description
The horizontal padding of the TaskBoard content. | |||
$kendo-taskboard-column-container-spacing-y | math.div( $kendo-taskboard-spacer, 2 ) | ||
Description
The vertical spacing of the TaskBoard column container. | |||
$kendo-taskboard-column-container-padding-y | 0px | ||
Description
The vertical padding of the TaskBoard column container. | |||
$kendo-taskboard-column-container-padding-x | math.div( $kendo-taskboard-spacer, 2 ) | ||
Description
The horizontal padding of the TaskBoard column container. | |||
$kendo-taskboard-columns-container-gap | $kendo-taskboard-spacer | ||
Description
The spacing of the TaskBoard columns container. | |||
$kendo-taskboard-column-width | 320px | ||
Description
The default width of the TaskBoard column. | |||
$kendo-taskboard-column-border-width | 1px | ||
Description
The border width of the TaskBoard column. | |||
$kendo-taskboard-column-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the TaskBoard column. | |||
$kendo-taskboard-column-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the TaskBoard column. | |||
$kendo-taskboard-column-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the TaskBoard column. | |||
$kendo-taskboard-column-border | transparent | ||
Description
The border color of the TaskBoard column. | |||
$kendo-taskboard-column-focus-bg | $kendo-taskboard-column-bg | ||
Description
The background color of the focused TaskBoard column. | |||
$kendo-taskboard-column-focus-text | $kendo-taskboard-column-text | ||
Description
The text color of the focused TaskBoard column. | |||
$kendo-taskboard-column-focus-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the focused TaskBoard column. | |||
$kendo-taskboard-column-header-padding-y | math.div( $kendo-taskboard-spacer, 2 ) | ||
Description
The vertical padding of the TaskBoard column header. | |||
$kendo-taskboard-column-header-padding-x | $kendo-taskboard-column-header-padding-y | ||
Description
The horizontal padding of the TaskBoard column header. | |||
$kendo-taskboard-column-header-gap | math.div( $kendo-taskboard-spacer, 4 ) | ||
Description
The spacing of the TaskBoard column header. | |||
$kendo-taskboard-column-header-actions-gap | math.div( $kendo-taskboard-spacer, 2 ) | ||
Description
The spacing of the TaskBoard column header actions. | |||
$kendo-taskboard-column-header-font-weight | 400 | ||
Description
The font weight of the TaskBoard column header. | |||
$kendo-taskboard-column-header-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the TaskBoard column header. | |||
$kendo-taskboard-column-cards-padding-y | 0px | ||
Description
The vertical padding of the TaskBoard column Card wrapper. | |||
$kendo-taskboard-column-cards-padding-x | 0px | ||
Description
The horizontal padding of the TaskBoard column Card wrapper. | |||
$kendo-taskboard-column-cards-gap | math.div( $kendo-taskboard-spacer, 2 ) | ||
Description
The spacing of the TaskBoard column Card wrapper. | |||
$kendo-taskboard-pane-width | $kendo-taskboard-column-width | ||
Description
The default width of the TaskBoard pane. | |||
$kendo-taskboard-pane-padding-y | 0px | ||
Description
The vertical padding of the TaskBoard pane. | |||
$kendo-taskboard-pane-padding-x | 0px | ||
Description
The horizontal padding of the TaskBoard pane. | |||
$kendo-taskboard-pane-border-width | 1px | ||
Description
The border width of the TaskBoard pane. | |||
$kendo-taskboard-pane-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the TaskBoard pane. | |||
$kendo-taskboard-pane-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the TaskBoard pane. | |||
$kendo-taskboard-pane-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the TaskBoard pane. | |||
$kendo-taskboard-pane-header-padding-y | $kendo-taskboard-spacer | ||
Description
The vertical padding of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-font-size | var( --kendo-font-size-xl, 1rem ) | ||
Description
The font size of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the TaskBoard pane header. | |||
$kendo-taskboard-pane-header-text | $kendo-taskboard-pane-text | ||
Description
The text color of the TaskBoard pane header. | |||
$kendo-taskboard-pane-content-padding-y | 0px | ||
Description
The vertical padding of the TaskBoard pane content. | |||
$kendo-taskboard-pane-content-padding-x | $kendo-taskboard-pane-header-padding-x | ||
Description
The horizontal padding of the TaskBoard pane content. | |||
$kendo-taskboard-pane-actions-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical padding of the TaskBoard pane actions. | |||
$kendo-taskboard-pane-actions-padding-x | $kendo-taskboard-pane-actions-padding-y | ||
Description
The horizontal padding of the TaskBoard pane actions. | |||
$kendo-taskboard-card-padding-y | math.div( $kendo-taskboard-spacer, 2 ) | ||
Description
The vertical padding of the TaskBoard Card. | |||
$kendo-taskboard-card-padding-x | $kendo-taskboard-card-padding-y | ||
Description
The horizontal padding of the TaskBoard Card. | |||
$kendo-taskboard-card-category-border-width | 4px | ||
Description
The border width of the TaskBoard Card category. | |||
$kendo-taskboard-card-focus-shadow | none | ||
Description
The shadow of the focused TaskBoard Card. | |||
$kendo-taskboard-card-selected-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border of the selected TaskBoard Card. | |||
$kendo-taskboard-card-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the selected TaskBoard Card. | |||
$kendo-taskboard-card-title-font-size | var( --kendo-font-size-md, 1rem ) | ||
Description
The font size of the TaskBoard Card title. | |||
$kendo-taskboard-card-title-font-weight | var( --kendo-font-weight-bold, 600 ) | ||
Description
The font weight of the TaskBoard Card title. | |||
$kendo-taskboard-drag-placeholder-border-width | 1px | ||
Description
The border width of the TaskBoard Card placeholder. | |||
$kendo-taskboard-drag-placeholder-border-radius | $kendo-card-border-radius | ||
Description
The border radius of the TaskBoard Card placeholder. | |||
$kendo-taskboard-drag-placeholder-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) | ||
Description
The background color of the TaskBoard Card placeholder. | |||
$kendo-taskboard-drag-placeholder-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the TaskBoard Card placeholder. |
Tilelayout
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-tile-layout-border-width | 0px | ||
Description
The width of the border around the TileLayout. | |||
$kendo-tile-layout-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the TileLayout. | |||
$kendo-tile-layout-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the TileLayout. | |||
$kendo-tile-layout-padding-y | $kendo-tile-layout-padding-x | ||
Description
The vertical padding of the TileLayout | |||
$kendo-tile-layout-hint-border-width | 1px | ||
Description
The width of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-border-radius | var( --kendo-border-radius-lg, initial ) | ||
Description
The radius of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-border | var( --kendo-component-border, initial ) | ||
Description
The color of the border around the TileLayout hint. | |||
$kendo-tile-layout-hint-bg | rgba(255, 255, 255, .2) | ||
Description
The background color of the TileLayout hint. |
Time-selector
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-time-selector-border-width | 1px | ||
Description
Width of the border around the time-selector. | |||
$kendo-time-selector-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the time-selector. | |||
$kendo-time-selector-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the time-selector. | |||
$kendo-time-selector-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the time-selector. | |||
$kendo-time-selector-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the time-selector. | |||
$kendo-time-selector-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the time-selector. | |||
$kendo-time-selector-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the time-selector. | |||
$kendo-time-selector-header-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the time-selector header. | |||
$kendo-time-selector-header-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding color of the time-selector header. | |||
$kendo-time-selector-header-border-width | 0px | ||
Description
Width of the border around the time-selector header. | |||
$kendo-time-list-separator-display | none | ||
Description
Visibility of the time-selector separator. | |||
$kendo-time-list-width | 4em | ||
Description
Minimum width of the time-selector columns. | |||
$kendo-time-list-height | 240px | ||
Description
Height of the time-selector columns. | |||
$kendo-time-list-title-spacing | map.get( $kendo-spacing, 3 ) | ||
Description
Spacing beneath the time selector titles. | |||
$kendo-time-list-title-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
Font size of the time-selector titles. | |||
$kendo-time-list-title-line-height | var( --kendo-line-height-lg, inherit ) | ||
Description
Line height of the time-selector titles. | |||
$kendo-time-list-title-height | calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) | ||
Description
Height of the time-selector titles. | |||
$kendo-time-list-title-text | var( --kendo-subtle-text, inherit ) | ||
Description
Text color of the time-selector titles. | |||
$kendo-time-list-title-focus-text | $kendo-time-selector-text | ||
Description
Text color of the focused time-selector titles. | |||
$kendo-time-list-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the time-selector list items. | |||
$kendo-time-list-item-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the time-selector list items. | |||
$kendo-time-list-highlight-border-width | 1px 0px | ||
Description
Width of the border of the selected item in the time-selector. | |||
$kendo-time-list-highlight-height | calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} ) | ||
Description
Height of the selected item in the time-selector. | |||
$kendo-time-list-highlight-bg | $kendo-time-selector-bg | ||
Description
Background color of the selected item in the time-selector. | |||
$kendo-time-list-highlight-border | $kendo-time-selector-border | ||
Description
Border color of the selected item in the time-selector. | |||
$kendo-time-list-focus-bg | rgba(0, 0, 0, .04) | ||
Description
Background color of the focused time-selector column. | |||
$kendo-time-selector-sm-font-size | $kendo-list-sm-font-size | ||
Description
Font sizes of the time-selector. | |||
$kendo-time-selector-sm-line-height | $kendo-list-sm-line-height | ||
Description
Line heights used along with $kendo-font-size. | |||
$kendo-time-selector-sm-list-item-padding-x | $kendo-list-sm-item-padding-x | ||
Description
Horizontal padding of the time-selector items. | |||
$kendo-time-selector-sm-list-item-padding-y | $kendo-list-sm-item-padding-y | ||
Description
Vertical padding of the time-selector items. | |||
$kendo-time-selector-sizes | (
sm: (
font-size: $kendo-time-selector-sm-font-size,
line-height: $kendo-time-selector-sm-line-height,
list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
),
md: (
font-size: $kendo-time-selector-md-font-size,
line-height: $kendo-time-selector-md-line-height,
list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
),
lg: (
font-size: $kendo-time-selector-lg-font-size,
line-height: $kendo-time-selector-lg-line-height,
list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
)
) | ||
Description
Sizes map for the time-selector. |
Timeline
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-timeline-spacing-x | map.get( $kendo-spacing, 10 ) | ||
Description
The horizontal spacing of the Timeline. | |||
$kendo-timeline-spacing-y | map.get( $kendo-spacing, 10 ) | ||
Description
The vertical spacing of the Timeline. | |||
$kendo-timeline-items-padding | map.get( $kendo-spacing, 4 ) | ||
Description
The padding between the Timeline's track items. | |||
$kendo-timeline-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Timeline. | |||
$kendo-timeline-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Timeline. | |||
$kendo-timeline-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Timeline. | |||
$kendo-timeline-mobile-spacing-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal spacing of the mobile Timeline. | |||
$kendo-timeline-mobile-spacing-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical spacing of the mobile Timeline. | |||
$kendo-timeline-track-arrow-width | map.get( $kendo-spacing, 7.5 ) | ||
Description
The width of the Timeline track arrow. | |||
$kendo-timeline-track-arrow-height | map.get( $kendo-spacing, 7.5 ) | ||
Description
The height of the Timeline track arrow. | |||
$kendo-timeline-track-size | map.get( $kendo-spacing, 1.5 ) | ||
Description
The size of the Timeline track. | |||
$kendo-timeline-track-wrap-padding-bottom | math.div( $kendo-timeline-track-size, 2 ) | ||
Description
The bottom padding of the Timeline's track wrapper. | |||
$kendo-timeline-track-border-width | 1px | ||
Description
The border width of the Timeline track. | |||
$kendo-timeline-track-margin-bottom | map.get( $kendo-spacing, 4 ) | ||
Description
The bottom margin of the Timeline track. | |||
$kendo-timeline-track-bottom-calc | calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) | ||
Description
The bottom offset of the Timeline track. | |||
$kendo-timeline-track-start-calc | calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) | ||
Description
The left offset of the Timeline track. | |||
$kendo-timeline-track-end-calc | calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) | ||
Description
The right offset of the Timeline track. | |||
$kendo-timeline-track-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Timeline track. | |||
$kendo-timeline-track-border-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the Timeline track. | |||
$kendo-timeline-arrow-inset-block-end | calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } ) | ||
Description
The block end inset of the Timeline arrow. | |||
$kendo-timeline-track-arrow-disabled-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The background color of the disabled Timeline arrow. | |||
$kendo-timeline-track-arrow-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled Timeline arrow. | |||
$kendo-timeline-track-arrow-disabled-border | var( --kendo-disabled-border, initial) | ||
Description
The border color of the disabled Timeline arrow. | |||
$kendo-timeline-track-event-offset | map.get( $kendo-spacing, 8 ) | ||
Description
The offset of the Timeline track event. | |||
$kendo-timeline-flag-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Timeline flag. | |||
$kendo-timeline-flag-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Timeline flag. | |||
$kendo-timeline-flag-border-radius | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border radius of the Timeline flag. | |||
$kendo-timeline-flag-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Timeline flag. | |||
$kendo-timeline-flag-box-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box shadow of the Timeline flag. | |||
$kendo-timeline-flag-min-width | map.get( $kendo-spacing, 20 ) | ||
Description
The minimum width of the Timeline flag. | |||
$kendo-timeline-flag-max-width | calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) | ||
Description
The maximum width of the Timeline flag. | |||
$kendo-timeline-mobile-flag-max-width | calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } ) | ||
Description
The maximum width of the mobile Timeline flag. | |||
$kendo-timeline-horizontal-flag-min-width | map.get( $kendo-spacing, 15 ) | ||
Description
The minimum width of the horizontal Timeline flag. | |||
$kendo-timeline-flag-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Timeline flag. | |||
$kendo-timeline-flag-text | var( --kendo-component-bg, initial ) | ||
Description
The text color of the Timeline flag. | |||
$kendo-timeline-flag-callout-width | map.get( $kendo-spacing, 2.5 ) | ||
Description
The width of the Timeline's flag callout. | |||
$kendo-timeline-flag-callout-height | map.get( $kendo-spacing, 2.5 ) | ||
Description
The height of the Timeline's flag callout. | |||
$kendo-timeline-flag-offset-bottom | map.get( $kendo-spacing, 1 ) | ||
Description
The bottom offset of the Timeline flag. | |||
$kendo-timeline-flag-margin-bottom-calc | calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } ) | ||
Description
The bottom margin of the Timeline flag. | |||
$kendo-timeline-card-header-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Timeline's Card header. | |||
$kendo-timeline-card-header-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | ||
Description
The text color of the Timeline's Card header. | |||
$kendo-timeline-card-body-scroll-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border of the Timeline's Card body scroll. | |||
$kendo-timeline-card-body-scroll-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Timeline's Card body scroll. | |||
$kendo-timeline-card-scroll-thumb-hover | var( --kendo-hover-border, initial ) | ||
Description
The color of the Timeline's hovered card scroll thumb. | |||
$kendo-timeline-date-body-text | var( --kendo-body-text, initial ) | ||
Description
The text color of the Timeline date body. | |||
$kendo-timeline-date-width | map.get( $kendo-spacing, 12 ) + map.get( $kendo-spacing, 0.5 ) | ||
Description
The width of the Timeline date. | |||
$kendo-timeline-date-margin-bottom | map.get( $kendo-spacing, 2 ) | ||
Description
The bottom margin of the Timeline date. | |||
$kendo-timeline-vertical-padding-calc | calc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) | ||
Description
The padding of the vertical Timeline. | |||
$kendo-timeline-vertical-padding-with-dates-calc | calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) | ||
Description
The padding of the vertical Timeline date. | |||
$kendo-timeline-vertical-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-lg} ) | ||
Description
The border radius of the vertical Timeline. | |||
$kendo-timeline-mobile-vertical-padding-calc | calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) | ||
Description
The padding of the vertical mobile Timeline. | |||
$kendo-timeline-mobile-vertical-padding-with-dates-calc | calc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) | ||
Description
The padding of the vertical mobile Timeline date. | |||
$kendo-timeline-circle-width | map.get( $kendo-spacing, 4 ) | ||
Description
The width of the Timeline circle. | |||
$kendo-timeline-circle-height | map.get( $kendo-spacing, 4 ) | ||
Description
The height of the Timeline circle. | |||
$kendo-timeline-circle-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Timeline circle. | |||
$kendo-timeline-event-width | 400px | ||
Description
The width of the Timeline event. | |||
$kendo-timeline-event-height | 600px | ||
Description
The height of the Timeline event. | |||
$kendo-timeline-event-min-height-calc | calc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) ) | ||
Description
The minimum height of the Timeline event. | |||
$kendo-timeline-icon-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
The spacing of the Timeline icons. |
Toolbar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-toolbar-sm-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal padding of the small Toolbar. | |||
$kendo-toolbar-md-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the medium Toolbar. | |||
$kendo-toolbar-lg-padding-x | map.get( $kendo-spacing, 2.5 ) | ||
Description
The horizontal padding of the large Toolbar. | |||
$kendo-toolbar-sm-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the small Toolbar. | |||
$kendo-toolbar-md-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the medium Toolbar. | |||
$kendo-toolbar-lg-padding-y | map.get( $kendo-spacing, 2.5 ) | ||
Description
The vertical padding of the large Toolbar. | |||
$kendo-toolbar-sm-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the tools of the small Toolbar. | |||
$kendo-toolbar-md-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the tools of the medium Toolbar. | |||
$kendo-toolbar-lg-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing between the tools of the large Toolbar. | |||
$kendo-toolbar-border-width | 1px | ||
Description
The width of the border around the Toolbar. | |||
$kendo-toolbar-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Toolbar. | |||
$kendo-toolbar-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Toolbar. | |||
$kendo-toolbar-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Toolbar. | |||
$kendo-toolbar-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Toolbar. | |||
$kendo-toolbar-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the Toolbar. | |||
$kendo-toolbar-border | var( --kendo-component-border, initial ) | ||
Description
The color of the border around the Toolbar. | |||
$kendo-toolbar-separator-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The color of the separator border of the Toolbar. | |||
$kendo-toolbar-input-width | 10em | ||
Description
The width of the input in the Toolbar. | |||
$kendo-toolbar-item-focus-outline-width | 1px | ||
Description
The border width of the focused Toolbar item. | |||
$kendo-toolbar-item-focus-outline-style | solid | ||
Description
The border style of the focused Toolbar item. | |||
$kendo-toolbar-item-focus-outline-color | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The border color of the focused Toolbar item. | |||
$kendo-toolbar-flat-border-width | 1px | ||
Description
Border width of the flat Toolbar. | |||
$kendo-toolbar-sizes | (
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
)
) | ||
Description
The sizes map for the Toolbar. |
Tooltip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-tooltip-border-radius | $kendo-border-radius | ||
Description
The border radius of the Tooltip. | |||
$kendo-tooltip-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Tooltip. | |||
$kendo-tooltip-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Tooltip. | |||
$kendo-tooltip-border-width | 0px | ||
Description
The width of the border around the Tooltip. | |||
$kendo-tooltip-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Tooltip. | |||
$kendo-tooltip-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Tooltip. | |||
$kendo-tooltip-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Tooltip. | |||
$kendo-tooltip-title-font-size | calc( #{$kendo-tooltip-font-size} * 1.25 ) | ||
Description
The font size of the Tooltip title. | |||
$kendo-tooltip-title-line-height | var( --kendo-line-heigh-xs, normal ) | ||
Description
The line height of the Tooltip title. | |||
$kendo-tooltip-title-margin | map.get( $kendo-spacing, 1 ) | ||
Description
The margin of the Tooltip title. | |||
$kendo-tooltip-callout-size | map.get( $kendo-spacing, 2 ) | ||
Description
The size of the Tooltip callout. | |||
$kendo-tooltip-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The default background of the Tooltip. | |||
$kendo-tooltip-text | var( --kendo-component-text, initial ) | ||
Description
The default text color of the Tooltip. | |||
$kendo-tooltip-border | transparent | ||
Description
The default border color of the Tooltip. | |||
$kendo-tooltip-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The box-shadow of the Tooltip. | |||
$kendo-tooltip-button-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial )) | ||
Description
The text color of the Tooltip button. |
Treelist
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-treelist-footer-row-bg | $kendo-grid-hover-bg | ||
Description
Background color of the treelist footer row. | |||
$kendo-treelist-footer-row-border-width | 1px | ||
Description
Border width of the treelist footer row. |
Treeview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-treeview-font-family | var( --kendo-font-family, normal ) | ||
Description
The font family of the TreeView. | |||
$kendo-treeview-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the small TreeView. | |||
$kendo-treeview-md-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the medium TreeView. | |||
$kendo-treeview-lg-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the large TreeView. | |||
$kendo-treeview-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the small TreeView. | |||
$kendo-treeview-md-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the medium TreeView. | |||
$kendo-treeview-lg-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the large TreeView. | |||
$kendo-treeview-indent | map.get( $kendo-spacing, 6 ) | ||
Description
The indentation of child groups in the TreeView. | |||
$kendo-treeview-sm-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the small TreeView items. | |||
$kendo-treeview-md-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the medium TreeView items. | |||
$kendo-treeview-lg-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the large TreeView items. | |||
$kendo-treeview-sm-item-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the small TreeView items. | |||
$kendo-treeview-md-item-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the medium TreeView items. | |||
$kendo-treeview-lg-item-padding-y | map.get( $kendo-spacing, 2.5 ) | ||
Description
The vertical padding of the large TreeView items. | |||
$kendo-treeview-item-border-width | 0 | ||
Description
The border width of the TreeView items. | |||
$kendo-treeview-item-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the TreeView items. | |||
$kendo-treeview-filter-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the TreeViews' filter element. | |||
$kendo-treeview-filter-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the TreeViews' filter element. | |||
$kendo-treeview-sizes | (
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
),
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
),
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
)
) | ||
Description
The sizes map of the TreeView. | |||
$kendo-treeview-bg | transparent | ||
Description
The background color of the TreeView. | |||
$kendo-treeview-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the TreeView. | |||
$kendo-treeview-border | inherit | ||
Description
The border color of the TreeView. | |||
$kendo-treeview-item-bg | transparent | ||
Description
The background color of the TreeView items. | |||
$kendo-treeview-item-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the TreeView items. | |||
$kendo-treeview-item-border | inherit | ||
Description
The border color of the TreeView items. | |||
$kendo-treeview-item-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
The background color of hovered TreeView items. | |||
$kendo-treeview-item-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
The text color of hovered TreeView items. | |||
$kendo-treeview-item-hover-border | inherit | ||
Description
The border color of hovered TreeView items | |||
$kendo-treeview-item-focus-bg | $kendo-treeview-item-bg | ||
Description
The background color of focused TreeView items. | |||
$kendo-treeview-item-focus-text | $kendo-treeview-item-text | ||
Description
The text color of focused TreeView items. | |||
$kendo-treeview-item-focus-border | $kendo-treeview-item-border | ||
Description
The border color of focused TreeView items. | |||
$kendo-treeview-item-focus-shadow | inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The box shadow of focused TreeView items. | |||
$kendo-treeview-item-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
The background color of selected TreeView items. | |||
$kendo-treeview-item-selected-text | var( --kendo-selected-text, inherit ) | ||
Description
The text color of selected TreeView items. | |||
$kendo-treeview-item-selected-border | inherit | ||
Description
The border color of selected TreeView items. | |||
$kendo-treeview-item-disabled-bg | $kendo-treeview-item-bg | ||
Description
The background color of disabled TreeView items. | |||
$kendo-treeview-item-disabled-text | var( --kendo-disabled-text, inherit ) | ||
Description
The text color of disabled TreeView items. | |||
$kendo-treeview-item-disabled-border | inherit | ||
Description
The border color of disabled TreeView items. | |||
$kendo-treeview-loadmore-bg | transparent | ||
Description
The background color of the Load More button in the TreeView | |||
$kendo-treeview-loadmore-text | var( --kendo-link-text, initial ) | ||
Description
The text color of the Load More button in the TreeView | |||
$kendo-treeview-loadmore-border | inherit | ||
Description
The border color of the Load More button in the TreeView | |||
$kendo-treeview-loadmore-hover-bg | transparent | ||
Description
The background color of the hovered Load More button in the TreeView | |||
$kendo-treeview-loadmore-hover-text | var( --kendo-link-hover-text, initial ) | ||
Description
The text color of the hovered Load More button in the TreeView. | |||
$kendo-treeview-loadmore-hover-border | inherit | ||
Description
The border color of the hovered Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-bg | transparent | ||
Description
The background color of the focused Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-text | var( --kendo-link-hover-text, initial ) | ||
Description
The text color of the focused Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-border | inherit | ||
Description
The border color of the focused Load More button in the TreeView. | |||
$kendo-treeview-loadmore-focus-shadow | $kendo-treeview-item-focus-shadow | ||
Description
The box shadow of the focused Load More button in the TreeView. | |||
$kendo-treeview-checkbox-wrap-padding | map.get( $kendo-spacing, .5 ) | ||
Description
The padding of the checkbox wrapper in the TreeView. |
Typography
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-enable-typography | false | ||
Description
Global typography styles for the Kendo Default theme. | |||
$kendo-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | ||
Description
Font family for monospaced text. Used for styling the code. |
Upload
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-upload-border-width | 1px | ||
Description
The width of the border around the Upload. | |||
$kendo-upload-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Upload. | |||
$kendo-upload-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Upload. | |||
$kendo-upload-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Upload. | |||
$kendo-upload-max-height | 300px | ||
Description
The maximum height of the list with uploaded items. | |||
$kendo-upload-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Upload. | |||
$kendo-upload-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Upload. | |||
$kendo-upload-border | var( --kendo-component-border, initial ) | ||
Description
The border color of the Upload. | |||
$kendo-upload-dropzone-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the Upload dropzone. | |||
$kendo-upload-dropzone-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Upload dropzone. | |||
$kendo-upload-dropzone-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Upload dropzone. | |||
$kendo-upload-dropzone-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Upload dropzone. | |||
$kendo-upload-dropzone-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the Upload dropzone. | |||
$kendo-upload-dropzone-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
The background color of the hovered Upload dropzone. | |||
$kendo-upload-status-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the Upload status message. | |||
$kendo-upload-status-text-opacity | null | ||
Description
The opacity of the Upload status message. | |||
$kendo-upload-item-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of an uploaded item. | |||
$kendo-upload-item-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of an uploaded item. | |||
$kendo-upload-multiple-items-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical spacing between uploaded batch items. | |||
$kendo-upload-validation-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
The font size of the Upload validation message. | |||
$kendo-upload-icon-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
The horizontal spacing of the Upload status icon. | |||
$kendo-upload-icon-color | var( --kendo-subtle-text, inherit ) | ||
Description
The color of the uploaded items icon. | |||
$kendo-upload-progress-thickness | 2px | ||
Description
The thickness of the Upload progress bar. | |||
$kendo-upload-progress-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Upload progress bar. | |||
$kendo-upload-success-text | if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) | ||
Description
The success text color of the Upload. | |||
$kendo-upload-success-bg | if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) | ||
Description
The success background color of the Upload progress bar. | |||
$kendo-upload-error-text | if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) | ||
Description
The error text color of the Upload. | |||
$kendo-upload-error-bg | if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) | ||
Description
The error background color of the Upload progress bar. | |||
$kendo-upload-focus-shadow | inset 0 0 0 2px rgba(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 | map.get( $kendo-spacing, 1 ) 0 0 | ||
Description
The width of the border around the Window. | |||
$kendo-window-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the Window. | |||
$kendo-window-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Window. | |||
$kendo-window-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Window. | |||
$kendo-window-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Window. | |||
$kendo-window-titlebar-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Window titlebar. | |||
$kendo-window-titlebar-padding-y | map.get( $kendo-spacing, 5 ) | ||
Description
The vertical padding of the Window titlebar. | |||
$kendo-window-titlebar-border-width | 0 | ||
Description
The width of the border of the Window titlebar. | |||
$kendo-window-titlebar-border-style | solid | ||
Description
The style of the border of the Window titlebar. | |||
$kendo-window-title-font-size | var( --kendo-font-size-xl, inherit ) | ||
Description
The font size of the title of the Window. | |||
$kendo-window-title-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the title of the Window. | |||
$kendo-window-title-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the title of the Window. | |||
$kendo-window-actions-gap | 0px | ||
Description
The spacing between the buttons in the Window titlebar. | |||
$kendo-window-action-opacity | 1 | ||
Description
OThe opacity of the buttons in the Window titlebar. | |||
$kendo-window-action-hover-opacity | 1 | ||
Description
The opacity of the hovered buttons in the Window titlebar. | |||
$kendo-window-inner-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the content of the Window. | |||
$kendo-window-inner-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the content of the Window. | |||
$kendo-window-buttongroup-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Window action buttons. | |||
$kendo-window-buttongroup-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical padding of the Window action buttons. | |||
$kendo-window-buttongroup-border-width | 0 | ||
Description
The width of the top border of the Window action buttons. | |||
$kendo-window-buttongroup-spacing | map.get( $kendo-spacing, 3 ) | ||
Description
The spacing between the Window action buttons. | |||
$kendo-window-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Window. | |||
$kendo-window-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Window. | |||
$kendo-window-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Window. | |||
$kendo-window-shadow | var( --kendo-box-shadow-depth-8, none ) | ||
Description
The box shadow of the Window. | |||
$kendo-window-focus-shadow | var( --kendo-box-shadow-depth-9, none ) | ||
Description
The box shadow of the focused Window. | |||
$kendo-window-titlebar-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Window titlebar. | |||
$kendo-window-titlebar-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the Window titlebar. | |||
$kendo-window-titlebar-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Window titlebar. | |||
$kendo-window-sizes | (
sm: 300px,
md: 800px,
lg: 1200px
) | ||
Description
The map of the width of the different Window sizes. | |||
$kendo-window-brand-colors | (
primary: primary
) | ||
Description
The theme variations for the Window. | |||
$kendo-window-theme-colors | () | ||
Description
The theme colors map for the Window. |
Wizard
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-wizard-border-width | 0px | ||
Description
The border width of the Wizard. | |||
$kendo-wizard-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Wizard. | |||
$kendo-wizard-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical padding of the Wizard. | |||
$kendo-wizard-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Wizard. | |||
$kendo-wizard-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Wizard. | |||
$kendo-wizard-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Wizard. | |||
$kendo-wizard-steps-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Wizard steps. | |||
$kendo-wizard-steps-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Wizard steps. | |||
$kendo-wizard-content-padding-x | 0px | ||
Description
The horizontal padding of the Wizard content. | |||
$kendo-wizard-content-padding-y | 0px | ||
Description
The vertical padding of the Wizard content. | |||
$kendo-wizard-content-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Wizard content. | |||
$kendo-wizard-content-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Wizard content. | |||
$kendo-wizard-buttons-margin-x | map.get( $kendo-spacing, 7 ) | ||
Description
The horizontal margin of the Wizard's Button container. | |||
$kendo-wizard-buttons-margin-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical margin of the Wizard Button container. | |||
$kendo-wizard-step-focus-border | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The outline of the focused Wizard step. |
Classnames
. k-sr-only
This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
.k-spacer
This is equivalent to flex: 1 0 auto;
. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
.k-spacer-sized
This is equivalent to flex-grow: 0;
. The spacer will not take any of the remaining space in a flex container.