mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:18:29 +08:00
160 lines
4.0 KiB
SCSS
160 lines
4.0 KiB
SCSS
// .#{$ns}form-grid {
|
|
// >div>.form-group {
|
|
// margin-left: 0;
|
|
// margin-right: 0;
|
|
// }
|
|
// }
|
|
|
|
// Grid
|
|
// @mixin container-fixed($gutter: $Grid-gutterWidth) {
|
|
// margin-right: auto;
|
|
// margin-left: auto;
|
|
// padding-left: floor(($gutter / 2));
|
|
// padding-right: ceil(($gutter / 2));
|
|
// @include clearfix;
|
|
// }
|
|
|
|
// Framework Grid
|
|
// @mixin make-grid-columns($i: 1, $list: ".#{$ns}Grid-col--xs#{$i}, .#{$ns}Grid-col--sm#{$i}, .#{$ns}Grid-col--md#{$i}, .#{$ns}Grid-col--lg#{$i}") {
|
|
// @for $i from (1 + 1) through $Grid-columns {
|
|
// $list: "#{$list}, .#{$ns}Grid-col--xs#{$i}, .#{$ns}Grid-col--sm#{$i}, .#{$ns}Grid-col--md#{$i}, .#{$ns}Grid-col--lg#{$i}";
|
|
// }
|
|
|
|
// #{$list} {
|
|
// position: relative;
|
|
// min-height: 1px;
|
|
// padding-left: ceil(($Grid-gutterWidth / 2));
|
|
// padding-right: floor(($Grid-gutterWidth / 2));
|
|
// }
|
|
// }
|
|
|
|
// @mixin float-grid-columns($class, $i: 1, $list: ".#{$ns}Grid-col--#{$class}#{$i}") {
|
|
// @for $i from (1 + 1) through $Grid-columns {
|
|
// $list: "#{$list}, .#{$ns}Grid-col--#{$class}#{$i}";
|
|
// }
|
|
|
|
// #{$list} {
|
|
// float: left;
|
|
// }
|
|
// }
|
|
|
|
// @mixin calc-grid-column($index, $class, $type) {
|
|
// @if ($type==width) and ($index > 0) {
|
|
// .#{$ns}Grid-col--#{$class}#{$index} {
|
|
// width: percentage(($index / $Grid-columns));
|
|
// }
|
|
// }
|
|
|
|
// @if ($type==push) and ($index > 0) {
|
|
// .#{$ns}Grid-col--#{$class}Push#{$index} {
|
|
// left: percentage(($index / $Grid-columns));
|
|
// }
|
|
// }
|
|
|
|
// @if ($type==push) and ($index==0) {
|
|
// .#{$ns}Grid-col--#{$class}Push0 {
|
|
// left: auto;
|
|
// }
|
|
// }
|
|
|
|
// @if ($type==pull) and ($index > 0) {
|
|
// .#{$ns}Grid-col--#{$class}Pull#{$index} {
|
|
// right: percentage(($index / $Grid-columns));
|
|
// }
|
|
// }
|
|
|
|
// @if ($type==pull) and ($index==0) {
|
|
// .#{$ns}Grid-col--#{$class}Pull0 {
|
|
// right: auto;
|
|
// }
|
|
// }
|
|
|
|
// @if ($type==offset) {
|
|
// .#{$ns}Grid-col--#{$class}Offset#{$index} {
|
|
// margin-left: percentage(($index / $Grid-columns));
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// @mixin loop-grid-columns($columns, $class, $type) {
|
|
// @for $i from 0 through $columns {
|
|
// @include calc-grid-column($i, $class, $type);
|
|
// }
|
|
// }
|
|
|
|
@mixin make-grid($class) {
|
|
// @include float-grid-columns($class);
|
|
// @include loop-grid-columns($Grid-columns, $class, width);
|
|
// @include loop-grid-columns($Grid-columns, $class, pull);
|
|
// @include loop-grid-columns($Grid-columns, $class, push);
|
|
// @include loop-grid-columns($Grid-columns, $class, offset);
|
|
|
|
@for $i from 1 through $Grid-columns {
|
|
.#{$ns}Grid-col--#{$class}#{$i} {
|
|
flex: 0 0 percentage($i / $Grid-columns);
|
|
max-width: percentage($i / $Grid-columns);
|
|
min-height: 1px;
|
|
padding-left: ($Grid-gutterWidth / 2);
|
|
padding-right: ($Grid-gutterWidth / 2);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Grid-col--#{$class} {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
min-height: 1px;
|
|
max-width: 100%;
|
|
width: 0; // 很重要,没有的话会被撑开。
|
|
padding-left: ($Grid-gutterWidth / 2);
|
|
padding-right: ($Grid-gutterWidth / 2);
|
|
}
|
|
}
|
|
|
|
// Generate Grid row
|
|
@mixin make-row($gutter: $Grid-gutterWidth) {
|
|
margin-left: ($gutter / -2);
|
|
margin-right: ($gutter / -2);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// .#{$ns}Grid-container {
|
|
// @include container-fixed;
|
|
|
|
// @include media-breakpoint-up(sm) {
|
|
// width: $container-sm;
|
|
// }
|
|
|
|
// @include media-breakpoint-up(md) {
|
|
// width: $container-md;
|
|
// }
|
|
|
|
// @include media-breakpoint-up(lg) {
|
|
// width: $container-lg;
|
|
// }
|
|
// }
|
|
|
|
// .#{$ns}Grid-container-fluid {
|
|
// @include container-fixed;
|
|
// }
|
|
|
|
// @include make-grid-columns;
|
|
|
|
@include make-grid(xs);
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.#{$ns}Grid {
|
|
@include make-row;
|
|
}
|
|
|
|
@include make-grid(sm);
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
@include make-grid(md);
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
@include make-grid(lg);
|
|
}
|