viewHeader.scss

TLDR

The viewHeader.scss file contains styles for the view header component in the Demo Projects project. It includes styles for the header itself, search field, and icons.

Classes

ViewHeader

The ViewHeader class represents the view header component. It includes styles for the header layout, such as flexbox properties, border, margin, padding, and color. It also includes responsive styles for mobile devices, including overflow and scrolling behavior. The ViewHeader class contains child elements defined within the div selector, which have margin and white space properties. The groupByLabel selector defines styles for a specific element within the view header. The .IconButton selector defines styles for buttons within the view header, including background, padding, and hover effects. The .viewSelector selector defines styles for a specific component within the view header, including flexbox layout and position properties.

board-search-field

The board-search-field class represents the search field component within the view header. It includes styles for the search input element, such as font size, border radius, padding, height, and border color. It also includes styles for the search icon element, such as position, color, display, and height.

.ViewHeader {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;

    border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
    margin: 16px 0 0;
    padding: 8px 0;
    color: rgba(var(--center-channel-color-rgb), 0.64);
    align-items: center;

    @media (max-width: 768px) {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    > div {
        margin-right: 12px;
        white-space: nowrap;

        &:last-child {
            margin: 0;
        }
    }

    #groupByLabel {
        margin-left: 0.3em;
    }

    .IconButton {
        background: none;
        padding: 0;

        .Icon {
            width: 24px;
            height: 24px;
            margin: 0;
        }

        &:hover {
            background: rgba(var(--center-channel-color-rgb), 0.1);
        }
    }

    .viewSelector {
        display: flex;
        flex-direction: row;
        position: relative;

        .MenuWrapper {
            display: flex;
            align-items: center;
        }
    }
}

.board-search-field {
    position: relative;

    input {
        font-size: 12px;
        border-radius: 4px;
        padding: 0 12px 0 32px;
        height: 32px;
        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
        padding-bottom: 1px;

        &:focus {
            border-color: rgba(var(--button-bg-rgb), 1);
        }
    }

    .board-search-icon {
        position: absolute;
        left: 10px;
        color: rgba(var(--center-channel-color-rgb), 0.64);
        display: flex;
        align-items: center;
        height: 100%;
    }
}