[TASK] Streamline less files
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / form.less
1 @charset "UTF-8";
2
3 .std-em-selector {
4   font-size: 90%;
5   font-style: normal;
6 }
7
8 .std-strong-selector {
9   display: block;
10   font-size: 90%;
11   font-weight: normal;
12   color: #C00;
13 }
14
15 .std-li-selector{
16   float: none;
17   width: auto;
18   margin-right: 0;
19   margin-left: 1em;
20 }
21 #fake-form {
22
23   ol {
24     padding-left: 0 !important;
25     list-style: none !important;
26   }
27
28   /* style for each form element */
29   li {
30     overflow: hidden;
31     padding: 0.5em;
32     margin-bottom: 0.5em;
33
34     &#element-placeholder{
35       padding: 0;
36       margin: 0;
37     }
38
39     input + label,
40     textarea + label,
41     select + label {
42       .std-li-selector;
43     }
44
45     textarea + label {
46       vertical-align: top;
47     }
48   }
49
50   textarea, input[type=text]{
51     border: 1px solid #c0c0c0;
52   }
53
54   input[type=text]{
55     // equal width like textareas
56     width:300px;
57     padding: 3px;
58   }
59
60   label {
61     display:block;
62     margin-right: 1em;
63     vertical-align: baseline;
64
65     em{
66       .std-em-selector;
67     }
68
69     strong{
70       .std-strong-selector;
71     }
72   }
73
74   .x-checkbox, .x-radio{
75     label{
76       display:inline-block;
77     }
78   }
79
80   legend {
81     border-bottom:0;
82     em{
83       .std-em-selector;
84     }
85
86     strong{
87       .std-strong-selector;
88     }
89   }
90
91   fieldset {
92     position: relative;
93     margin: 0;
94     padding: 0;
95
96     &.submit {
97       border-style: none;
98     }
99
100     &.fieldset-horizontal {
101       border-width: 0;
102
103       &.label-below label {
104         display: block;
105         margin-left: 0;
106         margin-top: 0.2em;
107         font-size: 90%;
108         text-align: left;
109         color: #999999;
110       }
111
112       label{
113         em {
114           display: inline;
115         }
116       }
117
118       ol {
119         padding: 0;
120       }
121
122       li {
123         float: left;
124         margin-right: 1em;
125         padding: 0;
126       }
127     }
128
129     &.fieldset-subgroup {
130       margin-bottom: -2em;
131       border-style: none;
132
133       ol {
134         position: relative;
135         top: -1.4em;
136         padding: 0;
137       }
138
139       li {
140         padding: 0;
141       }
142
143       legend {
144         margin-left: 0;
145         padding: 0;
146       }
147
148       input + label {
149         float: none;
150         width: auto;
151         display: inline;
152         margin: 0 0 0 1em;
153       }
154     }
155   }
156
157   legend {
158     font-size: 12px;
159     font-weight: bold;
160     color: #000000;
161
162     em {
163       position: absolute;
164     }
165
166     strong {
167       position: absolute;
168       top: 1.4em;
169     }
170   }
171
172   /* labels as block, labels displayed above or below the input fields */
173   .labels-block{
174     label {
175       display: block;
176       float: none;
177       margin: 0 0 0.5em;
178       width: auto;
179     }
180
181     input + label,
182     textarea + label{
183       margin: 0.5em 0 0;
184     }
185
186   }
187 }
188
189 /* labels alignment right */
190 #fake-form .labels-alignment-right label,
191 #fake-form .labels-alignment-right .fieldset-subgroup legend,
192 #fake-form .labels-alignment-right.fieldset-subgroup legend {
193   text-align: right;
194 }
195
196 #fake-form .labels-block fieldset.fieldset-subgroup,
197 #fake-form fieldset.labels-block.fieldset-subgroup {
198   margin-bottom: 0;
199 }
200
201 #fake-form .labels-block .fieldset-subgroup legend,
202 #fake-form .labels-block.fieldset-subgroup legend {
203   width: auto;
204 }
205
206 #fake-form .labels-block .fieldset-subgroup legend em,
207 #fake-form .labels-block.fieldset-subgroup legend em {
208   position: relative;
209 }
210
211 #fake-form .labels-block .fieldset-subgroup legend strong,
212 #fake-form .labels-block.fieldset-subgroup legend strong {
213   position: relative;
214   top: 0;
215 }
216
217 #fake-form .labels-block .fieldset-subgroup ol,
218 #fake-form .labels-block.fieldset-subgroup ol {
219   top: 0;
220   margin: 0;
221   padding: 0.5em 0 0;
222 }
223
224 /* element HIDDEN */
225 #fake-form .formwizard-element.hidden-element {
226   cursor: default;
227 }
228
229 #fake-form .formwizard-element .hidden-dummy-element {
230   margin: 0;
231   padding: 5px;
232   border:1px dotted #A9A9A9;
233 }
234
235 /* styles for drag and drop content */
236 .x-dd-drag-ghost .formwizard-element {
237   list-style:none;
238 }
239
240 .x-dd-drop-icon {
241   top: 7px;
242 }
243
244 .x-dd-drag-ghost ol {
245   margin: 5px 0;
246   padding: 0;
247   list-style: none;
248 }
249
250 .x-dd-drag-ghost .buttongroup,
251 .x-dd-drag-ghost label em,
252 .x-dd-drag-ghost label strong {
253   display: none;
254 }
255
256 .x-dd-drag-ghost label {
257   margin: 0 10px 0 5px;
258 }
259
260 .x-dd-drag-ghost legend {
261   margin: 0 5px;
262   font-size: 14px;
263   font-weight: bold;
264   color: #000;
265   border: none;
266 }
267
268 .x-grid-panel .remove {
269   background-image: url("../../Images/remove.gif");
270   width: 15px;
271   height: 16px;
272 }
273
274 .x-dd-drag-proxy,
275 .x-dd-drop-nodrop {
276   background-color: #fff;
277   border-color: #c0c0c0;
278 }
279 .tab-content{
280   fieldset{
281
282     #formwizard{
283       display:inherit;
284     }
285
286     &.form-section{
287       float: left;
288       min-width: 380px;
289       width: 100%;
290       padding-bottom: 15px;
291
292       &:last-child{
293         margin-bottom: 1em;
294       }
295
296       ol{
297         &#formwizard-right{
298           // overwrite inline-style "auto"
299           width:100vw !important;
300           overflow: visible !important;
301           position: relative;
302           float:none;
303           left:5px !important;
304           padding-top:0;
305           padding-left:0;
306           margin-right: 10px;
307           top:30px !important;
308           display: table-cell;
309           height:auto !important;
310           list-style: none;
311           border-top-style: none;
312
313           &.hover{
314             left:0;
315             width:auto;
316           }
317         }
318       }
319     }
320   }
321 }
322
323 /* outer wrapper of whole wizard */
324 #form-wizard-element {
325   z-index: 1;
326
327   #formwizard-left{
328     display: table-cell;
329     float:left !important;
330     margin-right: -1px;
331
332     .x-tab-panel-body{
333       // overwrite inline-styles with important ;(
334       height:100% !important;
335       overflow:visible !important;
336     }
337   }
338 }
339
340 /* inner wrapper of whole wizard */
341 #formwizard {
342   background-color: #F8F8F8;
343 }
344
345 /* applied when a element is moved */
346 #formwizard.hover-move {
347   cursor: move;
348 }
349
350 /* left panel */
351 #formwizard-left.x-border-panel {
352   position: relative;
353   left: auto;
354   top: auto;
355 }
356
357 /* tabs */
358 #formwizard-left .x-tab-panel-header {
359   background-color: transparent;
360 }
361
362 /* tabs inner */
363 #formwizard-left .x-tab-strip {
364   margin-bottom: 0;
365 }
366
367 #formwizard-left .x-tab-strip-top .x-tab-left {
368   padding-right: 20px;
369 }
370
371 #formwizard-left .x-tab-strip-top .x-tab-right {
372   padding: 5px 10px 2px;
373   background-color: #EDEDED;
374   border-radius: 0;
375 }
376
377 #formwizard-left .x-tab-strip-top .x-tab-strip-active .x-tab-right,
378 #formwizard-left .x-tab-strip-top .x-tab-strip-active.x-tab-strip-over .x-tab-right{
379   background-color: transparent;
380   border-bottom-color: #F8F8F8;
381 }
382
383 #formwizard-left .x-tab-strip-top .x-tab-strip-over .x-tab-right {
384   background-color: #E1E1E1;
385 }
386
387 #formwizard-left li.validation-error .x-tab-left,
388 #formwizard-left div.validation-error .x-accordion-hd {
389   margin-right: 14px;
390   background-image: url("../../../../../t3skin/extjs/images/form/exclamation.gif");
391   background-position: right 1px;
392   background-repeat: no-repeat;
393 }
394
395 /* content below tabs */
396 #formwizard-left .x-tab-panel-body-content {
397   min-height: 330px;
398   padding: 10px;
399   background: transparent;
400   border: 1px solid #C0C0C0;
401   border-top-width: 0;
402 }
403
404 /* info messages (also for drag and drop) */
405 #formwizard-left .message-information,
406 #fake-form .message-information,
407 .x-dd-drag-ghost .message-information {
408   margin: 10px 0 15px 16px;
409   padding: 12px 10px;
410   background-image: none;
411   border-radius: 0;
412   box-shadow: none;
413 }
414
415 #formwizard-left .message-information p,
416 #fake-form .message-information p,
417 .x-dd-drag-ghost .message-information {
418   margin: 0;
419 }
420
421 /* intro info messages */
422 #formwizard-left #formwizard-left-elements-intro,
423 #formwizard-left #formwizard-left-options-dummy,
424 #fake-form .message-information {
425   margin: 0 0 10px;
426 }
427
428 #formwizard-left .x-tab-panel-body,
429 #formwizard-left .x-accordion-hd {
430   background: transparent none;
431   border-width: 0;
432 }
433
434 /* accordion */
435 #formwizard-left .x-panel-accordion {
436   border-bottom: 1px solid #C7C7C7;
437 }
438
439 #formwizard-left .x-panel-accordion:last-child {
440   border-bottom: medium none;
441 }
442
443 /* headline of accordion */
444 #formwizard-left .x-accordion-hd {
445   padding-left: 0;
446 }
447
448 /* toggle icon of accordion */
449 #formwizard-left .x-accordion-hd .x-tool-toggle {
450   margin: 0;
451   float: left;
452   background-image: url("../../Images/module-menu-down.png");
453   background-position: 0 4px;
454 }
455
456 #formwizard-left .x-panel-collapsed .x-accordion-hd .x-tool-toggle {
457   background-image: url("../../Images/module-menu-right.png");
458   background-position: 1px 3px;
459 }
460
461 #formwizard-left .x-accordion-hd .x-panel-header-text {
462   font-weight: bold;
463 }
464
465 #formwizard-left .x-accordion-hd .x-panel-body {
466   padding-left: 15px;
467 }
468
469 /* element inside accordion */
470 #formwizard-left .x-form {
471   margin-left: 15px;
472   margin-top: 10px;
473 }
474
475 #formwizard-left .x-form fieldset {
476   padding: 0;
477   border: none;
478 }
479 #formwizard-left .x-form fieldset legend {
480   padding: 0;
481   font-size: 12px;
482   color: #222222;
483 }
484
485 #formwizard-left .x-panel-tbar {
486   margin-top: 10px;
487   padding-left: 15px;
488   padding-bottom: 0;
489   border-width: 0;
490 }
491
492 #formwizard-left .x-panel-tbar .x-toolbar {
493   padding: 0;
494 }
495
496 #formwizard-left .x-table-layout {
497   margin-bottom: 10px;
498 }
499
500 /* generic element like textfield */
501 #formwizard-left .formwizard-element {
502   margin-left: 12px;
503   background-color: transparent;
504   background-image: none;
505   border-color: transparent;
506 }
507
508 #formwizard-left .formwizard-element.x-btn-over {
509   background-color: #D5D5D5;
510   background-image: -moz-linear-gradient(center top , #F6F6F6 10%, #D5D5D5 90%);
511   border-color: #C0C0C0;
512   border-radius: 0;
513 }
514
515 #formwizard-left .formwizard-element .x-btn-mc {
516   text-align: left;
517 }
518
519 /* form elements in left panel */
520 .formwizard-left-elements-basic-button {
521   background-image: url("../../Images/ui-button.png");
522 }
523
524 .formwizard-left-elements-basic-checkbox {
525   background-image: url("../../Images/ui-check-box.png");
526 }
527
528 .formwizard-left-elements-basic-fieldset {
529   background-image: url("../../Images/ui-group-box.png");
530 }
531
532 .formwizard-left-elements-basic-fileupload {
533   background-image: url("../../Images/drive-upload.png");
534 }
535
536 .formwizard-left-elements-basic-hidden {
537   background-image: url("../../Images/ui-text-field-hidden.png");
538 }
539
540 .formwizard-left-elements-basic-password {
541   background-image: url("../../Images/ui-text-field-password.png");
542 }
543
544 .formwizard-left-elements-basic-radio {
545   background-image: url("../../Images/ui-radio-button.png");
546 }
547
548 .formwizard-left-elements-basic-reset {
549   background-image: url("../../Images/broom.png");
550 }
551
552 .formwizard-left-elements-basic-select {
553   background-image: url("../../Images/ui-combo-box.png");
554 }
555
556 .formwizard-left-elements-basic-submit {
557   background-image: url("../../Images/ui-button-default.png");
558 }
559
560 .formwizard-left-elements-basic-textarea {
561   background-image: url("../../Images/ui-scroll-pane-text.png");
562 }
563
564 .formwizard-left-elements-basic-textline {
565   background-image: url("../../Images/ui-text-field.png");
566 }
567
568 .formwizard-left-elements-predefined-checkboxgroup {
569   background-image: url("../../Images/ui-check-boxes.png");
570 }
571
572 .formwizard-left-elements-predefined-email {
573   background-image: url("../../Images/mail.png");
574 }
575
576 .formwizard-left-elements-predefined-name {
577   background-image: url("../../Images/user-silhouette.png");
578 }
579
580 .formwizard-left-elements-predefined-radiogroup {
581   background-image: url("../../Images/ui-radio-buttons.png");
582 }
583
584 .formwizard-left-elements-content-header {
585   background-image: url("../../Images/edit-heading.png");
586 }
587
588 .formwizard-left-elements-content-textblock {
589   background-image: url("../../Images/edit-textblock.png");
590 }
591
592 #formwizard-left .x-form-text {
593   height: 17px;
594 }
595
596 #formwizard-left .x-btn-text-icon .x-btn-icon-small-left .x-btn-text {
597   color: black;
598 }
599
600 #formwizard-left .x-small-editor .x-form-text {
601   height: 13px !important;
602 }
603
604 /* icon in element field for applying entered text */
605 #formwizard-left .x-form-field-wrap .x-form-submit-trigger {
606   background-image: url("../../Images/submit-trigger.gif");
607 }
608
609 /* right panel */
610 #formwizard-right {
611   min-height: 350px;
612   padding: 30px 0 10px 2px;
613   overflow: visible;
614 }
615
616 #fake-form {
617   padding: 10px;
618   background-color: tansparent;
619   border: 1px solid #C0C0C0;
620 }
621
622 #fake-form li {
623   overflow: visible;
624 }
625
626 /* visible area of element on right panel */
627 #fake-form div.overflow-hidden {
628   overflow: hidden;
629
630   input{
631     margin-left: 1px;
632   }
633 }
634
635 /* wrap around all elements on right panel */
636 #fake-form .formwizard-element {
637   border: 1px solid transparent;
638   position: relative;
639 }
640
641 #fake-form .formwizard-element.hover,
642 #fake-form .formwizard-element.hidden.hover {
643   background-color: #F9FCFF;
644   border: 1px solid #C5DBE6;
645 }
646
647 #fake-form .formwizard-element.active,
648 #fake-form .formwizard-element.hidden.active {
649   background-color: #EAF7FF;
650   border: 1px solid #C5DBE6;
651 }
652
653 #fake-form .formwizard-element.hidden {
654   min-height: 1em;
655   background-color: transparent;
656   border: 1px dotted #C5DBE6;
657 }
658
659 /* toolbar on each element */
660 #fake-form .formwizard-element div.buttongroup {
661   position: absolute;
662   right: 0;
663   top: -35px;
664   display: none;
665   z-index: 1;
666   padding: 4px 3px 12px;
667   background-image: url("../../Images/tooltip.png");
668 }
669
670 #fake-form .formwizard-element.hover > div.buttongroup,
671 #fake-form .formwizard-element.active > div.buttongroup {
672   display: block;
673 }
674
675 #fake-form .formwizard-element div.buttongroup button {
676   width: 16px;
677   height: 16px;
678   background-color: transparent;
679   border: 0 solid transparent;
680 }
681
682 #fake-form .formwizard-element div.buttongroup span {
683   margin: 0 3px;
684 }
685
686 #fake-form .formwizard-element div.buttongroup span.x-btn-over {
687   background-color: transparent;
688   background-image: none;
689 }
690
691 #fake-form .formwizard-element button.t3-icon-edit-delete {
692   background-image: url('../../../../../core/Resources/Public/Icons/T3Icons/actions/actions-delete.svg');
693 }
694
695 #fake-form .formwizard-element button.t3-icon-document-open {
696   background-image: url('../../../../../core/Resources/Public/Icons/T3Icons/actions/actions-open.svg');
697 }
698
699 @media only screen and (max-width:615px) {
700   .tab-content fieldset.form-section ol#formwizard-right{
701     left:0 !important;
702   }
703 }