/*******************************

Form

*******************************/

/*——————-

Elements

——————–*/

/* Form */ @gutterWidth: 1em; @rowDistance: 1em;

/* Text */ @paragraphMargin: @rowDistance 0em;

/* Field */ @fieldMargin: 0em 0em @rowDistance;

/* Form Label */ @labelDistance: 0.2857rem; @labelMargin: 0em 0em @labelDistance 0em; @labelFontSize: 0.9285em; @labelFontWeight: bold; @labelTextTransform: none; @labelColor: @textColor;

/* Input */ @inputFont: @pageFont; @inputWidth: 100%; @inputFontSize: 1em; @inputVerticalPadding: 0.78571em; @inputHorizontalPadding: 1em; @inputLineHeight: 1.2142em; @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding; @inputBackground: FFFFFF; @inputBorder: 1px solid @borderColor; @inputBorderRadius: @absoluteBorderRadius; @inputColor: @textColor; @inputTransition:

background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease

; @inputBoxShadow: 0em 0em 0em 0em transparent inset;

/* Select */ @selectBackground: @white; @selectBorderRadius: @inputBorderRadius; @selectBorder: @inputBorder; @selectPadding: 0.62em @inputHorizontalPadding; @selectBoxShadow: @inputBoxShadow; @selectTransition: @inputTransition; @selectColor: @inputColor;

/* Text Area */ @textAreaPadding: @inputVerticalPadding @inputHorizontalPadding; @textAreaHeight: 12em; @textAreaResize: vertical; @textAreaLineHeight: 1.2857; @textAreaMinHeight: 8em; @textAreaMaxHeight: 24em; @textAreaBackground: @inputBackground; @textAreaBorder: @inputBorder; @textAreaFontSize: @inputFontSize; @textAreaTransition: @inputTransition;

/* Checkbox */ @checkboxVerticalAlign: top; @checkboxLabelFontSize: 1em; @checkboxLabelTextTransform: @labelTextTransform;

/* Divider */ @dividerMargin: @rowDistance 0em;

/* Validation Prompt */ @validationMargin: 0em 0em 0em @rowDistance; @validationArrowOffset: -0.3em;

/*——————-

States

——————–*/

/* Disabled */

/* Focus */ @inputFocusPointerSize: 1px;

/* Input Focus */ @inputFocusBackground: @inputBackground; @inputFocusBorderColor: @selectedBorderColor; @inputFocusColor: rgba(0, 0, 0, 0.85); @inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset; @inputFocusBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;

/* Text Area Focus */ @textAreaFocusBackground: @inputFocusBackground; @textAreaFocusBorderColor: @inputFocusBorderColor; @textAreaFocusColor: @inputFocusColor; @textAreaFocusBoxShadow: @inputFocusBoxShadow; @textAreaFocusBorderRadius: @inputFocusBorderRadius;

/* Error */ @formErrorColor: @negativeColor; @formErrorBorder: @negativeBorderColor; @formErrorBackground: @negativeBackgroundColor;

/* Input Error */ @inputErrorPointerSize: 2px; @inputErrorBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em; @inputErrorBoxShadow: @inputErrorPointerSize 0em 0em 0em @formErrorColor inset;

/* Dropdown Error */ @dropdownErrorHoverBackground: FFF2F2; @dropdownErrorActiveBackground: FDCFCF;

/* Focused Error */ @inputErrorFocusBackground: @negativeBackgroundColor; @inputErrorFocusColor: @negativeColorHover; @inputErrorFocusBorder: @negativeBorderColor; @inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset;

/* Placeholder */ @inputPlaceholderColor: lighten(@inputColor, 55); @inputPlaceholderFocusColor: lighten(@inputColor, 35); @inputErrorPlaceholderColor: lighten(@formErrorColor, 10); @inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);

/* Loading Dimmer */ @loaderDimmerColor: rgba(255, 255, 255, 0.8); @loaderDimmerZIndex: 100;

/* Loading Spinner */ @loaderSize: 3em; @loaderOffset: -(@loaderSize / 2); @loaderMargin: @loaderOffset 0em 0em @loaderOffset; @loaderLineZIndex: 101;

/*——————-

Types

——————–*/

/* Required */ @requiredContent: ‘*’; @requiredColor: @negativeColor; @requiredVerticalOffset: -0.2em; @requiredDistance: 0.2em; @requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance;

/* Inverted */ @invertedLabelColor: @invertedTextColor;

/*——————-

Variations

——————–*/

/* Grouped Fields */ @groupedMargin: @fieldMargin; @groupedFieldMargin: 0.5em 0em;

@groupedLabelDistance: @labelDistance; @groupedLabelColor: @labelColor; @groupedLabelMargin: @labelMargin; @groupedLabelFontSize: @labelFontSize; @groupedLabelFontWeight: @labelFontWeight; @groupedLabelTextTransform: @labelTextTransform;

/* Inline */ @inlineLabelFontSize: @labelFontSize; @inlineLabelVerticalAlign: middle; @inlineGroupedFieldLabelDistance: 0.5rem; @inlineCheckboxLabelDistance: 1.75em;

@inlineLabelMargin: 0em 1em 0em 0em; @inlineLabelDistance: @labelDistance; @inlineLabelColor: @labelColor; @inlineLabelFontSize: @labelFontSize; @inlineLabelFontWeight: @labelFontWeight; @inlineLabelTextTransform: @labelTextTransform;

/* Sizes */ @small: 0.875em; @medium: auto; @large: 1.125em; @huge: 1.2em;

/*——————-

Groups

——————–*/

@inlineFieldsMargin: 0em 1em 0em 0em;