@chief-editor/ui/css/components/FormContainer/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

@form-container: ~"@{prefixCls}-form-container";

.label-box(@prefixSelector, @lineHeight, @align-left-width, @align-right-width, @gap) {
    @padding: (@lineHeight - 22px) / 2;
    .@{prefixSelector}-label {

        .font-height(12px);
        line-height: 17px;

        box-sizing: border-box;
        width: @align-left-width;
        word-wrap: break-word;

        & + .@{prefixSelector}-content {
            margin-left: @align-right-width;
            .font-height(12px);
        }

        &.@{prefixSelector}-label-align-right {

            width: @align-right-width;

            & + .@{prefixSelector}-content {
                margin-left: @align-right-width;
            }
        }

        &-required {
            &:after {
                width: 4px;
                height: 4px;
                background: @color-danger6;
                border-radius: 50%;
                margin-left: 8px;
                top: @lineHeight / 2;
            }
        }

        &.@{prefixSelector}-label-vertical {
            position: relative;
            display: inline-block;
            width: unset;
            margin-bottom: 8px;

            & + .@{form-container}-content {
                margin-left: 0;
            }
        }
    }
}

.form-container-level(@i: 0) when (@i <= 5) {
    .@{form-container}-level-@{i} {
        margin-bottom: 32px - (@i - 1) * 8px;
    }

    .form-container-level(@i + 1);
}

.@{form-container} {
    box-sizing: border-box;
    color: @color-text-grey1;
    vertical-align: top;
    position: relative;
    .font-height(12px);

    &-inline {
        display: inline-block;
        margin-right: 16px;
    }

    .label-box(@form-container, 30px, 80px, 80px, 20px);

    &-label {
        vertical-align: middle;
        position: absolute;

        &-required {
            &:after {
                content: "";
                display: inline-block;
                position: absolute;
                color: @color-danger6;
                width: 4px;
                height: 4px;
                background: @color-danger6;
                border-radius: 50%;
                margin-left: 8px;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        &-align-left {
            text-align: left;
        }

        &-align-right {
            text-align: right;
        }

        &-colon {
            position: absolute;
            margin-left: 2px;
            .font-height(12px);
            top: 50%;
            transform: translateY(-50%);
        }

        &-tooltip-icon {
            margin-right: 4px;
            color: @color-text-grey3;
        }
    }

    &-hint, &-help {
        margin-top: 4px;
        color: @color-text-grey3;
        .font-height(12px);
    }

    .has-error {
        .@{form-container}-help {
            color: @color-danger6;
        }
    }

    .has-warning {
        .@{form-container}-help {
            color: @color-warning6;
        }
    }

    .has-success {
        .@{form-container}-help {
            color: @color-success6;
        }
    }
}

.form-container-level();