1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | @type : 'element';
|
16 | @element : 'input';
|
17 |
|
18 | @import (multiple) '../../theme.config';
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | .ui.input {
|
31 | position: relative;
|
32 | font-weight: @normal;
|
33 | font-style: normal;
|
34 | display: inline-flex;
|
35 | color: @inputColor;
|
36 | }
|
37 | .ui.input > input {
|
38 | margin: 0;
|
39 | max-width: 100%;
|
40 | flex: 1 0 auto;
|
41 | outline: none;
|
42 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
43 | text-align: @textAlign;
|
44 | line-height: @lineHeight;
|
45 |
|
46 | font-family: @inputFont;
|
47 | padding: @padding;
|
48 |
|
49 | background: @background;
|
50 | border: @border;
|
51 | color: @inputColor;
|
52 | border-radius: @borderRadius;
|
53 | transition: @transition;
|
54 |
|
55 | box-shadow: @boxShadow;
|
56 | }
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | .ui.input > input::-webkit-input-placeholder {
|
66 | color: @placeholderColor;
|
67 | }
|
68 | .ui.input > input::-moz-placeholder {
|
69 | color: @placeholderColor;
|
70 | }
|
71 | .ui.input > input:-ms-input-placeholder {
|
72 | color: @placeholderColor;
|
73 | }
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | & when (@variationInputDisabled) {
|
80 | |
81 |
|
82 |
|
83 |
|
84 | .ui.disabled.input,
|
85 | .ui.input:not(.disabled) input[disabled] {
|
86 | opacity: @disabledOpacity;
|
87 | }
|
88 |
|
89 | .ui.disabled.input > input,
|
90 | .ui.input:not(.disabled) input[disabled] {
|
91 | pointer-events: none;
|
92 | }
|
93 | }
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 | .ui.input > input:active,
|
100 | .ui.input.down input {
|
101 | border-color: @downBorderColor;
|
102 | background: @downBackground;
|
103 | color: @downColor;
|
104 | box-shadow: @downBoxShadow;
|
105 | }
|
106 |
|
107 | & when (@variationInputLoading) {
|
108 | |
109 |
|
110 |
|
111 |
|
112 | .ui.loading.loading.input > i.icon:before {
|
113 | position: absolute;
|
114 | content: '';
|
115 | top: 50%;
|
116 | left: 50%;
|
117 |
|
118 | margin: @loaderMargin;
|
119 | width: @loaderSize;
|
120 | height: @loaderSize;
|
121 |
|
122 | border-radius: @circularRadius;
|
123 | border: @loaderLineWidth solid @loaderFillColor;
|
124 | }
|
125 | .ui.loading.loading.input > i.icon:after {
|
126 | position: absolute;
|
127 | content: '';
|
128 | top: 50%;
|
129 | left: 50%;
|
130 |
|
131 | margin: @loaderMargin;
|
132 | width: @loaderSize;
|
133 | height: @loaderSize;
|
134 |
|
135 | animation: loader @loaderSpeed infinite linear;
|
136 |
|
137 | border: @loaderLineWidth solid @loaderLineColor;
|
138 | border-radius: @circularRadius;
|
139 |
|
140 | box-shadow: 0 0 0 1px transparent;
|
141 | }
|
142 | }
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 | .ui.input.focus > input,
|
150 | .ui.input > input:focus {
|
151 | border-color: @focusBorderColor;
|
152 | background: @focusBackground;
|
153 | color: @focusColor;
|
154 | box-shadow: @focusBoxShadow;
|
155 | }
|
156 | .ui.input.focus > input::-webkit-input-placeholder,
|
157 | .ui.input > input:focus::-webkit-input-placeholder {
|
158 | color: @placeholderFocusColor;
|
159 | }
|
160 | .ui.input.focus > input::-moz-placeholder,
|
161 | .ui.input > input:focus::-moz-placeholder {
|
162 | color: @placeholderFocusColor;
|
163 | }
|
164 | .ui.input.focus > input:-ms-input-placeholder,
|
165 | .ui.input > input:focus:-ms-input-placeholder {
|
166 | color: @placeholderFocusColor;
|
167 | }
|
168 |
|
169 |
|
170 | & when (@variationInputStates) {
|
171 | |
172 |
|
173 |
|
174 | each(@formStates, {
|
175 | @state: replace(@key, '@', '');
|
176 |
|
177 | .ui.input.@{state} > input {
|
178 | background-color: @formStates[@@state][background];
|
179 | border-color: @formStates[@@state][borderColor];
|
180 | color: @formStates[@@state][color];
|
181 | box-shadow: @formStates[@@state][boxShadow];
|
182 | }
|
183 |
|
184 |
|
185 | .ui.input.@{state} > input::-webkit-input-placeholder {
|
186 | color: @formStates[@@state][inputPlaceholderColor];
|
187 | }
|
188 | .ui.input.@{state} > input::-moz-placeholder {
|
189 | color: @formStates[@@state][inputPlaceholderColor];
|
190 | }
|
191 | .ui.input.@{state} > input:-ms-input-placeholder {
|
192 | color: @formStates[@@state][inputPlaceholderColor] !important;
|
193 | }
|
194 |
|
195 |
|
196 | .ui.input.@{state} > input:focus::-webkit-input-placeholder {
|
197 | color: @formStates[@@state][inputPlaceholderFocusColor];
|
198 | }
|
199 | .ui.input.@{state} > input:focus::-moz-placeholder {
|
200 | color: @formStates[@@state][inputPlaceholderFocusColor];
|
201 | }
|
202 | .ui.input.@{state} > input:focus:-ms-input-placeholder {
|
203 | color: @formStates[@@state][inputPlaceholderFocusColor] !important;
|
204 | }
|
205 | })
|
206 | }
|
207 |
|
208 |
|
209 |
|
210 |
|
211 | & when (@variationInputTransparent) {
|
212 | |
213 |
|
214 |
|
215 |
|
216 |
|
217 | .ui.transparent.input > textarea,
|
218 | .ui.transparent.input > input {
|
219 | border-color: transparent !important;
|
220 | background-color: transparent !important;
|
221 | padding: 0;
|
222 | box-shadow: none !important;
|
223 | border-radius: 0 !important;
|
224 | }
|
225 | .field .ui.transparent.input > textarea {
|
226 | padding: @padding;
|
227 | }
|
228 |
|
229 |
|
230 | :not(.field) > .ui.transparent.icon.input > i.icon {
|
231 | width: @transparentIconWidth;
|
232 | }
|
233 | :not(.field) > .ui.ui.ui.transparent.icon.input > input {
|
234 | padding-left: 0;
|
235 | padding-right: @transparentIconMargin;
|
236 | }
|
237 | :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input {
|
238 | padding-left: @transparentIconMargin;
|
239 | padding-right: 0;
|
240 | }
|
241 | & when (@variationInputInverted) {
|
242 |
|
243 | .ui.transparent.inverted.input {
|
244 | color: @transparentInvertedColor;
|
245 | }
|
246 | .ui.ui.transparent.inverted.input > textarea,
|
247 | .ui.ui.transparent.inverted.input > input {
|
248 | color: inherit;
|
249 | }
|
250 |
|
251 | .ui.transparent.inverted.input > input::-webkit-input-placeholder {
|
252 | color: @transparentInvertedPlaceholderColor;
|
253 | }
|
254 | .ui.transparent.inverted.input > input::-moz-placeholder {
|
255 | color: @transparentInvertedPlaceholderColor;
|
256 | }
|
257 | .ui.transparent.inverted.input > input:-ms-input-placeholder {
|
258 | color: @transparentInvertedPlaceholderColor;
|
259 | }
|
260 | }
|
261 | }
|
262 |
|
263 | & when (@variationInputIcon) {
|
264 | |
265 |
|
266 |
|
267 |
|
268 | .ui.icon.input > i.icon {
|
269 | cursor: default;
|
270 | position: absolute;
|
271 | line-height: 1;
|
272 | text-align: center;
|
273 | top: 0;
|
274 | right: 0;
|
275 | margin: 0;
|
276 | height: 100%;
|
277 |
|
278 | width: @iconWidth;
|
279 | opacity: @iconOpacity;
|
280 | border-radius: 0 @borderRadius @borderRadius 0;
|
281 | transition: @iconTransition;
|
282 | }
|
283 | .ui.icon.input > i.icon:not(.link) {
|
284 | pointer-events: none;
|
285 | }
|
286 | .ui.ui.ui.ui.icon.input > textarea,
|
287 | .ui.ui.ui.ui.icon.input > input {
|
288 | padding-right: @iconMargin;
|
289 | }
|
290 |
|
291 | .ui.icon.input > i.icon:before,
|
292 | .ui.icon.input > i.icon:after {
|
293 | left: 0;
|
294 | position: absolute;
|
295 | text-align: center;
|
296 | top: 50%;
|
297 | width: 100%;
|
298 | margin-top: @iconOffset;
|
299 | }
|
300 | .ui.icon.input > i.link.icon {
|
301 | cursor: pointer;
|
302 | }
|
303 | .ui.icon.input > i.circular.icon {
|
304 | top: @circularIconVerticalOffset;
|
305 | right: @circularIconHorizontalOffset;
|
306 | }
|
307 |
|
308 |
|
309 | .ui[class*="left icon"].input > i.icon {
|
310 | right: auto;
|
311 | left: @borderWidth;
|
312 | border-radius: @borderRadius 0 0 @borderRadius;
|
313 | }
|
314 | .ui[class*="left icon"].input > i.circular.icon {
|
315 | right: auto;
|
316 | left: @circularIconHorizontalOffset;
|
317 | }
|
318 | .ui.ui.ui.ui[class*="left icon"].input > textarea,
|
319 | .ui.ui.ui.ui[class*="left icon"].input > input {
|
320 | padding-left: @iconMargin;
|
321 | padding-right: @horizontalPadding;
|
322 | }
|
323 |
|
324 |
|
325 | .ui.icon.input > textarea:focus ~ i.icon,
|
326 | .ui.icon.input > input:focus ~ i.icon {
|
327 | opacity: 1;
|
328 | }
|
329 | }
|
330 |
|
331 | & when (@variationInputLabeled) {
|
332 | |
333 |
|
334 |
|
335 |
|
336 |
|
337 | .ui.labeled.input > .label {
|
338 | flex: 0 0 auto;
|
339 | margin: 0;
|
340 | font-size: @relativeMedium;
|
341 | }
|
342 | .ui.labeled.input > .label:not(.corner) {
|
343 | padding-top: @verticalPadding;
|
344 | padding-bottom: @verticalPadding;
|
345 | }
|
346 |
|
347 |
|
348 | .ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
|
349 | border-top-right-radius: 0;
|
350 | border-bottom-right-radius: 0;
|
351 | }
|
352 | .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
|
353 | border-top-left-radius: 0;
|
354 | border-bottom-left-radius: 0;
|
355 | border-left-color: transparent;
|
356 | }
|
357 | .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
|
358 | border-left-color: @focusBorderColor;
|
359 | }
|
360 |
|
361 |
|
362 | .ui[class*="right labeled"].input > input {
|
363 | border-top-right-radius: 0 !important;
|
364 | border-bottom-right-radius: 0 !important;
|
365 | border-right-color: transparent !important;
|
366 | }
|
367 | .ui[class*="right labeled"].input > input + .label {
|
368 | border-top-left-radius: 0;
|
369 | border-bottom-left-radius: 0;
|
370 | }
|
371 |
|
372 | .ui[class*="right labeled"].input > input:focus {
|
373 | border-right-color: @focusBorderColor !important;
|
374 | }
|
375 | }
|
376 |
|
377 | & when (@variationInputCorner) {
|
378 |
|
379 | .ui.labeled.input .corner.label {
|
380 | top: @labelCornerTop;
|
381 | right: @labelCornerRight;
|
382 | font-size: @labelCornerSize;
|
383 | border-radius: 0 @borderRadius 0 0;
|
384 | }
|
385 |
|
386 |
|
387 | .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
|
388 | .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
|
389 | padding-right: @labeledMargin !important;
|
390 | }
|
391 | .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
|
392 | .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
|
393 | padding-right: @labeledIconInputMargin !important;
|
394 | }
|
395 | .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
|
396 | margin-right: @labeledIconMargin;
|
397 | }
|
398 |
|
399 |
|
400 | .ui[class*="left corner labeled"].labeled.input > textarea,
|
401 | .ui[class*="left corner labeled"].labeled.input > input {
|
402 | padding-left: @labeledMargin !important;
|
403 | }
|
404 | & when (@variationInputIcon) {
|
405 | .ui[class*="left corner labeled"].icon.input > textarea,
|
406 | .ui[class*="left corner labeled"].icon.input > input {
|
407 | padding-left: @labeledIconInputMargin !important;
|
408 | }
|
409 | .ui[class*="left corner labeled"].icon.input > .icon {
|
410 | margin-left: @labeledIconMargin;
|
411 | }
|
412 | }
|
413 | }
|
414 | & when (@variationInputIcon) {
|
415 | .ui.icon.input > textarea ~ .icon {
|
416 | height: @textareaIconHeight;
|
417 | }
|
418 | :not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
|
419 | height: @transparentTextareaIconHeight;
|
420 | }
|
421 | }
|
422 | & when (@variationInputCorner) {
|
423 |
|
424 | .ui.input > .ui.corner.label {
|
425 | top: @borderWidth;
|
426 | right: @borderWidth;
|
427 | }
|
428 | .ui.input > .ui.left.corner.label {
|
429 | right: auto;
|
430 | left: @borderWidth;
|
431 | }
|
432 | }
|
433 |
|
434 | & when (@variationInputLabeled) or (@variationInputAction) {
|
435 |
|
436 | each(@formStates, {
|
437 | @state: replace(@key, '@', '');
|
438 | @borderColor: @formStates[@@state][borderColor];
|
439 |
|
440 | .ui.form > .field.@{state} > .ui.action.input > .ui.button,
|
441 | .ui.form > .field.@{state} > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
|
442 | .ui.action.input.@{state} > .ui.button,
|
443 | .ui.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label {
|
444 | border-top: @borderWidth solid @borderColor;
|
445 | border-bottom: @borderWidth solid @borderColor;
|
446 | }
|
447 | .ui.form > .field.@{state} > .ui.left.action.input > .ui.button,
|
448 | .ui.form > .field.@{state} > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
|
449 | .ui.left.action.input.@{state} > .ui.button,
|
450 | .ui.labeled.input.@{state}:not(.right):not([class*="corner labeled"]) > .ui.label {
|
451 | border-left: @borderWidth solid @borderColor;
|
452 | }
|
453 | .ui.form > .field.@{state} > .ui.action.input:not(.left) > input + .ui.button,
|
454 | .ui.form > .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
|
455 | .ui.action.input.@{state}:not(.left) > input + .ui.button,
|
456 | .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label {
|
457 | border-right: @borderWidth solid @borderColor;
|
458 | }
|
459 | .ui.form > .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
|
460 | .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label:first-child {
|
461 | border-left: @borderWidth solid @borderColor;
|
462 | }
|
463 | })
|
464 | }
|
465 |
|
466 | & when (@variationInputAction) {
|
467 | |
468 |
|
469 |
|
470 |
|
471 | .ui.action.input > .button,
|
472 | .ui.action.input > .buttons {
|
473 | display: flex;
|
474 | align-items: center;
|
475 | flex: 0 0 auto;
|
476 | }
|
477 | .ui.action.input > .button,
|
478 | .ui.action.input > .buttons > .button {
|
479 | padding-top: @verticalPadding;
|
480 | padding-bottom: @verticalPadding;
|
481 | margin: 0;
|
482 | }
|
483 |
|
484 |
|
485 | .ui[class*="left action"].input > input {
|
486 | border-top-left-radius: 0;
|
487 | border-bottom-left-radius: 0;
|
488 | border-left-color: transparent;
|
489 | }
|
490 |
|
491 |
|
492 | .ui.action.input:not([class*="left action"]) > input {
|
493 | border-top-right-radius: 0;
|
494 | border-bottom-right-radius: 0;
|
495 | border-right-color: transparent;
|
496 | }
|
497 |
|
498 |
|
499 | .ui.action.input > .dropdown:first-child,
|
500 | .ui.action.input > .button:first-child,
|
501 | .ui.action.input > .buttons:first-child > .button {
|
502 | border-radius: @borderRadius 0 0 @borderRadius;
|
503 | }
|
504 | .ui.action.input > .dropdown:not(:first-child),
|
505 | .ui.action.input > .button:not(:first-child),
|
506 | .ui.action.input > .buttons:not(:first-child) > .button {
|
507 | border-radius: 0;
|
508 | }
|
509 | .ui.action.input > .dropdown:last-child,
|
510 | .ui.action.input > .button:last-child,
|
511 | .ui.action.input > .buttons:last-child > .button {
|
512 | border-radius: 0 @borderRadius @borderRadius 0;
|
513 | }
|
514 |
|
515 |
|
516 | .ui.action.input:not([class*="left action"]) > input:focus {
|
517 | border-right-color: @focusBorderColor;
|
518 | }
|
519 |
|
520 | .ui.ui[class*="left action"].input > input:focus {
|
521 | border-left-color: @focusBorderColor;
|
522 | }
|
523 | }
|
524 |
|
525 | & when (@variationInputInverted) {
|
526 | |
527 |
|
528 |
|
529 |
|
530 |
|
531 | .ui.inverted.input > input {
|
532 | border: none;
|
533 | }
|
534 | }
|
535 |
|
536 | & when (@variationInputFluid) {
|
537 | |
538 |
|
539 |
|
540 |
|
541 | .ui.fluid.input {
|
542 | display: flex;
|
543 | }
|
544 | .ui.fluid.input > input {
|
545 | width: 0 !important;
|
546 | }
|
547 | }
|
548 |
|
549 |
|
550 |
|
551 |
|
552 |
|
553 | .ui.input {
|
554 | font-size: @relativeMedium;
|
555 | }
|
556 | & when not (@variationInputSizes = false) {
|
557 | each(@variationInputSizes, {
|
558 | @s: @{value}InputSize;
|
559 | .ui.@{value}.input {
|
560 | font-size: @@s;
|
561 | }
|
562 | })
|
563 | }
|
564 |
|
565 | .loadUIOverrides();
|