createCategory.scss

TLDR

This file contains the styling code for the "Create Category" feature in the project.

Classes

CreateCategoryModal

This class represents the modal component for creating a category. It sets the main color for the modal and contains styles for its child components.

.wrapper

This class represents the wrapper element inside the modal. It contains styles for the dialog element.

.dialog

This class represents the dialog element inside the wrapper. It sets the width and height for the dialog.

CreateCategory

This class represents the main component for creating a category. It sets the display, flex-direction, padding, and gap for its child components.

.inputWrapper

This class represents the wrapper element for the category name input. It sets the position, height, and padding for its child components.

.inputWrapper__close-wrapper

This class represents the wrapper element for the close button inside the input wrapper. It sets the position, height, top, right, display, align-items, and padding for the close button.

.CloseCircle

This class represents the close button inside the input wrapper. It sets the cursor, font-size, color, and hover color for the close button.

.categoryNameInput

This class represents the category name input element. It sets the width for the input.

input

This class represents the input element for the category name. It sets the height, font-size, border-radius, border, background, color, padding, flex, transition, and focus styles for the input.

.footer

This class represents the footer element at the bottom of the modal. It sets the display and flex-direction for its child components.

.createCategoryActions

This class represents the actions for creating a category. It sets the display, flex-direction, margin-top, and gap for the actions.

.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;
        }
    }
}