170 lines
4.3 KiB
Text
170 lines
4.3 KiB
Text
|
/*******************************
|
||
|
|
Form
|
||
|
|
*******************************/
|
||
|
|
|
||
|
|
/*-------------------
|
||
|
|
Elements
|
||
|
|
--------------------*/
|
||
|
|
|
||
|
|
/* Form */
|
||
|
|
@gutterWidth: 1em;
|
||
|
|
@rowDistance: 1em;
|
||
|
|
|
||
|
|
/* Text */
|
||
|
|
@paragraphMargin: @rowDistance 0;
|
||
|
|
|
||
|
|
/* Field */
|
||
|
|
@fieldMargin: 0 0 @rowDistance;
|
||
|
|
|
||
|
|
/* Fields */
|
||
|
|
@fieldsMargin: 0 -(@gutterWidth / 2) @rowDistance;
|
||
|
|
|
||
|
|
/* Form Label */
|
||
|
|
@labelDistance: @4px;
|
||
|
|
@labelMargin: 0 0 @labelDistance 0;
|
||
|
|
@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: 0 0 0 0 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;
|
||
|
|
@checkboxLabelFieldTopMargin: 0.7em;
|
||
|
|
@checkboxFieldTopMargin: 1.2em;
|
||
|
|
@checkboxToggleFieldTopMargin: 1em;
|
||
|
|
@checkboxSliderFieldTopMargin: 1.4em;
|
||
|
|
|
||
|
|
/* Inline Validation Prompt */
|
||
|
|
@promptBackground: @white;
|
||
|
|
@promptBorderColor: @formErrorBorder;
|
||
|
|
@promptBorder: 1px solid @promptBorderColor;
|
||
|
|
@promptTextColor: @formErrorColor;
|
||
|
|
@inlinePromptMargin: -0.25em 0 -0.5em 0.5em;
|
||
|
|
@inlinePromptBorderWidth: 1px;
|
||
|
|
|
||
|
|
/*-------------------
|
||
|
|
States
|
||
|
|
--------------------*/
|
||
|
|
|
||
|
|
/* Focus */
|
||
|
|
@inputFocusPointerSize: 0;
|
||
|
|
|
||
|
|
/* Input Focus */
|
||
|
|
@inputFocusBackground: @inputBackground;
|
||
|
|
@inputFocusBorderColor: @focusedFormBorderColor;
|
||
|
|
@inputFocusColor: @selectedTextColor;
|
||
|
|
@inputFocusBoxShadow: @inputFocusPointerSize 0 0 0 @selectedBorderColor inset;
|
||
|
|
@inputFocusBorderRadius: @inputBorderRadius;
|
||
|
|
|
||
|
|
/* Text Area Focus */
|
||
|
|
@textAreaFocusBackground: @inputFocusBackground;
|
||
|
|
@textAreaFocusBorderColor: @inputFocusBorderColor;
|
||
|
|
@textAreaFocusColor: @inputFocusColor;
|
||
|
|
@textAreaFocusBoxShadow: @inputFocusBoxShadow;
|
||
|
|
@textAreaFocusBorderRadius: @inputFocusBorderRadius;
|
||
|
|
|
||
|
|
/* Disabled */
|
||
|
|
@disabledLabelOpacity: @disabledOpacity;
|
||
|
|
|
||
|
|
/* Input states */
|
||
|
|
@transparentPadding: @inputPadding;
|
||
|
|
|
||
|
|
/* Loading Dimmer */
|
||
|
|
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
|
||
|
|
@loaderInvertedDimmerColor: 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 0 0 @requiredDistance;
|
||
|
|
|
||
|
|
/* Inverted */
|
||
|
|
@invertedInputBackground: @inputBackground;
|
||
|
|
@invertedInputBorderColor: @whiteBorderColor;
|
||
|
|
@invertedInputBoxShadow: @inputBoxShadow;
|
||
|
|
@invertedInputColor: @inputColor;
|
||
|
|
@invertedLabelColor: @invertedTextColor;
|
||
|
|
@invertedInputBoxShadow: none;
|
||
|
|
|
||
|
|
/*-------------------
|
||
|
|
Variations
|
||
|
|
--------------------*/
|
||
|
|
|
||
|
|
/* Grouped Fields */
|
||
|
|
@groupedMargin: @fieldMargin;
|
||
|
|
@groupedFieldMargin: 0.5em 0;
|
||
|
|
|
||
|
|
@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;
|
||
|
|
@inlineCalendarWidth: 13.11em;
|
||
|
|
|
||
|
|
@groupedInlineLabelMargin: 0.035714em 1em 0 0;
|
||
|
|
|
||
|
|
/*-------------------
|
||
|
|
Groups
|
||
|
|
--------------------*/
|
||
|
|
|
||
|
|
@inlineFieldsMargin: 0 1em 0 0;
|