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