openmct/src/ui/layout/pane.scss

/**************************** BASE - MOBILE AND DESKTOP */
.l-multipane {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;

    &--horizontal,
    > .l-pane {
        flex-flow: row nowrap;
    }

    &--vertical,
    > .l-pane  {
        flex-flow: column nowrap;
    }

    &--vertical {
        height: 100%;
    }
}

.l-pane {
    backface-visibility: hidden;
    display: flex;
    min-width: 0px;
    min-height: 0px;
    opacity: 1;
    pointer-events: inherit;

    &__handle,
    &__label {
        // __handle and __label don't appear in mobile
        display: none;
    }

    &__header {
        display: flex;
        align-items: center;
        @include desktop() { margin-bottom: $interiorMargin; }
    }

    &--reacts {
        // This is the pane that doesn't hold the handle
        // It reacts to other panes that are able to resize
        flex: 1 1 0;
    }

    &--collapsed {
        flex-basis: 0px !important;
        transition: all 350ms ease;

        .l-pane__contents {
            transition: opacity 150ms ease;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;

            > * {
                min-width: 0 !important;
                min-height: 0 !important;
            }
        }
    }

    &[class*="--horizontal"] {
        padding-left: $interiorMargin;
        padding-right: $interiorMargin;
        &.l-pane--collapsed {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    &[class*="--vertical"] {
        padding-top: $interiorMargin;
        padding-bottom: $interiorMargin;
        &.l-pane--collapsed {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }

    /************************ CONTENTS */
    &__contents {
        flex: 1 1 100%;
        opacity: 1;
        pointer-events: inherit;
        transition: opacity 250ms ease 250ms;

        .l-pane__contents {
            // Don't pad all nested __contents
            padding: 0;
        }

        > [class*="__"] + [class*="__"] {
        }
    }

    /************************************************ DESKTOP STYLES */
    body.desktop & {
        &__handle {
            background: $colorSplitterBg;
            display: block;
            position: absolute;
            transition: $transOut;

            &:before {
                // Extended hit area
                content: '';
                display: block;
                position: absolute;
                z-index: -1;
            }

            &:hover {
                background: $colorSplitterHover;
                transition: $transIn;
            }
        }

        &__header {
            font-size: floor(12px * .9);
        }

        &__label {
            // Name of the pane
            @include ellipsize();
            @include userSelectNone();
            color: $splitterBtnLabelColorFg;
            display: block;
            pointer-events: none;
            text-transform: uppercase;
            transform-origin: top left;
            flex: 1 1 auto;
        }

        &--resizing {
            // User is dragging the handle and resizing a pane
            @include userSelectNone();

            + .l-pane {
                @include userSelectNone();
            }

            .l-pane {
                &__handle {
                    background: $colorSplitterHover;
                }
            }
        }

        &[class*="--collapsed"] {
            /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
            $d: nth($splitterBtnD, 1);
            flex-basis: $d;
            min-width: $d;
            min-height: $d;

            > .l-pane__handle {
                display: none;
            }

            .l-pane__header {
                &:hover {
                    color: $splitterCollapsedBtnColorFgHov;
                    .l-pane__label {
                        color: inherit;
                    }
                    .l-pane__collapse-button {
                        background: $splitterCollapsedBtnColorBgHov;
                        color: inherit;
                        transition: $transIn;
                    }
                }
            }

            .l-pane__collapse-button {
                background: $splitterCollapsedBtnColorBg;
                color: $splitterCollapsedBtnColorFg;
            }
        }

        &[class*="--horizontal"] {
            > .l-pane__handle {
                cursor: col-resize;
                top: 0;
                bottom: 0;
                width: $splitterHandleD;

                &:before {
                    // Extended hit area
                    top: 0;
                    right: $splitterHandleHitMargin * -1;
                    bottom: 0;
                    left: $splitterHandleHitMargin * -1;
                }
            }

            .l-pane__collapse-button {
                &:before {
                    content: $glyph-icon-arrow-right-equilateral;
                }
            }

            &[class*="--collapsed"] {
                /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
                [class*="__header"] {
                    @include abs();
                    margin: 0;
                }

                [class*="label"] {
                    position: absolute;
                    transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
                    left: 3px;
                    top: 0;
                    z-index: 1;
                }

                .l-pane__collapse-button {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
                    position: absolute;
                    top: 0; right: 0; bottom: 0; left: 0;
                    height: auto; width: 100%;
                    padding: 0;

                    &:before {
                        position: absolute;
                        top: 5px;
                    }
                }
            }

            /************************** Horizontal Splitter Before */
            // Example: Inspector pane
            &[class*="-before"] {
                margin-left: nth($shellPanePad, 2);
                padding-left: nth($shellPanePad, 2);

                > .l-pane__handle {
                    left: 0;
                    transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
                }

                &[class*="--collapsed"] {
                    .l-pane__collapse-button {
                        transform: scaleX(-1);
                    }
                }
            }

            /************************** Horizontal Splitter After */
            // Example: Tree pane
            &[class*="-after"] {
                margin-right: nth($shellPanePad, 2);
                padding-right: nth($shellPanePad, 2);

                > .l-pane__handle {
                    right: 0;
                    transform: translateX(floor($splitterHandleD / 2));
                }

                &:not([class*="--collapsed"]) {
                    .l-pane__collapse-button {
                        transform: scaleX(-1);
                    }
                }
            }
        }

        &[class*="--vertical"] {
            > .l-pane__handle {
                cursor: row-resize;
                left: 0;
                right: 0;
                height: $splitterHandleD;

                &:before {
                    // Extended hit area
                    left: 0;
                    top: $splitterHandleHitMargin * -1;
                    right: 0;
                    bottom: $splitterHandleHitMargin * -1;
                }
            }

            /************************** Vertical Splitter Before */
            // Pane collapses downward. Used by Elements pool in Inspector
            &[class*="-before"] {
                $m: $interiorMarginLg;
                margin-top: $m;
                padding-top: $m;
                > .l-pane__handle {
                    top: 0;
                    transform: translateY(floor($splitterHandleD / -1));
                }

                .l-pane__collapse-button:before {
                    content: $glyph-icon-arrow-down;
                }

                &.l-pane--collapsed {
                    > .l-pane__collapse-button {
                        transform: scaleY(-1);
                    }
                }
            }

            /************************** Vertical Splitter After */
            // Pane collapses upward. Not sure we'll ever use this...
            &[class*="-after"] {
                > .l-pane__handle {
                    bottom: 0;
                    transform: translateY(floor($splitterHandleD / 1));
                }

                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
                    &:after {
                        transform: scaleY(-1);
                    }
                }
            }
        }
    } // Ends .body.desktop
} // Ends .l-pane