@frontend_worker/search-selector/src/styles/components/input.less

《远程搜索+单选》组件区别于element-ui或iview组件库的select远程搜索， ①将头部显示的值和下拉选项显示的值独立开来， ②避免远程加载时头部默认值显示异常， ③支持插槽自定义 ④将搜索框值放置于下拉弹框里面

@input-prefix-cls: ~"@{css-prefix}input";

.@{input-prefix-cls} {
    caret-color: @primary-color;
    .input;
    &-wrapper{
        display: inline-block;
        width: 100%;
        position: relative;
        vertical-align: middle;

        // #2149 & #2219
        line-height: normal;
    }
    &-unit {
        position: absolute;
        left: 100%;
        margin-left: 7px;
        top: 0;
        color: @supplementary-t-color;
        font-size: 12px;
        word-break: keep-all;
        height: @input-height-base;
        line-height: @input-height-base;
    }
    &-error-icon {
        position: absolute;
        left: -20px;
        top: 0;
        color: @error-color;
        font-size: 16px;
        height: @input-height-base;
        line-height: @input-height-base;
        display: none;
    }
    &-icon {
        width: 32px;
        height: @input-height-base;
        line-height: @input-height-base;
        font-size: 16px;
        text-align: center;
        color: @subsidiary-color;
        position: absolute;
        right: 0;
        z-index: 1;
    }
    &-hide-icon &-icon{
        display: none;
    }
    &-icon-validate{
        display: none;
    }

    &-icon-clear{
        display: none;
        font-size: 16px;
        color: #bbbfcd;
        &::before {
            background-color: @input-bg;
        }
    }

    &-is-content:hover {
        .@{input-prefix-cls}-icon-clear {
            display: inline-block;
            z-index: 4;
            cursor: pointer;
            &:hover {
                color: #686b78;
            }
        }
    }
    &-icon-normal + & {
        padding-right: 32px;
    }
    &-hide-icon &-icon-normal + & {
        padding-right: @input-padding-horizontal
    }
    &-wrapper-large &-unit {
        height: @input-height-large;
        line-height: @input-height-large;
    }
    // &-wrapper-large &-unit {
    //     font-size: 18px;
    //     height: @input-height-large;
    //     line-height: @input-height-large;
    // }
    &-wrapper-large &-error-icon {
        font-size: 18px;
        right: -22px;
        height: @input-height-large;
        line-height: @input-height-large;
    }
    &-wrapper-small &-error-icon {
        font-size: 14px;
        right: -18px;
        height: @input-height-small;
        line-height: @input-height-small;
    }
    &-wrapper-large &-icon {
        font-size: 18px;
        height: @input-height-large;
        line-height: @input-height-large;
    }
    &-wrapper-small &-icon {
        width: 24px;
        font-size: 14px;
        height: @input-height-small;
        line-height: @input-height-small;
    }

    // prefix & suffix
    &-prefix, &-suffix{
        width: 32px;
        height: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        i{
            font-size: 16px;
            line-height: @input-height-base;
            color: @subsidiary-color;
        }
    }
    &-suffix{
        left: auto;
        right: 0;
    }
    &-wrapper-small &-prefix, &-wrapper-small &-suffix{
        i{
            font-size: 14px;
            line-height: @input-height-small;
        }
    }
    &-wrapper-large &-prefix, &-wrapper-large &-suffix{
        i{
            font-size: 18px;
            line-height: @input-height-large;
        }
    }

    &-with-prefix{
        padding-left: 32px;
    }
    &-with-suffix{
        padding-right: 32px;
    }
    &-with-prefix-search {
        padding-left: 32px;
        &.zz-input-default {
            height: @input-height-base - 2px;
            line-height: 1.5;
        }
    }
    &-with-suffix-search {
        padding-right: 32px;
        &.zz-input-default {
            height: @input-height-base - 2px;
            line-height: 1.5;
        }
    }
    // search
    &-search{
        cursor: pointer;
        min-width: 50px;
        max-width: 60px;
        padding: 0 8px !important;
        background: @main-btn-color !important;
        color: #fff !important;
        border-color: @main-btn-color !important;
        transition: all @transition-time @ease-in-out;
        position: relative;
        z-index: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        i{
            font-size: 16px;
        }

        &:hover{
            background: tint(@main-btn-color, 20%) !important;
            border-color: tint(@main-btn-color, 20%) !important;
        }
        &:active{
            background: shade(@main-btn-color, 5%) !important;
            border-color: shade(@main-btn-color, 5%) !important;
        }

        &-icon{
            cursor: pointer;
            left: 0;
            transition: color @transition-time @ease-in-out;
            &:hover{
                color: inherit;
            }
        }

        &:before{
            content: '';
            display: block;
            width: 1px;
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -1px;
            background: inherit;
        }
    }
    &-wrapper-small &-search{
        padding: 0 12px !important;
        i{
            font-size: 14px;
        }
    }
    &-wrapper-large &-search{
        padding: 0 20px !important;
        i{
            font-size: 18px;
        }
    }
    &-with-search{
        .@{input-prefix-cls}-default {
            padding-right: 30px;
        }
        .@{input-prefix-cls}-icon {
            right: 56px;
        }
        &:hover{
            .@{input-prefix-cls} {
                border-color: tint(@main-btn-color, 20%);
            }
            .@{input-prefix-cls}-icon-clear {
                right: 60px;
            }    
        }
    }
    &-wrapper-with-suffix-search {
        .@{input-prefix-cls}-icon {
            right: 28px;
            &-clear {
                right: 24px;
            }
            &.@{input-prefix-cls}-search-icon-suffix {
                right: 0;
                &:hover {
                    color: @primary-color;
                }
                &-disabled {
                    cursor: not-allowed;
                    &:hover {
                        color: #808695;
                    }
                }
            }
        }
     }

    &-textarea-wrapper {
        position: relative;
    }
    
    &-textarea-wrapper &-word-limit {
        position: absolute;
        right: 17px;
        bottom: 7px;
        padding: 0 0.4em;
        margin: 0;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 4px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
        color: rgba(62, 71, 95, 0.4);
        font-size: 12px;
        line-height: 16px;
        pointer-events: none;
        opacity: 0.8;
    }
    &-beyond-limit & {
        .input-error;
    }
    &-beyond-limit &-word-limit {
        color: @error-color;
    }
}

.@{input-prefix-cls}-group{
    .input-group(~"@{input-prefix-cls}");
}


.showDifEmpty {
    right: 20px;
}