[TASK] EXT:form - improve width of form editor stage
[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 2.5em;
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.6em;
404 }
405 }
406
407 //
408 // Inspector Property Grid
409 //
410 .property-grid {
411 .form-control {
412 min-width: initial;
413 min-width: auto;
414 font-size: 0.9em;
415 }
416
417 .table {
418 th {
419 font-size: 0.9em;
420 }
421
422 > tbody > tr {
423 cursor: pointer;
424 background-color: $table-bg;
425
426 &:last-child {
427 cursor: auto;
428 }
429
430 > td {
431 padding: 0.6em 0.3em;
432 text-align: center;
433
434 &:first-child {
435 width: 35px;
436 }
437
438 &:nth-child(2),
439 &:nth-child(3) {
440 width: 75px;
441 }
442
443 &:nth-child(4) {
444 width: 65px;
445 }
446
447 &:nth-child(5) {
448 width: 35px;
449 }
450 }
451 }
452
453 .btn {
454 background-color: $btn-default-bg;
455 border-color: $btn-default-border;
456 }
457 }
458
459 .sort-row-field {
460 cursor: move;
461 }
462
463 .ui-sortable-helper {
464 td {
465 border: none;
466 }
467 }
468
469 .ui-sortable-placeholder {
470 height: 45px;
471 border-left: 1px solid $module-docheader-border !important;
472 border-right: 1px solid $module-docheader-border !important;
473 outline-offset: -5px !important;
474 }
475 }
476
477 //
478 // Stage
479 //
480 #t3-form-stage-inner-container {
481 position: relative;
482 left: -5px;
483 display: inline-block;
484 width: 90%;
485 max-width: $stage-max-width;
486 text-align: left;
487 }
488
489 #t3-form-stage-container {
490 overflow: auto;
491 position: relative;
492 height: 100%;
493 text-align: center;
494
495 ol,
496 ul {
497 list-style: none;
498 }
499
500 .form-section {
501 border: none;
502 }
503
504 .panel-heading {
505 button {
506 outline: none;
507 }
508
509 .paginiation-label {
510 margin-right: 1em;
511 }
512 }
513
514 .t3-form-new-element-container {
515 height: $stage-abstract-element-height;
516 border: 1px dashed $panel-default-heading-bg;
517 text-align: center;
518 padding-top: $stage-abstract-element-height / 2;
519
520 .btn {
521 transform: translateY(-50%);
522 }
523 }
524
525 // Abstract
526 &.t3-form-stage-viewmode-abstract {
527 ol,
528 ul {
529 padding-left: $stage-icon-container-width;
530 padding-right: 1em;
531 }
532
533 .t3-form-page-title {
534 margin: 0 0 0.5em;
535 }
536
537 #t3-form-stage-inner-container {
538 overflow: hidden;
539 }
540
541 .t3-form-element-composit {
542 &:not(.t3-form-element-toplevel) {
543 margin-bottom: 1em;
544 padding-bottom: 1px;
545 outline: 1px solid #ddd;
546 outline-offset: -1px;
547 }
548
549 .sortable-hover {
550 outline-color: darken($panel-default-heading-bg, 40%);
551 }
552
553 .t3-form-form-composit-element-selected {
554 outline-color: $brand-primary;
555 }
556 }
557
558 .t3-form-element-composit.sortable-hover > .ui-sortable-handle,
559 .ui-sortable-handle:hover {
560 border-color: darken($panel-default-heading-bg, 40%);
561
562 .t3-form-icon-container {
563 background-color: darken($panel-default-heading-bg, 40%);
564
565 path {
566 fill: #fff;
567 }
568 }
569 }
570
571 .ui-sortable {
572 fieldset {
573 position: relative;
574 min-height: 130px;
575 padding-top: 5em;
576
577 legend {
578 position: absolute;
579 top: 1em;
580 display: inline-block;
581 width: 95%;
582 }
583 }
584 }
585
586 .ui-sortable-handle {
587 overflow: hidden;
588 position: relative;
589 height: $stage-abstract-element-height;
590 margin-bottom: 1em;
591 border: 1px solid $panel-default-heading-bg;
592 background-color: #fff;
593
594 &:hover {
595 .t3-form-validator-list {
596 right: 0;
597 transition: right $stage-validation-transition-time-in;
598 }
599
600 .t3-form-element-info .element-content {
601 span,
602 div {
603 color: $gray-dark;
604 }
605 }
606
607 .t3-form-validator-info .t3-form-icon {
608 margin-right: ($stage-validation-list-width - 25);
609 transition: margin $stage-validation-transition-time-in;
610 }
611 }
612
613 span {
614 color: $gray-dark;
615 }
616 }
617
618 .ui-state-disabled {
619 cursor: auto;
620
621 &:hover {
622 background: none;
623 }
624 }
625
626 .ui-sortable-placeholder {
627 margin-bottom: 1em;
628 }
629
630 .t3-form-icon-container {
631 float: left;
632 width: $stage-icon-container-width;
633 height: 100%;
634 padding: 1em;
635 cursor: move;
636 background-color: $panel-default-heading-bg;
637
638 .t3-form-icon {
639 height: 100%;
640 }
641 }
642
643 .t3-form-form-element-body {
644 height: 100%;
645 }
646
647 .t3-form-element-info {
648 position: relative;
649 float: left;
650 width: 55%;
651 height: 100%;
652 padding-left: 1em;
653
654 @include fade-out-gradient-effect-bottom(#fff, 0.8em, 1em);
655
656 .element-label-container {
657 float: left;
658 position: relative;
659 width: 45%;
660 height: 100%;
661
662 .element-label {
663 overflow: hidden;
664 position: absolute;
665 top: 50%;
666 width: 100%;
667 text-overflow: ellipsis;
668 transform: translateY(-50%);
669 }
670 }
671
672 .element-content {
673 padding-top: 1em;
674 white-space: nowrap;
675 font-size: 0.8em;
676
677 span,
678 div {
679 color: $panel-default-heading-bg;
680 }
681 }
682 }
683
684 .t3-form-validator-info {
685 position: relative;
686 overflow: hidden;
687 float: right;
688 height: 100%;
689
690 .t3-form-icon {
691 height: 100%;
692 z-index: 1;
693 margin-left: 1em;
694 transition: margin $stage-validation-transition-time-out;
695 filter: grayscale(100%);
696 }
697
698 .t3-form-validator-list {
699 @include fade-out-gradient-effect-bottom($panel-default-heading-bg, 1em, 1em);
700
701 position: absolute;
702 top: 0;
703 right: -$stage-validation-list-width;
704 width: $stage-validation-list-width;
705 height: 100%;
706 padding: 1em 1em 1em ($stage-validation-list-width - 65);
707 font-size: 0.8em;
708 transition: right $stage-validation-transition-time-out;
709 background-color: $panel-default-heading-bg;
710 }
711
712 .validator-label {
713 overflow: hidden;
714 text-overflow: ellipsis;
715 white-space: nowrap;
716 color: $gray-dark;
717 }
718 }
719
720 #t3-form-stage .t3-form-form-element-selected {
721 position: relative;
722 padding-top: $stage-abstract-element-toolbar-height;
723 height: $stage-abstract-element-height + $stage-abstract-element-toolbar-height;
724 border: none;
725
726 .t3-form-form-element-body {
727 border: 1px solid $brand-primary;
728 }
729
730 .t3-form-icon-container {
731 background-color: $brand-primary;
732 }
733
734 .t3-form-element-info .element-content {
735 span,
736 div {
737 color: $gray-dark;
738 }
739 }
740
741 .t3-form-validator-list {
742 $validation-list-background: lighten($brand-info, 30%);
743
744 right: 0;
745 transition: right $stage-validation-transition-time-in;
746 background-color: $validation-list-background;
747
748 &:before {
749 background-color: $validation-list-background;
750 }
751
752 &:after {
753 background: linear-gradient(to bottom, rgba(red($validation-list-background), green($validation-list-background), blue($validation-list-background), 0) 0%, $validation-list-background 100%);
754 }
755 }
756
757 .t3-form-validator-info .t3-form-icon {
758 margin-right: ($stage-validation-list-width - 25);
759 filter: none;
760 }
761
762 .btn-toolbar-container {
763 position: absolute;
764 top: 0;
765 right: 0;
766 width: 100%;
767 height: $stage-abstract-element-toolbar-height;
768 border: 1px solid $brand-primary;
769 background-color: $brand-primary;
770 padding-right: 0.7em;
771 padding-top: 0.4em;
772
773 &:before,
774 &:after {
775 position: absolute;
776 top: 0;
777 display: block;
778 width: 1px;
779 height: 100%;
780 content: ' ';
781 background-color: $brand-primary;
782 }
783
784 &:before {
785 left: -1px;
786 }
787
788 &:after {
789 right: -1px;
790 }
791
792 .dropdown-menu {
793 min-width: initial;
794 padding-left: 0;
795 padding-right: 0;
796 background-color: darken($brand-primary, 10%);
797
798 > li a:hover {
799 background-color: darken($brand-primary, 5%);
800 }
801 }
802
803 .caret {
804 color: $brand-primary;
805 }
806
807 .t3-form-dropdown-buttons {
808 .icon {
809 margin-right: 0.5em;
810 }
811 }
812
813 .btn-toolbar {
814 float: right;
815
816 @include selected-button-style-primary();
817 }
818 }
819
820 .meta-label {
821 display: inline-block;
822 top: 1em;
823 left: 5em;
824 bottom: auto;
825 font-size: 0.9em;
826 color: #fff;
827
828 span {
829 color: #fff;
830 }
831 }
832 }
833
834 .panel.t3-form-form-stage-selected {
835 border-color: $brand-primary;
836
837 > .panel-heading {
838 background-color: $brand-primary;
839 border-color: $brand-primary;
840 color: #fff;
841
842 @include selected-button-style-primary();
843 }
844 }
845 }
846
847 // Preview
848 &.t3-form-stage-viewmode-preview {
849 #t3-form-stage-inner-container {
850 @media (max-width: $stage-breakpoint-max) {
851 width: 600px;
852 }
853 }
854
855 input[type="text"],
856 input[type="date"],
857 input[type="password"],
858 textarea,
859 select {
860 color: #000;
861 background-color: lighten($panel-default-heading-bg, 3%);
862 }
863
864 ::placeholder {
865 color: $gray;
866 font-style: italic;
867 }
868
869 input[type="date"] {
870 display: block;
871 width: 100%;
872 height: 32px;
873 padding: 0.6em;
874 font-size: 12px;
875 line-height: $line-height-base;
876 background-image: none;
877 border: 1px solid $module-docheader-border;
878 border-radius: 2px;
879 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
880 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
881 }
882
883 select[multiple="multiple"] {
884 height: auto;
885 min-height: 32px;
886 }
887
888 textarea {
889 min-height: 100px;
890 }
891
892 .container {
893 width: auto;
894 }
895
896 legend.t3-form-form-element-selected {
897 border-color: $module-docheader-border;
898 }
899
900 .form-navigation {
901 .btn-group {
902 span,
903 button {
904 display: inline-block;
905 margin-right: 1em;
906 }
907 }
908 }
909
910 .preview-table-first-col {
911 width: 30%;
912 }
913
914 .t3-form-element-preview {
915 position: relative;
916 display: inline-block;
917 width: 100%;
918 }
919
920 .t3-form-new-element-container {
921 display: none;
922 }
923
924 .t3-form-element-toplevel > form > .tooltip {
925 top: 100px !important;
926 }
927 }
928
929 #t3-form-stage {
930 margin-bottom: 0;
931 padding-top: 0.5em;
932
933 > ol,
934 > ol > li > ol {
935 padding-left: 0;
936 padding-right: 0;
937 }
938
939 .t3-form-element-toplevel {
940 > .t3-form-form-element-selected {
941 height: auto;
942 padding-top: 0;
943 }
944
945 > .t3-form-form-element-selected .btn-toolbar-container {
946 display: none;
947 }
948 }
949 }
950 }
951
952 .meta-label {
953 z-index: 2;
954 position: absolute;
955 bottom: 1em;
956 left: 5.5em;
957 display: none;
958 color: $brand-primary;
959 line-height: 1.6;
960 font-size: 0.8em;
961
962 .ui-sortable-handle:hover > & {
963 display: inline-block;
964 }
965 }
966
967 .ui-sortable-placeholder,
968 .t3-form-element-composit.ui-sortable-placeholder {
969 z-index: 1;
970 position: relative;
971 background-color: #fff !important;
972 border: none !important;
973 outline: 1px dashed lighten($brand-success, 30%) !important;
974 outline-offset: -2px !important;
975 visibility: visible !important;
976 }
977
978 .ui-sortable-placeholder.mjs-nestedSortable-error {
979 outline: 1px dashed #c83c3c !important;
980 }
981
982 //
983 // Icons
984 //
985 .t3-form-icon {
986 margin-right: 1em;
987 }
988
989 //
990 // Validation Errors
991 //
992 .t3-form-validation-child-has-error {
993 color: $brand-danger;
994 }
995
996 .t3-form-validation-errors {
997 #t3-form-navigation-component &,
998 #t3-form-stage-container & {
999 position: relative;
1000 color: $brand-danger;
1001
1002 &:before {
1003 z-index: 1;
1004 position: absolute;
1005 display: inline-block;
1006 width: 15px;
1007 height: 15px;
1008 font-family: FontAwesome;
1009 vertical-align: middle;
1010 border-radius: 50%;
1011 font-size: 1em;
1012 line-height: 1.4;
1013 text-align: center;
1014 background: none;
1015 }
1016 }
1017
1018 #t3-form-navigation-component & {
1019 &:hover:before,
1020 &.t3-form-form-element-selected:before {
1021 left: 2.4em;
1022 }
1023
1024 &:before {
1025 margin-top: 0.2em;
1026 color: #fff;
1027 font-size: 10px;
1028 font-weight: 800;
1029 content: "\f12a";
1030 background-color: $brand-danger;
1031 }
1032 }
1033
1034 &#t3-form-navigation-component-tree-root:before {
1035 left: -2em !important;
1036 margin-top: 0.1em;
1037 }
1038
1039 #t3-form-stage-container &.ui-sortable-handle {
1040 border-color: $brand-danger;
1041
1042 &:before {
1043 left: 4.5em;
1044 margin-top: 1.9em;
1045 content: "\f071";
1046 }
1047
1048 .element-label {
1049 padding-left: 1.5em;
1050 }
1051 }
1052
1053 #t3-form-inspector-panels .t3-form-collection-element & {
1054 display: inline-block;
1055 color: #fff;
1056 font-size: 0.8em;
1057 font-weight: 700;
1058 background-color: $brand-danger;
1059 margin-top: 0.5em;
1060 padding: 0.1em 0.5em;
1061 border-radius: 2px;
1062 }
1063
1064 #t3-form-inspector-panels &.t3-form-collection-element {
1065 border-color: $brand-danger;
1066
1067 h4 {
1068 border-color: $brand-danger;
1069 background-color: $brand-danger;
1070 color: #fff;
1071
1072 path {
1073 fill: #fff;
1074 }
1075 }
1076
1077 .t3-form-collection-element-remove-button {
1078 background: #fff;
1079 border-color: transparent;
1080
1081 path {
1082 fill: $brand-danger;
1083 }
1084
1085 &:hover {
1086 background: lighten($brand-danger, 30%);
1087 }
1088 }
1089 }
1090 }
1091
1092 //
1093 // Loading Editor Spinner
1094 //
1095 .form-editor-loading-spinner {
1096 width: 150px;
1097 margin: 5em auto 0;
1098 text-align: center;
1099 }
1100
1101 //
1102 // jQuery nestedSortable
1103 //
1104 .ui-sortable-handle {
1105 cursor: pointer;
1106 }
1107
1108 //
1109 // Module
1110 //
1111 .module[data-module-name="web_FormFormbuilder_FormEditor"] {
1112 overflow: hidden;
1113
1114 .module-body,
1115 div[data-identifier="moduleWrapper"] {
1116 height: 100%;
1117 }
1118
1119 .module-body {
1120 padding-bottom: 0.5em;
1121 }
1122
1123 .module-docheader-bar-column-left {
1124 button {
1125 &,
1126 &:focus,
1127 &:active {
1128 outline: 0;
1129 outline-color: initial;
1130 outline-style: initial;
1131 outline-width: 0;
1132 }
1133 }
1134
1135 .btn-group,
1136 .t3-form-element-form-settings-button {
1137 margin-left: 25px;
1138 }
1139 }
1140 }
1141
1142 .t3-form-element-new-page-button {
1143 position: absolute;
1144 left: 0.5em;
1145 }