Sass Variables
The Telerik and Kendo UI CheckBox enables you to configure and customize its appearance through the available Sass variables.
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-checkbox-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The border width of the CheckBox. | |||
kendo-checkbox-sm-size | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3) Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The size of a small CheckBox. | |||
kendo-checkbox-md-size | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The size of a medium CheckBox. | |||
kendo-checkbox-lg-size | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) | Default: k-spacing(5) Computed: var(--kendo-spacing-5, 1.25rem) |
Description: The size of a large CheckBox. | |||
kendo-checkbox-sm-glyph-size | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) | Default: k-spacing(2.5) Computed: var(--kendo-spacing-2\.5, 0.625rem) |
Description: The glyph size of a small CheckBox. | |||
kendo-checkbox-md-glyph-size | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) | Default: k-spacing(3.5) Computed: var(--kendo-spacing-3\.5, 0.875rem) |
Description: The glyph size of a medium CheckBox. | |||
kendo-checkbox-lg-glyph-size | k-spacing(4.5) | var(--kendo-spacing-4\.5, 1.125rem) | Default: k-spacing(4.5) Computed: var(--kendo-spacing-4\.5, 1.125rem) |
Description: The glyph size of a large CheckBox. | |||
kendo-checkbox-sm-ripple-size | 300% | 300% | Default: 300% Computed: 300% |
Description: The ripple size of a small CheckBox. | |||
kendo-checkbox-md-ripple-size | 300% | 300% | Default: 300% Computed: 300% |
Description: The ripple size of a medium CheckBox. | |||
kendo-checkbox-lg-ripple-size | 300% | 300% | Default: 300% Computed: 300% |
Description: The ripple size of a large CheckBox. | |||
kendo-checkbox-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the CheckBox. | |||
kendo-checkbox-text | null | null | Default: null Computed: null |
Description: The text color of the CheckBox. | |||
kendo-checkbox-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the CheckBox. | |||
kendo-checkbox-hover-bg | null | null | Default: null Computed: null |
Description: The background color of the hovered CheckBox. | |||
kendo-checkbox-hover-text | null | null | Default: null Computed: null |
Description: The text color of the hovered CheckBox. | |||
kendo-checkbox-hover-border | null | null | Default: null Computed: null |
Description: The border color of the hovered CheckBox. | |||
kendo-checkbox-checked-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primary Computed: var(--kendo-color-primary, #ff6358) |
Description: The background color of the checked CheckBox. | |||
kendo-checkbox-checked-text | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) | var(--kendo-color-on-primary, #ffffff) | Default: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) Computed: var(--kendo-color-on-primary, #ffffff) |
Description: The text color of the checked CheckBox. | |||
kendo-checkbox-checked-border | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-checkbox-checked-bg Computed: var(--kendo-color-primary, #ff6358) |
Description: The border color of the checked CheckBox. | |||
kendo-checkbox-indeterminate-bg | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-checkbox-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the indeterminate CheckBox. | |||
kendo-checkbox-indeterminate-text | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-checkbox-checked-bg Computed: var(--kendo-color-primary, #ff6358) |
Description: The text color of the indeterminate CheckBox. | |||
kendo-checkbox-indeterminate-border | $kendo-checkbox-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-checkbox-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the indeterminate CheckBox. | |||
kendo-checkbox-focus-border | null | null | Default: null Computed: null |
Description: The border color of the focused CheckBox. | |||
kendo-checkbox-focus-shadow | 0 0 0 2px rgba(0, 0, 0, .06) | (0 0 0 2px rgba(0, 0, 0, 0.06)) | Default: 0 0 0 2px rgba(0, 0, 0, .06) Computed: (0 0 0 2px rgba(0, 0, 0, 0.06)) |
Description: The box shadow of the focused CheckBox. | |||
kendo-checkbox-focus-checked-border | null | null | Default: null Computed: null |
Description: The border color of the focused and checked CheckBox. | |||
kendo-checkbox-focus-checked-shadow | 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) | (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) | Default: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) Computed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) |
Description: The box shadow of the focused and checked CheckBox. | |||
kendo-checkbox-disabled-bg | null | null | Default: null Computed: null |
Description: The background color of the disabled CheckBox. | |||
kendo-checkbox-disabled-text | null | null | Default: null Computed: null |
Description: The text color of the disabled CheckBox. | |||
kendo-checkbox-disabled-border | null | null | Default: null Computed: null |
Description: The border color of the disabled CheckBox. | |||
kendo-checkbox-disabled-checked-bg | null | null | Default: null Computed: null |
Description: The background color of the disabled and checked CheckBox. | |||
kendo-checkbox-disabled-checked-text | null | null | Default: null Computed: null |
Description: The text color of the disabled and checked CheckBox. | |||
kendo-checkbox-disabled-checked-border | null | null | Default: null Computed: null |
Description: The border color of the disabled and checked CheckBox. | |||
kendo-checkbox-invalid-bg | null | null | Default: null Computed: null |
Description: The background color of an invalid CheckBox. | |||
kendo-checkbox-invalid-text | $kendo-invalid-text | var(--kendo-color-error, #f31700) | Default: $kendo-invalid-text Computed: var(--kendo-color-error, #f31700) |
Description: The text color of an invalid CheckBox. | |||
kendo-checkbox-invalid-border | $kendo-invalid-border | var(--kendo-color-error, #f31700) | Default: $kendo-invalid-border Computed: var(--kendo-color-error, #f31700) |
Description: The border color of an invalid CheckBox. | |||
kendo-checkbox-indicator-type | image | image | Default: image Computed: image |
Description: The type of the CheckBox indicator. | |||
kendo-checkbox-glyph-font-family | "WebComponentsIcons", monospace | ("WebComponentsIcons", monospace) | Default: "WebComponentsIcons", monospace Computed: ("WebComponentsIcons", monospace) |
Description: The font family of the CheckBox indicator glyph. | |||
kendo-checkbox-checked-glyph | "\e118" | "\e118" | Default: "\e118" Computed: "\e118" |
Description: The glyph of the CheckBox indicator. | |||
kendo-checkbox-indeterminate-glyph | "\e121" | "\e121" | Default: "\e121" Computed: "\e121" |
Description: The glyph of the indeterminate CheckBox indicator. | |||
kendo-checkbox-checked-image | k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") | Default: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) Computed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") |
Description: The image for a checked CheckBox indicator. | |||
kendo-checkbox-indeterminate-image | k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e") | Default: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) Computed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e") |
Description: The image for a indeterminate CheckBox indicator. | |||
kendo-checkbox-label-margin-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1) Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The horizontal margin of the CheckBox inside a label. | |||
kendo-checkbox-list-spacing | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The spacing between the items in a horizontal CheckBox list. | |||
kendo-checkbox-list-item-padding-x | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0) Computed: var(--kendo-spacing-0, 0px) |
Description: The horizontal padding of the CheckBox list items. | |||
kendo-checkbox-list-item-padding-y | $kendo-list-md-item-padding-y | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-list-md-item-padding-y Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The vertical padding of the CheckBox list items. | |||
kendo-checkbox-ripple-bg | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-checkbox-checked-bg Computed: var(--kendo-color-primary, #ff6358) |
Description: The background color of the CheckBox' ripple. | |||
kendo-checkbox-ripple-opacity | .25 | 0.25 | Default: .25 Computed: 0.25 |
Description: The opacity of the CheckBox' ripple. |