Customizing Signature
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-signature-width | Number | 250px | 250px |
Description
The default width of the signature component. | |||
| $kendo-signature-height | Number | 84px | 84px |
Description
The default height of the signature component. | |||
| $kendo-signature-maximized-width | Number | 750px | 750px |
Description
The default width of the maximized signature component. | |||
| $kendo-signature-maximized-height | Number | 252px | 252px |
Description
The default height of the maximized signature component. | |||
| $kendo-signature-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal paddings of the signature component. | |||
| $kendo-signature-padding-y | String | $kendo-signature-padding-x | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical paddings of the signature component. | |||
| $kendo-signature-disabled-opacity | Number | .3 | 0.3 |
Description
The opacity of the disabled signature component. | |||
| $kendo-signature-line-width | Number | 1px | 1px |
Description
The bottom-border width of the row line of the signature component. | |||
| $kendo-signature-line-style | String | dashed | dashed |
Description
The border style of the row line of the signature component. | |||
| $kendo-signature-line-color | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 )) | color-mix(in srgb, var(--kendo-color-info, #0a7eff) 40%, transparent) |
Description
The color of the row line of the signature component. | |||
| $kendo-signature-line-disabled-color | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The color of the row line of the disabled signature component. | |||
| $kendo-signature-line-size | Calculation | calc( 100% - 2 * #{$kendo-signature-padding-x} ) | calc(100% - 2 * var(--kendo-spacing-1, 0.25rem)) |
Description
The width of the row line of the signature component. | |||
| $kendo-signature-line-bottom-offset | Number | 33% | 33% |
Description
The bottom offset of the row line of the signature component. | |||
| $kendo-signature-sizes | Map | (
sm: (
padding-x: $kendo-signature-sm-padding-x,
padding-y: $kendo-signature-sm-padding-y,
line-size: $kendo-signature-sm-line-size
),
md: (
padding-x: $kendo-signature-md-padding-x,
padding-y: $kendo-signature-md-padding-y,
line-size: $kendo-signature-md-line-size
),
lg: (
padding-x: $kendo-signature-lg-padding-x,
padding-y: $kendo-signature-lg-padding-y,
line-size: $kendo-signature-lg-line-size
)
) | (sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), line-size: calc(100% - 2 * var(--kendo-spacing-1, 0.25rem))), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), line-size: calc(100% - 2 * var(--kendo-spacing-1, 0.25rem))), lg: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), line-size: calc(100% - 2 * var(--kendo-spacing-1, 0.25rem)))) |
Description
The sizes map of the signature component. | |||
| $kendo-signature-actions-gap | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The gap between individual action items of the signature component | |||
| $kendo-signature-maximized-line-width | Number | 3px | 3px |
Description
The bottom-border width of the row line of the maximized signature component. | |||
| $kendo-signature-lg-min-height | Number | 110px | 110px |
Description
The min-height of the large size signature component. | |||
