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