commentsList.scss

TLDR

This Sass file contains styling rules for a comments list component.

Classes

.CommentsList

Defines the styles for the comments list container. It sets the padding to 8 pixels vertically and 0 horizontally, sets the flex-direction to column, and adjusts the width to 100%. Additionally, this class contains nested styles for the comment avatar.

.CommentsList__new

Defines the styles for the new comment section within the comments list. It sets the position to relative, sets the flex-direction to row, aligns items to flex-start, sets the padding to 8 pixels vertically and 0 horizontally, and specifies a minimum height of 48 pixels.

.CommentsList__divider

Defines the styles for a divider within the comments list. It sets the margin-top to 8 pixels.

END

.CommentsList {
    padding: 8px 0;
    display: flex;
    flex-direction: column;

    width: 100%;

    .comment-avatar {
        width: 24px;
        height: 24px;
        border-radius: 100%;
    }

    .CommentsList__new {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 8px 0;
        min-height: 48px;
    }

    .newcomment {
        flex-grow: 1;
        margin: 0 0 0 8px;
        overflow: hidden;

        + button {
            margin: -4px 0 0 8px;
        }
    }
}

.CommentsList__divider {
    margin-top: 8px;
}