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

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web 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 Web 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.
 *****************************************************************************/

@include phoneandtablet {
    // Wrapper of the entire 2 panes, only enacted on
    // phone and tablet. Also for the panes
    .browse-wrapper,
    .pane {
        top: 0 !important; right: 0; bottom: 0; left: 0;
    }

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

    .pane.right-repr {
        //@include test();
        @include slMenuTransitions;
        margin-left: 0 !important;
        #content-area {
            @include slMenuTransitions;
            opacity: 1;
        }
    }

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

    .holder.l-mobile {
        top: $bodyMargin !important;
        right: $bodyMargin !important;
        bottom: $bodyMargin !important;
        left: $bodyMargin !important;
    }

    // When the tree is hidden, these are the
    // classes used for the left menu and the
    // right representation.
    .browse-hidetree {
        @include user-select(none);
        // Sets the left tree menu when the tree
        // is hidden.
        .pane.left.treeview {
            opacity: 0;
            right: 100% !important;
            width: auto !important;
            overflow-y: hidden;
            overflow-x: hidden;
        }
        // Sets the right represenation when
        // the tree is hidden.
        .pane.right-repr {
            left: 0 !important;
        }
    }
    
    .browse-showtree {
        // NOTE: DISABLED SELECTION
        // Selection disabled in both panes
        // causing cut/copy/paste menu to
        // not appear. Should me moved in
        // future to properly work
        @include user-select(none);

        // Sets the left tree menu when the tree is shown.
        .pane.left.treeview {
            @include trans-prop-nice(opacity, .4s);
            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
            opacity: 1;
            display: block !important;
            //width: auto !important; // CH CO
            right: auto !important;
            width: $proporMenuWithView !important;
        }
        // Sets the right representation when the tree is shown.
        .pane.right-repr {
            left: $proporMenuWithView !important;
            //width: auto !important;

            //left: 0 !important;
            //transform: translateX($proporMenuWithView);
        }
    }

    .mobile-menu-icon {
        font-size: 110%;
        position: absolute;
        top: $bodyMargin + 2;
        left: $bodyMargin;
    }

    .object-browse-bar {
        //@include test();
        left: 30px !important;
        .context-available {
            opacity: 1 !important;
        }
        .view-switcher {
            margin-right: 0 !important;
            .name {
                // 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;
    }
}

@include phonePortrait {
    .browse-showtree {
        .pane.left.treeview {
            width: $proporMenuOnly !important;
        }
        .pane.right-repr {
            left: 0 !important;
            transform: translateX($proporMenuOnly);
            #content-area {
                opacity: 0;
            }
        }
    }
}

@include desktop {
    .desktop-hide {
        display: none;
    }
}