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