Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #86 from laurens/master

Vendor-prefixed *transition-property* names
  • Loading branch information...
commit c9cdd5329625e84c5c8e8675d35aa0e586864cf7 2 parents 9ff2e48 + 5fe67e7
Phil LaPier authored
View
1  app/assets/stylesheets/_bourbon.scss
@@ -7,6 +7,7 @@
@import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade";
+@import "functions/transition_propery_name";
// CSS3 Mixins
@import "css3/animation";
View
10 app/assets/stylesheets/css3/_transition.scss
@@ -30,11 +30,11 @@
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
- -webkit-transition-property: $full;
- -moz-transition-property: $full;
- -ms-transition-property: $full;
- -o-transition-property: $full;
- transition-property: $full;
+ -webkit-transition-property: transition-property-names($full, 'webkit');
+ -moz-transition-property: transition-property-names($full, 'moz');
+ -ms-transition-property: transition-property-names($full, 'ms');
+ -o-transition-property: transition-property-names($full, 'o');
+ transition-property: transition-property-names($full, false);
}
@mixin transition-duration ($time-1: 0,
View
22 app/assets/stylesheets/functions/_transition_propery_name.scss
@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+ $new-props: ();
+
+ @each $prop in $props {
+ $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+ }
+
+ @return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+ // put other properties that need to be prefixed here aswell
+ @if $vendor and $prop == transform {
+ @return unquote('-'+$vendor+'-'+$prop);
+ }
+ @else {
+ @return $prop;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.