siwi-layout/src/layout.less

layout for siwi ui

@import "../node_modules/siwi-variables/variables.less";
@import "mixins";
@css-namespace: replace(~"@{css-prefix}", '-', '');
@row: replace(~"@{grid-row-prefix}", '-', '');
@col: replace(~"@{grid-column-prefix}", '-', '');
.@{css-namespace} {
    &.@{row} {
        .make-row();
        display: block;
    }
    &.flex-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        &:before,
        &:after {
            display: flex;
        }   
    }
    &.justify-content{
        // x轴原点
        &-flex-start {
            justify-content: flex-start;
        }
        // x轴居中
        &-center {
            justify-content: center;
        }
        // x轴反方向
        &-flex-end {
            justify-content: flex-end;
        }
        // x轴平分
        &-space-between {
            justify-content: space-between;
        }
        // x轴有间隔地平分
        &-space-around {
            justify-content: space-around;
        }
    }
    &.align-items {
        // 顶部对齐
        &-flex-start {
            align-items: flex-start;
        }
        // 居中对齐
        &-center {
            align-items: center;
        }
        // 底部对齐
        &-flex-end {
            align-items: flex-end;
        }
        &-baseline {
            align-items: baseline;
        }
        // 盛满容器
        &-stretch {
            align-items: stretch;
        }
    }
    // CSS align-content 属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行。当弹性容器只有一行时无作用。
    &.align-content {
        &-flex-start {
            align-content: flex-start;
        }
        &-flex-end {
            align-content: flex-end;
        } 
        &-center {
            align-content: center;
        }
        &-space-between {
            align-content: space-between;
        }
        &-space-around {
            align-content: space-around;
        }
        &-space-evenly {
            align-content: space-evenly;
        }
        &-stretch {
            align-content: stretch;
        }
    }
}

.@{col} {
    position: relative;
    display: block;
}

.make-grid();
// Extra small grid


.make-grid(xs-);

// Small grid

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


// Medium grid

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

// Large grid

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

.make-pull-push-offset-order();