|
|
/******************************* Input *******************************/
/*------------------- Element --------------------*/
@pageFont: "Helvetica Neue", "Helvetica", Arial;
@verticalPadding: 0.8em; @horizontalPadding: 1em; @lineHeight: 1.2em; @lineOffset: ((@lineHeight - 1em) / 2); @padding: (@verticalPadding - @lineOffset) @horizontalPadding;
@background: #FFFFFF; @borderWidth: 1px; @border: @borderWidth solid rgba(0, 0, 0, 0.15); @boxShadow: none;
@borderRadius: 0.325em; @transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease ;
@inputColor: @textColor;
/*------------------- Types --------------------*/
/* Icon Input */ @glyphWidth: 1.25em; @iconWidth: (@verticalPadding * 2) + @glyphWidth; @iconOpacity: 0.5; @iconFocusOpacity: 1; @iconSpacing: 0em; @iconMargin: @iconWidth + @iconSpacing; @iconTransition: opacity 0.3s @defaultEasing;
@transparentIconWidth: @glyphWidth; @transparentIconMargin: 1.75em;
/* Circular Icon Input */ @circularIconVerticalOffset: 0.35em; @circularIconHorizontalOffset: 0.5em;
/* Labeled Input */ @labelTop: @borderWidth; @labelRight: @borderWidth; @labelSize: 0.75em;
@labeledMargin: 2.5em; @labeledIconInputMargin: 3.25em; @labeledIconMargin: 1.25em;
/*------------------- States --------------------*/
/* Placeholder */ @placeholderColor: @unselectedTextColor; @placeholderFocusColor: @textColor;
@placeholderErrorColor: rgba(255, 80, 80, 0.4); @placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
/* Down */ @downBorderColor: rgba(0, 0, 0, 0.3); @downBackground: #FAFAFA; @downColor: @textColor; @downBoxShadow: none;
/* Focus */ @focusBorderColor: @selectedBorderColor; @focusBackground: ''; @focusColor: @hoveredTextColor; @focusBoxShadow: none;
/* Error */ @errorBackground: #FFFAFA; @errorBorder: #E7BEBE; @errorColor: #D95C5C; @errorBoxShadow: none;
/* Loading */ @loadingImage: "@{imagePath}/loader-mini.gif";
/*------------------- Variations --------------------*/
/* Sizing */ @mini: 0.8125rem; @small: 0.875rem; @medium: 1rem; @large: 1.125rem; @big: 1.25rem; @huge: 1.375rem; @massive: 1.5rem;
|