ant-design/components/layout/style/index.less

103 lines
1.5 KiB
Plaintext
Raw Normal View History

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "./mixin";
2015-06-09 18:22:52 +08:00
// Grid system
2016-06-06 11:40:54 +08:00
.ant-row {
2015-06-09 18:22:52 +08:00
.make-row();
display: block;
}
2016-06-06 11:40:54 +08:00
.ant-row-flex {
2015-06-09 18:22:52 +08:00
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:before,
&:after {
display: flex;
}
}
2015-06-09 22:19:35 +08:00
// x轴原点
2016-06-06 11:40:54 +08:00
.ant-row-flex-start {
2015-06-09 22:19:35 +08:00
justify-content: flex-start;
}
// x轴居中
2016-06-06 11:40:54 +08:00
.ant-row-flex-center {
2015-06-09 22:19:35 +08:00
justify-content: center;
}
// x轴反方向
2016-06-06 11:40:54 +08:00
.ant-row-flex-end {
2015-06-09 22:19:35 +08:00
justify-content: flex-end;
}
// x轴平分
2016-06-06 11:40:54 +08:00
.ant-row-flex-space-between {
2015-06-09 22:19:35 +08:00
justify-content: space-between;
}
// x轴有间隔地平分
2016-06-06 11:40:54 +08:00
.ant-row-flex-space-around {
2015-06-09 22:19:35 +08:00
justify-content: space-around;
}
// 顶部对齐
2016-06-06 11:40:54 +08:00
.ant-row-flex-top {
2015-06-09 22:19:35 +08:00
align-items: flex-start;
}
// 居中对齐
2016-06-06 11:40:54 +08:00
.ant-row-flex-middle {
2016-02-25 15:53:28 +08:00
align-items: center;
2015-06-09 22:19:35 +08:00
}
// 底部对齐
2016-06-06 11:40:54 +08:00
.ant-row-flex-bottom {
2016-02-25 15:53:28 +08:00
align-items: flex-end;
2015-06-09 22:19:35 +08:00
}
2016-06-06 11:40:54 +08:00
.ant-col {
2015-06-09 22:19:35 +08:00
position: relative;
display: block;
}
2015-06-09 18:22:52 +08:00
.make-grid-columns();
.make-grid();
2016-03-07 21:03:17 +08:00
// 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);
}