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