amis2/scss/components/form/_tree-select.scss

// todo
.#{$ns}TreeSelectControl {
    position: relative;
}

.#{$ns}TreeSelect {
    @include input-text();
    outline: none;

    &.is-opened > &-input {
        border-color: $Form-input-onFocused-borderColor;
        box-shadow: $Form-input-boxShadow;

        @if $Form-input-onFocused-bg !=$Form-input-bg {
            background-color: $Form-input-onFocused-bg;
        }
    }

    &-placeholder {
        color: $Form-input-placeholderColor;
        user-select: none;
        position: absolute;
        // margin-top: 2 * $Form-input-borderWidth;
        line-height: $Form-input-lineHeight;
    }

    &-input {
        min-height: $Form-input-height;
        height: auto;
    }

    &-valueWrap {
        flex-grow: 1;
        position: relative;
    }

    &--searchable {
        .#{$ns}TreeSelect-placeholder,
        .#{$ns}TreeSelect-value {
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    &--multi {
        &.#{$ns}TreeSelect--searchable {
            .#{$ns}TreeSelect-value {
                position: static;
            }
        }

        .#{$ns}TreeSelect-valueWrap {
            margin-bottom: -$gap-xs;
            line-height: 1;

            > input {
                width: auto;
            }
        }

        .#{$ns}TreeSelect-value {
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            vertical-align: middle;
            line-height: $Form-input-lineHeight * $Form-input-fontSize -
                px2rem(2px);
            display: inline-block;
            font-size: $Form-selectValue-fontSize;
            color: $Form-selectValue-color;
            background: $Form-selectValue-bg;
            border: px2rem(1px) solid $Form-selectValue-borderColor;
            border-radius: 2px;
            margin-right: $gap-xs;
            margin-bottom: $gap-xs;

            &.is-disabled {
                pointer-events: none;
                opacity: $Button-onDisabled-opacity;
            }
        }

        .#{$ns}TreeSelect-valueIcon {
            cursor: pointer;
            border-right: px2rem(1px) solid $Form-selectValue-borderColor;
            padding: 1px 5px;

            &:hover {
                background-color: darken($Form-selectValue-bg, 5%);
            }
        }

        .#{$ns}TreeSelect-valueLabel {
            padding: 0 $gap-xs;
        }
    }

    &-arrow {
        width: px2rem(20px);
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        &:before {
            content: "";
            border-color: $Form-input-iconColor transparent transparent;
            border-style: solid;
            border-width: px2rem(5px) px2rem(5px) px2rem(2.5px);
            display: inline-block;
            height: 0;
            width: 0;
            position: relative;
            top: px2rem(2px);
        }
    }
}

.#{$ns}TreeSelect-popover {
    background: transparent;
    border: none;
    box-shadow: none;

    > .#{$ns}Tree {
        background: #fff;
        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
        padding: $gap-xs $Form-input-paddingX;
        border-radius: 0;
        margin-top: -1px;
        max-height: 400px;
        overflow: auto;
    }
}