[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 }