saffron 0.2.0

data/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+tasks/.sass-cache/
+tasks/node_modules/
+pkg/
+tmp/

data/.travis.yml

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

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in saffron.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,43 @@
+PATH
+  remote: .
+  specs:
+    saffron (0.2.0)
+      sass (~> 3.2)
+      thor
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    aruba (0.5.4)
+      childprocess (>= 0.3.6)
+      cucumber (>= 1.1.1)
+      rspec-expectations (>= 2.7.0)
+    builder (3.2.2)
+    childprocess (0.5.2)
+      ffi (~> 1.0, >= 1.0.11)
+    cucumber (1.3.14)
+      builder (>= 2.1.2)
+      diff-lcs (>= 1.1.3)
+      gherkin (~> 2.12)
+      multi_json (>= 1.7.5, < 2.0)
+      multi_test (>= 0.1.1)
+    diff-lcs (1.2.5)
+    ffi (1.9.3)
+    gherkin (2.12.2)
+      multi_json (~> 1.3)
+    multi_json (1.9.2)
+    multi_test (0.1.1)
+    rake (10.2.2)
+    rspec-expectations (2.14.5)
+      diff-lcs (>= 1.1.3, < 2.0)
+    sass (3.3.4)
+    thor (0.19.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  aruba (~> 0.5)
+  bundler (~> 1.3)
+  rake
+  saffron!

data/MIT

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Jorge Colindres
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,63 @@
+#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.
+Just include a mixin in your sass declaration, then set any configuration using variables and mixin parameters.
+
+###Requirements
+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:
+```
+saffron install
+```
+You can also use the `-p` flag to install Saffron into a relative directory:
+```
+saffron install -p path/to/directory/
+```
+Finally, import the mixins into your main scss file:
+```scss
+  @import "saffron/saffron";
+```
+
+###Rails
+If you're using Rails 3.1+, you can add Saffron to your Gemfile:
+```ruby
+  gem "saffron"
+```
+Run `bundle install` to make all the mixins available to your Rails application, and import Saffron at the top of your `application.css.scss`:
+```scss
+@import "saffron";
+```
+
+###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
+  @import "saffron/saffron";
+```
+No matter how you installed Saffron, you can now use any of the mixins:
+```scss
+  .my-class {
+    @include teeter();
+  }
+```
+
+##Updating
+To get the latest mixins you should update the Saffron files every once in a while. You can do so by running:
+```
+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:
+```
+saffron update -p path/to/directory/
+```
+
+##Browser Support
+Saffron uses CSS3 transform, keyframes, animations and transitions, so it's really only for modern browsers. Visit http://caniuse.com/ for a clear idea of CSS3 browser support.
+
+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.
+
+##License
+MIT

data/Rakefile

@@ -0,0 +1,16 @@
+require "bundler/gem_tasks"
+require "cucumber/rake/task"
+
+namespace :test do
+  desc "Runs aruba tests"
+
+  Cucumber::Rake::Task.new(:tests) do |t|
+    t.cucumber_opts = "--format progress"
+  end
+
+  Cucumber::Rake::Task.new(:features) do |t|
+    t.cucumber_opts = "--format pretty"
+  end
+end
+
+task :default => "test:tests"

data/app/assets/stylesheets/_variables.scss

@@ -0,0 +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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+@include keyframes(newspaper) {
+  0% {
+    opacity: 0;
+    @include transform(rotate(720deg) scale(0.33) translateZ(0));
+  }
+  100% {
+    opacity: 1;
+    @include 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);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+@include keyframes(stretch) {
+  0% {
+    @include transform(scaleY(0) translateZ(0));
+  }
+  40% {
+    @include transform(scaleY($stretch-compress-exageration));
+  }
+  60% {
+    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .075)));
+  }
+  80% {
+    @include transform(scaleY($stretch-compress-exageration));
+  }
+  100% {
+    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .075)));
+  }
+  80% {
+    @include transform(scaleY($stretch-compress-exageration - ($stretch-compress-exageration * .025)));
+  }
+  100% {
+    @include 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);
+}
+
+@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);
+}

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

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