Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

New Flexbox Mixins #1218

Merged
merged 10 commits into from

4 participants

@cimmanon

New mixins that support all 3 Flexbox implementations (see: #921). There is a variable name conflict with the old "box" collection: $flexbox-support. I went with naming the support variables after the display property that goes along with it since the year thing might be a little confusing (especially since some articles refer to the Mar 2012 spec as 2011):

  • $flex-support (Sept 2012)
  • $flexbox-support (Mar 2012)
  • $box-support (July 2009)

Examples will be in a later pull request.

@frapontillo

ms and o prefixes should be inverted, per specification, in $flex-support, $flexbox-support, $box-support.
Please see my comment on issue #921.

@cimmanon

The experimental() mixin I'm depending on uses this order: moz, webkit, ms, o, khtml, standard. See this commit to the master branch and #1000 for the reasoning behind the change in prefix order.

@ericam
Owner

I'm ready to pull this in, but it should have docs and an entry in the changelog. Can you do that? Check the documentation readme for more on how docs are generated.

@cimmanon

Yes, I'll get that done this weekend.

@cimmanon

I'm not able to test to make sure the examples/docs work since I can't get bundler to do its job (ruby_prof is failing to compile).

@ericam ericam merged commit e9295c5 into from
@ericam
Owner

Thanks! We can make adjustments still as needed.

@scottdavis
Owner

Docs do not build with this merge:

Loading site data…
Compiling site…
      update  [0.00s]  output/blog/atom.xml
      update  [0.02s]  output/CHANGELOG/index.html

Captain! We’ve been hit!

Message:

Haml::SyntaxError: Illegal nesting: content can't be both given on the same line as %div and nested within it.

Compilation stack:

  - [item]   /examples/compass/css3/flexbox/_flexbox/ (rep default)

Stack trace:

  0. item /examples/compass/css3/flexbox/_flexbox/ (rep default):2
  1. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/haml-3.1.7/lib/haml/parser.rb:341:in `tag'
  2. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/haml-3.1.7/lib/haml/parser.rb:359:in `div'
  3. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/haml-3.1.7/lib/haml/parser.rb:185:in `process_line'
  4. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/haml-3.1.7/lib/haml/parser.rb:148:in `parse'
  5. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/haml-3.1.7/lib/haml/engine.rb:124:in `initialize'
  6. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/nanoc-3.4.3/lib/nanoc/filters/haml.rb:23:in `new'
  7. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/nanoc-3.4.3/lib/nanoc/filters/haml.rb:23:in `run'
  8. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/nanoc-3.4.3/lib/nanoc/base/result_data/item_rep.rb:348:in `filter'
  9. /Users/sdavis/.rvm/gems/ruby-1.9.3-p392/gems/nanoc-3.4.3/lib/nanoc/base/compilation/item_rep_proxy.rb:47:in `filter'
  ... 32 more lines omitted. See full crash log for details.

@ericam
Owner

The local doc setup has been fixed, and I got the flexbox docs running. They're a bit ugly at the moment, though. @cimmanon can you take a look at that? See if you can get them working locally, and clean them up a bit? I had to run bundle install and then ./bin/nanoc aco.

@cimmanon

Trying to get the docs running broke quite a few things on my virtual box. A library Git depends on is missing and I can't build a gem for Compass anymore. I'm stuck until I can get my husband to fix it for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 6, 2013
  1. Added import for new Flexbox mixins

    cimmanon authored
  2. Added tests for Flexbox

    cimmanon authored
Commits on Mar 7, 2013
Commits on Mar 8, 2013
  1. Corrected behavior for argument on mixin

    cimmanon authored
Commits on Mar 10, 2013
  1. Reorganized comments & default variables

    cimmanon authored
Commits on Mar 13, 2013
Commits on Mar 16, 2013
  1. Adjusted function name and added missing commas

    cimmanon authored
Commits on Mar 30, 2013
  1. Added examples/documentation

    cimmanon authored
Commits on Mar 31, 2013
  1. Added missing elipsis

    cimmanon authored
This page is out of date. Refresh to see the latest.
View
8 doc-src/content/examples/compass/css3/flexbox.haml
@@ -0,0 +1,8 @@
+---
+title: CSS3 Flexible Box
+description: unified mixins for the CSS3 flexible box
+framework: compass
+stylesheet: compass/css3/_flexbox.scss
+example: true
+---
+= render "partials/example"
View
89 doc-src/content/examples/compass/css3/flexbox/_flexbox.scss
@@ -0,0 +1,89 @@
+#vertical-center {
+ padding: 0;
+
+ li {
+ background: #CCC;
+ width: 15em;
+ margin: .5em;
+ height: 5em;
+ text-align: center;
+ vertical-align: text-top;
+ display: inline-block; /* non-flexbox browsers */
+ @include display-flex(inline-flex);
+ @include align-items(center);
+ @include justify-content(center);
+ }
+}
+
+#flexible {
+ padding: 0;
+ text-align: center;
+ @include display-flex($wrap: true);
+ @include flex-wrap(wrap);
+
+ li {
+ background: #CCC;
+ min-width: 12em;
+ margin: .5em;
+ padding: .5em;
+ display: inline-block; /* non-flexbox browsers */
+ @include flex(1 0);
+ }
+}
+
+#reorder {
+ $flex-legacy-enabled: true;
+ width: 100%; /* fix for old Firefox */
+ @include display-flex;
+ @include flex-direction(column);
+
+ li:nth-child(even) {
+ background: #CCC;
+ @include order(1);
+ }
+ $flex-legacy-enabled: false;
+}
+
+#layout {
+ @include display-flex($wrap: true);
+ @include flex-wrap(wrap);
+
+ header, footer {
+ @include flex(1 0 100%);
+ }
+
+ header {
+ background: lighten(yellow, 40%);
+ }
+
+ nav {
+ $flex-legacy-enabled: true;
+ ul {
+ padding: 0;
+ margin: -.5em;
+ min-width: 100%; /* fix for old Firefox */
+ @include display(flex);
+ }
+
+ li {
+ background: #CCC;
+ margin: .5em;
+ display: inline-block; /* non-flexbox browsers */
+ @include flex(1 1 30%);
+ }
+ $flex-legacy-enabled: false;
+ }
+
+ article {
+ @include flex(2 1 30em);
+ }
+
+ aside {
+ flex: 1 0 15em;
+ background: lighten(blue, 40%);
+ }
+
+ footer {
+ background: lighten(green, 50%);
+ }
+}
View
46 doc-src/content/examples/compass/css3/flexbox/markup.haml
@@ -0,0 +1,46 @@
+%ul#vertical-center
+ %li One really long element that should wrap. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ %li Two
+ %li Three
+ %li Four
+ %li Five
+ %li Six
+
+%ul#flexible
+ %li One
+ %li Two
+ %li Three
+ %li Four
+ %li Five
+ %li Six
+
+%ul#reorder
+ %li One
+ %li Two
+ %li Three
+ %li Four
+ %li Five
+ %li Six
+
+%section#layout
+ %header
+ %h1 Header Title
+
+ %nav
+ %ul
+ %li One
+ %li Two
+ %li Three
+
+ %article
+ %h1 Another Title
+
+ %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus.
+
+ %aside
+ %h1 Aside Title
+
+ %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis.
+
+ %footer
+ %h1 Footer Title
View
18 doc-src/content/reference/compass/css3/flexbox.haml
@@ -0,0 +1,18 @@
+---
+title: Compass Flexbox
+crumb: Flexbox
+framework: compass
+stylesheet: compass/css3/_flexbox.scss
+meta_description: This module provides mixins that pertain to the CSS3 Flexible Box.
+layout: core
+classnames:
+ - reference
+---
+- render 'reference' do
+ %p
+ This module provides a unified collection of mixins for the following Flexbox specifications:
+
+ %ul
+ %li <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">July 2009 Working Draft</a> (box)
+ %li <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">March 2012 Working Draft</a> (flexbox)
+ %li <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">September 2012 Candidate Recommendation</a> (flex)
View
1  frameworks/compass/stylesheets/compass/_css3.scss 100644 → 100755
@@ -6,6 +6,7 @@
@import "css3/columns";
@import "css3/box-sizing";
@import "css3/box";
+@import "css3/flexbox";
@import "css3/images";
@import "css3/background-clip";
@import "css3/background-origin";
View
294 frameworks/compass/stylesheets/compass/css3/_flexbox.scss
@@ -0,0 +1,294 @@
+@import "shared";
+
+// NOTE:
+// All mixins for the @box 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 @box spec, but don't
+// rely on it. The `legacy-order` mixin will increment the value fed to it because the @box
+// `box-ordinal-group` property begins indexing at 1, while the modern `order` property begins
+// indexing at 0.
+
+// ---------------------------------------------------------------------- | @flex
+
+// 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-support: not -moz, -webkit, not -ms, not -o, not -khtml !default;
+
+// if `true`, `$flex-legacy-enabled` is treated as false and an `@supports` block is added to
+// the display property 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 @box properties)
+$flex-wrap-required : false !default;
+
+// ---------------------------------------------------------------------- | @flexbox
+
+// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
+// Chrome 17 (prefixed)
+// Internet Explorer 10 (prefixed)
+$flexbox-support: not -moz, -webkit, -ms, not -o, not -khtml, not standard !default;
+
+// ---------------------------------------------------------------------- | @box
+
+// 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)
+$box-support: -moz, -webkit, not -ms, not -o, not -khtml, not standard !default;
+
+// If `true`, the @box 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;
+
+// ====================================================================================================
+// | 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: box) {
+ $value: unquote($value);
+
+ @if $value == flex {
+ @return if($version == box, box, flexbox);
+ } @else if $value == inline-flex {
+ @return if($version == box, 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 { // @box doesn't have a value equivalent to `space-around`
+ @return if($version == box, justify, distribute);
+ }
+ @return $value;
+}
+
+@function flex-support-either() {
+ $common: ();
+ @for $i from 1 through length($flex-support) {
+ $common: append($common, nth($flex-support, $i) or nth($flexbox-support, $i), comma);
+ }
+ @return $common;
+}
+
+// ====================================================================================================
+// | 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, flexbox), $flexbox-support...);
+
+ // if `$wrap` is true, then we need to suppress official support as generated by the `experimental()`
+ // mixin so that we can insert it inside an `@supports` block
+ $flex-support-standard: true;
+ $flex-support-list: $flex-support;
+ @if length($flex-support) > 5 {
+ $flex-support-standard: nth($flex-support, 6);
+ // a `slice()` function would really be handy here...
+ $flex-support-list: nth($flex-support, 1), nth($flex-support, 2), nth($flex-support, 3), nth($flex-support, 4), nth($flex-support, 5);
+ }
+ $flex-support-list: append($flex-support-list, if($wrap, false, $flex-support-standard));
+ @include experimental-value(display, $type, $flex-support-list...);
+
+ @if $wrap and $flex-support-standard {
+ @supports (flex-wrap: wrap) {
+ display: $type;
+ }
+ }
+}
+
+@mixin legacy-display-flex($type: flex) {
+ @include experimental-value(display, flex-translate-value($type, box), $box-support...);
+}
+
+// ====================================================================================================
+// | 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 experimental(flex-flow, $value, flex-support-either()...);
+}
+
+@mixin legacy-flex-flow($value: row nowrap) {
+ @if length($value) > 1 { // @box 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 experimental(flex-direction, $value, flex-support-either()...);
+}
+
+@mixin legacy-flex-direction($value: row) {
+ $value: unquote($value);
+ @include experimental(box-orient, if($value == row or $value == row-reverse, horizontal, vertical), $box-support...);
+ @include experimental(box-direction, if($value == row-reverse or $value == column-reverse, reverse, normal), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $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 experimental(flex-wrap, $value, flex-support-either()...);
+}
+
+@mixin legacy-flex-wrap($value: nowrap) {
+ // NOTE: @box has no equivalent of wrap-reverse
+ @include experimental(box-lines, if($value == nowrap, single, multiple), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// 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 experimental(flex-pack, flex-translate-value($value, flexbox), $flexbox-support...);
+ @include experimental(justify-content, $value, $flex-support...);
+}
+
+@mixin legacy-justify-content($value: flex-start) {
+ @include experimental(box-pack, flex-translate-value($value, box), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// 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 experimental(flex-line-pack, flex-translate-value($value, flexbox), $flexbox-support...);
+ @include experimental(align-content, $value, $flex-support...);
+}
+
+@mixin legacy-align-content($value: flex-start) {
+ @include experimental(box-align, flex-translate-value($value, box), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// 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 @box version of this property
+ @include experimental(flex-align, flex-translate-value($value, flexbox), $flexbox-support...);
+ @include experimental(align-items, $value, $flex-support...);
+}
+
+// ====================================================================================================
+// | 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)) {
+ // @box version does not have a shorthand, see `legacy-flex-grow`
+ @include legacy-flex-grow(nth($value, 1));
+ }
+
+ @include experimental(flex, $value, flex-support-either()...);
+}
+
+// ----------------------------------------------------------------------
+
+// $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 @flexbox version of this property
+ @include experimental(flex-grow, $value, $flex-support...);
+}
+
+@mixin legacy-flex-grow($value: 0) {
+ @include experimental(box-flex, $value, $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: Integer
+@mixin flex-shrink($value: 1) {
+ // There is no @box version of this property
+ // There is no @flexbox version of this property
+ @include experimental(flex-shrink, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: united number (eg: 100px)
+@mixin flex-basis($value: auto) {
+ // There is no @box version of this property
+ // There is no @flexbox version of this property
+ @include experimental(flex-basis, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// 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 @box version of this property
+ @include experimental(flex-item-align, flex-translate-value($value, flexbox), $flexbox-support...);
+ @include experimental(align-self, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: Integer
+@mixin order($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+ @if $legacy and not $wrap {
+ @include legacy-order($value);
+ }
+
+ @include experimental(flex-order, $value, $flexbox-support...);
+ @include experimental(order, $value, $flex-support...);
+}
+
+@mixin legacy-order($value: 0) {
+ // the @box spec starts the ordering at 1 instead of 0 like the modern specs
+ @include experimental(box-ordinal-group, $value + 1, $box-support...);
+}
View
121 test/fixtures/stylesheets/compass/css/flexbox.css
@@ -0,0 +1,121 @@
+.flex {
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: column nowrap;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ -webkit-flex-pack: justify;
+ -ms-flex-pack: justify;
+ -webkit-justify-content: space-between;
+ justify-content: space-between;
+ -webkit-flex-line-pack: center;
+ -ms-flex-line-pack: center;
+ -webkit-align-content: center;
+ align-content: center;
+ -webkit-flex-align: end;
+ -ms-flex-align: end;
+ -webkit-align-items: flex-end;
+ align-items: flex-end; }
+
+.flex-item {
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ -webkit-flex-item-align: start;
+ -ms-flex-item-align: start;
+ -webkit-align-self: flex-start;
+ align-self: flex-start;
+ -webkit-flex-order: 2;
+ -ms-flex-order: 2;
+ -webkit-order: 2;
+ order: 2; }
+
+.flex-legacy {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -moz-box-direction: normal;
+ -webkit-box-lines: single;
+ -moz-box-lines: single;
+ -webkit-flex-flow: row nowrap;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -moz-box-pack: end;
+ -webkit-flex-pack: end;
+ -ms-flex-pack: end;
+ -webkit-justify-content: flex-end;
+ justify-content: flex-end;
+ -webkit-box-align: start;
+ -moz-box-align: start;
+ -webkit-flex-line-pack: start;
+ -ms-flex-line-pack: start;
+ -webkit-align-content: flex-start;
+ align-content: flex-start;
+ -webkit-flex-align: baseline;
+ -ms-flex-align: baseline;
+ -webkit-align-items: baseline;
+ align-items: baseline; }
+
+.flex-item-legacy {
+ -webkit-box-flex: 2;
+ -moz-box-flex: 2;
+ -webkit-flex: 2 1 20em;
+ -ms-flex: 2 1 20em;
+ flex: 2 1 20em;
+ -webkit-flex-item-align: stretch;
+ -ms-flex-item-align: stretch;
+ -webkit-align-self: stretch;
+ align-self: stretch;
+ -webkit-box-ordinal-group: 4;
+ -moz-box-ordinal-group: 4;
+ -webkit-flex-order: 3;
+ -ms-flex-order: 3;
+ -webkit-order: 3;
+ order: 3; }
+
+.flex-legacy {
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex-pack: distribute;
+ -ms-flex-pack: distribute;
+ -webkit-justify-content: space-around;
+ justify-content: space-around;
+ -webkit-flex-line-pack: stretch;
+ -ms-flex-line-pack: stretch;
+ -webkit-align-content: stretch;
+ align-content: stretch;
+ -webkit-flex-align: start;
+ -ms-flex-align: start;
+ -webkit-align-items: flex-start;
+ align-items: flex-start; }
+ @supports (flex-wrap: wrap) {
+ .flex-legacy {
+ display: flex; } }
+
+.flex-item-legacy {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-flex: 1 2 50%;
+ -ms-flex: 1 2 50%;
+ flex: 1 2 50%;
+ -webkit-flex-item-align: start;
+ -ms-flex-item-align: start;
+ -webkit-align-self: flex-start;
+ align-self: flex-start;
+ -webkit-flex-order: 1;
+ -ms-flex-order: 1;
+ -webkit-order: 1;
+ order: 1; }
View
44 test/fixtures/stylesheets/compass/sass/flexbox.scss
@@ -0,0 +1,44 @@
+@import "compass/css3/flexbox";
+
+.flex {
+ @include display-flex;
+ @include flex-flow(column nowrap);
+ @include justify-content(space-between);
+ @include align-content(center);
+ @include align-items(flex-end);
+}
+
+.flex-item {
+ @include flex(1 1 auto);
+ @include align-self(flex-start);
+ @include order(2);
+}
+
+$flex-legacy-enabled: true;
+.flex-legacy {
+ @include display-flex;
+ @include flex-flow(row nowrap);
+ @include justify-content(flex-end);
+ @include align-content(flex-start);
+ @include align-items(baseline);
+}
+
+.flex-item-legacy {
+ @include flex(2 1 20em);
+ @include align-self(stretch);
+ @include order(3);
+}
+$flex-wrap-required: true;
+.flex-legacy {
+ @include display-flex;
+ @include flex-flow(row wrap);
+ @include justify-content(space-around);
+ @include align-content(stretch);
+ @include align-items(flex-start);
+}
+
+.flex-item-legacy {
+ @include flex(1 2 50%);
+ @include align-self(flex-start);
+ @include order(1);
+}
Something went wrong with that request. Please try again.