Sass Variables
The Telerik and Kendo UI Form enables you to configure and customize its appearance through the available Sass variables.
As a layout component, the Form can accommodate various other components. To configure and customize the appearance of these inner components, use their respective Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-form-spacer | $kendo-padding-md-x * 2 | 16px | Default: $kendo-padding-md-x * 2Computed: 16px |
| Description: The padding of the inline Form. | |||
kendo-form-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the Form. | |||
kendo-form-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line height of the Form. | |||
kendo-form-line-height-em | calc( #{$kendo-form-line-height} * 1em ) | calc(1.4285714286 * 1em) | Default: calc( #{$kendo-form-line-height} * 1em )Computed: calc(1.4285714286 * 1em) |
| Description: The line height of the Form in em units. | |||
kendo-form-sm-line-height | $kendo-line-height-sm | 1.25 | Default: $kendo-line-height-smComputed: 1.25 |
| Description: The line height of the small Form. | |||
kendo-form-lg-line-height | $kendo-line-height-lg | 1.5 | Default: $kendo-line-height-lgComputed: 1.5 |
| Description: The line height of the large Form. | |||
kendo-form-fieldset-margin | 2em 0 0 | 2em 0 0 | Default: 2em 0 0Computed: 2em 0 0 |
| Description: The margin of the Form fieldset. | |||
kendo-form-fieldset-padding | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The padding of the Form fieldset. | |||
kendo-form-legend-margin | 0 0 1em | 0 0 1em | Default: 0 0 1emComputed: 0 0 1em |
| Description: The margin of the Form legend. | |||
kendo-form-legend-padding | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The padding of the Form legend. | |||
kendo-form-legend-border-width | 0 0 2px | 0 0 2px | Default: 0 0 2pxComputed: 0 0 2px |
| Description: The border width of the Form legend. | |||
kendo-form-legend-border-style | solid | solid | Default: solidComputed: solid |
| Description: The border style of the Form legend. | |||
kendo-form-legend-border-color | $kendo-component-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: The border color of the Form legend. | |||
kendo-form-legend-width | 100% | 100% | Default: 100%Computed: 100% |
| Description: The width of the Form legend. | |||
kendo-form-legend-font-size | 14px | 14px | Default: 14pxComputed: 14px |
| Description: The font size of the Form legend. | |||
kendo-form-legend-text-transform | uppercase | uppercase | Default: uppercaseComputed: uppercase |
| Description: The text capitalization of the Form legend. | |||
kendo-form-label-margin-bottom | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The bottom margin of the Form label. | |||
kendo-form-button-margin-x | 8px | 8px | Default: 8pxComputed: 8px |
| Description: The horizontal margin of the Form buttons. | |||
kendo-form-hint-font-size | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The font size of the Form hint. | |||
kendo-form-hint-font-style | italic | italic | Default: italicComputed: italic |
| Description: The font style of the Form hint. | |||
kendo-form-hint-margin-top | 4px | 4px | Default: 4pxComputed: 4px |
| Description: The top margin of the Form hint. | |||
kendo-form-sm-rows-spacing | k-map-get( $kendo-spacing, 2.5 ) | 10px | Default: k-map-get( $kendo-spacing, 2.5 )Computed: 10px |
| Description: The row spacing of the small Form. | |||
kendo-form-md-rows-spacing | k-map-get( $kendo-spacing, 3.5 ) | 14px | Default: k-map-get( $kendo-spacing, 3.5 )Computed: 14px |
| Description: The row spacing of the medium Form. | |||
kendo-form-lg-rows-spacing | k-map-get( $kendo-spacing, 4.5 ) | 18px | Default: k-map-get( $kendo-spacing, 4.5 )Computed: 18px |
| Description: The row spacing of the large Form. | |||
kendo-form-separator-margin | $kendo-form-md-rows-spacing 0 0 | 14px 0 0 | Default: $kendo-form-md-rows-spacing 0 0Computed: 14px 0 0 |
| Description: The margin of the Form separator. | |||
kendo-form-separator-border-color | $kendo-form-legend-border-color | rgba(0, 0, 0, 0.08) | Default: $kendo-form-legend-border-colorComputed: rgba(0, 0, 0, 0.08) |
| Description: The border color of the Form separator. | |||
kendo-horizontal-form-label-padding-top | 5px | 5px | Default: 5pxComputed: 5px |
| Description: The top padding of the label in the horizontal Form. | |||
kendo-horizontal-form-label-margin-x | 10px | 10px | Default: 10pxComputed: 10px |
| Description: The horizontal margin of the label in the horizontal Form. | |||
kendo-horizontal-form-label-width | 25% | 25% | Default: 25%Computed: 25% |
| Description: The width of the label in the horizontal Form. | |||
kendo-horizontal-form-label-align | flex-end | flex-end | Default: flex-endComputed: flex-end |
| Description: The horizontal alignment of the label in the horizontal Form. | |||
kendo-horizontal-form-field-wrap-max-width | calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) | calc(100% - 25% - 10px) | Default: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )Computed: calc(100% - 25% - 10px) |
| Description: The maximum width of the field wrap in the horizontal Form. | |||
kendo-inline-form-element-width | 25% | 25% | Default: 25%Computed: 25% |
| Description: The width of the inline Form element. | |||
kendo-forms-invalid-color | $kendo-color-error | #f31700 | Default: $kendo-color-errorComputed: #f31700 |
| Description: The invalid text color of the Form. | |||
kendo-label-optional-margin-x | 6px | 6px | Default: 6pxComputed: 6px |
| Description: The horizontal margin of the optional label in the Form. | |||
kendo-label-optional-font-size | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The font size of the optional label in the Form. | |||
kendo-label-optional-font-style | italic | italic | Default: italicComputed: italic |
| Description: The font style of the optional label in the Form. | |||
kendo-fieldset-margin | 30px | 30px | Default: 30pxComputed: 30px |
| Description: The margin of the Form fieldset. | |||
kendo-fieldset-font-size | $kendo-h4-font-size | 22px | Default: $kendo-h4-font-sizeComputed: 22px |
| Description: The font size of the Form fieldset. | |||
kendo-fieldset-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Form fieldset. | |||
kendo-fieldset-text | null | null | Default: nullComputed: null |
| Description: The text color of the Form fieldset. | |||
kendo-fieldset-border | null | null | Default: nullComputed: null |
| Description: The border color of the Form fieldset. | |||
kendo-fieldset-legend-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Form legend. | |||
kendo-fieldset-legend-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) | #373737 | Default: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))Computed: #373737 |
| Description: The text color of the Form legend. | |||
kendo-fieldset-legend-border | null | null | Default: nullComputed: null |
| Description: The border color of the Form legend. | |||
kendo-form-sizes | (
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: 10px), md: (form-rows-spacing: 14px), lg: (form-rows-spacing: 18px)) | Default: (
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
)
)Computed: (sm: (form-rows-spacing: 10px), md: (form-rows-spacing: 14px), lg: (form-rows-spacing: 18px)) |
| Description: The sizes map for the Form. | |||
