diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/mixins/_grid-framework.scss | 14 | ||||
| -rw-r--r-- | scss/mixins/_grid.scss | 23 |
2 files changed, 12 insertions, 25 deletions
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 51eda0561..2f4bb0b79 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -8,26 +8,21 @@ @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); @include media-breakpoint-up($breakpoint, $breakpoints) { - // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) - // %grid-column-float-#{$breakpoint} { - // float: left; - // } @if $enable-flex { .col-#{$breakpoint} { - @include make-col($gutter); + @extend column-basics; // Relative position, min-height, and horizontal padding flex-basis: 0; flex-grow: 1; max-width: 100%; } } + @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { - // @if not $enable-flex { - // @extend %grid-column-float-#{$breakpoint}; - // } - @include make-col-span($i, $columns); + @include make-col($i, $columns); } } + @each $modifier in (pull, push) { @for $i from 0 through $columns { .#{$modifier}-#{$breakpoint}-#{$i} { @@ -35,6 +30,7 @@ } } } + // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index f358ac388..c3a492e68 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -33,26 +33,17 @@ margin-right: ($gutter / -2); } -@mixin make-col($gutter: $grid-gutter-width) { +// Used here for `make-col` and in the `grid-framework` for generating +// predefined grid classes. +%column-basics { position: relative; - // @if $enable-flex { - // flex: 1; - // } @else { - // float: left; - // } - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); -} - -@mixin make-col-span($size, $columns: $grid-columns) { - position: relative; - @if $enable-flex { - flex: 0 0 auto; - } min-height: 1px; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); +} + +@mixin make-col($size, $columns: $grid-columns) { + @extend column-basics; @if $enable-flex { flex: 0 0 percentage($size / $columns); |