// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Forms mixins
//
// Magento UI library provides a set of mixins for forms elements customization. You can customize your forms globally by configuring global variables, or you can customize every form separately using appropriate mixin.
//
// **Note**: in variables lists allowable values are in "[]" brackets. If there are no allowable values provided, for this variable you can use: '' | false | value.
//
// # Global forms elements customization
// The .lib-form-element-all()
mixin is used to set default styles for all form elements in the theme. To configure these elements global variables are used.
//
// # Fieldsets & fields customization
//
// The .lib-form-fieldset()
mixin is used to customize form fieldset borders and legend.
//
// The .lib-form-field()
mixin is used to customize form elements.
//
// The .lib-form-hasrequired()
mixin is used to show and customize "required fields" message if the form or fieldset has required fields and a data-hasrequired
attribute.
//
// Using these mixins you can customize your forms. By default these mixins use global variables.
//
// ## Simple form with "required fields" message
//
// ```html
//
.lib-form-fieldset()
mixin variables
// //
Mixin variable | //Global variable | //Default value | //Comment | //
---|---|---|---|
@_border | //@form-fieldset__border | //0 | //Fieldset border | //
@_margin | //@form-fieldset__margin | //0 0 @indent__xl | //Fieldset margin | //
@_padding | //@form-fieldset__padding | //0 | //Fieldset padding | //
@_legend-color | //@form-fieldset-legend__color | //false | //Legend color | //
@_legend-font-size | //@form-fieldset-legend__font-size | //20px | //Legend font size | //
@_legend-font-family | //@form-fieldset-legend__font-family | //false | //Legend font family | //
@_legend-font-weight | //@form-fieldset-legend__font-weight | //false | //Legend font weight | //
@_legend-font-style | //@form-fieldset-legend__font-style | //false | //Legend font style | //
@_legend-line-height | //@form-fieldset-legend__line-height | //1.2 | //Legend line height | //
@_legend-margin | //@form-fieldset-legend__margin | //0 0 @indent__m | //Legend margin | //
@_legend-padding | //@form-fieldset-legend__padding | //0 | //Legend padding | //
@_legend-width | //@form-fieldset-legend__width | //false | //Legend width | //
.lib-form-field()
mixin variables
//
// //
Mixin variable | //Global variable | //Default values [Allowable values] | //Comment | //
---|---|---|---|
@_type | //@form-field-type | //inline [inline | block] | //How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control | //
@_border | //@form-field__border | //false | //Border of the <div class="field"> element | //
@_column | //@form-field-column | //false [true | false] | //Form fields are displayed in columns | //
@_column-padding | //@form-field-column__padding | //0 12px 0 0 | //Form fields column padding | //
@_column-number | //@form-field-column__number | //2 | //Form fields number of columns | //
@_type-block-margin | //@form-field-type-block__margin | //0 0 @form-field__vertical-indent | //Form fields margin if @form-field-type set to is 'block' | //
@_type-inline-margin | //@form-field-type-inline__margin | //0 0 @form-field__vertical-indent | //Form fields margin if @form-field-type is set to 'inline' | //
Form field label | //|||
@_label-color | //@form-field-label__align | //false | //Field label text color | //
@_label-color | //@form-field-label__color | //false | //Field label text color | //
@_label-font-size | //@form-field-label__font-size | //false | //Field label font size | //
@_label-font-family | //@form-field-label__font-family | //false | //Field label font family | //
@_label-font-weight | //@form-field-label__font-weight | //@font-weight__bold | //Field label font weight | //
@_label-font-style | //@form-field-label__font-style | //false | //Field label font style | //
@_label-line-height | //@form-field-label__line-height | //false | //Field label line height | //
@_type-block-label-margin | //@form-field-type-label-block__margin | //0 0 @indent__xs | //Field label margin if @form-field-type is set to 'block' | //
@_type-inline-label-padding | //@form-field-type-label-inline__padding | //@form-field-type-label-inline__padding-top 15px 0 0 | //Field label padding if @form-field-type is set to 'inline' | //
@_type-inline-label-width | //@form-field-type-label-inline__width | //25.8% | //Field label width if @form-field-type is set to 'inline' | //
@_type-inline-control-width | //@form-field-type-control-inline__width | //74.2% | //Field control width if @form-field-type is set to 'inline' | //
Label "required" asterisk | //|||
@_label-asterisk-color | //@form-field-label-asterisk__color | //#da370a | //Label asterisk color | //
@_label-asterisk-font-size | //@form-field-label-asterisk__font-size | //@font-size__s | //Label asterisk font size | //
@_label-asterisk-font-family | //@form-field-label-asterisk__font-family | //false | //Label asterisk font family | //
@_label-asterisk-font-weight | //@form-field-label-asterisk__font-weight | //false | //Label asterisk font weight | //
@_label-asterisk-font-style | //@form-field-label-asterisk__font-style | //false | //Label asterisk font style | //
@_label-asterisk-line-height | //@form-field-label-asterisk__line-height | //false | //Label asterisk line height | //
@_label-asterisk-margin | //@form-field-label-asterisk__margin | //0 0 0 @indent__xs | //Label asterisk margin | //
Field note | //|||
@_note-color | //@form-field-note__color | //false | //Field note text color | //
@_note-font-size | //@form-field-note__font-size | //@font-size__s | //Field note font size | //
@_note-font-family | //@form-field-note__font-family | //false | //Field note font family | //
@_note-font-weight | //@form-field-note__font-weight | //false | //Field note font weight | //
@_note-font-style | //@form-field-note__font-style | //false | //Field note font style | //
@_note-line-height | //@form-field-note__line-height | //false | //Field note line height | //
@_note-margin | //@form-field-note__margin | //3px 0 0 | //Field note margin | //
@_note-padding | //@form-field-note__padding | //0 | //Field note padding | //
@_note-icon-font-content | //@form-field-note-icon-font__content | //@icon-pointer-up | //Field note icon code | //
@_note-icon-font | //@form-field-note-icon-font | //@icon-font | //Field note icon font | //
@_note-icon-font-size | //@form-field-note-icon-font__size | //@form-field-note__font-size*2 | //Field note icon font size | //
@_note-icon-font-line-height | //@form-field-note-icon-font__line-height | //@form-field-note__font-size | //Field note icon line height | //
@_note-icon-font-color | //@form-field-note-icon-font__color | //@form-field-note__color | //Field note icon color | //
@_note-icon-font-color-hover | //@form-field-note-icon-font__color-hover | //false | //Field note icon hovered color | //
@_note-icon-font-color-active | //@form-field-note-icon-font__color-active | //false | //Field note icon active color | //
@_note-icon-font-margin | //@form-field-note-icon-font__margin | //false | //Field note icon margin | //
@_note-icon-font-vertical-align | //@form-field-note-icon-font__vertical-align | //@icon-font__vertical-align | //Field note icon vertical align | //
@_note-icon-font-position | //@form-field-note-icon-font__position | //@icon-font__position [before | after] | //Field note icon position | //
@_note-icon-font-text-hide | //@form-field-note-icon-font__text-hide | //@icon-font__text-hide [true | false] | //Field note icon text hide | //
.lib-form-hasrequired()
mixin variables
//
// //
Mixin variable | //Global variable | //Default values [Allowable values] | //Comment | //
---|---|---|---|
@_position | //@form-hasrequired__position | //top [top | bottom] | //Position of "required fields" notice | //
@_color | //@form-hasrequired__color | //@form-field-label-asterisk__color | //Text color of "required fields" notice | //
@_font-size | //@form-hasrequired__font-size | //@font-size__s | //Font size of "required fields" notice | //
@_font-family | //@form-hasrequired__font-family | //false | //Font family of "required fields" notice | //
@_font-weight | //@form-hasrequired__font-weight | //false | //Font weight of "required fields" notice | //
@_font-style | //@form-hasrequired__font-style | //false | //Font style of "required fields" notice | //
@_line-height | //@form-hasrequired__line-height | //false | //Line height of "required fields" notice | //
@_border | //@form-hasrequired__border | //false | //Border of "required fields" notice | //
@_margin | //@form-hasrequired__margin | //@indent__s 0 0 | //Margin of "required fields" notice | //
@_padding | //@form-hasrequired__padding | //false | //Padding of "required fields" notice | //
.lib-form-element-input(@_type: *type*)
mixin is used to style form controls. This mixin accepts 1 mandatory parameter - the control type. This can be:
// * input-text - for all input-text-like inputs
// * input-radio - for radiobutton
// * input-checkbox - for checkbox
// * select - for select
// * textarea - for textarea
// ```html
//
//
//
//
//
//
//
//
//
//
// ```
input[type="text"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="datetime"],
input[type="email"] {
.lib-form-element-input(@_type: input-text);
margin-bottom: 20px;
}
select {
.lib-form-element-input(@_type: select);
margin-bottom: 20px;
}
select[multiple="multiple"] {
.lib-css(height, auto);
margin-bottom: 20px;
}
textarea {
.lib-form-element-input(@_type: textarea);
.lib-form-element-textarea-resize();
}
// # Form element inputs customization variables
//
// //
Mixin variable | //Global variable | //Default value [Allowable value] | //Comment | //
---|---|---|---|
@_type | //@form-element-input-type | //'' [input-text | select | textarea | input-radio | input-checkbox] | //Form control type. @form-element-input__[] global variables are used to set up all form elements style. Control-specific global variables use these @form-element-input__[] variables by default. Control-specific global variables can be set up separately. @input-text__[] is used to set up input-text controls style @select__[] is used to set up selects style @textarea__[] is used to set up textarea style |
//
@_background | //@form-element-input__background @input-text__background @selectbackground @textarea__background |
// @color-white @form-element-input__background @form-element-input__background @form-element-input__background |
// Form control background | //
@_border | //@form-element-input__border @input-text__border @select__border @textarea__border |
// 1px solid @form-element-input__border-color @form-element-input__border @form-element-input__border @form-element-input__border |
// Form control border | //
@_border-radius | //@form-element-input__border-radius @input-textborder-radius @select__border-radius @textarea__border-radius |
// 1px @form-element-input__border-radius @form-element-input__border-radius @form-element-input__border-radius |
// Form control border radius | //
@_height | //@form-element-input__height @input-text__height @select__height @textarea__height |
// 32px @form-element-input__height @form-element-input__height auto |
// Form control height | //
@_width | //@form-element-input__width @input-text__width @select__width @textarea__width |
// 100% @form-element-input__width @form-element-input__width @form-element-input__width |
// Form control width | //
@_margin | //@form-element-input__margin @input-text__margin @select__margin @textarea__margin |
// false [true | false] @form-element-input__margin @form-element-input__margin 0 |
// Form control margin | //
@_padding | //@form-element-input__padding @input-text__padding @select__padding @textarea__padding |
// 0 9px @form-element-input__padding 5px 10px 4px @indent__s |
// Form control padding | //
@_vertical-align | //@form-element-input__vertical-align @input-text__vertical-align @select__vertical-align @textarea__vertical-align |
// baseline @form-element-input__vertical-align @form-element-input__vertical-align @form-element-input__vertical-align |
// Form control vertical align | //
@_background-clip | //@form-element-input__background-clip @input-text__background-clip @select__background-clip @textarea__background-clip |
// padding-box [padding-box | border-box | content-box] @form-element-input__background-clip @form-element-input__background-clip @form-element-input__background-clip |
// Form control background clip | //
Text settings | //|||
@_color | //@form-element-input__color @input-text__color @select__color @textarea__color |
// false @form-element-input__color @form-element-input__color @form-element-input__color |
// Form control text color | //
@_font-size | //@form-element-input__font-size @input-text__font-size @select__font-size @textarea__font-size |
// @font-size__base @form-element-input__font-size @form-element-input__font-size @form-element-input__font-size |
// Form control font size | //
@_font-family | //@form-element-input__font-family @input-text__font-family @select__font-family @textarea__font-family |
// @font-family__base @form-element-input__font-family @form-element-input__font-family @form-element-input__font-family |
// Form control font family | //
@_font-weight | //@form-element-input__font-weight @input-text__font-weight @select__font-weight @textarea__font-weight |
// false @form-element-input__font-weight @form-element-input__font-weight @form-element-input__font-weight |
// Form control font weight | //
@_font-style | //@form-element-input__font-style @input-text__font-style @selectfont-style @textarea__font-style |
// false @form-element-input__font-style @form-element-input__font-style @form-element-input__font-style |
// Form control font style | //
@_line-height | //@form-element-input__line-height @input-text__line-height @select__line-height @textarea__line-height |
// @line-height__base @form-element-input__line-height @form-element-input__line-height @form-element-input__line-height |
// Form control line height | //
Placeholder | //|||
@_placeholder-color | //@form-element-input-placeholder__color @input-text-placeholder__color @select-placeholder__color @textarea-placeholder__color |
// #c2c2c2 @form-element-input-placeholder__color @form-element-input-placeholder__color @form-element-input-placeholder__color |
// Form control placeholder color | //
@_placeholder-font-style | //@form-element-input-placeholder__font-style @inputtext-placeholder-font-style @select-placeholder__font-style @textarea-placeholder__font-style |
// @form-element-input__font-style @form-element-input-placeholder__font-style @form-element-input-placeholder__font-style @form-element-input-placeholder__font-style |
// Form control placeholder font style | //
Disabled element | //|||
@_disabled-background | //@form-element-input__disabled__background @inputtextdisabled-background @select__disabled__background @textarea__disabled__background |
// @form-element-input__background @form-element-input__disabled__background @form-element-input__disabled__background @form-element-input__disabled__background |
// Disabled form element background | //
@_disabled-border | //@form-element-input__disabled__border @input-text__disabled__border @select__disabled__border @textarea__disabled__border |
// @form-element-input__border @form-element-input__disabled__border @form-element-input__disabled__border @form-element-input__disabled__border |
// Disabled form element border | //
@_disabled-opacity | //@form-element-input__disabled__opacity @input-text__disabled__opacity @select__disabled__opacity @textarea__disabled__opacity |
// .5 @form-element-input__disabled__opacity @form-element-input__disabled__opacity @form-element-input__disabled__opacity |
// Disabled form element opacity | //
@_disabled-color | //@form-element-input__disabled__color @input-text__disabled__color @select__disabled__color @textarea__disabled__color |
// @form-element-input__color @form-element-input__disabled__color @form-element-input__disabled__color @form-element-input__disabled__color |
// Disabled form element text color | //
@_disabled-font-style | //@form-element-input__disabled__font-style @input-text__disabled__font-style @select__disabled__font-style @textarea__disabled__font-style |
// @form-element-input__font-style @form-element-input__disabled__font-style @form-element-input__disabled__font-style @form-element-input__disabled__font-style |
// Disabled form element font style | //
Focused elements | //|||
@_focus-background | //@form-element-input__focus__background @input-text__focus__background @select__focus__background @textarea__focus__background |
// @form-element-input__background @form-element-input__focus__background @form-element-input__focus__background @form-element-input__focus__background |
// Focused form element background | //
@_focus-border | //@form-element-input__focus__border @input-text__focus__border @select__focus__border @textarea__focus__border |
// @form-element-input__border @form-element-input__focus__border @form-element-input__focus__border @form-element-input__focus__border |
// Focused form element border | //
@_focus-color | //@form-element-input__focus__color @input-text__focus__color @select__focus__color @textarea__focus__color |
// @form-element-input__color @form-element-input__focus__color @form-element-input__focus__color @form-element-input__focus__color |
// Focused form element color | //
@_focus-font-style | //@form-element-input__focus__font-style @input-text__focus__font-style @select__focus__font-style @textarea__focus__font-style |
// @form-element-input__font-style @form-element-input__focus__font-style @form-element-input__focus__font-style @form-element-input__focus__font-style |
// Focused form element font style | //
.lib-form-element-choise()
mixin is used to customize checkboxes and radio buttons.
// ```html
// //
Mixin variable | //Global variable | //Default values [Allowable values] | //Comment | //
---|---|---|---|
@_type | //@form-element-choice__type | //'' ['' | radio | checkbox] | //Choice element type | //
@_vertical-align | //@form-element-choice__vertical-align @input-radio__vertical-align @input-checkbox__vertical-align |
// false @form-element-choice__vertical-align @form-element-choice__vertical-align |
// Choice element vertical align | //
@_margin | //@form-element-choice__margin @input-radio__margin @input-checkbox__margin |
// 2px @indent__xs 0 0 @form-element-choice__margin @form-element-choice__margin |
// Choice element margin | //
@_disabled-opacity | //@form-element-choice__disabled__opacity @input-radio__disabled__opacity @input-checkbox__disabled__opacity |
// @form-element-input__disabled__opacity @form-element-choice__disabled__opacity @form-element-choice__disabled__opacity |
// Disabled choice element opacity | //
.lib-form-element-color()
mixin is used to set form elements background and color.
// ```css
// @_border-color: ''
// @_background: ''
// @_color: ''
// @_focus-border-color: ''
// @_focus-background: ''
// @_focus-color: ''
// @_disabled-border-color: ''
// @_disabled-background: ''
// @_disabled-color: ''
// @_placeholder-color: ''
// ```
// ```html
// .lib-form-validation-note()
mixin is used to customize form validation error messages.
//
// ```html
//
// //
Mixin variable | //Global variable | //Default values [Allowable values] | //Comment | //
---|---|---|---|
@_note-color | //@form-validation-note__color-error | //@error__color | //Validation note text color | //
@_note-font-size | //@form-validation-note__font-size | //@font-size__s | //Validation note font size | //
@_note-font-family | //@form-validation-note__font-family | //false | //Validation note font family | //
@_note-font-style | //@form-validation-note__font-style | //false | //Validation note font style | //
@_note-font-weight | //@form-validation-note__font-weight | //false | //Validation note font weight | //
@_note-line-height | //@form-validation-note__line-height | //false | //Validation note line height | //
@_note-margin | //@form-validation-note__margin | //3px 0 0 | //Validation note margin | //
@_note-padding | //@form-validation-note__padding | //false | //Validation note padding | //
@_note-icon-use | //@form-validation-note-icon__use | //false [true | false] | //Show validation note icon | //
@_note-icon-font-content | //@form-validation-note-icon__font-content | //@icon-pointer-up | //Validation note icon code | //
@_note-icon-font | //@form-validation-note-icon__font | //@icon-font | //Validation note icon font | //
@_note-icon-font-size | //@form-validation-note-icon__font-size | //@form-validation-note__font-size * 2 | //Validation note icon font size | //
@_note-icon-font-line-height | //@form-validation-note-icon__font-line-height | //@form-validation-note__font-size | //Validation note icon line height | //
@_note-icon-font-color | //@form-validation-note-icon__font-color | //@form-validation-note__color-error | //Validation note icon color | //
@_note-icon-font-color-hover | //@form-validation-note-icon__font-color-hover | //false | //Hovered validation note icon color | //
@_note-icon-font-color-active | //@form-validation-note-icon__font-color-active | //false | //Active validation note icon color | //
@_note-icon-font-margin | //@form-validation-note-icon__font-margin | //false | //Validation note icon margin | //
@_note-icon-font-vertical-align | //@form-validation-note-icon__font-vertical-align | //@icon-font__vertical-align | //Validation note icon vertical align | //
@_note-icon-font-position | //@form-validation-note-icon__font-position | //@icon-font__position | //Validation note icon position | //
@_note-icon-font-text-hide | //@form-validation-note-icon__font-text-hide | //@icon-font__text-hide | //Validation note icon text hide | //