Flexbox mixins

@import "compass/css3/shared";

// December 2012 Editor's Draft (http://dev.w3.org/csswg/css3-flexbox/ | http://www.w3.org/TR/css3-flexbox/)
// Opera 12.1 (unprefixed)
// Firefox 20 (unprefixed)
// Chrome 21 (prefixed)
$flex-moz: false !default;
$flex-webkit: true !default;
$flex-o: false !default;
$flex-ms: false !default;
$flex-khtml: false !default;
$flex-official: true !default;

// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
// Firefox <20 (prefixed)
$flex-2009-webkit: false !default;
$flex-2009-moz: true !default;

// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
// Demo: http://umaar.github.com/css-flexbox-demo/
// More: http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/
// Internet Explorer 10 (prefixed) (http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx)
$flex-2012-webkit: true !default;
$flex-2012-moz: true !default;
$flex-2012-ms: true !default;

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

@mixin flex-2012($property, $value) {
	@include experimental($property, $value, $flex-2012-moz, $flex-2012-webkit, false, $flex-2012-ms, false, false);
}

@mixin flex-2009($property, $value) {
	@include experimental($property, $value, $flex-2009-moz, $flex-2009-webkit, false, false, false, false);
}

@mixin flex-experimental($property, $value) {
	@include experimental(flex-direction, $value,
		$flex-2012-moz or $flex-2009-moz,
		$flex-2012-webkit or $flex-2009-webkit,
		false, // opera
		$flex-2012-ms,
		false, // khtml,
		false); // official
}

// $type: flex | inline-flex
@mixin display-flex($type: flex) {
	@include experimental-value(display, box, $flex-2012-moz, $flex-2009-webkit, false, false, false, false);
	@include experimental-value(display, flexbox, $flex-2012-moz, $flex-2012-webkit, false, $flex-2012-ms, false, false);
	@include experimental-value(display, $type, $flex-moz, $flex-webkit, $flex-o, $flex-ms, $flex-khtml, $flex-official);
}

// -------------------------------------------------------------------------------- Flex

// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
@mixin flex($value) {
	@if unitless(nth($value, 1)) {
		@include flex-2009(box-flex, $value);
	}
	@include flex-2012(flex, $value);
	@include flex-standard(flex, $value);
}

// $value: Integer
@mixin flex-grow($value) {
	@include flex-2009(box-flex, $value);
	@include flex-standard(flex-grow, $value);
}

// $value: Integer
@mixin flex-shrink($value) {
	@include flex-standard(flex-shrink, $value);
}

// $value: united number (eg: 100px)
@mixin flex-basis($value) {
	@include flex-standard(flex-basis, $value);
}

// -------------------------------------------------------------------------------- Flex-flow

// <'flex-direction'> || <'flex-wrap'>
@mixin flex-flow($value) {
	@if length($value) > 1 {
		@include flex-direction(nth($value, 1));
		@include flex-wrap(nth($value, 2));
	} @else {
		$first: nth($value, 1);
		@if $first == row or $first == row-reverse or $first == column or $first == column-reverse {
			@include flex-direction($value);
		} @else {
			@include flex-wrap(nth($value, 2));
		}
	}
	@include experimental(flex-flow, $value,
		$flex-2012-moz or $flex-moz,
		$flex-2012-webkit or $flex-webkit,
		false, // opera
		$flex-2012-ms or $flex-ms,
		false, // khtml,
		true); // official
}

// $value: row | row-reverse | column | column-reverse
@mixin flex-direction($value) {
	@include flex-2009-direction($value);
	@include experimental(flex-direction, $value,
		$flex-2012-moz or $flex-moz,
		$flex-2012-webkit or $flex-webkit,
		false, // opera
		$flex-2012-ms or $flex-ms,
		false, // khtml,
		true); // official
}

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

// $value: nowrap | wrap | wrap-reverse
@mixin flex-wrap($value) {
	@include flex-2009-wrap($value);
	@include experimental(flex-direction, $value,
		$flex-2012-moz or $flex-moz,
		$flex-2012-webkit or $flex-webkit,
		false, // opera
		$flex-2012-ms or $flex-ms,
		false, // khtml,
		true); // official
}

@mixin flex-2009-wrap($value) {
	@include flex-2009(box-lines, if($value == nowrap, single, multiple));
	@include flex-2009(box-direction, if($value == wrap-reverse, reverse, normal));
}

// -------------------------------------------------------------------------------- "Packing"

// Distributing extra space along the "main axis"
// $value: flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value) {
	@if $value == flex-start {
		@include flex-2009(box-pack, start);
		@include flex-2012(flex-pack, start);
	} @else if $value == flex-end {
		@include flex-2009(box-pack, end);
		@include flex-2012(flex-pack, end);
	} @else if $value == space-between {
		@include flex-2009(box-pack, justify);
		@include flex-2012(flex-pack, justify);
	} @else if $value == space-around {
		@include flex-2009(box-pack, justify);
		@include flex-2012(flex-pack, distribute);
	} @else {
		@include flex-2009(box-pack, $value);
		@include flex-2012(flex-pack, $value);
	}
	
	@include flex-standard(justify-content, $value, $ms: false);
}

// Distributing extra space along the "cross axis"
// $value: flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value) {
	@if $value == flex-start {
		@include flex-2009(box-align, start);
		@include flex-2012(flex-line-pack, start);
	} @else if $value == flex-end {
		@include flex-2009(box-align, end);
		@include flex-2012(flex-line-pack, end);
	} @else if $value == space-between {
		@include flex-2009(box-align, justify);
		@include flex-2012(flex-line-pack, justify);
	} @else if $value == space-around {
		@include flex-2009(box-align, justify);
		@include flex-2012(flex-line-pack, distribute);
	} @else {
		@include flex-2009(box-align, $value);
		@include flex-2012(flex-line-pack, $value);
	}
	
	@include flex-standard(align-content, $value);
}

// -------------------------------------------------------------------------------- Child properties

// Align items along the "cross axis"
// $value: flex-start | flex-end | center | baseline | stretch
@mixin align-items($value) { // the flex container
	// There is no 2009 version of this property
	@if $value == flex-start {
		@include flex-2012(flex-align, start);
	} @else if $value == flex-end {
		@include flex-2012(flex-align, end);
	} @else {
		@include flex-2012(flex-align, $value);
	}
	
	@include flex-standard(align-items, $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) { // children of flex containers
	// There is no 2009 version of this property
	@if $value == flex-start {
		@include flex-2012(flex-item-align, start);
	} @else if $value == flex-end {
		@include flex-2012(flex-item-align, end);
	} @else {
		@include flex-2012(flex-item-align, $value);
	}
	
	@include flex-standard(align-self, $value);
}

// $value: Integer
@mixin order($value) {
	@include flex-experimental(flex-order, $value);
	@include flex-standard(order, $value);
}