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

yyzone vue components and utils

@prefixFormCls: ~"@{yy-css-prefix}form";
@prefixFormItemCls: ~"@{prefixFormCls}-item";

.@{prefixFormCls} {
    .@{prefixFormItemCls}-label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: @yy-font-size-base;
        color: @yy-text-primary-color;
        line-height: 1;
        padding: 8px 12px 8px 0;
        box-sizing: border-box;
    }
    &-label-left .@{prefixFormItemCls}-label {
        text-align: left;
    }
    &-label-top .@{prefixFormItemCls}-label {
        float: none;
        display: inline-block;
        padding: 0 0 10px 0;
    }
    &-inline{
        .@{prefixFormItemCls} {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
        }
    }
}

.@{prefixFormItemCls} {
    margin-bottom: 24px;
    vertical-align: top;
    .clearfix();
    &-content {
        position: relative;
        line-height: 30px;
        font-size: @yy-font-size-base;
        .clearfix()
    }
    & & {
        margin-bottom: 0;
    }
    & & &-content {
        margin-left: 0;
    }

    &-error-tip{
        position: absolute;
        top: 100%;
        left: 0;
        line-height: 1;
        padding-top: 5px;
        color: @yy-error-color;
        font-size: @yy-font-size-small;
    }

    &-required {
        .@{prefixFormItemCls}-label:before {
            content: '*';
            display: inline-block;
            margin-right: 4px;
            line-height: 1;
            font-size: @yy-font-size-small;
            color: @yy-error-color;
        }
    }
    &-error {
        // todo
    }
}