From: Mark Otto Date: Sat, 6 Feb 2016 08:58:19 +0000 (-0800) Subject: Conditionally include the flex utils in the import stack and reduce to a single query X-Git-Tag: v4.0.0-alpha.3~312^2~25 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=044716ed4a99b0da220af56b7b56de7cbf8e400f;p=thirdparty%2Fbootstrap.git Conditionally include the flex utils in the import stack and reduce to a single query --- diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c0df1222fa..24d6868a50 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 3bcf372bd5..68b23889c3 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; } } }