ceaser-easing 0.1.5

data/README.mkdn

@@ -0,0 +1,104 @@
+Compass Ceaser CSS Eeasing Transitions
+======================================
+
+An compass extension based on [ceasar css easing animation tool](http://matthewlein.com/ceaser/) by [@matthewlein](http://twitter.com/matthewlein)
+This extension provides transitions based on the classic Penner equations from Flash and jQuery.
+
+
+Installation
+============
+
+Install gem from the command line:
+
+    sudo gem install ceaser-easing
+
+Create a new project using Sassy Buttons
+
+    compass create project_name -r ceaser-easing --using ceaser-easing
+    
+    #import ceaser-easing into your sass/scss file
+    @import "ceaser-easing"
+
+    
+Adding Sassy Buttons to an exiting project:
+    
+    # Edit the project configuration file and add:
+    require 'ceaser-easing'
+    
+    # From the command line:
+    compass install ceaser-easing
+    
+    #import sassy buttons into your sass/scss file
+    @import "ceaser-easing"
+    
+
+
+
+
+Using Ceaser Eeasing
+===================
+
+The ceaser easing extension provides a mixin called ceaser. You pass what type of easing you would like to the mixin and it will apply the correct cubic-bezier transition timing function for you. You can then pass the transition property (defaults to all), the transiton duration (defautlts to 500ms), and the transition delay (defaults to 0).
+ 
+The ceaser easing mixin
+-----------------------
+    
+    # The ceaser easing mixin with its argument descriptions
+    @mixin ceaser(ease type, transition property, duration, delay)
+    
+    # Example mixin call that will create a 3 second transition with the ease type of ease-in
+    @include ceaser(ease-in, all, 3s)
+    
+    # Example mixin call that will create a 500 millisecon transition on only the width property with a delay of 1 second
+    @include ceaser(easeInOutExpo, width, 500ms, 1s)
+    
+
+As an example, here is how create the above transition for an html element with id of box.  
+    
+    #box {
+        width: 500px;
+        @include ceaser(easeInOutExpo, width, 500ms, 1s); 
+    }
+    
+    #box:hover {
+        width: 700px;
+    }
+    
+    
+Ease Types
+----------
+Here is a list of all the available easing types to choose from, you can see an example of each on the original [demo page](http://matthewlein.com/ceaser/)
+
+    linear 
+	ease (default) 
+	ease-in 
+	ease-out 
+	ease-in-out 
+    
+	easeInQuad 
+	easeInCubic 
+	easeInQuart 
+	easeInQuint 
+	easeInSine 
+	easeInExpo 
+	easeInCirc 
+
+	easeOutQuad 
+	easeOutCubic 
+	easeOutQuart 
+	easeOutQuint 
+	easeOutSine 
+	easeOutExpo 
+	easeOutCirc 
+
+	easeInOutQuad 
+	easeInOutCubic 
+	easeInOutQuart 
+	easeInOutQuint 
+	easeInOutSine 
+	easeInOutExpo 
+	easeInOutCirc  
+                    
+   
+    
+    

data/lib/ceaser-easing.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('ceaser-easing', :path => extension_path)

data/stylesheets/_ceaser-easing.sass

@@ -0,0 +1 @@
+@import "ceaser-easing/easing-functions"

data/stylesheets/ceaser-easing/_easing-functions.sass

@@ -0,0 +1,69 @@
+@import "compass/css3/transition"
+                             
+@mixin ceaser($type: "ease", $properties: all, $duration: 500ms, $delay: 0) 
+	$easingValue : ""
+	
+	@if $type ==   "linear"
+		$easingValue: "0.250, 0.250, 0.750, 0.750"
+	@else if $type ==  "ease"
+		$easingValue: "0.250, 0.100, 0.250, 1.000"
+	@else if $type ==  "ease-in"
+		$easingValue: "0.420, 0.000, 1.000, 1.000"
+	@else if $type ==  "ease-out"
+		$easingValue: "0.000, 0.000, 0.580, 1.000"
+	@else if $type ==  "ease-in-out"
+		$easingValue: "0.420, 0.000, 0.580, 1.000"
+
+  
+
+	@else if $type ==  "easeInQuad"
+		$easingValue: "0.550, 0.085, 0.680, 0.530"
+	@else if $type ==  "easeInCubic"
+		$easingValue: "0.550, 0.055, 0.675, 0.190"
+	@else if $type ==  "easeInQuart" 
+		$easingValue: "0.895, 0.030, 0.685, 0.220"
+	@else if $type ==  "easeInQuint"
+		$easingValue: "0.755, 0.050, 0.855, 0.060"
+	@else if $type ==  "easeInSine"
+		$easingValue: "0.470, 0.000, 0.745, 0.715"
+	@else if $type ==  "easeInExpo"
+		$easingValue: "0.950, 0.050, 0.795, 0.035"
+	@else if $type ==  "easeInCirc"
+		$easingValue: "0.600, 0.040, 0.980, 0.335"
+
+
+
+	@else if $type ==  "easeOutQuad"	
+		$easingValue: "0.250, 0.460, 0.450, 0.940"
+	@else if $type ==  "easeOutCubic"
+		$easingValue: "0.215, 0.610, 0.355, 1.000"
+	@else if $type ==  "easeOutQuart"
+		$easingValue: "0.165, 0.840, 0.440, 1.000"
+	@else if $type ==  "easeOutQuint"
+		$easingValue: "0.230, 1.000, 0.320, 1.000"
+	@else if $type ==  "easeOutSine"
+		$easingValue: "0.390, 0.575, 0.565, 1.000"
+	@else if $type ==  "easeOutExpo"
+		$easingValue: "0.190, 1.000, 0.220, 1.000"
+	@else if $type ==  "easeOutCirc"
+		$easingValue: "0.075, 0.820, 0.165, 1.000"
+
+
+
+	@else if $type ==  "easeInOutQuad"	
+		$easingValue: "0.455, 0.030, 0.515, 0.955"
+	@else if $type ==  "easeInOutCubic"
+		$easingValue: "0.645, 0.045, 0.355, 1.000"
+	@else if $type ==  "easeInOutQuart"
+		$easingValue: "0.770, 0.000, 0.175, 1.000"
+	@else if $type ==  "easeInOutQuint"
+		$easingValue: "0.860, 0.000, 0.070, 1.000"
+	@else if $type ==  "easeInOutSine"
+		$easingValue: "0.445, 0.050, 0.550, 0.950"
+	@else if $type ==  "easeInOutExpo"
+		$easingValue: "1.000, 0.000, 0.000, 1.000"
+	@else if $type ==  "easeInOutCirc"
+		$easingValue: "0.785, 0.135, 0.150, 0.860"
+	
+	@include transition($properties, $duration, cubic-bezier(unquote($easingValue)), $delay)
+

data/templates/project/_ceaser.sass

@@ -0,0 +1,15 @@
+@import "ceaser-easing"
+// The ceaser easing mixin with its argument descriptions
+// @mixin ceaser(ease type, transition property, duration, delay)
+
+// Example mixin call that will create a 500 millisecon transition on only the width property with a delay of 1 second
+// here is how to create that transition for an html element with id of box.  
+  
+#box 
+	width: 500px
+	@include ceaser(easeInOutExpo, width, 500ms, 1s) 
+
+
+#box:hover 
+	width: 700px
+   

data/templates/project/manifest.rb

@@ -0,0 +1,11 @@
+stylesheet '_ceaser.sass', :media => 'screen, projection'
+
+description "a css transition implementation of the Penner equations based on @matthewlein css conversions for compass."
+
+help %Q{
+Installs ceaser extension
+}
+
+welcome_message %Q{
+Please refer to the readme on github for usage questions
+}

metadata

@@ -0,0 +1,84 @@
+--- !ruby/object:Gem::Specification 
+name: ceaser-easing
+version: !ruby/object:Gem::Version 
+  prerelease: false
+  segments: 
+  - 0
+  - 1
+  - 5
+  version: 0.1.5
+platform: ruby
+authors: 
+- Jared Hardy
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-03-22 00:00:00 -07:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 0
+        - 11
+        - beta
+        - 3
+        version: 0.11.beta.3
+  type: :runtime
+  version_requirements: *id001
+description: a css transition implementation of the Penner equations based on @matthewlein css conversions for compass
+email: jared@jaredhardy.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.mkdn
+- lib/ceaser-easing.rb
+- stylesheets/_ceaser-easing.sass
+- stylesheets/ceaser-easing/_easing-functions.sass
+- templates/project/_ceaser.sass
+- templates/project/manifest.rb
+has_rdoc: true
+homepage: http://www.jaredhardy.com/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.7
+signing_key: 
+specification_version: 3
+summary: a css transition implementation of the Penner equations based on @matthewlein css conversions for compass
+test_files: []
+