[!!!][FEATURE] Refactor and streamline click menu / context menu
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / form.less
index 92969d2..ab91702 100644 (file)
 @charset "UTF-8";
 
-.std-em-selector {
-  font-size: 90%;
-  font-style: normal;
+//
+// Variables
+//
+// @toDo remove these variables after including this file in backend.less
+// Bootstrap: variables.less
+@panel-default-text: @gray-dark;
+
+// /Build/Resources/Public/Less/cropper/variables.less
+@screen-lg: 1200px; // Large screen / wide desktop
+
+// /Build/Resources/Public/Less/_variables.less
+@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;
+
+// /Build/Resources/Public/Less/Component/module.less
+@module-docheader-height: 65px;
+@module-docheader-border: #c3c3c3;
+
+// /Build/Resources/Public/Less/TYPO3/_module_web_page.less
+@page-ce-header-hover-bg: #d0d0d0;
+
+// /Build/Resources/Public/Less/TYPO3/_element_tree.less
+@navigation-bg: #f5f5f5;
+
+// Form 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-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;
+
+//
+// Mixins
+//
+
+.fade-out-gradient-effect-bottom (@color, @gradient-start-height, @gradient-height) {
+  &:before, &:after {
+    z-index: 1;
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+  &:before {
+    height: @gradient-start-height;
+    background: @color;
+  }
+  &:after {
+    bottom: @gradient-start-height;
+    height: @gradient-height;
+    background: linear-gradient(to bottom, rgba(red(@color), green(@color), blue(@color), 0) 0%, @color 100%);
+  }
 }
 
-.std-strong-selector {
-  display: block;
-  font-size: 90%;
-  font-weight: normal;
-  color: #C00;
+.selected-button-style-primary () {
+  .btn {
+    background-color: #fff;
+    border-color: #fff;
+    &:hover, &.active {
+      background-color: lighten(@brand-info, 30%);
+    }
+  }
+  .icon {
+    svg path {
+      fill: @brand-primary;
+    }
+  }
 }
 
-.std-li-selector{
-  float: none;
-  width: auto;
-  margin-right: 0;
-  margin-left: 1em;
+.collapsed-icon-animation () {
+  transform: rotate(0deg);
+  transition: transform 0.2s;
 }
-#fake-form {
 
-  ol {
-    padding-left: 0 !important;
-    list-style: none !important;
-  }
-
-  /* style for each form element */
-  li {
-    overflow: hidden;
-    padding: 0.5em;
-    margin-bottom: 0.5em;
-
-    &#element-placeholder{
-      padding: 0;
-      margin: 0;
-    }
+.expanded-icon-animation () {
+  transform: rotate(90deg);
+  transition: transform 0.2s;
+}
 
-    input + label,
-    textarea + label,
-    select + label {
-      .std-li-selector;
-    }
+//
+// X-Component
+//
+.t3-form-x-component {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  line-height: normal;
+  background: @navigation-bg;
 
-    textarea + label {
-      vertical-align: top;
-    }
+  a {
+    text-decoration: none;
   }
-
-  textarea, input[type=text]{
-    border: 1px solid #c0c0c0;
+  ol,
+  ul:not(.dropdown-menu) {
+    list-style: none;
+    padding: 0;
   }
-
-  input[type=text]{
-    // equal width like textareas
-    width:300px;
-    padding: 3px;
+  .ui-sortable-placeholder {
+    outline-offset: -1px !important;
   }
+}
 
-  label {
-    display:block;
-    margin-right: 1em;
-    vertical-align: baseline;
+.t3-form-x-component-inner-wrapper {
+  padding: 1.5em;
+}
 
-    em{
-      .std-em-selector;
-    }
+//
+// Structure Tree
+//
+#t3-form-navigation-component {
+  overflow: hidden;
+  left: 0;
+}
 
-    strong{
-      .std-strong-selector;
-    }
-  }
+#t3-form-structure-panel {
+  overflow: auto;
+  padding-top: @module-docheader-height;
+  height: 100%;
 
-  .x-checkbox, .x-radio{
-    label{
-      display:inline-block;
-    }
+  .icon {
+    z-index: 1;
   }
-
-  legend {
-    border-bottom:0;
-    em{
-      .std-em-selector;
-    }
-
-    strong{
-      .std-strong-selector;
-    }
+  #t3-form-navigation-component-tree-root-container, .tree li > div {
+    border: 1px solid transparent;
+    cursor: pointer;
   }
-
-  fieldset {
-    position: relative;
-    margin: 0;
-    padding: 0;
-
-    &.submit {
-      border-style: none;
-    }
-
-    &.fieldset-horizontal {
-      border-width: 0;
-
-      &.label-below label {
-        display: block;
-        margin-left: 0;
-        margin-top: 0.2em;
-        font-size: 90%;
-        text-align: left;
-        color: #999999;
-      }
-
-      label{
-        em {
-          display: inline;
-        }
-      }
-
-      ol {
-        padding: 0;
+  .tree {
+    .svg-wrapper {
+      svg {
+        overflow: visible;
+        position: relative;
+        top: -0.8em;
+        left: 0.6em;
       }
-
-      li {
-        float: left;
-        margin-right: 1em;
-        padding: 0;
+      path {
+        fill: none;
+        shape-rendering: crispEdges;
+        stroke: rgb(221, 221, 221);
+        stroke-width: 1;
       }
     }
-
-    &.fieldset-subgroup {
-      margin-bottom: -2em;
-      border-style: none;
-
-      ol {
-        position: relative;
-        top: -1.4em;
-        padding: 0;
-      }
-
-      li {
-        padding: 0;
+    li {
+      white-space: nowrap;
+      .icon-actions-pagetree-collapse {
+        margin-right: 0.3em;
+        img {
+          .expanded-icon-animation ();
+        }
       }
-
-      legend {
-        margin-left: 0;
-        padding: 0;
+      &.mjs-nestedSortable-collapsed {
+        > ol {
+          display: none;
+        }
+        .icon-actions-pagetree-collapse img {
+          .collapsed-icon-animation ();
+        }
       }
-
-      input + label {
-        float: none;
-        width: auto;
-        display: inline;
-        margin: 0 0 0 1em;
+      small {
+        padding-left: 0.5em;
+        font-size: 80%;
       }
     }
-  }
-
-  legend {
-    font-size: 12px;
-    font-weight: bold;
-    color: #000000;
-
-    em {
-      position: absolute;
-    }
-
-    strong {
-      position: absolute;
-      top: 1.4em;
+    .t3-form-icon {
+      margin-right: 0.5em;
+      margin-left: 0.5em;
     }
-  }
-
-  /* labels as block, labels displayed above or below the input fields */
-  .labels-block{
-    label {
-      display: block;
-      float: none;
-      margin: 0 0 0.5em;
-      width: auto;
+    .t3-form-element-has-children > div .t3-form-icon {
+      margin-left: 0.1em;
     }
-
-    input + label,
-    textarea + label{
-      margin: 0.5em 0 0;
+    .sortable-hover {
+      outline: 1px solid darken(@panel-default-heading-bg, 20%);
     }
-
+  }
+  .tree li > div:hover,
+  .t3-form-form-element-selected,
+  #t3-form-navigation-component-tree-root-container:hover,
+  .t3-form-root-element-selected {
+    background-color: darken(@navigation-bg, 1%);
+    border-color: darken(@navigation-bg, 10%);
+    border-radius: 2px;
+    margin-left: -2em;
+    padding-left: 2em;
+    margin-right: -1.3em;
+  }
+  .tree li > .t3-form-form-element-selected,
+  .tree li > .t3-form-form-element-selected:hover,
+  #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected,
+  #t3-form-navigation-component-tree-root-container.t3-form-root-element-selected:hover {
+    background-color: #fff;
+    border-color: darken(@navigation-bg, 10%);
+  }
+  .t3-form-x-component-inner-wrapper {
+    padding-top: 2.5em;
   }
 }
 
-/* labels alignment right */
-#fake-form .labels-alignment-right label,
-#fake-form .labels-alignment-right .fieldset-subgroup legend,
-#fake-form .labels-alignment-right.fieldset-subgroup legend {
-  text-align: right;
-}
-
-#fake-form .labels-block fieldset.fieldset-subgroup,
-#fake-form fieldset.labels-block.fieldset-subgroup {
-  margin-bottom: 0;
-}
-
-#fake-form .labels-block .fieldset-subgroup legend,
-#fake-form .labels-block.fieldset-subgroup legend {
-  width: auto;
-}
-
-#fake-form .labels-block .fieldset-subgroup legend em,
-#fake-form .labels-block.fieldset-subgroup legend em {
-  position: relative;
-}
-
-#fake-form .labels-block .fieldset-subgroup legend strong,
-#fake-form .labels-block.fieldset-subgroup legend strong {
-  position: relative;
-  top: 0;
-}
-
-#fake-form .labels-block .fieldset-subgroup ol,
-#fake-form .labels-block.fieldset-subgroup ol {
-  top: 0;
-  margin: 0;
-  padding: 0.5em 0 0;
-}
-
-/* element HIDDEN */
-#fake-form .formwizard-element.hidden-element {
-  cursor: default;
-}
-
-#fake-form .formwizard-element .hidden-dummy-element {
-  margin: 0;
-  padding: 5px;
-  border:1px dotted #A9A9A9;
+//
+// Inspector
+//
+.form-group.t3-form-collection-element-remove-button,
+.t3-form-inspector-finishers-editor-removeButton,
+.form-group.t3-form-inspector-validators-editor-removeButton {
+  margin: 0 !important;
+  font-size: 0;
 }
 
-/* styles for drag and drop content */
-.x-dd-drag-ghost .formwizard-element {
-  list-style:none;
+#t3-form-inspector-panels-container {
+  overflow: hidden;
+  right: 0;
+  padding-top: @module-docheader-height;
 }
 
-.x-dd-drop-icon {
-  top: 7px;
+#t3-form-inspector-panels {
+  overflow: auto;
+  height: 100%;
 }
 
-.x-dd-drag-ghost ol {
-  margin: 5px 0;
-  padding: 0;
-  list-style: none;
-}
+#t3-form-inspector {
+  padding: 1em 0.5em;
 
-.x-dd-drag-ghost .buttongroup,
-.x-dd-drag-ghost label em,
-.x-dd-drag-ghost label strong {
-  display: none;
+  h2,
+  h3,
+  h4 {
+    margin: 0;
+    padding: 0.1em 0.2em 0.2em 0.5em;
+    border-top: 1px solid @module-docheader-border;
+    clear: both;
+    font: inherit;
+    font-weight: bold;
+  }
+  h2 {
+    padding-bottom: 1em;
+    border: none;
+    border-bottom: 1px solid @module-docheader-border;
+  }
+  > h2:first-child {
+    border-top: none;
+  }
+  h3 {
+    color: @text-color;
+    padding-top: 0.3em;
+    border: none;
+  }
+  h4 {
+    padding: 0.8em 3em 0.8em 2.5em;
+    font-weight: 500;
+    background-color: @panel-default-heading-bg;
+    span[data-template-property="label"] {
+      vertical-align: top;
+    }
+  }
+  .icon-size-small {
+    line-height: @line-height-base;
+  }
+  .input-group-btn {
+    position: static;
+  }
+  .t3-form-remove-element-button {
+    position: absolute;
+    top: 90px;
+    right: 2.5em;
+  }
+  .t3-form-control-group,
+  .t3-form-add-collection-element {
+    margin: 1.5em 0.5em;
+    clear: both;
+  }
+  .t3-form-inspector-editor-requiredValidator {
+    label {
+      cursor: pointer;
+    }
+  }
+  .t3-form-dropdown-buttons.open {
+    position: static;
+    .dropdown-menu {
+      width: 100%;
+      a {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
 }
 
-.x-dd-drag-ghost label {
-  margin: 0 10px 0 5px;
+//
+// Inspector Collection
+//
+.t3-form-add-collection-element {
+  padding-bottom: 1em;
 }
 
-.x-dd-drag-ghost legend {
-  margin: 0 5px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #000;
-  border: none;
-}
+.t3-form-collection-container {
+  margin-top: -1em;
+  padding: 0.6em;
 
-.x-grid-panel .remove {
-  background-image: url("../Images/remove.gif");
-  width: 15px;
-  height: 16px;
+  .ui-sortable-handle {
+    cursor: auto;
+  }
+  h4 {
+    cursor: move;
+  }
+  .icon-actions-view-table-expand {
+    position: absolute;
+    left: 0.5em;
+  }
+  a.collapsed {
+    .icon-actions-view-table-expand svg {
+      .collapsed-icon-animation ();
+    }
+  }
+  a:not(.collapsed) {
+    .icon-actions-view-table-expand svg {
+      .expanded-icon-animation ();
+    }
+  }
 }
 
-.x-dd-drag-proxy,
-.x-dd-drop-nodrop {
-  background-color: #fff;
-  border-color: #c0c0c0;
+.t3-form-collection-element {
+  position: relative;
+  margin-bottom: 0.5em;
+  border: 1px solid @module-docheader-border;
+  border-top: none;
+  background: @navigation-bg;
+
+  .t3-form-collection-element-remove-button {
+    position: absolute;
+    right: 0.5em;
+    top: 0.6em;
+  }
 }
-.tab-content{
-  fieldset{
 
-    #formwizard{
-      display:inherit;
+//
+// Inspector Property Grid
+//
+.property-grid {
+  .form-control {
+    min-width: initial;
+    min-width: auto;
+    font-size: 0.9em;
+  }
+  .table {
+    th {
+      font-size: 0.9em;
     }
-
-    &.form-section{
-      float: left;
-      min-width: 380px;
-      width: 100%;
-      padding-bottom: 15px;
-
-      &:last-child{
-        margin-bottom: 1em;
+    > tbody > tr {
+      cursor: pointer;
+      background-color: @table-bg;
+      &:last-child {
+        cursor: auto;
       }
-
-      ol{
-        &#formwizard-right{
-          // overwrite inline-style "auto"
-          width:100vw !important;
-          overflow: visible !important;
-          position: relative;
-          float:none;
-          left:5px !important;
-          padding-top:0;
-          padding-left:0;
-          margin-right: 10px;
-          top:30px !important;
-          display: table-cell;
-          height:auto !important;
-          list-style: none;
-          border-top-style: none;
-
-          &.hover{
-            left:0;
-            width:auto;
-          }
+      > td {
+        padding: 0.6em 0.3em;
+        text-align: center;
+        &:first-child {
+          width: 35px;
+        }
+        &:nth-child(2), &:nth-child(3) {
+          width: 75px;
+        }
+        &:nth-child(4) {
+          width: 65px;
+        }
+        &:nth-child(5) {
+          width: 35px;
         }
       }
     }
+    .btn {
+      background-color: @btn-default-bg;
+      border-color: @btn-default-border;
+    }
   }
-}
-
-/* outer wrapper of whole wizard */
-#form-wizard-element {
-  z-index: 1;
-
-  #formwizard-left{
-    display: table-cell;
-    float:left !important;
-    margin-right: -1px;
-
-    .x-tab-panel-body{
-      // overwrite inline-styles with important ;(
-      height:100% !important;
-      overflow:visible !important;
+  .sort-row-field {
+    cursor: move;
+  }
+  .ui-sortable-helper {
+    td {
+      border: none;
     }
   }
+  .ui-sortable-placeholder {
+    height: 45px;
+    border-left: 1px solid @module-docheader-border !important;
+    border-right: 1px solid @module-docheader-border !important;
+    outline-offset: -5px !important;
+  }
 }
 
-/* inner wrapper of whole wizard */
-#formwizard {
-  background-color: #F8F8F8;
-}
-
-/* applied when a element is moved */
-#formwizard.hover-move {
-  cursor: move;
+//
+// Stage
+//
+#t3-form-stage-inner-container {
+  display: inline-block;
+  width: 90%;
+  text-align: left;
+  @media (min-width: @stage-breakpoint) {
+    width: @stage-max-width;
+  }
 }
 
-/* left panel */
-#formwizard-left.x-border-panel {
+#t3-form-stage-container {
+  overflow: auto;
   position: relative;
-  left: auto;
-  top: auto;
-}
-
-/* tabs */
-#formwizard-left .x-tab-panel-header {
-  background-color: transparent;
-}
-
-/* tabs inner */
-#formwizard-left .x-tab-strip {
-  margin-bottom: 0;
-}
-
-#formwizard-left .x-tab-strip-top .x-tab-left {
-  padding-right: 20px;
-}
-
-#formwizard-left .x-tab-strip-top .x-tab-right {
-  padding: 5px 10px 2px;
-  background-color: #EDEDED;
-  border-radius: 0;
-}
-
-#formwizard-left .x-tab-strip-top .x-tab-strip-active .x-tab-right,
-#formwizard-left .x-tab-strip-top .x-tab-strip-active.x-tab-strip-over .x-tab-right{
-  background-color: transparent;
-  border-bottom-color: #F8F8F8;
-}
-
-#formwizard-left .x-tab-strip-top .x-tab-strip-over .x-tab-right {
-  background-color: #E1E1E1;
-}
-
-#formwizard-left li.validation-error .x-tab-left,
-#formwizard-left div.validation-error .x-accordion-hd {
-  margin-right: 14px;
-  background-image: url("../../../../../t3skin/extjs/images/form/exclamation.gif");
-  background-position: right 1px;
-  background-repeat: no-repeat;
-}
-
-/* content below tabs */
-#formwizard-left .x-tab-panel-body-content {
-  min-height: 330px;
-  padding: 10px;
-  background: transparent;
-  border: 1px solid #C0C0C0;
-  border-top-width: 0;
-}
-
-/* info messages (also for drag and drop) */
-#formwizard-left .message-information,
-#fake-form .message-information,
-.x-dd-drag-ghost .message-information {
-  margin: 10px 0 15px 16px;
-  padding: 12px 10px;
-  background-image: none;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-#formwizard-left .message-information p,
-#fake-form .message-information p,
-.x-dd-drag-ghost .message-information {
-  margin: 0;
-}
-
-/* intro info messages */
-#formwizard-left #formwizard-left-elements-intro,
-#formwizard-left #formwizard-left-options-dummy,
-#fake-form .message-information {
-  margin: 0 0 10px;
-}
-
-#formwizard-left .x-tab-panel-body,
-#formwizard-left .x-accordion-hd {
-  background: transparent none;
-  border-width: 0;
-}
-
-/* accordion */
-#formwizard-left .x-panel-accordion {
-  border-bottom: 1px solid #C7C7C7;
-}
-
-#formwizard-left .x-panel-accordion:last-child {
-  border-bottom: medium none;
-}
-
-/* headline of accordion */
-#formwizard-left .x-accordion-hd {
-  padding-left: 0;
-}
-
-/* toggle icon of accordion */
-#formwizard-left .x-accordion-hd .x-tool-toggle {
-  margin: 0;
-  float: left;
-  background-image: url("../Images/module-menu-down.png");
-  background-position: 0 4px;
-}
-
-#formwizard-left .x-panel-collapsed .x-accordion-hd .x-tool-toggle {
-  background-image: url("../Images/module-menu-right.png");
-  background-position: 1px 3px;
-}
-
-#formwizard-left .x-accordion-hd .x-panel-header-text {
-  font-weight: bold;
-}
-
-#formwizard-left .x-accordion-hd .x-panel-body {
-  padding-left: 15px;
-}
-
-/* element inside accordion */
-#formwizard-left .x-form {
-  margin-left: 15px;
-  margin-top: 10px;
-}
-
-#formwizard-left .x-form fieldset {
-  padding: 0;
-  border: none;
-}
-#formwizard-left .x-form fieldset legend {
-  padding: 0;
-  font-size: 12px;
-  color: #222222;
-}
-
-#formwizard-left .x-panel-tbar {
-  margin-top: 10px;
-  padding-left: 15px;
-  padding-bottom: 0;
-  border-width: 0;
-}
-
-#formwizard-left .x-panel-tbar .x-toolbar {
-  padding: 0;
-}
-
-#formwizard-left .x-table-layout {
-  margin-bottom: 10px;
-}
-
-/* generic element like textfield */
-#formwizard-left .formwizard-element {
-  margin-left: 12px;
-  background-color: transparent;
-  background-image: none;
-  border-color: transparent;
-}
-
-#formwizard-left .formwizard-element.x-btn-over {
-  background-color: #D5D5D5;
-  background-image: -moz-linear-gradient(center top , #F6F6F6 10%, #D5D5D5 90%);
-  border-color: #C0C0C0;
-  border-radius: 0;
-}
-
-#formwizard-left .formwizard-element .x-btn-mc {
+  height: 100%;
   text-align: left;
-}
-
-/* form elements in left panel */
-.formwizard-left-elements-basic-button {
-  background-image: url("../Images/ui-button.png");
-}
-
-.formwizard-left-elements-basic-checkbox {
-  background-image: url("../Images/ui-check-box.png");
-}
-
-.formwizard-left-elements-basic-fieldset {
-  background-image: url("../Images/ui-group-box.png");
-}
-
-.formwizard-left-elements-basic-fileupload {
-  background-image: url("../Images/drive-upload.png");
-}
-
-.formwizard-left-elements-basic-hidden {
-  background-image: url("../Images/ui-text-field-hidden.png");
-}
-
-.formwizard-left-elements-basic-password {
-  background-image: url("../Images/ui-text-field-password.png");
-}
-
-.formwizard-left-elements-basic-radio {
-  background-image: url("../Images/ui-radio-button.png");
-}
-
-.formwizard-left-elements-basic-reset {
-  background-image: url("../Images/broom.png");
-}
-
-.formwizard-left-elements-basic-select {
-  background-image: url("../Images/ui-combo-box.png");
-}
-
-.formwizard-left-elements-basic-submit {
-  background-image: url("../Images/ui-button-default.png");
-}
-
-.formwizard-left-elements-basic-textarea {
-  background-image: url("../Images/ui-scroll-pane-text.png");
-}
-
-.formwizard-left-elements-basic-textline {
-  background-image: url("../Images/ui-text-field.png");
-}
-
-.formwizard-left-elements-predefined-checkboxgroup {
-  background-image: url("../Images/ui-check-boxes.png");
-}
-
-.formwizard-left-elements-predefined-email {
-  background-image: url("../Images/mail.png");
-}
-
-.formwizard-left-elements-predefined-name {
-  background-image: url("../Images/user-silhouette.png");
-}
-
-.formwizard-left-elements-predefined-radiogroup {
-  background-image: url("../Images/ui-radio-buttons.png");
-}
-
-.formwizard-left-elements-content-header {
-  background-image: url("../Images/edit-heading.png");
-}
-
-.formwizard-left-elements-content-textblock {
-  background-image: url("../Images/edit-textblock.png");
-}
-
-#formwizard-left .x-form-text {
-  height: 17px;
-}
-
-#formwizard-left .x-btn-text-icon .x-btn-icon-small-left .x-btn-text {
-  color: black;
-}
-
-#formwizard-left .x-small-editor .x-form-text {
-  height: 13px !important;
-}
-
-/* icon in element field for applying entered text */
-#formwizard-left .x-form-field-wrap .x-form-submit-trigger {
-  background-image: url("../Images/submit-trigger.gif");
-}
-
-/* right panel */
-#formwizard-right {
-  min-height: 350px;
-  padding: 30px 0 10px 2px;
-  overflow: visible;
-}
-
-#fake-form {
-  padding: 10px;
-  background-color: tansparent;
-  border: 1px solid #C0C0C0;
-}
-
-#fake-form li {
-  overflow: visible;
-}
-
-/* visible area of element on right panel */
-#fake-form div.overflow-hidden {
-  overflow: hidden;
-
-  input{
-    margin-left: 1px;
+  @media (min-width: @stage-breakpoint) {
+    text-align: center;
   }
-}
 
-/* wrap around all elements on right panel */
-#fake-form .formwizard-element {
-  border: 1px solid transparent;
-  position: relative;
-}
+  ol,
+  ul {
+    list-style: none;
+  }
+  .form-section {
+    border: none;
+  }
+  .panel-heading {
+    button {
+      outline: none;
+    }
+    .paginiation-label {
+      margin-right: 1em;
+    }
+  }
+  .t3-form-new-element-container {
+    height: @stage-abstract-element-height;
+    border: 1px dashed @panel-default-heading-bg;
+    text-align: center;
+    padding-top: @stage-abstract-element-height/2;
+    .btn {
+      transform: translateY(-50%);
+    }
+  }
 
-#fake-form .formwizard-element.hover,
-#fake-form .formwizard-element.hidden.hover {
-  background-color: #F9FCFF;
-  border: 1px solid #C5DBE6;
-}
+  // Abstract
+  &.t3-form-stage-viewmode-abstract {
+    ol,
+    ul {
+      padding-left: @stage-icon-container-width;
+      padding-right: 1em;
+    }
+    .t3-form-page-title {
+      margin: 0 0 0.5em;
+    }
+    #t3-form-stage-inner-container {
+      overflow: hidden;
+    }
+    .t3-form-element-composit {
+      &:not(.t3-form-element-toplevel) {
+        margin-bottom: 1em;
+        padding-bottom: 1px;
+        outline: 1px solid #dddddd;
+        outline-offset: -1px;
+      }
+      .sortable-hover {
+        outline-color: darken(@panel-default-heading-bg, 40%);
+      }
+      .t3-form-form-composit-element-selected {
+        outline-color: @brand-primary;
+      }
+    }
+    .t3-form-element-composit.sortable-hover > .ui-sortable-handle,
+    .ui-sortable-handle:hover {
+      border-color: darken(@panel-default-heading-bg, 40%);
+      .t3-form-icon-container {
+        background-color: darken(@panel-default-heading-bg, 40%);
+        path {
+          fill: #fff;
+        }
+      }
+    }
+    .ui-sortable {
+      fieldset {
+        position: relative;
+        min-height: 130px;
+        padding-top: 5em;
+        legend {
+          position: absolute;
+          top: 1em;
+          display: inline-block;
+          width: 95%;
+        }
+      }
+    }
+    .ui-sortable-handle {
+      overflow: hidden;
+      position: relative;
+      height: @stage-abstract-element-height;
+      margin-bottom: 1em;
+      border: 1px solid @panel-default-heading-bg;
+      background-color: #fff;
+
+      &:hover {
+        .t3-form-validator-list {
+          right: 0;
+          transition: right @stage-validation-transition-time-in;
+        }
+        .t3-form-element-info .element-content {
+          span, div {
+            color: @gray-dark;
+          }
+        }
+        .t3-form-validator-info .t3-form-icon {
+          margin-right: (@stage-validation-list-width - 25);
+          transition: margin @stage-validation-transition-time-in;
+        }
+      }
+      &:has (.ui-sortable-handle:hover) {
+        border-color: transparent;
+      }
+      span {
+        color: @gray-dark;
+      }
+    }
+    .ui-state-disabled {
+      cursor: auto;
+      &:hover {
+        background: none;
+      }
+    }
+    .ui-sortable-placeholder {
+      margin-bottom: 1em;
+    }
+    .t3-form-icon-container {
+      float: left;
+      width: @stage-icon-container-width;
+      height: 100%;
+      padding: 1em;
+      cursor: move;
+      background-color: @panel-default-heading-bg;
+      .t3-form-icon {
+        height: 100%;
+      }
+    }
+    .t3-form-form-element-body {
+      height: 100%;
+    }
+    .t3-form-element-info {
+      position: relative;
+      float: left;
+      width: 55%;
+      height: 100%;
+      padding-left: 1em;
+      .fade-out-gradient-effect-bottom (#fff, 0.8em, 1em);
+      .element-label-container {
+        float: left;
+        position: relative;
+        width: 45%;
+        height: 100%;
+        .element-label {
+          overflow: hidden;
+          position: absolute;
+          top: 50%;
+          width: 100%;
+          text-overflow: ellipsis;
+          transform: translateY(-50%);
+        }
+      }
+      .element-content {
+        padding-top: 1em;
+        white-space: nowrap;
+        font-size: 0.8em;
+        span, div {
+          color: @panel-default-heading-bg;
+        }
+      }
+    }
+    .t3-form-validator-info {
+      position: relative;
+      overflow: hidden;
+      float: right;
+      height: 100%;
+      .t3-form-icon {
+        height: 100%;
+        z-index: 1;
+        margin-left: 1em;
+        transition: margin @stage-validation-transition-time-out;
+        filter: grayscale(100%);
+      }
+      .t3-form-validator-list {
+        .fade-out-gradient-effect-bottom(@panel-default-heading-bg, 1em, 1em);
+        position: absolute;
+        top: 0;
+        right: -@stage-validation-list-width;
+        width: @stage-validation-list-width;
+        height: 100%;
+        padding: 1em 1em 1em (@stage-validation-list-width - 65);
+        font-size: 0.8em;
+        transition: right @stage-validation-transition-time-out;
+        background-color: @panel-default-heading-bg;
+      }
+      .validator-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: @gray-dark;
+      }
+    }
+    #t3-form-stage .t3-form-form-element-selected {
+      position: relative;
+      padding-top: @stage-abstract-element-toolbar-height;
+      height: @stage-abstract-element-height + @stage-abstract-element-toolbar-height;
+      border: none;
+
+      .t3-form-form-element-body {
+        border: 1px solid @brand-primary;
+      }
+      .t3-form-icon-container {
+        background-color: @brand-primary;
+      }
+      .t3-form-element-info .element-content {
+        span, div {
+          color: @gray-dark;
+        }
+      }
+      .t3-form-validator-list {
+        @validation-list-background: lighten(@brand-info, 30%);
+        right: 0;
+        transition: right @stage-validation-transition-time-in;
+        background-color: @validation-list-background;
+        &:before {
+          background-color: @validation-list-background;
+        }
+        &:after {
+          background: linear-gradient(to bottom, rgba(red(@validation-list-background), green(@validation-list-background), blue(@validation-list-background), 0) 0%, @validation-list-background 100%);
+        }
+      }
+      .t3-form-validator-info .t3-form-icon {
+        margin-right: (@stage-validation-list-width - 25);
+        filter: none;
+      }
+      .btn-toolbar-container {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: @stage-abstract-element-toolbar-height;
+        border: 1px solid @brand-primary;
+        background-color: @brand-primary;
+        padding-right: 0.7em;
+        padding-top: 0.4em;
+        &:before, &:after {
+          position: absolute;
+          top: 0;
+          display: block;
+          width: 1px;
+          height: 100%;
+          content: ' ';
+          background-color: @brand-primary;
+        }
+        &:before {
+          left: -1px;
+        }
+        &:after {
+          right: -1px;
+        }
+        .dropdown-menu {
+          min-width: initial;
+          padding-left: 0;
+          padding-right: 0;
+          background-color: darken(@brand-primary, 10%);
+          > li a:hover {
+            background-color: darken(@brand-primary, 5%);
+          }
+        }
+        .caret {
+          color: @brand-primary;
+        }
+        .t3-form-dropdown-buttons {
+          .icon {
+            margin-right: 0.5em;
+          }
+        }
+        .btn-toolbar {
+          float: right;
+          .selected-button-style-primary;
+        }
+      }
+      .meta-label {
+        display: inline-block;
+        top: 1em;
+        left: 5em;
+        bottom: auto;
+        font-size: 0.9em;
+        color: #fff;
+        span {
+          color: #fff;
+        }
+      }
+    }
+    .panel.t3-form-form-stage-selected {
+      border-color: @brand-primary;
+      > .panel-heading {
+        background-color: @brand-primary;
+        border-color: @brand-primary;
+        color: #fff;
+        .selected-button-style-primary;
+      }
+    }
+  }
 
-#fake-form .formwizard-element.active,
-#fake-form .formwizard-element.hidden.active {
-  background-color: #EAF7FF;
-  border: 1px solid #C5DBE6;
-}
+  // Preview
+  &.t3-form-stage-viewmode-preview {
+    input[type="text"], input[type="date"], input[type="password"], textarea, select {
+      color: #000;
+      background-color: lighten(@panel-default-heading-bg, 3%);
+    }
+    ::placeholder {
+      color: @gray;
+      font-style: italic;
+    }
+    input[type="date"] {
+      display: block;
+      width: 100%;
+      height: 32px;
+      padding: 0.6em;
+      font-size: 12px;
+      line-height: @line-height-base;
+      background-image: none;
+      border: 1px solid @module-docheader-border;
+      border-radius: 2px;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    }
+    select[multiple="multiple"] {
+      height: auto;
+      min-height: 32px;
+    }
+    textarea {
+      min-height: 100px;
+    }
+    legend.t3-form-form-element-selected {
+      border-color: @module-docheader-border;
+    }
+    .form-navigation {
+      .btn-group {
+        span, button {
+          display: inline-block;
+          margin-right: 1em;
+        }
+      }
+    }
+    .preview-table-first-col {
+      width: 30%;
+    }
+    .t3-form-element-preview {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+    .t3-form-new-element-container {
+      display: none;
+    }
+    .t3-form-element-toplevel > form > .tooltip {
+        top: 100px !important;
+    }
+  }
 
-#fake-form .formwizard-element.hidden {
-  min-height: 1em;
-  background-color: transparent;
-  border: 1px dotted #C5DBE6;
+  #t3-form-stage {
+    margin-bottom: 0;
+    padding-top: 0.5em;
+    > ol, > ol > li > ol {
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .t3-form-element-toplevel {
+      > .t3-form-form-element-selected {
+        height: auto;
+        padding-top: 0;
+      }
+      > .t3-form-form-element-selected .btn-toolbar-container {
+        display: none;
+      }
+    }
+  }
 }
 
-/* toolbar on each element */
-#fake-form .formwizard-element div.buttongroup {
+.meta-label {
+  z-index: 2;
   position: absolute;
-  right: 0;
-  top: -35px;
+  bottom: 1em;
+  left: 5.5em;
   display: none;
-  z-index: 1;
-  padding: 4px 3px 12px;
-  background-image: url("../Images/tooltip.png");
+  color: @brand-primary;
+  line-height: 1.6;
+  font-size: 0.8em;
+  .ui-sortable-handle:hover > & {
+    display: inline-block;
+  }
 }
 
-#fake-form .formwizard-element.hover > div.buttongroup,
-#fake-form .formwizard-element.active > div.buttongroup {
-  display: block;
+.ui-sortable-placeholder,
+.t3-form-element-composit.ui-sortable-placeholder {
+  background-color: #fff !important;
+  border: none !important;
+  outline: 1px dashed lighten(@brand-success, 30%) !important;
+  outline-offset: -2px !important;
+  visibility: visible !important;
 }
 
-#fake-form .formwizard-element div.buttongroup button {
-  width: 16px;
-  height: 16px;
-  background-color: transparent;
-  border: 0 solid transparent;
+//
+// Icons
+//
+.t3-form-icon {
+  margin-right: 1em;
 }
 
-#fake-form .formwizard-element div.buttongroup span {
-  margin: 0 3px;
+//
+// Validation Errors
+//
+.t3-form-validation-child-has-error {
+  color: @brand-danger;
 }
 
-#fake-form .formwizard-element div.buttongroup span.x-btn-over {
-  background-color: transparent;
-  background-image: none;
+.t3-form-validation-errors {
+  #t3-form-navigation-component &,
+  #t3-form-stage-container & {
+    position: relative;
+    color: @brand-danger;
+    &: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: none;
+    }
+  }
+  #t3-form-navigation-component & {
+    &:hover:before,
+    &.t3-form-form-element-selected:before {
+      left: 2.4em;
+    }
+    &:before {
+      margin-top: 0.2em;
+      color: #fff;
+      font-size: 10px;
+      font-weight: 800;
+      content: "\f12a";
+      background-color: @brand-danger;
+    }
+  }
+  &#t3-form-navigation-component-tree-root:before {
+    left: -2em !important;
+    margin-top: 0.1em;
+  }
+  #t3-form-stage-container &.ui-sortable-handle {
+    border-color: @brand-danger;
+    &:before {
+      left: 4.5em;
+      margin-top: 1.9em;
+      content:  "\f071";
+    }
+    .element-label {
+      padding-left: 1.5em;
+    }
+  }
+  #t3-form-inspector-panels .t3-form-collection-element & {
+    display: inline-block;
+    color: #fff;
+    font-size: 0.8em;
+    font-weight: 700;
+    background-color: @brand-danger;
+    margin-top: 0.5em;
+    padding: 0.1em 0.5em;
+    border-radius: 2px;
+  }
+  #t3-form-inspector-panels &.t3-form-collection-element {
+    border-color: @brand-danger;
+
+    h4 {
+      border-color: @brand-danger;
+      background-color: @brand-danger;
+      color: #fff;
+      path {
+        fill: #fff;
+      }
+    }
+    .t3-form-collection-element-remove-button {
+      background: #fff;
+      border-color: transparent;
+      path {
+        fill: @brand-danger;
+      }
+      &:hover {
+        background: lighten(@brand-danger, 30%);
+      }
+    }
+  }
 }
 
-#fake-form .formwizard-element button.t3-icon-edit-delete {
-  background-image: url('../../../../core/Resources/Public/Icons/T3Icons/actions/actions-delete.svg');
+//
+// Loading Editor Spinner
+//
+.form-editor-loading-spinner {
+  width: 150px;
+  margin: 5em auto 0;
+  text-align: center;
 }
 
-#fake-form .formwizard-element button.t3-icon-document-open {
-  background-image: url('../../../../core/Resources/Public/Icons/T3Icons/actions/actions-open.svg');
+//
+// jQuery nestedSortable
+//
+.ui-sortable-handle {
+  cursor: pointer;
 }
 
-@media only screen and (max-width:615px) {
-  .tab-content fieldset.form-section ol#formwizard-right{
-    left:0 !important;
+//
+// Module
+//
+.module[data-module-name="web_FormFormbuilder_FormEditor"] {
+  overflow: hidden;
+  .module-body, div[data-identifier="moduleWrapper"] {
+    height: 100%;
+  }
+  .module-body {
+    padding-bottom: 0.5em;
+  }
+  .module-docheader-bar-column-left {
+    button {
+      &, &:focus, &:active {
+        outline: 0;
+        outline-color: initial;
+        outline-style: initial;
+        outline-width: 0px;
+      }
+    }
+    .btn-group, .t3-form-element-form-settings-button {
+      margin-left: 25px;
+    }
   }
 }
+
+.t3-form-element-new-page-button {
+  position: absolute;
+  left: 0.5em;
+}
\ No newline at end of file