compass 0.10.6 → 0.11.alpha.0

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

@@ -14,10 +14,9 @@
   }
   @font-face {
     font-family: quote($name);
-    @if $eot {
-      src: font-url($eot); }
+    @if $eot { src: font-url($eot); }
     src: local("☺"), $font-files; 
-  } 
+  }
 }
 
 // EXAMPLE

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

@@ -1,82 +1,106 @@
-@import "shared";
+@import "compass/utilities/general/hacks";
+@import "images";
 
-// This yields a linear gradient spanning from top to bottom
+// The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
-//     +linear-gradient(color-stops(white, black))
+// Examples:
 //
-// This yields a linear gradient spanning from bottom to top
+//     // This yields a linear gradient spanning from top to bottom
+//     +linear-gradient(color-stops(white, black))
 //
+//     // This yields a linear gradient spanning from bottom to top
 //     +linear-gradient(color-stops(white, black), bottom)
 //
-// This yields a linear gradient spanning from left to right
-//
+//     // This yields a linear gradient spanning from left to right
 //     +linear-gradient(color-stops(white, black), left)
 //
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black
-//
+//     // This yields a linear gradient starting at white passing
+//     // thru blue at 33% down and then to black
 //     +linear-gradient(color-stops(white, blue 33%, black))
 //
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black at 67% until the end
-//
+//     // This yields a linear gradient starting at white passing
+//     // thru blue at 33% down and then to black at 67% until the end
 //     +linear-gradient(color-stops(white, blue 33%, black 67%))
 //
-// This yields a linear gradient on top of a background image
-//
+//     // This yields a background image on top of the gradient; requires an image
+//     // with an alpha-layer.
 //     +linear-gradient(color_stops(white,black), top, image-url('noise.png'))
+//
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera
 
-@mixin linear-gradient($color-stops, $start: top, $image: false) {
-  // Firefox's gradient api is nice.
-  // Webkit's gradient api sucks -- hence these backflips:
-  $background: unquote("");
-  @if $image { $background : $image + unquote(", "); }
-  $start: unquote($start);
-  $end: opposite-position($start);
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
-  }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
+@mixin linear-gradient($color-stops, $start: false, $image: false) {
+  @if $image {
+    @if $start {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))";
+    } @else {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))";
+    }
+  } @else {
+    @if $start {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))";
+    } @else {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))";
+    }
   }
-  background-image: #{$background}linear-gradient($start, $color-stops);
+  @if not $start { $start: top; }
+  @include background-image($image, linear-gradient($start, $color-stops));
 }
 
-// Due to limitation's of webkit, the radial gradient mixin works best if you use
+// 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.
 //
 // Examples:
 //
 //     // Defaults to a centered, 100px radius gradient
 //     +radial-gradient(color-stops(#c00, #00c))
+//
 //     // 100px radius gradient in the top left corner
 //     +radial-gradient(color-stops(#c00, #00c), top left)
+//
 //     // Three colors, ending at 50px and passing thru #fff at 25px
 //     +radial-gradient(color-stops(#c00, #fff, #00c 50px))
-//     // a background image on top of the gradient
-//     // Requires an image with an alpha-layer.
+//
+//     // A background image on top of a 100px radius gradient; requires an image
+//     // with an alpha-layer.
 //     +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))
+//
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera
 
-@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
-  $center-position: unquote($center-position);
-  $end-pos: grad-end-position($color-stops, true);
-  $background: unquote("");
-  @if $image { $background: $image + unquote(", "); }
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
+@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
+  @if $image {
+    @if $center-position {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))";
+    } @else {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))";
+    }
+  } @else {
+    @if $center-position {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))";
+    } @else {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))";
+    }
   }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
-  }
-  background-image: #{$background}radial-gradient($center-position, circle, $color-stops);
-}
+  @if not $center-position { $center-position: center center; }
+  @include background-image($image, radial-gradient($center-position, $color-stops));
+}

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

@@ -0,0 +1,52 @@
+@import "shared";
+
+
+@mixin background-image(
+  $image-1,
+  $image-2: false,
+  $image-3: false,
+  $image-4: false,
+  $image-5: false,
+  $image-6: false,
+  $image-7: false,
+  $image-8: false,
+  $image-9: false,
+  $image-10: false
+) {
+  $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-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;
+}
+
+@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)); }
+  @if $experimental-support-for-svg     {         border-image:    -svg(-compass-list($value)); }
+                                                  border-image:                       $value;
+}
+
+@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); }
+  @if $experimental-support-for-svg     and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
+                                                                        list-style-image:         $image ;
+}
+
+@mixin list-style($value) {
+  $value: -compass-list($value);
+  @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
+  @if $experimental-support-for-webkit  and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
+  @if $experimental-support-for-svg     and prefixed(-svg,    $value) { list-style-image:    -svg($value); }
+                                                                        list-style-image:         $value ;
+}
+
+@mixin content($value) {
+  $value: -compass-list($value);
+  @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { content:    -moz($value); }
+  @if $experimental-support-for-webkit  and prefixed(-webkit, $value) { content: -webkit($value); }
+  @if $experimental-support-for-svg     and prefixed(-svg,    $value) { content:    -svg($value); }
+                                                                        content:         $value ;
+}

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

@@ -35,4 +35,4 @@
   @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
   @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
   @if $official                                        { #{$property} :         #{$value}; }
-}
+}

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

@@ -0,0 +1,72 @@
+@import "shared";
+
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults in your project
+
+$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;
+
+// Provides CSS text shadows.
+// Arguments are 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,
+  $blur: $default-text-shadow-blur
+) {
+  // XXX I'm surprised we don't need experimental support for this property.
+  @if $color == none {
+    text-shadow: none;
+  } @else {
+    text-shadow: $color $hoff $voff $blur;    
+  }
+}
+
+// Provides cross-browser text shadows when one or more shadows are needed.
+@mixin multiple-text-shadows(
+  $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
+  $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
+) {
+  // Ugh. Sass needs variable argument support.
+  $shadow : $shadow-1;
+  @if $shadow-2  { $shadow: $shadow, $shadow-2;  }
+  @if $shadow-3  { $shadow: $shadow, $shadow-3;  }
+  @if $shadow-4  { $shadow: $shadow, $shadow-4;  }
+  @if $shadow-5  { $shadow: $shadow, $shadow-5;  }
+  @if $shadow-6  { $shadow: $shadow, $shadow-6;  }
+  @if $shadow-7  { $shadow: $shadow, $shadow-7;  }
+  @if $shadow-8  { $shadow: $shadow, $shadow-8;  }
+  @if $shadow-9  { $shadow: $shadow, $shadow-9;  }
+  @if $shadow-10 { $shadow: $shadow, $shadow-10; }
+  // Anticlimactic, we know.
+  text-shadow: $shadow
+}
+
+@mixin text-shadow(
+  $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
+  $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
+) {
+  @include multiple-text-shadows(
+    $shadow-1, $shadow-2, $shadow-3,
+    $shadow-4, $shadow-5, $shadow-6,
+    $shadow-7, $shadow-8, $shadow-9, $shadow-10
+  );
+}

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

@@ -0,0 +1,584 @@
+@import "shared";
+
+// @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)**
+
+// Available Transforms ------------------------------------------------------
+// - Scale (2d and 3d)
+// - Rotate (2d and 3d)
+// - Translate (2d and 3d)
+// - Skew (2d only)
+
+// 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:   false
+) {
+  $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
+  );
+}
+
+// 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
+  );
+}
+
+// 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
+  );
+}
+
+// Determine the visibility of an element when it's back is turned
+//
+//     @include backface-visibility( [ visibility ] )
+//
+// 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
+  );
+}
+
+// @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
+
+// Scale an object along the x and y axis:
+//
+//      @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);
+}
+
+// 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
+) {
+  $trans: scaleX($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Scale an object along the y axis
+// @include scaleY( [ scale-y, perspective, 3D-only ] )
+//
+// **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);
+}
+
+// @doc off
+// Rotate --------------------------------------------------------------------
+// @doc on
+
+// 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);
+}
+
+// @doc off
+// Skew ----------------------------------------------------------------------
+// @doc on
+
+// 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);
+}
+
+
+// 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);
+}
+
+
+// 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
+  );
+}