New to Kendo UI for Angular? Start a free 30-day trial

Customizing Signature

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-signature-widthNumber250px250px
Description
The default width of the signature component.
$kendo-signature-heightNumber84px84px
Description
The default height of the signature component.
$kendo-signature-maximized-widthNumber750px750px
Description
The default width of the maximized signature component.
$kendo-signature-maximized-heightNumber252px252px
Description
The default height of the maximized signature component.
$kendo-signature-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal paddings of the signature component.
$kendo-signature-padding-yString$kendo-signature-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The vertical paddings of the signature component.
$kendo-signature-disabled-opacityNumber.30.3
Description
The opacity of the disabled signature component.
$kendo-signature-line-widthNumber1px1px
Description
The bottom-border width of the row line of the signature component.
$kendo-signature-line-styleStringdasheddashed
Description
The border style of the row line of the signature component.
$kendo-signature-line-colorStringif($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-colorStringif($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-sizeCalculationcalc( 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-offsetNumber33%33%
Description
The bottom offset of the row line of the signature component.
$kendo-signature-sizesMap( 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-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The gap between individual action items of the signature component
$kendo-signature-maximized-line-widthNumber3px3px
Description
The bottom-border width of the row line of the maximized signature component.
$kendo-signature-lg-min-heightNumber110px110px
Description
The min-height of the large size signature component.

In this article

Not finding the help you need?