diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 24d6868a507d065b3ee94b292360e6e15cfb8fd2..ac703bc467afe3b64b9a04bf12d30d6f51ee5a07 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -6,7 +6,4 @@ @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; - -@if $enable-flex and $enable-grid-classes { - @import "utilities/flex"; -} +@import "utilities/flex"; diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index cd8476bdb305b04f09ab56670a333de95aa4c0f5..1676806b8f691b743b13b6caed5a361c910c5364 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -2,24 +2,26 @@ // // Custom styles for additional flex alignment options. -@each $breakpoint in map-keys($grid-breakpoints) { - // Flex column reordering - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-first { order: -1; } - .flex-#{$breakpoint}-last { order: 1; } - } +@if $enable-flex and $enable-grid-classes { + @each $breakpoint in map-keys($grid-breakpoints) { + // Flex column reordering + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + } - // Alignment for every column in row - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-top { align-items: flex-start; } - .flex-items-#{$breakpoint}-center { align-items: center; } - .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - } + // Alignment for every column in row + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-top { align-items: flex-start; } + .flex-items-#{$breakpoint}-center { align-items: center; } + .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } + } - // Alignment per column - @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; } + // Alignment per column + @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; } + } } }