@charset "utf-8";

//
// Variables
//

// /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
$stage-max-width: 800px;
$stage-abstract-element-height: 62px;
$stage-abstract-element-toolbar-height: 35px;
$stage-icon-container-width: 40px;
$stage-validation-list-width: 100px;
$stage-breakpoint-max: $screen-lg - 1;
$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
//
@mixin 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%);
    }
}

@mixin 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;
        }
    }
}

@mixin collapsed-icon-animation() {
    transform: rotate(0deg);
    transition: transform 0.2s;
}

@mixin expanded-icon-animation() {
    transform: rotate(90deg);
    transition: transform 0.2s;
}

//
// General / Module
//

body {
    overflow-y: scroll;
}

//
// X-Component
//
.t3-form-x-component {
    position: absolute;
    top: 0;
    height: 100%;
    line-height: normal;
    background: $navigation-bg;

    a {
        text-decoration: none;
    }

    ol,
    ul:not(.dropdown-menu) {
        list-style: none;
        padding: 0;
    }

    .ui-sortable-placeholder {
        outline-offset: -1px !important;
    }
}

.t3-form-x-component-inner-wrapper {
    position: relative;
    padding: 1.5em;
}

//
// Structure Tree
//
#t3-form-navigation-component {
    overflow: hidden;
    left: 0;
}

#t3-form-structure-panel {
    overflow: auto;
    padding-top: $module-docheader-height;
    height: 100%;

    .icon {
        z-index: 1;
    }

    #t3-form-navigation-component-tree-root-container,
    .tree li > div {
        border: 1px solid transparent;
        cursor: pointer;
    }

    .tree {
        .svg-wrapper {
            svg {
                overflow: visible;
                position: relative;
                top: -0.8em;
                left: 0.6em;
            }

            path {
                fill: none;
                shape-rendering: crispEdges;
                stroke: rgb(221, 221, 221);
                stroke-width: 1;
            }
        }

        li {
            white-space: nowrap;

            .icon-actions-pagetree-collapse {
                margin-right: 0.3em;

                img {
                    @include expanded-icon-animation();
                }
            }

            &.mjs-nestedSortable-collapsed {
                > ol {
                    display: none;
                }

                .icon-actions-pagetree-collapse img {
                    @include collapsed-icon-animation();
                }
            }

            small {
                padding-left: 0.5em;
                font-size: 80%;
            }
        }

        .t3-form-icon {
            margin-right: 0.5em;
            margin-left: 0.5em;
        }

        .t3-form-element-has-children > div .t3-form-icon {
            margin-left: 0.1em;
        }

        .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;
    }

    .ui-sortable-helper {
        > div:hover,
        .t3-form-form-element-selected,
        #t3-form-navigation-component-tree-root-container:hover,
        .t3-form-root-element-selected {
            background-color: transparent !important;
            border-color: transparent !important;
        }

        svg {
            opacity: 0;
        }
    }
}

//
// 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;
}

#t3-form-inspector-panels-container {
    overflow: hidden;
    right: 0;
    padding-top: $module-docheader-height;
}

#t3-form-inspector-panels {
    overflow: auto;
    height: 100%;
}

#t3-form-inspector {
    padding: 1em 0.5em;

    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: 25px;
        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;
            }
        }
    }
}

//
// Inspector Collection
//
.t3-form-add-collection-element {
    padding-bottom: 1em;
}

.t3-form-collection-container {
    margin-top: -1em;
    padding: 0.6em;

    .ui-sortable-handle {
        cursor: auto;
    }

    h4 {
        cursor: move;
    }

    .icon-actions-view-table-expand {
        position: absolute;
        left: 0.5em;
    }

    .collapse.in {
        overflow: visible;
    }

    a.collapsed {
        .icon-actions-view-table-expand svg {
            @include collapsed-icon-animation();
        }
    }

    a:not(.collapsed) {
        .icon-actions-view-table-expand svg {
            @include expanded-icon-animation();
        }
    }
}

.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;
    }
}

//
// Inspector Property Grid
//
.property-grid {
    .form-control {
        min-width: initial;
        min-width: auto;
        font-size: 0.9em;
    }

    .table {
        th {
            font-size: 0.9em;
        }

        > tbody > tr {
            cursor: pointer;
            background-color: $table-bg;

            &:last-child {
                cursor: 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;
        }
    }

    .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;
    }
}

//
// Stage
//
#t3-form-stage-inner-container {
    position: relative;
    left: -5px;
    display: inline-block;
    width: 90%;
    max-width: $stage-max-width;
    text-align: left;
}

#t3-form-stage-container {
    overflow: auto;
    position: relative;
    height: 100%;
    text-align: center;

    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%);
        }
    }

    // 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 #ddd;
                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;
                }
            }

            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;

            @include 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 {
                @include 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;

                    @include 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;

                @include selected-button-style-primary();
            }
        }
    }

    // Preview
    &.t3-form-stage-viewmode-preview {
        #t3-form-stage-inner-container {
            @media (max-width: $stage-breakpoint-max) {
                width: 600px;
            }
        }

        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 0.15s, box-shadow ease-in-out 0.15s;
        }

        select[multiple="multiple"] {
            height: auto;
            min-height: 32px;
        }

        textarea {
            min-height: 100px;
        }

        .container {
            width: auto;
        }

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

    #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;
            }
        }
    }
}

.meta-label {
    z-index: 2;
    position: absolute;
    bottom: 1em;
    left: 5.5em;
    display: none;
    color: $brand-primary;
    line-height: 1.6;
    font-size: 0.8em;

    .ui-sortable-handle:hover > & {
        display: inline-block;
    }
}

.ui-sortable-placeholder,
.t3-form-element-composit.ui-sortable-placeholder {
    z-index: 1;
    position: relative;
    background-color: #fff !important;
    border: none !important;
    outline: 1px dashed lighten($brand-success, 30%) !important;
    outline-offset: -2px !important;
    visibility: visible !important;
}

.ui-sortable-placeholder.mjs-nestedSortable-error {
    outline: 1px dashed #c83c3c !important;
}

//
// Icons
//
.t3-form-icon {
    margin-right: 1em;
}

//
// Validation Errors
//
.t3-form-validation-child-has-error {
    color: $brand-danger;
}

.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%);
            }
        }
    }
}

//
// Loading Editor Spinner
//
.form-editor-loading-spinner {
    width: 150px;
    margin: 5em auto 0;
    text-align: center;
}

//
// jQuery nestedSortable
//
.ui-sortable-handle {
    cursor: pointer;
}

//
// 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: 0;
            }
        }

        .btn-group,
        .t3-form-element-form-settings-button {
            margin-left: 25px;
        }
    }
}

.t3-form-element-new-page-button {
    position: absolute;
    left: 0.5em;
}
