openmct/platform/commonUI/general/res/sass/overlay/_overlay.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.
 *****************************************************************************/

.overlay {
    &.delayEntry100ms {
        @include keyframes(fadeInFromNone) {
            0% {
                display: none;
                opacity: 0;
            }
            100% {
                display: block;
                opacity: 1;
            }
        }
        @include animation-delay($delayEntryMs);
        @include animation(fadeInFromNone $durEntryMs ease-in);
    }
    .blocker {
        background: $colorOvrBlocker;
        z-index: 100;
    }
    .close {
        $d: $interiorMargin;
        opacity: 0.3;
        position: absolute;
        top: $d;
        right: $d;
        bottom: auto;
        left: auto;
        &:hover {
            opacity: 0.6;
        }
    }

    > .abs.outer-holder {
        z-index: 102;
        > .abs.inner-holder {
            $m: $overlayMargin;
            top: $m;
            right: $m;
            bottom: $m;
            left: $m;
        }
    }

    .bottom-bar {
        text-align: right;
        .s-button {
            font-size: 95%;
            height: $ovrFooterH;
            line-height: $ovrFooterH;
            margin-bottom: $interiorMarginSm;
            padding: 0 $interiorMargin * 3;
            &:not(:last-child) {
                margin-right: $interiorMargin;
            }
        }
    }

    // Dialog boxes, size constrained and centered in desktop/tablet
    &.l-dialog {
        .s-button {
            &:not(.major) {
                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
            }
        }

        > .abs.outer-holder {
            @include desktopandtablet {
                $max: 1280px;
                @include transform(translateX(-50%) translateY(-50%));
                border-radius: $overlayCr;
                top: 50%; right: auto; bottom: auto; left: 50%;
                width: 70%; height: 70%;
                min-width: 520px;
                max-width: $max; max-height: $max;
            }
            @include phone {
                overflow: auto;

                .editor .form .form-row.l-flex-row  {
                    // Display elements in a columnar view
                    @include flex-direction(column);
                    > .flex-elem {
                        &:not(:first-child) {
                            margin-top: $interiorMargin;
                        }
                        &.label {
                            width: 100%;
                        }
                        &.controls {
                            overflow: auto;
                        }
                    }

                    &.validates > .label:before {
                        position: relative;
                        right: auto;
                        line-height: inherit;
                        margin-right: $interiorMargin;
                    }
                }
            }

            @include containerSubtle($colorOvrBg, $colorOvrFg);
        }

        .title {
            @include ellipsize();
            font-size: 1.2em;
            line-height: 120%;
            margin-bottom: $interiorMargin;
        }

        .hint, .field-hints {
            color: $colorFieldHintOverlay !important;
        }

        .abs.top-bar {
            height: $ovrTopBarH;
        }

        .abs.bottom-bar {
            top: auto;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: visible;
            height: $ovrFooterH;
        }

        .abs.editor,
        .abs.message-body {
            top: $ovrTopBarH + $interiorMarginLg;
            bottom: $ovrFooterH + $interiorMarginLg;
            left: 0;
            right: 0;
            overflow: auto;
            padding-right: $interiorMargin;
            padding-bottom: $interiorMargin;
            .field.l-input-med {
                input[type='text'] {
                    width: 100%;
                }
            }
        }

        .l-progress-bar {
            $h: $progressBarHOverlay;
            display: block;
            height: $h;
            line-height: $h;
            margin: .5em 0;
            width: 100%;
        }

        .select {
            box-shadow: $shdwBtnsOverlay;
        }
    }

    // Large view overlays for mobile and desktop
    &.l-large-view {
        > .abs.outer-holder {
            @include keyframes(overlayIn) {
                from {
                    opacity: 0;
                    transform: scale(0, 0);
                }
                to {
                    opacity: 1;
                    transform: scale(1.0, 1.0);
                }
            }

            @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
            background: $colorBodyBg;
            z-index: 101;

            .abs.inner-holder {
                opacity: 0;
                @include keyframes(contentsIn) {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
            }

            // Hide View Large button
            .t-btn-view-large {
                display: none;
            }

            // But show View Large button when it's nested inside a Layout
            .t-frame-inner .t-frame-inner .t-btn-view-large { display: block; }
        }
    }
    // When multiple Large Views are visible, hide the blocker for all but the first
    & + .l-large-view {
        .blocker {
            display: none;
        }
    }
}

body.desktop {
    .overlay {
        > .abs.outer-holder {
            border-radius: $overlayCr;
        }

        &.l-large-view {
            > .abs.outer-holder {
                width: 90%;
                height: 90%;
                top: 5%;
                left: 5%;
                @include boxShdwLarge();
            }
        }
    }

    .t-dialog-sm .overlay > .outer-holder {
        // Used for blocker and in-progress dialogs, modal alerts, etc.
        $h: 225px;
        max-height: $h;
        height: $h;
    }
}