saffron 0.2.2 → 0.2.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d6e5dc9afacde7ea2f70e05ba3370c8f99172d9d
+  data.tar.gz: a1b2a17e50baae10154e9feee64e556051a4c45b
+SHA512:
+  metadata.gz: 94e237617765e83a5ce7a2151cc16a43101e017524b14bc8515d84f209936c390435a6f2395ea4c9e6c08900ee7a9465e8422620cf16c00605b64b73cffc6962
+  data.tar.gz: 7e7629dc439799af8c31671b301c74a596732f04e6d9f2d8af2edce8799472d90c82394f936d4600ac008cefe1e675245f421adcc567927202a078d8a2bd2dea

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    saffron (0.2.2)
+    saffron (0.2.3)
       sass (~> 3.2)
       thor
 

data/README.md

@@ -1,11 +1,11 @@
 #Saffron
-[![Build Status](https://travis-ci.org/corporadobob/saffron.svg?branch=master)](https://travis-ci.org/corporadobob/saffron)
+[![Build Status](https://travis-ci.org/colindresj/saffron.svg?branch=v0.2.2)](https://travis-ci.org/colindresj/saffron)
 [![Gem Version](https://badge.fury.io/rb/saffron.svg)](http://badge.fury.io/rb/saffron)
 
-> A simple sass mixin library for animations and transitions.
+> A simple Sass mixin library for animations and transitions.
 
-Saffron is a collection of sass mixins and helpers that make adding CSS3 animations and transitions much simpler.
-Just include a mixin in your sass declaration, then set any configuration using variables and mixin parameters.
+Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler.
+Just include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters.
 
 ###Requirements
 Sass 3.2+
@@ -13,14 +13,14 @@ Sass 3.2+
 ##Installing
 ###Standard Installation
 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:
-```
+```bash
 saffron install
 ```
 You can also use the `-p` flag to install Saffron into a relative directory:
-```
+```bash
 saffron install -p path/to/directory/
 ```
-Finally, import the mixins into your main scss file:
+Finally, import the mixins into your main SCSS file:
 ```scss
   @import "saffron/saffron";
 ```
@@ -35,6 +35,10 @@ Run `bundle install` to make all the mixins available to your Rails application,
 @import "saffron";
 ```
 
+###Bower
+Saffron is available on [Bower](http://bower.io/). Run `bower install saffron` to get the latest tagged version of Saffron
+from Bower. Unless you've changed the default directory, Saffron will be installed into your `bower_componenents` directory within the `saffron` subdirectory.
+
 ###Manual Installation
 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.
 ```scss
@@ -49,11 +53,11 @@ No matter how you installed Saffron, you can now use any of the mixins:
 
 ##Updating
 To get the latest mixins you should update the Saffron files every once in a while. You can do so by running:
-```
+```bash
 saffron update
 ```
 If you initially installed Saffron in a specific directory using the `-p` flag, you'll need to do the the same when updating:
-```
+```bash
 saffron update -p path/to/directory/
 ```
 
@@ -62,5 +66,8 @@ Saffron uses CSS3 transform, keyframes, animations and transitions, so it's real
 
 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.
 
+##Stylus
+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).
+
 ##License
 MIT

data/app/assets/stylesheets/entrances/_drop-in.scss

@@ -1,19 +1,19 @@
-@include keyframes(dropIn) {
+@include u-keyframes(dropIn) {
   0% {
     opacity: 0;
-    @include transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0));
+    @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0));
   }
   10% {
-    @include transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg));
+    @include u-transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg));
   }
   90% {
     opacity: 1;
   }
   100% {
-    @include transform(translateY(0) rotate(0));
+    @include u-transform(translateY(0) rotate(0));
   }
 }
 
 @mixin dropIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(dropIn $duration $delay $fill-mode);
+  @include u-animation(dropIn $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in-down.scss

@@ -1,7 +1,7 @@
-@include keyframes(fadeInDown) {
+@include u-keyframes(fadeInDown) {
   0% {
     opacity: 0;
-    @include transform(translateY($saf-translateY-distance * -1) translateZ(0));
+    @include u-transform(translateY($saf-translateY-distance * -1) translateZ(0));
   }
   100% {
     opacity: 1;
@@ -9,5 +9,5 @@
 }
 
 @mixin fadeInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeInDown $duration $delay $fill-mode);
+  @include u-animation(fadeInDown $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in-left.scss

@@ -1,7 +1,7 @@
-@include keyframes(fadeInLeft) {
+@include u-keyframes(fadeInLeft) {
   0% {
     opacity: 0;
-    @include transform(translateX($saf-translateX-distance * -1) translateZ(0));
+    @include u-transform(translateX($saf-translateX-distance * -1) translateZ(0));
   }
   100% {
     opacity: 1;
@@ -9,5 +9,5 @@
 }
 
 @mixin fadeInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeInLeft $duration $delay $fill-mode);
+  @include u-animation(fadeInLeft $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in-right.scss

@@ -1,7 +1,7 @@
-@include keyframes(fadeInRight) {
+@include u-keyframes(fadeInRight) {
   0% {
     opacity: 0;
-    @include transform(translateX($saf-translateX-distance) translateZ(0));
+    @include u-transform(translateX($saf-translateX-distance) translateZ(0));
   }
   100% {
     opacity: 1;
@@ -9,5 +9,5 @@
 }
 
 @mixin fadeInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeInRight $duration $delay $fill-mode);
+  @include u-animation(fadeInRight $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in-up.scss

@@ -1,7 +1,7 @@
-@include keyframes(fadeInUp) {
+@include u-keyframes(fadeInUp) {
   0% {
     opacity: 0;
-    @include transform(translateY($saf-translateY-distance) translateZ(0));
+    @include u-transform(translateY($saf-translateY-distance) translateZ(0));
   }
   100% {
     opacity: 1;
@@ -9,5 +9,5 @@
 }
 
 @mixin fadeInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeInUp $duration $delay $fill-mode);
+  @include u-animation(fadeInUp $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in-zoom-big.scss

@@ -1,20 +1,20 @@
-@include keyframes(fadeInZoomBig) {
+@include u-keyframes(fadeInZoomBig) {
   0% {
     opacity: 0;
-    @include transform(scale(0));
+    @include u-transform(scale(0));
   }
   60% {
-    @include transform(scale(1.25));
+    @include u-transform(scale(1.25));
   }
   80% {
-    @include transform(scale(0.95));
+    @include u-transform(scale(0.95));
   }
   100% {
     opacity: 1;
-    @include transform(scale(1));
+    @include u-transform(scale(1));
   }
 }
 
 @mixin fadeInZoomBig($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeInZoomBig $duration $delay $fill-mode);
+  @include u-animation(fadeInZoomBig $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in-zoom.scss

@@ -1,14 +1,14 @@
-@include keyframes(fadeInZoom) {
+@include u-keyframes(fadeInZoom) {
   0% {
     opacity: 0;
-    @include transform(scale(0) translateZ(0));
+    @include u-transform(scale(0) translateZ(0));
   }
   100% {
     opacity: 1;
-    @include transform(scale(1));
+    @include u-transform(scale(1));
   }
 }
 
 @mixin fadeInZoom($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeInZoom $duration $delay $fill-mode);
+  @include u-animation(fadeInZoom $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_fade-in.scss

@@ -1,7 +1,7 @@
-@include keyframes(fadeIn) {
+@include u-keyframes(fadeIn) {
   0% {
     opacity: 0;
-    @include transform(translateZ(0));
+    @include u-transform(translateZ(0));
   }
   100% {
     opacity: 1;
@@ -9,5 +9,5 @@
 }
 
 @mixin fadeIn($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(fadeIn $duration $delay $fill-mode);
+  @include u-animation(fadeIn $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_newspaper.scss

@@ -1,14 +1,14 @@
-@include keyframes(newspaper) {
+@include u-keyframes(newspaper) {
   0% {
     opacity: 0;
-    @include transform(rotate(720deg) scale(0.33) translateZ(0));
+    @include u-transform(rotate(720deg) scale(0.33) translateZ(0));
   }
   100% {
     opacity: 1;
-    @include transform(rotate(0deg) scale(1));
+    @include u-transform(rotate(0deg) scale(1));
   }
 }
 
 @mixin newspaper($duration: 1s, $delay: 0s, $fill-mode: both, $count: 1, $timing: ease-in-out) {
-  @include animation(newspaper $count $duration $delay $fill-mode $timing);
+  @include u-animation(newspaper $count $duration $delay $fill-mode $timing);
 }

data/app/assets/stylesheets/entrances/_pop-in.scss

@@ -1,14 +1,14 @@
-@include keyframes(popIn) {
+@include u-keyframes(popIn) {
   0% {
-    @include transform(scale(0.25) translateZ(0));
+    @include u-transform(scale(0.25) translateZ(0));
     opacity: 0;
   }
   100% {
     opacity: 1;
-    @include transform(scale(1));
+    @include u-transform(scale(1));
   }
 }
 
 @mixin popIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(popIn $duration $delay $fill-mode);
+  @include u-animation(popIn $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_rise-in.scss

@@ -1,7 +1,7 @@
-@include keyframes(riseIn) {
+@include u-keyframes(riseIn) {
   0% {
     opacity: 0;
-    @include transform(translateY($saf-drop-rise-distance) translateZ(0));
+    @include u-transform(translateY($saf-drop-rise-distance) translateZ(0));
   }
   50% {
     opacity: 1
@@ -9,5 +9,5 @@
 }
 
 @mixin riseIn($duration: 0.5s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(riseIn $duration $delay $fill-mode);
+  @include u-animation(riseIn $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_slide-in.scss

@@ -1,35 +1,35 @@
-@include keyframes(slideInLeft) {
+@include u-keyframes(slideInLeft) {
   0% {
     opacity: 0;
-    @include transform(translateX($saf-translateX-distance * -10) translateZ(0));
+    @include u-transform(translateX($saf-translateX-distance * -10) translateZ(0));
   }
   65% {
     opacity: 1;
-    @include transform(translateX($saf-translateX-distance));
+    @include u-transform(translateX($saf-translateX-distance));
   }
   100% {
-    @include transform(translateX(0));
+    @include u-transform(translateX(0));
   }
 }
 
 @mixin slideInLeft($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(slideInLeft $duration $delay $fill-mode);
+  @include u-animation(slideInLeft $duration $delay $fill-mode);
 }
 
-@include keyframes(slideInRight) {
+@include u-keyframes(slideInRight) {
   0% {
     opacity: 0;
-    @include transform(translateX($saf-translateX-distance * 10) translateZ(0));
+    @include u-transform(translateX($saf-translateX-distance * 10) translateZ(0));
   }
   65% {
     opacity: 1;
-    @include transform(translateX($saf-translateX-distance * -1));
+    @include u-transform(translateX($saf-translateX-distance * -1));
   }
   100% {
-    @include transform(translateX(0));
+    @include u-transform(translateX(0));
   }
 }
 
 @mixin slideInRight($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(slideInRight $duration $delay $fill-mode);
+  @include u-animation(slideInRight $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/entrances/_stretch.scss

@@ -1,33 +1,33 @@
-@include keyframes(stretch) {
+@include u-keyframes(stretch) {
   0% {
-    @include transform(scaleY(0));
+    @include u-transform(scaleY(0));
   }
   40% {
-    @include transform(scaleY($saf-stretch-compress-exageration));
+    @include u-transform(scaleY($saf-stretch-compress-exageration));
   }
   60% {
-    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
+    @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
   }
   80% {
-    @include transform(scaleY($saf-stretch-compress-exageration));
+    @include u-transform(scaleY($saf-stretch-compress-exageration));
   }
   100% {
-    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
+    @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
   }
   80% {
-    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025)));
+    @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025)));
   }
   100% {
-    @include transform(scaleY(1));
+    @include u-transform(scaleY(1));
   }
 }
 
 @mixin stretchUp($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
-  @include animation(stretch $count $duration $delay $fill-mode $timing);
-  @include prefix(transform-origin, 0 100%, webkit moz spec);
+  @include u-animation(stretch $count $duration $delay $fill-mode $timing);
+  @include u-prefix(u-transform-origin, 0 100%, webkit moz spec);
 }
 
 @mixin stretchDown($duration: 1.75s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
-  @include animation(stretch $count $duration $delay $fill-mode $timing);
-  @include prefix(transform-origin, 0 0, webkit moz spec);
+  @include u-animation(stretch $count $duration $delay $fill-mode $timing);
+  @include u-prefix(u-transform-origin, 0 0, webkit moz spec);
 }

data/app/assets/stylesheets/entrances/_turn-in.scss

@@ -1,31 +1,31 @@
-@include keyframes(turnInDown) {
+@include u-keyframes(turnInDown) {
   0% {
     opacity: 0;
-    @include transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px));
+    @include u-transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px));
   }
   100% {
     opacity: 1;
-    @include transform(perspective(800px) rotateX(0deg) translateZ(0));
-    @include prefix(backface-visibility, hidden, webkit moz spec);
+    @include u-transform(perspective(800px) rotateX(0deg) translateZ(0));
+    @include u-prefix(backface-visibility, hidden, webkit moz spec);
   }
 }
 
 @mixin turnInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(turnInDown $duration $delay $fill-mode);
+  @include u-animation(turnInDown $duration $delay $fill-mode);
 }
 
-@include keyframes(turnInUp) {
+@include u-keyframes(turnInUp) {
   0% {
     opacity: 0;
-    @include transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px));
+    @include u-transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px));
   }
   100% {
     opacity: 1;
-    @include transform(perspective(800px) rotateX(0deg) translateZ(0));
-    @include prefix(backface-visibility, hidden, webkit moz spec);
+    @include u-transform(perspective(800px) rotateX(0deg) translateZ(0));
+    @include u-prefix(backface-visibility, hidden, webkit moz spec);
   }
 }
 
 @mixin turnInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(turnInUp $duration $delay $fill-mode);
+  @include u-animation(turnInUp $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/exits/_compress.scss

@@ -1,25 +1,25 @@
-@include keyframes(compress) {
+@include u-keyframes(compress) {
   0% {
-    @include transform(scaleY(1) translateZ(0));
+    @include u-transform(scaleY(1) translateZ(0));
   }
   30% {
-    @include transform(scaleY($saf-stretch-compress-exageration));
+    @include u-transform(scaleY($saf-stretch-compress-exageration));
   }
   50% {
-    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
+    @include u-transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
   }
   100% {
-    @include transform(scaleY(0));
+    @include u-transform(scaleY(0));
   }
 }
 
 @mixin compressUp($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
-  @include animation(compress $count $duration $delay $fill-mode $timing);
-  @include prefix(transform-origin, 0 0, webkit moz spec);
+  @include u-animation(compress $count $duration $delay $fill-mode $timing);
+  @include prefix(u-transform-origin, 0 0, webkit moz spec);
 }
 
 @mixin compressDown($duration: 0.7s, $delay: 0s, $count: 1, $fill-mode: both, $timing: ease-out) {
-  @include animation(compress $count $duration $delay $fill-mode $timing);
-  @include prefix(transform-origin, 0 100%, webkit moz spec);
+  @include u-animation(compress $count $duration $delay $fill-mode $timing);
+  @include prefix(u-transform-origin, 0 100%, webkit moz spec);
 }