From: Mark Otto Date: Mon, 27 Apr 2015 21:11:07 +0000 (-0700) Subject: more flex grid stuff X-Git-Tag: v4.0.0-alpha~238^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d9d351e2feb9430aad420fbd9397a4b6040b97d9;p=thirdparty%2Fbootstrap.git more flex grid stuff --- diff --git a/scss/_grid.scss b/scss/_grid.scss index 5a165a75a6..583c00eac6 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -44,8 +44,15 @@ @include make-grid-columns(); -// Flex column reordering + +// Flex variation +// +// Custom styles for additional flex alignment options. + @if $enable-flex { + + // Flex column reordering + .col-xs-first { order: -1; } .col-xs-last { order: 1; } @@ -53,19 +60,71 @@ .col-sm-first { order: -1; } .col-sm-last { order: 1; } } - @include media-breakpoint-up(md) { .col-md-first { order: -1; } .col-md-last { order: 1; } } - @include media-breakpoint-up(lg) { .col-lg-first { order: -1; } .col-lg-last { order: 1; } } - @include media-breakpoint-up(xl) { .col-xl-first { order: -1; } .col-xl-last { order: 1; } } -} + + // Alignment for every column in row + + .row-xs-top { align-items: flex-start; } + .row-xs-center { align-items: center; } + .row-xs-bottom { align-items: flex-end; } + + @include media-breakpoint-up(sm) { + .row-sm-top { align-items: flex-start; } + .row-sm-center { align-items: center; } + .row-sm-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(md) { + .row-md-top { align-items: flex-start; } + .row-md-center { align-items: center; } + .row-md-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(lg) { + .row-lg-top { align-items: flex-start; } + .row-lg-center { align-items: center; } + .row-lg-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(xl) { + .row-xl-top { align-items: flex-start; } + .row-xl-center { align-items: center; } + .row-xl-bottom { align-items: flex-end; } + } + + // Alignment per column + + .col-xs-top { align-self: flex-start; } + .col-xs-center { align-self: center; } + .col-xs-bottom { align-self: flex-end; } + + @include media-breakpoint-up(sm) { + .col-sm-top { align-self: flex-start; } + .col-sm-center { align-self: center; } + .col-sm-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(md) { + .col-md-top { align-self: flex-start; } + .col-md-center { align-self: center; } + .col-md-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(lg) { + .col-lg-top { align-self: flex-start; } + .col-lg-center { align-self: center; } + .col-lg-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(xl) { + .col-xl-top { align-self: flex-start; } + .col-xl-center { align-self: center; } + .col-xl-bottom { align-self: flex-end; } + } + +} \ No newline at end of file