UNPKG

10.7 kBSCSSView Raw
1@charset "UTF-8";
2
3////
4/// @module search: 搜索框
5/// @tag Search
6/// @category component
7/// @family data-entry
8/// @varPrefix $search-
9/// @classPrefix {prefix}-search
10/// @order {"size/bounding":10,"size/btn":11,"size/margin":12,"size/simple":13,"statement/normal":10,"statement/normal/btn":100,"statement/btn":11,"statement/hover":12,"statement/hover/btn":120,"statement/simple":13,"statement/icon":14}
11////
12
13$search-prefix: '.#{$css-prefix}search';
14
15// Normal
16/// corner
17/// @namespace size/bounding
18$search-normal-corner: $corner-1 !default;
19
20// Primary
21// ----------------------------------------
22/// color
23/// @namespace statement/normal
24$search-normal-primary-color: $color-brand1-6 !default;
25/// hover
26/// @namespace statement/normal
27$search-normal-primary-hover-color: $color-brand1-6 !default;
28/// split
29/// @namespace statement/normal
30$search-normal-primary-split-color: $color-line1-1 !default;
31/// shadow
32/// @namespace statement/normal
33$search-normal-primary-shadow: $shadow-zero !default;
34/// text
35/// @namespace statement/btn
36$search-normal-primary-btn-text-color: $color-white !default;
37/// background
38/// @namespace statement/hover
39$search-normal-primary-btn-hover-bg-color: $color-brand1-9 !default;
40/// text
41/// @namespace statement/hover
42$search-normal-primary-btn-hover-text-color: $color-white !default;
43/// border
44/// @namespace size/bounding
45$search-normal-primary-border-width: $line-2 !default;
46/// icon-margin(r)
47/// @namespace size/btn
48$search-normal-primary-btn-text-padding-left: $s-zero !default;
49
50
51// Primary Large
52// ----------------------------------------
53/// height
54/// @namespace size/bounding
55$search-normal-primary-l-height: $s-15 !default;
56/// icon
57/// @namespace size/bounding
58$search-normal-primary-l-icon-size: $icon-l !default;
59/// text
60/// @namespace size/btn
61$search-normal-primary-l-btn-text-size: $font-size-subhead !default;
62// Primary Medium
63// ----------------------------------------
64/// height
65/// @namespace size/bounding
66$search-normal-primary-m-height: $s-10 !default;
67/// icon
68/// @namespace size/bounding
69$search-normal-primary-m-icon-size: $icon-s !default;
70/// text
71/// @namespace size/btn
72$search-normal-primary-m-btn-text-size: $font-size-subhead !default;
73// Secondary
74// ----------------------------------------
75/// color
76/// @namespace statement/normal
77$search-normal-secondary-color: $color-line1-3 !default;
78/// split
79/// @namespace statement/normal
80$search-normal-secondary-split-color: $color-line1-1 !default;
81/// hover
82/// @namespace statement/normal
83$search-normal-secondary-hover-color: $color-brand1-6 !default;
84/// shadow
85/// @namespace statement/normal
86$search-normal-secondary-shadow: $shadow-zero !default;
87/// background
88/// @namespace statement/btn
89$search-normal-secondary-btn-bg-color: $color-brand1-6 !default;
90/// text
91/// @namespace statement/btn
92$search-normal-secondary-btn-text-color: $color-white !default;
93/// background
94/// @namespace statement/hover
95$search-normal-secondary-btn-hover-bg-color: $color-brand1-9 !default;
96/// text
97/// @namespace statement/hover
98$search-normal-secondary-btn-hover-text-color: $color-white !default;
99/// border
100/// @namespace size/bounding
101$search-normal-secondary-border-width: $line-1 !default;
102/// icon-margin(r)
103/// @namespace size/btn
104$search-normal-secondary-btn-text-padding-left: $s-zero !default;
105// Secondary Large
106// ----------------------------------------
107/// height
108/// @namespace size/bounding
109$search-normal-secondary-l-height: $s-15 !default;
110/// icon
111/// @namespace size/bounding
112$search-normal-secondary-l-icon-size: $icon-l !default;
113/// text
114/// @namespace size/btn
115$search-normal-secondary-l-btn-text-size: $font-size-subhead !default;
116// Secondary Medium
117// ----------------------------------------
118/// height
119/// @namespace size/bounding
120$search-normal-secondary-m-height: $s-10 !default;
121/// icon
122/// @namespace size/bounding
123$search-normal-secondary-m-icon-size: $icon-s !default;
124/// text
125/// @namespace size/btn
126$search-normal-secondary-m-btn-text-size: $font-size-subhead !default;
127
128// Normal
129// ----------------------------------------
130/// color
131/// @namespace statement/normal
132$search-normal-normal-color: $color-line1-3 !default;
133/// split
134/// @namespace statement/normal
135$search-normal-normal-split-color: $color-line1-1 !default;
136/// hover
137/// @namespace statement/normal
138$search-normal-normal-hover-color: $color-line1-4 !default;
139/// shadow
140/// @namespace statement/normal
141$search-normal-normal-shadow: $shadow-zero !default;
142/// background
143/// @namespace statement/normal/btn
144$search-normal-normal-btn-bg-color: $color-fill1-1 !default;
145/// text
146/// @namespace statement/normal/btn
147$search-normal-normal-btn-text-color: $color-text1-3 !default;
148/// background
149/// @namespace statement/hover/btn
150$search-normal-normal-btn-hover-bg-color: $color-fill1-3 !default;
151/// text
152/// @namespace statement/hover/btn
153$search-normal-normal-btn-hover-text-color: $color-text1-4 !default;
154/// border
155/// @namespace size/bounding
156$search-normal-normal-border-width: $line-1 !default;
157/// icon-margin(r)
158/// @namespace size/btn
159$search-normal-normal-btn-text-padding-left: $s-zero !default;
160
161// Normal Large
162// ----------------------------------------
163/// height
164/// @namespace size/bounding
165$search-normal-normal-l-height: $s-15 !default;
166/// icon
167/// @namespace size/bounding
168$search-normal-normal-l-icon-size: $icon-l !default;
169/// text
170/// @namespace size/btn
171$search-normal-normal-l-btn-text-size: $font-size-subhead !default;
172// Normal Medium
173// ----------------------------------------
174/// height
175/// @namespace size/bounding
176$search-normal-normal-m-height: $s-10 !default;
177/// icon
178/// @namespace size/bounding
179$search-normal-normal-m-icon-size: $icon-s !default;
180/// text
181/// @namespace size/btn
182$search-normal-normal-m-btn-text-size: $font-size-subhead !default;
183
184// Dark
185// ----------------------------------------
186/// color
187/// @namespace statement/normal
188$search-normal-dark-color: $color-brand1-6 !default;
189/// hover
190/// @namespace statement/normal
191$search-normal-dark-hover-color: $color-brand1-6 !default;
192/// text
193/// @namespace statement/normal
194$search-normal-dark-text-color: $color-white !default;
195/// background
196/// @namespace statement/normal
197$search-normal-dark-bg-color: $color-white !default;
198/// background-opacity
199/// @namespace statement/normal
200/// @type alpha
201$search-normal-dark-bg-opacity: 0 !default;
202/// shadow
203/// @namespace statement/normal
204$search-normal-dark-shadow: $shadow-zero !default;
205/// text
206/// @namespace statement/btn
207$search-normal-dark-btn-text-color: $color-white !default;
208/// background
209/// @namespace statement/hover
210$search-normal-dark-btn-hover-bg-color: $color-brand1-9 !default;
211/// text
212/// @namespace statement/hover
213$search-normal-dark-btn-hover-text-color: $color-white !default;
214/// border
215/// @namespace size/bounding
216$search-normal-dark-border-width: $line-1 !default;
217/// icon-margin(r)
218/// @namespace size/btn
219$search-normal-dark-btn-text-padding-left: $s-zero !default;
220
221/// height
222/// @namespace size/bounding
223$search-normal-dark-l-height: $s-15 !default;
224/// icon
225/// @namespace size/bounding
226$search-normal-dark-l-icon-size: $icon-l !default;
227/// text
228/// @namespace size/btn
229$search-normal-dark-l-btn-text-size: $font-size-subhead !default;
230/// height
231/// @namespace size/bounding
232$search-normal-dark-m-height: $s-10 !default;
233/// icon
234/// @namespace size/bounding
235$search-normal-dark-m-icon-size: $icon-s !default;
236/// text
237/// @namespace size/btn
238$search-normal-dark-m-btn-text-size: $font-size-subhead !default;
239/// text
240/// @namespace size/btn
241$search-normal-dark-m-btn-text-size: $font-size-subhead !default;
242
243// Simple
244/// corner
245/// @namespace size/bounding
246$search-simple-corner: $corner-1 !default;
247/// right
248/// @namespace size/margin
249$search-simple-l-icon-margin-right: $s-3 !default;
250/// right
251/// @namespace size/margin
252$search-simple-m-icon-margin-right: $s-2 !default;
253
254// Normal
255// ----------------------------------------
256/// color
257/// @namespace statement/normal
258$search-simple-normal-color: $color-line1-3 !default;
259/// hover
260/// @namespace statement/simple
261$search-simple-normal-hover-color: $color-line1-4 !default;
262/// split
263/// @namespace statement/normal
264$search-simple-normal-split-color: $color-line1-3 !default;
265/// shadow
266/// @namespace statement/normal
267$search-simple-normal-shadow: $shadow-zero !default;
268/// text
269/// @namespace statement/icon
270$search-simple-normal-icon-text-color: $color-text1-2 !default;
271/// text
272/// @namespace statement/hover
273$search-simple-normal-icon-hover-text-color: $color-text1-3 !default;
274/// border
275/// @namespace size/simple
276$search-simple-normal-border-width: $line-1 !default;
277/// icon
278/// @namespace size/simple
279$search-simple-normal-l-icon-size: $icon-m !default;
280/// icon
281/// @namespace size/simple
282$search-simple-normal-m-icon-size: $icon-xs !default;
283/// icon-margin(r)
284/// @namespace size/btn
285$search-simple-normal-btn-text-padding-left: $s-zero !default;
286
287// Dark
288// ----------------------------------------
289/// color
290/// @namespace statement/normal
291$search-simple-dark-color: $color-line1-3 !default;
292/// hover
293/// @namespace statement/normal
294$search-simple-dark-hover-color: $color-line1-3 !default;
295/// background
296/// @namespace statement/normal
297$search-simple-dark-bg-color: $color-white !default;
298/// background-opacity
299/// @namespace statement/normal
300/// @type alpha
301$search-simple-dark-bg-opacity: 0 !default;
302/// text
303/// @namespace statement/normal
304$search-simple-dark-text-color: $color-white !default;
305/// shadow
306/// @namespace statement/normal
307$search-simple-dark-shadow: $shadow-zero !default;
308/// text
309/// @namespace statement/icon
310$search-simple-dark-icon-text-color: $color-text1-2 !default;
311/// text
312/// @namespace statement/hover
313$search-simple-dark-icon-hover-text-color: $color-text1-3 !default;
314/// icon-margin(r)
315/// @namespace size/btn
316$search-simple-dark-btn-text-padding-left: $s-zero !default;
317
318/// split
319/// @namespace statement/normal
320$search-simple-dark-split-color: $color-line1-3 !default;
321
322/// border
323/// @namespace size/simple
324$search-simple-dark-border-width: $line-1 !default;
325/// icon
326/// @namespace size/simple
327$search-simple-dark-l-icon-size: $icon-m !default;
328/// icon
329/// @namespace size/simple
330$search-simple-dark-m-icon-size: $icon-xs !default;
331
332/// search icon
333/// @namespace statement/normal
334/// @type icon
335$search-search-icon-content: $icon-content-search !default;
336
337$color-calculate-search-normal-dark-bg: rgba(get-compiling-value($search-normal-dark-bg-color), get-compiling-value($search-normal-dark-bg-opacity)) !default;
338$color-calculate-search-simple-dark-bg: rgba(get-compiling-value($search-simple-dark-bg-color), get-compiling-value($search-simple-dark-bg-opacity)) !default;