hippie/modules/_flexbox.scss

/**
 * @description
 * Generates flexbox properties for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
 * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * @link spec http://www.w3.org/TR/css3-flexbox/
 */

/**
 * @returns
 *   display: -webkit-box;
 *   display: -moz-box;
 *   display: -ms-flexbox;
 *   display: -webkit-flex;
 *   display: flex;
 *
 * @example
 *   .selector {
 *     @include x-display-flex;
 *   }
 */
@mixin x-display-flex {
	display: -webkit-box;  // Chrome 20-, iOS 6-, Safari 3.1  -6
	display: -moz-box;     // FF 19-
	display: -webkit-flex; // Chrome 21 - 28
	display: -ms-flexbox;  // IE 10
	display: flex;         // FF 20+, Chrome 29+, Opera 12.1, 17+
}

/**
 * @param values
 * @returns
 *   -webkit-box-flex: <values>;
 *      -moz-box-flex: <values>;
 *       -webkit-flex: <values>;
 *           -ms-flex: <values>;
 *               flex: <values>;
 *
 * @example
 *   .selector {
 *     @include x-flex(1 1 auto);
 *   }
 */
@mixin x-flex ($values...) {
	-webkit-box-flex: $values; // Chrome 20-, iOS 6-, Safari 3.1 - 6
	   -moz-box-flex: $values; // FF 19-
	    -webkit-flex: $values; // Chrome 21 - 28
	        -ms-flex: $values; // IE 10
	            flex: $values; // FF 20+, Chrome 29+, Opera 12.1, 17+
}

/**
 * @param value
 * @returns
 *   -webkit-box-ordinal-group: <value>;
 *      -moz-box-ordinal-group: <value>;
 *              -ms-flex-order: <value>;
 *               -webkit-order: <value>;
 *                       order: <value>;
 *
 * @example
 *   .selector {
 *     @include x-order(1);
 *   }
 */
@mixin x-order ($value) {
	-webkit-box-ordinal-group: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
	   -moz-box-ordinal-group: $value; // FF 19-
	           -ms-flex-order: $value; // IE 10
	            -webkit-order: $value; // Chrome 21 - 28
	                    order: $value; // FF 20+, Chrome 29+, Opera 12.1, 17+
}

/**
 * @param value
 * @returns
 *    -webkit-flex-wrap: <value>;
 *        -ms-flex-wrap: <value>;
 *            flex-wrap: <value>;
 *
 * @example
 *   .selector {
 *     @include x-flex-wrap(wrap);
 *   }
 */
@mixin x-flex-wrap ($value) {
	// IE 10
	@if $value == nowrap {
		-ms-flex-wrap: none;
	} @else {
		-ms-flex-wrap: $value;
	}
	-webkit-flex-wrap: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
	        flex-wrap: $value; // FF 28+, Chrome 21+, Opera 12.1, 17+, IE 11
}

/**
 * @param value
 * @returns
 *   -webkit-align-content: <value>;
 *      -moz-align-content: <value>;
 *      -ms-flex-line-pack: <value>;
 *           align-content: <value>;
 * @example
 *   .selector {
 *     @include x-align-content(center);
 *   }
 */
 @mixin x-align-content ($value) {
 	// IE 10
 	@if $value == flex-start {
 		-ms-flex-line-pack: start;
 	} @else if $value == flex-end {
 		-ms-flex-line-pack: end;
 	} @else if $value == space-between {
 		-ms-flex-line-pack: justify;
 	} @else if $value == space-around {
 		-ms-flex-line-pack: distribute;
 	} @else {
 		-ms-flex-line-pack: $value;
 	}
	-webkit-align-content: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
	   -moz-align-content: $value; // FF 19-
	        align-content: $value; // FF 20+, Chrome 21+, Opera 12.1, 17+, IE 11
 }

/**
 * @param value
 * @returns
 *	  -webkit-box-direction: <value>;
 *		 -moz-box-direction: <value>;
 *       -webkit-box-orient: <value>;
 *		    -moz-box-orient: <value>;
 *   -webkit-flex-direction: <value>;
 *      -moz-flex-direction: <value>;
 *       -ms-flex-direction: <value>;
 *           flex-direction: <value>;
 * @example
 *   .selector {
 *     @include x-flex-direction(row-reverse);
 *   }
 */
 @mixin x-flex-direction ($value) {
	@if $value == row {
		-webkit-box-direction: normal;
		   -moz-box-direction: normal;
		   -webkit-box-orient: horizontal;
		      -moz-box-orient: horizontal;
	} @elseif $value == row-reverse {
		-webkit-box-direction: reverse;
		   -moz-box-direction: reverse;
		   -webkit-box-orient: horizontal;
		      -moz-box-orient: horizontal;
	} @elseif $value == column {
		-webkit-box-direction: normal;
		   -moz-box-direction: normal;
		   -webkit-box-orient: vertical;
		      -moz-box-orient: vertical;
	} @elseif $value == column-reverse {
		-webkit-box-direction: reverse;
		   -moz-box-direction: reverse;
		   -webkit-box-orient: vertical;
		      -moz-box-orient: vertical;
	}

 	-webkit-flex-direction: $value;
 	   -moz-flex-direction: $value;
 	    -ms-flex-direction: $value;
 	        flex-direction: $value;
 }

/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */