Permalink
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (92 sloc) 3.23 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("flex") {
#{$flex-class-region} {
@include flex-region;
// Alignment
&.flow-top,
&.flow-left { @include flex-region-align(left); }
&.flow-bottom,
&.flow-right { @include flex-region-align(right); }
&.flow-center { @include flex-region-align(center); }
&.flow-between { @include flex-region-align(between); }
&.flow-around { @include flex-region-align(around); }
// Support RTL
@if $text-direction == rtl {
writing-mode: vertical-rl;
}
}
#{$flex-class-block} {
@include flex-block;
@include flex-block-order;
// Override parent alignment
&.self-top,
&.self-left { @include flex-block-align(top); }
&.self-bottom,
&.self-right { @include flex-block-align(bottom); }
&.self-center { @include flex-block-align(center); }
&.self-baseline { @include flex-block-align(baseline); }
&.self-stretch { @include flex-block-align(stretch); }
// Resizing
&.grow { flex-grow: 1; }
&.no-grow { flex-grow: 0; }
&.shrink { flex-shrink: 1; }
&.no-shrink { flex-shrink: 0; }
}
// Global ordering
@for $i from 1 through $flex-order-count {
.order-#{$i} { @include flex-block-order($i); }
}
// Responsive sizes
@each $size, $options in $flex-sizes {
$size-columns: nth($options, 1);
@include in-range(nth($options, 2)) {
@for $i from 1 through $size-columns {
#{$flex-class-block}.#{$size}-#{$i} { flex-basis: flex-span($i, $size-columns); }
}
// Responsive ordering
@for $i from 1 through $flex-order-count {
.#{$size}-order-#{$i} { @include flex-block-order($i); }
}
}
}
//-------------------- Modifiers --------------------//
// Generate a grid of blocks with equal spacing between
@if index($flex-modifiers, "grid") {
#{$flex-class-modifier-grid} {
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
max-width: none;
@if $flex-grid-gutter {
margin-top: -$flex-grid-gutter;
margin-left: -$flex-grid-gutter;
}
> #{$flex-class-block} {
margin-top: $flex-grid-gutter;
margin-left: $flex-grid-gutter;
}
}
}
// Display blocks vertically or horizontally regardless of orientation
@if index($flex-modifiers, "horizontal") {
#{$flex-class-modifier-horizontal} {
@include flex-region-orientation(horizontal);
}
}
@if index($flex-modifiers, "vertical") {
#{$flex-class-modifier-vertical} {
@include flex-region-orientation(vertical);
}
}
// Wrap blocks onto the next line instead of trying to squish into 1 line
@if index($flex-modifiers, "wrap") {
#{$flex-class-modifier-wrap} {
@include flex-region-wrap;
}
}
}