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

UI Component for chief editor

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

// Grid system
@grid-columns: 24;
@grid-gutter-width: 0;

// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;

// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

.make-row(@gutter: @grid-gutter-width) {
    position: relative;
    height: auto;
    margin-right: (@gutter / -2);
    margin-left: (@gutter / -2);
    .clearfix;
}

.make-grid-columns() {
    .col(@index) {
        @item: ~'.@{prefixCls}-col-@{index}, .@{prefixCls}-col-xs-@{index}, .@{prefixCls}-col-sm-@{index}, .@{prefixCls}-col-md-@{index}, .@{prefixCls}-col-lg-@{index}';
        .col((@index + 1), @item);
    }
    .col(@index, @list) when (@index =< @grid-columns) {
        @item: ~'.@{prefixCls}-col-@{index}, .@{prefixCls}-col-xs-@{index}, .@{prefixCls}-col-sm-@{index}, .@{prefixCls}-col-md-@{index}, .@{prefixCls}-col-lg-@{index}';
        .col((@index + 1), ~'@{list}, @{item}');
    }
    .col(@index, @list) when (@index > @grid-columns) {
        @{list} {
            position: relative;
            // Prevent columns from collapsing when empty
            min-height: 1px;
            padding-right: (@grid-gutter-width / 2);
            padding-left: (@grid-gutter-width / 2);
        }
    }
    .col(1);
}

.float-grid-columns(@class) {
    .col(@index) {
        // initial
        @item: ~'.@{prefixCls}-col@{class}-@{index}';
        .col((@index + 1), @item);
    }
    .col(@index, @list) when (@index =< @grid-columns) {
        // general
        @item: ~'.@{prefixCls}-col@{class}-@{index}';
        .col((@index + 1), ~'@{list}, @{item}');
    }
    .col(@index, @list) when (@index > @grid-columns) {
        // terminal
        @{list} {
            flex: 0 0 auto;
            float: left;
        }
    }

    .col(1);
}

.loop-grid-columns(@index, @class) when (@index > 0) {

    .@{prefixCls}-col@{class}-@{index} {
        display: block;
        box-sizing: border-box;
        width: percentage((@index / @grid-columns));
    }
    .@{prefixCls}-col@{class}-push-@{index} {
        left: percentage((@index / @grid-columns));
    }
    .@{prefixCls}-col@{class}-pull-@{index} {
        right: percentage((@index / @grid-columns));
    }
    .@{prefixCls}-col@{class}-offset-@{index} {
        margin-left: percentage((@index / @grid-columns));
    }
    .@{prefixCls}-col@{class}-order-@{index} {
        order: @index;
    }
    .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@index, @class) when (@index = 0) {
    .@{prefixCls}-col@{class}-@{index} {
        display: none;
    }
    .@{prefixCls}-col-push-@{index} {
        left: auto;
    }
    .@{prefixCls}-col-pull-@{index} {
        right: auto;
    }
    .@{prefixCls}-col@{class}-push-@{index} {
        left: auto;
    }
    .@{prefixCls}-col@{class}-pull-@{index} {
        right: auto;
    }
    .@{prefixCls}-col@{class}-offset-@{index} {
        margin-left: 0;
    }
    .@{prefixCls}-col@{class}-order-@{index} {
        order: 0;
    }
}

.make-grid(@class: ~'') {
    .float-grid-columns(@class);
    .loop-grid-columns(@grid-columns, @class);
}

.@{prefixCls}-row {
    .make-row();

    display: block;
    box-sizing: border-box;

    &-type-flex {
        display: flex;
        flex-flow: row wrap;

        &::before,
        &::after {
            display: flex;
        }
    }

    // x轴原点
    &-align-start {
        align-items: flex-start;
    }

    // x轴居中
    &-align-center {
        align-items: center;
    }

    // x轴反方向
    &-align-end {
        align-items: flex-end;
    }

    &-type-flex&-justify-start {
        justify-content: flex-start;
    }

    &-type-flex&-justify-center {
        justify-content: center;
    }

    &-type-flex&-justify-end {
        justify-content: flex-end;
    }

    &-type-flex&-justify-space-around {
        justify-content: space-around;
    }

    &-type-flex&-justify-space-between {
        justify-content: space-between;
    }
}

.@{prefixCls}-col {
    position: relative;
}

.make-grid-columns();
.make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
    .make-grid(-sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
    .make-grid(-md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
    .make-grid(-lg);
}

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: @screen-xl-min) {
    .make-grid(-xl);
}

// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: @screen-xxl-min) {
    .make-grid(-xxl);
}