@fesjs/fes-design/es/form/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@form-cls: ~'@{cls-prefix}-form';
@form-item-cls: ~'@{cls-prefix}-form-item';
@form-item-label-cls: ~'@{form-item-cls}-label';
@form-item-error-cls: ~'@{form-item-cls}-error';
@form-item-required: ~'is-required';
@form-item-error: ~'is-error';

@form-margin: 0;

@form-item-margin: 22px;
@form-item-label-margin-right: 16px;
@form-item-label-margin-bottom: 8px;

@form-size-base: var(--f-font-size-base);
@form-size-error: @font-size-caption;

@form-item-height: @data-input-height-base;

// 表单布局: horizontal
.@{form-cls} {
    .default();
    .text();

    width: 100%;
    margin: @form-margin;
    font-size: @form-size-base;

    // 对齐方式: 左对齐
    .@{form-item-cls} {
        .default();
        .text();

        display: flex;
        margin-bottom: @form-item-margin;
        padding: @form-margin;
        font-size: @form-size-base;
        &.@{form-item-cls}-align-flex-start {
            align-items: flex-start;
        }
        &.@{form-item-cls}-align-baseline {
            align-items: baseline;
        }
        &.@{form-item-cls}-align-center {
            align-items: center;
        }

        &-label {
            display: inline-flex;
            flex-shrink: 0; // 解决问题: 整体宽度不够时 label 被压缩
            align-items: center;
            justify-content: flex-start;
            min-height: @form-item-height;
            margin-right: @form-item-label-margin-right;
            white-space: normal;
            word-break: break-all;
        }
        &-content {
            position: relative;
            display: flex;
            flex: 1;
            align-items: center;
            min-height: @form-item-height;
        }
    }
    // 对齐方式: 右对齐
    .@{form-item-cls}-right .@{form-item-label-cls} {
        justify-content: flex-end;
    }
    // 对齐方式: 顶部对齐
    .@{form-item-cls}-top {
        display: block;
        height: auto;
        .@{form-item-label-cls} {
            display: block;
            height: auto;
            min-height: unset;
            margin-right: 0;
            margin-bottom: @form-item-label-margin-bottom;
            line-height: 22px;
        }
    }
}

// 表单布局: inline
.@{form-cls}-inline {
    display: grid;
    grid-gap: (@form-item-margin / 2);
    // 默认情况下，将一行分割为 24 格, formItem 自定义占几格【默认6格】
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: @form-item-margin;
    .@{form-item-cls} {
        box-sizing: border-box;
        margin: 0;
    }
    // formItem 的 span 属性，占据的列数
    each(range(24), {
        .@{form-item-cls}-span-@{value} {
            grid-column: span @value / span @value;
        }
    });
}

.@{form-cls} {
    // formItem 必填样式
    .@{form-item-cls} {
        .@{form-item-label-cls}.@{form-item-required} {
            &::before {
                display: inline-block;
                margin-top: 2px;
                margin-right: 4px;
                color: var(--f-danger-color);
                content: '*';
            }
        }
    }
}

.@{form-item-error-cls} {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 5px;
    color: var(--f-danger-color);
    font-size: @form-size-error;
    line-height: 1;
}