openmct/src/ui/layout/layout.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
/******************************* SHELL */
.l-shell {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;

    &__drawer {
        background: $drawerBg;
        display: flex;
        flex-direction: column;
        height: 0;
        min-height: 0;
        max-height: 15%;
        overflow: hidden;
        transition: $transIn;

        &.is-expanded {
            height: max-content;
        }
    }

    &__pane-tree {
        width: 40%;

        [class*="collapse-button"] {
            // For mobile, collapse button becomes menu icon
            body.mobile & {
                @include cClickIconButton();
                color: $colorKey !important;
                position: absolute;
                right: -18px;
                top: 0;
                transform: translateX(100%);
                width: $mobileMenuIconD;
                z-index: 2;

                &:before {
                    content: $glyph-icon-menu-hamburger;
                }
            }
        }
    }

    &__pane-tree,
    &__pane-inspector,
    &__pane-main {
        .l-pane__contents {
            display: flex;
            flex-flow: column nowrap;
            overflow-x: hidden;
        }
    }

    &__pane-tree,
    &__pane-main {
        .l-pane__contents {
            > * {
                flex: 0 0 auto;

                + * {
                    margin-top: $interiorMarginLg;
                }
            }
        }
    }

    &__pane-main {
        .l-pane__header { display: none; }
    }

    body.mobile & {
        &__pane-main,
        &__pane-tree {
            padding: $interiorMarginLg;
        }

        &__pane-tree {
            background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));

            &[class*="--collapsed"] {
                [class*="collapse-button"] {
                    right: -8px;
                }
            }
        }
    }

    body.phone.portrait & {
        &__pane-tree {
            width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});

            + .l-pane {
                // Hide pane-main when this pane is expanded
                opacity: 0;
                pointer-events: none;
            }

            &[class*="--collapsed"] + .l-pane {
                // Show pane-main when tree is collapsed
                opacity: 1;
                pointer-events: inherit;
                transition: opacity 250ms ease 250ms;
            }
        }
    }

    &__head,
    &__pane-inspector {
        body.mobile & {
            display: none;
        }
    }

    &__head,
    &__status {
        flex: 0 0 auto;
        display: flex;
    }

    /******************************* HEAD */
    &__main-view-browse-bar {
        flex: 0 0 auto;
    }

    body.mobile & .l-shell__main-view-browse-bar {
        margin-left: $mobileMenuIconD; // Make room for the hamburger!
        .c-button[class*='__actions__edit'] {
            display: none; // Hide the main view edit button when in mobile context
        }
    }

    &__head {
        align-items: stretch;
        background: $colorHeadBg;
        justify-content: space-between;
        padding: $interiorMargin $interiorMargin + 2;

        > [class*="__"] + [class*="__"] {
            margin-left: $interiorMargin;
        }

        [class*='__head__collapse-button'] {
            align-self: start;
            flex: 0 0 auto;
            margin-top: 6px;

            &:before {
                content: $glyph-icon-arrow-down;
                font-size: 1.1em;
            }
        }

        &-section {
            // Subdivides elements across the head
            display: flex;
            flex: 0 1 auto;
            padding: 0 $interiorMargin;
        }

        &--expanded {
            .c-indicator__label {
                transition: none !important;
            }

            [class*='__head__collapse-button'] {
                &:before {
                    transform: rotate(180deg);
                }
            }
        }
    }

    &__controls {
        $brdr: 1px solid $colorInteriorBorder;
        border-right: $brdr;
        border-left: $brdr;
        align-items: start;
    }

    &__create-button,
    &__app-logo {
        flex: 0 0 auto;
    }

    &__create-button { margin-right: $interiorMarginLg; }

    &__indicators {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        [class*='indicator-clock'] { order: 90; }

        .c-indicator .label {
            font-size: 0.9em;
        }
    }

    /******************************* MAIN AREA */
    &__main-container {
        // Wrapper for main views
        flex: 1 1 auto !important;
        height: 0; // Chrome 73 overflow bug fix
        overflow: auto;
    }

    &__tree {
        // Tree component within __pane-tree
        flex: 1 1 auto !important;
    }

    &__time-conductor {
        border-top: 1px solid $colorInteriorBorder;
        padding-top: $interiorMargin;
    }

    &__main {
        > .l-pane {
            padding: nth($shellPanePad, 1) 0;
        }
    }

    body.desktop & {
        &__main {
            // Top and bottom padding in container that holds tree, __pane-main and Inspector
            padding: nth($shellPanePad, 1) 0;
            min-height: 0;

            > .l-pane {
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        &__pane-tree,
        &__pane-inspector {
            max-width: 70%;
        }

        &__pane-tree {
            width: 300px;
            padding-left: nth($shellPanePad, 2);
        }

        &__pane-inspector {
            width: 200px;
            padding-right: nth($shellPanePad, 2);
        }
    }

    &__toolbar {
        $p: $interiorMargin;
        background: $editUIBaseColor;
        border-radius: $basicCr;
        height: $p + 24px; // Need to standardize the height
        padding: $p;
    }
}

.is-editing {
    .l-shell__main-container {
        $m: 3px;
        box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
        margin-left: $m;
        margin-right: $m;

        &[s-selected] {
            // Provide a clearer selection context articulation for the main edit area
            box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
        }
    }
}

/************************** BROWSE BAR */
.l-browse-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    [class*="__"] {
        // Removes extraneous horizontal white space
        display: inline-flex;
    }

    &__start,
    &__end,
    &__actions {
        display: flex;
        align-items: center;
    }

    &__actions,
    &__end {
        > * + * {
            margin-left: $interiorMarginSm;
        }
    }

    &__start {
        flex: 1 1 auto;
        margin-right: $interiorMargin;
        min-width: 0; // Forces interior to compress when pushed on
    }

    &__end {
        flex: 0 0 auto;
    }

    &__nav-to-parent-button,
    &__disclosure-button {
        flex: 0 0 auto;
    }

    &__nav-to-parent-button {
        // This is an icon-button
        $p: $interiorMargin;
        margin-right: $interiorMargin;
        padding-left: $p;
        padding-right: $p;

        .is-editing & {
            display: none;
        }
    }

    &__object-name--w,
    &__object-name {
        flex: 0 1 auto;
    }

    &__object-name--w {
        @include headerFont(1.4em);
        min-width: 0;

        &:before {
            // Icon
            margin-right: $interiorMargin;
        }
    }

    &__object-details {
        opacity: 0.5;
    }
}

/************************** DRAWER */
.c-drawer {
    /* New sliding overlay or push element to contain things
    * Designed for mobile and compact desktop scenarios
    * Variations:
    * --overlays: position absolute, overlays neighboring elements
    * --push: position relative, pushs/collapses neighboring elements
    * --align-left, align-top: opens from left or top respectively
    * &.is-expanded: applied when expanded.
     */

    transition: $transOut;
    min-height: 0;
    min-width: 0;
    overflow: hidden;

    &:not(.is-expanded) {
        // When collapsed, hide internal elements
        > * {
            display: none;
        }
    }

    &.c-drawer--align-left {
        height: 100%;
    }

    &.c-drawer--align-top {
        // Need anything here?
    }

    &.c-drawer--overlays {
        position: absolute;
        z-index: 3;

        &.is-expanded {
            // Height and width must be set per usage
            &.c-drawer--align-left {
                box-shadow: rgba(black, 0.7) 3px 0 20px;
            }

            &.c-drawer--align-top {
                box-shadow: rgba(black, 0.7) 0 3px 20px;
            }
        }
    }

    &.c-drawer--push {
        position: relative;

        &.is-expanded {
            // Height and width must be set per usage
            &.c-drawer--align-left {
                box-shadow: rgba(black, 0.2) 3px 0 20px;
                margin-right: $interiorMarginLg;
            }

            &.c-drawer--align-top {
                box-shadow: rgba(black, 0.2) 0 3px 20px;
                margin-bottom: $interiorMarginLg; // Not sure this is desired here
            }
        }
    }
}