1 | @charset "UTF-8";
|
2 | @import "../core/index-noreset.scss";
|
3 | @import "../input/scss/mixin.scss";
|
4 | @import "scss/mixin";
|
5 | @import "scss/variable";
|
6 | @import "./rtl.scss";
|
7 |
|
8 | #{$search-prefix} {
|
9 | @include box-sizing;
|
10 |
|
11 | width: 100%;
|
12 | display: inline-block;
|
13 |
|
14 | .#{$css-prefix}input,
|
15 | .#{$css-prefix}select {
|
16 | border: none;
|
17 | box-shadow: none;
|
18 | }
|
19 | .#{$css-prefix}select {
|
20 | .#{$css-prefix}input {
|
21 | height: auto;
|
22 | .#{$css-prefix}input-text-field {
|
23 | height: auto;
|
24 | }
|
25 | }
|
26 | }
|
27 |
|
28 | #{$search-prefix}-left {
|
29 | border-style: solid;
|
30 | transition: all $motion-duration-immediately $motion-linear;
|
31 | }
|
32 |
|
33 | #{$search-prefix}-left-addon {
|
34 | .#{$css-prefix}input,
|
35 | .#{$css-prefix}select-trigger-search {
|
36 | min-height: 100%;
|
37 | border-bottom-right-radius: 0;
|
38 | border-top-right-radius: 0;
|
39 | }
|
40 |
|
41 | .#{$css-prefix}select-values {
|
42 | line-height: 1;
|
43 | }
|
44 |
|
45 | &.#{$css-prefix}input-group-addon .#{$css-prefix}select {
|
46 | margin: 0;
|
47 | }
|
48 | }
|
49 |
|
50 | #{$search-prefix}-left-addon + #{$search-prefix}-input .#{$css-prefix}input {
|
51 | border-bottom-left-radius: 0;
|
52 | border-top-left-radius: 0;
|
53 | }
|
54 |
|
55 | #{$search-prefix}-input {
|
56 | width: 100%;
|
57 | }
|
58 |
|
59 | #{$search-prefix}-btn {
|
60 | box-shadow: none;
|
61 | }
|
62 |
|
63 | #{$search-prefix}-symbol-icon::before {
|
64 | content: $search-search-icon-content;
|
65 | }
|
66 |
|
67 | &-normal {
|
68 | width: 600px;
|
69 |
|
70 | #{$search-prefix}-left {
|
71 |
|
72 |
|
73 | border-top-left-radius: $search-normal-corner;
|
74 | border-bottom-left-radius: $search-normal-corner;
|
75 | }
|
76 |
|
77 | .#{$css-prefix}input {
|
78 | border-radius: $search-normal-corner 0 0 $search-normal-corner;
|
79 | }
|
80 |
|
81 | .#{$css-prefix}btn {
|
82 | border-radius: 0 $search-normal-corner $search-normal-corner 0;
|
83 | }
|
84 |
|
85 | &.#{$css-prefix}primary {
|
86 | @include search-type-color(
|
87 | $search-normal-primary-color,
|
88 | $search-normal-primary-hover-color,
|
89 | $search-normal-primary-color,
|
90 | $search-normal-primary-btn-text-color,
|
91 | $search-normal-primary-color,
|
92 | $search-normal-primary-btn-hover-bg-color,
|
93 | $search-normal-primary-btn-hover-text-color,
|
94 | $search-normal-primary-split-color
|
95 | );
|
96 |
|
97 | &.#{$css-prefix}large {
|
98 | @include search-type(
|
99 | $search-normal-primary-l-height,
|
100 | $search-normal-primary-l-btn-text-size,
|
101 | $search-normal-primary-l-icon-size,
|
102 | $search-normal-primary-border-width,
|
103 | $search-normal-primary-btn-text-padding-left,
|
104 | $search-normal-primary-shadow);
|
105 | }
|
106 |
|
107 | &.#{$css-prefix}medium {
|
108 | @include search-type(
|
109 | $search-normal-primary-m-height,
|
110 | $search-normal-primary-m-btn-text-size,
|
111 | $search-normal-primary-m-icon-size,
|
112 | $search-normal-primary-border-width,
|
113 | $search-normal-primary-btn-text-padding-left,
|
114 | $search-normal-primary-shadow);
|
115 | }
|
116 |
|
117 | .#{$css-prefix}input {
|
118 | border-top-left-radius: calc(#{$search-normal-corner} - #{$search-normal-primary-border-width});
|
119 | border-bottom-left-radius: calc(#{$search-normal-corner} - #{$search-normal-primary-border-width});
|
120 | }
|
121 | }
|
122 |
|
123 | &.#{$css-prefix}secondary {
|
124 | @include search-type-color(
|
125 | $search-normal-secondary-color,
|
126 | $search-normal-secondary-hover-color,
|
127 | $search-normal-secondary-btn-bg-color,
|
128 | $search-normal-secondary-btn-text-color,
|
129 | $search-normal-secondary-btn-bg-color,
|
130 | $search-normal-secondary-btn-hover-bg-color,
|
131 | $search-normal-secondary-btn-hover-text-color,
|
132 | $search-normal-secondary-split-color);
|
133 |
|
134 | &.#{$css-prefix}large {
|
135 | @include search-type(
|
136 | $search-normal-secondary-l-height,
|
137 | $search-normal-secondary-l-btn-text-size,
|
138 | $search-normal-secondary-l-icon-size,
|
139 | $search-normal-secondary-border-width,
|
140 | $search-normal-secondary-btn-text-padding-left,
|
141 | $search-normal-secondary-shadow);
|
142 | }
|
143 |
|
144 | &.#{$css-prefix}medium {
|
145 | @include search-type(
|
146 | $search-normal-secondary-m-height,
|
147 | $search-normal-secondary-m-btn-text-size,
|
148 | $search-normal-secondary-m-icon-size,
|
149 | $search-normal-secondary-border-width,
|
150 | $search-normal-secondary-btn-text-padding-left,
|
151 | $search-normal-secondary-shadow);
|
152 | }
|
153 |
|
154 | .#{$css-prefix}input {
|
155 | border-top-left-radius: calc(#{$search-normal-corner} - #{$search-normal-secondary-border-width});
|
156 | border-bottom-left-radius: calc(#{$search-normal-corner} - #{$search-normal-secondary-border-width});
|
157 | }
|
158 | }
|
159 |
|
160 | &.#{$css-prefix}normal {
|
161 | @include search-type-color(
|
162 | $search-normal-normal-color,
|
163 | $search-normal-normal-hover-color,
|
164 | $search-normal-normal-btn-bg-color,
|
165 | $search-normal-normal-btn-text-color,
|
166 | $search-normal-normal-color,
|
167 | $search-normal-normal-btn-hover-bg-color,
|
168 | $search-normal-normal-btn-hover-text-color,
|
169 | $search-normal-normal-split-color);
|
170 |
|
171 | &.#{$css-prefix}large {
|
172 | @include search-type(
|
173 | $search-normal-normal-l-height,
|
174 | $search-normal-normal-l-btn-text-size,
|
175 | $search-normal-normal-l-icon-size,
|
176 | $search-normal-normal-border-width,
|
177 | $search-normal-normal-btn-text-padding-left,
|
178 | $search-normal-normal-shadow);
|
179 | }
|
180 |
|
181 | &.#{$css-prefix}medium {
|
182 | @include search-type(
|
183 | $search-normal-normal-m-height,
|
184 | $search-normal-normal-m-btn-text-size,
|
185 | $search-normal-normal-m-icon-size,
|
186 | $search-normal-normal-border-width,
|
187 | $search-normal-normal-btn-text-padding-left,
|
188 | $search-normal-normal-shadow);
|
189 | }
|
190 |
|
191 | .#{$css-prefix}input {
|
192 | border-top-left-radius: calc(#{$search-normal-corner} - #{$search-normal-normal-border-width});
|
193 | border-bottom-left-radius: calc(#{$search-normal-corner} - #{$search-normal-normal-border-width});
|
194 | }
|
195 | }
|
196 |
|
197 | &.#{$css-prefix}dark {
|
198 | @include search-type-color(
|
199 | $search-normal-dark-color,
|
200 | $search-normal-dark-hover-color,
|
201 | $search-normal-dark-color,
|
202 | $search-normal-dark-btn-text-color,
|
203 | $search-normal-dark-color,
|
204 | $search-normal-dark-btn-hover-bg-color,
|
205 | $search-normal-dark-btn-hover-text-color,
|
206 | $search-normal-dark-color);
|
207 |
|
208 | .#{$css-prefix}select-inner,
|
209 | input {
|
210 | color: $search-normal-dark-text-color;
|
211 | }
|
212 |
|
213 | .#{$css-prefix}input {
|
214 | background: $color-calculate-search-normal-dark-bg;
|
215 | }
|
216 | .#{$css-prefix}select {
|
217 | background: $color-calculate-search-normal-dark-bg;
|
218 | }
|
219 |
|
220 | &.#{$css-prefix}large {
|
221 | @include search-type(
|
222 | $search-normal-dark-l-height,
|
223 | $search-normal-dark-l-btn-text-size,
|
224 | $search-normal-dark-l-icon-size,
|
225 | $search-normal-dark-border-width,
|
226 | $search-normal-dark-btn-text-padding-left,
|
227 | $search-normal-dark-shadow);
|
228 | }
|
229 |
|
230 | &.#{$css-prefix}medium {
|
231 | @include search-type(
|
232 | $search-normal-dark-m-height,
|
233 | $search-normal-dark-m-btn-text-size,
|
234 | $search-normal-dark-m-icon-size,
|
235 | $search-normal-dark-border-width,
|
236 | $search-normal-dark-btn-text-padding-left,
|
237 | $search-normal-dark-shadow);
|
238 | }
|
239 | }
|
240 | }
|
241 | &-normal:not([dir=rtl]) {
|
242 | #{$search-prefix}-left {
|
243 | border-right: none;
|
244 | }
|
245 | }
|
246 | &-simple {
|
247 | width: 300px;
|
248 | box-shadow: $search-simple-normal-shadow;
|
249 | #{$search-prefix}-icon {
|
250 | cursor: pointer;
|
251 | transition: all $motion-duration-immediately $motion-linear;
|
252 | }
|
253 |
|
254 | #{$search-prefix}-left,.#{$css-prefix}input {
|
255 | border-radius: $search-simple-corner;
|
256 | }
|
257 | border-radius: $search-simple-corner;
|
258 |
|
259 | &.#{$css-prefix}large {
|
260 | #{$search-prefix}-icon {
|
261 | margin-right: $search-simple-l-icon-margin-right;
|
262 | }
|
263 | }
|
264 |
|
265 | &.#{$css-prefix}medium {
|
266 | #{$search-prefix}-icon {
|
267 | margin-right: $search-simple-m-icon-margin-right;
|
268 | }
|
269 | }
|
270 |
|
271 | &.#{$css-prefix}normal {
|
272 | @include search-simple-color(
|
273 | $search-simple-normal-color,
|
274 | $search-simple-normal-hover-color,
|
275 | $search-simple-normal-icon-text-color,
|
276 | $search-simple-normal-icon-hover-text-color,
|
277 | $search-simple-normal-split-color);
|
278 |
|
279 | #{$search-prefix}-left {
|
280 | border-width: $search-simple-normal-border-width;
|
281 | }
|
282 |
|
283 | &.#{$css-prefix}large {
|
284 | @include search-simple-type($search-simple-normal-l-icon-size);
|
285 | }
|
286 |
|
287 | &.#{$css-prefix}medium {
|
288 | @include search-simple-type($search-simple-normal-m-icon-size);
|
289 | }
|
290 | }
|
291 |
|
292 | &.#{$css-prefix}dark {
|
293 | @include search-simple-color( $search-simple-dark-color, $search-simple-dark-hover-color, $search-simple-dark-icon-text-color, $search-simple-dark-icon-hover-text-color, $search-simple-dark-split-color );
|
294 |
|
295 | .#{$css-prefix}select-inner,
|
296 | input {
|
297 | color: $search-simple-dark-text-color;
|
298 | }
|
299 | .#{$css-prefix}input {
|
300 | background: $color-calculate-search-simple-dark-bg;
|
301 | }
|
302 | .#{$css-prefix}select {
|
303 | background: $color-calculate-search-simple-dark-bg;
|
304 | }
|
305 |
|
306 | #{$search-prefix}-left {
|
307 | border-width: $search-simple-dark-border-width;
|
308 | }
|
309 |
|
310 | &.#{$css-prefix}large {
|
311 | @include search-simple-type($search-simple-dark-l-icon-size);
|
312 | }
|
313 |
|
314 | &.#{$css-prefix}medium {
|
315 | @include search-simple-type($search-simple-dark-m-icon-size);
|
316 | }
|
317 | }
|
318 | }
|
319 | }
|
320 |
|
321 | .#{$css-prefix}search-simple {
|
322 |
|
323 | .#{$css-prefix}select.#{$css-prefix}large {
|
324 | height: calc(#{$form-element-large-height} - 2px);
|
325 | }
|
326 |
|
327 | .#{$css-prefix}select.#{$css-prefix}medium {
|
328 | height: calc(#{$form-element-medium-height} - 2px);
|
329 | }
|
330 | }
|
331 |
|