mindy 0.1.2.1 → 0.1.3

data/lib/mindy.rb

@@ -3,7 +3,7 @@ Compass::Frameworks.register("mindy", :path => "#{File.dirname(__FILE__)}/..")
 
 module Mindy
   
-  VERSION = "0.1.2.1"
-  DATE = "2012-10-05"
+  VERSION = "0.1.3"
+  DATE = "2013-02-28"
 
 end

data/stylesheets/css3/_animate.scss

@@ -0,0 +1,635 @@
+//Animate Mixin Plugin
+@mixin animate($name: fadeIn, $duration: 1s, $delay: 0.2s, $function: ease, $mode: both) {
+  @include experimental(animation, $name $duration $delay $function $mode);
+}
+
+//KeyFrame Defaults (pre-made don't edit)
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@include keyframes(fadeInUp) {
+  0% {
+    @include transform(translateY(20px));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+}
+
+@include keyframes(fadeOutUp) {
+  0% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform(translateY(-20px));
+    opacity: 0;
+  }
+}
+
+@include keyframes(fadeInDown) {
+  0% {
+    @include transform(translateY(-20px));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+}
+
+@include keyframes(fadeOutDown) {
+  0% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform(translateY(20px));
+    opacity: 0;
+  }
+}
+
+@include keyframes(fadeInRight) {
+  0% {
+    @include transform(translateX(20px));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translateX(0));
+    opacity: 1;
+  }
+}
+
+@include keyframes(fadeOutLeft) {
+  0% {
+    @include transform(translateX(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform(translateX(-20px));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(fadeInLeft) {
+  0% {
+    @include transform(translateX(-20px));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translateX(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(fadeOutRight) {
+  0% {
+    @include transform(translateX(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform(translateX(20px));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(fadeInUpBig) {
+  0% {
+    @include transform(translateY(2000px));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(fadeOutUpBig) {
+  0% {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY(-2000px));
+  }
+}
+
+
+@include keyframes(fadeInDownBig) {
+  0% {
+    opacity: 0;
+    @include transform(translateY(-2000px));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+}
+
+
+@include keyframes(fadeOutDownBig) {
+  0% {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY(2000px));
+  }
+}
+
+
+@include keyframes(fadeInRightBig) {
+  0% {
+    opacity: 0;
+    @include transform(translateX(2000px));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translateX(0));
+  }
+}
+
+
+@include keyframes(fadeOutLeftBig) {
+  0% {
+    opacity: 1;
+    @include transform(translateX(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX(-2000px));
+  }
+}
+
+
+@include keyframes(fadeInLeftBig) {
+  0% {
+    opacity: 0;
+    @include transform(translateX(-2000px));
+  }
+  100% {
+    opacity: 1;
+    @include transform(translateX(0));
+  }
+}
+
+
+@include keyframes(fadeOutRightBig) {
+  0% {
+    opacity: 1;
+    @include transform(translateX(0));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX(2000px));
+  }
+}
+
+
+@include keyframes(bounceIn) {
+  0% {
+    opacity: 0;
+    @include transform(scale(0.3));
+  }
+  50% {
+    opacity: 1;
+    @include transform(scale(1.05));
+  }
+  70% {
+    @include transform(scale(0.9));
+  }
+  100% {
+    @include transform(scale(1));
+  }
+}
+
+
+@include keyframes(bounceInDown) {
+  0% {
+    opacity: 0;
+    @include transform(translateY(-2000px));
+  }
+  60% {
+    opacity: 1;
+    @include transform(translateY(30px));
+  }
+  80% {
+    @include transform(translateY(-10px));
+  }
+  100% {
+    @include transform(translateY(0));
+  }
+}
+
+
+@include keyframes(bounceInUp) {
+  0% {
+    opacity: 0;
+    @include transform(translateY(2000px));
+  }
+  60% {
+    opacity: 1;
+    @include transform(translateY(-30px));
+  }
+  80% {
+    @include transform(translateY(10px));
+  }
+  100% {
+    @include transform(translateY(0));
+  }
+}
+
+
+@include keyframes(bounceInRight) {
+  0% {
+    opacity: 0;
+    @include transform(translateX(2000px));
+  }
+  60% {
+    opacity: 1;
+    @include transform(translateX(-30px));
+  }
+  80% {
+    @include transform(translateX(10px));
+  }
+  100% {
+    @include transform(translateX(0));
+  }
+}
+
+
+@include keyframes(bounceInLeft) {
+  0% {
+    opacity: 0;
+    @include transform(translateX(-2000px));
+  }
+  60% {
+    opacity: 1;
+    @include transform(translateX(30px));
+  }
+  80% {
+    @include transform(translateX(-10px));
+  }
+  100% {
+    @include transform(translateX(0));
+  }
+}
+
+
+@include keyframes(bounceOut) {
+  0% {
+    @include transform(scale(1));
+  }
+  25% {
+    @include transform(scale(0.95));
+  }
+  50% {
+    opacity: 1;
+    @include transform(scale(1.1));
+  }
+  100% {
+    opacity: 0;
+    @include transform(scale(0.3));
+  }
+}
+
+
+@include keyframes(bounceOutUp) {
+  0% {
+    @include transform(translateY(0));
+  }
+  20% {
+    opacity: 1;
+    @include transform(translateY(20px));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY(-2000px));
+  }
+}
+
+
+@include keyframes(bounceOutDown) {
+  0% {
+    @include transform(translateY(0));
+  }
+  20% {
+    opacity: 1;
+    @include transform(translateY(-20px));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateY(2000px));
+  }
+}
+
+
+@include keyframes(bounceOutLeft) {
+  0% {
+    @include transform(translateX(0));
+  }
+  20% {
+    opacity: 1;
+    @include transform(translateX(20px));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX(-2000px));
+  }
+}
+
+
+@include keyframes(bounceOutRight) {
+  0% {
+    @include transform(translateX(0));
+  }
+  20% {
+    opacity: 1;
+    @include transform(translateX(-20px));
+  }
+  100% {
+    opacity: 0;
+    @include transform(translateX(2000px));
+  }
+}
+
+
+@include  keyframes(flash) {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(bounce) {
+  0% {
+    @include transform(translateY(0));
+  }
+  20% {
+    @include transform(translateY(0));
+  }
+  40% {
+    @include transform(translateY(-30px));
+  }
+  50% {
+    @include transform(translateY(0));
+  }
+  60% {
+    @include transform(translateY(-15px));
+  }
+  80% {
+    @include transform(translateY(0));
+  }
+  100% {
+    @include transform(translateY(0));
+  }
+}
+
+
+@include keyframes(shake) {
+  0% {
+    @include transform(translateX(0));
+  }
+  10% {
+    @include transform(translateX(-10px));
+  }
+  20% {
+    @include transform(translateX(10px));
+  }
+  30% {
+    @include transform(translateX(-10px));
+  }
+  40% {
+    @include transform(translateX(10px));
+  }
+  50% {
+    @include transform(translateX(-10px));
+  }
+  60% {
+    @include transform(translateX(10px));
+  }
+  70% {
+    @include transform(translateX(-10px));
+  }
+  80% {
+    @include transform(translateX(10px));
+  }
+  90% {
+    @include transform(translateX(-10px));
+  }
+  100% {
+    @include transform(translateX(0));
+  }
+}
+
+
+@include keyframes(rotateInDownLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(-90deg));
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(rotateInUpLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(90deg));
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(rotateInUpRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(-90deg));
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(rotateInDownRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(90deg));
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(rotateOutDownLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(90deg));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(rotateOutUpLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(left bottom);
+    @include transform(rotate(-90deg));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(rotateOutDownRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(-90deg));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(rotateOutUpRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(right bottom);
+    @include transform(rotate(90deg));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(rotateIn) {
+  0% {
+    @include transform-origin(center center);
+    @include transform(rotate(-200deg));
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(center center);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+}
+
+
+@include keyframes(rotateOut) {
+  0% {
+    @include transform-origin(center center);
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(center center);
+    @include transform(rotate(200deg));
+    opacity: 0;
+  }
+}
+
+
+@include keyframes(tada) {
+  0% {
+    @include transform(scale(1));
+  }
+  10% {
+    @include transform(scale(0.9) rotate(-3deg));
+  }
+  20% {
+    @include transform(scale(0.9) rotate(-3deg));
+  }
+  30% {
+    @include transform(scale(1.1) rotate(3deg));
+  }
+  40% {
+    @include transform(scale(1.1) rotate(-3deg));
+  }
+  50% {
+    @include transform(scale(1.1) rotate(3deg));
+  }
+  60% {
+    @include transform(scale(1.1) rotate(-3deg));
+  }
+  70% {
+    @include transform(scale(1.1) rotate(3deg));
+  }
+  80% {
+    @include transform(scale(1.1) rotate(-3deg));
+  }
+  90% {
+    @include transform(scale(1.1) rotate(3deg));
+  }
+  100% {
+    @include transform(scale(1) rotate(0));
+  }
+}