amis/scss/layout/_grid.scss

160 lines
4.0 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
// .#{$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) {
2019-12-06 09:58:08 +08:00
// @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);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
.#{$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);
}
2019-04-30 11:11:25 +08:00
}
// Generate Grid row
@mixin make-row($gutter: $Grid-gutterWidth) {
2019-12-06 09:58:08 +08:00
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
display: flex;
flex-wrap: wrap;
2019-04-30 11:11:25 +08:00
}
// .#{$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) {
2019-12-06 09:58:08 +08:00
.#{$ns}Grid {
@include make-row;
}
2019-12-06 09:58:08 +08:00
@include make-grid(sm);
2019-04-30 11:11:25 +08:00
}
@include media-breakpoint-up(md) {
2019-12-06 09:58:08 +08:00
@include make-grid(md);
2019-04-30 11:11:25 +08:00
}
@include media-breakpoint-up(lg) {
2019-12-06 09:58:08 +08:00
@include make-grid(lg);
2019-04-30 11:11:25 +08:00
}