luyadev/luya-module-cms

// ==================================================
// Treeview
// ==================================================

.treeview {
    display: block;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    user-select: none;
}

// ==================================================
// Container styles
// ==================================================

.treeview-container {
    display: block;
    margin-top: 20px;
    position: relative;
    width: 100%;

    .treeview-chooser & {
        margin-top: 10px;
    }
}

// ==================================================
// No entry
// ==================================================

.treeview-no-entry {
    padding: 5px 0 5px 30px;

    .drag-hover > &,
    .drag-hover-top > &,
    .drag-hover-middle > &,
    .drag-hover-bottom > & {
        background-color: $green;
    }
}

// ==================================================
// Item lists
// ==================================================

.treeview-items {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;

    // Add indention if child of treeview-item
    .treeview-item > & {
        margin-left: 15px;
    }

    // Hide if collapsed
    .treeview-item-collapsed > & {
        display: none;
    }
}

.treeview-item {
    display: block;
    padding: 0;
    position: relative;

    &:before {
        border-bottom: 1px solid map-get($grays, 400);
        border-left: 1px solid map-get($grays, 400);
        content: '';
        display: block;
        height: 15px;
        left: -4px;
        position: absolute;
        top: 0;
        width: 25px;

        .treeview-chooser & {
            height: 20px;
            top: -5px;
            width: 20px;
        }
    }

    &:after {
        border-left: 1px solid map-get($grays, 400);
        content: '';
        display: block;
        height: 100%;
        left: -4px;
        position: absolute;
        top: 0;

        .treeview-chooser & {
            top: -5px;
        }
    }

    &-lvl1:before,
    &-lvl1:after {
        display: none;
    }

    &:last-child:after {
        display: none
    }

    &-has-children:before {
        top: -1px;
        width: 7px;

        .treeview-chooser & {
            height: 25px;
            top: -10px;
        }
    }
    &-collapsed:before {
        height: 16px;
    }
}

.treeview-label {
    border: solid transparent;
    border-width: 2px 0 2px 0;
    display: block;
    padding: 0 0 0 23px;
    position: relative;
    width: 100%;

    &:not(.treeview-label-container):hover {
        animation: treeviewLinkCursorMove 0s .5s forwards;
    }

    .treeview-chooser & {
        padding-right: 0;
    }

    &-container {
        font-weight: bold;
        letter-spacing: .8px;
    }

    &:after {
        border-radius: 5px;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 5px;

        .treeview-chooser & {
            display: none;
        }
    }

    &-page:after {
        background-color: $green;
    }
    .treeview-item-isoffline > &:after {
        background-color: $red;
    }

    .treeview-item-ishidden > & {
        opacity: .5;
    }

    &.drag-dragging {
        .treeview-icon-collapse {
            display: none;
        }
    }
    &.drag-hover-top {
        border-top-color: $green;
    }
    &.drag-hover-middle {
        background-color: $green;
    }
    &.drag-hover-bottom {
        border-bottom-color: $green;
    }
}

.treeview-icon {
    font-size: 18px;
    height: 18px;
    left: 0;
    line-height: 1;
    position: absolute;
    top: 3px;
    width: 18px;

    &-right {
        left: auto;
        right: 10px;

        & + .treeview-link {
            width: calc(100% - 30px);
        }

        & + .treeview-icon-right {
            right: 30px;

            & + .treeview-link {
                width: calc(100% - 50px);
            }

            & + .treeview-icon-right {
                right: 50px;

                & + .treeview-link {
                    width: calc(100% - 70px);
                }
            }
        }
    }

    &-collapse {
        cursor: pointer;
        font-size: 24px;
        height: 24px;
        top: 0;
        transition: .25s ease-in-out transform;
        width: 24px;

        .treeview-item-collapsed & {
            transform: rotate(-90deg) translateX(-1px);
        }
    }

    .material-icons {
        display: block;
    }
}

.treeview-link {
    border: 1px solid transparent;
    border-radius: 5px;
    border-radius: $border-radius;
    cursor: pointer;
    display: block;
    padding: 0 7px;
    width: calc(100% - 10px);
    word-break: break-word;
    word-wrap: break-word;

    .treeview-item-active > .treeview-label > &,
    &:hover {
        border-color: $card-border-color;

        .treeview-label-container & {
            border-color: transparent;
        }
    }
    .treeview-label:not(.treeview-label-container) &:hover {
        animation: treeviewLinkCursorMove 0s .5s forwards;
    }
}

.treeview-chooser .treeview-label-page .treeview-icon {
    left: 4px;
    top: 2px;
}

@keyframes treeviewLinkCursorMove {
    0% {
        cursor: pointer;
    }
    100% {
        cursor: move;
    }
}