rhsChannelBoardItem.scss

TLDR

The rhsChannelBoardItem.scss file contains the styling for the RHSChannelBoardItem component. It defines the appearance of the component, including padding, border, box shadow, cursor, color, font size, and layout.

Classes

.RHSChannelBoardItem

This class defines the overall styling for the RHSChannelBoardItem component. It sets the padding, text alignment, border, box shadow, border radius, cursor, and color.

.date

This class defines the styling for the date within the RHSChannelBoardItem component. It sets the font size and opacity.

.board-info

This class defines the styling for the board information within the RHSChannelBoardItem component. It sets the display as flex and font size.

.icon

This class defines the styling for the icon within the board info section of the RHSChannelBoardItem component. It sets the right margin.

.title

This class defines the styling for the title within the board info section of the RHSChannelBoardItem component. It sets the font size, font weight, flex grow, and handles overflow.

.description

This class defines the styling for the description within the RHSChannelBoardItem component. It sets the margin, font size, line height, and handles text overflow.

.RHSChannelBoardItem {
    padding: 15px;
    text-align: left;
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
    box-shadow: var(--elevation-1);
    border-radius: 5px;
    cursor: pointer;
    color: rgb(var(--center-channel-color-rgb));

    .date {
        font-size: 12px;
        opacity: 0.64;
    }

    .board-info {
        display: flex;
        font-size: 16px;

        .icon {
            margin-right: 10px;
        }

        .title {
            font-size: 14px;
            font-weight: 600;
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .description {
        margin: 4px 0;
        font-size: 12px;
        line-height: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}