You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.2 KiB
106 lines
2.2 KiB
/*******************************
|
|
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.3125em;
|
|
@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;
|
|
@iconOffset: 0.9em;
|
|
@iconFocusOpacity: 1;
|
|
@iconSpacing: 0.5em;
|
|
@iconMargin: @iconWidth + @iconSpacing;
|
|
@iconTransition: opacity 0.3s ease-out;
|
|
|
|
@transparentIconWidth: @glyphWidth;
|
|
@transparentIconOffset: @lineOffset;
|
|
@transparentIconMargin: @transparentIconWidth + @iconSpacing;
|
|
|
|
/* 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: @selectedTextColor;
|
|
@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;
|
|
|