saffron 0.2.0 → 0.2.2

data/.travis.yml

@@ -1,5 +1,3 @@
-language: "ruby"
+language: ruby
 rvm:
-  - "1.9.3"
-script:
-  - "bundle exec rake"
+  - 1.9.3

data/Gemfile.lock

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

data/README.md

@@ -1,4 +1,7 @@
 #Saffron
+[![Build Status](https://travis-ci.org/corporadobob/saffron.svg?branch=master)](https://travis-ci.org/corporadobob/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.
 
 Saffron is a collection of sass mixins and helpers that make adding CSS3 animations and transitions much simpler.

data/app/assets/stylesheets/_variables.scss

@@ -1,18 +1,18 @@
-$prefixes: ("webkit", "moz", "o", "ms", "spec") !default;
-$translateY-distance: 1.334em !default;
-$translateX-distance: 1.334em !default;
-$drop-rise-distance: 10em !default;
-$shake-distance: 0.55em !default;
-$teeter-angle: 10deg !default;
-$quiver-angle: 2deg !default;
-$float-bob-distance: 0.25em !default;
-$float-bob-angle: 1deg !default;
-$sway-angle: 3deg !default;
-$turn-angle: 225deg !default;
-$pulsate-scale: 1.1 !default;
-$stretch-compress-exageration: 1.05 !default;
-$distance-from-origin: 5em !default;
-$sunrise-arch: -15em !default;
-$enlarge-contract-multiple: 1.15 !default;
-$enlarge-contract-jump: 1em !default;
-$flip-scale: 1.2 !default;
+$saf-prefixes: ("webkit", "moz", "o", "ms", "spec") !default;
+$saf-translateY-distance: 1.334em !default;
+$saf-translateX-distance: 1.334em !default;
+$saf-drop-rise-distance: 10em !default;
+$saf-shake-distance: 0.55em !default;
+$saf-teeter-angle: 10deg !default;
+$saf-quiver-angle: 2deg !default;
+$saf-float-bob-distance: 0.25em !default;
+$saf-float-bob-angle: 1deg !default;
+$saf-sway-angle: 3deg !default;
+$saf-turn-angle: 225deg !default;
+$saf-pulsate-scale: 1.1 !default;
+$saf-stretch-compress-exageration: 1.05 !default;
+$saf-distance-from-origin: 5em !default;
+$saf-sunrise-arch: -15em !default;
+$saf-enlarge-contract-multiple: 1.15 !default;
+$saf-enlarge-contract-jump: 1em !default;
+$saf-flip-scale: 1.2 !default;

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

@@ -1,10 +1,10 @@
 @include keyframes(dropIn) {
   0% {
     opacity: 0;
-    @include transform(translateY($drop-rise-distance * -1) rotate(0) translateZ(0));
+    @include transform(translateY($saf-drop-rise-distance * -1) rotate(0) translateZ(0));
   }
   10% {
-    @include transform(translateY($drop-rise-distance * -1) rotate(-40deg));
+    @include transform(translateY($saf-drop-rise-distance * -1) rotate(-40deg));
   }
   90% {
     opacity: 1;

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

@@ -1,7 +1,7 @@
 @include keyframes(fadeInDown) {
   0% {
     opacity: 0;
-    @include transform(translateY($translateY-distance * -1) translateZ(0));
+    @include transform(translateY($saf-translateY-distance * -1) translateZ(0));
   }
   100% {
     opacity: 1;

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

@@ -1,7 +1,7 @@
 @include keyframes(fadeInLeft) {
   0% {
     opacity: 0;
-    @include transform(translateX($translateX-distance * -1) translateZ(0));
+    @include transform(translateX($saf-translateX-distance * -1) translateZ(0));
   }
   100% {
     opacity: 1;

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

@@ -1,7 +1,7 @@
 @include keyframes(fadeInRight) {
   0% {
     opacity: 0;
-    @include transform(translateX($translateX-distance) translateZ(0));
+    @include transform(translateX($saf-translateX-distance) translateZ(0));
   }
   100% {
     opacity: 1;

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

@@ -1,7 +1,7 @@
 @include keyframes(fadeInUp) {
   0% {
     opacity: 0;
-    @include transform(translateY($translateY-distance) translateZ(0));
+    @include transform(translateY($saf-translateY-distance) translateZ(0));
   }
   100% {
     opacity: 1;

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

@@ -1,7 +1,7 @@
 @include keyframes(fadeInZoomBig) {
   0% {
     opacity: 0;
-    @include transform(scale(0) translateZ(0));
+    @include transform(scale(0));
   }
   60% {
     @include transform(scale(1.25));

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

@@ -1,7 +1,7 @@
 @include keyframes(riseIn) {
   0% {
     opacity: 0;
-    @include transform(translateY($drop-rise-distance) translateZ(0));
+    @include transform(translateY($saf-drop-rise-distance) translateZ(0));
   }
   50% {
     opacity: 1

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

@@ -1,11 +1,11 @@
 @include keyframes(slideInLeft) {
   0% {
     opacity: 0;
-    @include transform(translateX($translateX-distance * -10) translateZ(0));
+    @include transform(translateX($saf-translateX-distance * -10) translateZ(0));
   }
   65% {
     opacity: 1;
-    @include transform(translateX($translateX-distance));
+    @include transform(translateX($saf-translateX-distance));
   }
   100% {
     @include transform(translateX(0));
@@ -19,11 +19,11 @@
 @include keyframes(slideInRight) {
   0% {
     opacity: 0;
-    @include transform(translateX($translateX-distance * 10) translateZ(0));
+    @include transform(translateX($saf-translateX-distance * 10) translateZ(0));
   }
   65% {
     opacity: 1;
-    @include transform(translateX($translateX-distance * -1));
+    @include transform(translateX($saf-translateX-distance * -1));
   }
   100% {
     @include transform(translateX(0));

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

@@ -1,21 +1,21 @@
 @include keyframes(stretch) {
   0% {
-    @include transform(scaleY(0) translateZ(0));
+    @include transform(scaleY(0));
   }
   40% {
-    @include transform(scaleY($stretch-compress-exageration));
+    @include transform(scaleY($saf-stretch-compress-exageration));
   }
   60% {
-    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .075)));
+    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
   }
   80% {
-    @include transform(scaleY($stretch-compress-exageration));
+    @include transform(scaleY($saf-stretch-compress-exageration));
   }
   100% {
-    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .075)));
+    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
   }
   80% {
-    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .025)));
+    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .025)));
   }
   100% {
     @include transform(scaleY(1));

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

@@ -1,7 +1,7 @@
-@include keyframes(turnDownIn) {
+@include keyframes(turnInDown) {
   0% {
     opacity: 0;
-    @include transform(perspective(500px) rotateX($turn-angle * -1) translateZ(150px));
+    @include transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px));
   }
   100% {
     opacity: 1;
@@ -10,14 +10,14 @@
   }
 }
 
-@mixin turnDownIn($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(turnDownIn $duration $delay $fill-mode);
+@mixin turnInDown($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(turnInDown $duration $delay $fill-mode);
 }
 
-@include keyframes(turnUpIn) {
+@include keyframes(turnInUp) {
   0% {
     opacity: 0;
-    @include transform(perspective(500px) rotateX($turn-angle) translateZ(150px));
+    @include transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px));
   }
   100% {
     opacity: 1;
@@ -26,6 +26,6 @@
   }
 }
 
-@mixin turnUpIn($duration: 1s, $delay: 0s, $fill-mode: forwards) {
-  @include animation(turnUpIn $duration $delay $fill-mode);
+@mixin turnInUp($duration: 1s, $delay: 0s, $fill-mode: forwards) {
+  @include animation(turnInUp $duration $delay $fill-mode);
 }

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

@@ -3,10 +3,10 @@
     @include transform(scaleY(1) translateZ(0));
   }
   30% {
-    @include transform(scaleY($stretch-compress-exageration));
+    @include transform(scaleY($saf-stretch-compress-exageration));
   }
   50% {
-    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .075)));
+    @include transform(scaleY($saf-stretch-compress-exageration - ($saf-stretch-compress-exageration * .075)));
   }
   100% {
     @include transform(scaleY(0));

data/app/assets/stylesheets/exits/_drop-out.scss

@@ -5,7 +5,7 @@
   }
   100% {
     opacity: 0;
-    @include transform(translateY($drop-rise-distance) rotate(-40deg));
+    @include transform(translateY($saf-drop-rise-distance) rotate(-40deg));
   }
 }
 

data/app/assets/stylesheets/exits/_fade-out-down.scss

@@ -5,7 +5,7 @@
   }
   100% {
     opacity: 0;
-    @include transform(translateY($translateY-distance));
+    @include transform(translateY($saf-translateY-distance));
   }
 }
 

data/app/assets/stylesheets/exits/_fade-out-left.scss

@@ -4,7 +4,7 @@
   }
   100% {
     opacity: 0;
-    @include transform(translateX($translateX-distance * -1) translateZ(0));
+    @include transform(translateX($saf-translateX-distance * -1) translateZ(0));
   }
 }
 

data/app/assets/stylesheets/exits/_fade-out-right.scss

@@ -4,7 +4,7 @@
   }
   100% {
     opacity: 0;
-    @include transform(translateX($translateX-distance) translateZ(0));
+    @include transform(translateX($saf-translateX-distance) translateZ(0));
   }
 }
 

data/app/assets/stylesheets/exits/_fade-out-up.scss

@@ -5,7 +5,7 @@
   }
   100% {
     opacity: 0;
-    @include transform(translateY($translateY-distance * -1));
+    @include transform(translateY($saf-translateY-distance * -1));
   }
 }
 

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

@@ -1,7 +1,7 @@
 @include keyframes(poof) {
   0% {
     opacity: 1;
-    @include transform(scale(1) translateZ(0));
+    @include transform(scale(1));
     -webkit-filter: blur(0);
   }
 
@@ -12,6 +12,6 @@
   }
 }
 
-@mixin poof($duration: 0.75s, $delay: 0s, $fill-mode: forwards) {
+@mixin poof($duration: 0.85s, $delay: 0s, $fill-mode: forwards) {
   @include animation(poof $duration $delay $fill-mode);
 }

data/app/assets/stylesheets/exits/_rise-out.scss

@@ -5,7 +5,7 @@
   }
   100% {
     opacity: 0;
-    @include transform(translateY($drop-rise-distance * -1));
+    @include transform(translateY($saf-drop-rise-distance * -1));
   }
 }
 

data/app/assets/stylesheets/exits/_slide-out.scss

@@ -1,11 +1,11 @@
 @include keyframes(slideOutLeft) {
   35% {
     opacity: 1;
-    @include transform(translateX($translateX-distance) translateZ(0));
+    @include transform(translateX($saf-translateX-distance) translateZ(0));
   }
   100% {
     opacity: 0;
-    @include transform(translateX($translateX-distance * -10));
+    @include transform(translateX($saf-translateX-distance * -10));
   }
 }
 
@@ -16,11 +16,11 @@
 @include keyframes(slideOutRight) {
   35% {
     opacity: 1;
-    @include transform(translateX($translateX-distance * -1) translateZ(0));
+    @include transform(translateX($saf-translateX-distance * -1) translateZ(0));
   }
   100% {
     opacity: 0;
-    @include transform(translateX($translateX-distance * 10));
+    @include transform(translateX($saf-translateX-distance * 10));
   }
 }
 

data/app/assets/stylesheets/exits/_turn-out.scss

@@ -7,7 +7,7 @@
 
   100% {
     opacity: 0;
-    @include transform(perspective(500px) rotateX($turn-angle * -1) translateZ(150px));
+    @include transform(perspective(500px) rotateX($saf-turn-angle * -1) translateZ(150px));
   }
 }
 
@@ -24,7 +24,7 @@
 
   100% {
     opacity: 0;
-    @include transform(perspective(500px) rotateX($turn-angle) translateZ(150px));
+    @include transform(perspective(500px) rotateX($saf-turn-angle) translateZ(150px));
   }
 }
 

data/app/assets/stylesheets/helpers/_keyframes.scss

@@ -1,5 +1,5 @@
 @mixin keyframes($name) {
-  @each $prefix in $prefixes {
+  @each $prefix in $saf-prefixes {
     @if $prefix == "webkit" {
       @-webkit-keyframes #{$name} {
         @include prefix-only($prefix);

data/app/assets/stylesheets/helpers/_prefix.scss

@@ -1,4 +1,4 @@
-@mixin prefix($property, $value, $prefixes: $prefixes) {
+@mixin prefix($property, $value, $prefixes: $saf-prefixes) {
   @each $prefix in $prefixes {
     @if $prefix == "webkit" {
       -webkit-#{$property}: #{$value};

data/app/assets/stylesheets/helpers/_transform.scss

@@ -1,7 +1,7 @@
 @mixin transform($property: none) {
-  @if contains($prefixes, "webkit") and contains($prefixes, "ms") {
+  @if contains($saf-prefixes, "webkit") and contains($saf-prefixes, "ms") {
     @include prefix(transform, $property, webkit ms spec);
-  } @else if contains($prefixes, "webkit") {
+  } @else if contains($saf-prefixes, "webkit") {
     @include prefix(transform, $property, webkit spec);
   } @else {
     @include prefix(transform, $property, spec);

data/app/assets/stylesheets/helpers/_transition.scss

@@ -1,5 +1,5 @@
 @mixin transition ($properties...) {
-  @if contains($prefixes, "webkit") {
+  @if contains($saf-prefixes, "webkit") {
     @include prefix(transition, $properties, webkit spec);
   } @else {
     @include prefix(transition, $properties, spec);

data/app/assets/stylesheets/in-place/_around-the-world.scss

@@ -1,9 +1,9 @@
 @include keyframes(aroundTheWorld) {
   0% {
-    @include transform(rotate(0deg) translate3d($distance-from-origin * -1, $distance-from-origin * -1, 0) rotate(0deg));
+    @include transform(rotate(0deg) translate3d($saf-distance-from-origin * -1, $saf-distance-from-origin * -1, 0) rotate(0deg));
   }
   100% {
-    @include transform(rotate(360deg) translate3d($distance-from-origin * -1, $distance-from-origin * -1, 0) rotate(-360deg));
+    @include transform(rotate(360deg) translate3d($saf-distance-from-origin * -1, $saf-distance-from-origin * -1, 0) rotate(-360deg));
   }
 }
 

data/app/assets/stylesheets/in-place/_contract.scss

@@ -1,7 +1,6 @@
 @mixin contract($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) {
   @include transition(all $duration $delay $timing);
-  @include transform(translateY(0) scale(1) translateZ(0));
   &#{$selector} {
-    @include transform(translateY($enlarge-contract-jump) scale(1 / $enlarge-contract-multiple));
+    @include transform(translateY($saf-enlarge-contract-jump) scale(1 / $saf-enlarge-contract-multiple));
   }
 }

data/app/assets/stylesheets/in-place/_enlarge.scss

@@ -1,7 +1,6 @@
 @mixin enlarge($selector: ":hover", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(1.000, -0.600, 0.595, 0.835)) {
   @include transition(all $duration $delay $timing);
-  @include transform(translateY(0) scale(1) translateZ(0));
   &#{$selector} {
-    @include transform(translateY($enlarge-contract-jump * -1) scale($enlarge-contract-multiple));
+    @include transform(translateY($saf-enlarge-contract-jump * -1) scale($saf-enlarge-contract-multiple));
   }
 }

data/app/assets/stylesheets/in-place/_float.scss

@@ -1,12 +1,12 @@
 @include keyframes(float) {
   0%, 50%, 100% {
-    @include transform(translateY($float-bob-distance * -1) translateZ(0));
+    @include transform(translateY($saf-float-bob-distance * -1) translateZ(0));
   }
   25% {
-    @include transform(translateY($float-bob-distance) rotate($float-bob-angle));
+    @include transform(translateY($saf-float-bob-distance) rotate($saf-float-bob-angle));
   }
   75% {
-    @include transform(translateY($float-bob-distance) rotate($float-bob-angle * -1));
+    @include transform(translateY($saf-float-bob-distance) rotate($saf-float-bob-angle * -1));
   }
 }