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