From 8a1433b279df7e8290e5156b134351a1d2e8e5cb Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 24 Apr 2010 23:24:39 -0700 Subject: [PATCH] [Compass Core] [CSS3] Refactored the css3 modules to share a common implementation for experimental css3 properties. --- CHANGELOG.markdown | 10 +++- doc-src/content/reference/compass/css3.haml | 7 ++- .../reference/compass/css3/shared.haml | 17 ++++++ .../compass/css3/_background-clip.scss | 24 ++++++-- .../compass/css3/_background-origin.scss | 27 +++++++-- .../compass/css3/_background-size.scss | 18 +++--- .../compass/css3/_border-radius.scss | 50 +++++++++++----- .../stylesheets/compass/css3/_box-shadow.scss | 17 +++--- .../stylesheets/compass/css3/_box-sizing.scss | 12 ++-- .../stylesheets/compass/css3/_columns.scss | 59 ++++++------------- .../stylesheets/compass/css3/_font-face.scss | 2 + .../stylesheets/compass/css3/_gradient.scss | 2 + .../compass/css3/_inline-block.scss | 11 ++-- .../stylesheets/compass/css3/_opacity.scss | 24 +++++--- .../stylesheets/compass/css3/_shared.scss | 30 ++++++++++ .../compass/css3/_text-shadow.scss | 12 +++- .../stylesheets/compass/css3/_transform.scss | 51 ++++++++++------ .../stylesheets/compass/css3/_transition.scss | 40 ++++++------- 18 files changed, 267 insertions(+), 146 deletions(-) create mode 100644 doc-src/content/reference/compass/css3/shared.haml create mode 100644 frameworks/compass/stylesheets/compass/css3/_shared.scss diff --git a/CHANGELOG.markdown b/CHANGELOG.markdown index d811be48..6bcc46de 100644 --- a/CHANGELOG.markdown +++ b/CHANGELOG.markdown @@ -3,7 +3,15 @@ COMPASS CHANGELOG 0.10.0.rc4 (Unreleased) ----------------------- -* The `unobtrusive-logo` mixin is deprecated and will be removed. If you use this, please move the source to your project. +* The `unobtrusive-logo` mixin is deprecated and will be removed. + If you use this, please move the source to your project. +* The CSS3 modules were refactored to share a common implementation that + abstracts the browser prefixes that are supported and gives + greater control to the user over which prefixes are generated. + Depending on what mixins you were using you might see some changes to + what prefixes get generated by default and the order that they are + emitted. The goal of this change is to provide a more future-proof + implementation. 0.10.0.rc3 (April 13, 2010) --------------------------- diff --git a/doc-src/content/reference/compass/css3.haml b/doc-src/content/reference/compass/css3.haml index e1415e3b..f4cb1c1b 100644 --- a/doc-src/content/reference/compass/css3.haml +++ b/doc-src/content/reference/compass/css3.haml @@ -13,4 +13,9 @@ layout: core --- - render 'reference' do %p - The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow. \ No newline at end of file + The CSS3 module provides cross-browser mixins for CSS properties + introduced in CSS3, for example border-radius + and text-shadow. + %p + What rendering engines you support for the experimental css properties is governed by + the configurable variables defined in the css3 shared module. \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/shared.haml b/doc-src/content/reference/compass/css3/shared.haml new file mode 100644 index 00000000..ab29f552 --- /dev/null +++ b/doc-src/content/reference/compass/css3/shared.haml @@ -0,0 +1,17 @@ +--- +title: Compass Shared Utilities +crumb: Shared CSS Utilities +framework: compass +stylesheet: compass/css3/_shared.scss +layout: core +classnames: + - reference + - core + - css3 +--- +- render 'reference' do + %p + This module provides support to the other CSS3 modules. + You may want to use it to provide your own support for other + CSS3 proposals as they are being worked on and before support + is added to compass. diff --git a/frameworks/compass/stylesheets/compass/css3/_background-clip.scss b/frameworks/compass/stylesheets/compass/css3/_background-clip.scss index b8b5889e..8d3b9b5f 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-clip.scss @@ -1,4 +1,5 @@ -// +@import "shared"; + // The default value is `padding-box` -- the box model used by modern browsers. // // If you wish to do so, you can override the default constant with `border-box` @@ -19,6 +20,21 @@ $default-background-clip: padding-box !default; // webkit and mozilla use the deprecated short [border | padding] $deprecated: padding; @if $clip == border-box { $deprecated: border; } - background-clip: $clip; - -webkit-background-clip: $deprecated; - -moz-background-clip: $deprecated; } + // Support for webkit and mozilla's use of the deprecated short form + @include experimental(background-clip, $deprecated, + $experimental-support-for-mozilla, + $experimental-support-for-webkit, + false, // opera + false, // microsoft + false, // khtml + false // official + ); + @include experimental(background-clip, $clip, + false, // mozilla + false, // webkit + $experimental-support-for-opera, + $experimental-support-for-microsoft, + $experimental-support-for-khtml, + true // official + ); +} diff --git a/frameworks/compass/stylesheets/compass/css3/_background-origin.scss b/frameworks/compass/stylesheets/compass/css3/_background-origin.scss index dbad531d..4bd374e8 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-origin.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-origin.scss @@ -1,5 +1,7 @@ // Override `$default-background-origin` to change the default. +@import "shared"; + $default-background-origin: content-box !default; // Position the background off the edge of the padding, border or content @@ -14,11 +16,26 @@ $default-background-origin: content-box !default; @mixin background-origin($origin: $default-background-origin) { // webkit and mozilla use the deprecated short [border | padding | content] - $deprecated: padding; - @if $origin == border-box { $deprecated: border; } + $deprecated: $origin; + @if $origin == padding-box { $deprecated: padding; } + @if $origin == border-box { $deprecated: border; } @if $origin == content-box { $deprecated: content; } - background-origin: $origin; - -webkit-background-origin: $deprecated; - -moz-background-origin: $deprecated; + // Support for webkit and mozilla's use of the deprecated short form + @include experimental(background-origin, $deprecated, + $experimental-support-for-mozilla, + $experimental-support-for-webkit, + false, // opera + false, // microsoft + false, // khtml + false // official + ); + @include experimental(background-origin, $origin, + false, // mozilla + false, // webkit + $experimental-support-for-opera, + $experimental-support-for-microsoft, + $experimental-support-for-khtml, + true // official + ); } diff --git a/frameworks/compass/stylesheets/compass/css3/_background-size.scss b/frameworks/compass/stylesheets/compass/css3/_background-size.scss index 7901ee14..5292cbe6 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-size.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-size.scss @@ -1,15 +1,13 @@ -// Set the size of background images using px, width and height, or percentages. Supported in: Opera, Gecko, Webkit. -// -// * percentages are relative to the background-origin (default = padding-box) -// * mixin defaults to "100% auto" +@import "shared"; -// override constants to change defaults +// override to change the default $default-background-size: 100% auto !default; +// Set the size of background images using px, width and height, or percentages. +// Currently supported in: Opera, Gecko, Webkit. +// +// * percentages are relative to the background-origin (default = padding-box) +// * mixin defaults to: `$default-background-size` @mixin background-size($size: $default-background-size) { - background-size: $size; - -webkit-background-size: $size; - -o-background-size: $size; - -khtml-background-size: $size; - -moz-background-size: $size; + @include experimental(background-size, $size); } diff --git a/frameworks/compass/stylesheets/compass/css3/_border-radius.scss b/frameworks/compass/stylesheets/compass/css3/_border-radius.scss index 50573348..249fc2c7 100644 --- a/frameworks/compass/stylesheets/compass/css3/_border-radius.scss +++ b/frameworks/compass/stylesheets/compass/css3/_border-radius.scss @@ -1,58 +1,78 @@ +@import "shared"; + $default-border-radius: 5px !default; -// Round all borders by a specific amount, defaults to value of $default-border-radius +// Round all corners by a specific amount, defaults to value of `$default-border-radius`. @mixin border-radius($radius: $default-border-radius) { - border-radius: $radius; - -moz-border-radius: $radius; - -webkit-border-radius: $radius; } + @include experimental(border-radius, $radius); +} // Round radius at position by amount. // -// * values for $vert: "top", "bottom" -// * values for $horz: "left", "right" +// * legal values for `$vert`: `top`, `bottom` +// * legal values for `$horz`: `left`, `right` @mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; - -webkit-border-#{$vert}-#{$horz}-radius: $radius; } + -webkit-border-#{$vert}-#{$horz}-radius: $radius; + // Support for mozilla's syntax for specifying a corner + @include experimental("border-radius-#{$vert}#{$horz}", $radius, + $experimental-support-for-mozilla, + false, // webkit + false, // opera + false, // microsoft + false, // khtml + false // official + ); + @include experimental("border-#{$vert}-#{$horz}-radius", $radius, + false, // mozilla + $experimental-support-for-webkit, + $experimental-support-for-opera, + $experimental-support-for-microsoft, + $experimental-support-for-khtml, + true // official + ); + +} -// Round top-left radius only +// Round top-left corner only @mixin border-top-left-radius($radius: $default-border-radius) { @include border-corner-radius(top, left, $radius); } -// Round top-right radius only +// Round top-right corner only @mixin border-top-right-radius($radius: $default-border-radius) { @include border-corner-radius(top, right, $radius); } -// Round bottom-left radius only +// Round bottom-left corner only @mixin border-bottom-left-radius($radius: $default-border-radius) { @include border-corner-radius(bottom, left, $radius); } -// Round bottom-right radius only +// Round bottom-right corner only @mixin border-bottom-right-radius($radius: $default-border-radius) { @include border-corner-radius(bottom, right, $radius); } -// Round top corners by amount +// Round both top corners by amount @mixin border-top-radius($radius: $default-border-radius) { @include border-top-left-radius($radius); @include border-top-right-radius($radius); } -// Round right corners by amount +// Round both right corners by amount @mixin border-right-radius($radius: $default-border-radius) { @include border-top-right-radius($radius); @include border-bottom-right-radius($radius); } -// Round bottom corners by amount +// Round both bottom corners by amount @mixin border-bottom-radius($radius: $default-border-radius) { @include border-bottom-left-radius($radius); @include border-bottom-right-radius($radius); } -// Round left corners by amount +// Round both left corners by amount @mixin border-left-radius($radius: $default-border-radius) { @include border-top-left-radius($radius); @include border-bottom-left-radius($radius); } diff --git a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss index 13792ed1..27ea6935 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +++ b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss @@ -3,6 +3,8 @@ // If you like, set different defaults before importing. // @doc on +@import "shared"; + // The default color for box shadows $default-box-shadow-color: #333333 !default; @@ -18,10 +20,11 @@ $default-box-shadow-blur: 5px !default; // Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3. // Arguments are color, horizontal offset, vertical offset, and blur length. -@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) { - /* Webkit (Safari, Chrome) */ - -webkit-box-shadow: $color $hoff $voff $blur; - /* Gecko (Firefox, Camino) */ - -moz-box-shadow: $color $hoff $voff $blur; - /* CSS3 */ - box-shadow: $color $hoff $voff $blur; } +@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 +) { + @include experimental(box-shadow, $color $hoff $voff $blur); +} diff --git a/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss b/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss index 7457489a..38bb4f46 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss +++ b/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss @@ -1,14 +1,10 @@ +@import "shared"; + // Change the box model for Mozilla, Webkit, IE8 and the future // // @param $bs // [ content-box | border-box ] @mixin box-sizing($bs) { - /* Mozilla (FireFox, Camino) */ - -moz-box-sizing: $bs; - /* Webkit (Safari, Chrome) */ - -webkit-box-sizing: $bs; - /* IE (8) */ - -ms-box-sizing: $bs; - /* CSS3 */ - box-sizing: $bs; } + @include experimental(box-sizing, $bs); +} diff --git a/frameworks/compass/stylesheets/compass/css3/_columns.scss b/frameworks/compass/stylesheets/compass/css3/_columns.scss index ab37dbac..776f7b62 100644 --- a/frameworks/compass/stylesheets/compass/css3/_columns.scss +++ b/frameworks/compass/stylesheets/compass/css3/_columns.scss @@ -1,50 +1,29 @@ -// Specify the # of columns +@import "shared"; -@mixin column-count($n) { - -moz-column-count: $n; - -webkit-column-count: $n; - column-count: $n; } +// Specify the number of columns +@mixin column-count($n) { @include experimental(column-count, $n); } -// Specify the gap between columns e.g. 20px +// Specify the gap between columns e.g. `20px` +@mixin column-gap($u) { @include experimental(column-gap, $u); } -@mixin column-gap($u) { - -moz-column-gap: $u; - -webkit-column-gap: $u; - column-gap: $u; } +// Specify the width of columns e.g. `100px` +@mixin column-width($u) { @include experimental(column-width, $u); } -// Specify the width of columns e.g. 100px +// Specify the width of the rule between columns e.g. `1px` +@mixin column-rule-width($w) { @include experimental(rule-width, $w); } -@mixin column-width($u) { - -moz-column-width: $u; - -webkit-column-width: $u; - column-width: $u; } +// Specify the style of the rule between columns e.g. `dotted`. +// This works like border-style. +@mixin column-rule-style($s) { @include experimental(rule-style, $s); } -// Specify the width of the rule between columns e.g. 1px +// Specify the style of the rule between columns e.g. `dotted`. +// This works like border-color. -@mixin column-rule-width($w) { - -moz-column-rule-width: $w; - -webkit-column-rule-width: $w; - column-rule-width: $w; } - -// Specify the style of the rule between columns e.g. 'dotted'. This works like border-style. - -@mixin column-rule-style($s) { - -moz-column-rule-style: $s; - -webkit-column-rule-style: $s; - column-rule-style: $s; } - -// Specify the style of the rule between columns e.g. 'dotted'. This works like border-color. - -@mixin column-rule-color($c) { - -moz-column-rule-color: $c; - -webkit-column-rule-color: $c; - column-rule-color: $c; } +@mixin column-rule-color($c) { @include experimental(rule-color, $s); } // Mixin encompassing all column rule rules // For example: -// +column-rule('1px', 'solid', '#000') - -@mixin column-rule($w, $s: solid, $c: unquote(" ")) { - @include column-rule-width($w); - @include column-rule-style($s); - @include column-rule-color($c); } +// +column-rule(1px, solid, #c00) +@mixin column-rule($w, $s: solid, $c: black) { + @include experimental(column-rule, $w $s $c); +} diff --git a/frameworks/compass/stylesheets/compass/css3/_font-face.scss b/frameworks/compass/stylesheets/compass/css3/_font-face.scss index 06a947f3..42cb0399 100644 --- a/frameworks/compass/stylesheets/compass/css3/_font-face.scss +++ b/frameworks/compass/stylesheets/compass/css3/_font-face.scss @@ -1,3 +1,5 @@ +@import "shared"; + // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera. // // * $name is required, arbitrary, and what you will use in font stacks. diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss index eff9a365..fc8a9dbf 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss @@ -1,3 +1,5 @@ +@import "shared"; + // This yields a linear gradient spanning from top to bottom // // +linear-gradient(color-stops(white, black)) diff --git a/frameworks/compass/stylesheets/compass/css3/_inline-block.scss b/frameworks/compass/stylesheets/compass/css3/_inline-block.scss index 078c5b3c..f50293ad 100644 --- a/frameworks/compass/stylesheets/compass/css3/_inline-block.scss +++ b/frameworks/compass/stylesheets/compass/css3/_inline-block.scss @@ -1,13 +1,12 @@ +@import "shared"; + // Provides a cross-browser method to implement `display: inline-block;` -// -// This file is a sass file to work around the fact that the -// SCSS parser does not support the #prop hack at this time. -// http://github.com/nex3/haml/issues/issue/119 @mixin inline-block { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; - #display: inline; - #vertical-align: auto; } + *display: inline; + *vertical-align: auto; +} diff --git a/frameworks/compass/stylesheets/compass/css3/_opacity.scss b/frameworks/compass/stylesheets/compass/css3/_opacity.scss index 1e614490..b8eb57fa 100644 --- a/frameworks/compass/stylesheets/compass/css3/_opacity.scss +++ b/frameworks/compass/stylesheets/compass/css3/_opacity.scss @@ -1,19 +1,25 @@ +@import "shared"; + // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity. // // @param $opacity // A number between 0 and 1, where 0 is transparent and 1 is opaque. @mixin opacity($opacity) { - opacity: $opacity; - -moz-opacity: $opacity; - -khtml-opacity: $opacity; - -ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=") + round($opacity * 100) + unquote(")"); - filter: unquote("alpha(opacity=") + round($opacity * 100) + unquote(")"); } + @include experimental(opacity, $opacity, + $experimental-support-for-mozilla, + $experimental-support-for-webkit, + $experimental-support-for-opera, + false, // microsoft uses filters below instead + $experimental-support-for-khtml, + true // official + ); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)}); +} // Make an element completely transparent. -@mixin transparent { - @include opacity(0); } +@mixin transparent { @include opacity(0); } // Make an element completely opaque. -@mixin opaque { - @include opacity(1); } +@mixin opaque { @include opacity(1); } diff --git a/frameworks/compass/stylesheets/compass/css3/_shared.scss b/frameworks/compass/stylesheets/compass/css3/_shared.scss new file mode 100644 index 00000000..a285e4e8 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/css3/_shared.scss @@ -0,0 +1,30 @@ +// Support for mozilla in experimental css3 properties. +$experimental-support-for-mozilla : true !default; +// Support for webkit in experimental css3 properties. +$experimental-support-for-webkit : true !default; +// Support for opera in experimental css3 properties. +$experimental-support-for-opera : false !default; +// Support for microsoft in experimental css3 properties. +$experimental-support-for-microsoft : false !default; +// Support for khtml in experimental css3 properties. +$experimental-support-for-khtml : false !default; + +// This mixin provides basic support for CSS3 properties and +// their corresponding experimental CSS2 properties when +// the implementations are identical except for the property +// prefix. +@mixin experimental($property, $value, + $moz : $experimental-support-for-mozilla, + $webkit : $experimental-support-for-webkit, + $o : $experimental-support-for-opera, + $ms : $experimental-support-for-microsoft, + $khtml : $experimental-support-for-khtml, + $official : true +) { + @if $moz { -moz-#{$property} : $value; } + @if $webkit { -webkit-#{$property} : $value; } + @if $o { -o-#{$property} : $value; } + @if $ms { -ms-#{$property} : $value; } + @if $khtml { -khtml-#{$property} : $value; } + @if $official { #{$property} : $value; } +} \ 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 b4b95a5b..38a7ffaf 100644 --- a/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +++ b/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss @@ -1,3 +1,5 @@ +@import "shared"; + // Provides CSS text shadows. // // Arguments are color, horizontal offset, vertical offset, and blur @@ -14,5 +16,11 @@ $default-text-shadow-v-offset: 1px !default; $default-text-shadow-blur: 1px !default; -@mixin text-shadow($color: $default-text-shadow-color, $hoff: $default-text-shadow-h-offset, $voff: $default-text-shadow-v-offset, $blur: $default-text-shadow-blur) { - text-shadow: $color $hoff $voff $blur; } +@mixin text-shadow( + $color: $default-text-shadow-color, + $hoff: $default-text-shadow-h-offset, + $voff: $default-text-shadow-v-offset, + $blur: $default-text-shadow-blur +) { + text-shadow: $color $hoff $voff $blur; +} diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss index 4635d732..271bdf17 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss @@ -1,18 +1,18 @@ +@import "shared"; + // CSS Transform and Transform-Origin // Apply a transform sent as a complete string. -@mixin apply-transform($transform: false) { - transform: $transform; - -webkit-transform: $transform; - -moz-transform: $transform; } +@mixin apply-transform($transform) { + @include experimental(transform, $transform); +} // Apply a transform-origin sent as a complete string. -@mixin apply-origin($origin: false) { - transform-origin: $origin; - -webkit-transform-origin: $origin; - -moz-transform-origin: $origin; } +@mixin apply-origin($origin) { + @include experimental(transform-origin, $origin); +} // transform-origin requires x and y coordinates // @@ -23,7 +23,10 @@ @if $originy { @include apply-origin($originx or 50% $originy); } @else { - @include apply-origin($originx); } } } + @include apply-origin($originx); + } + } +} // A full transform mixin with everything you could want // @@ -31,10 +34,20 @@ // * 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); } +@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 // @@ -45,20 +58,24 @@ @mixin scale($scale: 1.25, $originx: false, $originy: false) { @include apply-transform(scale($scale)); - @include transform-origin($originx, $originy); } + @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); } + @include transform-origin($originx, $originy); +} // Adjust only the translation @mixin translate($transx: 0, $transy: 0) { - @include apply-transform(translate($transx, $transy)); } + @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); } + @include transform-origin($originx, $originy); +} diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss index e5e5c161..cb9d2b60 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss @@ -1,3 +1,5 @@ +@import "shared"; + // CSS Transitions // Currently only works in Webkit. // @@ -27,10 +29,8 @@ $default-transition-delay: false !default; // * also accepts "all" or "none" @mixin transition-property($properties: $default-transition-property) { - transition-property: $properties; - -webkit-transition-property: $properties; - -moz-transition-property: $properties; - -o-transition-property: $properties; } + @include experimental(transition-property, $properties); +} // One or more durations in seconds // @@ -38,10 +38,8 @@ $default-transition-delay: false !default; // * these durations will affect the properties in the same list position @mixin transition-duration($duration: $default-transition-duration) { - transition-duration: $duration; - -webkit-transition-duration: $duration; - -moz-transition-duration: $duration; - -o-transition-duration: $duration; } + @include experimental(transition-duration, $duration); +} // One or more timing functions // @@ -50,10 +48,8 @@ $default-transition-delay: false !default; // * These functions will effect the properties in the same list position @mixin transition-timing-function($function: $default-transition-function) { - transition-timing-function: $function; - -webkit-transition-timing-function: $function; - -moz-transition-timing-function: $function; - -o-transition-timing-function: $function; } + @include experimental(transition-timing-function, $function); +} // One or more transition-delays in seconds // @@ -61,17 +57,19 @@ $default-transition-delay: false !default; // * these delays will effect the properties in the same list position @mixin transition-delay($delay: $default-transition-delay) { - transition-delay: $delay; - -webkit-transition-delay: $delay; - -moz-transition-delay: $delay; - -o-transition-delay: $delay; } + @include experimental(transition-delay, $delay); +} // Transition all-in-one shorthand -@mixin transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) { +@mixin transition( + $properties: $default-transition-property, + $duration: $default-transition-duration, + $function: $default-transition-function, + $delay: $default-transition-delay +) { @include transition-property($properties); @include transition-duration($duration); - @if $function { - @include transition-timing-function($function); } - @if $delay { - @include transition-delay($delay); } } + @if $function { @include transition-timing-function($function); } + @if $delay { @include transition-delay($delay); } +}