Variables
These are all the component specific variables that can be used for customization.
Name | Value |
---|---|
@form-background | @skin-white |
@form-border-radius | @border-radius |
@form-border-style | solid |
@form-border-width | 1px |
@form-border-color | @skin-border-primary |
@form-color | @skin-text-primary-on-light |
@form-font-size | @font-size-large |
@form-line-height | @line-height-base |
@form-margin | 0 0 @space-8 |
@form-padding-horizontal | @space-8 |
@form-padding-vertical | @space-8 |
@form-padding | @space-8 |
@form-placeholder-color | @skin-text-secondary-on-light |
@form-tap-highlight-color | rgba(0, 0, 0, 0) |
@form-transition-duration | @transition-duration-default |
@form-transition-property | border |
@form-transition-timing | ease |
@form-focus-border-color | @skin-primary |
@form-focus-border-width | 1px |
@form-hover-border-color | darken(@form-border-color, 30%) |
@form-hover-border-width | 1px |
@form-legend-width | 100% |
@form-legend-padding | @space-8 0 |
@form-fieldset-border | 0 |
@form-fieldset-margin | 0 |
@form-fieldset-padding | @space-8 0 @space-16 |
@form-fieldset-column-padding | @space-16 |
@form-label-margin | @space-8 0 |
@form-success-background | lighten(@skin-success, 45%) |
@form-success-border | @skin-success |
@form-success-color | @skin-success |
@form-error-background | lighten(@skin-error, 40%) |
@form-error-border | @skin-error |
@form-error-color | @skin-error |
@form-stacked-display | block |
@form-stacked-margin | @space-8 0 |
@form-fieldset-grouped-padding-bottom | @space-16 |
@form-fieldset-grouped-last-padding-bottom | @space-24 |
@form-fieldset-grouped-input-display | block |
@form-fieldset-grouped-input-last-margin-bottom | 0 |
@form-fieldset-grouped-input-position | relative |
@form-message-color | @skin-text-primary-on-light |
@form-message-display | block |
@form-message-font-size | @font-size-xsmall |
@form-message-inline-display | inline-block |
@form-message-inline-padding | 0 0 0 @space-8 |
@form-message-inline-vertical-align | middle |
@form-field-inline-margin | 0 0 @space-8 |
@form-field-inline-position | relative |
@form-field-inline-control-display | block |
@form-field-inline-control-padding-left | @space-48 |
@form-field-inline-control-width | 100% |
@form-field-inline-icon-align-items | center |
@form-field-inline-icon-background | transparent |
@form-field-inline-icon-bottom | 0 |
@form-field-inline-icon-display | inline-flex |
@form-field-inline-icon-justify-content | center |
@form-field-inline-icon-left | 0 |
@form-field-inline-icon-margin | 0 |
@form-field-inline-icon-position | absolute |
@form-field-inline-icon-right | auto |
@form-field-inline-icon-top | 0 |
@form-field-inline-icon-width | @space-48 |
@form-field-inline-reverse-control-padding-left | @space-8 |
@form-field-inline-reverse-control-padding-right | @space-48 |
@form-field-inline-reverse-control-padding-width | 100% |
@form-field-inline-reverse-icon-left | auto |
@form-field-inline-reverse-icon-right | 0 |
@form-group-lego-display | inline-flex |
@form-group-lego-margin-bottom | @space-16 |
@form-group-lego-child-all-margin-bottom | 0 |
@form-group-lego-child-all-min-width | @space-60 |
@form-group-lego-child-display | flex |
@form-group-lego-child-last-border-bottom-left-radius | 0 |
@form-group-lego-child-last-border-top-left-radius | 0 |
@form-group-lego-child-first-all-border-bottom-right-radius | 0 |
@form-group-lego-child-first-all-border-top-right-radius | 0 |
@form-group-lego-child-first-border-bottom-right-radius | 0 |
@form-group-lego-child-first-border-top-right-radius | 0 |
@form-group-lego-child-last-all-border-bottom-left-radius | 0 |
@form-group-lego-child-last-all-border-top-left-radius | 0 |
@form-group-lego-child-not-first-last-radius | 0 |
@form-group-lego-addon-border-radius | @form-border-radius |
@form-group-lego-addon-color | @form-color |
@form-group-lego-addon-font-size | @font-size-base |
@form-group-lego-addon-margin | 0 |
@form-group-lego-addon-min-width | @space-60 |
@form-group-lego-addon-position | relative |
@form-group-lego-addon-text-align | center |
@form-group-lego-addon-white-space | nowrap |
@form-group-lego-addon-first-all-border-right-color | transparent |
@form-group-lego-addon-first-all-focus-border-right-color | @form-focus-border-color |
@form-group-lego-addon-last-all-border-left-color | transparent |
@form-group-lego-addon-last-all-focus-border-left-color | @form-focus-border-color |
@form-group-lego-control-focus-zindex | 3 |
@form-group-lego-control-margin-bottom | 0 |
@form-group-lego-control-position | 0 |
@form-group-lego-control-zindex | 2 |
@form-group-lego-block-display | flex |
@form-select-custom-appearance | none |
@form-select-custom-background-color | @form-background |
@form-select-custom-background-image | "data:image/svg+xml |
@form-select-custom-background-offset | @space-8 |
@form-select-custom-background-repeat | no-repeat |
@form-select-custom-background-size | @space-12 |
@form-select-custom-display | inline-block |
@form-select-custom-max-width | 100% |
@form-select-custom-padding-right | @space-28 |
@form-select-custom-vertical-align | middle |
@form-control-borderless-border-color-focus | transparent |
@form-control-borderless-border-color | transparent |
@form-control-borderless-focus-box-shadow | 0 1px 3px @skin-gray-600 |
@form-control-borderless-transition | box-shadow 0.3s ease |
@form-control-fluid-width | 100% |
@form-control-padded-medium-screen-size-padding | @space-16 |
@form-control-padded-padding | @space-8 0 @space-16 |