[BUGFIX] FormEngine fix inline paddings and hierarchy
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / structure / _element_tceforms.less
1 /**
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /* - - - - - - - - - - - - - - - - - - - - -
15 TCEforms
16 - - - - - - - - - - - - - - - - - - - - - */
17
18 img.t3-TCEforms-reqImg {
19 display: block;
20 position: absolute;
21 left: 14px;
22 top: 28%;
23 z-index: 3000;
24 height: 16px;
25 margin-right: 2px;
26 width: 16px;
27 }
28
29 img.t3-TCEforms-reqTabImg {
30 height: 16px;
31 margin-left: 4px;
32 margin-bottom: -3px;
33 width: 16px;
34 }
35
36 img.t3-TCEforms-contentchangedImg {
37 display: block;
38 position: absolute;
39 left: 4px;
40 top: 32%;
41 z-index: 4000;
42 width: 7px;
43 }
44
45 .t3-form-palette-icon-required {
46 display: block;
47 position: absolute;
48 left: 4px;
49 top: 26%;
50 z-index: 3000;
51 height: 16px;
52 margin-right: 2px;
53 width: 16px;
54 }
55 /* renamed to .t3-form-palette-icon-required, lines below kept for backwards-compatibility */
56 img.t3-TCEforms-reqPaletteImg {
57 display: block;
58 position: absolute;
59 left: 14px;
60 top: 30%;
61 z-index: 3000;
62 height: 16px;
63 margin-right: 2px;
64 width: 16px;
65 }
66
67 .t3-form-palette-icon-contentchanged {
68 display: block;
69 position: absolute;
70 left: -6px;
71 top: 30%;
72 z-index: 4000;
73 width: 7px;
74 }
75 /* renamed to .t3-form-palette-icon-contentchanged, lines below kept for backwards-compatibility */
76 img.t3-TCEforms-contentchangedPaletteImg {
77 display: block;
78 position: absolute;
79 left: 4px;
80 top: 30%;
81 z-index: 4000;
82 width: 7px;
83 }
84
85 .typo3-TCEforms {
86 width: 100%;
87 }
88
89
90 .typo3-TCEforms-recHeaderRow {
91 padding-top: 5px;
92 padding-bottom: 20px;
93 }
94
95 table.wrapperTable tr.class-main2 td.palette-header,
96 table.wrapperTable1 .class-main12 td.palette-header {
97 padding-left: 10px;
98 }
99
100 .typo3-TCEforms .palette-header h3 {
101 margin-top: 10px;
102 }
103
104 .typo3-TCEforms .bgColor2,
105 .typo3-TCEforms tr.bgColor2 td {
106 padding-bottom: 5px;
107 }
108
109 .typo3-TCEforms optgroup.c-divider,
110 select option.c-divider {
111 margin-top: 10px;
112 padding: 0px;
113 }
114
115 .typo3-TCEforms optgroup option {
116 margin: 0px;
117 padding: 2px;
118 }
119
120
121 .typo3-TCEforms select.icon-select option {
122 padding-left: 22px;
123 }
124
125 .typo3-TCEforms table.typo3-TCEforms-select-checkbox {
126 margin-bottom: 10px;
127 }
128
129 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tbody {
130 display: block;
131 max-height: 300px;
132 overflow-y: scroll;
133 }
134
135 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td {
136 vertical-align: middle;
137 }
138
139 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td,
140 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-checkbox,
141 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
142 padding: 1px 3px;
143 }
144
145 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
146 min-width: 300px;
147 }
148
149 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell img {
150 margin-right: 5px;
151 }
152
153 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr {
154 width: 40px;
155 }
156
157 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr img {
158 float: right;
159 }
160
161 .typo3-TCEforms table.typo3-TCEforms-select-singlebox {
162 margin-bottom: 10px;
163 margin-top: 4px;
164 }
165
166 .typo3-TCEforms .checkbox,
167 .typo3-TCEforms .checkbox:hover {
168 position: relative;
169 z-index: 3500;
170 }
171
172 .typo3-TCEforms .class-main1 > td,
173 .typo3-TCEforms .class-main11 > td,
174 .typo3-TCEforms .class-main21 > td,
175 .typo3-TCEforms .class-main31 > td,
176 .typo3-TCEforms .class-main41 > td,
177 .typo3-TCEforms .class-main51 > td {
178 padding: 2px 0px 2px 0px;
179 }
180
181 .typo3-TCEforms .class-main2 > td,
182 .typo3-TCEforms .class-main12 > td,
183 .typo3-TCEforms .class-main22 > td,
184 .typo3-TCEforms .class-main32 > td,
185 .typo3-TCEforms .class-main42 > td,
186 .typo3-TCEforms .class-main52 > td {
187 padding: 6px 0px 2px 0px;
188 }
189
190 .typo3-TCEforms .class-main3,
191 .typo3-TCEforms .class-main13,
192 .typo3-TCEforms .class-main23,
193 .typo3-TCEforms .class-main33,
194 .typo3-TCEforms .class-main43,
195 .typo3-TCEforms .class-main53 {
196 padding: 2px 0px 2px 0px;
197 }
198
199 .typo3-TCEforms td.formField-header,
200 .typo3-TCEforms td.palette-header,
201 .typo3-TCEforms td.formField-field {
202 display: block;
203 position: relative;
204 vertical-align: top;
205 }
206
207 div.typo3-TCEforms div.c-tablayer table > tbody > tr > td > table.wrapperTable > tbody > tr > td {
208 padding-left: 10px;
209 padding-right: 10px;
210 }
211
212 .typo3-TCEforms .formField,
213 .typo3-TCEforms .formField1,
214 .typo3-TCEforms .formField2,
215 .typo3-TCEforms .formField3,
216 .typo3-TCEforms .formField4,
217 .typo3-TCEforms .formField5 {
218 vertical-align: middle;
219 position: relative;
220 }
221
222 .typo3-TCEforms .formField:focus,
223 .typo3-TCEforms .formField1:focus,
224 .typo3-TCEforms .formField2:focus,
225 .typo3-TCEforms .formField3:focus,
226 .typo3-TCEforms .formField4:focus,
227 .typo3-TCEforms .formField5:focus {
228 z-index: 3500;
229 }
230
231 .typo3-TCEforms .wrapperTable,
232 .typo3-TCEforms .wrapperTable1,
233 .typo3-TCEforms .wrapperTable2,
234 .typo3-TCEforms .wrapperTable3,
235 .typo3-TCEforms .wrapperTable4,
236 .typo3-TCEforms .wrapperTable5 {
237 padding: 5px 0 5px 0;
238 }
239
240 .t3-form-field-group-file tr:last-child td {
241 vertical-align: top;
242 }
243
244 .typo3-TCEforms td.icons {
245 padding: 2px;
246 }
247
248 .typo3-TCEforms td.thumbnails {
249 padding-top: 2px;
250 }
251
252 .typo3-TCEforms div.imagethumbs {
253 padding-top: 2px;
254 white-space: normal;
255 width: 253px;
256 }
257
258 .typo3-TCEforms div.imagethumbs br {
259 display: none;
260 }
261
262 .typo3-TCEforms div.imagethumbs .nobr {
263 display: inline-block;
264 width: 60px;
265 height: 60px;
266 overflow: hidden;
267 margin-right: 3px;
268 margin-bottom: 1px;
269 text-align: center;
270 }
271
272 .typo3-TCEforms div.imagethumbs .nobr a {
273 display: block;
274 width: 60px;
275 height: 60px;
276 line-height: 58px;
277 text-align: center;
278 }
279
280 .typo3-TCEforms div.imagethumbs .nobr a img {
281 display: inline;
282 margin-right: auto;
283 vertical-align: middle;
284 margin-left: auto;
285 }
286
287 .typo3-TCEforms div.imagethumbs .nobr span {
288 display: none;
289 }
290
291 .typo3-TCEforms span.filetypes {
292 display: block;
293 margin-top: 6px;
294 white-space: normal;
295 width: 250px;
296 }
297
298 .t3-form-field-container {
299 display: block;
300 }
301
302 .typo3-TCEforms-palette .typo3-csh-link img {
303 padding-top: 3px;
304 vertical-align: top;
305 }
306
307 .typo3-TCEforms-palette select.select,
308 .t3-form-palette-field-container select.select {
309 margin: 4px 2px 4px 1px;
310 }
311
312 .t3-form-palette-field-container {
313 display: inline-block;
314 vertical-align: top;
315 padding-right: 25px;
316 }
317
318 .t3-form-palette-field-container .t3-form-palette-field-label,
319 .t3-form-palette-field-container .t3-form-palette-field {
320 display: block;
321 position: relative;
322 }
323
324 .typo3-TCEforms .typo3-csh-link {
325 margin-left: 5px;
326 }
327
328 .t3-tceforms-fieldReadOnly {
329 /** Lock icon in right corner */
330 padding: 3px 30px 3px 6px;
331 margin: 0 0.5em 0.5em 0;
332 position: relative;
333 }
334
335 /* - - - - - - - - - - - - - - - - - - - - -
336 TCEforms suggest
337 - - - - - - - - - - - - - - - - - - - - - */
338 div.typo3-TCEforms-suggest-position-right {
339 margin-left: 10px;
340 margin-top: 5px;
341 }
342
343 div.typo3-TCEforms-suggest label {
344 margin-right: 5px;
345 }
346
347 div.typo3-TCEforms-suggest-indicator {
348 left: 230px;
349 position: relative;
350 top: -18px;
351 }
352
353 div.typo3-TCEforms-suggest-choices {
354 position: absolute;
355 width: 250px;
356 z-index: 4000;
357 }
358
359 div.typo3-TCEforms-suggest-choices ul {
360 margin: 0;
361 padding: 0;
362 }
363
364 div.typo3-TCEforms-suggest-choices li {
365 display: block;
366 margin: 0;
367 padding: 4px 2px 4px 24px;
368 }
369
370 div.typo3-TCEforms-suggest-choices li.suggest-noresults {
371 height: auto;
372 }
373
374 div.typo3-TCEforms-suggest-choices span.suggest-uid {
375 margin-left: 0.3em;
376 }
377
378 div.typo3-TCEforms-suggest-choices span.suggest-path {
379 margin-top: 0.3em;
380 }
381
382 input.typo3-TCEforms-suggest-search {
383 width: 200px;
384 padding-left: 20px;
385 vertical-align: middle;
386 }
387
388
389 /* - - - - - - - - - - - - - - - - - - - - -
390 TCEforms Flexforms
391 - - - - - - - - - - - - - - - - - - - - - */
392 /** tabs inside the table => flexforms */
393 .typo3-TCEforms .wrapperTable .typo3-dyntabmenu-divs,
394 .typo3-TCEforms .wrapperTable1 .typo3-dyntabmenu-divs,
395 .typo3-TCEforms .wrapperTable2 .typo3-dyntabmenu-divs,
396 .typo3-TCEforms .wrapperTable3 .typo3-dyntabmenu-divs,
397 .typo3-TCEforms .wrapperTable4 .typo3-dyntabmenu-divs,
398 .typo3-TCEforms .wrapperTable5 .typo3-dyntabmenu-divs {
399 margin-right: 20px;
400 margin-bottom: 10px;
401 }
402
403 .t3-form-field-label-flex {
404 padding: 5px;
405 }
406
407 .t3-form-field-flex {
408 padding: 0 5px 5px;
409 }
410
411
412 /* - - - - - - - - - - - - - - - - - - - - -
413 TCEforms Inline-Relational-Record-Editing
414 - - - - - - - - - - - - - - - - - - - - - */
415 .t3-form-field-container-wrap {
416 margin: 6px 0px;
417 }
418
419 .t3-form-field-container-inline {
420 margin: 2px 0px;
421 }
422
423 .t3-form-field-header-inline > span {
424 position: absolute;
425 left: 4px;
426 top: 15px;
427 }
428
429 .t3-form-field-header-inline-wrap:before,
430 .t3-form-field-header-inline-wrap:after {
431 content: " ";
432 display: table;
433 }
434
435 .t3-form-field-header-inline-wrap:after {
436 clear: both;
437 }
438
439 .t3-form-field-header-inline-wrap {
440 min-width: 300px;
441 }
442
443 .t3-form-field-header-inline-icon,
444 .t3-form-field-header-inline-thumbnail {
445 float: left;
446 margin-right: 5px;
447 }
448
449 .t3-form-field-header-inline-icon {
450 width: 18px;
451 height: 16px;
452 padding: 3px 0px;
453 }
454
455 .t3-form-field-header-inline-thumbnail {
456 float: left;
457 margin-right: 15px;
458 }
459
460 .t3-form-field-header-inline-thumbnail img {
461 display: block;
462 }
463
464 .t3-form-field-header-inline-ctrl {
465 float: right;
466 }
467
468 .t3-form-field-header-inline-ctrl .t3-icon {
469 margin: 0px;
470 margin-left: 3px;
471 }
472
473 .t3-form-field-header-inline-body,
474 .t3-form-field-header-inline-summary {
475 overflow: hidden;
476 zoom: 1;
477 }
478
479 .t3-form-field-header-inline-thumbnail,
480 .t3-form-field-header-inline-summary {
481 cursor: pointer;
482 }
483
484 .t3-form-field-header-inline-ctrl,
485 .t3-form-field-header-inline-summary {
486 padding: 5px 0px;
487 }
488
489 .t3-form-field-header-inline-summary dl {
490 margin: 0px;
491 overflow: hidden;
492 }
493
494 .t3-form-field-header-inline-summary dt {
495 font-weight: bold;
496 float: left;
497 clear: left;
498 margin-right: 10px;
499 }
500
501 .t3-form-field-header-inline-summary dd {
502 float: left;
503 }
504
505 .t3-form-field-header-inline-ctrl img {
506 vertical-align: middle;
507 }
508
509 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > * {
510 opacity: 0;
511 }
512
513 .t3-form-field-header-inline:hover .t3-form-field-header-inline-ctrl > * {
514 opacity: 1;
515 }
516
517 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > span.sortableHandle {
518 margin-left: 16px;
519 opacity: 1;
520 display: inline-block;
521 }
522
523 .t3-form-field-container-inline-placeHolder div.t3-form-field-record-inline,
524 .t3-form-field-container-inline-collapsed div.t3-form-field-record-inline {
525 display:none !important;
526 }
527
528 .t3-form-field-header-inline {
529 padding: 6px 16px;
530 position:relative;
531 }
532
533 .t3-form-field-container-inline-placeHolder .t3-form-field-header-inline > span {
534 display:none;
535 }
536
537 .t3-form-field-record-inline {
538 padding: 8px 8px;
539 position: relative;
540 }
541
542 .t3-form-field-record-inline > table {
543 width:100%;
544 }
545
546 .t3-form-field-record-inline .typo3-dyntabmenu-divs,
547 .t3-form-field-record-inline .typo3-dyntabmenu-tabs {
548 margin-left:8px;
549 margin-right:8px !important;
550 margin-bottom:0px !important;
551 }
552
553 .sortableHandle {
554 cursor: move;
555 }
556
557 /* - - - - - - - - - - - - - - - - - - - - -
558 TCEforms Sections
559 - - - - - - - - - - - - - - - - - - - - - */
560 .t3-form-field-container-flexsection {
561 padding-left: 20px;
562 }
563
564 .t3-form-field-header-flexsection {
565 width: 100%;
566 height: 16px;
567 }
568
569 .t3-form-field-label-flexsection {
570 padding: 5px 10px;
571 }
572
573 .t3-form-field-toggle-flexsection {
574 padding: 5px 0 5px 20px;
575 }
576
577 .t3-form-field-add-flexsection {
578 padding: 10px 5px 5px 20px;
579 }
580
581 .t3-form-field-container-flexsections {
582 margin: 5px 0;
583 }
584
585 .t3-form-field-record-flexsection {
586 padding: 5px 0;
587 }
588
589 .t3-form-field-record-flexsection > div {
590 margin:0 10px;
591 }
592
593 /* preview image in sys_file records */
594 img.t3-tceforms-sysfile-imagepreview {
595 float: left;
596 margin-right: 10px;
597 margin-bottom: 10px;
598 }
599
600 * html div#typo3-docbody .typo3-TCEforms {
601 margin-top: 20px;
602 }
603
604 .typo3-TCEforms .formField-field img[src*="clear.gif"],
605 .typo3-TCEforms .t3-form-palette-field img[src*="clear.gif"] {
606 z-index: 0;
607 }