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