@fesjs/fes-design/es/select-trigger/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@select-trigger-prefix-cls: ~'@{cls-prefix}-select-trigger';
@select-height: @data-input-height-base;
@select-disabled-bg: var(--f-component-bg-color);
@select-placeholder-color: var(--f-border-color-base);

.@{select-trigger-prefix-cls} {
    --f-select-trigger-border-color: var(--f-border-color-base);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: @select-height;
    padding: calc(@padding-xs / 2) @padding-xs;
    line-height: @line-height-base;
    background-color: var(--f-white);
    border: var(--f-border-width-base) var(--f-border-style-base) transparent;
    border-color: var(--f-select-trigger-border-color);
    border-radius: var(--f-border-radius-base);
    outline: 0;
    cursor: pointer;
    transition: all @animation-duration-slow @ease-base-out;
    &, * {
        box-sizing: border-box;
    }
    &:hover {
        --f-select-trigger-border-color: var(--f-primary-color);
        transition: all @animation-duration-base @ease-base-in;
    }
    &.is-active {
        --f-select-trigger-border-color: var(--f-primary-color);
        box-shadow: 0 0 0 2px var(--f-focus-shadow-color);
        transition: all @animation-duration-base @ease-base-in;
    }
    &.is-error:not(.is-disabled) {
        --f-select-trigger-border-color: var(--f-danger-color);
        &.is-active {
            box-shadow: 0 0 0 2px var(--f-focus-danger-shadow-color);
        }
    }
    &.is-disabled {
        --f-select-trigger-border-color: var(--f-border-color-base);
        background: @select-disabled-bg;
        cursor: not-allowed;
        .@{select-trigger-prefix-cls}-label {
            color: var(--f-text-color-secondary);
            .@{select-trigger-prefix-cls}-label-text {
                color: var(--f-text-color-secondary);
            }
        }
        .@{select-trigger-prefix-cls}-icons {
            color: var(--f-select-trigger-icon-color);
        }
        .@{select-trigger-prefix-cls}-label-overlay {
            background: @select-disabled-bg;
        }
        .@{select-trigger-prefix-cls}-label-input {
            background: @select-disabled-bg;
        }
    }
    &.is-multiple {
        padding: calc((@padding-xs / 2 - 1px)) @padding-xs;
    }
    & &-label-input {
        caret-color: var(--f-primary-color);
    }
    & &-icons {
        display: flex;
        align-items: center;
        margin-left: @padding-xs;
        color: @select-placeholder-color;
        font-size: @font-size-body;
        .@{select-trigger-prefix-cls}-icon {
            padding: 1px;
        }
    }
    & &-label {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        width: 0; // flex优先被内容撑开，故设置width为0
        max-width: calc(100% - @padding-xs - @font-size-body - 2px);
        min-height: @line-height-base;
        color: var(--f-text-color);
        cursor: pointer;
        &-item {
            display: flex;
            align-items: center;
            max-width: 100%;
            color: var(--f-text-color);
        }
        &.is-multiple {
            flex-wrap: wrap;
            margin-top: calc(@padding-xs / 2 * -1 + 1px);
            margin-left: calc(@padding-xs / 2 * -1);
            &.is-selected-null {
                margin-top: 0;
                margin-left: 0;
            }
            .@{select-trigger-prefix-cls}-label-item {
                margin-top: calc(@padding-xs / 2 - 1px);
                margin-left: calc(@padding-xs / 2);
            }
            .@{select-trigger-prefix-cls}-label-input {
                width: 1em;
                max-width: 100%;
            }
            .@{select-trigger-prefix-cls}-label-overlay {
                background: transparent;
            }
        }
        &-placeholder {
            max-width: 100%;
            color: @select-placeholder-color;
            .ellipsis();
        }
        &-input {
            width: 100%;
            background-color: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            &::placeholder {
                color: @select-placeholder-color;
            }
        }
        &-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            white-space: nowrap;
            background: var(--f-white);
            pointer-events: none;
        }
    }
    &-collapsed-item-popper {
        @tag-gap: 4px;
        @result-padding: var(--f-padding-middle);
        @padding-with-offset: calc(@result-padding - @tag-gap);

        max-width: 300px;
        padding: @result-padding @padding-with-offset @padding-with-offset @result-padding;

        .@{select-trigger-prefix-cls}-label-collapsed-item {
            max-width: calc(100% - @tag-gap);
            margin-right: @tag-gap;
            margin-bottom: @tag-gap;
        }
    }
}