Skip to content

Instantly share code, notes, and snippets.

Created January 5, 2013 13:00
Show Gist options
  • Save anonymous/4461459 to your computer and use it in GitHub Desktop.
Save anonymous/4461459 to your computer and use it in GitHub Desktop.
@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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment