From 85837c22ffbb9ee48ac9e2714db2bdd2d3580d24 Mon Sep 17 00:00:00 2001
From: Andreas Steiger <typo3@andreassteiger.de>
Date: Thu, 7 Sep 2017 17:15:38 +0200
Subject: [PATCH] [TASK] Improve SCSS of Form Framework
Cleanup SCSS of Form Framework. Improve the usage of variables.
Furthermore, optimize the structure tree spacings of Form Editor.
Resolves: #82327
Releases: master
Change-Id: Ia1088475e16e5a04999140cca5ee3ff7d713e661
Reviewed-on: https://review.typo3.org/53962
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
---
.../Public/Sass/component/_callout.scss | 2 +-
.../Public/Sass/component/_card.scss | 2 +-
.../Public/Sass/component/_module.scss | 36 ++++-----
Build/Resources/Public/Sass/editor.scss | 1 -
Build/Resources/Public/Sass/form.scss | 73 ++++++++-----------
Build/Resources/Public/Sass/install.scss | 1 -
.../Resources/Public/Sass/libs/_gridder.scss | 2 +-
.../Public/Sass/typo3/_element_tree.scss | 2 +-
.../Public/Sass/variables/_main.scss | 25 +++++++
.../sysext/form/Resources/Public/Css/form.css | 2 +-
.../Backend/FormEditor/TreeComponent.js | 4 +-
11 files changed, 81 insertions(+), 69 deletions(-)
diff --git a/Build/Resources/Public/Sass/component/_callout.scss b/Build/Resources/Public/Sass/component/_callout.scss
index 46ac258e9f65..29f2cde0d2a0 100644
--- a/Build/Resources/Public/Sass/component/_callout.scss
+++ b/Build/Resources/Public/Sass/component/_callout.scss
@@ -113,7 +113,7 @@ $callout-notice-border: $state-notice-border;
//
.callout-sm {
margin: 10px 0;
- padding: $callout-padding/2;
+ padding: $callout-padding / 2;
.callout-title {
font-size: 1em;
diff --git a/Build/Resources/Public/Sass/component/_card.scss b/Build/Resources/Public/Sass/component/_card.scss
index 574409d01ae5..572270c1b66b 100644
--- a/Build/Resources/Public/Sass/component/_card.scss
+++ b/Build/Resources/Public/Sass/component/_card.scss
@@ -72,7 +72,7 @@ $card-shadow-hover-color: transparentize($card-base-color, 0.7);
.card-container {
display: flex;
flex-wrap: wrap;
- margin: $card-spacing #{-$card-spacing};
+ margin: $card-spacing #{ - $card-spacing};
.card {
margin-left: $card-spacing;
diff --git a/Build/Resources/Public/Sass/component/_module.scss b/Build/Resources/Public/Sass/component/_module.scss
index 1e6180ba44d4..1cc9e355263c 100644
--- a/Build/Resources/Public/Sass/component/_module.scss
+++ b/Build/Resources/Public/Sass/component/_module.scss
@@ -7,24 +7,24 @@
//
// Variables
//
-$module-bg: #fff;
-$module-color: inherit;
-$module-dark-bg: #333;
-$module-dark-color: #ccc;
-$module-docheader-bg: #eee;
-$module-docheader-border: #c3c3c3;
-$module-docheader-zindex: 300;
-$module-docheader-height: 65px;
-$module-docheader-padding-vertical: 0;
-$module-docheader-padding-horizontal: 24px;
-$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal;
-$module-docheader-bar-height: 26px;
-$module-docheader-bar-margin-vertical: 4px;
-$module-docheader-bar-margin-horizontal: 0;
-$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal;
-$module-body-padding-vertical: 24px;
-$module-body-padding-horizontal: 24px;
-$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal;
+$module-bg: #fff !default;
+$module-color: inherit !default;
+$module-dark-bg: #333 !default;
+$module-dark-color: #ccc !default;
+$module-docheader-bg: #eee !default;
+$module-docheader-border: #c3c3c3 !default;
+$module-docheader-zindex: 300 !default;
+$module-docheader-height: 65px !default;
+$module-docheader-padding-vertical: 0 !default;
+$module-docheader-padding-horizontal: 24px !default;
+$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal !default;
+$module-docheader-bar-height: 26px !default;
+$module-docheader-bar-margin-vertical: 4px !default;
+$module-docheader-bar-margin-horizontal: 0 !default;
+$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal !default;
+$module-body-padding-vertical: 24px !default;
+$module-body-padding-horizontal: 24px !default;
+$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal !default;
//
// Template
diff --git a/Build/Resources/Public/Sass/editor.scss b/Build/Resources/Public/Sass/editor.scss
index 6ba1bb17cf5e..19e9cd25033d 100644
--- a/Build/Resources/Public/Sass/editor.scss
+++ b/Build/Resources/Public/Sass/editor.scss
@@ -3,7 +3,6 @@
// ---------------
// Description: Global styles for t3editor wrapper.
//
-
$panel-bg-color: #f7f7f7;
$panel-border-color: #ddd;
$fullscreen-top: 64px;
diff --git a/Build/Resources/Public/Sass/form.scss b/Build/Resources/Public/Sass/form.scss
index 1c47f7530fd1..724babaefd24 100644
--- a/Build/Resources/Public/Sass/form.scss
+++ b/Build/Resources/Public/Sass/form.scss
@@ -1,54 +1,28 @@
-@charset "utf-8";
+//
+// Form Framework
+// ===========
+// Contains all needed styles of the TYPO3 Form Framework.
+//
//
-// Variables
+// Load global variables
//
+@import "variables/main";
-// /Build/Resources/Public/Sass/variables/_main.scss
-$gray-dark: rgb(90, 90, 90);
-$gray: rgb(115, 115, 115);
-$brand-primary: #0078e6;
-$brand-success: #79a548;
-$brand-info: #6daae0;
-$brand-warning: #e8a33d;
-$brand-danger: #c83c3c;
-$table-bg: #fafafa;
-$table-bg-hover: darken($table-bg, 5%);
-$panel-default-heading-bg: #ddd;
-$text-color: #000;
-$btn-default-bg: #eee;
-$btn-default-border: #bbb;
-$line-height-base: 1.5;
-
-// $toDo remove these variables after including this file in backend.scss
-// Bootstrap: variables.scss
-$panel-default-text: $gray-dark;
-
-// /Build/Resources/Public/Sass/cropper/_variables.scss
-$screen-lg: 1200px; // Large screen / wide desktop
-
-// /Build/Resources/Public/Sass/Component/_module.scss
-$module-docheader-height: 65px;
-$module-docheader-border: #c3c3c3;
-
-// /Build/Resources/Public/Sass/typo3/_module_web_page.scss
-$page-ce-header-hover-bg: #d0d0d0;
-
-// /Build/Resources/Public/Sass/typo3/_element_tree.scss
-$navigation-bg: #f5f5f5;
-
-// Form Variables
+//
+// Variables
+//
$stage-max-width: 600px;
$stage-abstract-element-height: 62px;
$stage-abstract-element-toolbar-height: 35px;
$stage-icon-container-width: 40px;
-$stage-validation-list-width: 100px;
$stage-breakpoint: ($screen-lg + 100);
+$stage-validation-list-width: 100px;
$stage-validation-transition-time-in: 0.2s;
$stage-validation-transition-time-out: 0.3s;
-$stage-background-color: #fafafa;
-$stage-element-toolbar-background: #d0d0d0;
-$collection-element-background: $page-ce-header-hover-bg;
+$navigation-bg: $gray-lighter;
+$tree-indentation: 20px;
+$tree-line-height: 20px;
//
// Mixins
@@ -216,6 +190,21 @@ $collection-element-background: $page-ce-header-hover-bg;
}
}
+ .icon {
+ margin-top: 1px;
+ }
+
+ .tree li > div,
+ #t3-form-navigation-component-tree-root-container {
+ height: $tree-line-height;
+
+ > span {
+ display: inline-block;
+ vertical-align: top;
+ line-height: $tree-line-height;
+ }
+ }
+
.tree li > div:hover,
.t3-form-form-element-selected,
#t3-form-navigation-component-tree-root-container:hover,
@@ -223,8 +212,8 @@ $collection-element-background: $page-ce-header-hover-bg;
background-color: darken($navigation-bg, 1%);
border-color: darken($navigation-bg, 10%);
border-radius: 2px;
- margin-left: -2em;
- padding-left: 2em;
+ margin-left: -$tree-indentation;
+ padding-left: $tree-indentation;
margin-right: -1.3em;
}
diff --git a/Build/Resources/Public/Sass/install.scss b/Build/Resources/Public/Sass/install.scss
index faa465b4d4f0..4f1ddf09fae9 100644
--- a/Build/Resources/Public/Sass/install.scss
+++ b/Build/Resources/Public/Sass/install.scss
@@ -7,7 +7,6 @@
// Load global Variables
//
@import "variables/main";
-
$grid-float-breakpoint: $screen-md-min;
//
diff --git a/Build/Resources/Public/Sass/libs/_gridder.scss b/Build/Resources/Public/Sass/libs/_gridder.scss
index 530dc761420e..fb7a08a2d199 100644
--- a/Build/Resources/Public/Sass/libs/_gridder.scss
+++ b/Build/Resources/Public/Sass/libs/_gridder.scss
@@ -49,7 +49,7 @@ $gridder-badge-size: 20px;
border-top: 0;
bottom: 0;
left: 50%;
- margin-left: -$gridder-spacing/2;
+ margin-left: -$gridder-spacing / 2;
content: '';
}
diff --git a/Build/Resources/Public/Sass/typo3/_element_tree.scss b/Build/Resources/Public/Sass/typo3/_element_tree.scss
index b04efa044cf8..d92d0d5b1b1b 100644
--- a/Build/Resources/Public/Sass/typo3/_element_tree.scss
+++ b/Build/Resources/Public/Sass/typo3/_element_tree.scss
@@ -2,7 +2,7 @@
// Variables
//
$navigation-text: #000;
-$navigation-bg: rgb(245, 245, 245);
+$navigation-bg: $gray-lighter;
$navigation-border: rgb(195, 195, 195);
//
diff --git a/Build/Resources/Public/Sass/variables/_main.scss b/Build/Resources/Public/Sass/variables/_main.scss
index 4e3d857c02f0..369963f9f428 100644
--- a/Build/Resources/Public/Sass/variables/_main.scss
+++ b/Build/Resources/Public/Sass/variables/_main.scss
@@ -247,3 +247,28 @@ $bs-datetimepicker-text-shadow: none;
// Overwrite Progress bar background color
$progress-bg: #dedede;
+
+//
+// Components
+// =========
+//
+
+// Module
+$module-bg: #fff;
+$module-color: inherit;
+$module-dark-bg: #333;
+$module-dark-color: #ccc;
+$module-docheader-bg: #eee;
+$module-docheader-border: #c3c3c3;
+$module-docheader-zindex: 300;
+$module-docheader-height: 65px;
+$module-docheader-padding-vertical: 0;
+$module-docheader-padding-horizontal: 24px;
+$module-docheader-padding: $module-docheader-padding-vertical $module-docheader-padding-horizontal;
+$module-docheader-bar-height: 26px;
+$module-docheader-bar-margin-vertical: 4px;
+$module-docheader-bar-margin-horizontal: 0;
+$module-docheader-bar-margin: $module-docheader-bar-margin-vertical $module-docheader-bar-margin-horizontal;
+$module-body-padding-vertical: 24px;
+$module-body-padding-horizontal: 24px;
+$module-body-padding: $module-body-padding-vertical $module-body-padding-horizontal;
diff --git a/typo3/sysext/form/Resources/Public/Css/form.css b/typo3/sysext/form/Resources/Public/Css/form.css
index 0a465d7a2f26..ea1fff43cb3b 100644
--- a/typo3/sysext/form/Resources/Public/Css/form.css
+++ b/typo3/sysext/form/Resources/Public/Css/form.css
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-.t3-form-x-component{position:absolute;top:0;height:100%;line-height:normal;background:#f5f5f5}.t3-form-x-component a{text-decoration:none}.t3-form-x-component ol,.t3-form-x-component ul:not(.dropdown-menu){list-style:none;padding:0}.t3-form-x-component .ui-sortable-placeholder{outline-offset:-1px!important}.t3-form-x-component-inner-wrapper{position:relative;padding:1.5em}#t3-form-navigation-component{overflow:hidden;left:0}#t3-form-structure-panel{overflow:auto;padding-top:65px;height:100%}#t3-form-structure-panel .icon{z-index:1}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container,#t3-form-structure-panel .tree li>div{border:1px solid transparent;cursor:pointer}#t3-form-structure-panel .tree .svg-wrapper svg{overflow:visible;position:relative;top:-.8em;left:.6em}#t3-form-structure-panel .tree .svg-wrapper path{fill:none;shape-rendering:crispEdges;stroke:#ddd;stroke-width:1}#t3-form-structure-panel .tree li{white-space:nowrap}#t3-form-structure-panel .tree li .icon-actions-pagetree-collapse{margin-right:.3em}#t3-form-structure-panel .tree li .icon-actions-pagetree-collapse img{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}#t3-form-structure-panel .tree li.mjs-nestedSortable-collapsed>ol{display:none}#t3-form-structure-panel .tree li.mjs-nestedSortable-collapsed .icon-actions-pagetree-collapse img{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}#t3-form-structure-panel .tree li small{padding-left:.5em;font-size:80%}#t3-form-structure-panel .tree .t3-form-icon{margin-right:.5em;margin-left:.5em}#t3-form-structure-panel .tree .t3-form-element-has-children>div .t3-form-icon{margin-left:.1em}#t3-form-structure-panel .tree .sortable-hover{outline:#aaa solid 1px}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container:hover,#t3-form-structure-panel .t3-form-form-element-selected,#t3-form-structure-panel .t3-form-root-element-selected,#t3-form-structure-panel .tree li>div:hover{background-color:#f2f2f2;border-color:#dcdbdb;border-radius:2px;margin-left:-2em;padding-left:2em;margin-right:-1.3em}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected,#t3-form-structure-panel #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected:hover,#t3-form-structure-panel .tree li>.t3-form-form-element-selected,#t3-form-structure-panel .tree li>.t3-form-form-element-selected:hover{background-color:#fff;border-color:#dcdbdb}#t3-form-structure-panel .t3-form-x-component-inner-wrapper{padding-top:2.5em}.form-group.t3-form-collection-element-remove-button,.form-group.t3-form-inspector-validators-editor-removeButton,.t3-form-inspector-finishers-editor-removeButton{margin:0!important;font-size:0}#t3-form-inspector-panels-container{overflow:hidden;right:0;padding-top:65px}#t3-form-inspector-panels{overflow:auto;height:100%}#t3-form-inspector{padding:1em .5em}#t3-form-inspector h2,#t3-form-inspector h3,#t3-form-inspector h4{margin:0;padding:.1em .2em .2em .5em;border-top:1px solid #c3c3c3;clear:both;font:inherit;font-weight:700}#t3-form-inspector h2{padding-bottom:1em;border:none;border-bottom:1px solid #c3c3c3}#t3-form-inspector>h2:first-child{border-top:none}#t3-form-inspector h3{color:#000;padding-top:.3em;border:none}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle span,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-element-info .element-content div,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-element-info .element-content span{color:#5a5a5a}#t3-form-inspector h4{padding:.8em 3em .8em 2.5em;font-weight:500;background-color:#ddd}#t3-form-inspector h4 span[data-template-property=label]{vertical-align:top}#t3-form-inspector .icon-size-small{line-height:1.5}#t3-form-inspector .input-group-btn{position:static}#t3-form-inspector .t3-form-remove-element-button{position:absolute;top:25px;right:2.5em}#t3-form-inspector .t3-form-add-collection-element,#t3-form-inspector .t3-form-control-group{margin:1.5em .5em;clear:both}#t3-form-inspector .t3-form-inspector-editor-requiredValidator label{cursor:pointer}#t3-form-inspector .t3-form-dropdown-buttons.open{position:static}#t3-form-inspector .t3-form-dropdown-buttons.open .dropdown-menu{width:100%}#t3-form-inspector .t3-form-dropdown-buttons.open .dropdown-menu a{overflow:hidden;text-overflow:ellipsis}.t3-form-add-collection-element{padding-bottom:1em}.t3-form-collection-container{margin-top:-1em;padding:.6em}.t3-form-collection-container .ui-sortable-handle{cursor:auto}.t3-form-collection-container h4{cursor:move}.t3-form-collection-container .icon-actions-view-table-expand{position:absolute;left:.5em}.t3-form-collection-container a.collapsed .icon-actions-view-table-expand svg{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.t3-form-collection-container a:not(.collapsed) .icon-actions-view-table-expand svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.t3-form-collection-element{position:relative;margin-bottom:.5em;border:1px solid #c3c3c3;border-top:none;background:#f5f5f5}.t3-form-collection-element .t3-form-collection-element-remove-button{position:absolute;right:.5em;top:.6em}.property-grid .form-control{min-width:initial;min-width:auto;font-size:.9em}.property-grid .table th{font-size:.9em}.property-grid .table>tbody>tr{cursor:pointer;background-color:#fafafa}.property-grid .table>tbody>tr:last-child{cursor:auto}.property-grid .table>tbody>tr>td{padding:.6em .3em;text-align:center}.property-grid .table>tbody>tr>td:first-child{width:35px}.property-grid .table>tbody>tr>td:nth-child(2),.property-grid .table>tbody>tr>td:nth-child(3){width:75px}.property-grid .table>tbody>tr>td:nth-child(4){width:65px}.property-grid .table>tbody>tr>td:nth-child(5){width:35px}.property-grid .table .btn{background-color:#eee;border-color:#bbb}.property-grid .sort-row-field{cursor:move}.property-grid .ui-sortable-helper td{border:none}.property-grid .ui-sortable-placeholder{height:45px;border-left:1px solid #c3c3c3!important;border-right:1px solid #c3c3c3!important;outline-offset:-5px!important}#t3-form-stage-inner-container{display:inline-block;width:90%;text-align:left}#t3-form-stage-container{overflow:auto;position:relative;height:100%;text-align:left}@media (min-width:1300px){#t3-form-stage-inner-container{width:600px}#t3-form-stage-container{text-align:center}}#t3-form-stage-container ol,#t3-form-stage-container ul{list-style:none}#t3-form-stage-container .form-section{border:none}#t3-form-stage-container .panel-heading button{outline:0}#t3-form-stage-container .panel-heading .paginiation-label{margin-right:1em}#t3-form-stage-container .t3-form-new-element-container{height:62px;border:1px dashed #ddd;text-align:center;padding-top:31px}#t3-form-stage-container .t3-form-new-element-container .btn{-webkit-transform:translateY(-50%);transform:translateY(-50%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract ol,#t3-form-stage-container.t3-form-stage-viewmode-abstract ul{padding-left:40px;padding-right:1em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-page-title{margin:0 0 .5em}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage-inner-container{overflow:hidden}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit:not(.t3-form-element-toplevel){margin-bottom:1em;padding-bottom:1px;outline:#ddd solid 1px;outline-offset:-1px}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit .sortable-hover{outline-color:#777}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit .t3-form-form-composit-element-selected{outline-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover>.ui-sortable-handle,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover{border-color:#777}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover>.ui-sortable-handle .t3-form-icon-container,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-icon-container{background-color:#777}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover>.ui-sortable-handle .t3-form-icon-container path,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-icon-container path{fill:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .icon svg path,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .icon svg path{fill:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable fieldset{position:relative;min-height:130px;padding-top:5em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable fieldset legend{position:absolute;top:1em;display:inline-block;width:95%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle{overflow:hidden;position:relative;height:62px;margin-bottom:1em;border:1px solid #ddd;background-color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-validator-list{right:0;-webkit-transition:right .2s;transition:right .2s}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-validator-info .t3-form-icon{margin-right:75px;-webkit-transition:margin .2s;transition:margin .2s}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-state-disabled{cursor:auto}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-state-disabled:hover{background:0 0}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-placeholder{margin-bottom:1em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-icon-container{float:left;width:40px;height:100%;padding:1em;cursor:move;background-color:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-form-element-body,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-icon-container .t3-form-icon{height:100%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info{position:relative;float:left;width:55%;height:100%;padding-left:1em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:after,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:before{z-index:1;display:block;content:'';position:absolute;bottom:0;right:0;left:0}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:before{height:.8em;background:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:after{bottom:.8em;height:1em;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-label-container{float:left;position:relative;width:45%;height:100%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-label-container .element-label{overflow:hidden;position:absolute;top:50%;width:100%;text-overflow:ellipsis;-webkit-transform:translateY(-50%);transform:translateY(-50%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content{padding-top:1em;white-space:nowrap;font-size:.8em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content div,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content span{color:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info{position:relative;overflow:hidden;float:right;height:100%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-icon{height:100%;z-index:1;margin-left:1em;-webkit-transition:margin .3s;transition:margin .3s;-webkit-filter:grayscale(100%);filter:grayscale(100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list{position:absolute;top:0;right:-100px;width:100px;height:100%;padding:1em 1em 1em 35px;font-size:.8em;-webkit-transition:right .3s;transition:right .3s;background-color:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before{z-index:1;display:block;content:'';position:absolute;bottom:0;right:0;left:0}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before{height:1em;background:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after{bottom:1em;height:1em;background:-webkit-linear-gradient(top,rgba(221,221,221,0) 0,#ddd 100%);background:linear-gradient(to bottom,rgba(221,221,221,0) 0,#ddd 100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .validator-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5a5a5a}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected{position:relative;padding-top:35px;height:97px;border:none}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-form-element-body{border:1px solid #0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-icon-container{background-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content div,#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content span{color:#5a5a5a}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list{right:0;-webkit-transition:right .2s;transition:right .2s;background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:before{background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:after{background:-webkit-linear-gradient(top,rgba(235,243,251,0) 0,#ebf3fb 100%);background:linear-gradient(to bottom,rgba(235,243,251,0) 0,#ebf3fb 100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-info .t3-form-icon{margin-right:75px;-webkit-filter:none;filter:none}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container{position:absolute;top:0;right:0;width:100%;height:35px;border:1px solid #0078e6;background-color:#0078e6;padding-right:.7em;padding-top:.4em}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after,#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before{position:absolute;top:0;display:block;width:1px;height:100%;content:' ';background-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before{left:-1px}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after{right:-1px}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu{min-width:initial;padding-left:0;padding-right:0;background-color:#005db3}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu>li a:hover{background-color:#006bcd}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .caret{color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .t3-form-dropdown-buttons .icon{margin-right:.5em}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar{float:right}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn{background-color:#fff;border-color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn.active,#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn:hover{background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label{display:inline-block;top:1em;left:5em;bottom:auto;font-size:.9em;color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label span{color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected{border-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading{background-color:#0078e6;border-color:#0078e6;color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn{background-color:#fff;border-color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn.active,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn:hover{background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=text],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=date],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=password],#t3-form-stage-container.t3-form-stage-viewmode-preview select,#t3-form-stage-container.t3-form-stage-viewmode-preview textarea{color:#000;background-color:#e5e5e5}#t3-form-stage-container.t3-form-stage-viewmode-preview ::-webkit-input-placeholder{color:#737373;font-style:italic}#t3-form-stage-container.t3-form-stage-viewmode-preview :-ms-input-placeholder{color:#737373;font-style:italic}#t3-form-stage-container.t3-form-stage-viewmode-preview ::placeholder{color:#737373;font-style:italic}#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=date]{display:block;width:100%;height:32px;padding:.6em;font-size:12px;line-height:1.5;background-image:none;border:1px solid #c3c3c3;border-radius:2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}#t3-form-stage-container.t3-form-stage-viewmode-preview select[multiple=multiple]{height:auto;min-height:32px}#t3-form-stage-container.t3-form-stage-viewmode-preview textarea{min-height:100px}#t3-form-stage-container.t3-form-stage-viewmode-preview .container{width:auto}#t3-form-stage-container.t3-form-stage-viewmode-preview legend.t3-form-form-element-selected{border-color:#c3c3c3}#t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group button,#t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group span{display:inline-block;margin-right:1em}#t3-form-stage-container.t3-form-stage-viewmode-preview .preview-table-first-col{width:30%}#t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-preview{position:relative;display:inline-block;width:100%}#t3-form-stage-container #t3-form-stage .t3-form-element-toplevel>.t3-form-form-element-selected .btn-toolbar-container,#t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-new-element-container,.meta-label{display:none}#t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-toplevel>form>.tooltip{top:100px!important}#t3-form-stage-container #t3-form-stage{margin-bottom:0;padding-top:.5em}#t3-form-stage-container #t3-form-stage>ol,#t3-form-stage-container #t3-form-stage>ol>li>ol{padding-left:0;padding-right:0}#t3-form-stage-container #t3-form-stage .t3-form-element-toplevel>.t3-form-form-element-selected{height:auto;padding-top:0}.meta-label{z-index:2;position:absolute;bottom:1em;left:5.5em;color:#0078e6;line-height:1.6;font-size:.8em}.ui-sortable-handle:hover>.meta-label{display:inline-block}.t3-form-element-composit.ui-sortable-placeholder,.ui-sortable-placeholder{background-color:#fff!important;border:none!important;outline:#c4dbab dashed 1px!important;outline-offset:-2px!important;visibility:visible!important}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element,#t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle{border-color:#c83c3c}.ui-sortable-placeholder.mjs-nestedSortable-error{outline:#c83c3c dashed 1px!important}.t3-form-icon{margin-right:1em}.t3-form-validation-child-has-error{color:#c83c3c}#t3-form-navigation-component .t3-form-validation-errors,#t3-form-stage-container .t3-form-validation-errors{position:relative;color:#c83c3c}#t3-form-navigation-component .t3-form-validation-errors:before,#t3-form-stage-container .t3-form-validation-errors:before{z-index:1;position:absolute;display:inline-block;width:15px;height:15px;font-family:FontAwesome;vertical-align:middle;border-radius:50%;font-size:1em;line-height:1.4;text-align:center;background:0 0}#t3-form-navigation-component .t3-form-validation-errors.t3-form-form-element-selected:before,#t3-form-navigation-component .t3-form-validation-errors:hover:before{left:2.4em}#t3-form-navigation-component .t3-form-validation-errors:before{margin-top:.2em;color:#fff;font-size:10px;font-weight:800;content:"\f12a";background-color:#c83c3c}.t3-form-validation-errors#t3-form-navigation-component-tree-root:before{left:-2em!important;margin-top:.1em}#t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle:before{left:4.5em;margin-top:1.9em;content:"\f071"}#t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle .element-label{padding-left:1.5em}#t3-form-inspector-panels .t3-form-collection-element .t3-form-validation-errors{display:inline-block;color:#fff;font-size:.8em;font-weight:700;background-color:#c83c3c;margin-top:.5em;padding:.1em .5em;border-radius:2px}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4{border-color:#c83c3c;background-color:#c83c3c;color:#fff}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4 path{fill:#fff}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button{background:#fff;border-color:transparent}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button path{fill:#c83c3c}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button:hover{background:#eab3b3}.form-editor-loading-spinner{width:150px;margin:5em auto 0;text-align:center}.ui-sortable-handle{cursor:pointer}.module[data-module-name=web_FormFormbuilder_FormEditor]{overflow:hidden}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-body,.module[data-module-name=web_FormFormbuilder_FormEditor] div[data-identifier=moduleWrapper]{height:100%}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-body{padding-bottom:.5em}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left button,.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left button:active,.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left button:focus{outline:initial initial 0}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left .btn-group,.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left .t3-form-element-form-settings-button{margin-left:25px}.t3-form-element-new-page-button{position:absolute;left:.5em}
\ No newline at end of file
+.t3-form-x-component{position:absolute;top:0;height:100%;line-height:normal;background:#f5f5f5}.t3-form-x-component a{text-decoration:none}.t3-form-x-component ol,.t3-form-x-component ul:not(.dropdown-menu){list-style:none;padding:0}.t3-form-x-component .ui-sortable-placeholder{outline-offset:-1px!important}.t3-form-x-component-inner-wrapper{position:relative;padding:1.5em}#t3-form-navigation-component{overflow:hidden;left:0}#t3-form-structure-panel{overflow:auto;padding-top:65px;height:100%}#t3-form-structure-panel .icon{z-index:1;margin-top:1px}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container,#t3-form-structure-panel .tree li>div{border:1px solid transparent;cursor:pointer;height:20px}#t3-form-structure-panel .tree .svg-wrapper svg{overflow:visible;position:relative;top:-.8em;left:.6em}#t3-form-structure-panel .tree .svg-wrapper path{fill:none;shape-rendering:crispEdges;stroke:#ddd;stroke-width:1}#t3-form-structure-panel .tree li{white-space:nowrap}#t3-form-structure-panel .tree li .icon-actions-pagetree-collapse{margin-right:.3em}#t3-form-structure-panel .tree li .icon-actions-pagetree-collapse img{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}#t3-form-structure-panel .tree li.mjs-nestedSortable-collapsed>ol{display:none}#t3-form-structure-panel .tree li.mjs-nestedSortable-collapsed .icon-actions-pagetree-collapse img{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}#t3-form-structure-panel .tree li small{padding-left:.5em;font-size:80%}#t3-form-structure-panel .tree .t3-form-icon{margin-right:.5em;margin-left:.5em}#t3-form-structure-panel .tree .t3-form-element-has-children>div .t3-form-icon{margin-left:.1em}#t3-form-structure-panel .tree .sortable-hover{outline:#aaa solid 1px}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container>span,#t3-form-structure-panel .tree li>div>span{display:inline-block;vertical-align:top;line-height:20px}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container:hover,#t3-form-structure-panel .t3-form-form-element-selected,#t3-form-structure-panel .t3-form-root-element-selected,#t3-form-structure-panel .tree li>div:hover{background-color:#f2f2f2;border-color:#dcdbdb;border-radius:2px;margin-left:-20px;padding-left:20px;margin-right:-1.3em}#t3-form-structure-panel #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected,#t3-form-structure-panel #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected:hover,#t3-form-structure-panel .tree li>.t3-form-form-element-selected,#t3-form-structure-panel .tree li>.t3-form-form-element-selected:hover{background-color:#fff;border-color:#dcdbdb}#t3-form-structure-panel .t3-form-x-component-inner-wrapper{padding-top:2.5em}.form-group.t3-form-collection-element-remove-button,.form-group.t3-form-inspector-validators-editor-removeButton,.t3-form-inspector-finishers-editor-removeButton{margin:0!important;font-size:0}#t3-form-inspector-panels-container{overflow:hidden;right:0;padding-top:65px}#t3-form-inspector-panels{overflow:auto;height:100%}#t3-form-inspector{padding:1em .5em}#t3-form-inspector h2,#t3-form-inspector h3,#t3-form-inspector h4{margin:0;padding:.1em .2em .2em .5em;border-top:1px solid #c3c3c3;clear:both;font:inherit;font-weight:700}#t3-form-inspector h2{padding-bottom:1em;border:none;border-bottom:1px solid #c3c3c3}#t3-form-inspector>h2:first-child{border-top:none}#t3-form-inspector h3{color:#000;padding-top:.3em;border:none}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle span,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-element-info .element-content div,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-element-info .element-content span{color:#5a5a5a}#t3-form-inspector h4{padding:.8em 3em .8em 2.5em;font-weight:500;background-color:#ddd}#t3-form-inspector h4 span[data-template-property=label]{vertical-align:top}#t3-form-inspector .icon-size-small{line-height:1.5}#t3-form-inspector .input-group-btn{position:static}#t3-form-inspector .t3-form-remove-element-button{position:absolute;top:25px;right:2.5em}#t3-form-inspector .t3-form-add-collection-element,#t3-form-inspector .t3-form-control-group{margin:1.5em .5em;clear:both}#t3-form-inspector .t3-form-inspector-editor-requiredValidator label{cursor:pointer}#t3-form-inspector .t3-form-dropdown-buttons.open{position:static}#t3-form-inspector .t3-form-dropdown-buttons.open .dropdown-menu{width:100%}#t3-form-inspector .t3-form-dropdown-buttons.open .dropdown-menu a{overflow:hidden;text-overflow:ellipsis}.t3-form-add-collection-element{padding-bottom:1em}.t3-form-collection-container{margin-top:-1em;padding:.6em}.t3-form-collection-container .ui-sortable-handle{cursor:auto}.t3-form-collection-container h4{cursor:move}.t3-form-collection-container .icon-actions-view-table-expand{position:absolute;left:.5em}.t3-form-collection-container a.collapsed .icon-actions-view-table-expand svg{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.t3-form-collection-container a:not(.collapsed) .icon-actions-view-table-expand svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.t3-form-collection-element{position:relative;margin-bottom:.5em;border:1px solid #c3c3c3;border-top:none;background:#f5f5f5}.t3-form-collection-element .t3-form-collection-element-remove-button{position:absolute;right:.5em;top:.6em}.property-grid .form-control{min-width:initial;min-width:auto;font-size:.9em}.property-grid .table th{font-size:.9em}.property-grid .table>tbody>tr{cursor:pointer;background-color:#fafafa}.property-grid .table>tbody>tr:last-child{cursor:auto}.property-grid .table>tbody>tr>td{padding:.6em .3em;text-align:center}.property-grid .table>tbody>tr>td:first-child{width:35px}.property-grid .table>tbody>tr>td:nth-child(2),.property-grid .table>tbody>tr>td:nth-child(3){width:75px}.property-grid .table>tbody>tr>td:nth-child(4){width:65px}.property-grid .table>tbody>tr>td:nth-child(5){width:35px}.property-grid .table .btn{background-color:#eee;border-color:#bbb}.property-grid .sort-row-field{cursor:move}.property-grid .ui-sortable-helper td{border:none}.property-grid .ui-sortable-placeholder{height:45px;border-left:1px solid #c3c3c3!important;border-right:1px solid #c3c3c3!important;outline-offset:-5px!important}#t3-form-stage-inner-container{display:inline-block;width:90%;text-align:left}#t3-form-stage-container{overflow:auto;position:relative;height:100%;text-align:left}@media (min-width:1300px){#t3-form-stage-inner-container{width:600px}#t3-form-stage-container{text-align:center}}#t3-form-stage-container ol,#t3-form-stage-container ul{list-style:none}#t3-form-stage-container .form-section{border:none}#t3-form-stage-container .panel-heading button{outline:0}#t3-form-stage-container .panel-heading .paginiation-label{margin-right:1em}#t3-form-stage-container .t3-form-new-element-container{height:62px;border:1px dashed #ddd;text-align:center;padding-top:31px}#t3-form-stage-container .t3-form-new-element-container .btn{-webkit-transform:translateY(-50%);transform:translateY(-50%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract ol,#t3-form-stage-container.t3-form-stage-viewmode-abstract ul{padding-left:40px;padding-right:1em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-page-title{margin:0 0 .5em}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage-inner-container{overflow:hidden}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit:not(.t3-form-element-toplevel){margin-bottom:1em;padding-bottom:1px;outline:#ddd solid 1px;outline-offset:-1px}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit .sortable-hover{outline-color:#777}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit .t3-form-form-composit-element-selected{outline-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover>.ui-sortable-handle,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover{border-color:#777}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover>.ui-sortable-handle .t3-form-icon-container,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-icon-container{background-color:#777}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-composit.sortable-hover>.ui-sortable-handle .t3-form-icon-container path,#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-icon-container path{fill:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .icon svg path,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .icon svg path{fill:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable fieldset{position:relative;min-height:130px;padding-top:5em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable fieldset legend{position:absolute;top:1em;display:inline-block;width:95%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle{overflow:hidden;position:relative;height:62px;margin-bottom:1em;border:1px solid #ddd;background-color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-validator-list{right:0;-webkit-transition:right .2s;transition:right .2s}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-handle:hover .t3-form-validator-info .t3-form-icon{margin-right:75px;-webkit-transition:margin .2s;transition:margin .2s}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-state-disabled{cursor:auto}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-state-disabled:hover{background:0 0}#t3-form-stage-container.t3-form-stage-viewmode-abstract .ui-sortable-placeholder{margin-bottom:1em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-icon-container{float:left;width:40px;height:100%;padding:1em;cursor:move;background-color:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-form-element-body,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-icon-container .t3-form-icon{height:100%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info{position:relative;float:left;width:55%;height:100%;padding-left:1em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:after,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:before{z-index:1;display:block;content:'';position:absolute;bottom:0;right:0;left:0}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:before{height:.8em;background:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info:after{bottom:.8em;height:1em;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-label-container{float:left;position:relative;width:45%;height:100%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-label-container .element-label{overflow:hidden;position:absolute;top:50%;width:100%;text-overflow:ellipsis;-webkit-transform:translateY(-50%);transform:translateY(-50%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content{padding-top:1em;white-space:nowrap;font-size:.8em}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content div,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-element-info .element-content span{color:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info{position:relative;overflow:hidden;float:right;height:100%}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-icon{height:100%;z-index:1;margin-left:1em;-webkit-transition:margin .3s;transition:margin .3s;-webkit-filter:grayscale(100%);filter:grayscale(100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list{position:absolute;top:0;right:-100px;width:100px;height:100%;padding:1em 1em 1em 35px;font-size:.8em;-webkit-transition:right .3s;transition:right .3s;background-color:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after,#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before{z-index:1;display:block;content:'';position:absolute;bottom:0;right:0;left:0}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:before{height:1em;background:#ddd}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .t3-form-validator-list:after{bottom:1em;height:1em;background:-webkit-linear-gradient(top,rgba(221,221,221,0) 0,#ddd 100%);background:linear-gradient(to bottom,rgba(221,221,221,0) 0,#ddd 100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract .t3-form-validator-info .validator-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5a5a5a}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected{position:relative;padding-top:35px;height:97px;border:none}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-form-element-body{border:1px solid #0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-icon-container{background-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content div,#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-element-info .element-content span{color:#5a5a5a}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list{right:0;-webkit-transition:right .2s;transition:right .2s;background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:before{background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-list:after{background:-webkit-linear-gradient(top,rgba(235,243,251,0) 0,#ebf3fb 100%);background:linear-gradient(to bottom,rgba(235,243,251,0) 0,#ebf3fb 100%)}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .t3-form-validator-info .t3-form-icon{margin-right:75px;-webkit-filter:none;filter:none}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container{position:absolute;top:0;right:0;width:100%;height:35px;border:1px solid #0078e6;background-color:#0078e6;padding-right:.7em;padding-top:.4em}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after,#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before{position:absolute;top:0;display:block;width:1px;height:100%;content:' ';background-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:before{left:-1px}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container:after{right:-1px}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu{min-width:initial;padding-left:0;padding-right:0;background-color:#005db3}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .dropdown-menu>li a:hover{background-color:#006bcd}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .caret{color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .t3-form-dropdown-buttons .icon{margin-right:.5em}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar{float:right}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn{background-color:#fff;border-color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn.active,#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .btn-toolbar-container .btn-toolbar .btn:hover{background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label{display:inline-block;top:1em;left:5em;bottom:auto;font-size:.9em;color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract #t3-form-stage .t3-form-form-element-selected .meta-label span{color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected{border-color:#0078e6}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading{background-color:#0078e6;border-color:#0078e6;color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn{background-color:#fff;border-color:#fff}#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn.active,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn:hover{background-color:#ebf3fb}#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=text],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=date],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=password],#t3-form-stage-container.t3-form-stage-viewmode-preview select,#t3-form-stage-container.t3-form-stage-viewmode-preview textarea{color:#000;background-color:#e5e5e5}#t3-form-stage-container.t3-form-stage-viewmode-preview ::-webkit-input-placeholder{color:#737373;font-style:italic}#t3-form-stage-container.t3-form-stage-viewmode-preview :-ms-input-placeholder{color:#737373;font-style:italic}#t3-form-stage-container.t3-form-stage-viewmode-preview ::placeholder{color:#737373;font-style:italic}#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=date]{display:block;width:100%;height:32px;padding:.6em;font-size:12px;line-height:1.5;background-image:none;border:1px solid #c3c3c3;border-radius:2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}#t3-form-stage-container.t3-form-stage-viewmode-preview select[multiple=multiple]{height:auto;min-height:32px}#t3-form-stage-container.t3-form-stage-viewmode-preview textarea{min-height:100px}#t3-form-stage-container.t3-form-stage-viewmode-preview .container{width:auto}#t3-form-stage-container.t3-form-stage-viewmode-preview legend.t3-form-form-element-selected{border-color:#c3c3c3}#t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group button,#t3-form-stage-container.t3-form-stage-viewmode-preview .form-navigation .btn-group span{display:inline-block;margin-right:1em}#t3-form-stage-container.t3-form-stage-viewmode-preview .preview-table-first-col{width:30%}#t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-preview{position:relative;display:inline-block;width:100%}#t3-form-stage-container #t3-form-stage .t3-form-element-toplevel>.t3-form-form-element-selected .btn-toolbar-container,#t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-new-element-container,.meta-label{display:none}#t3-form-stage-container.t3-form-stage-viewmode-preview .t3-form-element-toplevel>form>.tooltip{top:100px!important}#t3-form-stage-container #t3-form-stage{margin-bottom:0;padding-top:.5em}#t3-form-stage-container #t3-form-stage>ol,#t3-form-stage-container #t3-form-stage>ol>li>ol{padding-left:0;padding-right:0}#t3-form-stage-container #t3-form-stage .t3-form-element-toplevel>.t3-form-form-element-selected{height:auto;padding-top:0}.meta-label{z-index:2;position:absolute;bottom:1em;left:5.5em;color:#0078e6;line-height:1.6;font-size:.8em}.ui-sortable-handle:hover>.meta-label{display:inline-block}.t3-form-element-composit.ui-sortable-placeholder,.ui-sortable-placeholder{background-color:#fff!important;border:none!important;outline:#c4dbab dashed 1px!important;outline-offset:-2px!important;visibility:visible!important}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element,#t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle{border-color:#c83c3c}.ui-sortable-placeholder.mjs-nestedSortable-error{outline:#c83c3c dashed 1px!important}.t3-form-icon{margin-right:1em}.t3-form-validation-child-has-error{color:#c83c3c}#t3-form-navigation-component .t3-form-validation-errors,#t3-form-stage-container .t3-form-validation-errors{position:relative;color:#c83c3c}#t3-form-navigation-component .t3-form-validation-errors:before,#t3-form-stage-container .t3-form-validation-errors:before{z-index:1;position:absolute;display:inline-block;width:15px;height:15px;font-family:FontAwesome;vertical-align:middle;border-radius:50%;font-size:1em;line-height:1.4;text-align:center;background:0 0}#t3-form-navigation-component .t3-form-validation-errors.t3-form-form-element-selected:before,#t3-form-navigation-component .t3-form-validation-errors:hover:before{left:2.4em}#t3-form-navigation-component .t3-form-validation-errors:before{margin-top:.2em;color:#fff;font-size:10px;font-weight:800;content:"\f12a";background-color:#c83c3c}.t3-form-validation-errors#t3-form-navigation-component-tree-root:before{left:-2em!important;margin-top:.1em}#t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle:before{left:4.5em;margin-top:1.9em;content:"\f071"}#t3-form-stage-container .t3-form-validation-errors.ui-sortable-handle .element-label{padding-left:1.5em}#t3-form-inspector-panels .t3-form-collection-element .t3-form-validation-errors{display:inline-block;color:#fff;font-size:.8em;font-weight:700;background-color:#c83c3c;margin-top:.5em;padding:.1em .5em;border-radius:2px}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4{border-color:#c83c3c;background-color:#c83c3c;color:#fff}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element h4 path{fill:#fff}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button{background:#fff;border-color:transparent}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button path{fill:#c83c3c}#t3-form-inspector-panels .t3-form-validation-errors.t3-form-collection-element .t3-form-collection-element-remove-button:hover{background:#eab3b3}.form-editor-loading-spinner{width:150px;margin:5em auto 0;text-align:center}.ui-sortable-handle{cursor:pointer}.module[data-module-name=web_FormFormbuilder_FormEditor]{overflow:hidden}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-body,.module[data-module-name=web_FormFormbuilder_FormEditor] div[data-identifier=moduleWrapper]{height:100%}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-body{padding-bottom:.5em}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left button,.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left button:active,.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left button:focus{outline:initial initial 0}.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left .btn-group,.module[data-module-name=web_FormFormbuilder_FormEditor] .module-docheader-bar-column-left .t3-form-element-form-settings-button{margin-left:25px}.t3-form-element-new-page-button{position:absolute;left:.5em}
\ No newline at end of file
diff --git a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/TreeComponent.js b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/TreeComponent.js
index 1d58a73d9fbe..902125cbeca4 100644
--- a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/TreeComponent.js
+++ b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/TreeComponent.js
@@ -63,8 +63,8 @@ define(['jquery',
svgLink: {
height: 15,
paths: {
- angle: 'M0 0 V21 H15',
- vertical: 'M0 0 V21 H0',
+ angle: 'M0 0 V20 H15',
+ vertical: 'M0 0 V20 H0',
hidden: 'M0 0 V0 H0'
},
width: 15
--
GitLab