From 8075c8eedcdebc5fbccffab5a3e159377a7e5ea5 Mon Sep 17 00:00:00 2001
From: Wyatt Anderson <wyatt@hioscar.com>
Date: Thu, 5 Feb 2015 19:44:14 +0000
Subject: [PATCH] Flexbox

---
 lib/compass/css3/_flexbox.scss | 86 ++++++++++++++++++++++++++++++++++
 test/css3/flexboxSpec.js       | 13 +++++
 test/helper/compare.js         | 11 +++++
 3 files changed, 110 insertions(+)
 create mode 100644 lib/compass/css3/_flexbox.scss
 create mode 100644 test/css3/flexboxSpec.js
 create mode 100644 test/helper/compare.js

diff --git a/lib/compass/css3/_flexbox.scss b/lib/compass/css3/_flexbox.scss
new file mode 100644
index 0000000..f83f287
--- /dev/null
+++ b/lib/compass/css3/_flexbox.scss
@@ -0,0 +1,86 @@
+@import "../support";
+@import "shared";
+
+// This is the underlying implementation for all the other mixins in this module.
+// It is the only way to access prefix support for older versions of the spec.
+// Deviates from canonical Compass implementation by dropping support for
+// older versions of the Flexbox spec.
+//
+// `$properties`: map of property-value pairs that should be prefixed
+@mixin flexbox($properties) {
+  @each $prop, $value in $properties {
+    @if $prop == display {
+      @include experimental-value(display, $value, not(-moz), -webkit,
+                                  not(-o), not(-ms), not(-khtml), official);
+    } @else {
+      @include experimental($prop, $value, not(-moz), -webkit, not(-o),
+                            not(-ms), not(-khtml), official);
+    }
+  }
+}
+
+// Values for $display are: flex (default), inline-flex
+@mixin display-flex($display: flex) {
+  @include flexbox((display: $display));
+}
+
+// Values: row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+  @include flexbox((flex-direction: $direction));
+}
+
+// Values: nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+  @include flexbox((flex-wrap: $wrap));
+}
+
+// Shorthand for flex-direction and flex-wrap.
+@mixin flex-flow($flow) {
+  @include flexbox((flex-flow: $flow));
+}
+
+// Accepts an integer
+@mixin order($order) {
+  @include flexbox((order: $order));
+}
+
+// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
+// Space separated, in that order.
+@mixin flex($flex) {
+  @include flexbox((flex: $flex));
+}
+
+// Accepts a number.
+@mixin flex-grow($flex-grow) {
+  @include flexbox((flex-grow: $flex-grow));
+}
+
+// Accepts a number.
+@mixin flex-shrink($flex-shrink) {
+  @include flexbox((flex-shrink: $flex-shrink));
+}
+
+// Accepts any legal value for the width property.
+@mixin flex-basis($flex-basis) {
+  @include flexbox((flex-basis: $flex-basis));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify-content) {
+  @include flexbox((justify-content: $justify-content));
+}
+
+// Legal values: flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align-items) {
+  @include flexbox((align-items: $align-items));
+}
+
+// Legal values: auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align-self) {
+  @include flexbox((align-self: $align-self));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align-content) {
+  @include flexbox((align-content: $align-content));
+}
diff --git a/test/css3/flexboxSpec.js b/test/css3/flexboxSpec.js
new file mode 100644
index 0000000..8736475
--- /dev/null
+++ b/test/css3/flexboxSpec.js
@@ -0,0 +1,13 @@
+var compareIt = require('../helper/compare');
+
+describe("Flexbox", function() {
+  var flexShould = function(spec, ruleset, output) {
+    return compareIt("should " + spec, ruleset, output,
+                     ['compass/css3/flexbox']);
+  };
+
+  compareIt("should output all flexbox properties",
+            "@include flexbox(( display: flex, flex-direction: row-reverse, flex-wrap: wrap-reverse, flex-flow: row-reverse wrap-reverse, order: 1, flex: 1 0 auto, flex-grow: 1, flex-shrink: 0, flex-basis: auto, justify-content: flex-start, align-items: flex-start, align-self: flex-start, align-content: flex-start));",
+            "display:-webkit-flex;display:flex;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;-webkit-flex-flow:row-reverse wrap-reverse;flex-flow:row-reverse wrap-reverse;-webkit-order:1;order:1;-webkit-flex:1 0 auto;flex:1 0 auto;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-shrink:0;flex-shrink:0;-webkit-flex-basis:auto;flex-basis:auto;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-align-self:flex-start;align-self:flex-start;-webkit-align-content:flex-start;align-content:flex-start",
+            ['compass/css3/flexbox']);
+});
diff --git a/test/helper/compare.js b/test/helper/compare.js
new file mode 100644
index 0000000..f36273f
--- /dev/null
+++ b/test/helper/compare.js
@@ -0,0 +1,11 @@
+var render = require('../helper/render');
+var ruleset = require('../helper/ruleset');
+
+module.exports = function(spec, inputRuleset, expectedOutput, imports) {
+  return it(spec, function (done) {
+    render(ruleset(inputRuleset), function(output, err) {
+      expect(output).toBe(ruleset(expectedOutput));
+      done();
+    }, imports);
+  });
+};