compass 0.13.alpha.4 → 0.13.alpha.5

data/frameworks/compass/stylesheets/compass/css3/_filter.scss

@@ -1,10 +1,9 @@
 // Filter
+@import "compass/support";
 
-@import "shared";
-
-// @private css3-feature-support variables must always include a list of five boolean values
-// representing in order: -moz, -webkit, -ms, -o, -khtml
-$filter-support: -moz, -webkit, not -ms, not -o, not -khtml;
+// The prefixed support threshold for css filter effects.
+// Defaults to the $graceful-usage-threshold.
+$filter-support-threshold: $graceful-usage-threshold !default;
 
 
 // Provides cross-browser support for the upcoming (?) css3 filter property.
@@ -12,12 +11,16 @@ $filter-support: -moz, -webkit, not -ms, not -o, not -khtml;
 // The filter argument should adhere to the standard css3 syntax
 // for the filter property.
 @mixin filter($filters) {
-  @include experimental(filter, $filters, $filter-support...);
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter: $filters
+  ));
 }
 
 // @private Apply filter-margins
 @mixin apply-filter-margin($position, $width) {
-  @include experimental(filter-margin-#{$position}, $width, $filter-support...);
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter-margin-#{$position}: $width
+  ));
 }
 
 // filter-margin-top
@@ -34,10 +37,14 @@ $filter-support: -moz, -webkit, not -ms, not -o, not -khtml;
 
 // filter-margin
 @mixin filter-margin($widths) {
-  @include experimental(filter-margin, $widths, $filter-support...);
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter-margin: $widths
+  ));
 }
 
 // color-interpolation-filters (auto | sRGB | linearRGB )
 @mixin color-interpolation-filters($value) {
-  @include experimental(color-interpolation-filters, $value, $filter-support...);
-}
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    color-interpolation-filters: $value
+  ));
+}

data/frameworks/compass/stylesheets/compass/css3/_flexbox.scss

@@ -1,294 +1,147 @@
-@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;
+// There are two ways to use the flexbox module.
+// If you're using the final version of the spec,
+// you can use the property mixins as elsewhere in
+// the css3 module.
+//
+// You can also use the flexbox prefixing mixin `flexbox`.
+// This mixin takes an optional `$version` argument which
+// allows you to specify which spec version the properties
+// are using so that they will be prefixed correctly.
+//
+// Example:
+//
+//     .flex-column {
+//       /* For flexbox spec v1 */
+//       @include flexbox((
+//         display: box,
+//         box-orient: vertical,
+//       ), $version: 1);
+//       
+//       /* For flexbox spec v2 */
+//       @include flexbox((
+//         display: flexbox,
+//         flex-direction: column,
+//       ), $version: 2);
+//       
+//       /* Latest Spec */
+//       @include flexbox((
+//         display: flex,
+//         flex-direction: column,
+//       ));
+//     }
+//
+// Which compiles to:
+//
+//     .flex-row {
+//       /* For flexbox spec v1 */
+//       display: -moz-box;
+//       -moz-box-orient: vertical;
+//       display: -webkit-box;
+//       -webkit-box-orient: vertical;
+//       
+//       /* For flexbox spec v2 */
+//       display: -ms-flexbox;
+//       -ms-flex-direction: column;
+//       
+//       /* Latest Spec */
+//       display: -webkit-flex;
+//       -webkit-flex-direction: column;
+//       display: flex;
+//       flex-direction: column;
+//     }
+
+@import "compass/support";
+
+$flexbox-support-threshold: $critical-usage-threshold !default;
+
+
+// @private
+$flexbox-capability-options: (
+  (full-support: true),
+  (partial-support: true, spec-versions: 3)
+);
+
+@mixin flexbox($properties, $version: null) {
+  $capability-options: $flexbox-capability-options;
+  @if $version {
+    $capability-options: (partial-support: true, spec-versions: $version);
+  }
+
+  @include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
+    // Don't output unprefixed versions when the spec version is not the final version
+    @if $version and $current-prefix or not $version or $version == 3 {
+      @each $prop, $value in $properties {
+        @if $prop == display {
+          display: prefix-identifier($value);
+        } @else {
+          @include prefix-prop($prop, $value);
+        }
+      }
+    }
+  }
+}
+
+@mixin display-flex {
+  @include flexbox((display: flex));
+}
+
+// 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));
 }
 
-@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;
+// Accepts a number.
+@mixin flex-shrink($flex-shrink) {
+  @include flexbox((flex-shrink: $flex-shrink));
 }
 
-// ====================================================================================================
-//                                                                       | 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;
-		}
-	}
+// Accepts any legal value for the width property.
+@mixin flex-basis($flex-basis) {
+  @include flexbox((flex-basis: $flex-basis));
 }
 
-@mixin legacy-display-flex($type: flex) {
-	@include experimental-value(display, flex-translate-value($type, box), $box-support...);
+// Legal values: flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify-content) {
+  @include flexbox((justify-content: $justify-content));
 }
 
-// ====================================================================================================
-//                                                                       | 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...);
+// Legal values: flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align-items) {
+  @include flexbox((align-items: $align-items));
 }
 
-@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...);
+// Legal values: auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align-self) {
+  @include flexbox((align-self: $align-self));
 }
 
-@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...);
+// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align-content) {
+  @include flexbox((align-content: $align-content));
 }