viewTitle.scss

TLDR

The viewTitle.scss file is a stylesheet file that contains CSS code for styling a view title component. It defines styles for various elements within the component such as div containers, description text, add button, icons, and editable content.

Classes

.ViewTitle

This class defines the styles for the main container of the view title component. It sets the flexbox layout, minimum width and height, and other properties.

.description

This class styles the description text within the view title component. It sets a maximum height and enables overflow scrolling if the text exceeds the available space.

.add-buttons

This class specifies the styles for the add buttons section within the view title component. It sets the flexbox layout, color, width, and position. It also defines styles for the add icons and buttons within this section.

.IconSelector

This class styles an element that serves as a container for icon selector components. It adds right margin to create space between the icon selector and other elements.

.Editable

This class defines styles for editable content within the view title component. It sets margin, flex-grow, font size, and line height properties.

.Button

This class styles a button element used within the view title component. It sets the display property to none by default.

.add-visible:hover

This class specifies the styles for the add buttons section when hovered over. It makes the .Button elements within the section visible by setting their display property to flex.

.ViewTitle {
    > div {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        min-width: 300px;
        min-height: 28px;
    }

    .description {
        max-height: 80px;
        overflow: auto;
    }

    > .add-buttons {
        flex-direction: row;
        color: rgba(var(--center-channel-color-rgb), 0.4);
        width: 100%;
        align-items: flex-start;
        position: absolute;
        top: -28px;

        .Icon:last-child {
            margin-left: 6px;
        }

        .Icon:first-child {
            margin-right: 6px;
        }

        .Button {
            display: none;
            line-height: 1;
        }

        &.add-visible:hover {
            .Button {
                display: flex;
            }
        }
    }

    .IconSelector {
        margin-right: 8px;
    }

    .Editable {
        margin-bottom: 0;
        flex-grow: 1;
        font-size: 25px;
        line-height: 30px;
    }

    >.description>* {
        flex-grow: 1;
    }
}