input.variables
2.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/*******************************
Input
*******************************/
/*-------------------
Element
--------------------*/
@inputFont: @pageFont;
@verticalPadding: @inputVerticalPadding;
@horizontalPadding: @inputHorizontalPadding;
@lineHeight: @inputLineHeight;
@lineHeightOffset: ((@lineHeight - 1em) / 2);
@padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
@textAlign: left;
@background: @inputBackground;
@borderWidth: 1px;
@border: @borderWidth solid @borderColor;
@boxShadow: none;
@borderRadius: @defaultBorderRadius;
@transition:
box-shadow @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing
;
/*-------------------
Types
--------------------*/
/* Icon Input */
@iconWidth: (@verticalPadding * 2) + @glyphWidth;
@iconOpacity: 0.5;
@iconFocusOpacity: 1;
@iconOffset: -0.5em;
@iconDistance: 0em;
@iconMargin: @iconWidth + @iconDistance;
@iconTransition: opacity 0.3s @defaultEasing;
@transparentIconWidth: @glyphWidth;
@transparentIconMargin: 2em;
/* Circular Icon Input */
@circularIconVerticalOffset: 0.35em;
@circularIconHorizontalOffset: 0.5em;
/* Labeled Input */
@labelCornerTop: @borderWidth;
@labelCornerRight: @borderWidth;
@labelCornerSize: @relative9px;
@labelSize: 1em;
@labelVerticalPadding: (@verticalPadding - @lineHeightOffset);
@labeledMargin: 2.5em;
@labeledIconInputMargin: 3.25em;
@labeledIconMargin: 1.25em;
/*-------------------
States
--------------------*/
/* Placeholder */
@placeholderColor: @inputPlaceholderColor;
@placeholderFocusColor: @inputPlaceholderFocusColor;
/* Down */
@downBorderColor: rgba(0, 0, 0, 0.3);
@downBackground: #FAFAFA;
@downColor: @textColor;
@downBoxShadow: none;
/* Focus */
@focusBorderColor: @focusedFormBorderColor;
@focusBackground: @background;
@focusColor: @hoveredTextColor;
@focusBoxShadow: none;
/* Error */
@errorBackground: @negativeBackgroundColor;
@errorColor: @negativeTextColor;
@errorBorder: @negativeBorderColor;
@errorBoxShadow: none;
@placeholderErrorColor: lighten(@errorColor, 40);
@placeholderErrorFocusColor: lighten(@errorColor, 30);
/* Loader */
@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
/*-------------------
Variations
--------------------*/
/* Inverted */
@transparentInvertedPlaceholderColor: @invertedUnselectedTextColor;
@transparentInvertedColor: @white;