openmct/platform/commonUI/general/res/sass/user-environ/_layout.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, 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.
 *****************************************************************************/

.browse-area,
.edit-area,
.editor {
    position: absolute;
}

.editor {
    border-radius: $basicCr * 1.5;
}

.contents {
    $myM: 0;
    box-sizing: border-box;
    position: absolute;
    top: $myM;
    right: $myM;
    bottom: $myM;
    left: $myM;
    &.nomargin {
        $myM: 0px;
        right: $myM;
        bottom: $myM;
        left: $myM;
    }
}

.user-environ {
    .browse-area,
    .editor {
        top: 0; left: 0; right: 0; bottom: $ueFooterH;
    }

    .browse-area,
    .edit-area {
        > .contents {
            left: 0;
            right: 0;
        }
    }

    .edit-area {
        $tbH: $btnToolbarH + $interiorMargin;
        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
        left: $bodyMargin;
        right: $bodyMargin;
        bottom: $bodyMargin + $ueFooterH;
        .tool-bar {
            bottom: auto;
            height: $tbH;
            line-height: $btnToolbarH;
        }
        .object-holder.work-area {
            top: $tbH + $interiorMargin * 2;
            overflow: auto;
        }
    }

    .ue-bottom-bar {
        @include absPosDefault(0);// New status bar design
        top: auto;
        height: $ueFooterH;
        line-height: $ueFooterH - ($interiorMargin * 2);
        background: $colorStatusBarBg;
        color: lighten($colorBodyBg, 30%);
        font-size: .7rem;
        .status-holder {
            box-sizing: border-box;
            @include absPosDefault($interiorMargin);
            @include ellipsize();
            right: 120px;
            text-transform: uppercase;
            z-index: 1;
        }
        .app-logo {
            background-position: right center;
            box-sizing: border-box;
            @include absPosDefault($interiorMargin - 1);
            cursor: pointer;
            left: auto; right: $interiorMargin;
            width: $ueAppLogoW;
            z-index: 2;
        }
    }
}

.edit-mode {
    // Old edit mode
    .split-layout {
        .split-pane-component.pane.right {
            width: 15%;
            .pane.bottom {
                min-height: 50px;
                height: 30%;
            }
        }
    }
}

.pane {
    box-sizing: border-box;
    position: absolute;

    .pane-header {
        text-transform: uppercase;
        height: $ueTopBarH;
        line-height: $ueTopBarH;
    }

    .t-object.primary-pane {
        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
        z-index: 4;
    }

    .mini-tab-icon.toggle-pane {
        z-index: 5;
    }
}

body.desktop .pane .mini-tab-icon.toggle-pane {
    $hi: splitterHandleInset($splitterD, $splitterHandleD);
    $paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
    top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;

    &.toggle-tree.anchor-left.collapsed,
    &.toggle-inspect.anchor-right:not(.collapsed) {
        @extend .icon-arrow-right;
        border-bottom-right-radius: $controlCr;
        border-top-right-radius: $controlCr;
    }

    &.toggle-tree.anchor-left:not(.collapsed),
    &.toggle-inspect.anchor-right.collapsed {
        @extend .icon-arrow-left;
        border-bottom-left-radius: $controlCr;
        border-top-left-radius: $controlCr;
    }

    &.toggle-tree.anchor-left {
        left: 0;
        @include transform(translateX(-1 * $paneExpandedOffset));
        &.collapsed {
            @include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
        }
    }

    &.toggle-inspect.anchor-right {
        right: 0;
        @include transform(translateX($paneExpandedOffset));
        &.flush-right {
            @include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2))));
        }
        &.collapsed {
            @include transform(translateX($ueCollapsedPaneEdgeM));
        }
    }
}

.split-layout {
    // Specific elements margins
    .holder.holder-treeview-elements {
        top: $bodyMargin;
        right: 0;
        bottom: $interiorMargin;
        left: $bodyMargin;
        .create-button-holder {
            &.s-status-editing {
                display: none;
                & + .search-holder .search-bar {
                    // .search-holder is adjacent sibling to .create-button-holder
                    // Add right margin when create button is hidden, to make room for the collapse pane 'x' button
                    margin-right: $interiorMarginLg * 2;
                }
            }
        }
    }

    .holder.holder-object-and-inspector {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        .holder-object {
            top: $bodyMargin;
            bottom: $interiorMargin;
            // Clip element that have min-widths
            overflow: hidden;
        }
        .holder-inspector {
            top: $bodyMargin;
            bottom: $interiorMargin;
            left: $bodyMargin + $interiorMargin;
            right: $bodyMargin;
        }
        .holder-elements {
            top: 0;
            bottom: $interiorMargin;
            left: $bodyMargin;
            right: $bodyMargin;
        }
    }
}

.object-holder {
    @include absPosDefault(0, auto);
    top: $ueTopBarH + $interiorMarginLg;
}

.l-object-wrapper-inner {
    @include trans-prop-nice-resize(0.25s);
}

.object-browse-bar .s-button,
.top-bar .buttons-main .s-button,
.top-bar .s-menu-button,
.tool-bar .s-button,
.tool-bar .s-menu-button {
    $h: $btnToolbarH;
    height: $h;
    line-height: $h;
    vertical-align: top;
}

.object-browse-bar {
    .l-object-action-buttons {
        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
    }
}

/***************************************************** OBJECT BROWSE BAR */
.object-browse-bar {
    box-sizing: border-box;
    height: $ueTopBarH;
    line-height: $ueTopBarH;
    white-space: nowrap;

    .left {
        .l-back {
            margin-right: $interiorMarginLg;
            &.s-status-editing { display: none; }
        }
    }
}

// When the tree is hidden, these are the classes used for the left menu and the right representation.
.pane-tree-hidden {
    // Sets the left tree menu when the tree is hidden.
    .tree-holder,
    .splitter-treeview,
    .holder-treeview-elements {
        opacity: 0;
        pointer-events: none;
    }
}

.pane-tree-showing {
    // Sets the left tree menu when the tree is shown.
    .tree-holder,
    .splitter-treeview {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
        opacity: 1;
    }

    .holder-treeview-elements {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
    }
}

.pane-inspect-showing {
    .l-object-and-inspector {
        .l-inspect,
        .splitter-inspect {
            @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
            opacity: 1;
        }
    }
}

.pane-inspect-hidden {
    .l-object-and-inspector {
        .l-inspect,
        .splitter-inspect {
            opacity: 0;
            pointer-events: none;
        }
    }
}

body.desktop {
    .holder-all {
        min-width: $ueDesktopMinW;
    }
    .split-layout {
        .split-pane-component.pane {
            &.treeview.left {
                min-width: $ueBrowseLeftPaneTreeMinW;
                max-width: $ueBrowseLeftPaneTreeMaxW;
                width: $ueBrowseLeftPaneTreeW;
            }
            &.t-inspect.right {
                min-width: $ueBrowseRightPaneInspectMinW;
                max-width: $ueBrowseRightPaneInspectMaxW;
                width: $ueBrowseRightPaneInspectW;
                z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
            }
        }
    }
    .pane.treeview.left .tree-holder {
        padding-right: $interiorMargin;
    }
    .pane-tree-hidden {
        .pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
    }
    .pane-inspect-hidden .l-object-and-inspector {
        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
    }
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
    .pane.primary-pane > .object-browse-bar {
        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
    }
}

.s-status-editing {
    .l-object-wrapper {
        $t2Dur: $browseToEditAnimMs;
        $t1Dur: $t2Dur / 2;
        $pulseDur: $editBorderPulseMs;
        $bC0: rgba($colorEditAreaFg, 0.5);
        $bC100: rgba($colorEditAreaFg, 1);

        background-color: $colorEditAreaBg;
        border-radius: $controlCr;
        border: 1px dotted $bC0;

        // Transition 1
        @include keyframes(wrapperIn) {
            from { border: 0px dotted transparent; padding: 0; }
            to { border: 1px dotted $bC0; padding: 5px; }
        }

        // Do last
        @include keyframes(pulseNew) {
            from  { border-color: $bC0; }
            to { border-color: $bC100; }
        }

        @include animation-name(wrapperIn, pulseNew);
        @include animation-duration($t1Dur, $pulseDur);
        @include animation-delay(0s, $t1Dur + $t2Dur);
        @include animation-direction(normal, alternate);
        @include animation-fill-mode(both, none);
        @include animation-iteration-count(1, infinite);
        @include animation-timing-function(ease-in-out, linear);


        .l-edit-controls {
            height: 0;
            border-bottom: 1px solid $colorInteriorBorder;
            // Transition 2: reveal edit controls
            @include keyframes(editIn) {
                from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; }
                to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; }
            }
            @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur);
            .tool-bar {
                right: $interiorMargin;
            }
        }
    }
}