rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Conditionally include the flex utils in the import stack and reduce to a single query

Browse Source
This commit is contained in:
Mark Otto 2016-02-06 00:58:19 -08:00
parent f50dedaaaf
commit 044716ed4a
2 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_utilities.scss
View File

@ -6,3 +6,7 @@
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
@if $enable-flex and $enable-grid-classes {
@import "utilities/flex";
}

34
scss/utilities/_flex.scss
View File

@ -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; }
}
}