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