Customizing Radio
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-radio-border-radius | 50% | ||
Description
The border radius of the RadioButton. | |||
| $kendo-radio-border-width | 1px | ||
Description
The border width of the RadioButton. | |||
| $kendo-radio-sizes | (
sm: (
size: map.get( $kendo-spacing, 4 ),
glyph-size: map.get( $kendo-spacing, 3.5 ),
indicator-size: map.get( $kendo-spacing, 2 ),
ripple-size: 300%
),
md: (
size: map.get( $kendo-spacing, 5 ),
glyph-size: map.get( $kendo-spacing, 4.5 ),
indicator-size: map.get( $kendo-spacing, 2.5 ),
ripple-size: 300%
),
lg: (
size: map.get( $kendo-spacing, 6 ),
glyph-size: map.get( $kendo-spacing, 5.5 ),
indicator-size: map.get( $kendo-spacing, 3 ),
ripple-size: 300%
)
) | ||
Description
The map with the different RadioButton sizes. | |||
| $kendo-radio-bg | $kendo-component-bg | ||
Description
The background color of the RadioButton. | |||
| $kendo-radio-text | transparent | ||
Description
The color of the RadioButton. | |||
| $kendo-radio-border | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | ||
Description
The border color of the RadioButton. | |||
| $kendo-radio-hover-bg | $kendo-radio-bg | ||
Description
The background color of the hovered RadioButton. | |||
| $kendo-radio-hover-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 )) | ||
Description
The color of the hovered RadioButton. | |||
| $kendo-radio-hover-border | $kendo-radio-border | ||
Description
The border color of the hovered RadioButton. | |||
| $kendo-radio-checked-bg | $kendo-radio-bg | ||
Description
The background color of the checked RadioButton. | |||
| $kendo-radio-checked-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The color of the checked RadioButton. | |||
| $kendo-radio-checked-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the checked RadioButton. | |||
| $kendo-radio-hover-checked-bg | $kendo-radio-bg | ||
Description
The background color of the checked and hovered RadioButton. | |||
| $kendo-radio-hover-checked-text | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The color of the checked and hovered RadioButton. | |||
| $kendo-radio-hover-checked-border | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The border color of the checked and hovered RadioButton. | |||
| $kendo-radio-focus-border | null | ||
Description
The border color of the focused RadioButton. | |||
| $kendo-radio-focus-shadow | null | ||
Description
The box shadow of the focused RadioButton. | |||
| $kendo-radio-focus-outline | 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The outline of the focused RadioButton. | |||
| $kendo-radio-focus-outline-offset | 2px | ||
Description
The outline offset of the focused RadioButton. | |||
| $kendo-radio-disabled-bg | $kendo-radio-bg | ||
Description
The background color of the disabled RadioButton. | |||
| $kendo-radio-disabled-text | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The color of the disabled RadioButton. | |||
| $kendo-radio-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The border color of the disabled RadioButton. | |||
| $kendo-radio-disabled-checked-bg | $kendo-radio-disabled-bg | ||
Description
The background color of the disabled and checked RadioButton. | |||
| $kendo-radio-disabled-checked-text | $kendo-radio-disabled-text | ||
Description
The color of the disabled and checked RadioButton. | |||
| $kendo-radio-disabled-checked-border | $kendo-radio-disabled-border | ||
Description
The border color of the disabled and checked RadioButton. | |||
| $kendo-radio-invalid-bg | $kendo-radio-bg | ||
Description
The background color of the invalid RadioButton. | |||
| $kendo-radio-invalid-text | $kendo-invalid-text | ||
Description
The color of the invalid RadioButton. | |||
| $kendo-radio-invalid-border | $kendo-invalid-border | ||
Description
The border color of the invalid RadioButton. | |||
| $kendo-radio-indicator-type | pseudo | ||
Description
The type of the RadioButton indicator. | |||
| $kendo-radio-indicator-border-radius | 50% | ||
Description
The border radius of the RadioButton indicator. | |||
| $kendo-radio-glyph-font-family | "WebComponentsIcons", monospace | ||
Description
The glyph font family of the RadioButton indicator. | |||
| $kendo-radio-checked-glyph | "\e308" | ||
Description
The glyph of the RadioButton indicator. | |||
| $kendo-radio-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the checked RadioButton indicator. | |||
| $kendo-radio-disabled-checked-image | null | ||
Description
The image of the disabled and checked RadioButton indicator. | |||
| $kendo-radio-label-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the RadioButton inside of a label. | |||
| $kendo-radio-list-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal list item margin of the RadioButton. | |||
| $kendo-radio-list-item-padding-x | 0px | ||
Description
The horizontal list item padding of the RadioButton. | |||
| $kendo-radio-list-item-padding-y | $kendo-list-md-item-padding-y | ||
Description
The vertical list item padding of the RadioButton. | |||
| $kendo-radio-list-item-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The gap between the list items of the RadioButton. | |||
| $kendo-radio-ripple-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the RadioButton ripple. | |||
| $kendo-radio-ripple-opacity | .25 | ||
Description
The opacity of the RadioButton ripple. | |||
