comixins 0.1.1 → 0.1.2

data/vendor/assets/stylesheets/animation/animate/_bouncing.scss

@@ -0,0 +1,3 @@
+// ---------------------------------------------------------------------------
+@import "bouncing/bouncing-exits";
+@import "bouncing/bouncing-entrances";

data/vendor/assets/stylesheets/animation/animate/_classes.scss

@@ -0,0 +1,21 @@
+// .animated and .animated.hinge classes for external use
+.animated {
+  @include animation(1s ease both); }
+
+.animated.hinge {
+  @include animation(2s ease both); }
+
+// Animations list
+$animations: flash, shake, bounce, tada, swing, wobble, wiggle, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, lightSpeedIn, lightSpeedOut, hinge, rollIn, rollOut;
+
+// Animations that require backface-visibility
+$backface: flip, flipInX, flipOutX, flipInY, flipOutY;
+
+// Creation of the different classes
+@each $anim in $animations {
+  .#{$anim} {
+    @if index($backface, $anim) {
+      @include backface-visibility(visible); }
+    @if $anim == "swing" {
+      @include transform-origin(top, center); }
+    @include animation-name($anim); } }

data/vendor/assets/stylesheets/animation/animate/_fading.scss

@@ -0,0 +1,3 @@
+// ---------------------------------------------------------------------------
+@import "fading/fading-exits";
+@import "fading/fading-entrances";

data/vendor/assets/stylesheets/animation/animate/_flippers.scss

@@ -0,0 +1,87 @@
+// ---------------------------------------------------------------------------
+@include keyframes(flip) {
+  0% {
+    @include transform(perspective(400px) rotateY(0));
+    @include animation-timing-function(ease-out);
+  }
+  40% {
+    @include transform(perspective(400px) translateZ(150px) rotateY(170deg));
+    @include animation-timing-function(ease-out);
+  }
+  50% {
+    @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
+    @include animation-timing-function(ease-in);
+  }
+  80% {
+    @include transform(perspective(400px) rotateY(360deg) scale(0.95));
+    @include animation-timing-function(ease-in);
+  }
+  100% {
+    @include transform(perspective(400px) scale(1));
+    @include animation-timing-function(ease-in);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipInX) {
+  0% {
+    @include transform(perspective(400px) rotateX(90deg));
+    @include opacity(0);
+  }
+  40% {
+    @include transform(perspective(400px) rotateX(-10deg));
+  }
+  70% {
+    @include transform(perspective(400px) rotateX(10deg));
+  }
+  100% {
+    @include transform(perspective(400px) rotateX(0deg));
+    @include opacity(1);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipOutX) {
+  0% {
+    @include transform(perspective(400px) rotateX(0deg));
+    @include opacity(1);
+  }
+  100% {
+    @include transform(perspective(400px) rotateX(90deg));
+    @include opacity(0);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipInY) {
+  0% {
+    @include transform(perspective(400px) rotateY(90deg));
+    @include opacity(0);
+  }
+  40% {
+    @include transform(perspective(400px) rotateY(-10deg));
+  }
+  70% {
+    @include transform(perspective(400px) rotateY(10deg));
+  }
+  100% {
+    @include transform(perspective(400px) rotateY(0deg));
+    @include opacity(1);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipOutY) {
+  0% {
+    @include transform(perspective(400px) rotateY(0deg));
+    @include opacity(1);
+  }
+  100% {
+    @include transform(perspective(400px) rotateY(90deg));
+    @include opacity(0);
+  }
+}

data/vendor/assets/stylesheets/animation/animate/_lightspeed.scss

@@ -0,0 +1,24 @@
+// ---------------------------------------------------------------------------
+@include keyframes(lightSpeedIn) {
+  0% {
+    @include transform(translateX(100%) skewX(-30deg));
+    @include opacity(0); }
+  60% {
+    @include transform(translateX(-20%) skewX(30deg));
+    @include opacity(1); }
+  80% {
+    @include transform(translateX(0%) skewX(-15deg));
+    @include opacity(1); }
+  100% {
+    @include transform(translateX(0%) skewX(0deg));
+    @include opacity(1); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(lightSpeedOut) {
+  0% {
+    @include transform(translateX(0%) skewX(0deg));
+    @include opacity(1); }
+  100% {
+    @include transform(translateX(100%) skewX(-30deg));
+    @include opacity(0); } }

data/vendor/assets/stylesheets/animation/animate/_rotating.scss

@@ -0,0 +1,3 @@
+// ---------------------------------------------------------------------------
+@import "rotating/rotating-exits";
+@import "rotating/rotating-entrances";

data/vendor/assets/stylesheets/animation/animate/_specials.scss

@@ -0,0 +1,42 @@
+// ---------------------------------------------------------------------------
+@include keyframes(hinge) {
+  0% {
+    @include rotate(0);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  20%, 60% {
+    @include rotate(80deg);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  40% {
+    @include rotate(60deg);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  80% {
+    @include transform(rotate(60deg) translateY(0));
+    @include opacity(1);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  100% {
+    @include translateY(700px);
+    @include opacity(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rollIn) {
+  0% {
+    @include opacity(0);
+    @include transform(translateX(-100%) rotate(-120deg)); }
+  100% {
+    @include opacity(1);
+    @include transform(translateX(0px) rotate(0deg)); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rollOut) {
+  0% {
+    @include opacity(1);
+    @include transform(translateX(0px) rotate(0deg)); }
+  100% {
+    @include opacity(0);
+    @include transform(translateX(-100%) rotate(-120deg)); } }

data/vendor/assets/stylesheets/animation/animate/bouncing/_bouncing-entrances.scss

@@ -0,0 +1,68 @@
+// ---------------------------------------------------------------------------
+@include keyframes(bounceIn) {
+  0% {
+    opacity: 0;
+    @include scale(0.3); }
+  50% {
+    opacity: 1;
+    @include scale(1.05); }
+  70% {
+    @include scale(0.9); }
+  100% {
+    @include scale(1); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInDown) {
+  0% {
+    opacity: 0;
+    @include translateY(-2000px); }
+  60% {
+    opacity: 1;
+    @include translateY(30px); }
+  80% {
+    @include translateY(-10px); }
+  100% {
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInUp) {
+  0% {
+    opacity: 0;
+    @include translateY(2000px); }
+  60% {
+    opacity: 1;
+    @include translateY(-30px); }
+  80% {
+    @include translateY(10px); }
+  100% {
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInRight) {
+  0% {
+    opacity: 0;
+    @include translateX(2000px); }
+  60% {
+    opacity: 1;
+    @include translateX(-30px); }
+  80% {
+    @include translateX(10px); }
+  100% {
+    @include translateX(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInLeft) {
+  0% {
+    opacity: 0;
+    @include translateX(-2000px); }
+  60% {
+    opacity: 1;
+    @include translateX(30px); }
+  80% {
+    @include translateX(-10px); }
+  100% {
+    @include translateX(0); } }

data/vendor/assets/stylesheets/animation/animate/bouncing/_bouncing-exits.scss

@@ -0,0 +1,60 @@
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOut) {
+  0% {
+    @include scale(1); }
+  25% {
+    @include scale(0.95); }
+  50% {
+    opacity: 1;
+    @include scale(1.1); }
+  100% {
+    opacity: 0;
+    @include scale(0.3); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutUp) {
+  0% {
+    @include translateY(0); }
+  20% {
+    opacity: 1;
+    @include translateY(20px); }
+  100% {
+    opacity: 0;
+    @include translateY(-2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutDown) {
+  0% {
+    @include translateY(0); }
+  20% {
+    opacity: 1;
+    @include translateY(-20px); }
+  100% {
+    opacity: 0;
+    @include translateY(2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutLeft) {
+  0% {
+    @include translateX(0); }
+  20% {
+    opacity: 1;
+    @include translateX(20px); }
+  100% {
+    opacity: 0;
+    @include translateX(-2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutRight) {
+  0% {
+    @include translateX(0); }
+  20% {
+    opacity: 1;
+    @include translateX(-20px); }
+  100% {
+    opacity: 0;
+    @include translateX(2000px); } }

data/vendor/assets/stylesheets/animation/animate/fading/_fading-entrances.scss

@@ -0,0 +1,86 @@
+// ---------------------------------------------------------------------------
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInUp) {
+  0% {
+    @include translateY(20px);
+    opacity: 0; }
+  100% {
+    @include translateY(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInDown) {
+  0% {
+    @include translateY(-20px);
+    opacity: 0; }
+  100% {
+    @include translateY(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInRight) {
+  0% {
+    @include translateX(20px);
+    opacity: 0; }
+  100% {
+    @include translateX(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInLeft) {
+  0% {
+    @include translateX(-20px);
+    opacity: 0; }
+  100% {
+    @include translateX(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInUpBig) {
+  0% {
+    @include translateY(2000px);
+    opacity: 0; }
+  100% {
+    @include translateY(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInDownBig) {
+  0% {
+    opacity: 0;
+    @include translateY(-2000px); }
+  100% {
+    opacity: 1;
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInRightBig) {
+  0% {
+    opacity: 0;
+    @include translateX(2000px); }
+  100% {
+    opacity: 1;
+    @include translateX(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInLeftBig) {
+  0% {
+    opacity: 0;
+    @include translateX(-2000px); }
+  100% {
+    opacity: 1;
+    @include translateX(0); } }

data/vendor/assets/stylesheets/animation/animate/fading/_fading-exits.scss

@@ -0,0 +1,86 @@
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutUp) {
+  0% {
+    @include translateY(0);
+    opacity: 1; }
+  100% {
+    @include translateY(-20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutDown) {
+  0% {
+    @include translateY(0);
+    opacity: 1; }
+  100% {
+    @include translateY(20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutRight) {
+  0% {
+    @include translateX(0);
+    opacity: 1; }
+  100% {
+    @include translateX(20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutLeft) {
+  0% {
+    @include translateX(0);
+    opacity: 1; }
+  100% {
+    @include translateX(-20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutUpBig) {
+  0% {
+    @include translateY(0);
+    opacity: 1; }
+  100% {
+    @include translateY(-2000px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutDownBig) {
+  0% {
+    opacity: 1;
+    @include translateY(0); }
+  100% {
+    opacity: 0;
+    @include translateY(2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutRightBig) {
+  0% {
+    opacity: 1;
+    @include translateX(0); }
+  100% {
+    opacity: 0;
+    @include translateX(2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutLeftBig) {
+  0% {
+    opacity: 1;
+    @include translateX(0); }
+  100% {
+    opacity: 0;
+    @include translateX(-2000px); } }