saffron 0.2.2 → 0.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. checksums.yaml +7 -0
  2. data/Gemfile.lock +1 -1
  3. data/README.md +16 -9
  4. data/app/assets/stylesheets/entrances/_drop-in.scss +5 -5
  5. data/app/assets/stylesheets/entrances/_fade-in-down.scss +3 -3
  6. data/app/assets/stylesheets/entrances/_fade-in-left.scss +3 -3
  7. data/app/assets/stylesheets/entrances/_fade-in-right.scss +3 -3
  8. data/app/assets/stylesheets/entrances/_fade-in-up.scss +3 -3
  9. data/app/assets/stylesheets/entrances/_fade-in-zoom-big.scss +6 -6
  10. data/app/assets/stylesheets/entrances/_fade-in-zoom.scss +4 -4
  11. data/app/assets/stylesheets/entrances/_fade-in.scss +3 -3
  12. data/app/assets/stylesheets/entrances/_newspaper.scss +4 -4
  13. data/app/assets/stylesheets/entrances/_pop-in.scss +4 -4
  14. data/app/assets/stylesheets/entrances/_rise-in.scss +3 -3
  15. data/app/assets/stylesheets/entrances/_slide-in.scss +10 -10
  16. data/app/assets/stylesheets/entrances/_stretch.scss +12 -12
  17. data/app/assets/stylesheets/entrances/_turn-in.scss +10 -10
  18. data/app/assets/stylesheets/exits/_compress.scss +9 -9
  19. data/app/assets/stylesheets/exits/_drop-out.scss +4 -4
  20. data/app/assets/stylesheets/exits/_explode.scss +4 -4
  21. data/app/assets/stylesheets/exits/_fade-out-down.scss +4 -4
  22. data/app/assets/stylesheets/exits/_fade-out-left.scss +3 -3
  23. data/app/assets/stylesheets/exits/_fade-out-right.scss +3 -3
  24. data/app/assets/stylesheets/exits/_fade-out-up.scss +4 -4
  25. data/app/assets/stylesheets/exits/_fade-out-zoom-big.scss +5 -5
  26. data/app/assets/stylesheets/exits/_fade-out-zoom.scss +4 -4
  27. data/app/assets/stylesheets/exits/_fade-out.scss +3 -3
  28. data/app/assets/stylesheets/exits/_poof.scss +4 -4
  29. data/app/assets/stylesheets/exits/_rise-out.scss +4 -4
  30. data/app/assets/stylesheets/exits/_slide-out.scss +8 -8
  31. data/app/assets/stylesheets/exits/_turn-out.scss +10 -10
  32. data/app/assets/stylesheets/helpers/_animation.scss +2 -2
  33. data/app/assets/stylesheets/helpers/_contains.scss +1 -1
  34. data/app/assets/stylesheets/helpers/_keyframes.scss +5 -5
  35. data/app/assets/stylesheets/helpers/_prefix.scss +3 -3
  36. data/app/assets/stylesheets/helpers/_transform.scss +6 -6
  37. data/app/assets/stylesheets/helpers/_transition.scss +4 -4
  38. data/app/assets/stylesheets/in-place/_around-the-world.scss +4 -4
  39. data/app/assets/stylesheets/in-place/_bounce.scss +8 -8
  40. data/app/assets/stylesheets/in-place/_colors.scss +3 -3
  41. data/app/assets/stylesheets/in-place/_contract.scss +2 -2
  42. data/app/assets/stylesheets/in-place/_cube-flip.scss +16 -16
  43. data/app/assets/stylesheets/in-place/_enlarge.scss +2 -2
  44. data/app/assets/stylesheets/in-place/_expand.scss +1 -1
  45. data/app/assets/stylesheets/in-place/_flip.scss +6 -6
  46. data/app/assets/stylesheets/in-place/_float.scss +5 -5
  47. data/app/assets/stylesheets/in-place/_ping.scss +5 -5
  48. data/app/assets/stylesheets/in-place/_pulsate.scss +4 -4
  49. data/app/assets/stylesheets/in-place/_quiver.scss +13 -13
  50. data/app/assets/stylesheets/in-place/_shake.scss +8 -8
  51. data/app/assets/stylesheets/in-place/_spin.scss +4 -4
  52. data/app/assets/stylesheets/in-place/_square-dance.scss +6 -6
  53. data/app/assets/stylesheets/in-place/_sunrise.scss +4 -4
  54. data/app/assets/stylesheets/in-place/_sway.scss +5 -5
  55. data/app/assets/stylesheets/in-place/_teeter.scss +9 -9
  56. data/bower.json +1 -1
  57. data/lib/saffron/version.rb +1 -1
  58. data/saffron/entrances/_drop-in.scss +5 -5
  59. data/saffron/entrances/_fade-in-down.scss +3 -3
  60. data/saffron/entrances/_fade-in-left.scss +3 -3
  61. data/saffron/entrances/_fade-in-right.scss +3 -3
  62. data/saffron/entrances/_fade-in-up.scss +3 -3
  63. data/saffron/entrances/_fade-in-zoom-big.scss +6 -6
  64. data/saffron/entrances/_fade-in-zoom.scss +4 -4
  65. data/saffron/entrances/_fade-in.scss +3 -3
  66. data/saffron/entrances/_newspaper.scss +4 -4
  67. data/saffron/entrances/_pop-in.scss +4 -4
  68. data/saffron/entrances/_rise-in.scss +3 -3
  69. data/saffron/entrances/_slide-in.scss +10 -10
  70. data/saffron/entrances/_stretch.scss +12 -12
  71. data/saffron/entrances/_turn-in.scss +10 -10
  72. data/saffron/exits/_compress.scss +9 -9
  73. data/saffron/exits/_drop-out.scss +4 -4
  74. data/saffron/exits/_explode.scss +4 -4
  75. data/saffron/exits/_fade-out-down.scss +4 -4
  76. data/saffron/exits/_fade-out-left.scss +3 -3
  77. data/saffron/exits/_fade-out-right.scss +3 -3
  78. data/saffron/exits/_fade-out-up.scss +4 -4
  79. data/saffron/exits/_fade-out-zoom-big.scss +5 -5
  80. data/saffron/exits/_fade-out-zoom.scss +4 -4
  81. data/saffron/exits/_fade-out.scss +3 -3
  82. data/saffron/exits/_poof.scss +4 -4
  83. data/saffron/exits/_rise-out.scss +4 -4
  84. data/saffron/exits/_slide-out.scss +8 -8
  85. data/saffron/exits/_turn-out.scss +10 -10
  86. data/saffron/helpers/_animation.scss +2 -2
  87. data/saffron/helpers/_contains.scss +1 -1
  88. data/saffron/helpers/_keyframes.scss +5 -5
  89. data/saffron/helpers/_prefix.scss +3 -3
  90. data/saffron/helpers/_transform.scss +6 -6
  91. data/saffron/helpers/_transition.scss +4 -4
  92. data/saffron/in-place/_around-the-world.scss +4 -4
  93. data/saffron/in-place/_bounce.scss +8 -8
  94. data/saffron/in-place/_colors.scss +3 -3
  95. data/saffron/in-place/_contract.scss +2 -2
  96. data/saffron/in-place/_cube-flip.scss +16 -16
  97. data/saffron/in-place/_enlarge.scss +2 -2
  98. data/saffron/in-place/_expand.scss +1 -1
  99. data/saffron/in-place/_flip.scss +6 -6
  100. data/saffron/in-place/_float.scss +5 -5
  101. data/saffron/in-place/_ping.scss +5 -5
  102. data/saffron/in-place/_pulsate.scss +4 -4
  103. data/saffron/in-place/_quiver.scss +13 -13
  104. data/saffron/in-place/_shake.scss +8 -8
  105. data/saffron/in-place/_spin.scss +4 -4
  106. data/saffron/in-place/_square-dance.scss +6 -6
  107. data/saffron/in-place/_sunrise.scss +4 -4
  108. data/saffron/in-place/_sway.scss +5 -5
  109. data/saffron/in-place/_teeter.scss +9 -9
  110. data/tasks/package.json +2 -2
  111. metadata +22 -44
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: d6e5dc9afacde7ea2f70e05ba3370c8f99172d9d
4
+ data.tar.gz: a1b2a17e50baae10154e9feee64e556051a4c45b
5
+ SHA512:
6
+ metadata.gz: 94e237617765e83a5ce7a2151cc16a43101e017524b14bc8515d84f209936c390435a6f2395ea4c9e6c08900ee7a9465e8422620cf16c00605b64b73cffc6962
7
+ data.tar.gz: 7e7629dc439799af8c31671b301c74a596732f04e6d9f2d8af2edce8799472d90c82394f936d4600ac008cefe1e675245f421adcc567927202a078d8a2bd2dea
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- saffron (0.2.2)
4
+ saffron (0.2.3)
5
5
  sass (~> 3.2)
6
6
  thor
7
7
 
data/README.md CHANGED
@@ -1,11 +1,11 @@
1
1
  #Saffron
2
- [![Build Status](https://travis-ci.org/corporadobob/saffron.svg?branch=master)](https://travis-ci.org/corporadobob/saffron)
2
+ [![Build Status](https://travis-ci.org/colindresj/saffron.svg?branch=v0.2.2)](https://travis-ci.org/colindresj/saffron)
3
3
  [![Gem Version](https://badge.fury.io/rb/saffron.svg)](http://badge.fury.io/rb/saffron)
4
4
 
5
- > A simple sass mixin library for animations and transitions.
5
+ > A simple Sass mixin library for animations and transitions.
6
6
 
7
- Saffron is a collection of sass mixins and helpers that make adding CSS3 animations and transitions much simpler.
8
- Just include a mixin in your sass declaration, then set any configuration using variables and mixin parameters.
7
+ Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler.
8
+ Just include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters.
9
9
 
10
10
  ###Requirements
11
11
  Sass 3.2+
@@ -13,14 +13,14 @@ Sass 3.2+
13
13
  ##Installing
14
14
  ###Standard Installation
15
15
  Install the gem from the command line with `gem install saffron`, then `cd` into the directory where you want to install Saffron and run the installation command:
16
- ```
16
+ ```bash
17
17
  saffron install
18
18
  ```
19
19
  You can also use the `-p` flag to install Saffron into a relative directory:
20
- ```
20
+ ```bash
21
21
  saffron install -p path/to/directory/
22
22
  ```
23
- Finally, import the mixins into your main scss file:
23
+ Finally, import the mixins into your main SCSS file:
24
24
  ```scss
25
25
  @import "saffron/saffron";
26
26
  ```
@@ -35,6 +35,10 @@ Run `bundle install` to make all the mixins available to your Rails application,
35
35
  @import "saffron";
36
36
  ```
37
37
 
38
+ ###Bower
39
+ Saffron is available on [Bower](http://bower.io/). Run `bower install saffron` to get the latest tagged version of Saffron
40
+ from Bower. Unless you've changed the default directory, Saffron will be installed into your `bower_componenents` directory within the `saffron` subdirectory.
41
+
38
42
  ###Manual Installation
39
43
  Download or clone the project repo from GitHub. Copy the `saffron` folder and paste into your `sass` folder (or whatever you call it). You won't need any of the other directories or files.
40
44
  ```scss
@@ -49,11 +53,11 @@ No matter how you installed Saffron, you can now use any of the mixins:
49
53
 
50
54
  ##Updating
51
55
  To get the latest mixins you should update the Saffron files every once in a while. You can do so by running:
52
- ```
56
+ ```bash
53
57
  saffron update
54
58
  ```
55
59
  If you initially installed Saffron in a specific directory using the `-p` flag, you'll need to do the the same when updating:
56
- ```
60
+ ```bash
57
61
  saffron update -p path/to/directory/
58
62
  ```
59
63
 
@@ -62,5 +66,8 @@ Saffron uses CSS3 transform, keyframes, animations and transitions, so it's real
62
66
 
63
67
  All the mixins compile down to vendor prefixed CSS, and have been tested on the latest versions of Chrome, Safari, Firefox and Opera. I aim to do more browser testing and hope to increase compatability, especially for IE.
64
68
 
69
+ ##Stylus
70
+ If you're more of a Stylus user, check out [@willhoag](https://github.com/willhoag)'s port: [Saffron-Stylus](https://github.com/willhoag/saffron-stylus).
71
+
65
72
  ##License
66
73
  MIT
@@ -1,19 +1,19 @@
1
- @include keyframes(dropIn) {
1
+ @include u-keyframes(dropIn) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0));
4
+ @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0));
5
5
  }
6
6
  10% {
7
- @include transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg));
7
+ @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg));
8
8
  }
9
9
  90% {
10
10
  opacity: 1;
11
11
  }
12
12
  100% {
13
- @include transform(translateY(0) rotate(0));
13
+ @include u-transform(translateY(0) rotate(0));
14
14
  }
15
15
  }
16
16
 
17
17
  @mixin dropIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
18
- @include animation(dropIn $duration $delay $fill-mode);
18
+ @include u-animation(dropIn $duration $delay $fill-mode);
19
19
  }
@@ -1,7 +1,7 @@
1
- @include keyframes(fadeInDown) {
1
+ @include u-keyframes(fadeInDown) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateY($saf-translateY-distance * -1) translateZ(0));
4
+ @include u-transform(translateY($saf-translateY-distance * -1) translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
@@ -9,5 +9,5 @@
9
9
  }
10
10
 
11
11
  @mixin fadeInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
12
- @include animation(fadeInDown $duration $delay $fill-mode);
12
+ @include u-animation(fadeInDown $duration $delay $fill-mode);
13
13
  }
@@ -1,7 +1,7 @@
1
- @include keyframes(fadeInLeft) {
1
+ @include u-keyframes(fadeInLeft) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateX($saf-translateX-distance * -1) translateZ(0));
4
+ @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
@@ -9,5 +9,5 @@
9
9
  }
10
10
 
11
11
  @mixin fadeInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) {
12
- @include animation(fadeInLeft $duration $delay $fill-mode);
12
+ @include u-animation(fadeInLeft $duration $delay $fill-mode);
13
13
  }
@@ -1,7 +1,7 @@
1
- @include keyframes(fadeInRight) {
1
+ @include u-keyframes(fadeInRight) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateX($saf-translateX-distance) translateZ(0));
4
+ @include u-transform(translateX($saf-translateX-distance) translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
@@ -9,5 +9,5 @@
9
9
  }
10
10
 
11
11
  @mixin fadeInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) {
12
- @include animation(fadeInRight $duration $delay $fill-mode);
12
+ @include u-animation(fadeInRight $duration $delay $fill-mode);
13
13
  }
@@ -1,7 +1,7 @@
1
- @include keyframes(fadeInUp) {
1
+ @include u-keyframes(fadeInUp) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateY($saf-translateY-distance) translateZ(0));
4
+ @include u-transform(translateY($saf-translateY-distance) translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
@@ -9,5 +9,5 @@
9
9
  }
10
10
 
11
11
  @mixin fadeInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
12
- @include animation(fadeInUp $duration $delay $fill-mode);
12
+ @include u-animation(fadeInUp $duration $delay $fill-mode);
13
13
  }
@@ -1,20 +1,20 @@
1
- @include keyframes(fadeInZoomBig) {
1
+ @include u-keyframes(fadeInZoomBig) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(scale(0));
4
+ @include u-transform(scale(0));
5
5
  }
6
6
  60% {
7
- @include transform(scale(1.25));
7
+ @include u-transform(scale(1.25));
8
8
  }
9
9
  80% {
10
- @include transform(scale(0.95));
10
+ @include u-transform(scale(0.95));
11
11
  }
12
12
  100% {
13
13
  opacity: 1;
14
- @include transform(scale(1));
14
+ @include u-transform(scale(1));
15
15
  }
16
16
  }
17
17
 
18
18
  @mixin fadeInZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) {
19
- @include animation(fadeInZoomBig $duration $delay $fill-mode);
19
+ @include u-animation(fadeInZoomBig $duration $delay $fill-mode);
20
20
  }
@@ -1,14 +1,14 @@
1
- @include keyframes(fadeInZoom) {
1
+ @include u-keyframes(fadeInZoom) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(scale(0) translateZ(0));
4
+ @include u-transform(scale(0) translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
8
- @include transform(scale(1));
8
+ @include u-transform(scale(1));
9
9
  }
10
10
  }
11
11
 
12
12
  @mixin fadeInZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) {
13
- @include animation(fadeInZoom $duration $delay $fill-mode);
13
+ @include u-animation(fadeInZoom $duration $delay $fill-mode);
14
14
  }
@@ -1,7 +1,7 @@
1
- @include keyframes(fadeIn) {
1
+ @include u-keyframes(fadeIn) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateZ(0));
4
+ @include u-transform(translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
@@ -9,5 +9,5 @@
9
9
  }
10
10
 
11
11
  @mixin fadeIn($duration: 1s, $delay: 0s, $fill-mode: forwards) {
12
- @include animation(fadeIn $duration $delay $fill-mode);
12
+ @include u-animation(fadeIn $duration $delay $fill-mode);
13
13
  }
@@ -1,14 +1,14 @@
1
- @include keyframes(newspaper) {
1
+ @include u-keyframes(newspaper) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(rotate(720deg) scale(0.33) translateZ(0));
4
+ @include u-transform(rotate(720deg) scale(0.33) translateZ(0));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
8
- @include transform(rotate(0deg) scale(1));
8
+ @include u-transform(rotate(0deg) scale(1));
9
9
  }
10
10
  }
11
11
 
12
12
  @mixin newspaper($duration: 1s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in-out) {
13
- @include animation(newspaper $count $duration $delay $fill-mode $timing);
13
+ @include u-animation(newspaper $count $duration $delay $fill-mode $timing);
14
14
  }
@@ -1,14 +1,14 @@
1
- @include keyframes(popIn) {
1
+ @include u-keyframes(popIn) {
2
2
  0% {
3
- @include transform(scale(0.25) translateZ(0));
3
+ @include u-transform(scale(0.25) translateZ(0));
4
4
  opacity: 0;
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
8
- @include transform(scale(1));
8
+ @include u-transform(scale(1));
9
9
  }
10
10
  }
11
11
 
12
12
  @mixin popIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
13
- @include animation(popIn $duration $delay $fill-mode);
13
+ @include u-animation(popIn $duration $delay $fill-mode);
14
14
  }
@@ -1,7 +1,7 @@
1
- @include keyframes(riseIn) {
1
+ @include u-keyframes(riseIn) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateY($saf-drop-rise-distance) translateZ(0));
4
+ @include u-transform(translateY($saf-drop-rise-distance) translateZ(0));
5
5
  }
6
6
  50% {
7
7
  opacity: 1
@@ -9,5 +9,5 @@
9
9
  }
10
10
 
11
11
  @mixin riseIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
12
- @include animation(riseIn $duration $delay $fill-mode);
12
+ @include u-animation(riseIn $duration $delay $fill-mode);
13
13
  }
@@ -1,35 +1,35 @@
1
- @include keyframes(slideInLeft) {
1
+ @include u-keyframes(slideInLeft) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(translateX($saf-translateX-distance * -10) translateZ(0));
4
+ @include u-transform(translateX($saf-translateX-distance * -10) translateZ(0));
5
5
  }
6
6
  65% {
7
7
  opacity: 1;
8
- @include transform(translateX($saf-translateX-distance));
8
+ @include u-transform(translateX($saf-translateX-distance));
9
9
  }
10
10
  100% {
11
- @include transform(translateX(0));
11
+ @include u-transform(translateX(0));
12
12
  }
13
13
  }
14
14
 
15
15
  @mixin slideInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) {
16
- @include animation(slideInLeft $duration $delay $fill-mode);
16
+ @include u-animation(slideInLeft $duration $delay $fill-mode);
17
17
  }
18
18
 
19
- @include keyframes(slideInRight) {
19
+ @include u-keyframes(slideInRight) {
20
20
  0% {
21
21
  opacity: 0;
22
- @include transform(translateX($saf-translateX-distance * 10) translateZ(0));
22
+ @include u-transform(translateX($saf-translateX-distance * 10) translateZ(0));
23
23
  }
24
24
  65% {
25
25
  opacity: 1;
26
- @include transform(translateX($saf-translateX-distance * -1));
26
+ @include u-transform(translateX($saf-translateX-distance * -1));
27
27
  }
28
28
  100% {
29
- @include transform(translateX(0));
29
+ @include u-transform(translateX(0));
30
30
  }
31
31
  }
32
32
 
33
33
  @mixin slideInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) {
34
- @include animation(slideInRight $duration $delay $fill-mode);
34
+ @include u-animation(slideInRight $duration $delay $fill-mode);
35
35
  }
@@ -1,33 +1,33 @@
1
- @include keyframes(stretch) {
1
+ @include u-keyframes(stretch) {
2
2
  0% {
3
- @include transform(scaleY(0));
3
+ @include u-transform(scaleY(0));
4
4
  }
5
5
  40% {
6
- @include transform(scaleY($saf-stretch-compress-exageration));
6
+ @include u-transform(scaleY($saf-stretch-compress-exageration));
7
7
  }
8
8
  60% {
9
- @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
9
+ @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
10
10
  }
11
11
  80% {
12
- @include transform(scaleY($saf-stretch-compress-exageration));
12
+ @include u-transform(scaleY($saf-stretch-compress-exageration));
13
13
  }
14
14
  100% {
15
- @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
15
+ @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
16
16
  }
17
17
  80% {
18
- @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025)));
18
+ @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025)));
19
19
  }
20
20
  100% {
21
- @include transform(scaleY(1));
21
+ @include u-transform(scaleY(1));
22
22
  }
23
23
  }
24
24
 
25
25
  @mixin stretchUp($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
26
- @include animation(stretch $count $duration $delay $fill-mode $timing);
27
- @include prefix(transform-origin, 0 100%, webkit moz spec);
26
+ @include u-animation(stretch $count $duration $delay $fill-mode $timing);
27
+ @include u-prefix(u-transform-origin, 0 100%, webkit moz spec);
28
28
  }
29
29
 
30
30
  @mixin stretchDown($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
31
- @include animation(stretch $count $duration $delay $fill-mode $timing);
32
- @include prefix(transform-origin, 0 0, webkit moz spec);
31
+ @include u-animation(stretch $count $duration $delay $fill-mode $timing);
32
+ @include u-prefix(u-transform-origin, 0 0, webkit moz spec);
33
33
  }
@@ -1,31 +1,31 @@
1
- @include keyframes(turnInDown) {
1
+ @include u-keyframes(turnInDown) {
2
2
  0% {
3
3
  opacity: 0;
4
- @include transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px));
4
+ @include u-transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px));
5
5
  }
6
6
  100% {
7
7
  opacity: 1;
8
- @include transform(perspective(800px) rotateX(0deg) translateZ(0));
9
- @include prefix(backface-visibility, hidden, webkit moz spec);
8
+ @include u-transform(perspective(800px) rotateX(0deg) translateZ(0));
9
+ @include u-prefix(backface-visibility, hidden, webkit moz spec);
10
10
  }
11
11
  }
12
12
 
13
13
  @mixin turnInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
14
- @include animation(turnInDown $duration $delay $fill-mode);
14
+ @include u-animation(turnInDown $duration $delay $fill-mode);
15
15
  }
16
16
 
17
- @include keyframes(turnInUp) {
17
+ @include u-keyframes(turnInUp) {
18
18
  0% {
19
19
  opacity: 0;
20
- @include transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px));
20
+ @include u-transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px));
21
21
  }
22
22
  100% {
23
23
  opacity: 1;
24
- @include transform(perspective(800px) rotateX(0deg) translateZ(0));
25
- @include prefix(backface-visibility, hidden, webkit moz spec);
24
+ @include u-transform(perspective(800px) rotateX(0deg) translateZ(0));
25
+ @include u-prefix(backface-visibility, hidden, webkit moz spec);
26
26
  }
27
27
  }
28
28
 
29
29
  @mixin turnInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
30
- @include animation(turnInUp $duration $delay $fill-mode);
30
+ @include u-animation(turnInUp $duration $delay $fill-mode);
31
31
  }
@@ -1,25 +1,25 @@
1
- @include keyframes(compress) {
1
+ @include u-keyframes(compress) {
2
2
  0% {
3
- @include transform(scaleY(1) translateZ(0));
3
+ @include u-transform(scaleY(1) translateZ(0));
4
4
  }
5
5
  30% {
6
- @include transform(scaleY($saf-stretch-compress-exageration));
6
+ @include u-transform(scaleY($saf-stretch-compress-exageration));
7
7
  }
8
8
  50% {
9
- @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
9
+ @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
10
10
  }
11
11
  100% {
12
- @include transform(scaleY(0));
12
+ @include u-transform(scaleY(0));
13
13
  }
14
14
  }
15
15
 
16
16
  @mixin compressUp($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
17
- @include animation(compress $count $duration $delay $fill-mode $timing);
18
- @include prefix(transform-origin, 0 0, webkit moz spec);
17
+ @include u-animation(compress $count $duration $delay $fill-mode $timing);
18
+ @include prefix(u-transform-origin, 0 0, webkit moz spec);
19
19
  }
20
20
 
21
21
  @mixin compressDown($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
22
- @include animation(compress $count $duration $delay $fill-mode $timing);
23
- @include prefix(transform-origin, 0 100%, webkit moz spec);
22
+ @include u-animation(compress $count $duration $delay $fill-mode $timing);
23
+ @include prefix(u-transform-origin, 0 100%, webkit moz spec);
24
24
  }
25
25