Sass Variables
The Telerik and Kendo UI RadioButton enables you to configure and customize its appearance through the available Sass variables.
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-radio-radius | 50% | 50% | Default: 50% Computed: 50% |
Description: The border radius of the RadioButton. | |||
kendo-radio-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The border width of the RadioButton. | |||
kendo-radio-sm-size | k-map-get( $kendo-spacing, 3 ) | 12px | Default: k-map-get( $kendo-spacing, 3 ) Computed: 12px |
Description: The size of a small RadioButton. | |||
kendo-radio-md-size | k-map-get( $kendo-spacing, 4 ) | 16px | Default: k-map-get( $kendo-spacing, 4 ) Computed: 16px |
Description: The size of a medium RadioButton. | |||
kendo-radio-lg-size | k-map-get( $kendo-spacing, 5 ) | 20px | Default: k-map-get( $kendo-spacing, 5 ) Computed: 20px |
Description: The size of a large RadioButton. | |||
kendo-radio-sm-glyph-size | k-map-get( $kendo-spacing, 2.5 ) | 10px | Default: k-map-get( $kendo-spacing, 2.5 ) Computed: 10px |
Description: The glyph size of a small RadioButton. | |||
kendo-radio-md-glyph-size | k-map-get( $kendo-spacing, 3.5 ) | 14px | Default: k-map-get( $kendo-spacing, 3.5 ) Computed: 14px |
Description: The glyph size of a medium RadioButton. | |||
kendo-radio-lg-glyph-size | k-map-get( $kendo-spacing, 4.5 ) | 18px | Default: k-map-get( $kendo-spacing, 4.5 ) Computed: 18px |
Description: The glyph size of a large RadioButton. | |||
kendo-radio-sm-ripple-size | 300% | 300% | Default: 300% Computed: 300% |
Description: The ripple size of a small RadioButton. | |||
kendo-radio-md-ripple-size | 300% | 300% | Default: 300% Computed: 300% |
Description: The ripple size of a medium RadioButton. | |||
kendo-radio-lg-ripple-size | 300% | 300% | Default: 300% Computed: 300% |
Description: The ripple size of a large RadioButton. | |||
kendo-radio-sizes | (
sm: (
size: $kendo-radio-sm-size,
glyph-size: $kendo-radio-sm-glyph-size,
ripple-size: $kendo-radio-sm-ripple-size
),
md: (
size: $kendo-radio-md-size,
glyph-size: $kendo-radio-md-glyph-size,
ripple-size: $kendo-radio-md-ripple-size
),
lg: (
size: $kendo-radio-lg-size,
glyph-size: $kendo-radio-lg-glyph-size,
ripple-size: $kendo-radio-lg-ripple-size
)
) | (sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%)) | Default: (
sm: (
size: $kendo-radio-sm-size,
glyph-size: $kendo-radio-sm-glyph-size,
ripple-size: $kendo-radio-sm-ripple-size
),
md: (
size: $kendo-radio-md-size,
glyph-size: $kendo-radio-md-glyph-size,
ripple-size: $kendo-radio-md-ripple-size
),
lg: (
size: $kendo-radio-lg-size,
glyph-size: $kendo-radio-lg-glyph-size,
ripple-size: $kendo-radio-lg-ripple-size
)
) Computed: (sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%)) |
Description: The map with the different RadioButton sizes. | |||
kendo-radio-bg | $kendo-checkbox-bg | #ffffff | Default: $kendo-checkbox-bg Computed: #ffffff |
Description: The background color of the RadioButton. | |||
kendo-radio-text | $kendo-checkbox-text | null | Default: $kendo-checkbox-text Computed: null |
Description: The color of the RadioButton. | |||
kendo-radio-border | $kendo-checkbox-border | rgba(0, 0, 0, 0.08) | Default: $kendo-checkbox-border Computed: rgba(0, 0, 0, 0.08) |
Description: The border color of the RadioButton. | |||
kendo-radio-hover-bg | $kendo-checkbox-hover-bg | null | Default: $kendo-checkbox-hover-bg Computed: null |
Description: The background color of the hovered RadioButton. | |||
kendo-radio-hover-text | $kendo-checkbox-hover-text | null | Default: $kendo-checkbox-hover-text Computed: null |
Description: The color of the hovered RadioButton. | |||
kendo-radio-hover-border | $kendo-checkbox-hover-border | null | Default: $kendo-checkbox-hover-border Computed: null |
Description: The border color of the hovered RadioButton. | |||
kendo-radio-checked-bg | $kendo-checkbox-checked-bg | #ff6358 | Default: $kendo-checkbox-checked-bg Computed: #ff6358 |
Description: The background color of the checked RadioButton. | |||
kendo-radio-checked-text | $kendo-checkbox-checked-text | white | Default: $kendo-checkbox-checked-text Computed: white |
Description: The color of the checked RadioButton. | |||
kendo-radio-checked-border | $kendo-checkbox-checked-border | #ff6358 | Default: $kendo-checkbox-checked-border Computed: #ff6358 |
Description: The border color of the checked RadioButton. | |||
kendo-radio-focus-border | $kendo-checkbox-focus-border | null | Default: $kendo-checkbox-focus-border Computed: null |
Description: The border color of the focused RadioButton. | |||
kendo-radio-focus-shadow | $kendo-checkbox-focus-shadow | 0 0 0 2px rgba(0, 0, 0, 0.06) | Default: $kendo-checkbox-focus-shadow Computed: 0 0 0 2px rgba(0, 0, 0, 0.06) |
Description: The box shadow of the focused RadioButton. | |||
kendo-radio-focus-checked-border | $kendo-checkbox-focus-checked-border | null | Default: $kendo-checkbox-focus-checked-border Computed: null |
Description: The border color of the focused and checked RadioButton. | |||
kendo-radio-focus-checked-shadow | $kendo-checkbox-focus-checked-shadow | 0 0 0 2px rgba(255, 99, 88, 0.3) | Default: $kendo-checkbox-focus-checked-shadow Computed: 0 0 0 2px rgba(255, 99, 88, 0.3) |
Description: The box shadow of the focused and checked RadioButton. | |||
kendo-radio-disabled-bg | $kendo-checkbox-disabled-bg | null | Default: $kendo-checkbox-disabled-bg Computed: null |
Description: The background color of the disabled RadioButton. | |||
kendo-radio-disabled-text | $kendo-checkbox-disabled-text | null | Default: $kendo-checkbox-disabled-text Computed: null |
Description: The color of the disabled RadioButton. | |||
kendo-radio-disabled-border | $kendo-checkbox-disabled-border | null | Default: $kendo-checkbox-disabled-border Computed: null |
Description: The border color of the disabled RadioButton. | |||
kendo-radio-disabled-checked-bg | $kendo-checkbox-disabled-checked-bg | null | Default: $kendo-checkbox-disabled-checked-bg Computed: null |
Description: The background color of the disabled and checked RadioButton. | |||
kendo-radio-disabled-checked-text | $kendo-checkbox-disabled-checked-text | null | Default: $kendo-checkbox-disabled-checked-text Computed: null |
Description: The color of the disabled and checked RadioButton. | |||
kendo-radio-disabled-checked-border | $kendo-checkbox-disabled-checked-border | null | Default: $kendo-checkbox-disabled-checked-border Computed: null |
Description: The border color of disabled and checked RadioButton. | |||
kendo-radio-invalid-bg | $kendo-checkbox-invalid-bg | null | Default: $kendo-checkbox-invalid-bg Computed: null |
Description: The background color of the invalid RadioButton. | |||
kendo-radio-invalid-text | $kendo-checkbox-invalid-text | #f31700 | Default: $kendo-checkbox-invalid-text Computed: #f31700 |
Description: The color of the invalid RadioButton. | |||
kendo-radio-invalid-border | $kendo-checkbox-invalid-border | #f31700 | Default: $kendo-checkbox-invalid-border Computed: #f31700 |
Description: The border color of the invalid RadioButton. | |||
kendo-radio-indicator-type | image | image | Default: image Computed: image |
Description: The type of the RadioButton indicator. | |||
kendo-radio-glyph-font-family | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace | Default: "WebComponentsIcons", monospace Computed: "WebComponentsIcons", monospace |
Description: The font family of the RadioButton indicator glyph. | |||
kendo-radio-checked-glyph | "\e308" | "\e308" | Default: "\e308" Computed: "\e308" |
Description: The glyph of the RadioButton indicator. | |||
kendo-radio-checked-image | k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e") | Default: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) Computed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e") |
Description: The image of the checked RadioButton indicator. | |||
kendo-radio-disabled-checked-image | null | null | Default: null Computed: null |
Description: The image of the disabled and checked RadioButton indicator. | |||
kendo-radio-label-margin-x | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 ) Computed: 4px |
Description: The horizontal margin of the RadioButton inside of a label. | |||
kendo-radio-list-spacing | k-map-get( $kendo-spacing, 4 ) | 16px | Default: k-map-get( $kendo-spacing, 4 ) Computed: 16px |
Description: The horizontal list item margin of the RadioButton. | |||
kendo-radio-list-item-padding-x | 0px | 0px | Default: 0px Computed: 0px |
Description: The horizontal list item padding of the RadioButton. | |||
kendo-radio-list-item-padding-y | $kendo-list-md-item-padding-y | 4px | Default: $kendo-list-md-item-padding-y Computed: 4px |
Description: The vertical list item padding of the RadioButton. | |||
kendo-radio-ripple-bg | $kendo-radio-checked-bg | #ff6358 | Default: $kendo-radio-checked-bg Computed: #ff6358 |
Description: The background color of the RadioButton ripple. | |||
kendo-radio-ripple-opacity | .25 | 0.25 | Default: .25 Computed: 0.25 |
Description: The opacity of the RadioButton ripple. |