From f50dedaaaf2d6d95beb7c1efa8b561e894eb03e7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Jan 2016 16:01:00 -0800 Subject: Move grid flex classes to utils instead maybe? --- scss/utilities/_flex.scss | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 scss/utilities/_flex.scss (limited to 'scss/utilities') diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss new file mode 100644 index 000000000..3bcf372bd --- /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; } + } + } +} -- cgit v1.2.3