[BUGFIX] Display the action-icons "Insert inside" and "Insert after" in white
[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 .icon {
65 svg path {
66 fill: $brand-primary;
67 }
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 .icon {
835 svg path {
836 fill: #fff;
837 }
838 }
839 }
840
841 .caret {
842 color: $brand-primary;
843 }
844
845 .t3-form-dropdown-buttons {
846 .icon {
847 margin-right: 0.5em;
848 }
849 }
850
851 .btn-toolbar {
852 float: right;
853
854 @include selected-button-style-primary();
855 }
856 }
857
858 .meta-label {
859 display: inline-block;
860 top: 1em;
861 left: 5em;
862 bottom: auto;
863 font-size: 0.9em;
864 color: #fff;
865
866 span {
867 color: #fff;
868 }
869 }
870 }
871
872 .panel.t3-form-form-stage-selected {
873 border-color: $brand-primary;
874
875 > .panel-heading {
876 background-color: $brand-primary;
877 border-color: $brand-primary;
878 color: #fff;
879
880 @include selected-button-style-primary();
881 }
882 }
883 }
884
885 // Preview
886 &.t3-form-stage-viewmode-preview {
887 #t3-form-stage-inner-container {
888 @media (max-width: $stage-breakpoint-max) {
889 width: 600px;
890 }
891 }
892
893 input[type="text"],
894 input[type="date"],
895 input[type="password"],
896 textarea,
897 select {
898 color: #000;
899 background-color: lighten($panel-default-heading-bg, 3%);
900 }
901
902 ::placeholder {
903 color: $gray;
904 font-style: italic;
905 }
906
907 input[type="date"] {
908 display: block;
909 width: 100%;
910 height: 32px;
911 padding: 0.6em;
912 font-size: 12px;
913 line-height: $line-height-base;
914 background-image: none;
915 border: 1px solid $module-docheader-border;
916 border-radius: 2px;
917 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
918 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
919 }
920
921 select[multiple="multiple"] {
922 height: auto;
923 min-height: 32px;
924 }
925
926 textarea {
927 min-height: 100px;
928 }
929
930 .container {
931 width: auto;
932 }
933
934 legend.t3-form-form-element-selected {
935 border-color: $module-docheader-border;
936 }
937
938 .form-navigation {
939 .btn-group {
940 span,
941 button {
942 display: inline-block;
943 margin-right: 1em;
944 }
945 }
946 }
947
948 .preview-table-first-col {
949 width: 30%;
950 }
951
952 .t3-form-element-preview {
953 position: relative;
954 display: inline-block;
955 width: 100%;
956 }
957
958 .t3-form-new-element-container {
959 display: none;
960 }
961
962 .t3-form-element-toplevel > form > .tooltip {
963 top: 100px !important;
964 }
965 }
966
967 #t3-form-stage {
968 margin-bottom: 0;
969 padding-top: 0.5em;
970
971 > ol,
972 > ol > li > ol {
973 padding-left: 0;
974 padding-right: 0;
975 }
976
977 .t3-form-element-toplevel {
978 > .t3-form-form-element-selected {
979 height: auto;
980 padding-top: 0;
981 }
982
983 > .t3-form-form-element-selected .btn-toolbar-container {
984 display: none;
985 }
986 }
987 }
988 }
989
990 .meta-label {
991 z-index: 2;
992 position: absolute;
993 bottom: 1em;
994 left: 5.5em;
995 display: none;
996 color: $brand-primary;
997 line-height: 1.6;
998 font-size: 0.8em;
999
1000 .ui-sortable-handle:hover > & {
1001 display: inline-block;
1002 }
1003 }
1004
1005 .ui-sortable-placeholder,
1006 .t3-form-element-composit.ui-sortable-placeholder {
1007 z-index: 1;
1008 position: relative;
1009 background-color: #fff !important;
1010 border: none !important;
1011 outline: 1px dashed lighten($brand-success, 30%) !important;
1012 outline-offset: -2px !important;
1013 visibility: visible !important;
1014 }
1015
1016 .ui-sortable-placeholder.mjs-nestedSortable-error {
1017 outline: 1px dashed #c83c3c !important;
1018 }
1019
1020 //
1021 // Icons
1022 //
1023 .t3-form-icon {
1024 margin-right: 1em;
1025 }
1026
1027 //
1028 // Validation Errors
1029 //
1030 .t3-form-validation-child-has-error {
1031 color: $brand-danger;
1032 }
1033
1034 .t3-form-validation-errors {
1035 #t3-form-navigation-component &,
1036 #t3-form-stage-container & {
1037 position: relative;
1038 color: $brand-danger;
1039
1040 &:before {
1041 z-index: 1;
1042 position: absolute;
1043 display: inline-block;
1044 width: 15px;
1045 height: 15px;
1046 font-family: FontAwesome;
1047 vertical-align: middle;
1048 border-radius: 50%;
1049 font-size: 1em;
1050 line-height: 1.4;
1051 text-align: center;
1052 background: none;
1053 }
1054 }
1055
1056 #t3-form-navigation-component & {
1057 &:before {
1058 margin-top: 0.2em;
1059 color: #fff;
1060 font-size: 10px;
1061 font-weight: 800;
1062 content: "\f12a";
1063 background-color: $brand-danger;
1064 }
1065 }
1066
1067 &#t3-form-navigation-component-tree-root:before {
1068 left: -2em !important;
1069 margin-top: 0.1em;
1070 }
1071
1072 #t3-form-stage-container &.ui-sortable-handle {
1073 border-color: $brand-danger;
1074
1075 &:before {
1076 left: 4.5em;
1077 margin-top: 1.9em;
1078 content: "\f071";
1079 }
1080
1081 .element-label {
1082 padding-left: 1.5em;
1083 }
1084 }
1085
1086 #t3-form-inspector-panels .t3-form-collection-element & {
1087 display: inline-block;
1088 color: #fff;
1089 font-size: 0.8em;
1090 font-weight: 700;
1091 background-color: $brand-danger;
1092 margin-top: 0.5em;
1093 padding: 0.1em 0.5em;
1094 border-radius: 2px;
1095 }
1096
1097 #t3-form-inspector-panels &.t3-form-collection-element {
1098 border-color: $brand-danger;
1099
1100 h4 {
1101 border-color: $brand-danger;
1102 background-color: $brand-danger;
1103 color: #fff;
1104
1105 path {
1106 fill: #fff;
1107 }
1108 }
1109
1110 .t3-form-collection-element-remove-button {
1111 background: #fff;
1112 border-color: transparent;
1113
1114 path {
1115 fill: $brand-danger;
1116 }
1117
1118 &:hover {
1119 background: lighten($brand-danger, 30%);
1120 }
1121 }
1122 }
1123 }
1124
1125 #t3-form-inspector-panels {
1126 span.t3-form-validation-errors,
1127 .inspector-editor-hint {
1128 display: inline-block;
1129 color: #fff;
1130 font-size: 0.8em;
1131 font-weight: 700;
1132 margin-top: 0.5em;
1133 padding: 0.1em 0.5em;
1134 border-radius: 2px;
1135 line-height: 1.5em;
1136 }
1137
1138 span.t3-form-validation-errors {
1139 background-color: $brand-danger;
1140 }
1141
1142 .inspector-editor-hint {
1143 background-color: $gray-dark;
1144 }
1145 }
1146
1147 //
1148 // Loading Editor Spinner
1149 //
1150 .form-editor-loading-spinner {
1151 width: 150px;
1152 margin: 5em auto 0;
1153 text-align: center;
1154 }
1155
1156 //
1157 // jQuery nestedSortable
1158 //
1159 .ui-sortable-handle {
1160 cursor: pointer;
1161 }
1162
1163 //
1164 // Module
1165 //
1166 .module[data-module-name="web_FormFormbuilder_FormEditor"] {
1167 overflow: hidden;
1168
1169 .module-body,
1170 div[data-identifier="moduleWrapper"] {
1171 height: 100%;
1172 }
1173
1174 .module-body {
1175 padding-bottom: 0.5em;
1176 }
1177
1178 .module-docheader-bar-column-left {
1179 button {
1180 &,
1181 &:focus,
1182 &:active {
1183 outline: 0;
1184 outline-color: initial;
1185 outline-style: initial;
1186 outline-width: 0;
1187 }
1188 }
1189
1190 .btn-group,
1191 .t3-form-element-form-settings-button {
1192 margin-left: 25px;
1193 }
1194 }
1195 }
1196
1197 .t3-form-element-new-page-button {
1198 position: absolute;
1199 left: 0.5em;
1200 }
1201
1202 .t3-form-controls.has-error {
1203 .help-block {
1204 margin-bottom: initial;
1205 }
1206 }