saffron 0.2.0

data/lib/saffron.rb

@@ -0,0 +1,13 @@
+require "saffron/installer"
+require "sass" unless defined? Sass
+
+module Saffron
+  if defined?(Rails) && defined?(Rails::Engine)
+    class Engine < ::Rails::Engine
+      require "saffron/engine"
+    end
+  else
+    Sass.load_paths << File.expand_path("../saffron", __FILE__)
+  end
+end
+

data/lib/saffron/engine.rb

@@ -0,0 +1,4 @@
+module Saffron
+  class Engine < Rails::Engine
+  end
+end

data/lib/saffron/installer.rb

@@ -0,0 +1,55 @@
+require "saffron/version"
+require "thor"
+
+module Saffron
+  class Installer < Thor
+    include Thor::Actions
+    source_root File.dirname(__FILE__)
+    map ["--version", "-v"] => :version
+
+    desc "install", "Installs Saffron"
+    method_option :path, :aliases => "-p", :desc => "Set the install path"
+    def install
+      unless File.directory? set_destination
+        install_saffron
+        puts "Saffron succesfully installed in #{@destination}/"
+      else
+        puts "Saffron already exists."
+      end
+    end
+
+    desc "update", "Updates Saffron"
+    method_option :path, :aliases => "-p", :desc => "Set the update path"
+    def update
+      if File.directory? set_destination
+        remove_saffron
+        install_saffron
+        puts "Saffron succesfully updated in #{@destination}/"
+      else
+        puts "Saffron not found. No updates occured."
+      end
+    end
+
+    desc "version", "Outputs version number"
+    def version
+      say "Saffron #{Saffron::VERSION}"
+    end
+
+    private
+    def set_destination
+      @destination ||= if options[:path]
+        File.join(options[:path], "saffron")
+      else
+        "saffron"
+      end
+    end
+
+    def install_saffron
+      directory "../../saffron/", @destination
+    end
+
+    def remove_saffron
+      remove_dir @destination
+    end
+  end
+end

data/lib/saffron/version.rb

@@ -0,0 +1,3 @@
+module Saffron
+  VERSION = "0.2.0"
+end

data/saffron.gemspec

@@ -0,0 +1,31 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'saffron/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "saffron"
+  spec.version       = Saffron::VERSION
+  spec.authors       = ["JC"]
+  spec.email         = ["j@colindres.me"]
+  spec.summary       = "A simple sass mixin library for animations and transitions."
+  spec.homepage      = "https://github.com/corporadobob/saffron"
+  spec.license       = "MIT"
+  spec.description   = <<-DESC
+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.
+  DESC
+
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "sass", "~> 3.2"
+  spec.add_dependency "thor"
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "aruba", "~> 0.5"
+end

data/saffron/_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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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/saffron/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);
+}

data/saffron/exits/_compress.scss

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

data/saffron/exits/_drop-out.scss

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