createCategory.scss

TLDR

This file contains the SCSS styles for the "CreateCategoryModal" component. It defines the styles for the modal and its child elements.

Classes

CreateCategoryModal

This class defines the styles for the "CreateCategoryModal" component. It sets the color to the rgba value of the "center-channel-color-rgb" variable and contains styles for the wrapper, dialog, inputWrapper, categoryNameInput, footer, and createCategoryActions.

wrapper

This class defines the styles for the wrapper element inside the "CreateCategoryModal" component. It contains styles for the dialog element.

dialog

This class defines the styles for the dialog element inside the wrapper of the "CreateCategoryModal" component. It sets the width to 600px and the height to auto.

CreateCategory

This class defines the styles for the "CreateCategory" element inside the "CreateCategoryModal" component. It sets the display to flex, flex-direction to column, padding to 0 32px 24px, and gap to 24px.

inputWrapper

This class defines the styles for the inputWrapper element inside the "CreateCategory" element of the "CreateCategoryModal" component. It sets the position to relative and contains styles for the inputWrapper__close-wrapper element.

inputWrapper__close-wrapper

This class defines the styles for the close wrapper element inside the inputWrapper of the "CreateCategoryModal" component. It sets the position to absolute, height to 100%, top to 0, right to 0, and contains styles for the CloseCircle element.

CloseCircle

This class defines the styles for the CloseCircle element inside the inputWrapper__close-wrapper of the "CreateCategoryModal" component. It sets the cursor to pointer, font-size to 18px, color to rgba value of the "center-channel-color-rgb" variable with an opacity of 0.64, and a hover style.

categoryNameInput

This class defines the styles for the categoryNameInput element inside the "CreateCategoryModal" component. It sets the width to 100%.

input

This class defines the styles for the input elements inside the "CreateCategoryModal" component. It sets the height to 48px, font-size to 16px, border-radius to 4px, border to 1px solid rgba value of the "center-channel-color-rgb" variable with an opacity of 0.16, background to the value of the "center-channel-bg" variable, color to the value of the "center-channel-color" variable, padding to 0 16px, flex to 1, transition to the border property, and a focus style.

footer

This class defines the styles for the footer element inside the "CreateCategoryModal" component. It sets the display to flex, flex-direction to row, and justify-content to flex-end.

createCategoryActions

This class defines the styles for the createCategoryActions element inside the "CreateCategoryModal" component. It sets the display to flex, flex-direction to row, justify-content to flex-end, margin-top to auto, and gap to 12px.

.CreateCategoryModal {
    color: rgba(var(--center-channel-color-rgb));

    .wrapper {
        .dialog {
            width: 600px;
            height: auto;
        }
    }

    .CreateCategory {
        display: flex;
        flex-direction: column;
        padding: 0 32px 24px;
        gap: 24px;

        .inputWrapper {
            position: relative;

            .inputWrapper__close-wrapper {
                position: absolute;
                height: 100%;
                top: 0;
                right: 0;
                display: flex;
                align-items: center;
                padding-right: 12px;
            }

            .CloseCircle {
                cursor: pointer;
                font-size: 18px;
                color: rgba(var(--center-channel-color-rgb), 0.64);

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

        .categoryNameInput {
            width: 100%;
        }

        input {
            height: 48px;
            font-size: 16px;
            border-radius: 4px;
            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
            background: var(--center-channel-bg);
            color: var(--center-channel-color);
            padding: 0 16px;
            flex: 1;
            transition: border 0.15s ease-in;

            &:focus {
                border-color: var(--button-bg);
                box-shadow: inset 0 0 0 1px var(--button-bg);
            }
        }

        .footer {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }

        .createCategoryActions {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: auto;
            gap: 12px;
        }
    }
}