magiccube-vue3/package/style/textarea.less

vue3-js版组件库

@import './theme';
.mc-textarea{
    position: relative;
    padding: 6px 16px 24px;
    border: @input-border;
    border-radius: 4px;
    background-color: @input-background;
    transition: all .3s;

    textarea{
        width: 100%;
        height: 100%;
        border: none;
        resize: none;
        background: none;

        &:hover, &:focus{
            border: none;
            outline: none;
        }
    }

    &:hover{
        border-color: var(--mc-main-color);
    }

    &.focus{
        border-color: @color-default;
    }

    &.disabled{
        background-color: #efefef;
    }

    &.error{
        border-color: var(--mc-error-color);
    }

    &__count{
        position: absolute;
        right: 8px;
        bottom: 4px;
        font-size: @font-small;
        color: @input-placeholder;
        line-height: 20px;

        & > em{
            color: @input-placeholder;
        }
    }
}