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 }