114 lines
2.6 KiB
SCSS

@charset "UTF-8";
@import "../core/index-noreset.scss";
@import "scss/mixin";
@import "scss/variable";
/* Grid System */
/* 根据 Alibaba Base DPL(BASE DPL)设计规范实现 */
/* 栅格系统, 根据不同的屏幕尺寸情况,调整这些区块的排版,将页面划分为若干等宽的列,然后推荐通过等宽列来创建响应式的页面区块。另外,屏幕宽度较大的时候,区块倾向于水平分布,而屏幕宽度较小的时候,区块倾向于竖直堆叠。 */
/* ------------------------------- */
.#{$css-prefix}row {
@include box-sizing;
display: flex;
&.#{$css-prefix}row-wrap {
flex-wrap: wrap;
}
&.#{$css-prefix}row-fixed {
@include breakpoint-row-width();
}
&.#{$css-prefix}row-fixed-xxs {
width: $grid-xxs;
}
&.#{$css-prefix}row-fixed-xs {
width: $grid-xs;
}
&.#{$css-prefix}row-fixed-s {
width: $grid-s;
}
&.#{$css-prefix}row-fixed-m {
width: $grid-m;
}
&.#{$css-prefix}row-fixed-l {
width: $grid-l;
}
&.#{$css-prefix}row-fixed-xl {
width: $grid-xl;
}
&.#{$css-prefix}row-justify-start {
justify-content: flex-start;
}
&.#{$css-prefix}row-justify-end {
justify-content: flex-end;
}
&.#{$css-prefix}row-justify-center {
justify-content: center;
}
&.#{$css-prefix}row-justify-space-between {
justify-content: space-between;
}
&.#{$css-prefix}row-justify-space-around {
justify-content: space-around;
}
&.#{$css-prefix}row-align-top {
align-items: flex-start;
}
&.#{$css-prefix}row-align-bottom {
align-items: flex-end;
}
&.#{$css-prefix}row-align-center {
align-items: center;
}
&.#{$css-prefix}row-align-baseline {
align-items: baseline;
}
&.#{$css-prefix}row-align-stretch {
align-items: stretch;
}
}
.#{$css-prefix}col {
flex: 1;
&.#{$css-prefix}col-top {
align-self: flex-start;
}
&.#{$css-prefix}col-bottom {
align-self: flex-end;
}
&.#{$css-prefix}col-center {
align-self: center;
}
}
/* IE9 pack */
@media all and (min-width: 0\0) and (min-resolution: .001dpcm) {
.#{$css-prefix}row {
display: table;
width: 100%;
}
.#{$css-prefix}col {
display: table-cell;
vertical-align: top;
}
}
@include make-columns();
@include make-5columns();
@include make-columns-fixed();
@include make-offset();
@include make-offset-fixed();
@include visible-hidden-all-points();
@include visible-hidden-all-points-row();
@import "./rtl.scss";