blob: d22803e27a1ce411a8477ff454c1d57ec1b455d1 (
plain) (
blame)
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
/*******************************
Search
*******************************/
/* Search Prompt */
@promptBackground: @inputBackground;
@promptVerticalPadding: @inputVerticalPadding;
@promptHorizontalPadding: @inputHorizontalPadding;
@promptLineHeight: @inputLineHeight;
@promptFontSize: @relativeMedium;
@promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
@promptBorder: 1px solid @borderColor;
@promptBorderRadius: @circularRadius;
@promptColor: @textColor;
@promptTransition:
background-color @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing
;
@promptBoxShadow: 0 0 0 0 transparent inset;
/* Mobile */
@mobileMaxWidth: e("calc(100vw - 2rem)");
/* Result Box */
@resultsWidth: 18em;
@resultsBackground: #FFFFFF;
@resultsDistance: 0.5em;
@resultsBorderRadius: @defaultBorderRadius;
@resultsBorder: 1px solid @solidBorderColor;
@resultsBoxShadow: @floatingShadow;
/* Result */
@resultFontSize: 1em;
@resultVerticalPadding: @relativeTiny;
@resultHorizontalPadding: @relativeLarge;
@resultPadding: @resultVerticalPadding @resultHorizontalPadding;
@resultTextColor: @textColor;
@resultLineHeight: 1.33;
@resultDivider: 1px solid @internalBorderColor;
@resultLastDivider: none;
/* Result Image */
@resultImageFloat: right;
@resultImageBackground: none;
@resultImageWidth: 5em;
@resultImageHeight: 3em;
@resultImageBorderRadius: 0.25em;
@resultImageMargin: 0 6em 0 0;
/* Result Content */
@resultTitleFont: @headerFont;
@resultTitleMargin: -@headerLineHeightOffset 0 0;
@resultTitleFontWeight: @bold;
@resultTitleFontSize: @relativeMedium;
@resultTitleColor: @darkTextColor;
/* Result Scrolling */
@scrollingMobileMaxResults: 4;
@scrollingTabletMaxResults: 6;
@scrollingComputerMaxResults: 8;
@scrollingWidescreenMaxResults: 12;
@scrollingResultHeight: (@resultVerticalPadding * 2) + @resultLineHeight;
@scrollingMobileMaxResultsHeight: (@scrollingResultHeight * @scrollingMobileMaxResults);
@scrollingTabletMaxResultsHeight: (@scrollingResultHeight * @scrollingTabletMaxResults);
@scrollingComputerMaxResultsHeight: (@scrollingResultHeight * @scrollingComputerMaxResults);
@scrollingWidescreenMaxResultsHeight: (@scrollingResultHeight * @scrollingWidescreenMaxResults);
/* Description */
@resultDescriptionFontSize: @relativeSmall;
@resultDescriptionDistance: 0;
@resultDescriptionColor: @lightTextColor;
/* Price */
@resultPriceFloat: right;
@resultPriceColor: @green;
/* Special Message */
@messageVerticalPadding: 1em;
@messageHorizontalPadding: 1em;
@messageHeaderFontSize: @medium;
@messageHeaderFontWeight: @bold;
@messageHeaderColor: @textColor;
@messageDescriptionDistance: 0.25rem;
@messageDescriptionFontSize: 1em;
@messageDescriptionColor: @textColor;
/* All Results Link */
@actionBorder: none;
@actionBackground: @darkWhite;
@actionPadding: @relativeSmall @relativeMedium;
@actionColor: @textColor;
@actionFontWeight: @bold;
@actionAlign: center;
/*******************************
States
*******************************/
/* Focus */
@promptFocusBackground: @promptBackground;
@promptFocusBorderColor: @selectedBorderColor;
@promptFocusColor: @selectedTextColor;
/* Hover */
@resultHoverBackground: @offWhite;
@actionHoverBackground: #E0E0E0;
/* Loading */
@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
/* Active Category */
@categoryActiveBackground: @darkWhite;
@categoryNameActiveColor: @textColor;
/* Active Result */
@resultActiveBorderLeft: @internalBorderColor;
@resultActiveBackground: @darkWhite;
@resultActiveBoxShadow: none;
@resultActiveTitleColor: @darkTextColor;
@resultActiveDescriptionColor: @darkTextColor;
@resultsZIndex: 998;
/*******************************
Types
*******************************/
/* Selection */
@selectionPromptBorderRadius: @defaultBorderRadius;
@selectionCloseTop: 0;
@selectionCloseTransition:
color @defaultDuration @defaultEasing,
opacity @defaultDuration @defaultEasing
;
@selectionCloseRight: 0;
@selectionCloseIconOpacity: 0.8;
@selectionCloseIconColor: '';
@selectionCloseIconHoverOpacity: 1;
@selectionCloseIconHoverColor: @red;
@selectionCloseIconInputRight: 1.85714em;
/* Category */
@categoryBackground: @darkWhite;
@categoryBoxShadow: none;
@categoryDivider: 1px solid @internalBorderColor;
@categoryTransition:
background @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing
;
@categoryResultsWidth: 28em;
@categoryResultBackground: @white;
@categoryResultLeftBorder: 1px solid @borderColor;
@categoryResultDivider: @resultDivider;
@categoryResultLastDivider: none;
@categoryResultPadding: @resultPadding;
@categoryResultTransition: @categoryTransition;
@categoryNameWidth: 100px;
@categoryNameBackground: transparent;
@categoryNameFont: @pageFont;
@categoryNameFontSize: 1em;
@categoryNameWhitespace: nowrap;
@categoryNamePadding: 0.4em 1em;
@categoryNameFontWeight: @bold;
@categoryNameColor: @lightTextColor;
@miniSearchSize: @relativeMini;
@tinySearchSize: @relativeTiny;
@smallSearchSize: @relativeSmall;
@largeSearchSize: @relativeLarge;
@bigSearchSize: @relativeBig;
@hugeSearchSize: @relativeHuge;
@massiveSearchSize: @relativeMassive;
|