yyzone/src/assets/styles/components/input.less

yyzone vue components and utils

@prefixInputCls: ~'@{yy-css-prefix}input';

.hover(@color: @yy-input-hover-border-color) {
    border-color: tint(@color, 20%);
}

.active(@color: @yy-input-hover-border-color) {
    border-color: tint(@color, 20%);
    outline: 0;
    // box-shadow: 0 0 0 2px fade(@color, 20%);
}

.disabled() {
    // opacity: .5;
    background-color: @yy-input-disabled-bg;
    color: @yy-input-disabled-color;
    .cursor(not-allowed);

    &:hover {
        .hover(@yy-input-border-color);
    }

    &:focus {
        .active(@yy-input-border-color)
    }
}

.readonly() {
    .cursor(not-allowed);
    background-color: @yy-input-readonly-bg;

    &:hover {
        .hover(@yy-input-border-color);
        background-color: @yy-input-readonly-bg;
    }

    &:focus {
        .active(@yy-input-border-color)
    }
}

.input-error() {
    border: 1px solid @yy-primary-color;

    &:hover {
        .hover(@yy-primary-color);
    }

    &:focus {
        .hover(@yy-primary-color);
        // box-shadow: 0 0 0 2px fade(@yy-primary-color, 20%);
    }
}

.input() {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: @yy-input-padding-vertical-base @yy-input-padding-horizontal;
    font-size: @yy-font-size-small;
    border: 1px solid @yy-input-border-color;
    border-radius: @yy-btn-border-radius;
    color: @yy-input-color;
    background-color: @yy-input-bg;
    background-image: none;
    position: relative;
    cursor: text;
    transition: border @yy-transition-time @yy-ease-in-out, background @yy-transition-time @yy-ease-in-out, box-shadow @yy-transition-time @yy-ease-in-out;

    &::placeholder {
        color: @yy-input-placeholder-color;
    }

    &:hover {
        .hover();
    }

    &:focus {
        .active();
    }

    &[disabled],
    fieldset[disabled] & {
        .disabled();
    }

    &[readonly],
    fieldset[readonly] & {
        .readonly();
    }

    textarea& {
        max-width: 100%;
        height: auto;
        min-height: @yy-input-height-base;
        vertical-align: bottom;
        line-height: 1.5;
        resize: vertical;
    }

    &-wrapper-error &,
    .@{prefixFormItemCls}-error & {
        .input-error()
    }

    &-prefix,
    &-suffix {
        position: absolute;
        top: 1px;
        bottom: 1px;
        color: @yy-text-info-color;
        display: flex;
        align-items: center;
        align-content: center;
        padding: 0 11px;
    }

    &-prefix {
        left: 1px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    &-suffix {
        right: 1px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    &-clearable {
        position: absolute;
        top: 0;
        bottom: 0;
        .cursor();
        color: @yy-text-info-color;
        opacity: 0;
        transition: @yy-transition-time @yy-ease-in-out opacity;
    }
}

.@{prefixInputCls} {
    height: 100%;
    .input();
    display: block;
    padding: 0 10px;

    textarea& {
        padding: 7px 10px;
    }

    &-wrapper-large & {
        font-size: @yy-font-size-base;
    }
    &-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        height: @yy-input-height-base;
        line-height: @yy-input-height-base;
        
        &-textarea {
            height: auto;
        }

        &:hover {
            .@{prefixInputCls}-clearable {
                opacity: 1;
            }
        }

        &-small {
            height: @yy-input-height-small;
            line-height: @yy-input-height-small;
        }

        &-large {
            height: @yy-input-height-large;
            line-height: @yy-input-height-large;
        }
    }
}