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