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