personSelector.scss

TLDR

This file contains styles written in SCSS for the Person component.

Classes

.Person

Defines the styles for the Person component. It sets the display as flex, aligns items in the center, adds a border radius, and enables flex wrap and gap. Additionally, it applies styles for the readonly state, which includes overflowing text with ellipsis and removing the minimum width.

.Person-item

Defines the styles for each item within the Person component. It sets the display as flex, aligns items in the center, and applies styles for an image within each item.

.react-select__menu

Defines the styles for the dropdown menu of a select component. It sets the background color, box shadow, border, and border radius.

.react-select__single-value

Defines the styles for the selected value within a single-select component. It removes margin, positions the value at the top, and limits the maximum width.

.react-select__value-container--is-multi

Defines the styles for the value container within a multi-select component. It sets the gap between values, displays them as inline flex, and applies styles for each value and label.

.react-select__multi-value__label

Defines the styles for the label of each value within a multi-select component. It adds padding on the left.

.react-select__multi-value

Defines the styles for each value within a multi-select component. It sets the background color, border radius, displays them as inline flex, and sets the color. It also applies styles for nested elements.

.react-select__multi-value__remove

Defines the styles for the remove button of each value within a multi-select component. It sets the font size, color, margin, border radius, padding, width, height, and displays it as flex.

.react-select__option

Defines the styles for each option within a select component. It sets the display as flex, aligns items in the center, and adds padding. It also applies styles for the hover, active, and selected states. Additionally, it applies styles for nested elements.

.react-select__menu-list

Defines the styles for the list of options within a select component. It removes the border.

.Person {
    display: flex;
    align-items: center;
    border-radius: 4px;
    flex-wrap: wrap;
    gap: 8px;

    &.readonly {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: unset;
    }

    .Person-item {
        display: flex;
        align-items: center;

        img {
            border-radius: 50px;
            width: 24px;
            height: 24px;
            margin-right: 6px;
        }
    }

    .react-select__menu {
        background: rgba(var(--center-channel-bg-rgb), 1);
        box-shadow: var(--elevation-4);
        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
        border-radius: 4px;
    }

    .react-select__single-value {
        margin: 0;
        position: relative;
        top: 0;
        max-width: 100%;
    }

    .react-select__value-container--is-multi {
        gap: 4px;
        display: inline-flex;

        .react-select__multi-value__label {
            padding-left: 4px;
        }

        .react-select__multi-value {
            background: rgba(var(--center-channel-color-rgb), 0.08);
            border-radius: 24px;
            display: inline-flex;
            color: rgb(var(--center-channel-color-rgb));
            margin: 0;
            align-items: center;

            .MultiPerson-item,
            .react-select__multi-value__label {
                color: inherit;
            }
        }
    }

    .react-select__multi-value__remove {
        font-size: 18px;
        color: rgba(var(--center-channel-color-rgb), 0.56);
        margin: 6px;
        border-radius: 100%;
        margin-left: 0;
        padding: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

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

    .react-select__option {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 40px 0 20px;

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

        &:active {
            background: rgba(var(--button-bg-rgb), 0.08);
        }

        &.react-select__option--is-selected {
            background: rgba(var(--button-bg-rgb), 0.08);
            color: rgba(var(--center-channel-color-rgb), 1);
        }

        .Person-item {
            img {
                margin-right: 12px;
            }
        }
    }

    .react-select__menu-list {
        border: 0;
    }
}