flexbox.scss

@import "compass/css3/shared";

// NOTE:
// All mixins for the 2009 spec have been written assuming they'll be fed property values that
// correspond to the standard spec.  Some mixins can be fed values from the 2009 spec, but don't
// rely on it.  The `legacy-order` mixin will increment the value fed to it because the 2009
// `box-ordinal-group` property begins indexing at 1, while the modern `order` property begins
// indexing at 0.

// if `true`, the 2009 properties will be emitted as part of the normal mixin call
// (if this is false, you're still free to explicitly call the legacy mixins yourself)
$flex-legacy-enabled: false !default;

// if `true`, `$flex-legacy-enabled` is treated as false and an `@supports` block is added to 
// the display-flex mixin to hide the standard value from versions of Firefox that support the
// unprefixed properties, but do not support wrapping
// (this includes suppressing the automatic emittion of 2009 properties)
$flex-wrap-required : false !default;

// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
// NOTE: FF did not support wrapping until version ??.  Because the `display: flex` property
// is wrapped in a `@supports (flex-wrap: wrap)` block (when $flex-wrap-required or the $wrap
// argument to the `display-flex` mixin is set to `true`), it will Just Work(TM) when support is
// finally added
// Chrome 21 (prefixed)
// Opera 12.1 (unprefixed)
// Firefox 20 (unprefixed)
$flex-webkit  : true  !default;
$flex-ms      : false !default;
$flex-official: true  !default;

// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
// Chrome 17 (prefixed)
// Internet Explorer 10 (prefixed)
$flex-2012-webkit: true  !default;
$flex-2012-ms    : true  !default;

// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
// NOTE: no browser that implements this spec is known to support `box-lines: multiple`
// Chrome 4? (prefixed)
// Safari 3.1 (prefixed)
// Firefox <20 (prefixed)
$flex-2009-webkit: true  !default;
$flex-2009-moz   : true  !default;

// ====================================================================================================
//                                                                       | Common
// ====================================================================================================

// function for converting a value from the standard specification to one that is comparable from
// an older specification
@function flex-translate-value($value, $version: 2009) {
	$value: unquote($value);

	@if $value == flex {
		@return if($version == 2009, box, flexbox);
	} @else if $value == inline-flex {
		@return if($version == 2009, inline-box, inline-flexbox);
	} @else if $value == flex-start {
		@return start;
	} @else if $value == flex-end {
		@return end;
	} @else if $value == space-between {
		@return justify;
	} @else if $value == space-around { // 2009 doesn't have a value equivalent to `space-around`
		@return if($version == 2009, justify, distribute);
	}
	@return $value;
}

@mixin flex-standard($property, $value) {
	$value: unquote($value);
	@include experimental($property, $value,
		not -moz,
		$flex-webkit,
		not -o,
		$flex-ms,
		not -khtml,
		$flex-official);
}

@mixin flex-2012($property, $value) {
	$value: unquote($value);
	@include experimental($property, $value,
		not -moz,
		$flex-2012-webkit,
		not -o,
		$flex-2012-ms,
		not -khtml,
		not -official);
}

@mixin flex-2009($property, $value) {
	$value: unquote($value);
	@include experimental($property, $value,
		$flex-2009-moz,
		$flex-2009-webkit,
		not -o,
		not -ms,
		not -khtml,
		not -official);
}

// mixin to use if standard and 2012 have the same property names
@mixin flex-modern($property, $value) {
	$value: unquote($value);
	@include experimental($property, $value,
		not -moz,
		$flex-2012-webkit or $flex-webkit,
		not -o,
		$flex-2012-ms or $flex-ms,
		not -khtml,
		$flex-official);
}

// ====================================================================================================
//                                                                       | Display Property
// ====================================================================================================

// $type: flex | inline-flex
@mixin display-flex($type: flex, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-display-flex($type);
	}
	
	@include experimental-value(display, flex-translate-value($type, 2012),
		not -moz,
		$flex-2012-webkit,
		not -o,
		$flex-2012-ms,
		not -khtml,
		not -standard);
		
	@include experimental-value(display, $type,
		not -moz,
		$flex-webkit,
		not -o,
		$flex-ms,
		not -khtml,
		$flex-official and not $wrap);
	
	@if $flex-official and $wrap {
		@supports (flex-wrap: wrap) {
			display: $type;
		}
	}
}

@mixin legacy-display-flex($type: flex) {
	@include experimental-value(display, flex-translate-value($type, 2009),
		$flex-2009-moz,
		$flex-2009-webkit,
		not -o,
		not -ms,
		not -khtml,
		not standard);
}

// ====================================================================================================
//                                                                       | Flex Container Properties
// ====================================================================================================

// $value: <'flex-direction'> || <'flex-wrap'>
@mixin flex-flow($value: row nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-flex-flow($value);
	}
	
	@include flex-modern(flex-flow, $value);
}

@mixin legacy-flex-flow($value: row nowrap) {
	@if length($value) > 1 { // 2009 version doesn't have a shorthand
		@include legacy-flex-direction(nth($value, 1));
		@include legacy-flex-wrap(nth($value, 2));
	} @else {
		$value: unquote($value);
		@if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
			@include legacy-flex-direction($value);
		} @else {
			@include legacy-flex-wrap($value);
		}
	}
}

// ----------------------------------------------------------------------

// $value: row | row-reverse | column | column-reverse
@mixin flex-direction($value: row, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-flex-direction($value);
	}
	
	@include flex-modern(flex-direction, $value);
}

@mixin legacy-flex-direction($value: row) {
	$value: unquote($value);
	@include flex-2009(box-orient, if($value == row or $value == row-reverse, horizontal, vertical));
	@include flex-2009(box-direction, if($value == row-reverse or $value == column-reverse, reverse, normal));
}

// ----------------------------------------------------------------------

// $value: nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-flex-wrap($value);
	}
	
	@include flex-modern(flex-wrap, $value);
}

@mixin legacy-flex-wrap($value: nowrap) {
	// NOTE: 2009 has no equivalent of wrap-reverse
	@include flex-2009(box-lines, if($value == nowrap, single, multiple));
}

// ----------------------------------------------------------------------

// Distributing extra space along the "main axis"
// $value: flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-justify-content($value);
	}
	
	@include flex-2012(flex-pack, flex-translate-value($value, 2012));
	@include flex-standard(justify-content, $value);
}

@mixin legacy-justify-content($value: flex-start) {
	@include flex-2009(box-pack, flex-translate-value($value, 2009));
}

// ----------------------------------------------------------------------

// Distributing extra space along the "cross axis"
// $value: flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-align-content($value);
	}
	
	@include flex-2012(flex-line-pack, flex-translate-value($value, 2012));
	@include flex-standard(align-content, $value);
}

@mixin legacy-align-content($value: flex-start) {
	@include flex-2009(box-align, flex-translate-value($value, 2009));
}

// ----------------------------------------------------------------------

// Align items along the "cross axis"
// $value: flex-start | flex-end | center | baseline | stretch
@mixin align-items($value: stretch) { // the flex container
	// There is no 2009 version of this property
	@include flex-2012(flex-align, flex-translate-value($value, 2012));
	@include flex-standard(align-items, $value);
}

// ====================================================================================================
//                                                                       | Flex Item Properties
// ====================================================================================================

// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	$value: unquote($value);
	@if $legacy and unitless(nth($value, 1)) {
		// 2009 version does not have a shorthand, see `legacy-flex-grow`
		@include legacy-flex-grow(nth($value, 1));
	}
	
	@include flex-modern(flex, $value);
}

// ----------------------------------------------------------------------

// $value: Integer
@mixin flex-grow($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-flex-grow($value);
	}
	
	// There is no 2012 version of this property
	@include flex-standard(flex-grow, $value);
}

@mixin legacy-flex-grow($value: 0) {
	@include flex-2009(box-flex, $value);
}

// ----------------------------------------------------------------------

// $value: Integer
@mixin flex-shrink($value: 1) {
	// There is no 2009 version of this property
	// There is no 2012 version of this property
	@include flex-standard(flex-shrink, $value);
}

// ----------------------------------------------------------------------

// $value: united number (eg: 100px)
@mixin flex-basis($value: auto) {
	// There is no 2009 version of this property
	// There is no 2012 version of this property
	@include flex-standard(flex-basis, $value);
}

// ----------------------------------------------------------------------

// Align items along the "cross axis" -- overrides `align-items` value on individual items
// $value: auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) { // children of flex containers
	// There is no 2009 version of this property
	@include flex-2012(flex-item-align, flex-translate-value($value, 2012));
	@include flex-standard(align-self, $value);
}

// ----------------------------------------------------------------------

// $value: Integer
@mixin order($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
	@if $legacy and not $wrap {
		@include legacy-order($value);
	}
	
	@include flex-2012(flex-order, $value);
	@include flex-standard(order, $value);
}

@mixin legacy-order($value: 0) {
	// the 2009 spec starts the ordering at 1 instead of 0 like the modern specs
	@include flex-2009(box-ordinal-group, $value + 1);
}