[TASK] Replace clearable icon with SVG from TYPO3 icon set
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / typo3 / _main_form.scss
1 //
2 // Disable ms-clear pseudo-element globally to avoid confusion with the
3 // existing clearable integration in TYPO3
4 //
5 // https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
6 //
7 *::-ms-clear {
8     display: none;
9 }
10
11 //
12 // Form
13 //
14 #typo3-docbody form {
15     margin-bottom: 1.25em;
16 }
17
18 //
19 // Go back A-tags
20 //
21 a.typo3-goBack {
22     font-weight: bold;
23
24     img {
25         margin-right: 5px;
26         vertical-align: middle;
27     }
28 }
29
30 span.typo3-moduleHeader img {
31     margin-right: 4px;
32     vertical-align: middle;
33 }
34
35 //
36 // Form control state additions
37 //
38 .has-change {
39     @include form-control-validation($state-info-text, $state-info-text, $state-info-bg);
40
41     .thumbnail-status {
42         border: 1px solid $state-info-text;
43     }
44     // A loading order issue prevents .has-change to be overridden with .has-error
45     // this is a workaround needs to be cleaned up in a less file restructuring
46     &.has-error {
47         @extend .has-error;
48     }
49 }
50
51 //
52 // Input group additions
53 //
54 .input-group-icon {
55     width: 32px;
56     vertical-align: middle;
57
58     img {
59         width: 100%;
60         max-height: 18px;
61     }
62 }
63
64 .input-group-addon {
65     min-width: 2.5em;
66 }
67
68 //
69 // IE: ensure DatePicker is opened on button click
70 //
71 label {
72     .icon {
73         img {
74             pointer-events: none;
75         }
76     }
77 }
78
79 //
80 // Form control additions
81 //
82 .form-control {
83     min-width: 120px;
84 }
85
86 .form-control-adapt {
87     width: auto;
88     max-width: 100%;
89 }
90
91 .form-control-wrap {
92     margin: 9px 0;
93 }
94
95 .form-control-holder {
96     position: relative;
97 }
98
99 .row {
100     > .form-group {
101         > .form-control-wrap {
102             margin-bottom: 0;
103         }
104     }
105 }
106
107 .form-control[disabled],
108 .form-control[readonly],
109 fieldset[disabled] .form-control {
110     color: $input-color-disabled;
111 }
112
113 //
114 // Form control icon
115 //
116 .form-control-icon {
117     position: absolute;
118     top: 50%;
119     left: 15px;
120     transform: translate(0, -50%);
121     z-index: 1;
122
123     + .form-control,
124     + .form-control-clearable .form-control {
125         padding-left: 3.25em;
126     }
127 }
128
129 //
130 // Form group validation states
131 //
132 .form-group.has-error {
133     label:before {
134         font-family: FontAwesome;
135         font-size: 12px;
136         text-align: center;
137         content: $fa-var-exclamation-circle;
138         color: $brand-danger;
139         display: inline-block;
140     }
141
142     .btn-toolbar {
143         label:before {
144             font-family: inherit;
145             font-size: inherit;
146             margin-right: inherit;
147             text-align: inherit;
148             content: '';
149             color: inherit;
150             display: block;
151         }
152     }
153
154     .input-group-btn {
155         label {
156             border-color: $brand-danger;
157
158             .t3-icon {
159                 color: $brand-danger;
160             }
161         }
162
163         label:before {
164             font-family: inherit;
165             font-size: inherit;
166             margin-right: inherit;
167             text-align: inherit;
168             content: '';
169             color: inherit;
170             display: block;
171         }
172     }
173 }
174
175 //
176 // Select
177 //
178 select {
179     &.form-control {
180         &[multiple],
181         &[size] {
182             min-height: 156px;
183             width: 100% !important;
184         }
185
186         &[size="1"] {
187             height: $input-height-base;
188             min-height: 0;
189         }
190
191         &[size="1"],
192         &:not([size]) {
193             appearance: none;
194
195             &::-ms-expand {
196                 display: none;
197             }
198
199             &:not(.form-select-no-siblings) {
200                 background-image: url('#{$path-sysext}/core/Resources/Public/Icons/T3Icons/actions/actions-view-list-expand.svg');
201                 background-position: right 4px center;
202                 background-repeat: no-repeat;
203                 background-size: 16px 16px;
204                 padding-right: 24px;
205             }
206
207             &.input-sm,
208             .form-group-sm & {
209                 line-height: 16px;
210             }
211         }
212
213         > optgroup {
214             margin-top: 9px;
215
216             &:first-child {
217                 margin-top: 0;
218             }
219         }
220
221         option {
222             padding-top: 2px;
223             padding-bottom: 2px;
224         }
225     }
226
227     &.icon-select {
228         option {
229             padding-left: 22px;
230         }
231     }
232 }
233
234 //
235 // Styles for the "clearable" jquery plugin.
236 //
237 .form-control-clearable {
238     position: relative;
239
240     .form-control {
241         padding-right: 2.3em;
242     }
243
244     .close {
245         position: absolute;
246         height: 16px;
247         z-index: 3;
248         top: 50%;
249         right: 0.5em;
250         transform: translate(0, -50%);
251
252         .icon {
253             vertical-align: 0;
254         }
255     }
256 }
257
258 .input-group {
259     .form-control-clearable {
260         display: table-cell;
261
262         .form-control {
263             display: block;
264         }
265     }
266 }
267
268 //
269 // Styles for the "capslock" jquery plugin.
270 //
271 .form-notice-capslock {
272     position: absolute;
273     right: 6px;
274     top: 50%;
275     margin-top: -10px;
276     height: 20px;
277     width: 20px;
278     padding: 3px;
279     z-index: 10;
280     background-color: #fff;
281
282     > img {
283         display: block;
284         opacity: 0.5;
285     }
286 }
287
288 //
289 // Form Inline adjustments
290 //
291 .form-inline-spaced {
292     margin: 0 -0.5em $line-height-computed;
293
294     .form-group {
295         margin: 0.5em 0.5em 0;
296
297         label {
298             margin-right: 0.5em;
299         }
300     }
301 }
302
303 //
304 // Form group additions
305 //
306 .form-group-dashed {
307     & + .form-group-dashed {
308         padding-top: 15px;
309         border-top: 1px dashed #ccc;
310     }
311 }
312
313 //
314 // Form Sections
315 //
316 .form-section {
317     border: 1px solid #ccc;
318     background-color: #fafafa;
319     padding: 15px 12px 3px;
320
321     & + .form-section {
322         margin-top: -1px;
323     }
324 }
325
326 .tab-pane {
327     > .form-section:first-child {
328         border-top: none;
329     }
330 }
331
332 .form-section-headline {
333     margin-top: 0;
334     margin-bottom: 10px;
335 }
336
337 //
338 // Form Wizards
339 //
340 .form-wizards-wrap {
341     display: table;
342     width: 100%;
343
344     > .form-wizards-element {
345         display: table-cell;
346         width: 100%;
347     }
348
349     > .form-wizards-items-top {
350         display: table-row;
351     }
352
353     > .form-wizards-items-aside {
354         display: table-cell;
355         vertical-align: top;
356         padding-left: 5px;
357         white-space: nowrap;
358     }
359
360     > .form-wizards-items-bottom {
361         display: table-row;
362     }
363
364     > .form-wizards-items-bottom:first-child {
365         margin-top: 4px;
366     }
367 }
368
369 //
370 // Form Irre
371 //
372 .form-irre-header {
373     display: table;
374     margin: -5px;
375
376     @include user-select(none);
377 }
378
379 .form-irre-header-cell {
380     display: table-cell;
381     vertical-align: middle;
382     white-space: nowrap;
383     padding: 5px;
384 }
385
386 .form-irre-header-body {
387     width: 100%;
388     font-weight: normal;
389     white-space: normal;
390
391     dl {
392         @extend .dl-horizontal;
393
394         margin-bottom: 0;
395     }
396 }
397
398 .form-irre-header-icon {
399     padding-right: 0;
400 }
401
402 .form-irre-header-control {
403     cursor: auto;
404
405     .btn-group > .btn {
406         float: none;
407     }
408 }
409
410 //
411 // Form Multi Group
412 //
413 .form-multigroup-wrap {
414     width: 100%;
415     display: table;
416
417     .form-multigroup-item {
418         display: table-cell;
419         width: 50%;
420         vertical-align: top;
421
422         + .form-multigroup-item {
423             padding-left: 5px;
424         }
425     }
426
427     .form-multigroup-item-wizard {
428         margin-bottom: 5px;
429
430         + select.form-control[multiple],
431         + select.form-control[size] {
432             min-height: 125px;
433         }
434     }
435
436     .form-wizards-wrap {
437         width: 100%;
438     }
439 }
440
441 //
442 // Radio & Checkbox
443 //
444 .radio-row,
445 .checkbox-row {
446     margin-top: 10px;
447     margin-bottom: 5px;
448 }
449
450 .radio-column,
451 .checkbox-column {
452     margin-bottom: 5px;
453
454     > .radio,
455     > .checkbox {
456         margin: 0;
457     }
458 }
459
460 .radio-inline,
461 .checkbox-inline {
462     &.radio,
463     &.checkbox {
464         display: block;
465         margin-left: 0;
466         margin-right: 10px;
467         margin-bottom: 10px;
468         padding: 0;
469
470         @media (max-width: $screen-xs-max) {
471             & + .radio,
472             & + .checkbox {
473                 margin-top: -5px;
474             }
475         }
476
477         @media (min-width: $screen-sm-min) {
478             display: inline-block;
479             margin-top: 10px;
480
481             label {
482                 white-space: nowrap;
483             }
484         }
485     }
486 }
487
488 //
489 // Autoresize for Textareas
490 //
491 // no manual resizing for textareas (works on non-IE browser only anyways)
492 // as it is handled by JS: "autosize"
493 //
494 textarea {
495     &.formengine-textarea {
496         resize: none;
497     }
498 }