Customizing Form
Variables
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-form-spacer | Calculation | calc( #{$kendo-padding-md-x} * 2 ) | calc(var(--kendo-spacing-2, 0.5rem) * 2) |
Description
The padding of the inline Form. | |||
$kendo-form-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Form. | |||
$kendo-form-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Form. | |||
$kendo-form-line-height-em | Calculation | $kendo-line-height-em | calc(1.4285714286 * 1em) |
Description
The line height of the Form in em units. | |||
$kendo-form-sm-line-height | String | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) |
Description
The line height of the small Form. | |||
$kendo-form-lg-line-height | String | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) |
Description
The line height of the large Form. | |||
$kendo-form-fieldset-margin | List | 2em 0 0 | 2em 0 0 |
Description
The margin of the Form fieldset. | |||
$kendo-form-fieldset-padding | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The padding of the Form fieldset. | |||
$kendo-form-legend-margin | List | 0 0 k-spacing(3) | 0 0 var(--kendo-spacing-3, 0.75rem) |
Description
The margin of the Form legend. | |||
$kendo-form-legend-padding | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The padding of the Form legend. | |||
$kendo-form-legend-border-width | List | 0 0 k-spacing(0.5) | 0 0 var(--kendo-spacing-0\.5, 0.125rem) |
Description
The border width of the Form legend. | |||
$kendo-form-legend-border-style | String | solid | solid |
Description
The border style of the Form legend. | |||
$kendo-form-legend-border-color | String | var( --kendo-component-border, initial ) | var(--kendo-component-border, initial) |
Description
The border color of the Form legend. | |||
$kendo-form-legend-width | Number | 100% | 100% |
Description
The width of the Form legend. | |||
$kendo-form-legend-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Form legend. | |||
$kendo-form-legend-text-transform | String | uppercase | uppercase |
Description
The text capitalization of the Form legend. | |||
$kendo-form-label-margin-bottom | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The bottom margin of the Form label. | |||
$kendo-form-label-font-weight | String | var( --kendo-font-weight-bold, inherit ) | var(--kendo-font-weight-bold, inherit) |
Description
The font weight of the form label | |||
$kendo-form-button-margin-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal margin of the Form buttons. | |||
$kendo-form-hint-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Form hint. | |||
$kendo-form-hint-font-style | String | normal | normal |
Description
The font style of the Form hint. | |||
$kendo-form-hint-margin-top | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The top margin of the Form hint. | |||
$kendo-form-hint-text | String | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | var(--kendo-color-subtle, #605e5c) |
Description
The text color of the Form hint. | |||
$kendo-form-sm-rows-spacing | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The row spacing of the small Form. | |||
$kendo-form-md-rows-spacing | String | $kendo-form-sm-rows-spacing | var(--kendo-spacing-3, 0.75rem) |
Description
The row spacing of the medium Form. | |||
$kendo-form-lg-rows-spacing | String | $kendo-form-sm-rows-spacing | var(--kendo-spacing-3, 0.75rem) |
Description
The row spacing of the large Form. | |||
$kendo-form-separator-margin | List | k-spacing(3) 0 0 | var(--kendo-spacing-3, 0.75rem) 0 0 |
Description
The margin of the Form separator. | |||
$kendo-form-separator-border-color | String | $kendo-form-legend-border-color | var(--kendo-component-border, initial) |
Description
The border color of the Form separator. | |||
$kendo-horizontal-form-label-padding-top | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The top padding of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-margin-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal margin of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-width | Number | 25% | 25% |
Description
The width of the label in the horizontal Form. | |||
$kendo-horizontal-form-label-align | String | flex-end | flex-end |
Description
The horizontal alignment of the label in the horizontal Form. | |||
$kendo-horizontal-form-field-wrap-max-width | Calculation | calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) | calc(100% - 25% - var(--kendo-spacing-2, 0.5rem)) |
Description
The maximum width of the field wrap in the horizontal Form. | |||
$kendo-inline-form-element-width | Number | 25% | 25% |
Description
The width of the inline Form element. | |||
$kendo-forms-invalid-color | String | var( --kendo-invalid-text, initial ) | var(--kendo-invalid-text, initial) |
Description
The invalid text color of the Form. | |||
$kendo-label-optional-margin-x | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The horizontal margin of the optional label in the Form. | |||
$kendo-label-optional-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the optional label in the Form. | |||
$kendo-label-optional-font-style | String | normal | normal |
Description
The font style of the optional label in the Form. | |||
$kendo-fieldset-margin | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The margin of the Form fieldset. | |||
$kendo-fieldset-font-size | String | var( --kendo-font-size-xl, inherit ) | var(--kendo-font-size-xl, inherit) |
Description
The font size of the Form fieldset. | |||
$kendo-fieldset-bg | Color | transparent | transparent |
Description
The background color of the Form fieldset. | |||
$kendo-fieldset-text | String | inherit | inherit |
Description
The text color of the Form fieldset. | |||
$kendo-fieldset-border | String | initial | initial |
Description
The border color of the Form fieldset. | |||
$kendo-fieldset-legend-bg | Color | transparent | transparent |
Description
The background color of the Form legend. | |||
$kendo-fieldset-legend-text | String | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | var(--kendo-color-subtle, #605e5c) |
Description
The text color of the Form legend. | |||
$kendo-fieldset-legend-border | String | initial | initial |
Description
The border color of the Form legend. | |||
$kendo-form-sizes | Map | (
sm: (
form-rows-spacing: $kendo-form-sm-rows-spacing
),
md: (
form-rows-spacing: $kendo-form-md-rows-spacing
),
lg: (
form-rows-spacing: $kendo-form-lg-rows-spacing
)
) | (sm: (form-rows-spacing: var(--kendo-spacing-3, 0.75rem)), md: (form-rows-spacing: var(--kendo-spacing-3, 0.75rem)), lg: (form-rows-spacing: var(--kendo-spacing-3, 0.75rem))) |
Description
The sizes map for the Form. |