Customizing Common
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-icon-size | Number | 16px | 16px |
Description
Icon size. | |||
| $kendo-icon-size-xs | Calculation | calc( #{$kendo-icon-size} * .75 ) | calc(16px * 0.75) |
Description
xtra small icon size. | |||
| $kendo-icon-size-sm | Calculation | calc( #{$kendo-icon-size} * .875 ) | calc(16px * 0.875) |
Description
Small icon size. | |||
| $kendo-icon-size-md | Number | $kendo-icon-size | 16px |
Description
Medium icon size. | |||
| $kendo-icon-size-lg | Calculation | calc( #{$kendo-icon-size} * 1.25 ) | calc(16px * 1.25) |
Description
Large icon size. | |||
| $kendo-icon-size-xl | Calculation | calc( #{$kendo-icon-size} * 1.5 ) | calc(16px * 1.5) |
Description
Extra large icon size. | |||
| $kendo-icon-size-xxl | Calculation | calc( #{$kendo-icon-size} * 2 ) | calc(16px * 2) |
Description
Double extra large icon size. | |||
| $kendo-icon-size-xxxl | Calculation | calc( #{$kendo-icon-size} * 3 ) | calc(16px * 3) |
Description
Triple extra large icon size. | |||
| $kendo-padding-x | Number | 8px | 8px |
Description
Horizontal padding. | |||
| $kendo-padding-y | Number | 4px | 4px |
Description
Vertical padding. | |||
| $kendo-padding-sm-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
Small horizontal padding. | |||
| $kendo-padding-sm-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
Small vertical padding. | |||
| $kendo-padding-md-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
Medium horizontal padding. | |||
| $kendo-padding-md-y | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
Medium vertical padding. | |||
| $kendo-padding-lg-x | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
Large horizontal padding. | |||
| $kendo-padding-lg-y | Number | k-map-get( $kendo-spacing, 1.5 ) | 6px |
Description
Large vertical padding. | |||
| $kendo-border-radius | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
Border radius for all components. | |||
| $kendo-border-radius-sm | Number | $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) | 2px |
Description
Small border radius. | |||
| $kendo-border-radius-md | Number | $kendo-border-radius | 4px |
Description
Medium border radius. | |||
| $kendo-border-radius-lg | Number | $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) | 6px |
Description
Large border radius. | |||
| $kendo-body-bg | Color | $kendo-color-white | #ffffff |
Description
Background color of the body. | |||
| $kendo-body-text | Color | #424242 | #424242 |
Description
Text color of the body. | |||
| $kendo-subtle-text | Color | #666666 | #666666 |
Description
Subtle text color. | |||
| $kendo-link-text | Color | $kendo-color-primary | #ff6358 |
Description
Text color of the links. | |||
| $kendo-link-hover-text | Color | $kendo-color-primary-darker | #d6534a |
Description
Text color of the links on hover. | |||
| $kendo-focus-shadow | List | inset 0 0 0 2px rgba(0, 0, 0, .13) | inset 0 0 0 2px rgba(0, 0, 0, 0.13) |
Description
Box shadow of focused items. | |||
| $kendo-transition | List | color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out | color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out |
Description
Transition used across all components. | |||
| $kendo-disabled-filter | String | grayscale(.1) | grayscale(0.1) |
Description
Filter used for disabled items. | |||
| $kendo-disabled-opacity | Number | .6 | 0.6 |
Description
Opacity used for disabled items. | |||
| $kendo-base-bg | Color | #fafafa | #fafafa |
Description
The background of the components' chrome area. | |||
| $kendo-base-text | Color | $kendo-body-text | #424242 |
Description
The text color of the components' chrome area. | |||
| $kendo-base-border | Color | rgba(black, 0.08) | rgba(0, 0, 0, 0.08) |
Description
The border color of the components' chrome area. | |||
| $kendo-base-gradient | List | rgba(black, 0), rgba(black, 0.02) | rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) |
Description
The gradient background of the components' chrome area. | |||
| $kendo-hover-bg | Color | k-try-shade($kendo-base-bg, 0.5) | #f0f0f0 |
Description
The background of hovered items. | |||
| $kendo-hover-text | Color | $kendo-base-text | #424242 |
Description
The text color of hovered items. | |||
| $kendo-hover-border | Color | $kendo-base-border | rgba(0, 0, 0, 0.08) |
Description
The border color of hovered items. | |||
| $kendo-hover-gradient | List | $kendo-base-gradient | rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) |
Description
The gradient background of hovered items. | |||
| $kendo-selected-bg | Color | $kendo-color-primary | #ff6358 |
Description
The background of selected items. | |||
| $kendo-selected-text | Color | k-contrast-legacy($kendo-selected-bg) | white |
Description
The text color of selected items. | |||
| $kendo-selected-border | Color | $kendo-base-border | rgba(0, 0, 0, 0.08) |
Description
The border color of selected items. | |||
| $kendo-selected-gradient | List | $kendo-base-gradient | rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) |
Description
The gradient background of selected items. | |||
| $kendo-selected-hover-bg | Color | k-try-shade($kendo-selected-bg, 0.5) | #f55f54 |
Description
The background of selected and hovered items. | |||
| $kendo-selected-hover-text | Color | $kendo-selected-text | white |
Description
The text color of selected and hovered items. | |||
| $kendo-selected-hover-border | Color | $kendo-base-border | rgba(0, 0, 0, 0.08) |
Description
The border of selected and hovered items. | |||
| $kendo-selected-hover-gradient | List | $kendo-base-gradient | rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) |
Description
The gradient of selected and hovered items. | |||
| $kendo-disabled-text | Color | #8f8f8f | #8f8f8f |
Description
Text color of disabled items. | |||
