deleteBoardDialog.scss

TLDR

This file contains the styling code for the DeleteBoardDialog component.

Classes

.DeleteBoardDialog

This class represents the overall styling for the DeleteBoardDialog component.

.dialog

This class represents the styling for the dialog container inside the DeleteBoardDialog component. It applies different styles based on the screen width.

.container

This class represents the styling for the container inside the DeleteBoardDialog component. It defines the flex layout, padding, and max width for the container.

.header

This class represents the styling for the header inside the DeleteBoardDialog container. It applies flex and center alignment to the header.

p.body

This class represents the styling for the body paragraph inside the DeleteBoardDialog container. It applies flex, center alignment, and margin to the body paragraph.

.footer

This class represents the styling for the footer inside the DeleteBoardDialog container. It applies flex, row layout, center alignment, and padding to the footer. It also applies some styles to the first button inside the footer.

.DeleteBoardDialog {
    .dialog {
        @media not screen and (max-width: 975px) {
            max-width: 512px;
            height: max-content;
        }

        > .toolbar {
            padding-bottom: 0;
            justify-content: end;
        }
    }

    .container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: 0 40px;
        max-width: 100%;

        .header {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            margin-top: 0;
            margin-bottom: 0;
        }

        p.body {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            text-align: center;
            margin: 10px 0;
        }

        .footer {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            justify-content: center;
            padding: 20px 0 40px;

            button:first-child {
                margin-right: 10px;
            }
        }
    }
}