compass 0.11.alpha.0 → 0.11.alpha.1

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

@@ -32,7 +32,9 @@
 // - Safari
 // - Firefox 3.6
 // - Opera
-
+//
+// @deprecated Use the linear-gradient() function in conjunction with a
+//             property mixin like `background-image`.
 @mixin linear-gradient($color-stops, $start: false, $image: false) {
   @if $image {
     @if $start {
@@ -51,17 +53,6 @@
   @include background-image($image, linear-gradient($start, $color-stops));
 }
 
-// Emit a IE-Specific filters that renders a simple linear gradient.
-// 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.
-@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
-  @include has-layout;
-  $gradient-type: if($orientation == vertical, 0, 1);
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
-}
-
 // Because of webkit's limitations, the radial gradient mixin works best if you use
 // pixel-based color stops.
 //
@@ -86,7 +77,9 @@
 // - Safari
 // - Firefox 3.6
 // - Opera
-
+//
+// @deprecated Use the radial-gradient() function in conjunction with a
+//             property mixin like `background-image`.
 @mixin radial-gradient($color-stops, $center-position: false, $image: false) {
   @if $image {
     @if $center-position {

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

@@ -1,6 +1,29 @@
 @import "shared";
 
+// Background property support for vendor prefixing within values.
+@mixin background(
+  $background-1,
+  $background-2: false,
+  $background-3: false,
+  $background-4: false,
+  $background-5: false,
+  $background-6: false,
+  $background-7: false,
+  $background-8: false,
+  $background-9: false,
+  $background-10: false
+) {
+  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
+                        $background-6, $background-7, $background-8, $background-9, $background-10);
+
+  @if $experimental-support-for-svg     and prefixed(-svg,    $backgrounds) {       background:    -svg($backgrounds); }
+  @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-pie     and (prefixed(-pie,   $backgrounds) or -compass-list-size($backgrounds) > 1) {  -pie-background:    -pie($backgrounds); }
+                                                                                    background:         $backgrounds;
+}
 
+// Background image property support for vendor prefixing within values.
 @mixin background-image(
   $image-1,
   $image-2: false,
@@ -15,12 +38,26 @@
 ) {
   $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
 
-  @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); }
+  @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); background-size: 100%; }
   @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); }
-                                                                         background-image:         $images;
+  @if $experimental-support-for-pie     and (prefixed(-pie,    $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
+                                                                         background-image:         $images ;
 }
 
+// Emit a IE-Specific filters that renders a simple linear gradient.
+// 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.
+@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
+  @include has-layout;
+  $gradient-type: if($orientation == vertical, 0, 1);
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
+}
+
+
+// Border image property support for vendor prefixing properties and values.
 @mixin border-image($value) {
   @if $experimental-support-for-mozilla {    -moz-border-image:    -moz(-compass-list($value)); }
   @if $experimental-support-for-webkit  { -webkit-border-image: -webkit(-compass-list($value)); }
@@ -28,6 +65,7 @@
                                                   border-image:                       $value;
 }
 
+// List style image property support for vendor prefixing within values.
 @mixin list-style-image($image) {
   @if $experimental-support-for-mozilla and prefixed(-moz,    $image) { list-style-image:    -moz($image); }
   @if $experimental-support-for-webkit  and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
@@ -35,6 +73,7 @@
                                                                         list-style-image:         $image ;
 }
 
+// List style property support for vendor prefixing within values.
 @mixin list-style($value) {
   $value: -compass-list($value);
   @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
@@ -43,6 +82,7 @@
                                                                         list-style-image:         $value ;
 }
 
+// content property support for vendor prefixing within values.
 @mixin content($value) {
   $value: -compass-list($value);
   @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { content:    -moz($value); }

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

@@ -0,0 +1,73 @@
+$experimental-support-for-pie: true;
+
+// It is recommended that you use Sass's @extend directive to apply the behavior
+// to your PIE elements. To assist you, Compass provides this variable.
+// When set, it will cause the `@include pie` mixin to extend this class.
+// The class name you provide should **not** include the `.`.
+$pie-base-class: false !default;
+
+// The default approach to using PIE.
+// Can be one of:
+//
+// * relative (default)
+// * z-index
+// * none
+$pie-default-approach: relative !default;
+
+// The location of your PIE behavior file
+// This should be root-relative to your web server
+// relative assets don't work. It is recommended that
+// you set this yourself.
+$pie-behavior: stylesheet-url("PIE.htc") !default;
+
+// When using the z-index approach, the
+// first ancestor of the PIE element at
+// or before the container's opaque background
+// should have a z-index set as well to ensure
+// propert z-index stacking.
+//
+// The `$position` argument must be some non-static
+// value (absolute, relative, etc.)
+@mixin pie-container($z-index: 0, $position: relative) {
+  z-index: $z-index;
+  position: $position;
+}
+
+// PIE elements must have this behavior attached to them.
+// IE is broken -- it doesn't think of behavior urls as
+// relative to the stylesheet. It considers them relative
+// to the webpage. As a result, you cannot reliably use
+// compass's relative_assets with PIE.
+// 
+// * `$approach` - one of: relative, z-index, or none
+// * `$z-index` - when using the z-index approach, this
+//                is the z-index that is applied.
+@mixin pie-element(
+  $approach: $pie-default-approach,
+  $z-index: 0
+) {
+  behavior: $pie-behavior;
+  @if $approach == relative {
+    position: relative;
+  }
+  @else if $approach == z-index {
+    z-index: $z-index;
+  }
+}
+
+// a smart mixin that knows to extend or include pie-element according
+// to your stylesheet's configuration variables.
+@mixin pie($base-class: $pie-base-class) {
+  @if $base-class {
+    @extend .#{$base-class};
+  }
+  @else {
+    @include pie-element;
+  }
+}
+
+// Watch `$n` levels of ancestors for changes to their class attribute
+// So that cascading styles will work correctly on the PIE element.
+@mixin pie-watch-ancestors($n) {
+  -pie-watch-ancestors: $n;
+}

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

@@ -4,13 +4,48 @@
 // If you like, set different defaults in your project
 
 $default-text-shadow-color:    #aaa !default;
-$default-text-shadow-h-offset: 1px  !default;
-$default-text-shadow-v-offset: 1px  !default;
+$default-text-shadow-h-offset: 0px  !default;
+$default-text-shadow-v-offset: 0px  !default;
 $default-text-shadow-blur:     1px  !default;
 
-// Provides CSS text shadows.
-// Arguments are color, horizontal offset, vertical offset, and blur
+// Provides cross-browser text shadows when one or more shadows are needed.
 @mixin text-shadow(
+  $shadow-1 : default,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  // This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
+  $legacy: type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and ($shadow-2 or $shadow-3 or $shadow-4) and not($shadow-5 or $shadow-6 or $shadow-7 or $shadow-8 or $shadow-9 or $shadow-10);
+  @if $legacy {
+    @warn "Passing separate arguments for a single shadow to text-shadow is deprecated. " +
+          "Pass the values as a single space-separated list, or use the single-text-shadow mixin. " +
+          "See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
+    @include single-text-shadow(
+      $shadow-1,
+      if($shadow-2, $shadow-2, $default-text-shadow-h-offset),
+      if($shadow-3, $shadow-3, $default-text-shadow-v-offset),
+      if($shadow-4, $shadow-4, $default-text-shadow-blur)
+    );
+  } @else {
+    @if $shadow-1 == default {
+      $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
+    }
+    text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
+                         $shadow-4, $shadow-5, $shadow-6,
+                         $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+  }
+}
+
+// Provides a single cross-browser CSS text shadow.
+// Includes default arguments for color, horizontal offset, vertical offset, and blur
+@mixin single-text-shadow(
   $color: $default-text-shadow-color,
   $hoff: $default-text-shadow-h-offset,
   $voff: $default-text-shadow-v-offset,

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

@@ -0,0 +1,87 @@
+@import "shared";
+
+@warn "This version of the transform module has been deprecated and will be removed.";
+
+// CSS Transform and Transform-Origin
+
+// Apply a transform sent as a complete string.
+
+@mixin apply-transform($transform) {
+  @include experimental(transform, $transform,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
+
+// Apply a transform-origin sent as a complete string.
+
+@mixin apply-origin($origin) {
+  @include experimental(transform-origin, $origin,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
+
+// transform-origin requires x and y coordinates
+//
+// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
+
+@mixin transform-origin($originx: 50%, $originy: 50%) {
+  @if $originx or $originy {
+    @if $originy {
+       @include apply-origin($originx or 50% $originy);
+     } @else {
+       @include apply-origin($originx);
+     }
+  }
+} 
+
+// A full transform mixin with everything you could want
+//
+// * including origin adjustments if you want them
+// * scale, rotate and skew require units of degrees(deg)
+// * scale takes a multiplier, rotate and skew take degrees
+
+@mixin transform(
+  $scale: 1,
+  $rotate: 0deg,
+  $transx: 0,
+  $transy: 0,
+  $skewx: 0deg,
+  $skewy: 0deg,
+  $originx: false,
+  $originy: false
+) {
+  $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
+  @include apply-transform($transform);
+  @include transform-origin($originx, $originy);
+}
+
+// Transform Partials
+//
+// These work well on their own, but they don't add to each other, they override.
+// Use them with extra origin args, or along side +transform-origin
+
+// Adjust only the scale, with optional origin coordinates
+
+@mixin scale($scale: 1.25, $originx: false, $originy: false) {
+  @include apply-transform(scale($scale));
+  @include transform-origin($originx, $originy);
+}
+
+// Adjust only the rotation, with optional origin coordinates
+
+@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
+  @include apply-transform(rotate($rotate));
+  @include transform-origin($originx, $originy);
+}
+
+// Adjust only the translation
+
+@mixin translate($transx: 0, $transy: 0) {
+  @include apply-transform(translate($transx, $transy));
+}
+
+// Adjust only the skew, with optional origin coordinates
+@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
+  @include apply-transform(skew($skewx, $skewy));
+  @include transform-origin($originx, $originy);
+}

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

@@ -1,85 +1,584 @@
 @import "shared";
 
-// CSS Transform and Transform-Origin
+// @doc off
+// Note ----------------------------------------------------------------------
+// Safari is the only browser that currently supports 3D transforms.
+// Because of that it can be important to control whether a given 2D transform
+// uses the full range of experimental browser prefixes, or only the 3D list.
+// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
+// to switch between the two support lists. The toggle defaults to 'false' (2D),
+// and also accepts 'true' (3D). Currently the lists are as follows:
+// 2D: Mozilla, Webkit, Opera, Official
+// 3D: Webkit, Official **(Only Safari Supports 3D perspective)**
 
-// Apply a transform sent as a complete string.
+// Available Transforms ------------------------------------------------------
+// - Scale (2d and 3d)
+// - Rotate (2d and 3d)
+// - Translate (2d and 3d)
+// - Skew (2d only)
 
-@mixin apply-transform($transform) {
-  @include experimental(transform, $transform,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+// Transform Parameters ------------------------------------------------------
+// - Transform Origin (2d and 3d)
+// - Perspective (3d)
+// - Perspective Origin (3d)
+// - Transform Style (3d)
+// - Backface Visibility (3d)
+
+// Mixins --------------------------------------------------------------------
+// transform-origin
+//  - shortcuts:  transform-origin2d, transform-origin3d
+//  - helpers:    apply-origin
+// transform
+//  - shortcuts:  transform2d, transform3d
+//  - helpers:    simple-transform, create-transform
+// perspective
+//  - helpers:    perspective-origin
+// transform-style
+// backface-visibility
+// scale
+//  - shortcuts:  scaleX, scaleY, scaleZ, scale3d
+// rotate
+//  - shortcuts:  rotateX, rotateY, rotate3d
+// translate
+//  - shortcuts:  translateX, translateY, translateZ, translate3d
+// skew
+//  - shortcuts:  skewX, skewY
+
+// Defaults ------------------------------------------------------------------
+// @doc on
+
+// Transform Origin
+$default-origin-x    : 50%                   !default;
+$default-origin-y    : 50%                   !default;
+$default-origin-z    : 50%                   !default;
+
+// Scale
+$default-scale-x     : 1.25                  !default;
+$default-scale-y     : $default-scale-x      !default;
+$default-scale-z     : $default-scale-x      !default;
+
+// Rotate
+$default-rotate      : 45deg                 !default;
+
+// Rotate3d
+$default-vector-x    : 1                     !default;
+$default-vector-y    : 1                     !default;
+$default-vector-z    : 1                     !default;
+
+// Translate
+$default-translate-x : 1em                   !default;
+$default-translate-y : $default-translate-x  !default;
+$default-translate-z : $default-translate-x  !default;
+
+// Skew
+$default-skew-x      : 5deg                  !default;
+$default-skew-y      : 5deg                  !default;
+
+
+// **Transform-origin**
+// Transform-origin sent as a complete string
+//
+//     @include apply-origin( origin [, 3D-only ] )
+//
+// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
+// in percentages, absolute (px, cm, in, em etc..) or relative
+// (left, top, right, bottom, center) units
+//
+// @param only3d Set this to true to only apply this
+// mixin where browsers have 3D support.
+@mixin apply-origin($origin, $only3d) {
+  $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
+    );
+  } @else {
+    @include experimental(transform-origin, $origin,
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
+  }
+}
+
+// Transform-origin sent as individual arguments:
+//
+//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
+//
+// where the 3 'origin-' arguments represent x/y/z coordinates.
+//
+// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
+@mixin transform-origin(
+  $origin-x: $default-origin-x,
+  $origin-y: $default-origin-y,
+  $origin-z: false,
+  $only3d:   if($origin-z)
+) {
+  $origin: unquote('');
+  @if $origin-x or $origin-y or $origin-z {
+    @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
+    @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
+    @if $origin-z { $origin: $origin $origin-z; }
+    @include apply-origin($origin, $only3d);
+  }
+}
+
+
+// Transform sent as a complete string:
+//
+//     @include transform( transforms [, 3D-only ] )
+//
+// 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
+    );
+  } @else {
+    @include experimental(transform, $transform,
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
+  }
+}
+
+// Shortcut to target all browsers with 2D transform support
+@mixin transform2d($trans) {
+  @include transform($trans, false);
+}
+
+// Shortcut to target only browsers with 3D transform support
+@mixin transform3d($trans) {
+  @include transform($trans, true);
+}
+
+// @doc off
+// 3D Parameters -------------------------------------------------------------
+// @doc on
+
+// Set the perspective of 3D transforms on the children of an element:
+//
+//      @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.
+// 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
   );
 }
 
-// Apply a transform-origin sent as a complete string.
+// Set the origin position for the perspective
+//
+//      @include perspective-origin(origin-x [origin-y])
+//
+// 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
+  );
+}
 
-@mixin apply-origin($origin) {
-  @include experimental(transform-origin, $origin,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+// Determine whether a 3D objects children also live in the given 3D space
+//
+//      @include transform-style( [ style ] )
+//
+// where `style` can be either `flat` or `preserves-3d`
+// browsers default to `flat`, mixin defaults to `preserves-3d`
+@mixin transform-style($style: preserves-3d) {
+  @include experimental(perspective-origin, $style,
+    not -moz, -webkit, not -o, not -ms, not -khtml, official
   );
 }
 
-// transform-origin requires x and y coordinates
+// Determine the visibility of an element when it's back is turned
+//
+//     @include backface-visibility( [ visibility ] )
 //
-// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
+// 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
+  );
+}
 
-@mixin transform-origin($originx: 50%, $originy: 50%) {
-  @if $originx or $originy {
-    @if $originy {
-       @include apply-origin($originx or 50% $originy);
-     } @else {
-       @include apply-origin($originx);
-     }
-  }
-} 
+// @doc off
+// Transform Partials --------------------------------------------------------
+// These work well on their own, but they don't add to each other, they override.
+// Use along with transform parameter mixins to adjust origin, perspective and style
+// ---------------------------------------------------------------------------
+
+
+// Scale ---------------------------------------------------------------------
+// @doc on
 
-// A full transform mixin with everything you could want
+// Scale an object along the x and y axis:
 //
-// * including origin adjustments if you want them
-// * scale, rotate and skew require units of degrees(deg)
-// * scale takes a multiplier, rotate and skew take degrees
+//      @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
+//
+// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
+// and perspective, which works the same as the stand-alone perspective property/mixin
+// but applies to the individual element (multiplied with any parent perspective)
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scale(
+  $scale-x:     $default-scale-x,
+  $scale-y:     $scale-x,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: scale($scale-x, $scale-y);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
 
-@mixin transform(
-  $scale: 1,
-  $rotate: 0deg,
-  $transx: 0,
-  $transy: 0,
-  $skewx: 0deg,
-  $skewy: 0deg,
-  $originx: false,
-  $originy: false
+// Scale an object along the x axis
+// @include scaleX( [ scale-x, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scaleX(
+  $scale:       $default-scale-x,
+  $perspective: false,
+  $only3d:      false
 ) {
-  $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
-  @include apply-transform($transform);
-  @include transform-origin($originx, $originy);
+  $trans: scaleX($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
 }
 
-// Transform Partials
+// Scale an object along the y axis
+// @include scaleY( [ scale-y, perspective, 3D-only ] )
 //
-// These work well on their own, but they don't add to each other, they override.
-// Use them with extra origin args, or along side +transform-origin
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scaleY(
+  $scale:       $default-scale-y,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: scaleY($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Scale an object along the z axis
+// @include scaleZ( [ scale-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scaleZ(
+  $scale: $default-scale-z,
+  $perspective: false
+) {
+  $trans: scaleZ($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Scale and object along all three axis
+// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scale3d(
+  $scale-x:     $default-scale-x,
+  $scale-y:     $default-scale-y,
+  $scale-z:     $default-scale-z,
+  $perspective: false
+) {
+  $trans: scale3d($scale-x, $scale-y, $scale-z);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
 
-// Adjust only the scale, with optional origin coordinates
+// @doc off
+// Rotate --------------------------------------------------------------------
+// @doc on
 
-@mixin scale($scale: 1.25, $originx: false, $originy: false) {
-  @include apply-transform(scale($scale));
-  @include transform-origin($originx, $originy);
+// Rotate an object around the z axis  (2D)
+// @include rotate( [ rotation, perspective, 3D-only ] )
+// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotate(
+  $rotate:      $default-rotate,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: rotate($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// A longcut for 'rotate' in case you forget that 'z' is implied
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotateZ(
+  $rotate:      $default-rotate,
+  $perspective: false,
+  $only3d:      false
+) {
+  @include rotate($rotate, $perspective, $only3d);
+}
+
+// Rotate an object around the x axis (3D)
+// @include rotateX( [ rotation, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotateX(
+  $rotate: $default-rotate,
+  $perspective: false
+) {
+  $trans: rotateX($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Rotate an object around the y axis (3D)
+// @include rotate( [ rotation, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotateY(
+  $rotate: $default-rotate,
+  $perspective: false
+) {
+  $trans: rotateY($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// 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
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotate3d(
+  $vector-x: $default-vector-x,
+  $vector-y: $default-vector-y,
+  $vector-z: $default-vector-z,
+  $rotate: $default-rotate,
+  $perspective: false
+) {
+  $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// @doc off
+// Translate -----------------------------------------------------------------
+// @doc on
+
+// 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
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translate(
+  $translate-x: $default-translate-x,
+  $translate-y: $default-translate-y,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: translate($translate-x, $translate-y);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the x axis (2D)
+// @include translate( [ translate-x, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translateX(
+  $trans-x:     $default-translate-x,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: translateX($trans-x);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the y axis (2D)
+// @include translate( [ translate-y, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translateY(
+  $trans-y:     $default-translate-y,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: translateY($trans-y);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the z axis (3D)
+// @include translate( [ translate-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translateZ(
+  $trans-z:     $default-translate-z,
+  $perspective: false
+) {
+  $trans: translateZ($trans-z);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Move an object along the x, y and z axis (3D)
+// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translate3d(
+  $translate-x: $default-translate-x,
+  $translate-y: $default-translate-y,
+  $translate-z: $default-translate-z,
+  $perspective: false
+) {
+  $trans: translate3d($translate-x, $translate-y, $translate-z);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
 }
 
-// Adjust only the rotation, with optional origin coordinates
+// @doc off
+// Skew ----------------------------------------------------------------------
+// @doc on
 
-@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
-  @include apply-transform(rotate($rotate));
-  @include transform-origin($originx, $originy);
+// Skew an element:
+//
+//     @include skew( [ skew-x, skew-y, 3D-only ] )
+//
+// 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(
+  $skew-x: $default-skew-x,
+  $skew-y: $default-skew-y,
+  $only3d: false
+) {
+  $trans: skew($skew-x, $skew-y);
+  @include transform($trans, $only3d);
+}
+
+// Skew an element along the x axiz
+//
+//     @include skew( [ skew-x, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin skewX(
+  $skew-x: $default-skew-x,
+  $only3d: false
+) {
+  $trans: skewX($skew-x);
+  @include transform($trans, $only3d);
+}
+
+// Skew an element along the y axis
+//
+//     @include skew( [ skew-y, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin skewY(
+  $skew-y: $default-skew-y,
+  $only3d: false
+) {
+  $trans: skewY($skew-y);
+  @include transform($trans, $only3d);
 }
 
-// Adjust only the translation
 
-@mixin translate($transx: 0, $transy: 0) {
-  @include apply-transform(translate($transx, $transy));
+// 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
+//
+// * they include origin adjustments
+// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin create-transform(
+  $perspective: false,
+  $scale-x:     false,
+  $scale-y:     false,
+  $scale-z:     false,
+  $rotate-x:    false,
+  $rotate-y:    false,
+  $rotate-z:    false,
+  $rotate3d:    false,
+  $trans-x:     false,
+  $trans-y:     false,
+  $trans-z:     false,
+  $skew-x:      false,
+  $skew-y:      false,
+  $origin-x:    false,
+  $origin-y:    false,
+  $origin-z:    false,
+  $only3d:      false
+) {
+  $trans: unquote("");
+
+  // perspective
+  @if $perspective { $trans: perspective($perspective) ; }
+
+  // scale
+  @if $scale-x and $scale-y {
+    @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
+    @else { $trans: $trans scale($scale-x, $scale-y); }
+  } @else {
+    @if $scale-x { $trans: $trans scaleX($scale-x); }
+    @if $scale-y { $trans: $trans scaleY($scale-y); }
+    @if $scale-z { $trans: $trans scaleZ($scale-z); }
+  }
+
+  // rotate
+  @if $rotate-x { $trans: $trans rotateX($rotate-x); }
+  @if $rotate-y { $trans: $trans rotateY($rotate-y); }
+  @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
+  @if $rotate3d { $trans: $trans rotate3d($rotate3d); }
+
+  // translate
+  @if $trans-x and $trans-y {
+    @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
+    @else { $trans: $trans translate($trans-x, $trans-y); }
+  } @else {
+    @if $trans-x { $trans: $trans translateX($trans-x); }
+    @if $trans-y { $trans: $trans translateY($trans-y); }
+    @if $trans-z { $trans: $trans translateZ($trans-z); }
+  }
+
+  // skew
+  @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
+  @else {
+    @if $skew-x { $trans: $trans skewX($skew-x); }
+    @if $skew-y { $trans: $trans skewY($skew-y); }
+  }
+
+  // apply it!
+  @include transform($trans, $only3d);
+  @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
 }
 
-// Adjust only the skew, with optional origin coordinates
-@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
-  @include apply-transform(skew($skewx, $skewy));
-  @include transform-origin($originx, $originy);
+
+// A simplified set of options
+// backwards-compatible with the previous version of the 'transform' mixin
+@mixin simple-transform(
+  $scale:    false,
+  $rotate:   false,
+  $trans-x:  false,
+  $trans-y:  false,
+  $skew-x:   false,
+  $skew-y:   false,
+  $origin-x: false,
+  $origin-y: false
+) {
+  @include create-transform(
+    false,
+    $scale, $scale, false,
+    false, false, $rotate, false,
+    $trans-x, $trans-y, false,
+    $skew-x, $skew-y,
+    $origin-x, $origin-y, false,
+    false
+  );
 }