-
-
Save cimmanon/4461470 to your computer and use it in GitHub Desktop.
This collection of Sass mixins to cover all 3 flexbox specifications that have been implemented. More information can be found here: https://gist.github.com/cimmanon/727c9d558b374d27c5b6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you add an ".scss" extension to the file name? It will turn on syntax highlighting, and make this considerably easier to read.