acud/lib/input/style/mixin.less

acg react 组件库

// input标签基础样式
@input-prefix-cls: ~'@{acud-prefix}-input';

.input-height(@height, @font-size) {
    font-size: @font-size;
    height: @height;
    line-height:@height;
    // > * {
    //     line-height: @height - 2;
    // }
}

.input-size(@font-size){
    font-size: @font-size;
}

.input() {
    width: 100%;
    outline: none;
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    font-weight: @input-font-weight;
    border-width: @input-border-width;
    border-style: solid;
    overflow: hidden;

    input {
        min-width: 0;
        padding: 0 @padding-m;
        border: none;
        height: 100%;
        flex-grow: 1;
        color: inherit;
        // background-color: inherit;
        .input-size(@input-font-size-md);

        &:-webkit-autofill{
            box-shadow: 0 0 0px 1000px white inset !important;
        }

        &:focus {
            outline: none;
        }
    }

    &-prefix{
        display: flex;
        padding: 0 @padding-sm 0 0;
    }

    &-suffix{
        display: flex;
        padding: 0  0 0 @padding-xsm;
        word-break: keep-all;
    }


    &-prefix,
    &-suffix {
        .basic-tp-config(@input-presuffix-tp);
    }

    &-lg {
        .input-height(@input-height-lg, @input-font-size-lg);
        input{
            .input-size(@input-font-size-lg);
        }
        border-radius: @input-border-lg-radius;
    }

    &-sm {
        .input-height(@input-height-sm, @input-font-size-sm);
        border-radius: @input-border-sm-radius;
        input {
            padding: 0 @padding-sm;
            input{
                .input-size(@input-font-size-sm);
            }
        }
    }

    &-has-prefix {
        input {
            padding: 0;
        }
    }

    &-has-prefix {
        padding-left: @padding-m;
    }

    &-has-addon-before {
        padding-left:0
    }

    &-has-suffix {
        padding-right: @padding-m;
    }

    &-has-addon-after {
        padding-right: 0;
    }

    &-has-prefix&-sm {
        padding-right: @padding-sm;
        padding-left: @padding-sm;
        input{
            padding: 0px;
        }
    }

    &-has-suffix&-sm {
        padding-right: @padding-sm;
        padding-left: @padding-sm;
        input{
            padding: 0px;
        }
    }

    &-has-suffix {
        .@{input-prefix-cls}-clear-wrapper {
            margin-right:0px;
        }
    }

    &-has-limit {
        .@{input-prefix-cls}-clear-wrapper {
            margin-right:0px;
        }
    }

    &-has-addon-before {
        .@{input-prefix-cls}-addon {
            margin-left: -1px;
        }
        input{
            padding:0  @padding-sm 0 @padding-m;
        }
    }

    &-has-addon-after {
        .@{input-prefix-cls}-addon {
            margin-right: -1px;
        }
        input{
            padding:0  @padding-sm 0 @padding-m;
        }
    }

    &-has-addon-before&-has-addon-after{
        input{
            padding:0  @padding-sm 0 @padding-m;
        }
    }

    &-addonOnlyText {
        padding: 0 @padding-m 0 @padding-m;
        .basic-config(@input-addon-tp, @input-addon-p);
    }

    &-addon {
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .input-height(@input-height-md, @input-font-size-md);
    border-radius: @input-border-lg-radius;
}