openmct/src/api/overlays/components/overlay-component.scss

@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
    position: absolute;
    top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
    width: $width;
    height: $height;
}

.l-overlay-wrapper {
    // Created by overlayService.js, contains this template.
    // Acts as an anchor for one or more overlays.
    display: contents;
}

.c-overlay {
    @include abs();
    z-index: 70;

    &__blocker {
        display: none; // Mobile-first
    }

    &__outer {
        @include abs();
        background: $overlayColorBg;
        color: $overlayColorFg;
        display: flex;
        flex-direction: column;
        padding: $overlayInnerMargin;
    }

    &__close-button {
        $p: $interiorMargin + 2px;
        color: $overlayColorFg;
        font-size: 1.5em;
        position: absolute;
        top: $p; right: $p;
        z-index: 99;
    }

    &__contents {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        outline: none;
        overflow: auto;
    }

    &__top-bar {
        flex: 0 0 auto;
        flex-direction: column;
        display: flex;

        > * {
            flex: 0 0 auto;
            margin-bottom: $interiorMargin;
        }
    }

    &__dialog-title {
        @include ellipsize();
        font-size: 1.5em;
        line-height: 120%;
    }

    &__contents-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 0; // Chrome 73 overflow bug fix
        overflow: auto;
        padding-right: $interiorMargin; // fend off scroll bar
    }

    &__button-bar {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        margin-top: $interiorMargin;

        > * + * {
            margin-left: $interiorMargin;
        }
    }

    .c-button,
    .c-click-icon {
        filter: $overlayBrightnessAdjust;
    }

    .c-object-label__name {
        filter: $objectLabelNameFilter;
    }
}

body.desktop {
    .c-overlay {
        &__blocker {
            @include abs();
            background: $colorOvrBlocker;
            cursor: pointer;
            display: block;
        }
    }

    // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
    .l-overlay-small,
    .l-overlay-fit {
        .c-overlay__outer {
            border-radius: $overlayCr;
            box-shadow: rgba(black, 0.5) 0 2px 25px;
        }
    }

    .l-overlay-fullscreen {
        // Used by About > Licenses display
        .c-overlay__outer {
            @include overlaySizing($overlayOuterMarginFullscreen);
        }
    }

    .l-overlay-large {
        // Default
        $pad: $interiorMarginLg;
        $tbPad: floor($pad * 0.8);
        $lrPad: $pad;
        .c-overlay {
            &__blocker {
                display: none;
            }

            &__outer {
                @include overlaySizing($overlayOuterMarginFullscreen);
                padding: $tbPad $lrPad;
            }

            &__close-button {
                //top: $interiorMargin;
                //right: $interiorMargin;
            }
        }

        .l-browse-bar {
            margin-right: 50px; // Don't cover close button
            margin-bottom: $interiorMargin;
        }
    }

    .l-overlay-small {
        .c-overlay__outer {
            @include overlaySizing($overlayOuterMarginDialog);
        }
    }

    .t-dialog-sm .l-overlay-small, // Legacy dialog support
    .l-overlay-fit {
        .c-overlay__outer {
            @include overlaySizing(auto);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 20%;
        }
    }
}