diff --git a/doc-src/content/examples/compass/css3/transform.haml b/doc-src/content/examples/compass/css3/transform.haml
index 2fbea2aa..17c9bc93 100644
--- a/doc-src/content/examples/compass/css3/transform.haml
+++ b/doc-src/content/examples/compass/css3/transform.haml
@@ -2,7 +2,7 @@
title: Transform
description: css3 mixin for css transforms
framework: compass
-stylesheet: compass/css3/_transform.scss
+stylesheet: compass/css3/_transform-legacy.scss
example: true
---
= render "partials/example"
\ No newline at end of file
diff --git a/doc-src/content/examples/compass/css3/transform/stylesheet.sass b/doc-src/content/examples/compass/css3/transform/stylesheet.sass
index bd8c7df2..bdc25362 100644
--- a/doc-src/content/examples/compass/css3/transform/stylesheet.sass
+++ b/doc-src/content/examples/compass/css3/transform/stylesheet.sass
@@ -1,4 +1,4 @@
-@import compass/css3
+@import compass/css3, compass/css3/transform-legacy
.transform-example
width: 40px
diff --git a/doc-src/content/help/tutorials/upgrading/css3-v2.markdown b/doc-src/content/help/tutorials/upgrading/css3-v2.markdown
index 0aaa0f8f..fa63057e 100644
--- a/doc-src/content/help/tutorials/upgrading/css3-v2.markdown
+++ b/doc-src/content/help/tutorials/upgrading/css3-v2.markdown
@@ -6,21 +6,19 @@ classnames:
- tutorial
---
# Upgrading to Compass CSS3 v2
-The `css3` import is deprecated as well as the following css3 modules:
-`box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`,
-`box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively.
-However, you will only get deprecation warnings if you actually use
-one of the deprecated mixins. The imports will be restored by 1.0
-with the new, betterer APIs.
+Many mixins and certain uses of mixins have been deprecated, but your
+existing stylesheets should still work out of the box with one exception:
+users who are using the `css3/transform` module should update their imports
+to import `css/transform-legacy` when they upgrade. They should then upgrade
+to the new `css/transform` module at their convenience.
You should read about what changed, update your stylesheets accordingly
and then update your imports to the new version.
## Box Shadow
-The arguments to the [`box-shadow`][new_box_shadow] mixin have changed.
-As a result you should change your import of `compass/css3/box-shadow`
-to `compass/css3/box-shadow-v2` once you do one of the following choices:
+You may get a deprecation warning using the `box-shadow` mixin.
+You can resolve this in one of the following ways:
1. Change your use of the `box-shadow` and instead use `single-box-shadow`.
This mixin has the same behavior and arguments as the old `box-shadow` mixin.
@@ -31,10 +29,8 @@ to `compass/css3/box-shadow-v2` once you do one of the following choices:
## Text Shadow
-Similarly to how the box shadow changed. The new [text-shadow][new_text_shadow]
-mixin now accepts multiple shadows. As a result you should change your import of
-`compass/css3/text-shadow` to `compass/css3/text-shadow-v2` once you do one of
-the following choices:
+You may get a deprecation warning using the `text-shadow` mixin.
+You can resolve this in one of the following ways:
1. Change your use of the `text-shadow` and instead use `single-text-shadow`.
This mixin has the same behavior and arguments as the old `text-shadow` mixin.
@@ -47,6 +43,8 @@ the following choices:
The transform module was largely re-written to support 3D transforms. If you
are using it, it is suggested that you read the [new module's documentation][new_transform]
and adjust your code appropriately. Many mixin names and constants have changed.
+For your convenience, the [old CSS transform module][old_transform] can still be imported, but it
+is deprecated and will be removed in the next release.
## Gradients
@@ -77,10 +75,6 @@ Or for sass files:
=linear-gradient($color-stops, $start: top, $image: false)
+background-image($image, linear-gradient($start, $color-stops))
-
-[old_box_shadow]: /reference/compass/css3/box_shadow/#mixin-box-shadow
-[new_box_shadow]: /reference/compass/css3/box_shadow_v2/#mixin-box-shadow
-[old_text_shadow]: /reference/compass/css3/text_shadow/#mixin-text-shadow
-[new_text_shadow]: /reference/compass/css3/text-shadow-v2/#mixin-text-shadow
-[new_transform]: /reference/compass/css3/transform-v2/
+[new_transform]: /reference/compass/css3/transform/
+[old_transform]: /reference/compass/css3/transform-legacy/
[image_stylesheet]: /reference/compass/css3/images/
\ No newline at end of file
diff --git a/doc-src/content/reference/compass/css3.haml b/doc-src/content/reference/compass/css3.haml
index b47ec404..e980ec45 100644
--- a/doc-src/content/reference/compass/css3.haml
+++ b/doc-src/content/reference/compass/css3.haml
@@ -16,7 +16,7 @@ layout: core
The CSS3 module provides cross-browser mixins for CSS properties
introduced in CSS3, for example
border-radius
- and text-shadow.
+ and text-shadow.
%p
What rendering engines you support for the experimental css properties is governed by
the configurable variables defined in the browser
@@ -24,6 +24,4 @@ layout: core
%h3 Importing the Entire CSS3 Library
%p
To import the CSS3 Module add the following to your stylesheets:
- @import "compass/css3/version-2"
- Many of the mixins in version-1 are deprecated, and this import will make sure you don't
- load them during this transition.
\ No newline at end of file
+ @import "compass/css3"
diff --git a/doc-src/content/reference/compass/css3/box_shadow.haml b/doc-src/content/reference/compass/css3/box_shadow.haml
index 3cc4c455..ff4079b9 100644
--- a/doc-src/content/reference/compass/css3/box_shadow.haml
+++ b/doc-src/content/reference/compass/css3/box_shadow.haml
@@ -1,17 +1,16 @@
---
title: Compass Box Shadow
-crumb: Box Shadow (v1)
+crumb: Box Shadow
framework: compass
stylesheet: compass/css3/_box-shadow.scss
meta_description: Specify the box shadow for all browsers.
layout: core
-deprecated: true
+beta: true
classnames:
- reference
- core
- css3
---
- render 'reference' do
- %p.warning
- This import is deprecated. Please import
- box-shadow-v2 instead.
\ No newline at end of file
+ %p
+ The box-shadow mixins are used to apply an inset or drop shadow to a block element.
\ No newline at end of file
diff --git a/doc-src/content/reference/compass/css3/box_shadow_v2.haml b/doc-src/content/reference/compass/css3/box_shadow_v2.haml
deleted file mode 100644
index f11bd9ed..00000000
--- a/doc-src/content/reference/compass/css3/box_shadow_v2.haml
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Compass Box Shadow (v2)
-crumb: Box Shadow (v2)
-framework: compass
-stylesheet: compass/css3/_box-shadow-v2.scss
-meta_description: Specify the box shadow for all browsers.
-layout: core
-beta: true
-classnames:
- - reference
- - core
- - css3
----
-- render 'reference' do
- %p
- The box-shadow mixins are used to apply an inset or drop shadow to a block element.
\ No newline at end of file
diff --git a/doc-src/content/reference/compass/css3/text-shadow-v2.haml b/doc-src/content/reference/compass/css3/text-shadow.haml
similarity index 76%
rename from doc-src/content/reference/compass/css3/text-shadow-v2.haml
rename to doc-src/content/reference/compass/css3/text-shadow.haml
index e7b8499d..6f614e55 100644
--- a/doc-src/content/reference/compass/css3/text-shadow-v2.haml
+++ b/doc-src/content/reference/compass/css3/text-shadow.haml
@@ -1,8 +1,8 @@
---
-title: Compass Text Shadow (v2)
-crumb: Text Shadow (v2)
+title: Compass Text Shadow
+crumb: Text Shadow
framework: compass
-stylesheet: compass/css3/_text-shadow-v2.scss
+stylesheet: compass/css3/_text-shadow.scss
meta_description: Specify the text shadow for all browsers.
beta: true
layout: core
diff --git a/doc-src/content/reference/compass/css3/text_shadow.haml b/doc-src/content/reference/compass/css3/text_shadow.haml
deleted file mode 100644
index 8f4052f2..00000000
--- a/doc-src/content/reference/compass/css3/text_shadow.haml
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Compass Text Shadow
-crumb: Text Shadow (v1)
-framework: compass
-stylesheet: compass/css3/_text-shadow.scss
-meta_description: Specify the text shadow for all browsers.
-layout: core
-deprecated: true
-classnames:
- - reference
- - core
- - css3
----
-- render 'reference' do
- %p.warning
- This import is deprecated. Please import
- text-shadow-v2
- instead.
diff --git a/doc-src/content/reference/compass/css3/transform-legacy.haml b/doc-src/content/reference/compass/css3/transform-legacy.haml
new file mode 100644
index 00000000..ba88b0d3
--- /dev/null
+++ b/doc-src/content/reference/compass/css3/transform-legacy.haml
@@ -0,0 +1,17 @@
+---
+title: Compass Transform (Legacy)
+crumb: Transform (legacy)
+framework: compass
+stylesheet: compass/css3/_transform-legacy.scss
+meta_description: Specify the 2D transformation for many browsers.
+layout: core
+deprecated: true
+classnames:
+ - reference
+ - core
+ - css3
+---
+- render 'reference' do
+ %p.warning
+ This import is deprecated. Please import
+ transform instead.
diff --git a/doc-src/content/reference/compass/css3/transform-v2.haml b/doc-src/content/reference/compass/css3/transform-v2.haml
deleted file mode 100644
index c0709dca..00000000
--- a/doc-src/content/reference/compass/css3/transform-v2.haml
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Compass Transform (v2)
-crumb: Transform (v2)
-framework: compass
-stylesheet: compass/css3/_transform-v2.scss
-meta_description: Specify the 2D transformation for all browsers.
-layout: core
-beta: true
-classnames:
- - reference
- - core
- - css3
----
-- render 'reference' do
- %p
- Provides mixins for CSS3 2D and 3D transforms. See
- W3C: CSS 2D transforms
- and See W3C: CSS 3D transforms.
- %p
- 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)**
-
diff --git a/doc-src/content/reference/compass/css3/transform.haml b/doc-src/content/reference/compass/css3/transform.haml
index 144b7457..ee53a316 100644
--- a/doc-src/content/reference/compass/css3/transform.haml
+++ b/doc-src/content/reference/compass/css3/transform.haml
@@ -1,17 +1,28 @@
---
title: Compass Transform
-crumb: Transform (v1)
+crumb: Transform
framework: compass
stylesheet: compass/css3/_transform.scss
-meta_description: Specify the 2D transformation for all browsers.
+meta_description: Specify transformations for many browsers.
layout: core
-deprecated: true
+beta: true
classnames:
- reference
- core
- css3
---
- render 'reference' do
- %p.warning
- This import is deprecated. Please import
- transform-v2 instead.
+ %p
+ Provides mixins for CSS3 2D and 3D transforms. See
+ W3C: CSS 2D transforms
+ and See W3C: CSS 3D transforms.
+ %p
+ 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)**
+
diff --git a/examples/compass/src/pie.scss b/examples/compass/src/pie.scss
index 7863f5ed..9a701a29 100644
--- a/examples/compass/src/pie.scss
+++ b/examples/compass/src/pie.scss
@@ -3,8 +3,8 @@
// you to style in CSS things that you'd have to do using image chops otherwise.
//
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
+@import "compass/css3";
@import "compass/css3/pie";
-@import "compass/css3/version-2";
$pie-behavior: url("/stylesheets/PIE.htc");
diff --git a/frameworks/compass/stylesheets/compass/_css3.scss b/frameworks/compass/stylesheets/compass/_css3.scss
index ecb7f3d7..41f0447f 100644
--- a/frameworks/compass/stylesheets/compass/_css3.scss
+++ b/frameworks/compass/stylesheets/compass/_css3.scss
@@ -1 +1,16 @@
-@import "css3/version-1";
+@import "css3/border-radius";
+@import "css3/inline-block";
+@import "css3/opacity";
+@import "css3/box-shadow";
+@import "css3/text-shadow";
+@import "css3/columns";
+@import "css3/box-sizing";
+@import "css3/box";
+@import "css3/gradient";
+@import "css3/images";
+@import "css3/background-clip";
+@import "css3/background-origin";
+@import "css3/background-size";
+@import "css3/font-face";
+@import "css3/transform";
+@import "css3/transition";
diff --git a/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss b/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss
deleted file mode 100644
index 31a09fc3..00000000
--- a/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-// @doc off
-// These defaults make the arguments optional for this mixin
-// If you like, set different defaults before importing.
-// @doc on
-
-@import "shared";
-
-
-// The default color for box shadows
-$default-box-shadow-color: #333333 !default;
-
-// The default horizontal offset. Positive is to the right.
-$default-box-shadow-h-offset: 0px !default;
-
-// The default vertical offset. Positive is down.
-$default-box-shadow-v-offset: 0px !default;
-
-// The default blur length.
-$default-box-shadow-blur: 5px !default;
-
-// The default spread length.
-$default-box-shadow-spread : false !default;
-
-// The default shadow instet: inset or false (for standard shadow).
-$default-box-shadow-inset : false !default;
-
-// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
-// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
-@mixin single-box-shadow(
- $color : $default-box-shadow-color,
- $hoff : $default-box-shadow-h-offset,
- $voff : $default-box-shadow-v-offset,
- $blur : $default-box-shadow-blur,
- $spread : $default-box-shadow-spread,
- $inset : $default-box-shadow-inset
-) {
- @if not ($inset == true or $inset == false or $inset == inset) {
- @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
- }
-
- @if $color == none {
- @include multiple-box-shadows(none);
- } @else {
- $full : $hoff $voff;
- @if $blur { $full: $full $blur; }
- @if $spread { $full: $full $spread; }
- @if $color { $full: $full $color; }
- @if $inset { $full: inset $full; }
- @include multiple-box-shadows($full);
- }
-}
-
-// Provides cross-browser box shadows when one or more box shadows are needed.
-@mixin multiple-box-shadows(
- $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
-) {
-
- @if not ($default-box-shadow-inset == true or $default-box-shadow-inset == false or $default-box-shadow-inset == inset) {
- @warn "$default-box-shadow-inset expected to be true or the inset keyword. Got #{$default-box-shadow-inset} instead. Using: inset";
- }
-
- @if $shadow-1 == default {
- $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
- }
-
- $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
- @include experimental(box-shadow, $shadow,
- -moz, -webkit, -o, not -ms, not -khtml, official
- );
-}
-
-@mixin box-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
-) {
- @include multiple-box-shadows(
- $shadow-1, $shadow-2, $shadow-3,
- $shadow-4, $shadow-5, $shadow-6,
- $shadow-7, $shadow-8, $shadow-9, $shadow-10
- );
-}
\ No newline at end of file
diff --git a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
index 87c8cc6b..92ae79e7 100644
--- a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
@@ -1,17 +1,111 @@
-@import "box-shadow-v2";
+// @doc off
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults before importing.
+// @doc on
-// This mixin is deprecated.
-// Use the box-shadow mixin from compass/css3/box-shadow-v2 instead.
-// @deprecated
-@mixin box-shadow(
- $color : $default-box-shadow-color,
- $hoff : $default-box-shadow-h-offset,
- $voff : $default-box-shadow-v-offset,
- $blur : $default-box-shadow-blur,
- $spread : $default-box-shadow-spread,
+@import "shared";
+
+
+// The default color for box shadows
+$default-box-shadow-color: #333333 !default;
+
+// The default horizontal offset. Positive is to the right.
+$default-box-shadow-h-offset: 0px !default;
+
+// The default vertical offset. Positive is down.
+$default-box-shadow-v-offset: 0px !default;
+
+// The default blur length.
+$default-box-shadow-blur: 5px !default;
+
+// The default spread length.
+$default-box-shadow-spread : false !default;
+
+// The default shadow inset: inset or false (for standard shadow).
+$default-box-shadow-inset : false !default;
+
+// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
+// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
+@mixin single-box-shadow(
+ $color : $default-box-shadow-color,
+ $hoff : $default-box-shadow-h-offset,
+ $voff : $default-box-shadow-v-offset,
+ $blur : $default-box-shadow-blur,
+ $spread : $default-box-shadow-spread,
$inset : $default-box-shadow-inset
) {
- @warn "This version of the box-shadow mixin has been deprecated. Please read: http://beta.compass-style.org/upgrading/css3-v2/#box-shadow for details.";
- @include single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset);
+ @if not ($inset == true or $inset == false or $inset == inset) {
+ @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
+ }
+
+ @if $color == none {
+ @include multiple-box-shadows(none);
+ } @else {
+ $full : $hoff $voff;
+ @if $blur { $full: $full $blur; }
+ @if $spread { $full: $full $spread; }
+ @if $color { $full: $full $color; }
+ @if $inset { $full: inset $full; }
+ @include multiple-box-shadows($full);
+ }
}
+// Provides cross-browser box shadows when one or more box shadows are needed.
+@mixin multiple-box-shadows(
+ $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
+) {
+
+ @if $shadow-1 == default {
+ $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
+ }
+
+ $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+ @include experimental(box-shadow, $shadow,
+ -moz, -webkit, -o, not -ms, not -khtml, official
+ );
+}
+
+@mixin box-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 type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6));
+ @if $legacy {
+ @warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " +
+ "Pass the values as a single space-separated list, or use the single-box-shadow mixin. " +
+ "See http://beta.compass-style.org/help/tutorials/upgrading/css3-v2/ for more info.";
+ @include single-box-shadow(
+ if($shadow-1, $shadow-1, $default-box-shadow-color),
+ if($shadow-2, $shadow-2, $default-box-shadow-h-offset),
+ if($shadow-3, $shadow-3, $default-box-shadow-v-offset),
+ if($shadow-4, $shadow-4, $default-box-shadow-blur),
+ if($shadow-5, $shadow-5, $default-box-shadow-spread),
+ if($shadow-6, $shadow-6, $default-box-shadow-inset)
+ );
+ }
+ @else {
+ @include multiple-box-shadows(
+ $shadow-1, $shadow-2, $shadow-3,
+ $shadow-4, $shadow-5, $shadow-6,
+ $shadow-7, $shadow-8, $shadow-9, $shadow-10
+ );
+ }
+}
\ No newline at end of file
diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
index 055afc44..afca03c1 100644
--- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
@@ -1,8 +1,6 @@
@import "compass/utilities/general/hacks";
@import "images";
-@warn "The css3 gradient module is deprecated. For more information see: http://beta.compass-style.org/help/tutorials/upgrading/css3-v2/#gradients";
-
// The linear gradient mixin works best across browsers if you use percentage-based color stops.
//
// Examples:
@@ -34,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 {
@@ -77,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 {
diff --git a/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss b/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss
deleted file mode 100644
index 09a92330..00000000
--- a/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@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
- );
-}
\ No newline at end of file
diff --git a/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss b/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss
index 3097f9a4..4903ee4a 100644
--- a/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss
@@ -4,13 +4,13 @@
// 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
-@mixin text-shadow(
+@mixin single-text-shadow(
$color: $default-text-shadow-color,
$hoff: $default-text-shadow-h-offset,
$voff: $default-text-shadow-v-offset,
@@ -23,3 +23,57 @@ $default-text-shadow-blur: 1px !default;
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,
+ $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
+) {
+ @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);
+}
+
+@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/css3-v2/ 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 {
+ @include multiple-text-shadows(
+ $shadow-1, $shadow-2, $shadow-3,
+ $shadow-4, $shadow-5, $shadow-6,
+ $shadow-7, $shadow-8, $shadow-9, $shadow-10
+ );
+ }
+}
\ No newline at end of file
diff --git a/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss b/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss
new file mode 100644
index 00000000..ac661da8
--- /dev/null
+++ b/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);
+}
diff --git a/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss b/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss
deleted file mode 100644
index 8056562e..00000000
--- a/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss
+++ /dev/null
@@ -1,584 +0,0 @@
-@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: 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
- );
-}
-
-// 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
- );
-}
diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss
index 9d566e45..8056562e 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transform.scss
+++ b/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)
-// Apply a transform-origin sent as a complete string.
+// 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
-@mixin apply-origin($origin) {
- @include experimental(transform-origin, $origin,
- -moz, -webkit, -o, not -ms, not -khtml, official
- );
-}
+// Defaults ------------------------------------------------------------------
+// @doc on
-// transform-origin requires x and y coordinates
+// 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
//
-// * 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);
- }
+// @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
+ );
}
-}
+}
-// A full transform mixin with everything you could want
+// Transform-origin sent as individual arguments:
//
-// * 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
+// @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)
) {
- $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
- @include apply-transform($transform);
- @include transform-origin($originx, $originy);
+ $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 Partials
+
+// 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 them with extra origin args, or along side +transform-origin
+// Use along with transform parameter mixins to adjust origin, perspective and style
+// ---------------------------------------------------------------------------
-// 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);
+// 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);
}
-// 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);
+// 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);
}
-// Adjust only the translation
-
-@mixin translate($transx: 0, $transy: 0) {
- @include apply-transform(translate($transx, $transy));
+// 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);
}
-// 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);
+// 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
+ );
}
diff --git a/frameworks/compass/stylesheets/compass/css3/_version-1.scss b/frameworks/compass/stylesheets/compass/css3/_version-1.scss
deleted file mode 100644
index 273f9d49..00000000
--- a/frameworks/compass/stylesheets/compass/css3/_version-1.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "border-radius";
-@import "inline-block";
-@import "opacity";
-@import "box-shadow";
-@import "text-shadow";
-@import "columns";
-@import "box-sizing";
-@import "box";
-@import "images";
-@import "gradient";
-@import "background-clip";
-@import "background-origin";
-@import "background-size";
-@import "font-face";
-@import "transform";
-@import "transition";
diff --git a/frameworks/compass/stylesheets/compass/css3/_version-2.scss b/frameworks/compass/stylesheets/compass/css3/_version-2.scss
deleted file mode 100644
index ae111133..00000000
--- a/frameworks/compass/stylesheets/compass/css3/_version-2.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "border-radius";
-@import "inline-block";
-@import "opacity";
-@import "box-shadow-v2";
-@import "text-shadow-v2";
-@import "columns";
-@import "box-sizing";
-@import "box";
-@import "images";
-@import "background-clip";
-@import "background-origin";
-@import "background-size";
-@import "font-face";
-@import "transform-v2";
-@import "transition";
diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb
index 53b067e9..f1388111 100644
--- a/lib/compass/sass_extensions/functions/gradient_support.rb
+++ b/lib/compass/sass_extensions/functions/gradient_support.rb
@@ -270,7 +270,6 @@ module Compass::SassExtensions::Functions::GradientSupport
a.options = options
if a.is_a?(Sass::Script::List)
Sass::Script::List.new(a.value.map do |v|
- v.options = options
v.respond_to?(:to_#{prefix}) ? v.to_#{prefix} : v
end, a.separator)
else
diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css
index 0927886e..58ee72f3 100644
--- a/test/fixtures/stylesheets/compass/css/gradients.css
+++ b/test/fixtures/stylesheets/compass/css/gradients.css
@@ -46,7 +46,7 @@
list-style-image: url('/images/4x6.png?busted=true'); }
.shorthand-list-image-plain {
- list-style-image: outside url('/images/4x6.png?busted=true'); }
+ list-style-image: outside url("/images/4x6.png?busted=true"); }
.direct-list-image-with-gradient {
list-style-image: -moz-radial-gradient(#00ff00, #ff0000 10px);
diff --git a/test/fixtures/stylesheets/compass/css/text_shadow.css b/test/fixtures/stylesheets/compass/css/text_shadow.css
new file mode 100644
index 00000000..bb07037e
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/css/text_shadow.css
@@ -0,0 +1,14 @@
+.legacy-text-shadow {
+ text-shadow: #777777 5px 5px 10px; }
+
+.single-text-shadow {
+ text-shadow: #aaaaaa 0px 0px 1px; }
+
+.default-text-shadow {
+ text-shadow: #aaaaaa 0px 0px 1px; }
+
+.multiple-text-shadows-with-default {
+ text-shadow: #aaaaaa 0px 0px 1px, 2px 2px 5px #222222; }
+
+.multiple-text-shadows {
+ text-shadow: 4px 4px 10px #444444, 2px 2px 5px #222222; }
diff --git a/test/fixtures/stylesheets/compass/sass/box.sass b/test/fixtures/stylesheets/compass/sass/box.sass
index 879a3b5d..62c77216 100644
--- a/test/fixtures/stylesheets/compass/sass/box.sass
+++ b/test/fixtures/stylesheets/compass/sass/box.sass
@@ -1,4 +1,4 @@
-@import compass/css3
+@import compass/css3/box
.hbox
+display-box
diff --git a/test/fixtures/stylesheets/compass/sass/box_shadow.scss b/test/fixtures/stylesheets/compass/sass/box_shadow.scss
index 0253f4d0..a2428160 100644
--- a/test/fixtures/stylesheets/compass/sass/box_shadow.scss
+++ b/test/fixtures/stylesheets/compass/sass/box_shadow.scss
@@ -1,4 +1,4 @@
-@import "compass/css3/box-shadow-v2";
+@import "compass/css3/box-shadow";
.box-shadow { @include box-shadow(default, 2px 2px 5px #222);}
.single-box-shadow { @include single-box-shadow;}
diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass
index 9f70d8da..4369b300 100644
--- a/test/fixtures/stylesheets/compass/sass/gradients.sass
+++ b/test/fixtures/stylesheets/compass/sass/gradients.sass
@@ -1,4 +1,4 @@
-@import compass/css3
+@import compass/css3/images, compass/css3/gradient
$experimental-support-for-svg: true
.bg-simple-image
diff --git a/test/fixtures/stylesheets/compass/sass/pie.scss b/test/fixtures/stylesheets/compass/sass/pie.scss
index b8f6484d..ed89d025 100644
--- a/test/fixtures/stylesheets/compass/sass/pie.scss
+++ b/test/fixtures/stylesheets/compass/sass/pie.scss
@@ -1,5 +1,5 @@
-@import "compass/css3/pie";
@import "compass/css3";
+@import "compass/css3/pie";
// There are two approaches to creating PIE elements
diff --git a/test/fixtures/stylesheets/compass/sass/text_shadow.scss b/test/fixtures/stylesheets/compass/sass/text_shadow.scss
new file mode 100644
index 00000000..63129328
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/sass/text_shadow.scss
@@ -0,0 +1,7 @@
+@import "compass/css3/text-shadow";
+
+.legacy-text-shadow { @include text-shadow(#777, 5px, 5px, 10px); }
+.single-text-shadow { @include single-text-shadow;}
+.default-text-shadow { @include text-shadow;}
+.multiple-text-shadows-with-default { @include multiple-text-shadows(default, 2px 2px 5px #222);}
+.multiple-text-shadows { @include multiple-text-shadows(4px 4px 10px #444, 2px 2px 5px #222);}
diff --git a/test/fixtures/stylesheets/compass/sass/transform.scss b/test/fixtures/stylesheets/compass/sass/transform.scss
index 0fe47c82..9accbefc 100644
--- a/test/fixtures/stylesheets/compass/sass/transform.scss
+++ b/test/fixtures/stylesheets/compass/sass/transform.scss
@@ -1,4 +1,4 @@
-@import "compass/css3/transform-v2";
+@import "compass/css3/transform";
.apply-origin-2d { @include apply-origin(2px 5%, false); }
.apply-origin-3d { @include apply-origin(2px 5% 2in, true); }