From 2b6380b272b17179d7c19f3b9667717166149e75 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Wed, 14 Mar 2012 00:46:52 -0700 Subject: [PATCH 1/5] Version bump and prepare for release. --- VERSION.yml | 2 +- doc-src/content/CHANGELOG.markdown | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/VERSION.yml b/VERSION.yml index a5964142..ee17ab7b 100644 --- a/VERSION.yml +++ b/VERSION.yml @@ -1,5 +1,5 @@ --- :major: 0 :minor: 12 -:build: 0 +:build: 1 :name: Alnilam diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 649a7a81..6ade308e 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -14,6 +14,13 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/ The Documentation for the [latest preview release](http://beta.compass-style.org/) +0.12.1 (03/14/2012) +------------------- + +* Fixed a bug in font-files mime-type detection. +* Code cleanup and better documentation for the vertical-rhythm module. +* Add support for installing compass on Macs using a one-click installer. + 0.12.rc.2 (03/11/2012) ---------------------- From 9cfd753837a671805d7d6482afdb77f3bb568de3 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Wed, 14 Mar 2012 01:11:41 -0700 Subject: [PATCH 2/5] link to downloads page --- doc-src/content/CHANGELOG.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 6ade308e..85f0c457 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -19,7 +19,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org * Fixed a bug in font-files mime-type detection. * Code cleanup and better documentation for the vertical-rhythm module. -* Add support for installing compass on Macs using a one-click installer. +* Add support for installing compass on Macs using a [one-click installer](https://github.com/chriseppstein/compass/downloads). 0.12.rc.2 (03/11/2012) ---------------------- From c46e3c53ab482afc7bb8bbc975388cb891a14fc8 Mon Sep 17 00:00:00 2001 From: "Andrey A.I. Sitnik" Date: Thu, 15 Mar 2012 21:35:17 +0400 Subject: [PATCH 3/5] Add 3D transformations with -moz- prefix --- .../stylesheets/compass/css3/_transform.scss | 12 +++---- .../stylesheets/compass/css/transform.css | 36 +++++++++++++++++++ 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss index 93cc9d96..7457b31a 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss @@ -104,7 +104,7 @@ $default-skew-y : 5deg !default; $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; @if $only3d { @include experimental(transform-origin, $origin, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @else { @include experimental(transform-origin, $origin, @@ -147,7 +147,7 @@ $default-skew-y : 5deg !default; ) { @if $only3d { @include experimental(transform, $transform, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @else { @include experimental(transform, $transform, @@ -179,7 +179,7 @@ $default-skew-y : 5deg !default; // values from 500 to 1000 are more-or-less "normal" - a good starting-point. @mixin perspective($p) { @include experimental(perspective, $p, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @@ -190,7 +190,7 @@ $default-skew-y : 5deg !default; // where the two arguments represent x/y coordinates @mixin perspective-origin($origin: 50%) { @include experimental(perspective-origin, $origin, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @@ -202,7 +202,7 @@ $default-skew-y : 5deg !default; // browsers default to `flat`, mixin defaults to `preserve-3d` @mixin transform-style($style: preserve-3d) { @include experimental(transform-style, $style, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @@ -214,7 +214,7 @@ $default-skew-y : 5deg !default; // browsers default to visible, mixin defaults to hidden @mixin backface-visibility($visibility: hidden) { @include experimental(backface-visibility, $visibility, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css index d79d25a8..6ddb8327 100644 --- a/test/fixtures/stylesheets/compass/css/transform.css +++ b/test/fixtures/stylesheets/compass/css/transform.css @@ -7,6 +7,7 @@ .apply-origin-3d { -webkit-transform-origin: 2px 5% 2in; + -moz-transform-origin: 2px 5% 2in; transform-origin: 2px 5% 2in; } .transform-origin-2d { @@ -18,6 +19,7 @@ .transform-origin-3d { -webkit-transform-origin: 100px 100px 100px; + -moz-transform-origin: 100px 100px 100px; transform-origin: 100px 100px 100px; } .transform-2d { @@ -29,22 +31,27 @@ .transform-3d { -webkit-transform: rotateZ(20deg); + -moz-transform: rotateZ(20deg); transform: rotateZ(20deg); } .perspective { -webkit-perspective: 500; + -moz-perspective: 500; perspective: 500; } .perspective-origin { -webkit-perspective-origin: 25% 25%; + -moz-perspective-origin: 25% 25%; perspective-origin: 25% 25%; } .transform-style { -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .backface-visibility { -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; backface-visibility: hidden; } .scale { @@ -56,6 +63,7 @@ .scale-3d { -webkit-transform: scale(30px, 50px); + -moz-transform: scale(30px, 50px); transform: scale(30px, 50px); } .scale-with-perspective { @@ -67,6 +75,7 @@ .scale-3d-with-perspective { -webkit-transform: perspective(500) scale(30px, 50px); + -moz-transform: perspective(500) scale(30px, 50px); transform: perspective(500) scale(30px, 50px); } .scale-x { @@ -78,6 +87,7 @@ .scale-x-3d { -webkit-transform: scaleX(30px); + -moz-transform: scaleX(30px); transform: scaleX(30px); } .scale-x-with-perspective { @@ -89,6 +99,7 @@ .scale-x-3d-with-perspective { -webkit-transform: perspective(500) scaleX(30px); + -moz-transform: perspective(500) scaleX(30px); transform: perspective(500) scaleX(30px); } .scale-y { @@ -100,6 +111,7 @@ .scale-y-3d { -webkit-transform: scaleY(50px); + -moz-transform: scaleY(50px); transform: scaleY(50px); } .scale-y-with-perspective { @@ -111,22 +123,27 @@ .scale-y-3d-with-perspective { -webkit-transform: perspective(500) scaleY(50px); + -moz-transform: perspective(500) scaleY(50px); transform: perspective(500) scaleY(50px); } .scale-z { -webkit-transform: scaleZ(50px); + -moz-transform: scaleZ(50px); transform: scaleZ(50px); } .scale-z-with-perspective { -webkit-transform: perspective(500) scaleZ(50px); + -moz-transform: perspective(500) scaleZ(50px); transform: perspective(500) scaleZ(50px); } .scale3d { -webkit-transform: scale3d(30px, 50px, 100px); + -moz-transform: scale3d(30px, 50px, 100px); transform: scale3d(30px, 50px, 100px); } .scaled3-with-perspective { -webkit-transform: perspective(500) scale3d(30px, 50px, 100px); + -moz-transform: perspective(500) scale3d(30px, 50px, 100px); transform: perspective(500) scale3d(30px, 50px, 100px); } .rotate { @@ -159,26 +176,32 @@ .rotate-x { -webkit-transform: rotateX(25deg); + -moz-transform: rotateX(25deg); transform: rotateX(25deg); } .rotate-x-with-perspective { -webkit-transform: perspective(500) rotateX(25deg); + -moz-transform: perspective(500) rotateX(25deg); transform: perspective(500) rotateX(25deg); } .rotate-y { -webkit-transform: rotateY(25deg); + -moz-transform: rotateY(25deg); transform: rotateY(25deg); } .rotate-y-with-perspective { -webkit-transform: perspective(500) rotateY(25deg); + -moz-transform: perspective(500) rotateY(25deg); transform: perspective(500) rotateY(25deg); } .rotate-3d { -webkit-transform: rotate3d(5, 2, 1, 75deg); + -moz-transform: rotate3d(5, 2, 1, 75deg); transform: rotate3d(5, 2, 1, 75deg); } .rotate-3d-with-perspective { -webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg); + -moz-transform: perspective(500) rotate3d(5, 2, 1, 75deg); transform: perspective(500) rotate3d(5, 2, 1, 75deg); } .translate { @@ -197,10 +220,12 @@ .translate-3d { -webkit-transform: translate(20px, 30%); + -moz-transform: translate(20px, 30%); transform: translate(20px, 30%); } .translate-3d-with-perspective { -webkit-transform: perspective(500) translate(20px, 30%); + -moz-transform: perspective(500) translate(20px, 30%); transform: perspective(500) translate(20px, 30%); } .translate-x { @@ -212,6 +237,7 @@ .translate-x-3d { -webkit-transform: translateX(30px); + -moz-transform: translateX(30px); transform: translateX(30px); } .translate-x-with-perspective { @@ -223,6 +249,7 @@ .translate-x-3d-with-perspective { -webkit-transform: perspective(500) translateX(30px); + -moz-transform: perspective(500) translateX(30px); transform: perspective(500) translateX(30px); } .translate-y { @@ -234,6 +261,7 @@ .translate-y-3d { -webkit-transform: translateY(30px); + -moz-transform: translateY(30px); transform: translateY(30px); } .translate-y-with-perspective { @@ -245,22 +273,27 @@ .translate-y-3d-with-perspective { -webkit-transform: perspective(500) translateY(30px); + -moz-transform: perspective(500) translateY(30px); transform: perspective(500) translateY(30px); } .translate-z { -webkit-transform: translateZ(30px); + -moz-transform: translateZ(30px); transform: translateZ(30px); } .translate-z-with-perspective { -webkit-transform: perspective(500) translateZ(30px); + -moz-transform: perspective(500) translateZ(30px); transform: perspective(500) translateZ(30px); } .translate-3d { -webkit-transform: translate3d(30px, 50px, 75px); + -moz-transform: translate3d(30px, 50px, 75px); transform: translate3d(30px, 50px, 75px); } .translate-3d-with-perspective { -webkit-transform: perspective(500) translate3d(30px, 50px, 75px); + -moz-transform: perspective(500) translate3d(30px, 50px, 75px); transform: perspective(500) translate3d(30px, 50px, 75px); } .skew { @@ -272,6 +305,7 @@ .skew-3d { -webkit-transform: skew(20deg, 50deg); + -moz-transform: skew(20deg, 50deg); transform: skew(20deg, 50deg); } .skew-x { @@ -283,6 +317,7 @@ .skew-x-3d { -webkit-transform: skewX(20deg); + -moz-transform: skewX(20deg); transform: skewX(20deg); } .skew-y { @@ -294,6 +329,7 @@ .skew-y-3d { -webkit-transform: skewY(20deg); + -moz-transform: skewY(20deg); transform: skewY(20deg); } .create-transform-2d { From 439959d47d3d3c1cda48f189e04c2b04922ad16a Mon Sep 17 00:00:00 2001 From: "Andrey A.I. Sitnik" Date: Fri, 16 Mar 2012 01:25:37 +0400 Subject: [PATCH 4/5] Add 3D transformations with -ms- prefix --- .../stylesheets/compass/css3/_transform.scss | 12 +++---- .../stylesheets/compass/css/transform.css | 36 +++++++++++++++++++ 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss index 7457b31a..9c78df6b 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss @@ -104,7 +104,7 @@ $default-skew-y : 5deg !default; $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; @if $only3d { @include experimental(transform-origin, $origin, - -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, -ms, not -khtml, official ); } @else { @include experimental(transform-origin, $origin, @@ -147,7 +147,7 @@ $default-skew-y : 5deg !default; ) { @if $only3d { @include experimental(transform, $transform, - -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, -ms, not -khtml, official ); } @else { @include experimental(transform, $transform, @@ -179,7 +179,7 @@ $default-skew-y : 5deg !default; // values from 500 to 1000 are more-or-less "normal" - a good starting-point. @mixin perspective($p) { @include experimental(perspective, $p, - -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, -ms, not -khtml, official ); } @@ -190,7 +190,7 @@ $default-skew-y : 5deg !default; // where the two arguments represent x/y coordinates @mixin perspective-origin($origin: 50%) { @include experimental(perspective-origin, $origin, - -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, -ms, not -khtml, official ); } @@ -202,7 +202,7 @@ $default-skew-y : 5deg !default; // browsers default to `flat`, mixin defaults to `preserve-3d` @mixin transform-style($style: preserve-3d) { @include experimental(transform-style, $style, - -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, -ms, not -khtml, official ); } @@ -214,7 +214,7 @@ $default-skew-y : 5deg !default; // browsers default to visible, mixin defaults to hidden @mixin backface-visibility($visibility: hidden) { @include experimental(backface-visibility, $visibility, - -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, -ms, not -khtml, official ); } diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css index 6ddb8327..3c06da88 100644 --- a/test/fixtures/stylesheets/compass/css/transform.css +++ b/test/fixtures/stylesheets/compass/css/transform.css @@ -8,6 +8,7 @@ .apply-origin-3d { -webkit-transform-origin: 2px 5% 2in; -moz-transform-origin: 2px 5% 2in; + -ms-transform-origin: 2px 5% 2in; transform-origin: 2px 5% 2in; } .transform-origin-2d { @@ -20,6 +21,7 @@ .transform-origin-3d { -webkit-transform-origin: 100px 100px 100px; -moz-transform-origin: 100px 100px 100px; + -ms-transform-origin: 100px 100px 100px; transform-origin: 100px 100px 100px; } .transform-2d { @@ -32,26 +34,31 @@ .transform-3d { -webkit-transform: rotateZ(20deg); -moz-transform: rotateZ(20deg); + -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); } .perspective { -webkit-perspective: 500; -moz-perspective: 500; + -ms-perspective: 500; perspective: 500; } .perspective-origin { -webkit-perspective-origin: 25% 25%; -moz-perspective-origin: 25% 25%; + -ms-perspective-origin: 25% 25%; perspective-origin: 25% 25%; } .transform-style { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .backface-visibility { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; backface-visibility: hidden; } .scale { @@ -64,6 +71,7 @@ .scale-3d { -webkit-transform: scale(30px, 50px); -moz-transform: scale(30px, 50px); + -ms-transform: scale(30px, 50px); transform: scale(30px, 50px); } .scale-with-perspective { @@ -76,6 +84,7 @@ .scale-3d-with-perspective { -webkit-transform: perspective(500) scale(30px, 50px); -moz-transform: perspective(500) scale(30px, 50px); + -ms-transform: perspective(500) scale(30px, 50px); transform: perspective(500) scale(30px, 50px); } .scale-x { @@ -88,6 +97,7 @@ .scale-x-3d { -webkit-transform: scaleX(30px); -moz-transform: scaleX(30px); + -ms-transform: scaleX(30px); transform: scaleX(30px); } .scale-x-with-perspective { @@ -100,6 +110,7 @@ .scale-x-3d-with-perspective { -webkit-transform: perspective(500) scaleX(30px); -moz-transform: perspective(500) scaleX(30px); + -ms-transform: perspective(500) scaleX(30px); transform: perspective(500) scaleX(30px); } .scale-y { @@ -112,6 +123,7 @@ .scale-y-3d { -webkit-transform: scaleY(50px); -moz-transform: scaleY(50px); + -ms-transform: scaleY(50px); transform: scaleY(50px); } .scale-y-with-perspective { @@ -124,26 +136,31 @@ .scale-y-3d-with-perspective { -webkit-transform: perspective(500) scaleY(50px); -moz-transform: perspective(500) scaleY(50px); + -ms-transform: perspective(500) scaleY(50px); transform: perspective(500) scaleY(50px); } .scale-z { -webkit-transform: scaleZ(50px); -moz-transform: scaleZ(50px); + -ms-transform: scaleZ(50px); transform: scaleZ(50px); } .scale-z-with-perspective { -webkit-transform: perspective(500) scaleZ(50px); -moz-transform: perspective(500) scaleZ(50px); + -ms-transform: perspective(500) scaleZ(50px); transform: perspective(500) scaleZ(50px); } .scale3d { -webkit-transform: scale3d(30px, 50px, 100px); -moz-transform: scale3d(30px, 50px, 100px); + -ms-transform: scale3d(30px, 50px, 100px); transform: scale3d(30px, 50px, 100px); } .scaled3-with-perspective { -webkit-transform: perspective(500) scale3d(30px, 50px, 100px); -moz-transform: perspective(500) scale3d(30px, 50px, 100px); + -ms-transform: perspective(500) scale3d(30px, 50px, 100px); transform: perspective(500) scale3d(30px, 50px, 100px); } .rotate { @@ -177,31 +194,37 @@ .rotate-x { -webkit-transform: rotateX(25deg); -moz-transform: rotateX(25deg); + -ms-transform: rotateX(25deg); transform: rotateX(25deg); } .rotate-x-with-perspective { -webkit-transform: perspective(500) rotateX(25deg); -moz-transform: perspective(500) rotateX(25deg); + -ms-transform: perspective(500) rotateX(25deg); transform: perspective(500) rotateX(25deg); } .rotate-y { -webkit-transform: rotateY(25deg); -moz-transform: rotateY(25deg); + -ms-transform: rotateY(25deg); transform: rotateY(25deg); } .rotate-y-with-perspective { -webkit-transform: perspective(500) rotateY(25deg); -moz-transform: perspective(500) rotateY(25deg); + -ms-transform: perspective(500) rotateY(25deg); transform: perspective(500) rotateY(25deg); } .rotate-3d { -webkit-transform: rotate3d(5, 2, 1, 75deg); -moz-transform: rotate3d(5, 2, 1, 75deg); + -ms-transform: rotate3d(5, 2, 1, 75deg); transform: rotate3d(5, 2, 1, 75deg); } .rotate-3d-with-perspective { -webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg); -moz-transform: perspective(500) rotate3d(5, 2, 1, 75deg); + -ms-transform: perspective(500) rotate3d(5, 2, 1, 75deg); transform: perspective(500) rotate3d(5, 2, 1, 75deg); } .translate { @@ -221,11 +244,13 @@ .translate-3d { -webkit-transform: translate(20px, 30%); -moz-transform: translate(20px, 30%); + -ms-transform: translate(20px, 30%); transform: translate(20px, 30%); } .translate-3d-with-perspective { -webkit-transform: perspective(500) translate(20px, 30%); -moz-transform: perspective(500) translate(20px, 30%); + -ms-transform: perspective(500) translate(20px, 30%); transform: perspective(500) translate(20px, 30%); } .translate-x { @@ -238,6 +263,7 @@ .translate-x-3d { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); + -ms-transform: translateX(30px); transform: translateX(30px); } .translate-x-with-perspective { @@ -250,6 +276,7 @@ .translate-x-3d-with-perspective { -webkit-transform: perspective(500) translateX(30px); -moz-transform: perspective(500) translateX(30px); + -ms-transform: perspective(500) translateX(30px); transform: perspective(500) translateX(30px); } .translate-y { @@ -262,6 +289,7 @@ .translate-y-3d { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); + -ms-transform: translateY(30px); transform: translateY(30px); } .translate-y-with-perspective { @@ -274,26 +302,31 @@ .translate-y-3d-with-perspective { -webkit-transform: perspective(500) translateY(30px); -moz-transform: perspective(500) translateY(30px); + -ms-transform: perspective(500) translateY(30px); transform: perspective(500) translateY(30px); } .translate-z { -webkit-transform: translateZ(30px); -moz-transform: translateZ(30px); + -ms-transform: translateZ(30px); transform: translateZ(30px); } .translate-z-with-perspective { -webkit-transform: perspective(500) translateZ(30px); -moz-transform: perspective(500) translateZ(30px); + -ms-transform: perspective(500) translateZ(30px); transform: perspective(500) translateZ(30px); } .translate-3d { -webkit-transform: translate3d(30px, 50px, 75px); -moz-transform: translate3d(30px, 50px, 75px); + -ms-transform: translate3d(30px, 50px, 75px); transform: translate3d(30px, 50px, 75px); } .translate-3d-with-perspective { -webkit-transform: perspective(500) translate3d(30px, 50px, 75px); -moz-transform: perspective(500) translate3d(30px, 50px, 75px); + -ms-transform: perspective(500) translate3d(30px, 50px, 75px); transform: perspective(500) translate3d(30px, 50px, 75px); } .skew { @@ -306,6 +339,7 @@ .skew-3d { -webkit-transform: skew(20deg, 50deg); -moz-transform: skew(20deg, 50deg); + -ms-transform: skew(20deg, 50deg); transform: skew(20deg, 50deg); } .skew-x { @@ -318,6 +352,7 @@ .skew-x-3d { -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); + -ms-transform: skewX(20deg); transform: skewX(20deg); } .skew-y { @@ -330,6 +365,7 @@ .skew-y-3d { -webkit-transform: skewY(20deg); -moz-transform: skewY(20deg); + -ms-transform: skewY(20deg); transform: skewY(20deg); } .create-transform-2d { From 436a2575e13892d4735aa772fb4aa335adee75c0 Mon Sep 17 00:00:00 2001 From: "Andrey A.I. Sitnik" Date: Fri, 16 Mar 2012 03:34:53 +0400 Subject: [PATCH 5/5] Add unsupported yet 3D transformations with -o- prefix --- .../stylesheets/compass/css3/_transform.scss | 12 +++---- .../stylesheets/compass/css/transform.css | 36 +++++++++++++++++++ 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss index 9c78df6b..a7c5e6ee 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss @@ -104,7 +104,7 @@ $default-skew-y : 5deg !default; $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; @if $only3d { @include experimental(transform-origin, $origin, - -moz, -webkit, not -o, -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @else { @include experimental(transform-origin, $origin, @@ -147,7 +147,7 @@ $default-skew-y : 5deg !default; ) { @if $only3d { @include experimental(transform, $transform, - -moz, -webkit, not -o, -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @else { @include experimental(transform, $transform, @@ -179,7 +179,7 @@ $default-skew-y : 5deg !default; // values from 500 to 1000 are more-or-less "normal" - a good starting-point. @mixin perspective($p) { @include experimental(perspective, $p, - -moz, -webkit, not -o, -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @@ -190,7 +190,7 @@ $default-skew-y : 5deg !default; // where the two arguments represent x/y coordinates @mixin perspective-origin($origin: 50%) { @include experimental(perspective-origin, $origin, - -moz, -webkit, not -o, -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @@ -202,7 +202,7 @@ $default-skew-y : 5deg !default; // browsers default to `flat`, mixin defaults to `preserve-3d` @mixin transform-style($style: preserve-3d) { @include experimental(transform-style, $style, - -moz, -webkit, not -o, -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @@ -214,7 +214,7 @@ $default-skew-y : 5deg !default; // browsers default to visible, mixin defaults to hidden @mixin backface-visibility($visibility: hidden) { @include experimental(backface-visibility, $visibility, - -moz, -webkit, not -o, -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css index 3c06da88..c6231069 100644 --- a/test/fixtures/stylesheets/compass/css/transform.css +++ b/test/fixtures/stylesheets/compass/css/transform.css @@ -9,6 +9,7 @@ -webkit-transform-origin: 2px 5% 2in; -moz-transform-origin: 2px 5% 2in; -ms-transform-origin: 2px 5% 2in; + -o-transform-origin: 2px 5% 2in; transform-origin: 2px 5% 2in; } .transform-origin-2d { @@ -22,6 +23,7 @@ -webkit-transform-origin: 100px 100px 100px; -moz-transform-origin: 100px 100px 100px; -ms-transform-origin: 100px 100px 100px; + -o-transform-origin: 100px 100px 100px; transform-origin: 100px 100px 100px; } .transform-2d { @@ -35,30 +37,35 @@ -webkit-transform: rotateZ(20deg); -moz-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); + -o-transform: rotateZ(20deg); transform: rotateZ(20deg); } .perspective { -webkit-perspective: 500; -moz-perspective: 500; -ms-perspective: 500; + -o-perspective: 500; perspective: 500; } .perspective-origin { -webkit-perspective-origin: 25% 25%; -moz-perspective-origin: 25% 25%; -ms-perspective-origin: 25% 25%; + -o-perspective-origin: 25% 25%; perspective-origin: 25% 25%; } .transform-style { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; transform-style: preserve-3d; } .backface-visibility { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; backface-visibility: hidden; } .scale { @@ -72,6 +79,7 @@ -webkit-transform: scale(30px, 50px); -moz-transform: scale(30px, 50px); -ms-transform: scale(30px, 50px); + -o-transform: scale(30px, 50px); transform: scale(30px, 50px); } .scale-with-perspective { @@ -85,6 +93,7 @@ -webkit-transform: perspective(500) scale(30px, 50px); -moz-transform: perspective(500) scale(30px, 50px); -ms-transform: perspective(500) scale(30px, 50px); + -o-transform: perspective(500) scale(30px, 50px); transform: perspective(500) scale(30px, 50px); } .scale-x { @@ -98,6 +107,7 @@ -webkit-transform: scaleX(30px); -moz-transform: scaleX(30px); -ms-transform: scaleX(30px); + -o-transform: scaleX(30px); transform: scaleX(30px); } .scale-x-with-perspective { @@ -111,6 +121,7 @@ -webkit-transform: perspective(500) scaleX(30px); -moz-transform: perspective(500) scaleX(30px); -ms-transform: perspective(500) scaleX(30px); + -o-transform: perspective(500) scaleX(30px); transform: perspective(500) scaleX(30px); } .scale-y { @@ -124,6 +135,7 @@ -webkit-transform: scaleY(50px); -moz-transform: scaleY(50px); -ms-transform: scaleY(50px); + -o-transform: scaleY(50px); transform: scaleY(50px); } .scale-y-with-perspective { @@ -137,30 +149,35 @@ -webkit-transform: perspective(500) scaleY(50px); -moz-transform: perspective(500) scaleY(50px); -ms-transform: perspective(500) scaleY(50px); + -o-transform: perspective(500) scaleY(50px); transform: perspective(500) scaleY(50px); } .scale-z { -webkit-transform: scaleZ(50px); -moz-transform: scaleZ(50px); -ms-transform: scaleZ(50px); + -o-transform: scaleZ(50px); transform: scaleZ(50px); } .scale-z-with-perspective { -webkit-transform: perspective(500) scaleZ(50px); -moz-transform: perspective(500) scaleZ(50px); -ms-transform: perspective(500) scaleZ(50px); + -o-transform: perspective(500) scaleZ(50px); transform: perspective(500) scaleZ(50px); } .scale3d { -webkit-transform: scale3d(30px, 50px, 100px); -moz-transform: scale3d(30px, 50px, 100px); -ms-transform: scale3d(30px, 50px, 100px); + -o-transform: scale3d(30px, 50px, 100px); transform: scale3d(30px, 50px, 100px); } .scaled3-with-perspective { -webkit-transform: perspective(500) scale3d(30px, 50px, 100px); -moz-transform: perspective(500) scale3d(30px, 50px, 100px); -ms-transform: perspective(500) scale3d(30px, 50px, 100px); + -o-transform: perspective(500) scale3d(30px, 50px, 100px); transform: perspective(500) scale3d(30px, 50px, 100px); } .rotate { @@ -195,36 +212,42 @@ -webkit-transform: rotateX(25deg); -moz-transform: rotateX(25deg); -ms-transform: rotateX(25deg); + -o-transform: rotateX(25deg); transform: rotateX(25deg); } .rotate-x-with-perspective { -webkit-transform: perspective(500) rotateX(25deg); -moz-transform: perspective(500) rotateX(25deg); -ms-transform: perspective(500) rotateX(25deg); + -o-transform: perspective(500) rotateX(25deg); transform: perspective(500) rotateX(25deg); } .rotate-y { -webkit-transform: rotateY(25deg); -moz-transform: rotateY(25deg); -ms-transform: rotateY(25deg); + -o-transform: rotateY(25deg); transform: rotateY(25deg); } .rotate-y-with-perspective { -webkit-transform: perspective(500) rotateY(25deg); -moz-transform: perspective(500) rotateY(25deg); -ms-transform: perspective(500) rotateY(25deg); + -o-transform: perspective(500) rotateY(25deg); transform: perspective(500) rotateY(25deg); } .rotate-3d { -webkit-transform: rotate3d(5, 2, 1, 75deg); -moz-transform: rotate3d(5, 2, 1, 75deg); -ms-transform: rotate3d(5, 2, 1, 75deg); + -o-transform: rotate3d(5, 2, 1, 75deg); transform: rotate3d(5, 2, 1, 75deg); } .rotate-3d-with-perspective { -webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg); -moz-transform: perspective(500) rotate3d(5, 2, 1, 75deg); -ms-transform: perspective(500) rotate3d(5, 2, 1, 75deg); + -o-transform: perspective(500) rotate3d(5, 2, 1, 75deg); transform: perspective(500) rotate3d(5, 2, 1, 75deg); } .translate { @@ -245,12 +268,14 @@ -webkit-transform: translate(20px, 30%); -moz-transform: translate(20px, 30%); -ms-transform: translate(20px, 30%); + -o-transform: translate(20px, 30%); transform: translate(20px, 30%); } .translate-3d-with-perspective { -webkit-transform: perspective(500) translate(20px, 30%); -moz-transform: perspective(500) translate(20px, 30%); -ms-transform: perspective(500) translate(20px, 30%); + -o-transform: perspective(500) translate(20px, 30%); transform: perspective(500) translate(20px, 30%); } .translate-x { @@ -264,6 +289,7 @@ -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); + -o-transform: translateX(30px); transform: translateX(30px); } .translate-x-with-perspective { @@ -277,6 +303,7 @@ -webkit-transform: perspective(500) translateX(30px); -moz-transform: perspective(500) translateX(30px); -ms-transform: perspective(500) translateX(30px); + -o-transform: perspective(500) translateX(30px); transform: perspective(500) translateX(30px); } .translate-y { @@ -290,6 +317,7 @@ -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); + -o-transform: translateY(30px); transform: translateY(30px); } .translate-y-with-perspective { @@ -303,30 +331,35 @@ -webkit-transform: perspective(500) translateY(30px); -moz-transform: perspective(500) translateY(30px); -ms-transform: perspective(500) translateY(30px); + -o-transform: perspective(500) translateY(30px); transform: perspective(500) translateY(30px); } .translate-z { -webkit-transform: translateZ(30px); -moz-transform: translateZ(30px); -ms-transform: translateZ(30px); + -o-transform: translateZ(30px); transform: translateZ(30px); } .translate-z-with-perspective { -webkit-transform: perspective(500) translateZ(30px); -moz-transform: perspective(500) translateZ(30px); -ms-transform: perspective(500) translateZ(30px); + -o-transform: perspective(500) translateZ(30px); transform: perspective(500) translateZ(30px); } .translate-3d { -webkit-transform: translate3d(30px, 50px, 75px); -moz-transform: translate3d(30px, 50px, 75px); -ms-transform: translate3d(30px, 50px, 75px); + -o-transform: translate3d(30px, 50px, 75px); transform: translate3d(30px, 50px, 75px); } .translate-3d-with-perspective { -webkit-transform: perspective(500) translate3d(30px, 50px, 75px); -moz-transform: perspective(500) translate3d(30px, 50px, 75px); -ms-transform: perspective(500) translate3d(30px, 50px, 75px); + -o-transform: perspective(500) translate3d(30px, 50px, 75px); transform: perspective(500) translate3d(30px, 50px, 75px); } .skew { @@ -340,6 +373,7 @@ -webkit-transform: skew(20deg, 50deg); -moz-transform: skew(20deg, 50deg); -ms-transform: skew(20deg, 50deg); + -o-transform: skew(20deg, 50deg); transform: skew(20deg, 50deg); } .skew-x { @@ -353,6 +387,7 @@ -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg); + -o-transform: skewX(20deg); transform: skewX(20deg); } .skew-y { @@ -366,6 +401,7 @@ -webkit-transform: skewY(20deg); -moz-transform: skewY(20deg); -ms-transform: skewY(20deg); + -o-transform: skewY(20deg); transform: skewY(20deg); } .create-transform-2d {