diff options
author | Mark Otto <markdotto@gmail.com> | 2015-04-28 00:11:07 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2015-04-28 00:11:07 +0300 |
commit | d9d351e2feb9430aad420fbd9397a4b6040b97d9 (patch) | |
tree | 34babd45a36b7f8123dad27a30372d4d2a99ad0b /scss/_grid.scss | |
parent | 15692d5e5b7456ce3d09cecc80738ca77148ea2e (diff) |
more flex grid stuff
Diffstat (limited to 'scss/_grid.scss')
-rw-r--r-- | scss/_grid.scss | 69 |
1 files changed, 64 insertions, 5 deletions
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 |