Sass Variables
The Telerik and Kendo UI Captcha is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Textbox Sass variables, as well as the Sass variables provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-captcha-spacer | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The spacer of the Captcha. | |||
kendo-captcha-width | 280px | 280px | Default: 280pxComputed: 280px |
| Description: The width of the Captcha. | |||
kendo-captcha-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Captcha. | |||
kendo-captcha-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Captcha. | |||
kendo-captcha-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the Captcha. | |||
kendo-captcha-gap | $kendo-captcha-spacer | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-captcha-spacerComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The gap of the Captcha. | |||
kendo-captcha-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Captcha. | |||
kendo-captcha-text | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The text color of the Captcha. | |||
kendo-captcha-border | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The border color of the Captcha. | |||
kendo-captcha-image-wrap-gap | $kendo-captcha-spacer | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-captcha-spacerComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The gap of the Captcha image wrapper. | |||
kendo-captcha-image-controls-gap | $kendo-captcha-spacer | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-captcha-spacerComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The gap of the Captcha image controls. | |||
kendo-captcha-validation-message-margin-top | calc( #{$kendo-captcha-spacer} / 2 ) | calc(var(--kendo-spacing-2, 0.5rem) / 2) | Default: calc( #{$kendo-captcha-spacer} / 2 )Computed: calc(var(--kendo-spacing-2, 0.5rem) / 2) |
| Description: The top margin of the Captcha validation message. | |||
kendo-captcha-validation-message-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the Captcha validation message. | |||
kendo-captcha-validation-message-font-style | italic | italic | Default: italicComputed: italic |
| Description: The font style of the Captcha validation message. | |||
