flex.scss

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