compass 0.12.0 → 0.12.7

data/frameworks/compass/stylesheets/compass/css3/_font-face.scss

@@ -16,7 +16,7 @@
 // [font generator](http://www.fontsquirrel.com/fontface/generator)
 //
 
-// In order to refer to a specific style of the font in your stylesheets as 
+// In order to refer to a specific style of the font in your stylesheets as
 // e.g. "font-style: italic;",  you may add a couple of @font-face includes
 // containing the respective font files for each style and specying
 // respective the $style parameter.
@@ -24,8 +24,8 @@
 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
 
 @mixin font-face(
-  $name, 
-  $font-files, 
+  $name,
+  $font-files,
   $eot: false,
   $weight: false,
   $style: false
@@ -35,7 +35,7 @@
     font-family: quote($name);
     @if $eot {
       src: font-url($eot);
-      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
+      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
     }
     src: $font-files;
     @if $weight {

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

@@ -0,0 +1,77 @@
+@import "shared";
+
+// Mixins to support specific CSS Text Level 3 elements
+//
+//
+//
+// Mixin for word-break properties
+// http://www.w3.org/css3-text/#word-break
+// * legal values for $type : normal, keep-all, break-all
+//
+// Example:
+//    p.wordBreak {@include word-break(break-all);}
+//
+// Which generates:
+//    p.wordBreak {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;}
+//
+@mixin word-break($value: normal){
+  @if $value == break-all {
+    //Most browsers handle the break-all case the same...
+    @include experimental(word-break, $value,
+      not -moz, not -webkit, not -o, -ms, not -khtml, official
+    );
+    //Webkit handles break-all differently... as break-word
+    @include experimental(word-break, break-word,
+      not -moz, not -webkit, not -o, not -ms, not -khtml, official
+    );
+  }
+  @else {
+    @include experimental(word-break, $value,
+      not -moz, not -webkit, not -o, -ms, not -khtml, official
+    );
+  }
+}
+
+// Mixin for the hyphens property
+//
+// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
+// * legal values for $type : auto, manual, none
+//
+// Example:
+//  p {
+//    @include hyphens(auto);}
+// Which generates:
+//  p {
+//    -moz-hyphens: auto;
+//    -webkit-hyphens: auto;
+//    hyphens: auto;}
+//
+@mixin hyphens($value: auto){
+  @include experimental(hyphens, $value,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}
+
+// Mixin for x-browser hyphenation based on @auchenberg's post:
+// Removes the need for the <wbr/> HTML tag
+// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
+//
+//  Example:
+//  div {@include hyphenation;}
+//
+//  Which generates:
+//    div {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;
+//      -moz-hyphens: auto;
+//      -webkit-hyphens: auto;
+//      hyphens: auto;}
+//
+@mixin hyphenation{
+  @include word-break(break-all);
+  @include hyphens;
+}

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

@@ -23,7 +23,6 @@
   @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
   @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
   @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
-  @if $experimental-support-for-microsoft    and prefixed(-ms,     $backgrounds) {      background:     -ms($backgrounds); }
   @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
                                                                                         background:         $backgrounds ;
 }
@@ -71,7 +70,6 @@
   @if $experimental-support-for-webkit       and prefixed(-webkit, $images) { background-image: -webkit($images); }
   @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) { background-image:    -moz($images); }
   @if $experimental-support-for-opera        and prefixed(-o,      $images) { background-image:      -o($images); }
-  @if $experimental-support-for-microsoft    and prefixed(-ms,     $images) { background-image:     -ms($images); }
   @if $experimental-support-for-pie          and $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
                                                                               background-image:         $images ;
 }
@@ -80,6 +78,8 @@
 // For use in IE 6 - 8. Best practice would have you apply this via a
 // conditional IE stylesheet, but if you must, you should place this before
 // any background-image properties that you have specified.
+//
+// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
 @mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
   @include has-layout;
   $gradient-type: if($orientation == vertical, 0, 1);

data/frameworks/compass/stylesheets/compass/css3/_inline-block.scss

@@ -1,16 +1,22 @@
 @import "shared";
 
-// Provides a cross-browser method to implement `display: inline-block;`
+// Set `$inline-block-alignment` to `none` or `false` to disable the output
+// of a vertical-align property in the inline-block mixin.
+// Or set it to a legal value for `vertical-align` to change the default.
+$inline-block-alignment: middle !default;
 
-@mixin inline-block {
-  @if $legacy-support-for-ie {
-    & { *display: inline; }
+// Provides a cross-browser method to implement `display: inline-block;`
+@mixin inline-block($alignment: $inline-block-alignment) {
+  @if $legacy-support-for-mozilla {
+    display: -moz-inline-stack;
   }
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
   display: inline-block;
-  vertical-align: middle;
+  @if $alignment and $alignment != none {
+    vertical-align: $alignment;
+  }
   @if $legacy-support-for-ie {
     *vertical-align: auto;
+    zoom: 1;
+    *display: inline;
   }
 }

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

@@ -0,0 +1,22 @@
+@import "shared";
+
+// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
+//
+// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
+//
+// For a visual explanation, see the diagrams at Chris Coyier's
+// [CSS-Tricks](http://css-tricks.com/content-folding/)
+
+@mixin flow-into($target) {
+  $target: unquote($target);
+  @include experimental(flow-into, $target,
+    not -moz, -webkit, not -o, -ms, not -khtml, not official
+  );
+}
+
+@mixin flow-from($target) {
+  $target: unquote($target);
+  @include experimental(flow-from, $target,
+    not -moz, -webkit, not -o, -ms, not -khtml, not official
+  );
+}

data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss

@@ -7,10 +7,16 @@ $default-text-shadow-color:    #aaa !default;
 $default-text-shadow-h-offset: 0px  !default;
 $default-text-shadow-v-offset: 0px  !default;
 $default-text-shadow-blur:     1px  !default;
+$default-text-shadow-spread:   false  !default;
 
 // Provides cross-browser text shadows when one or more shadows are needed.
 // Each shadow argument should adhere to the standard css3 syntax for the
 // text-shadow property.
+//
+// Note: if any shadow has a spread parameter, this will cause the mixin
+// to emit the shadow declaration twice, first without the spread,
+// then with the spread included. This allows you to progressively
+// enhance the browsers that do support the spread parameter.
 @mixin text-shadow(
   $shadow-1 : default,
   $shadow-2 : false,
@@ -24,25 +30,58 @@ $default-text-shadow-blur:     1px  !default;
   $shadow-10: false
 ) {
   @if $shadow-1 == default {
-    $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
+    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
   }
-  text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
-                       $shadow-4, $shadow-5, $shadow-6,
-                       $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+  $shadows-without-spread: join((),(),comma);
+  $shadows: join((),(),comma);
+  $has-spread: false;
+  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
+                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
+    @if length($shadow) > 4 {
+      $has-spread: true;
+      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
+      $shadows: append($shadows, $shadow);
+    } else {
+      $shadows-without-spread: append($shadows-without-spread, $shadow);
+      $shadows: append($shadows, $shadow);
+    }
+  }
+  @if $has-spread {
+    text-shadow: $shadows-without-spread;
+  }
+  text-shadow: $shadows;
 }
 
 // Provides a single cross-browser CSS text shadow.
-// Includes default arguments for color, horizontal offset, vertical offset, and blur
+//
+// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
+// according to the configuration defaults above.
 @mixin single-text-shadow(
-  $color: $default-text-shadow-color,
-  $hoff: $default-text-shadow-h-offset,
-  $voff: $default-text-shadow-v-offset,
-  $blur: $default-text-shadow-blur
+  $hoff: false,
+  $voff: false,
+  $blur: false,
+  $spread: false,
+  $color: false
 ) {
-  // XXX I'm surprised we don't need experimental support for this property.
-  @if $color == none {
-    text-shadow: none;
+  // A lot of people think the color comes first. It doesn't.
+  @if type-of($hoff) == color {
+    $temp-color: $hoff;
+    $hoff: $voff;
+    $voff: $blur;
+    $blur: $spread;
+    $spread: $color;
+    $color: $temp-color;
+  }
+  // Can't rely on default assignment with multiple supported argument orders.
+  $hoff:   if($hoff,   $hoff,   $default-text-shadow-h-offset);
+  $voff:   if($voff,   $voff,   $default-text-shadow-v-offset);
+  $blur:   if($blur,   $blur,   $default-text-shadow-blur    );
+  $spread: if($spread, $spread, $default-text-shadow-spread  );
+  $color:  if($color,  $color,  $default-text-shadow-color   );
+  // We don't need experimental support for this property.
+  @if $color == none or $hoff == none {
+    @include text-shadow(none);
   } @else {
-    text-shadow: $color $hoff $voff $blur;
+    @include text-shadow(compact($hoff $voff $blur $spread $color));
   }
 }

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

@@ -104,7 +104,7 @@ $default-skew-y      : 5deg                  !default;
   $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
   @if $only3d {
     @include experimental(transform-origin, $origin,
-      not -moz, -webkit, not -o, not -ms, not -khtml, official
+      -moz, -webkit, -o, -ms, not -khtml, official
     );
   } @else {
     @include experimental(transform-origin, $origin,
@@ -140,14 +140,14 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include transform( transforms [, 3D-only ] )
 //
-// where 'transforms' is a space separated list of all the transforms to be applied
+// where 'transforms' is a space separated list of all the transforms to be applied.
 @mixin transform(
   $transform,
   $only3d: false
 ) {
   @if $only3d {
     @include experimental(transform, $transform,
-      not -moz, -webkit, not -o, not -ms, not -khtml, official
+      -moz, -webkit, -o, -ms, not -khtml, official
     );
   } @else {
     @include experimental(transform, $transform,
@@ -174,12 +174,12 @@ $default-skew-y      : 5deg                  !default;
 //
 //      @include perspective( perspective )
 //
-// where 'perspective' is a uniless number representing the depth of the z-axis
-// the higher the perspective, the more exagerated the foreshortening.
+// where 'perspective' is a unitless number representing the depth of the
+// z-axis. The higher the perspective, the more exaggerated the foreshortening.
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
 @mixin perspective($p) {
   @include experimental(perspective, $p,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -190,7 +190,7 @@ $default-skew-y      : 5deg                  !default;
 // where the two arguments represent x/y coordinates
 @mixin perspective-origin($origin: 50%) {
   @include experimental(perspective-origin, $origin,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -198,11 +198,11 @@ $default-skew-y      : 5deg                  !default;
 //
 //      @include transform-style( [ style ] )
 //
-// where `style` can be either `flat` or `preserve-3d`
-// browsers default to `flat`, mixin defaults to `preserve-3d`
+// where `style` can be either `flat` or `preserve-3d`.
+// Browsers default to `flat`, mixin defaults to `preserve-3d`.
 @mixin transform-style($style: preserve-3d) {
   @include experimental(transform-style, $style,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -210,11 +210,11 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include backface-visibility( [ visibility ] )
 //
-// where `visibility` can be either `visible` or `hidden`
-// browsers default to visible, mixin defaults to hidden
+// where `visibility` can be either `visible` or `hidden`.
+// Browsers default to visible, mixin defaults to hidden
 @mixin backface-visibility($visibility: hidden) {
   @include experimental(backface-visibility, $visibility,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -362,9 +362,9 @@ $default-skew-y      : 5deg                  !default;
 
 // Rotate an object around an arbitrary axis (3D)
 // @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
-// where the 'vector-' arguments accept unitless numbers
-// these numbers are not important on their own, but in relation to one another
-// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
+// where the 'vector-' arguments accept unitless numbers.
+// These numbers are not important on their own, but in relation to one another
+// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotate3d(
@@ -385,7 +385,7 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the x or y axis (2D)
 // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
-// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
+// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin translate(
@@ -463,7 +463,7 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include skew( [ skew-x, skew-y, 3D-only ] )
 //
-// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
+// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin skew(
@@ -504,8 +504,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Full transform mixins
 // For settings any combination of transforms as arguments
-// These are complex and not highly recommended for daily use
-// They are mainly here for backwards-compatability purposes
+// These are complex and not highly recommended for daily use. They are mainly
+// here for backward-compatibility purposes.
 //
 // * they include origin adjustments
 // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)

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

@@ -30,9 +30,23 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
-@mixin transition-property($properties: $default-transition-property) {
-  @if type-of($properties) == string { $properties: unquote($properties); }
-  @include build-prefix-values(transition-property, $properties);
+@mixin transition-property($property-1: $default-transition-property,
+  $property-2 : false,
+  $property-3 : false,
+  $property-4 : false,
+  $property-5 : false,
+  $property-6 : false,
+  $property-7 : false,
+  $property-8 : false,
+  $property-9 : false,
+  $property-10: false
+) {
+  @if type-of($property-1) == string { $property-1: unquote($property-1); }
+  $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10);
+  @if $experimental-support-for-webkit    {       -webkit-transition-property : prefixed-for-transition(-webkit, $properties); }
+  @if $experimental-support-for-mozilla   {          -moz-transition-property : prefixed-for-transition(-moz,    $properties); }
+  @if $experimental-support-for-opera     {            -o-transition-property : prefixed-for-transition(-o,      $properties); }
+                                                          transition-property : $properties;
 }
 
 // One or more durations in seconds
@@ -40,10 +54,21 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these durations will affect the properties in the same list position
 
-@mixin transition-duration($duration: $default-transition-duration) {
-  @if type-of($duration) == string { $duration: unquote($duration); }
-  @include experimental(transition-duration, $duration,
-    -moz, -webkit, -o, -ms, not -khtml, official
+@mixin transition-duration($duration-1: $default-transition-duration,
+  $duration-2 : false,
+  $duration-3 : false,
+  $duration-4 : false,
+  $duration-5 : false,
+  $duration-6 : false,
+  $duration-7 : false,
+  $duration-8 : false,
+  $duration-9 : false,
+  $duration-10: false
+) {
+  @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }
+  $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
+  @include experimental(transition-duration, $durations,
+    -moz, -webkit, -o, not -ms, not -khtml, official
   );
 }
 
@@ -53,9 +78,21 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * For multiple, use a comma-delimited list
 // * These functions will effect the properties in the same list position
 
-@mixin transition-timing-function($function: $default-transition-function) {
-  @include experimental(transition-timing-function, unquote($function),
-    -moz, -webkit, -o, -ms, not -khtml, official
+@mixin transition-timing-function($function-1: $default-transition-function,
+  $function-2 : false,
+  $function-3 : false,
+  $function-4 : false,
+  $function-5 : false,
+  $function-6 : false,
+  $function-7 : false,
+  $function-8 : false,
+  $function-9 : false,
+  $function-10: false
+) {
+  $function-1: unquote($function-1);
+  $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
+  @include experimental(transition-timing-function, $functions,
+    -moz, -webkit, -o, not -ms, not -khtml, official
   );
 }
 
@@ -64,10 +101,21 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these delays will effect the properties in the same list position
 
-@mixin transition-delay($delay: $default-transition-delay) {
-  @if type-of($delay) == string { $delay: unquote($delay); }
-  @include experimental(transition-delay, $delay,
-    -moz, -webkit, -o, -ms, not -khtml, official
+@mixin transition-delay($delay-1: $default-transition-delay,
+  $delay-2 : false,
+  $delay-3 : false,
+  $delay-4 : false,
+  $delay-5 : false,
+  $delay-6 : false,
+  $delay-7 : false,
+  $delay-8 : false,
+  $delay-9 : false,
+  $delay-10: false
+) {
+  @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }
+  $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
+  @include experimental(transition-delay, $delays,
+    -moz, -webkit, -o, not -ms, not -khtml, official
   );
 }
 
@@ -79,7 +127,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
+  @include transition(compact($property $duration $function $delay));
 }
 
 @mixin transition(
@@ -95,60 +143,79 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $transition-10: false
 ) {
   @if $transition-1 == default {
-    $transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
+    $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay);
+  }
+  $transitions: false;
+  @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list {
+    $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma);
+  } @else {
+    $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
+  }
+  $delays: comma-list();
+  $has-delays: false;
+  $webkit-value: comma-list();
+  $moz-value: comma-list();
+  $o-value: comma-list();
+
+  // This block can be made considerably simpler at the point in time that
+  // we no longer need to deal with the differences in how delays are treated.
+  @each $transition in $transitions {
+    // Extract the values from the list
+    // (this would be cleaner if nth took a 3rd argument to provide a default value).
+    $property: nth($transition, 1);
+    $duration: false;
+    $timing-function: false;
+    $delay: false;
+    @if length($transition) > 1 { $duration:        nth($transition, 2); }
+    @if length($transition) > 2 { $timing-function: nth($transition, 3); }
+    @if length($transition) > 3 { $delay:           nth($transition, 4); $has-delays: true; }
+
+    // If a delay is provided without a timing function
+    @if is-time($timing-function) and not $delay { $delay: $timing-function; $timing-function: false; $has-delays: true; }
+
+    // Keep a list of delays in case one is specified
+    $delays: append($delays, if($delay, $delay, 0s));
+
+    $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function));
+       $moz-value: append(   $moz-value, compact(prefixed-for-transition(   -moz, $property) $duration $timing-function $delay));
+         $o-value: append(     $o-value, compact(prefixed-for-transition(     -o, $property) $duration $timing-function $delay));
   }
 
-  $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
-  @include build-prefix-values(transition, $transition);
+  @if $experimental-support-for-webkit    {       -webkit-transition : $webkit-value;
+    // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.
+    @if $has-delays                       { -webkit-transition-delay : $delays;       } }
+  @if $experimental-support-for-mozilla   {          -moz-transition : $moz-value;    }
+  @if $experimental-support-for-opera     {            -o-transition : $o-value;      }
+                                                          transition : $transitions;
 }
 
-@mixin build-prefix-values($property, $values, $delay: false) {
-  $raw-values: ($values);
-  $index: compact(false);
-
-  $webkit-value: compact(false);
-  $moz-value: compact(false);
-  $ms-value: compact(false);
-  $o-value: compact(false);
-
-  @each $value in $raw-values {
-    $value: compact(join($value, false));
-    $match: false;
+// coerce a list to be comma delimited or make a new, empty comma delimited list.
+@function comma-list($list: ()) {
+  @return join((), $list, comma);
+}
 
-    @each $prefixed-value in $transitionable-prefixed-values {
-      @if index($value, $prefixed-value) {
-        $index: index($value, $prefixed-value);
-        $match: true;
-      }
+// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
+@function prefixed-for-transition($prefix, $property) {
+  @if type-of($property) == list {
+    $new-list: comma-list();
+    @each $v in $property {
+      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
     }
-
-    @if $match {
-      $value-prefix: nth($value, $index);
-      $value-suffix: compact(false);
-
-      @for $i from 2 through length($value) {
-        $value-suffix: append($value-suffix, nth($value, $i), space);
-      }
-
-      $non-webkit-suffix: compact(append($value-suffix, $delay, space));
-
-      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
-      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
-      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
-      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
+    @return $new-list;
+  } @else {
+    @if index($transitionable-prefixed-values, $property) {
+      @return #{$prefix}-#{$property};
     } @else {
-      $non-webkit-value: compact(append($value, $delay, space));
-
-      $webkit-value: append($webkit-value, $value, comma);
-      $moz-value: append($moz-value, $non-webkit-value, comma);
-      $ms-value: append($ms-value, $non-webkit-value, comma);
-      $o-value: append($o-value, $non-webkit-value, comma);
+      @return $property;
     }
   }
+}
 
-  @if $experimental-support-for-webkit    { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
-  @if $experimental-support-for-mozilla   {    -moz-#{$property} :    $moz-value; }
-  @if $experimental-support-for-microsoft {     -ms-#{$property} :     $ms-value; }
-  @if $experimental-support-for-opera     {      -o-#{$property} :      $o-value; }
-                                                    #{$property} :      compact($values $delay);
+// Checks if the value given is a unit of time.
+@function is-time($value) {
+  @if type-of($value) == number {
+    @return not not index(s ms, unit($value));
+  } @else {
+    @return false;
+  }
 }