_element_tree.scss

//
// Variables
//
$navigation-text: #000;
$navigation-bg: $gray-lighter;
$navigation-border: rgb(195, 195, 195);

//
// Trees Variables
//
$tree-indentation: 16px;
$tree-intendation-space: 6px;
$tree-line-height: 21px;
$tree-border: #666;
$tree-bg: white;
$tree-control-size: 20px;
$tree-control-icon-size: 12px;

//
// Tree
//
.list-tree,
.list-tree ul {
    margin-left: ceil(($tree-indentation / 2));
    padding: 0;
    list-style: none;
    position: relative;

    &:before {
        content: "";
        display: block;
        width: 0;
        position: absolute;
        top: 0;
        bottom: ceil($tree-line-height / 2);
        left: 0;
        margin-bottom: -2px;
        border-left: 1px dotted $tree-border;
    }
}

.list-tree {
    li {
        &.active {
            > .list-tree-group {
                &:before {
                    content: '';
                    position: absolute;
                    right: -$tree-intendation-space;
                    left: -$tree-intendation-space;
                    top: -1px;
                    bottom: -1px;
                    display: block;
                    border: 1px solid rgba(0, 0, 0, 0.25);
                    background-color: rgba(255, 255, 255, 0.75);
                    border-radius: 2px;
                }
            }
        }

        &:before {
            content: '';
            display: block;
            width: ceil($tree-indentation - $tree-intendation-space - 1px);
            height: 0;
            border-top: 1px dotted $tree-border;
            margin-top: -2px;
            position: absolute;
            top: ceil($tree-line-height / 2) + 1;
            left: 2px;
        }

        &:last-child:before {
            background: $tree-bg;
            height: auto;
            left: 0;
            width: ceil($tree-indentation - $tree-intendation-space) + 1;
            bottom: 0;
        }

        margin: 0;
        padding-left: $tree-indentation;
        line-height: $tree-line-height;
        position: relative;

        .icon {
            margin-right: 2px;
        }
    }
}

.list-tree-group {
    position: relative;
    display: block;
    white-space: nowrap;

    > span {
        position: relative;
    }
}

.list-tree-value {
    font-weight: bold;
}

.list-tree-icon {
    top: -2px;
}

.list-tree-show {
    position: relative;
    display: inline-block;
    width: $tree-control-size;
    text-align: center;
    margin-left: -2px;
}

.list-tree-control {
    @include user-select(none);

    position: relative;
    display: block;
    float: left;
    margin-top: ceil($tree-line-height / 2) - ceil($tree-control-size / 2);
    margin-left: -($tree-indentation + ceil($tree-control-size / 2));
    text-align: center;
    line-height: $tree-control-size;
    width: $tree-control-size;
    height: $tree-control-size;

    &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: ceil(-($tree-control-icon-size / 2));
        margin-left: ceil(-($tree-control-icon-size / 2));
        width: $tree-control-icon-size;
        height: $tree-control-icon-size;
    }

    &:active,
    &:focus,
    &:hover {
        outline: none;
        text-decoration: none;
    }

    > .fa {
        display: inline-block;
        text-align: center;
        cursor: pointer;

        &:before {
            width: $tree-control-icon-size;
            height: $tree-control-icon-size;
            background-color: $tree-bg;
            display: block;
        }
    }

    &.list-tree-control-open > .fa:before {
        content: "\f0d7";
    }

    &.list-tree-control-closed > .fa:before {
        content: "\f0da";
    }
}

.list-tree-root {
    margin-left: 0;

    &:before {
        display: none;
    }

    > li {
        padding-left: $tree-control-size;

        &:before {
            display: none;
        }

        &.list-tree-path {
            margin-left: -$tree-control-size;
        }

        > .list-tree-group {
            > .list-tree-control {
                margin-left: -$tree-control-size;

                &:before {
                    background-color: transparent;
                }
            }
        }
    }
}

.list-tree-root-clean {
    > li {
        padding-left: 0;
    }
}

//
// Tree Variations
//
[id=imp-exp-mod] {
    .list-tree li:last-child:before,
    .list-tree-control > .fa:before {
        background-color: #f1f1f1;
    }
}

[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
    .list-tree li:last-child:before,
    .list-tree-control > .fa:before {
        background-color: #f5f5f5;
    }

    .module-body {
        padding-left: 10px;
        padding-right: 10px;
    }
}

[id=ext-lowlevel-Modules-Configuration-index-php] {
    .active {
        > .list-tree-group {
            display: inline-block;
            color: $brand-danger;
        }
    }
}

//
// Treeline Icons
//
.treeline-icon {
    position: relative;
    display: inline-block;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-right: 2px;
    padding: 0;
    height: 31px;
    width: 16px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;

    &:after,
    &:before {
        position: absolute;
        content: '';
        left: 50%;
    }

    &:before {
        top: 0;
        height: 100%;
        width: 2px;
        margin-left: -1px;
        border-left: 1px dotted $tree-border;
    }

    &:after {
        border-top: 1px dotted $tree-border;
        height: 2px;
        width: 100%;
        top: 50%;
        margin-top: -1px;
    }
}

.treeline-icon-jointop:before {
    top: 50%;
}

.treeline-icon-joinbottom:before {
    top: -50%;
}

.treeline-icon-line:after {
    display: none;
}

.treeline-icon-blank {
    display: none;
}

.treeline-icon-clear {
    &:before,
    &:after {
        display: none;
    }
}

#typo3-pagetree #typo3-docheader div.buttonsright {
    margin-right: 3px;
}

body#typo3-alt-db-navframe-php div.c-notice {
    border: 1px solid black;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 5px;
    width: 95%;
}

//
// AJAX Page Tree
//
body#typo3-pagetree {
    margin: 0;
    padding: 0;
}

#typo3-pagetree #typo3-inner-docbody {
    padding: 10px 0;
}

span.dragIcon {
    display: inline-block;
    height: 16px;
}

#dragIcon {
    position: absolute;
    visibility: hidden;
    z-index: 20;
    filter: alpha(opacity=50);
    opacity: 0.5;
    white-space: nowrap;
}

//
// Tree
//
#typo3-pagetree-deletionDropZone .x-panel-body {
    background-position: right;
    background-repeat: repeat-y;
}

[id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
[id=typo3-pagetree-treeContainer] {
    background-color: $navigation-bg;
    height: 100%;
}

[id=typo3-pagetree-tree] {
    height: 100%;

    .x-panel-body {
        height: 100% !important;
    }
}

[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
    padding-left: 10px;
    padding-right: 10px;
}

.x-layout-split {
    width: 1px;
    background-color: $navigation-border;
}

//
// Info Pagetree Overview
[id=InfoModuleController] a.t3js-contextmenutrigger {
    margin-right: 4px;
}