editable.scss

TLDR

The editable.scss file contains styles for an editable element.

Classes (if applicable)

Editable

The Editable class is used to style an editable element. It sets various properties like cursor, overflow, text-overflow, border, and min-height.

• When the element has the class active, it sets a minimum width of 100px.
• When the element has the error class, it sets a border and border-radius using the error text color.
• When the element has the readonly class, it sets the background-color to transparent and flex to 1.

.Editable {
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
    min-height: 24px;

    &.active {
        min-width: 100px;
    }

    &::placeholder {
        color: rgba(var(--center-channel-color-rgb), 0.4);
        opacity: 1;
    }

    &.error {
        border: 1px solid rgb(var(--error-text-rgb));
        border-radius: var(--default-rad);
    }

    &.readonly {
        background-color: transparent;
        flex: 1;
    }
}