New to Kendo UI for Vue? Start a free 30-day trial
Customizing Signature
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-signature-width | 250px | ||
Description
The default width of the signature component. | |||
| $kendo-signature-height | 84px | ||
Description
The default height of the signature component. | |||
| $kendo-signature-maximized-width | 750px | ||
Description
The default width of the maximized signature component. | |||
| $kendo-signature-maximized-height | 252px | ||
Description
The default height of the maximized signature component. | |||
| $kendo-signature-padding-x | map.get( $kendo-spacing, 1 ) | ||
Description
The horizontal paddings of the signature component. | |||
| $kendo-signature-padding-y | $kendo-signature-padding-x | ||
Description
The vertical paddings of the signature component. | |||
| $kendo-signature-disabled-opacity | .3 | ||
Description
The opacity of the disabled signature component. | |||
| $kendo-signature-line-width | 1px | ||
Description
The bottom-border width of the row line of the signature component. | |||
| $kendo-signature-line-style | dashed | ||
Description
The border style of the row line of the signature component. | |||
| $kendo-signature-line-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 )) | ||
Description
The color of the row line of the signature component. | |||
| $kendo-signature-line-disabled-color | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | ||
Description
The color of the row line of the disabled signature component. | |||
| $kendo-signature-line-size | calc( 100% - 2 * #{$kendo-signature-padding-x} ) | ||
Description
The width of the row line of the signature component. | |||
| $kendo-signature-line-bottom-offset | 33% | ||
Description
The bottom offset of the row line of the signature component. | |||
| $kendo-signature-sizes | (
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
)
) | ||
Description
The sizes map of the signature component. | |||
| $kendo-signature-actions-gap | map.get( $kendo-spacing, 1 ) | ||
Description
The gap between individual action items of the signature component | |||
| $kendo-signature-maximized-line-width | 3px | ||
Description
The bottom-border width of the row line of the maximized signature component. | |||
| $kendo-signature-lg-min-height | 110px | ||
Description
The min-height of the large size signature component. | |||
