main

mattermost/focalboard

Last updated at: 29/12/2023 09:49

confirmationDialogBox.scss

TLDR

This file contains SCSS code for styling a confirmation dialog box component.

Classes

.confirmation-dialog-box

This class represents the container for the confirmation dialog box. It includes styling for the dialog box itself and a toolbar.

.box-area

This class represents the area inside the confirmation dialog box where the content is displayed. It includes styling for centering the content and setting padding.

.text-heading5

This class represents the heading text inside the confirmation dialog box. It includes styling for margin.

.sub-text

This class represents the subheading text inside the confirmation dialog box. It includes styling for text alignment.

.action-buttons

This class represents the container for the action buttons inside the confirmation dialog box. It includes styling for displaying the buttons in a row, setting the gap between the buttons, and setting the number of columns in the grid layout.

(END)

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

.confirmation-dialog-box {
    .dialog {
        @include z-index(confirmation-dialog-box);

        > .toolbar {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}

.box-area {
    display: grid;
    place-items: center;
    padding: 48px 40px;


    .text-heading5 {
        margin: 0 0 8px;
    }

    .sub-text {
        text-align: center;
    }
}

.action-buttons {
    display: flex;
    grid-gap: 12px;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 32px;
}