acud/es/select/style/multiple.less

acg react 组件库

@import './index';

@select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
@select-multiple-item-border-width: 1px;

@select-multiple-padding: max(
    @select-input-padding-vertical-base - @select-multiple-item-border-width -
        @select-multiple-item-spacing-half,
    0
);

/**
 * Do not merge `height` & `line-height` under style with `selection` & `search`,
 * since chrome may update to redesign with its align logic.
 */

// =========================== Overflow ===========================
.@{select-overflow-prefix-cls} {
    position: relative;
    display: flex;
    flex: auto;
    flex-wrap: wrap;
    max-width: 100%;

    &-item {
        flex: none;
        align-self: center;
        max-width: 100%;
        margin-top: 3px;
    }
}

.@{select-prefix-cls} {
    &-multiple {
        // ========================= Selector =========================
        .@{select-prefix-cls}-selector {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            // Multiple is little different that horizontal is follow the vertical
            padding: 0 @select-multiple-input-right-padding 3px 3px;

            .@{select-prefix-cls}-show-search& {
                cursor: text;
            }

            .@{select-prefix-cls}-disabled& {
                background: @select-multiple-disabled-background;
                cursor: not-allowed;
            }

            &::after {
                display: inline-block;
                width: 0;
                margin: @select-multiple-item-spacing-half 0;
                line-height: @select-multiple-item-height;
                content: '\a0';
            }
        }

        &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
        &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
            padding-right: @select-font-size-sm + @control-padding-horizontal;
        }

        // ======================== Selections ========================
        .@{select-prefix-cls}-selection-item {
            position: relative;
            display: flex;
            flex: none;
            box-sizing: border-box;
            max-width: 100%;

            height: @select-multiple-item-height;
            margin-top: @select-multiple-item-spacing-half;
            margin-bottom: @select-multiple-item-spacing-half;
            line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
            background-color: ~'@{@{select-multiple-item-default-p}-default-background-color}';
            border: 1px solid ~'@{@{select-multiple-item-default-p}-default-border-color}';
            color: ~'@{@{select-multiple-item-default-tp}-default-color}';
            border-radius: @R2;
            cursor: default;
            transition: font-size 0.3s, line-height 0.3s, height 0.3s;
            user-select: none;
            margin-inline-end: @select-input-padding-vertical-base;
            padding-inline-start: @padding-xs;
            padding-inline-end: (@padding-xs / 2);

            &.@{select-prefix-cls}-selection-item-disabled {
                color: ~'@{@{select-multiple-item-default-tp}-readonly-disabled-color}';
                border-color: ~'@{@{select-multiple-item-default-p}-disabled-border-color}';
                background-color: ~'@{@{select-multiple-item-default-p}-disabled-background-color}';
                cursor: not-allowed;
                &:hover {
                    color: ~'@{@{select-multiple-item-default-tp}-readonly-disabled-color}';
                    border-color: ~'@{@{select-multiple-item-default-p}-disabled-border-color}';
                    background-color: ~'@{@{select-multiple-item-default-p}-disabled-background-color}';
                }
                // disable remove icon 隐藏
                // .@{select-prefix-cls}-selection-item-remove {
                //     display: none;
                // }
            }

            &:hover {
                color: ~'@{@{select-multiple-item-default-tp}-hover-color}';
                border-color: ~'@{@{select-multiple-item-default-p}-hover-border-color}';
                background-color: ~'@{@{select-multiple-item-default-p}-hover-background-color}';
            }

            .@{select-prefix-cls}-disabled&,
            .@{select-prefix-cls}-disabled&:hover {
                border-color: ~'@{@{select-multiple-item-default-p}-disabled-border-color}';
                color: @G4;
                background-color: @G8;
                cursor: not-allowed;
            }

            // It's ok not to do this, but 24px makes bottom narrow in view should adjust
            &-content {
                display: inline-block;
                max-width: 95px;
                margin-right: (@padding-xs / 2);
                overflow: hidden;
                white-space: pre; // fix whitespace wrapping. custom tags display all whitespace within.
                text-overflow: ellipsis;
                // .basic-tp-config(@select-multiple-item-default-tp);
            }

            &-remove {
                // .iconfont-mixin();
                display: inline-block;
                color: @text-color-secondary;
                font-weight: bold;
                font-size: 10px;
                line-height: inherit;
                cursor: pointer;

                > .@{iconfont-css-prefix} {
                  vertical-align: -0.2em;
                }

                .basic-tp-config(@select-multiple-item-close-default-tp);

                &[disabled] {
                    cursor: not-allowed;
                }
                // disable remove icon 隐藏
                // .@{select-prefix-cls}-disabled&,
                // .@{select-prefix-cls}-disabled&:hover {
                //     display: none;
                // }
            }
        }

        // ========================== Input ==========================
        .@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item {
            .@{select-prefix-cls}-selection-search {
                margin-inline-start: 0;
            }
        }

        .@{select-prefix-cls}-selection-search {
            position: relative;
            max-width: 100%;
            margin-top: @select-multiple-item-spacing-half;
            margin-bottom: @select-multiple-item-spacing-half;
            margin-inline-start: @select-input-padding-horizontal-base - @select-input-padding-vertical-base;

            &-input,
            &-mirror {
                height: @select-multiple-item-height;
                font-family: @font-family;
                line-height: @select-multiple-item-height;
                transition: all 0.3s;
            }

            &-input {
                width: 100%;
                min-width: 4.1px; // fix search cursor missing
            }

            &-mirror {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 999;
                white-space: pre; // fix whitespace wrapping caused width calculation bug
                visibility: hidden;
            }
        }

        // ======================= Placeholder =======================
        .@{select-prefix-cls}-selection-placeholder {
            position: absolute;
            top: 50%;
            right: @select-input-padding-horizontal;
            left: @P * 3;
            transform: translateY(-50%);
            transition: all .3s;
        }

        // ============================================================
        // ==                          Size                          ==
        // ============================================================
        .select-size(@suffix, @input-height) {
            @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
            &.@{merged-cls} {
                @select-selection-height: @input-height - @select-input-padding-vertical-base * 2;
                @select-height-without-border: @input-height - @border-width-base * 2;

                .@{select-prefix-cls}-selector::after {
                    line-height: @select-selection-height;
                }

                .@{select-prefix-cls}-selection-item {
                    height: @select-selection-height;
                    line-height: @select-selection-height - @border-width-base * 2;
                }

                .@{select-prefix-cls}-selection-search {
                    height: @select-selection-height;
                    line-height: @select-selection-height;

                    &-input,
                    &-mirror {
                        height: @select-selection-height;
                        line-height: @select-selection-height - @border-width-base * 2;
                    }
                }
            }
        }

        .select-size('lg', @select-input-height-lg);
        .select-size('sm', @select-input-height-sm);

        // Size small need additional set padding
        &.@{select-prefix-cls}-sm {
            .@{select-prefix-cls}-selection-placeholder {
                left: @select-input-padding-horizontal-sm;
            }
            // https://github.com/ant-design/ant-design/issues/22906
            .@{select-prefix-cls}-selection-search:first-child
                .@{select-prefix-cls}-selection-search-input {
                    margin-left: 3px;
            }
        }
        &.@{select-prefix-cls}-lg {
            .@{select-prefix-cls}-selection-item {
                height: @select-multiple-item-height-lg;
                line-height: @select-multiple-item-height-lg;
            }
        }
    }
}
.@{select-prefix-cls}-dropdown-multiple {
    .@{select-prefix-cls}-item {
        padding: @select-dropdown-vertical-padding 3 * @P;
        &-checkall {
            padding: @select-dropdown-vertical-padding 3 * @P;
            height: 8 * @P;
            display: flex;
            line-height: 5.5 * @P;
            cursor: pointer;
            &:hover {
                background-color: ~'@{@{select-dropdown-default-p}-hover-background-color}';
            }
        }
        &-option-content {
            margin-left: 2 * @P;
        }
    }
    .@{select-prefix-cls}-item-option-grouped {
        padding-left: 12 * @P;
    }
    .@{select-prefix-cls}-item-group {
        cursor: pointer;
    }
}