gistfile1.scss

// New-style Flexbox SCSS Mixins
// 
// Documentation shamelessly stolen from 
// Chris Coyier <http://css-tricks.com/snippets/css/a-guide-to-flexbox/>

// -----------------------------------------------------------------------------
// Flex Container Properties
// -----------------------------------------------------------------------------

// This defines a flex container; block. Thus, it enables a flex context for all 
// its direct children.
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 10+, Safari 7.0+
@mixin display-flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -ms-flexbox;
	display: flex;
}

// This defines a flex container; inline. Thus, it enables a flex context for 
// all its direct children.
// 
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin display-inline-flex {
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: inline-flex;
}

// This establishes the main-axis, thus defining the direction flex items are 
// placed in the flex container.
//
// $direction 			- row | row-reverse | column | column-reverse
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex-direction($direction) {
	-webkit-flex-direction: $direction;
	-moz-flex-direction: $direction;
	-ms-flex-direction: $direction;
	flex-direction: $direction;
}

// This defines whether the flex container is single-line or multi-line, and the 
// direction of the cross-axis, which determines the direction new lines are 
// stacked in.
//
// $wrap			- nowrap | wrap | wrap-reverse
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex-wrap($wrap) {
	-webkit-flex-wrap: $wrap;
	-moz-flex-wrap: $wrap;
	-ms-flex-wrap: $wrap;
	flex-wrap: $wrap;
}

// This is a shorthand `flex-direction` and `flex-wrap` properties, which 
// together define the flex container's main and cross axes. Default is `row nowrap`;
// 
// $flow			- <‘flex-direction’> || <‘flex-wrap’>
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex-flow($flow) {
	-webkit-flex-flow: $flow;
	-moz-flex-flow: $flow;
	-ms-flex-flow: $flow;
	flex-flow: $flow;
}

// This defines the alignment along the main axis. It helps distribute extra free 
// space leftover when either all the flex items on a line are inflexible, or are 
// flexible but have reached their maximum size. It also exerts some control over 
// the alignment of items when they overflow the line.
//
// $justify			- flex-start | flex-end | center | space-between | space-around
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin justify-content($justify) {
	-webkit-justify-content: $justify;
	-moz-justify-content: $justify;
	-ms-justify-content: $justify;
	justify-content: $justify;
}

// This defines the default behaviour for how flex items are laid out along the 
// cross axis on the current line. Think of it as the justify-content version for 
// the cross-axis (perpendicular to the main-axis).
//
// $align 			- flex-start | flex-end | center | baseline | stretch
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin align-items($align) {
	-webkit-align-items: $align;
	-moz-align-items: $align;
	-ms-align-items: $align;
	align-items: $align;
}

// This aligns a flex container's lines within when there is extra space in the 
// cross-axis, similar to how justify-content aligns individual items within the 
// main-axis.
//
// $align 			- flex-start | flex-end | center | space-between | space-around | stretch
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin align-content($align) {
	-webkit-align-content: $align;
	-moz-align-content: $align;
	-ms-align-content: $align;
	align-content: $align;
}


// -----------------------------------------------------------------------------
// Flex Children Properties
// -----------------------------------------------------------------------------

// By default, flex items are layed out in the source order. However, the order 
// property controls the order in which they appear in their container.
//
// $order 			- <integer>
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin order($order) {
	-webkit-order: $order;
	-moz-order: $order;
	-ms-order: $order;
	order: $order;
}

// This defines the ability for a flex item to grow if necessary. It accepts a 
// unitless value that serves as a proportion. It dictates what amount of the 
// available space inside the flex container the item should take up.
//
// If all items have flex-grow set to 1, every child will set to an equal size 
// inside the container. If you were to give one of the children a value of 2, 
// that child would take up twice as much space as the others.
//
// $grow 			- <number> (default 0)
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex-grow($grow) {
	-webkit-flex-grow: $grow;
	-moz-flex-grow: $grow;
	-ms-flex-grow: $grow;
	flex-grow: $grow;
}

// This defines the ability for a flex item to shrink if necessary.
//
// $shrink 			- <number> (default 1)
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex-shrink($shrink) {
	-webkit-flex-shrink: $shrink;
	-moz-flex-shrink: $shrink;
	-ms-flex-shrink: $shrink;
	flex-shrink: $shrink;
}

// This defines the default size of an element before the remaining space is 
// distributed.
//
// $basis 			- <length> | auto (default auto)
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex-basis($basis) {
	-webkit-flex-basis: $basis;
	-moz-flex-basis: $basis;
	-ms-flex-basis: $basis;
	flex-basis: $basis;
}

// This is the shorthand for flex-grow, flex-shrink and flex-basis. The second 
// and third parameters (flex-shrink, flex-basis) are optional. Default is 0 1 auto.
//
// $flex 			- none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin flex($flex) {
	-webkit-flex: $flex;
	-moz-flex: $flex;
	-ms-flex: $flex;
	flex: $flex;
}

// This allows the default alignment or the one specified by align-items to be 
// overridden for individual flex items.
//
// $align 			- auto | flex-start | flex-end | center | baseline | stretch
//
// Compatible in Chrome 21+, Firefox 22+, Opera 12.1+, IE 11+, Safari 7.0+
@mixin align-self($align) {
	-webkit-align-self: $align;
	-moz-align-self: $align;
	-ms-align-self: $align;
	align-self: $align;
}