rhsChannelBoards.scss

TLDR

This file contains the styling rules for the RHSChannelBoards component.

Classes

.RHSChannelBoards

This class represents the container for the RHSChannelBoards component. It sets padding, height, and display properties, and defines a gap between the child elements. When the component is empty, additional styles are applied to make it scrollable and center the content.

.rhs-boards-header

This class represents the header section of the RHSChannelBoards component. It sets display and alignment properties to center the content.

>h2

This selector represents the h2 element directly under the RHSChannelBoards component. It sets properties to center the text and allow it to wrap.

.empty-paragraph

This class represents a paragraph element within the RHSChannelBoards component when it is empty. It sets the text alignment to center.

.boards-screenshots

This class represents a container for the screenshots of the boards within the RHSChannelBoards component. It sets the top and bottom margin.

.linked-boards

This class represents a section of linked boards within the RHSChannelBoards component. It sets the font size and weight, and allows it to grow to fill the available space.

.rhs-boards-list

This class represents the list of boards within the RHSChannelBoards component. It sets the overflow property to allow scrolling, and defines a gap between the list items. It also makes the list flex and fills the available space.

.Button

This class represents a button element within the RHSChannelBoards component. It sets the width and alignment properties, and limits the span text to a single line with ellipsis overflow.

.RHSChannelBoards {
    padding: 16px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;

    &.empty {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: auto;
        padding: 60px;

        @media screen and (min-height: 800px) {
            justify-content: center;
        }
    }

    .rhs-boards-header {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    >h2 {
        text-align: center;
        word-wrap: anywhere;
    }

    .empty-paragraph {
        text-align: center;
    }

    .boards-screenshots {
        margin: 24px 0;
    }

    .linked-boards {
        flex-grow: 1;
        font-size: 16px;
        font-weight: 600;
    }

    .rhs-boards-list {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
    }

    .Button {
        width: auto;
        align-self: center;
        max-width: 100%;

        span {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}