Sass Variables
To configure and customize the Telerik and Kendo UI OTP Input, use not only its dedicated Sass variables but also the Sass variables provided by the TextBox component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-otp-gap | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The gap between the items in the OTP. | |||
kendo-otp-sm-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The gap between the items in the small OTP. | |||
kendo-otp-md-gap | $kendo-otp-gap | var(--kendo-spacing-1\.5, 0.375rem) | Default: $kendo-otp-gapComputed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The gap between the items in the medium OTP. | |||
kendo-otp-lg-gap | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The gap between the items in the large OTP. | |||
kendo-otp-separator-padding-x | $kendo-otp-gap | var(--kendo-spacing-1\.5, 0.375rem) | Default: $kendo-otp-gapComputed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The horizontal padding of the OTP separator. | |||
kendo-otp-sm-separator-padding-x | $kendo-otp-sm-gap | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-otp-sm-gapComputed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal padding of the small OTP separator. | |||
kendo-otp-md-separator-padding-x | $kendo-otp-separator-padding-x | var(--kendo-spacing-1\.5, 0.375rem) | Default: $kendo-otp-separator-padding-xComputed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The horizontal padding of the medium OTP separator. | |||
kendo-otp-lg-separator-padding-x | $kendo-otp-lg-gap | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-otp-lg-gapComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the large OTP separator. | |||
kendo-otp-input-width | $kendo-input-calc-size | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px)) | Default: $kendo-input-calc-sizeComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px)) |
| Description: The horizontal padding of the OTP separator. | |||
kendo-otp-sm-input-width | $kendo-input-sm-calc-size | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + (2px)) | Default: $kendo-input-sm-calc-sizeComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + (2px)) |
| Description: The horizontal padding of the small OTP separator. | |||
kendo-otp-md-input-width | $kendo-otp-input-width | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px)) | Default: $kendo-otp-input-widthComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + (2px)) |
| Description: The horizontal padding of the medium OTP separator. | |||
kendo-otp-lg-input-width | $kendo-input-lg-calc-size | calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px)) | Default: $kendo-input-lg-calc-sizeComputed: calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + (2px)) |
| Description: The horizontal padding of the large OTP separator. | |||
