main

mattermost/focalboard

Last updated at: 28/12/2023 01:37

boardSwitcherDialog.scss

TLDR

This file, boardSwitcherDialog.scss, contains the styling for the boards switcher dialog component. It sets the display, gap, and overflow properties for the .blockSearchResult class and its child elements.

Classes

.blockSearchResult

The .blockSearchResult class sets the styling for the boards switcher dialog component. It specifies a flex display, sets the gap between child elements to 12 pixels, sets the overflow behavior to hidden, and sets the flex direction to row. The width is set to 100%.

.CompassIcon

The .CompassIcon class sets the styling for a Compass icon within the boards switcher dialog component. It sets the font size to 18 pixels and the color to a semi-transparent version of the center channel color.

span

The span selector sets the styling for the inline text within the boards switcher dialog component. It sets the display property to inline-block, sets the height to 100%, sets the overflow behavior to hidden, sets the text overflow to ellipsis, and sets the white space behavior to nowrap.

.resultTitle

The .resultTitle class sets the styling for the title of a search result within the boards switcher dialog component. It sets the maximum width to 60%.

.teamTitle

The .teamTitle class sets the styling for the title of the team within the boards switcher dialog component. It positions the title to the right, resets the margin on the left side, and sets the color to a semi-transparent version of the center channel color.

.blockSearchResult {
    display: flex;
    gap: 12px;
    overflow: hidden;
    flex-direction: row;
    width: 100%;

    .CompassIcon {
        font-size: 18px;
        color: rgba(var(--center-channel-color-rgb), 0.56);
    }

    span {
        display: inline-block;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .resultTitle {
        max-width: 60%;
    }

    .teamTitle {
        right: auto;
        margin-left: auto;
        color: rgba(var(--center-channel-color-rgb), 0.56);
    }
}