[CLEANUP] Remove invalid :has CSS definition
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / form.less
1 @charset "UTF-8";
2
3 //
4 // Variables
5 //
6 // @toDo remove these variables after including this file in backend.less
7 // Bootstrap: variables.less
8 @panel-default-text: @gray-dark;
9
10 // /Build/Resources/Public/Less/cropper/variables.less
11 @screen-lg: 1200px; // Large screen / wide desktop
12
13 // /Build/Resources/Public/Less/_variables.less
14 @gray-dark: rgb(90, 90, 90);
15 @gray: rgb(115, 115, 115);
16 @brand-primary: #0078e6;
17 @brand-success: #79a548;
18 @brand-info: #6daae0;
19 @brand-warning: #e8a33d;
20 @brand-danger: #c83c3c;
21 @table-bg: #fafafa;
22 @table-bg-hover: darken(@table-bg, 5%);
23 @panel-default-heading-bg: #ddd;
24 @text-color: #000;
25 @btn-default-bg: #eee;
26 @btn-default-border: #bbb;
27 @line-height-base: 1.5;
28
29 // /Build/Resources/Public/Less/Component/module.less
30 @module-docheader-height: 65px;
31 @module-docheader-border: #c3c3c3;
32
33 // /Build/Resources/Public/Less/TYPO3/_module_web_page.less
34 @page-ce-header-hover-bg: #d0d0d0;
35
36 // /Build/Resources/Public/Less/TYPO3/_element_tree.less
37 @navigation-bg: #f5f5f5;
38
39 // Form Variables
40 @stage-max-width: 600px;
41 @stage-abstract-element-height: 62px;
42 @stage-abstract-element-toolbar-height: 35px;
43 @stage-icon-container-width: 40px;
44 @stage-validation-list-width: 100px;
45 @stage-breakpoint: (@screen-lg + 100);
46 @stage-validation-transition-time-in: 0.2s;
47 @stage-validation-transition-time-out: 0.3s;
48
49 @stage-background-color: #fafafa;
50 @stage-element-toolbar-background: #d0d0d0;
51 @collection-element-background: @page-ce-header-hover-bg;
52
53 //
54 // Mixins
55 //
56
57 .fade-out-gradient-effect-bottom (@color, @gradient-start-height, @gradient-height) {
58 &:before, &:after {
59 z-index: 1;
60 display: block;
61 content: '';
62 position: absolute;
63 bottom: 0;
64 right: 0;
65 left: 0;
66 }
67 &:before {
68 height: @gradient-start-height;
69 background: @color;
70 }
71 &:after {
72 bottom: @gradient-start-height;
73 height: @gradient-height;
74 background: linear-gradient(to bottom, rgba(red(@color), green(@color), blue(@color), 0) 0%, @color 100%);
75 }
76 }
77
78 .selected-button-style-primary () {
79 .btn {
80 background-color: #fff;
81 border-color: #fff;
82 &:hover, &.active {
83 background-color: lighten(@brand-info, 30%);
84 }
85 }
86 .icon {
87 svg path {
88 fill: @brand-primary;
89 }
90 }
91 }
92
93 .collapsed-icon-animation () {
94 transform: rotate(0deg);
95 transition: transform 0.2s;
96 }
97
98 .expanded-icon-animation () {
99 transform: rotate(90deg);
100 transition: transform 0.2s;
101 }
102
103 //
104 // X-Component
105 //
106 .t3-form-x-component {
107 position: absolute;
108 top: 0;
109 height: 100%;
110 line-height: normal;
111 background: @navigation-bg;
112
113 a {
114 text-decoration: none;
115 }
116 ol,
117 ul:not(.dropdown-menu) {
118 list-style: none;
119 padding: 0;
120 }
121 .ui-sortable-placeholder {
122 outline-offset: -1px !important;
123 }
124 }
125
126 .t3-form-x-component-inner-wrapper {
127 padding: 1.5em;
128 }
129
130 //
131 // Structure Tree
132 //
133 #t3-form-navigation-component {
134 overflow: hidden;
135 left: 0;
136 }
137
138 #t3-form-structure-panel {
139 overflow: auto;
140 padding-top: @module-docheader-height;
141 height: 100%;
142
143 .icon {
144 z-index: 1;
145 }
146 #t3-form-navigation-component-tree-root-container, .tree li > div {
147 border: 1px solid transparent;
148 cursor: pointer;
149 }
150 .tree {
151 .svg-wrapper {
152 svg {
153 overflow: visible;
154 position: relative;
155 top: -0.8em;
156 left: 0.6em;
157 }
158 path {
159 fill: none;
160 shape-rendering: crispEdges;
161 stroke: rgb(221, 221, 221);
162 stroke-width: 1;
163 }
164 }
165 li {
166 white-space: nowrap;
167 .icon-actions-pagetree-collapse {
168 margin-right: 0.3em;
169 img {
170 .expanded-icon-animation ();
171 }
172 }
173 &.mjs-nestedSortable-collapsed {
174 > ol {
175 display: none;
176 }
177 .icon-actions-pagetree-collapse img {
178 .collapsed-icon-animation ();
179 }
180 }
181 small {
182 padding-left: 0.5em;
183 font-size: 80%;
184 }
185 }
186 .t3-form-icon {
187 margin-right: 0.5em;
188 margin-left: 0.5em;
189 }
190 .t3-form-element-has-children > div .t3-form-icon {
191 margin-left: 0.1em;
192 }
193 .sortable-hover {
194 outline: 1px solid darken(@panel-default-heading-bg, 20%);
195 }
196 }
197 .tree li > div:hover,
198 .t3-form-form-element-selected,
199 #t3-form-navigation-component-tree-root-container:hover,
200 .t3-form-root-element-selected {
201 background-color: darken(@navigation-bg, 1%);
202 border-color: darken(@navigation-bg, 10%);
203 border-radius: 2px;
204 margin-left: -2em;
205 padding-left: 2em;
206 margin-right: -1.3em;
207 }
208 .tree li > .t3-form-form-element-selected,
209 .tree li > .t3-form-form-element-selected:hover,
210 #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected,
211 #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected:hover {
212 background-color: #fff;
213 border-color: darken(@navigation-bg, 10%);
214 }
215 .t3-form-x-component-inner-wrapper {
216 padding-top: 2.5em;
217 }
218 }
219
220 //
221 // Inspector
222 //
223 .form-group.t3-form-collection-element-remove-button,
224 .t3-form-inspector-finishers-editor-removeButton,
225 .form-group.t3-form-inspector-validators-editor-removeButton {
226 margin: 0 !important;
227 font-size: 0;
228 }
229
230 #t3-form-inspector-panels-container {
231 overflow: hidden;
232 right: 0;
233 padding-top: @module-docheader-height;
234 }
235
236 #t3-form-inspector-panels {
237 overflow: auto;
238 height: 100%;
239 }
240
241 #t3-form-inspector {
242 padding: 1em 0.5em;
243
244 h2,
245 h3,
246 h4 {
247 margin: 0;
248 padding: 0.1em 0.2em 0.2em 0.5em;
249 border-top: 1px solid @module-docheader-border;
250 clear: both;
251 font: inherit;
252 font-weight: bold;
253 }
254 h2 {
255 padding-bottom: 1em;
256 border: none;
257 border-bottom: 1px solid @module-docheader-border;
258 }
259 > h2:first-child {
260 border-top: none;
261 }
262 h3 {
263 color: @text-color;
264 padding-top: 0.3em;
265 border: none;
266 }
267 h4 {
268 padding: 0.8em 3em 0.8em 2.5em;
269 font-weight: 500;
270 background-color: @panel-default-heading-bg;
271 span[data-template-property="label"] {
272 vertical-align: top;
273 }
274 }
275 .icon-size-small {
276 line-height: @line-height-base;
277 }
278 .input-group-btn {
279 position: static;
280 }
281 .t3-form-remove-element-button {
282 position: absolute;
283 top: 90px;
284 right: 2.5em;
285 }
286 .t3-form-control-group,
287 .t3-form-add-collection-element {
288 margin: 1.5em 0.5em;
289 clear: both;
290 }
291 .t3-form-inspector-editor-requiredValidator {
292 label {
293 cursor: pointer;
294 }
295 }
296 .t3-form-dropdown-buttons.open {
297 position: static;
298 .dropdown-menu {
299 width: 100%;
300 a {
301 overflow: hidden;
302 text-overflow: ellipsis;
303 }
304 }
305 }
306 }
307
308 //
309 // Inspector Collection
310 //
311 .t3-form-add-collection-element {
312 padding-bottom: 1em;
313 }
314
315 .t3-form-collection-container {
316 margin-top: -1em;
317 padding: 0.6em;
318
319 .ui-sortable-handle {
320 cursor: auto;
321 }
322 h4 {
323 cursor: move;
324 }
325 .icon-actions-view-table-expand {
326 position: absolute;
327 left: 0.5em;
328 }
329 a.collapsed {
330 .icon-actions-view-table-expand svg {
331 .collapsed-icon-animation ();
332 }
333 }
334 a:not(.collapsed) {
335 .icon-actions-view-table-expand svg {
336 .expanded-icon-animation ();
337 }
338 }
339 }
340
341 .t3-form-collection-element {
342 position: relative;
343 margin-bottom: 0.5em;
344 border: 1px solid @module-docheader-border;
345 border-top: none;
346 background: @navigation-bg;
347
348 .t3-form-collection-element-remove-button {
349 position: absolute;
350 right: 0.5em;
351 top: 0.6em;
352 }
353 }
354
355 //
356 // Inspector Property Grid
357 //
358 .property-grid {
359 .form-control {
360 min-width: initial;
361 min-width: auto;
362 font-size: 0.9em;
363 }
364 .table {
365 th {
366 font-size: 0.9em;
367 }
368 > tbody > tr {
369 cursor: pointer;
370 background-color: @table-bg;
371 &:last-child {
372 cursor: auto;
373 }
374 > td {
375 padding: 0.6em 0.3em;
376 text-align: center;
377 &:first-child {
378 width: 35px;
379 }
380 &:nth-child(2), &:nth-child(3) {
381 width: 75px;
382 }
383 &:nth-child(4) {
384 width: 65px;
385 }
386 &:nth-child(5) {
387 width: 35px;
388 }
389 }
390 }
391 .btn {
392 background-color: @btn-default-bg;
393 border-color: @btn-default-border;
394 }
395 }
396 .sort-row-field {
397 cursor: move;
398 }
399 .ui-sortable-helper {
400 td {
401 border: none;
402 }
403 }
404 .ui-sortable-placeholder {
405 height: 45px;
406 border-left: 1px solid @module-docheader-border !important;
407 border-right: 1px solid @module-docheader-border !important;
408 outline-offset: -5px !important;
409 }
410 }
411
412 //
413 // Stage
414 //
415 #t3-form-stage-inner-container {
416 display: inline-block;
417 width: 90%;
418 text-align: left;
419 @media (min-width: @stage-breakpoint) {
420 width: @stage-max-width;
421 }
422 }
423
424 #t3-form-stage-container {
425 overflow: auto;
426 position: relative;
427 height: 100%;
428 text-align: left;
429 @media (min-width: @stage-breakpoint) {
430 text-align: center;
431 }
432
433 ol,
434 ul {
435 list-style: none;
436 }
437 .form-section {
438 border: none;
439 }
440 .panel-heading {
441 button {
442 outline: none;
443 }
444 .paginiation-label {
445 margin-right: 1em;
446 }
447 }
448 .t3-form-new-element-container {
449 height: @stage-abstract-element-height;
450 border: 1px dashed @panel-default-heading-bg;
451 text-align: center;
452 padding-top: @stage-abstract-element-height/2;
453 .btn {
454 transform: translateY(-50%);
455 }
456 }
457
458 // Abstract
459 &.t3-form-stage-viewmode-abstract {
460 ol,
461 ul {
462 padding-left: @stage-icon-container-width;
463 padding-right: 1em;
464 }
465 .t3-form-page-title {
466 margin: 0 0 0.5em;
467 }
468 #t3-form-stage-inner-container {
469 overflow: hidden;
470 }
471 .t3-form-element-composit {
472 &:not(.t3-form-element-toplevel) {
473 margin-bottom: 1em;
474 padding-bottom: 1px;
475 outline: 1px solid #dddddd;
476 outline-offset: -1px;
477 }
478 .sortable-hover {
479 outline-color: darken(@panel-default-heading-bg, 40%);
480 }
481 .t3-form-form-composit-element-selected {
482 outline-color: @brand-primary;
483 }
484 }
485 .t3-form-element-composit.sortable-hover > .ui-sortable-handle,
486 .ui-sortable-handle:hover {
487 border-color: darken(@panel-default-heading-bg, 40%);
488 .t3-form-icon-container {
489 background-color: darken(@panel-default-heading-bg, 40%);
490 path {
491 fill: #fff;
492 }
493 }
494 }
495 .ui-sortable {
496 fieldset {
497 position: relative;
498 min-height: 130px;
499 padding-top: 5em;
500 legend {
501 position: absolute;
502 top: 1em;
503 display: inline-block;
504 width: 95%;
505 }
506 }
507 }
508 .ui-sortable-handle {
509 overflow: hidden;
510 position: relative;
511 height: @stage-abstract-element-height;
512 margin-bottom: 1em;
513 border: 1px solid @panel-default-heading-bg;
514 background-color: #fff;
515
516 &:hover {
517 .t3-form-validator-list {
518 right: 0;
519 transition: right @stage-validation-transition-time-in;
520 }
521 .t3-form-element-info .element-content {
522 span, div {
523 color: @gray-dark;
524 }
525 }
526 .t3-form-validator-info .t3-form-icon {
527 margin-right: (@stage-validation-list-width - 25);
528 transition: margin @stage-validation-transition-time-in;
529 }
530 }
531 span {
532 color: @gray-dark;
533 }
534 }
535 .ui-state-disabled {
536 cursor: auto;
537 &:hover {
538 background: none;
539 }
540 }
541 .ui-sortable-placeholder {
542 margin-bottom: 1em;
543 }
544 .t3-form-icon-container {
545 float: left;
546 width: @stage-icon-container-width;
547 height: 100%;
548 padding: 1em;
549 cursor: move;
550 background-color: @panel-default-heading-bg;
551 .t3-form-icon {
552 height: 100%;
553 }
554 }
555 .t3-form-form-element-body {
556 height: 100%;
557 }
558 .t3-form-element-info {
559 position: relative;
560 float: left;
561 width: 55%;
562 height: 100%;
563 padding-left: 1em;
564 .fade-out-gradient-effect-bottom (#fff, 0.8em, 1em);
565 .element-label-container {
566 float: left;
567 position: relative;
568 width: 45%;
569 height: 100%;
570 .element-label {
571 overflow: hidden;
572 position: absolute;
573 top: 50%;
574 width: 100%;
575 text-overflow: ellipsis;
576 transform: translateY(-50%);
577 }
578 }
579 .element-content {
580 padding-top: 1em;
581 white-space: nowrap;
582 font-size: 0.8em;
583 span, div {
584 color: @panel-default-heading-bg;
585 }
586 }
587 }
588 .t3-form-validator-info {
589 position: relative;
590 overflow: hidden;
591 float: right;
592 height: 100%;
593 .t3-form-icon {
594 height: 100%;
595 z-index: 1;
596 margin-left: 1em;
597 transition: margin @stage-validation-transition-time-out;
598 filter: grayscale(100%);
599 }
600 .t3-form-validator-list {
601 .fade-out-gradient-effect-bottom(@panel-default-heading-bg, 1em, 1em);
602 position: absolute;
603 top: 0;
604 right: -@stage-validation-list-width;
605 width: @stage-validation-list-width;
606 height: 100%;
607 padding: 1em 1em 1em (@stage-validation-list-width - 65);
608 font-size: 0.8em;
609 transition: right @stage-validation-transition-time-out;
610 background-color: @panel-default-heading-bg;
611 }
612 .validator-label {
613 overflow: hidden;
614 text-overflow: ellipsis;
615 white-space: nowrap;
616 color: @gray-dark;
617 }
618 }
619 #t3-form-stage .t3-form-form-element-selected {
620 position: relative;
621 padding-top: @stage-abstract-element-toolbar-height;
622 height: @stage-abstract-element-height + @stage-abstract-element-toolbar-height;
623 border: none;
624
625 .t3-form-form-element-body {
626 border: 1px solid @brand-primary;
627 }
628 .t3-form-icon-container {
629 background-color: @brand-primary;
630 }
631 .t3-form-element-info .element-content {
632 span, div {
633 color: @gray-dark;
634 }
635 }
636 .t3-form-validator-list {
637 @validation-list-background: lighten(@brand-info, 30%);
638 right: 0;
639 transition: right @stage-validation-transition-time-in;
640 background-color: @validation-list-background;
641 &:before {
642 background-color: @validation-list-background;
643 }
644 &:after {
645 background: linear-gradient(to bottom, rgba(red(@validation-list-background), green(@validation-list-background), blue(@validation-list-background), 0) 0%, @validation-list-background 100%);
646 }
647 }
648 .t3-form-validator-info .t3-form-icon {
649 margin-right: (@stage-validation-list-width - 25);
650 filter: none;
651 }
652 .btn-toolbar-container {
653 position: absolute;
654 top: 0;
655 right: 0;
656 width: 100%;
657 height: @stage-abstract-element-toolbar-height;
658 border: 1px solid @brand-primary;
659 background-color: @brand-primary;
660 padding-right: 0.7em;
661 padding-top: 0.4em;
662 &:before, &:after {
663 position: absolute;
664 top: 0;
665 display: block;
666 width: 1px;
667 height: 100%;
668 content: ' ';
669 background-color: @brand-primary;
670 }
671 &:before {
672 left: -1px;
673 }
674 &:after {
675 right: -1px;
676 }
677 .dropdown-menu {
678 min-width: initial;
679 padding-left: 0;
680 padding-right: 0;
681 background-color: darken(@brand-primary, 10%);
682 > li a:hover {
683 background-color: darken(@brand-primary, 5%);
684 }
685 }
686 .caret {
687 color: @brand-primary;
688 }
689 .t3-form-dropdown-buttons {
690 .icon {
691 margin-right: 0.5em;
692 }
693 }
694 .btn-toolbar {
695 float: right;
696 .selected-button-style-primary;
697 }
698 }
699 .meta-label {
700 display: inline-block;
701 top: 1em;
702 left: 5em;
703 bottom: auto;
704 font-size: 0.9em;
705 color: #fff;
706 span {
707 color: #fff;
708 }
709 }
710 }
711 .panel.t3-form-form-stage-selected {
712 border-color: @brand-primary;
713 > .panel-heading {
714 background-color: @brand-primary;
715 border-color: @brand-primary;
716 color: #fff;
717 .selected-button-style-primary;
718 }
719 }
720 }
721
722 // Preview
723 &.t3-form-stage-viewmode-preview {
724 input[type="text"], input[type="date"], input[type="password"], textarea, select {
725 color: #000;
726 background-color: lighten(@panel-default-heading-bg, 3%);
727 }
728 ::placeholder {
729 color: @gray;
730 font-style: italic;
731 }
732 input[type="date"] {
733 display: block;
734 width: 100%;
735 height: 32px;
736 padding: 0.6em;
737 font-size: 12px;
738 line-height: @line-height-base;
739 background-image: none;
740 border: 1px solid @module-docheader-border;
741 border-radius: 2px;
742 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
743 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
744 }
745 select[multiple="multiple"] {
746 height: auto;
747 min-height: 32px;
748 }
749 textarea {
750 min-height: 100px;
751 }
752 legend.t3-form-form-element-selected {
753 border-color: @module-docheader-border;
754 }
755 .form-navigation {
756 .btn-group {
757 span, button {
758 display: inline-block;
759 margin-right: 1em;
760 }
761 }
762 }
763 .preview-table-first-col {
764 width: 30%;
765 }
766 .t3-form-element-preview {
767 position: relative;
768 display: inline-block;
769 width: 100%;
770 }
771 .t3-form-new-element-container {
772 display: none;
773 }
774 .t3-form-element-toplevel > form > .tooltip {
775 top: 100px !important;
776 }
777 }
778
779 #t3-form-stage {
780 margin-bottom: 0;
781 padding-top: 0.5em;
782 > ol, > ol > li > ol {
783 padding-left: 0;
784 padding-right: 0;
785 }
786 .t3-form-element-toplevel {
787 > .t3-form-form-element-selected {
788 height: auto;
789 padding-top: 0;
790 }
791 > .t3-form-form-element-selected .btn-toolbar-container {
792 display: none;
793 }
794 }
795 }
796 }
797
798 .meta-label {
799 z-index: 2;
800 position: absolute;
801 bottom: 1em;
802 left: 5.5em;
803 display: none;
804 color: @brand-primary;
805 line-height: 1.6;
806 font-size: 0.8em;
807 .ui-sortable-handle:hover > & {
808 display: inline-block;
809 }
810 }
811
812 .ui-sortable-placeholder,
813 .t3-form-element-composit.ui-sortable-placeholder {
814 background-color: #fff !important;
815 border: none !important;
816 outline: 1px dashed lighten(@brand-success, 30%) !important;
817 outline-offset: -2px !important;
818 visibility: visible !important;
819 }
820
821 //
822 // Icons
823 //
824 .t3-form-icon {
825 margin-right: 1em;
826 }
827
828 //
829 // Validation Errors
830 //
831 .t3-form-validation-child-has-error {
832 color: @brand-danger;
833 }
834
835 .t3-form-validation-errors {
836 #t3-form-navigation-component &,
837 #t3-form-stage-container & {
838 position: relative;
839 color: @brand-danger;
840 &:before {
841 z-index: 1;
842 position: absolute;
843 display: inline-block;
844 width: 15px;
845 height: 15px;
846 font-family: FontAwesome;
847 vertical-align: middle;
848 border-radius: 50%;
849 font-size: 1em;
850 line-height: 1.4;
851 text-align: center;
852 background: none;
853 }
854 }
855 #t3-form-navigation-component & {
856 &:hover:before,
857 &.t3-form-form-element-selected:before {
858 left: 2.4em;
859 }
860 &:before {
861 margin-top: 0.2em;
862 color: #fff;
863 font-size: 10px;
864 font-weight: 800;
865 content: "\f12a";
866 background-color: @brand-danger;
867 }
868 }
869 &#t3-form-navigation-component-tree-root:before {
870 left: -2em !important;
871 margin-top: 0.1em;
872 }
873 #t3-form-stage-container &.ui-sortable-handle {
874 border-color: @brand-danger;
875 &:before {
876 left: 4.5em;
877 margin-top: 1.9em;
878 content: "\f071";
879 }
880 .element-label {
881 padding-left: 1.5em;
882 }
883 }
884 #t3-form-inspector-panels .t3-form-collection-element & {
885 display: inline-block;
886 color: #fff;
887 font-size: 0.8em;
888 font-weight: 700;
889 background-color: @brand-danger;
890 margin-top: 0.5em;
891 padding: 0.1em 0.5em;
892 border-radius: 2px;
893 }
894 #t3-form-inspector-panels &.t3-form-collection-element {
895 border-color: @brand-danger;
896
897 h4 {
898 border-color: @brand-danger;
899 background-color: @brand-danger;
900 color: #fff;
901 path {
902 fill: #fff;
903 }
904 }
905 .t3-form-collection-element-remove-button {
906 background: #fff;
907 border-color: transparent;
908 path {
909 fill: @brand-danger;
910 }
911 &:hover {
912 background: lighten(@brand-danger, 30%);
913 }
914 }
915 }
916 }
917
918 //
919 // Loading Editor Spinner
920 //
921 .form-editor-loading-spinner {
922 width: 150px;
923 margin: 5em auto 0;
924 text-align: center;
925 }
926
927 //
928 // jQuery nestedSortable
929 //
930 .ui-sortable-handle {
931 cursor: pointer;
932 }
933
934 //
935 // Module
936 //
937 .module[data-module-name="web_FormFormbuilder_FormEditor"] {
938 overflow: hidden;
939 .module-body, div[data-identifier="moduleWrapper"] {
940 height: 100%;
941 }
942 .module-body {
943 padding-bottom: 0.5em;
944 }
945 .module-docheader-bar-column-left {
946 button {
947 &, &:focus, &:active {
948 outline: 0;
949 outline-color: initial;
950 outline-style: initial;
951 outline-width: 0px;
952 }
953 }
954 .btn-group, .t3-form-element-form-settings-button {
955 margin-left: 25px;
956 }
957 }
958 }
959
960 .t3-form-element-new-page-button {
961 position: absolute;
962 left: 0.5em;
963 }