amis-rpc-design/libs/amis/packages/amis-ui/scss/layout/_grid.scss
2023-10-07 19:42:30 +08:00

172 lines
3.4 KiB
SCSS

@use 'sass:math';
@mixin make-grid($class) {
@for $i from 1 through $Grid-columns {
.#{$ns}Grid-col--#{$class}#{$i} {
flex: 0 0 percentage(math.div($i, $Grid-columns));
max-width: percentage(math.div($i, $Grid-columns));
min-height: 1px;
padding-left: (math.div($Grid-gutterWidth, 2));
padding-right: (math.div($Grid-gutterWidth, 2));
}
}
.#{$ns}Grid-col--#{$class} {
flex-basis: 0;
flex-grow: 1;
min-height: 1px;
max-width: 100%;
width: 100%;
padding-left: math.div($Grid-gutterWidth, 2);
padding-right: math.div($Grid-gutterWidth, 2);
}
.#{$ns}Grid-col--#{$class}Auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
padding-left: math.div($Grid-gutterWidth, 2);
padding-right: math.div($Grid-gutterWidth, 2);
}
}
// Generate Grid row
@mixin make-row($gutter: $Grid-gutterWidth) {
margin-left: math.div($gutter, -2);
margin-right: math.div($gutter, -2);
display: flex;
flex-wrap: wrap;
}
@include make-grid(xs);
@include media-breakpoint-up(sm) {
.#{$ns}Grid {
@include make-row;
flex: 1;
&--hRight {
justify-content: flex-end;
}
&--hCenter {
justify-content: center;
}
&--hBetween {
justify-content: space-between;
}
&--vMiddle > div {
display: flex;
flex-direction: column;
justify-content: center;
}
&--vBottom > div {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
&--vBetween > div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
& > &-col--vTop {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
& > &-col--vMiddle {
display: flex;
flex-direction: column;
justify-content: center;
}
& > &-col--vBottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
& > &-col--vBetween {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
@include make-grid(sm);
}
@include media-breakpoint-up(md) {
@include make-grid(md);
}
@include media-breakpoint-up(lg) {
@include make-grid(lg);
}
.#{$ns}Grid--none {
margin-left: 0;
margin-right: 0;
> div {
padding-left: 0;
padding-right: 0;
}
}
.#{$ns}Grid--xs {
margin-left: calc(var(--gap-xs) * -0.5);
margin-right: calc(var(--gap-xs) * -0.5);
> div {
padding-left: calc(var(--gap-xs) * 0.5);
padding-right: calc(var(--gap-xs) * 0.5);
}
}
.#{$ns}Grid--sm {
margin-left: calc(var(--gap-sm) * -0.5);
margin-right: calc(var(--gap-sm) * -0.5);
> div {
padding-left: calc(var(--gap-sm) * 0.5);
padding-right: calc(var(--gap-sm) * 0.5);
}
}
.#{$ns}Grid--base {
margin-left: calc(var(--gap-base) * -0.5);
margin-right: calc(var(--gap-base) * -0.5);
> div {
padding-left: calc(var(--gap-base) * 0.5);
padding-right: calc(var(--gap-base) * 0.5);
}
}
.#{$ns}Grid--md {
margin-left: calc(var(--gap-md) * -0.5);
margin-right: calc(var(--gap-md) * -0.5);
> div {
padding-left: calc(var(--gap-md) * 0.5);
padding-right: calc(var(--gap-md) * 0.5);
}
}
.#{$ns}Grid--lg {
margin-left: calc(var(--gap-lg) * -0.5);
margin-right: calc(var(--gap-lg) * -0.5);
> div {
padding-left: calc(var(--gap-lg) * 0.5);
padding-right: calc(var(--gap-lg) * 0.5);
}
}