@chief-editor/ui/css/mixin/for-mixin.less

UI Component for chief editor

// 计算指定fontSize的字体显示样式
.font-height(@fontSize) {
    font-size: @fontSize;
    line-height: @fontSize + 8px;
}

/**************************************************************/
// 生成日期range 左右位置计算
.for-date-offset(@classname, @width, @padding, @i: 0) when (@i <= 6) {
    .@{prefixCls}-@{classname}-left@{i} {
        left: @width * @i + @padding;
    }

    .@{prefixCls}-@{classname}-right@{i} {
        right: @width * @i + @padding;
    }

    .for-date-offset(@classname, @width, @padding, @i + 1);
}

/**************************************************************/
@input-xs-size: {
    @height: 26px;
    @fontSize: 12px;
}

@input-sm-size: {
    @height: 30px;
    @fontSize: 12px;
}

@input-md-size: {
    @height: 34px;
    @fontSize: 14px;
}

@input-lg-size: {
    @height: 38px;
    @fontSize: 14px;
}

@input-xl-size: {
    @height: 42px;
    @fontSize: 16px;
}

// 输入组件size计算
.for-input-height-style(@classname, @sizeList, @i: 1) when (@i <= length(@sizeList)) {
    @size: extract(@sizeList, @i);
    @realSize: "input-@{size}-size";
    @height: @@realSize[@height];
    @fontSize: @@realSize[@fontSize];

    .@{prefixCls}-@{classname}-size-@{size} {
        height: @height;
    }

    .for-input-height-style(@classname, @sizeList, @i + 1);
}

.for-input-font-size-style(@classname, @sizeList, @i: 1) when (@i <= length(@sizeList)) {
    @size: extract(@sizeList, @i);
    @realSize: "input-@{size}-size";
    @height: @@realSize[@height];
    @fontSize: @@realSize[@fontSize];

    .@{prefixCls}-@{classname}-size-@{size} {
        .font-height(@fontSize);
    }

    .for-input-font-size-style(@classname, @sizeList, @i + 1);
}

.for-input-padding-style(@classname, @sizeList, @i: 1) when (@i <= length(@sizeList)) {
    @size: extract(@sizeList, @i);
    @realSize: "input-@{size}-size";
    @height: @@realSize[@height];
    @fontSize: @@realSize[@fontSize];
    @padding: (@height - (@fontSize + 8px) - 4px) / 2;

    .@{prefixCls}-@{classname}-size-@{size} {
        padding-top: @padding;
        padding-bottom: @padding;
    }

    .for-input-padding-style(@classname, @sizeList, @i + 1);
}

/**************************************************************/