modal.scss

TLDR

The modal.scss file contains styles for the modal component. The styles include position, background color, padding, border, and box shadow. It also includes media queries to adjust the position and display of the modal on different screen sizes. Additionally, it contains styles for the toolbar within the modal.

@import '../styles/z-index';

.Modal {
    @include z-index(modal);
    position: absolute;
    top: 25px;
    left: -240px;
    background-color: rgb(var(--center-channel-bg-rgb));
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
    box-shadow: var(--elevation-4);

    @media screen and (max-width: 430px) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        min-width: 0;
    }

    @media not screen and (max-width: 430px) {
        &.top {
            top: auto;
            bottom: 25px;
            left: 25px;
        }

        &.bottom-right {
            left: 0;
        }
    }

    .hideOnWidescreen {
        /* Hide controls (e.g. close button) on larger screens */
        @media not screen and (max-width: 430px) {
            display: none !important;
        }
    }

    > .toolbar {
        display: flex;
        flex-direction: row;
        height: 30px;
        margin-bottom: 10px;
    }
}