acud/lib/select/style/index.less

acg react 组件库

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

@import './mixin.less';
@import './single';
@import './multiple';

@select-prefix-cls: ~'@{acud-prefix}-select';
@select-height-without-border: @select-input-height-base - 2 * @border-width-base;
@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;

.select-selector() {
    position: relative;
    font-size: @select-font-size-base;
    .basic-config(@select-default-tp, @select-default-p);
    border-radius: @select-selector-border-radius;
    border-width: @select-border-width;
    border-style: solid;
    transition: all .3s @ease-in-out;
    max-height: 59px;
    overflow-y: auto;

    input {
        cursor: pointer;
    }

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

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

/* Reset search input style */
.select-search-input-without-border() {
    .@{select-prefix-cls}-selection-search-input {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        appearance: none;

        &::-webkit-search-cancel-button {
            display: none;
            -webkit-appearance: none;
        }
    }
}

.@{select-prefix-cls} {
    .reset-component();
    position: relative;
    display: inline-block;
    cursor: pointer;

    &:not(&-customize-input) &-selector {
        .select-selector();
        .select-search-input-without-border();
    }
    &-open:not(&-customize-input) &-selector {
        border-color: ~'@{@{select-default-p}-hover-border-color}';
    }

    // &:not(&-disabled):hover &-selector {
    //     .hover();
    // }

    // ======================== Selection ========================
    &-selection-item {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: ~'@{@{select-default-tp}-click-color}';

        // IE11 css hack. `*::-ms-backdrop,` is a must have
        @media all and (-ms-high-contrast: none) {
            *::-ms-backdrop,
            & {
                flex: auto;
            }
        }
    }

    &-disabled {
        .@{select-prefix-cls}-selection-item {
            color: ~'@{@{select-default-tp}-disabled-color}';
        }
    }

    // ======================= Placeholder =======================
    &-selection-placeholder {
        flex: 1;
        overflow: hidden;
        color: @select-input-placeholder-color;
        white-space: nowrap;
        text-overflow: ellipsis;
        pointer-events: none;

        // IE11 css hack. `*::-ms-backdrop,` is a must have
        @media all and (-ms-high-contrast: none) {
            *::-ms-backdrop,
            & {
                flex: auto;
           }
        }
    }

    // ========================== Arrow ==========================
    &-arrow {
        // .iconfont-mixin();
        position: absolute;
        top: 53%;
        right: @select-arrow-right;
        width: @select-font-size-sm;
        height: @select-font-size-sm;
        margin-top: (-@select-font-size-sm / 2);
        color: @select-disabled-color;
        font-size: @select-font-size-sm;
        line-height: 1;
        text-align: center;
        pointer-events: none;

        .@{iconfont-css-prefix} {
            vertical-align: top;
            transition: transform .3s;

            > svg {
                vertical-align: top;
            }

            &:not(.@{select-prefix-cls}-suffix) {
                pointer-events: auto;
            }
        }

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

    // ========================== Clear ==========================
    &-clear {
        position: absolute;
        top: 50%;
        // right: @control-padding-horizontal - 1px;
        right: @P * 8;
        z-index: 1;
        display: inline-flex;
        width: @P * 3;
        height: @P * 3;
        border-radius: 6px;
        margin-top: -6px;
        // color: @select-disabled-color;
        font-size: @select-clear-font-size;
        font-style: normal;
        line-height: 1;
        text-align: center;
        text-transform: none;
        // background: #fff;
        cursor: pointer;
        opacity: 0;
        text-rendering: auto;
        &::before {
            display: block;
        }

        .@{select-prefix-cls}:hover & {
            opacity: 1;
        }
        .@{iconfont-css-prefix}-outlined-close {
            display: inline-flex;
            width: @P * 3;
            height: @P * 3;
            padding-left: 2px;
            padding-top: 2px;
        }
        .basic-config(@select-clear-icon-tp, @select-clear-icon-p);
    }

    // ========================== Popup ==========================
    &-dropdown {
        .reset-component();
        position: absolute;
        top: -9999px;
        left: -9999px;
        z-index: @zindex-dropdown;
        padding: @select-dropdown-edge-child-vertical-padding 0;
        overflow: hidden;
        font-size: @select-font-size-base;
        // Fix select render lag of long text in chrome
        // https://github.com/ant-design/ant-design/issues/11456
        // https://github.com/ant-design/ant-design/issues/11843
        font-variant: initial;
        border-radius: @select-selector-border-radius;
        outline: none;
        // .basic-config-select-dropdown(@select-dropdown-default-tp, @select-dropdown-default-p);
        background-color: ~'@{@{select-dropdown-default-p}-default-background-color}';
        box-shadow: ~'@{@{select-dropdown-shadow}}';

        &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
        &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
            animation-name: acudSlideUpIn;
        }

        &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
        &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
            animation-name: acudSlideDownIn;
        }

        &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
            animation-name: acudSlideUpOut;
        }

        &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
            animation-name: acudSlideDownOut;
        }

        &-hidden {
            display: none;
        }

        &-empty {
            color: @select-disabled-color;
        }
    }

    // ========================= Options =========================
    .item() {
        position: relative;
        display: flex;
        min-height: @select-dropdown-height;
        padding: @select-dropdown-vertical-padding @control-padding-horizontal;
        color: ~'@{@{select-dropdown-default-tp}-default-color}';
        font-weight: normal;
        font-size: @T2;
        line-height: @P * 5.5;
    }

    &-item-empty {
        color: @select-disabled-color;
        position: relative;
        display: flex;
        padding: 7px 12px;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
    }

    &-item {
        .item();

        cursor: pointer;
        transition: background .3s ease;

        // =========== Group ============
        &-group {
            .basic-tp-config(@select-item-group-tp);
            font-size: @T2;
            cursor: default;
            &-arrow {
                margin-right: 2 * @P;
                display: flex;
                cursor: pointer;
                .@{iconfont-css-prefix} {
                    display: flex;
                    color: @G5;
                }
            }
            &-checkbox.@{acud-prefix}-checkbox-wrapper {
                margin-right: 2 * @P;
            }
            &-keep-expand {
                cursor: default;
                color: @G6;
                &:hover {
                    color: @G6;
                    background-color: @B1;
                }
            }
            &:hover {
                background-color: ~'@{@{select-dropdown-default-p}-hover-background-color}';
            }
        }

        // =========== Option ===========
        &-option {
            display: flex;
            .@{acud-prefix}-checkbox-wrapper {
                height: @P * 4;
                margin-top: 3px;
            }

            &-content {
                flex: auto;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            &-state {
                flex: none;
            }

            &-selected:not(&-disabled) {
                color: ~'@{@{select-dropdown-default-tp}-click-color}';
                background-color: ~'@{@{select-dropdown-default-p}-default-background-color}';
                border-color: ~'@{@{select-dropdown-default-p}-click-border-color}';

                .@{select-prefix-cls}-item-option-state {
                    color: @select-primary-color;
                }
            }

            &-active:not(&-disabled) {
                background-color: ~'@{@{select-dropdown-default-p}-hover-background-color}';
            }

            &-disabled {
                color: ~'@{@{select-dropdown-default-tp}-disabled-color}';
                cursor: not-allowed;
            }

            &-grouped {
                padding-left: 12 * @P;
                &-keep-expand {
                    padding-left: 6 * @P;
                }
            }
            // .basic-config-select-item(@select-dropdown-default-tp, @select-dropdown-default-p);
        }
    }

    // ============================================================
    // ==                          Size                          ==
    // ============================================================
    &-lg {
        font-size: @font-size-lg;
    }

    // no border style
    &-borderless &-selector {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    &-search-highlight {
        color: ~'@{@{select-dropdown-default-tp}-click-color}';;
    }
}

.@{select-prefix-cls}-dropdown-multiple .@{select-prefix-cls}-item-option-selected:not(.acud-select-item-option-disabled) {
    color: inherit;
}