UNPKG

2.69 kBSCSSView Raw
1@charset "UTF-8";
2
3@import "../core/index-noreset.scss";
4@import "scss/mixin";
5@import "scss/variable";
6
7/* Grid System */
8/* 根据 Alibaba Base DPL(BASE DPL)设计规范实现 */
9/* 栅格系统, 根据不同的屏幕尺寸情况，调整这些区块的排版，将页面划分为若干等宽的列，然后推荐通过等宽列来创建响应式的页面区块。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。 */
10/* ------------------------------- */
11
12.#{$css-prefix}row {
13 @include box-sizing;
14 display: flex;
15
16 &.#{$css-prefix}row-wrap {
17 flex-wrap: wrap;
18 }
19
20 &.#{$css-prefix}row-fixed {
21 @include breakpoint-row-width();
22 }
23
24 &.#{$css-prefix}row-fixed-xxs {
25 width: $grid-xxs;
26 }
27 &.#{$css-prefix}row-fixed-xs {
28 width: $grid-xs;
29 }
30 &.#{$css-prefix}row-fixed-s {
31 width: $grid-s;
32 }
33 &.#{$css-prefix}row-fixed-m {
34 width: $grid-m;
35 }
36 &.#{$css-prefix}row-fixed-l {
37 width: $grid-l;
38 }
39 &.#{$css-prefix}row-fixed-xl {
40 width: $grid-xl;
41 }
42
43 &.#{$css-prefix}row-justify-start {
44 justify-content: flex-start;
45 }
46 &.#{$css-prefix}row-justify-end {
47 justify-content: flex-end;
48 }
49 &.#{$css-prefix}row-justify-center {
50 justify-content: center;
51 }
52 &.#{$css-prefix}row-justify-space-between {
53 justify-content: space-between;
54 }
55 &.#{$css-prefix}row-justify-space-around {
56 justify-content: space-around;
57 }
58
59 &.#{$css-prefix}row-align-top {
60 align-items: flex-start;
61 }
62 &.#{$css-prefix}row-align-bottom {
63 align-items: flex-end;
64 }
65 &.#{$css-prefix}row-align-center {
66 align-items: center;
67 }
68 &.#{$css-prefix}row-align-baseline {
69 align-items: baseline;
70 }
71 &.#{$css-prefix}row-align-stretch {
72 align-items: stretch;
73 }
74}
75
76.#{$css-prefix}col {
77 flex: 1;
78
79 &.#{$css-prefix}col-top {
80 align-self: flex-start;
81 }
82 &.#{$css-prefix}col-bottom {
83 align-self: flex-end;
84 }
85 &.#{$css-prefix}col-center {
86 align-self: center;
87 }
88}
89
90/* IE9 pack */
91@media all and (min-width: 0\0) and (min-resolution: .001dpcm) {
92 .#{$css-prefix}row {
93 display: table;
94 width: 100%;
95 }
96
97 .#{$css-prefix}col {
98 display: table-cell;
99 vertical-align: top;
100 }
101}
102
103@include make-columns();
104@include make-5columns();
105@include make-columns-fixed();
106
107@include make-offset();
108@include make-offset-fixed();
109
110@include visible-hidden-all-points();
111@include visible-hidden-all-points-row();
112
113@import "./rtl.scss";