mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 07:12:41 +00:00
114 lines
2.6 KiB
SCSS
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";
|