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