viewLimitDialog.scss

TLDR

This file is a SCSS stylesheet for the viewLimitDialog component. It contains styling information for the dialog component and its child elements.

Classes

ViewLimitDialog

This class represents the main wrapper element for the viewLimitDialog component. It sets the color, width, height, border-radius, box-shadow, and some other styling properties for the dialog.

wrapper

This class represents the wrapper element inside the viewLimitDialog component. It contains the dialog and is used to apply additional styling.

dialog

This class represents the dialog element inside the viewLimitDialog component. It sets the color, width, height, text-align, and border-radius properties.

toolbar

This class represents the toolbar element inside the viewLimitDialog component. It sets the flex-direction and padding-bottom properties.

ViewLimitDialog_body

This class represents the body element inside the viewLimitDialog component. It sets the padding property.

text-heading1

This class represents the heading element inside the viewLimitDialog component. It sets the font-weight, word-break, white-space, and display properties. It also defines styling for anchor elements inside the heading.

ViewLimitDialog_footer

This class represents the footer element inside the viewLimitDialog component. It sets the display, padding, and border-top properties.

primaryAction

This class represents the primary action button element inside the viewLimitDialog component. It sets the margin-left property.

cancel

This class represents the cancel button element inside the viewLimitDialog component. It sets the padding property and defines styling for hover state.

.ViewLimitDialog > .wrapper > .dialog {
    color: rgb(var(--center-channel-color-rgb));
    width: 512px;
    height: max-content;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 20px 32px rgba(var(--center-channel-color-rgb), 0.1);

    .toolbar {
        flex-direction: row-reverse;
        padding-bottom: 0;
    }

    .ViewLimitDialog_body {
        padding: 0 32px 10px;
    }

    img {
        width: 217px;
    }

    .text-heading1 {
        font-weight: 400;
        word-break: break-word;
        white-space: normal;
        display: flex;
        flex-direction: column;

        a {
            color: rgb(var(--link-color-rgb));
        }
    }

    .ViewLimitDialog_footer {
        display: flex;
        padding: 24px 32px;
        border-top: solid 1px rgba(var(--center-channel-color-rgb), 0.16);

        .primaryAction {
            margin-left: auto;
        }

        .cancel {
            padding: 0;

            &:hover {
                background-color: unset;
            }
        }
    }
}