diff options
| -rw-r--r-- | scss/_utilities.scss | 4 | ||||
| -rw-r--r-- | scss/utilities/_flex.scss | 34 |
2 files changed, 16 insertions, 22 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c0df1222f..24d6868a5 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -6,3 +6,7 @@ @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; + +@if $enable-flex and $enable-grid-classes { + @import "utilities/flex"; +} diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 3bcf372bd..68b23889c 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -2,34 +2,24 @@ // // Custom styles for additional flex alignment options. -@if $enable-flex and $enable-grid-classes { - +@each $breakpoint in map-keys($grid-breakpoints) { // 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; } - } + @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; } - } + @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; } - } + @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; } } } |