diff options
| author | Mark Otto <markdotto@gmail.com> | 2016-01-07 03:01:00 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2016-02-06 11:52:53 +0300 |
| commit | f50dedaaaf2d6d95beb7c1efa8b561e894eb03e7 (patch) | |
| tree | b2224ea0d625f9e2f1a955f28df54531b0bd2650 | |
| parent | cac92017d3d9fcfc4641379fc0350318efbb6059 (diff) | |
Move grid flex classes to utils instead maybe?
| -rw-r--r-- | scss/_grid.scss | 37 | ||||
| -rw-r--r-- | scss/utilities/_flex.scss | 35 |
2 files changed, 35 insertions, 37 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index de5b8fc4d7..78a0d91a92 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -50,40 +50,3 @@ @include make-grid-columns(); } - - -// Flex variation -// -// Custom styles for additional flex alignment options. - -@if $enable-flex and $enable-grid-classes { - - // Flex column reordering - - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .col-#{$breakpoint}-first { order: -1; } - .col-#{$breakpoint}-last { order: 1; } - } - } - - // Alignment for every column in row - - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .row-#{$breakpoint}-top { align-items: flex-start; } - .row-#{$breakpoint}-center { align-items: center; } - .row-#{$breakpoint}-bottom { align-items: flex-end; } - } - } - - // Alignment per column - - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .col-#{$breakpoint}-top { align-self: flex-start; } - .col-#{$breakpoint}-center { align-self: center; } - .col-#{$breakpoint}-bottom { align-self: flex-end; } - } - } -} diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss new file mode 100644 index 0000000000..3bcf372bd5 --- /dev/null +++ b/scss/utilities/_flex.scss @@ -0,0 +1,35 @@ +// Flex variation +// +// Custom styles for additional flex alignment options. + +@if $enable-flex and $enable-grid-classes { + + // Flex column reordering + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + } + } + + // Alignment for every column in row + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .flex-all-#{$breakpoint}-top { align-items: flex-start; } + .flex-all-#{$breakpoint}-center { align-items: center; } + .flex-all-#{$breakpoint}-bottom { align-items: flex-end; } + } + } + + // Alignment per column + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-top { align-self: flex-start; } + .flex-#{$breakpoint}-center { align-self: center; } + .flex-#{$breakpoint}-bottom { align-self: flex-end; } + } + } +} |