openmct/platform/commonUI/general/res/sass/mobile/_layout.scss

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

body.mobile {
    .pane.left.treeview {
        background-color: $colorMobilePaneLeft;
    }

    .pane.right.items {
        @include slMenuTransitions;
        left: 0 !important;
        margin-left: 0 !important;
        .holder-object-and-inspector {
            @include slMenuTransitions;
            left: $bodyMargin;
            right: $bodyMargin;
            opacity: 1;
        }
    }

    .create-button-holder {
        // Hide the create button by default in mobile;
        // This can be overridden by the examples/mobile bundle
        display: none;
    }

    .holder.holder-treeview-elements {
        right: $bodyMargin !important;
    }

    // Assume landscape layout or either orientation for tablet
    // Phone portrait overrides below via media query
    .pane-tree-hidden {
        // Sets the left tree menu when the tree is hidden.
        .pane.left.treeview {
            @include trans-prop-nice(opacity, 150ms);
            opacity: 0 !important;
        }
        .pane.right.items {
            left: 0 !important;
        }
    }
    
    .pane-tree-showing {
        // NOTE: DISABLED SELECTION
        // Selection disabled in both panes
        // causing cut/copy/paste menu to
        // not appear. Should me moved in
        // future to properly work

        // Sets the left tree menu when the tree is shown.
        .pane.left.treeview {
            @include trans-prop-nice(opacity, 250ms, $delay: 250ms);
            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
            right: auto !important;
            width: $proporMenuWithView !important;
        }
        // Sets the right representation when the tree is shown.
        .pane.right.items {
            transform: translateX($proporMenuWithView);
        }
    }

    .toggle-tree {
        color: $colorKey !important;
        font-size: 110%;
        position: absolute;
        top: $bodyMargin + 2;
        left: $bodyMargin;
        @extend .icon-menu-hamburger;
    }

    .object-browse-bar {
        &.t-primary {
            margin-left: 30px;

            .title-label {
                // Prevent inline editing of the object title in the main view in mobile
                pointer-events: none;
            }
        }
        .context-available {
            font-size: 0.9em;
            opacity: 1 !important;
        }
        .view-switcher {
            .title-label {
                // Hide the name in mobile
                display: none;
            }
        }
    }

    .tree-holder {
        overflow-x: hidden !important;
    }

    .mobile-disable-select {
        @include user-select(none);
    }

    // Hides objects on phone and tablet
    .mobile-hide,
    .mobile-hide-important {
        display: none !important;
    }

    .mobile-back-hide {
        pointer-events: none;
        @include trans-prop-nice(opacity, .4s);
        opacity: 0;
    }
    .mobile-back-unhide {
        pointer-events: all;
        @include trans-prop-nice(opacity, .4s);
        opacity: 1;
    }
}

body.phone.portrait {
    .pane-tree-showing {
        .pane.left.treeview {
            width: $proporMenuOnly !important;
        }
        .pane.right.items {
            left: 0 !important;
            transform: translateX($proporMenuOnly);
            .holder-object-and-inspector {
                opacity: 0;
            }
        }
    }
}

body.desktop {
    .desktop-hide {
        display: none;
    }
}