valueSelector.scss

TLDR

The valueSelector.scss file contains styles for the ValueSelector widget.

Classes

ValueSelector

This class defines the styles for the ValueSelector widget. It sets the width, border radius, color, and display properties. It also includes styles for the child elements such as .Label and .value-menu-option.

.Label

This class defines the styles for the label element within the ValueSelector widget. It sets the margins, max width, and color properties. It also includes styles for the .empty modifier class which changes the color when the label is empty.

.Label-no-padding

This class removes the top and bottom padding from the label element within the ValueSelector widget.

.Label-no-margin

This class removes the margins from the label element within the ValueSelector widget.

.Label-single-select

This class removes the bottom margin from the label element within the ValueSelector widget.

.Label-text

This class defines the styles for the text inside the label element within the ValueSelector widget. It sets the display, text overflow, and max width properties.

.value-menu-option

This class defines the styles for the menu options within the ValueSelector widget. It sets the width, display, and alignment properties. It includes styles for the child elements such as .label-container and .MenuWrapper.

.label-container

This class defines the styles for the label container within the menu option element. It sets the flex growth and display properties.

.MenuWrapper

This class defines the styles for the menu wrapper within the menu option element. It sets the display and alignment properties. It includes styles for the child element .IconButton.

.ValueSelector__menu-list

This class defines the styles for the menu list element within the ValueSelector widget. It sets the overflow properties.

.octo-property-value

This class defines the styles for the property value element. It sets the max width, overflow, and display properties for the label element within it.

@import '../styles/z-index';

.ValueSelector {
    width: 100%;
    border-radius: var(--default-rad);
    color: rgb(var(--center-channel-color-rgb));
    display: flex;
    min-width: 180px;

    > .Label {
        margin: 0 10px;
        max-width: calc(100% - 10px);

        &.empty {
            color: rgba(var(--center-channel-color-rgb), 0.6);
        }
    }

    .Label {
        display: flex;
        text-overflow: ellipsis;
        overflow: hidden;
        border-radius: var(--default-rad);
        max-width: 100%;

        .Label-text {
            flex-grow: 1;
        }

        .IconButton.delete-value {
            @include z-index(value-selector-delete);
            width: 16px;
            height: 16px;
            flex: 0 0 auto;

            i {
                font-size: 16px;
            }
        }
    }

    .Label-no-padding {
        padding-top: 0;
        padding-bottom: 0;
    }

    .Label-no-margin {
        margin: 0;
    }

    .Label-single-select {
        margin-bottom: 0;
    }

    .Label-text {
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 250px;
    }

    .value-menu-option {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;

        .label-container {
            flex-grow: 1;
            display: flex;
        }

        .MenuWrapper {
            display: flex;
            align-self: flex-end;

            .IconButton {
                background-color: unset;

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

    .ValueSelector__menu-list {
        overflow-y: unset;
        overflow-x: unset;
    }
}

.label-container > .Label {
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;


}

.octo-property-value > .Label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}