dialog.scss

TLDR

The dialog.scss file is a SCSS file that contains styles for a dialog component. It includes styles for different elements such as the dialog backdrop, dialog title, dialog subtitle, and toolbar.

Classes

.Dialog

This class represents the main dialog component. It includes styles for positioning the dialog and setting its size based on modifier classes such as .size--small. It also contains styles for the dialog title, subtitle, backdrop, and toolbar.

Nested Classes within .Dialog

.dialog-title

This class styles the title of the dialog. It sets the margin, font weight, and font size.

.dialog-subtitle

This class styles the subtitle of the dialog. It sets the font size and margin top.

.backdrop

This class styles the backdrop element of the dialog. It sets the position, width, height, and background color.

.wrapper

This class styles the wrapper element of the dialog. It sets the width, height, and centers its content.

.dialog

This class styles the main content area of the dialog. It sets the position, background color, box shadow, border radius, padding, and overflow properties.

Nested Classes within .dialog

.hideOnWidescreen

This class is used to hide elements within the dialog on larger screens.

.banner

This class styles the banner element within the dialog. It sets the background color, text alignment, padding, and color. There is an additional style for the error variant.

.IconButton

This class styles the icon buttons within the dialog. It sets the color and provides hover and active states.

.toolbar

This class styles the toolbar within the dialog. It sets the display, padding, and alignment properties.

.toolbar--right

This class styles the right-aligned variant of the toolbar within the dialog. It sets the display, gap, align-items, height, and margin properties.

.cardToolbar

This class styles a separate element called cardToolbar. It sets the width and margin properties.

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

.Dialog {
    &.dialog-back {
        @include z-index(dialog-back);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &.size--small {
        .dialog {
            max-width: 512px;
            width: 100%;
            height: max-content;
        }
    }

    .dialog-title {
        margin: 0;
        font-weight: 600;
        font-size: 22px;
        line-height: 28px;
    }

    .dialog-subtitle {
        font-size: 12px;
        margin-top: 8px;
    }

    .backdrop {
        @include z-index(dialog-backdrop);
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(var(--center-channel-color-rgb), 0.5);
    }

    .wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dialog {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: rgb(var(--center-channel-bg-rgb));
        box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
            rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
        border-radius: var(--modal-rad);
        padding: 0;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overflow-y: auto;

        @media not screen and (max-width: 975px) {
            margin: 72px auto;
            max-width: 975px;
            height: calc(100% - 144px);

            .hideOnWidescreen {
                /* Hide elements on larger screens */
                display: none !important;
            }
        }

        > * {
            flex-shrink: 0;
        }

        > .banner {
            background-color: rgba(230, 220, 192, 0.9);
            text-align: center;
            padding: 10px;
            color: #222;
        }

        > .banner.error {
            background-color: rgba(230, 192, 192, 0.9);
        }

        .IconButton {
            color: rgba(var(--center-channel-color-rgb), 0.56);

            &:hover {
                color: rgba(var(--center-channel-color-rgb), 0.72);
                background-color: rgba(var(--center-channel-color-rgb), 0.08);
            }

            &:active {
                background-color: rgba(var(--button-bg-rgb), 0.08);
                color: rgba(var(--button-bg-rgb), 1);
            }
        }

        .toolbar {
            display: flex;
            flex-direction: row;
            padding: 24px 32px;
            justify-content: space-between;
            align-items: flex-start;
        }

        .toolbar--right {
            display: flex;
            gap: 8px;
            align-items: center;
            height: 28px;
            margin-right: -14px;
        }
    }

    .cardToolbar {
        width: 100%;
        margin: 0 16px;
    }
}