openmct/src/ui/layout/mct-tree.scss

.c-tree-and-search {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: auto;

    > * + * { margin-top: $interiorMargin; }

    &__search {
        flex: 0 0 auto;
    }

    &__no-results {
        font-style: italic;
        opacity: 0.6;
    }

    &__tree {
        flex: 1 1 auto;
        height: 0; // Chrome 73 overflow bug fix
        padding-right: $interiorMarginSm;
    }

    .c-tree {
        flex: 1 1 auto;
        overflow: hidden;
        transition: all;

        .c-tree__item-h {
            width: 100%;
        }

        &__scrollable {
            overflow: auto;
            padding-right: $interiorMargin;
        }

        &__item--empty {
            // Styling for empty tree items
            // Indent should allow for c-nav view-control width and icon spacing
            font-style: italic;
            padding: $interiorMarginSm * 2 1px;
            opacity: 0.7;
            pointer-events: none;

            &:before {
                content: '';
                display: inline-block;
                width: $treeNavArrowD + $interiorMarginLg;
            }
        }
    }
}

.c-tree,
.c-list {
    @include userSelectNone();
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: $interiorMarginSm;

    .icon-arrow-nav-to-parent {
        visibility: hidden;

        &.is-enabled {
            visibility: visible;
        }
    }

    li {
        position: relative;
        &[class*="__item-h"] {
            display: block;
            width: 100%;
        }

        + li {
            margin-top: 1px;
        }
    }

    &__item {
        border-radius: $controlCr;
        display: flex;
        align-items: center;
        cursor: pointer;
        line-height: 110%;
        padding: $interiorMarginSm $interiorMargin;
        transition: background 150ms ease;

        &__type-icon {
            color: $colorItemTreeIcon;
        }

        @include hover {
            background: $colorItemTreeHoverBg;
            filter: $filterHov;
        }

        &.is-navigated-object,
        &.is-selected {
            background: $colorItemTreeSelectedBg;

            [class*="__name"] {
                color: $colorItemTreeSelectedFg;
            }
        }

        &.is-context-clicked {
            box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
        }

        .icon-arrow-nav-to-parent {
            visibility: hidden;

            &.is-enabled {
                visibility: visible;
            }
        }
    }
}

.c-tree {
    .c-tree {
        margin-left: 15px;
    }

    &__item {
        [class*="view-control"] {
            padding: 2px 10px;
        }

        > * + * {
            margin-left: ceil($interiorMarginSm / 2);
        }

        @include hover {
            background: $colorItemTreeHoverBg;
        }

        // Object labels in trees
        &__label {
            flex: 1 1 auto;
        }

        &.is-alias {
            // Object is an alias to an original.
            [class*='__type-icon'] {
                @include isAlias();
            }
        }

        body.mobile & {
            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
            height: $mobileTreeItemH;
            margin-bottom: $interiorMarginSm;
            [class*="view-control"] {
                width: ceil($mobileTreeItemH * 0.5);
            }
        }

        &.is-navigated-object,
        &.is-selected {
            background: $colorItemTreeSelectedBg;

            [class*="__label"],
            [class*="__name"] {
                color: $colorItemTreeSelectedFg;
            }

            [class*="__type-icon"]:before {
                color: $colorItemTreeSelectedIcon;
            }
        }
    }

    &__item__label {
        @include desktop {
            &:hover {
                filter: $filterHov;
            }
        }
    }
}

.is-editing .is-navigated-object {
    a[class*="__item__label"] {
        opacity: 0.4;

        [class*="__name"] {
            font-style: italic;
        }
    }
}

.c-tree {
    &__item {
       body.mobile & {
            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
            height: $mobileTreeItemH;
            margin-bottom: $interiorMarginSm;
            [class*="view-control"] {
                width: ceil($mobileTreeItemH * 0.5);
            }
        }
    }

    .c-tree {
        margin-left: $treeItemIndent;
    }
}

.c-list {
    padding-right: $interiorMargin;

    &__item {
        &__name {
            $p: $interiorMarginSm;
            @include ellipsize();
            padding-bottom: $p;
            padding-top: $p;
        }
    }
}

.c-nav {
    $dimension: $treeNavArrowD;

    &__up, &__down {
        flex: 0 0 auto;
        height: $dimension;
        width: $dimension;
        visibility: hidden;
        position: relative;
        text-align: center;

        &.is-enabled {
            visibility: visible;
        }

        &:before {
            // Nav arrow
            $dimension: 9px;
            $width: 3px;
            border: solid $colorItemTreeVC;
            border-width: 0 $width $width 0;
            content: '';
            display: block;
            position: absolute;
            left: 50%; top: 50%;
            height: $dimension;
            width: $dimension;
        }

        @include desktop {
            &:hover:before {
                border-color: $colorItemTreeHoverFg;
            }
        }
    }

    &__up:before {
        transform: translate(-30%, -50%) rotate(135deg);
    }

    &__down:before {
        transform: translate(-70%, -50%) rotate(-45deg);
    }
}

.c-selector {
    .c-tree-and-search__tree.c-tree {
        border: 1px solid $colorInteriorBorder;
        border-radius: $controlCr;
        padding: $interiorMargin;
        overflow: auto;
    }
}

// TRANSITIONS
.children-enter-active {
    &.down {
        animation: animSlideLeft 500ms;
    }

    &.up {
        animation: animSlideRight 500ms;
    }
}

@keyframes animSlideLeft {
    0% {opactiy: 0; transform: translateX(100%);}
    10% {opacity: 1;}
    100% {transform: translateX(0);}
}

@keyframes animSlideRight {
    0% {opactiy: 0; transform: translateX(-100%);}
    10% {opacity: 1;}
    100% {transform: translateX(0);}
}