/******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ @gutterWidth: 1em; @rowDistance: 1em; /* Text */ @paragraphMargin: @rowDistance 0em; /* Field */ @fieldMargin: 0em 0em @rowDistance; /* Fields */ @fieldsMargin: 0em -(@gutterWidth / 2) @rowDistance; /* Form Label */ @labelDistance: @4px; @labelMargin: 0em 0em @labelDistance 0em; @labelFontSize: @relativeSmall; @labelFontWeight: bold; @labelTextTransform: none; @labelColor: @textColor; /* Input */ @inputFont: @pageFont; @inputWidth: 100%; @inputFontSize: 1em; @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding; @inputBorder: 1px solid @borderColor; @inputBorderRadius: @absoluteBorderRadius; @inputColor: @textColor; @inputTransition: color @defaultDuration @defaultEasing, border-color @defaultDuration @defaultEasing ; @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; /* Inline Validation Prompt */ @promptBackground: @white; @promptBorderColor: @formErrorBorder; @promptBorder: 1px solid @promptBorderColor; @promptTextColor: @formErrorColor; @inlinePromptMargin: -0.25em 0em -0.5em 0.5em; @inlinePromptBorderWidth: 1px; /*------------------- States --------------------*/ /* Focus */ @inputFocusPointerSize: 0px; /* Input Focus */ @inputFocusBackground: @inputBackground; @inputFocusBorderColor: @focusedFormBorderColor; @inputFocusColor: @selectedTextColor; @inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset; @inputFocusBorderRadius: @inputBorderRadius; /* Text Area Focus */ @textAreaFocusBackground: @inputFocusBackground; @textAreaFocusBorderColor: @inputFocusBorderColor; @textAreaFocusColor: @inputFocusColor; @textAreaFocusBoxShadow: @inputFocusBoxShadow; @textAreaFocusBorderRadius: @inputFocusBorderRadius; /* Disabled */ @disabledLabelOpacity: @disabledOpacity; /* Errored Input */ @formErrorColor: @negativeTextColor; @formErrorBorder: @negativeBorderColor; @formErrorBackground: @negativeBackgroundColor; /* AutoFill */ @inputAutoFillBackground: #FFFFF0; @inputAutoFillBorder: #E5DFA1; @inputAutoFillFocusBackground: @inputAutoFillBackground; @inputAutoFillFocusBorder: #D5C315; @inputAutoFillErrorBackground: #FFFAF0; @inputAutoFillErrorBorder: #E0B4B4; /* Input Error */ @inputErrorBorderRadius: ''; @inputErrorBoxShadow: none; /* Dropdown Error */ @dropdownErrorHoverBackground: #FBE7E7; @dropdownErrorSelectedBackground: @dropdownErrorHoverBackground; @dropdownErrorActiveBackground: #FDCFCF; @dropdownErrorLabelBackground: #EACBCB; @dropdownErrorLabelColor: @errorTextColor; /* Focused Error */ @inputErrorFocusBackground: @negativeBackgroundColor; @inputErrorFocusColor: @negativeTextColor; @inputErrorFocusBorder: @negativeBorderColor; @inputErrorFocusBoxShadow: none; /* Placeholder Error */ @inputErrorPlaceholderColor: lighten(@formErrorColor, 40); @inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30); /* Loading Dimmer */ @loaderDimmerColor: rgba(0, 0, 0 , 0.85); @loaderDimmerZIndex: 100; /* Loading Spinner */ @loaderSize: 3em; @loaderLineZIndex: 101; /*------------------- Types --------------------*/ /* Required */ @requiredContent: '*'; @requiredColor: @negativeColor; @requiredVerticalOffset: -0.2em; @requiredDistance: 0.2em; @requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance; /* Inverted */ @invertedInputBackground: @inputBackground; @invertedInputBorderColor: @whiteBorderColor; @invertedInputBoxShadow: @inputBoxShadow; @invertedInputColor: @inputColor; @invertedLabelColor: @invertedTextColor; @invertedInputBoxShadow: none; /*------------------- Variations --------------------*/ /* Grouped Fields */ @groupedMargin: @fieldMargin; @groupedFieldMargin: 0.5em 0em; @groupedLabelDistance: @labelDistance; @groupedLabelColor: @labelColor; @groupedLabelMargin: @labelMargin; @groupedLabelFontSize: @labelFontSize; @groupedLabelFontWeight: @labelFontWeight; @groupedLabelTextTransform: @labelTextTransform; /* Inline */ @inlineInputSize: @relativeMedium; @inlineLabelDistance: @relativeTiny; @inlineLabelColor: @labelColor; @inlineLabelFontSize: @labelFontSize; @inlineLabelFontWeight: @labelFontWeight; @inlineLabelTextTransform: @labelTextTransform; @groupedInlineLabelMargin: 0.035714em 1em 0em 0em; /*------------------- Groups --------------------*/ @inlineFieldsMargin: 0em 1em 0em 0em;