rhet-butler 0.5.0 → 0.9.0

data/default-configuration/assets/stylesheets/animate/attention/_swing.scss

@@ -0,0 +1,40 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "compass/css3/animation";
+@import "compass/css3/transform";
+
+// ---------------------------------------------------------------------------
+// swing
+
+@mixin animate-swing(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: swing;
+  @if $keyframes {
+    @include keyframes($name) {
+      20%, 40%, 60%, 80%, 100% {
+        @include transform-origin(top, center);
+      }
+      20% {
+        @include rotate(15deg);
+      }
+      40% {
+        @include rotate(-10deg);
+      }
+      60% {
+        @include rotate(5deg);
+      }
+      80% {
+        @include rotate(-5deg);
+      }
+      100% {
+        @include rotate(0deg);
+      }
+    }
+  }
+  @include animation-class($name, $class) {
+    @include transform-origin(top, center);
+  }
+}

data/default-configuration/assets/stylesheets/animate/attention/_tada.scss

@@ -0,0 +1,51 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "compass/css3/animation";
+
+// ---------------------------------------------------------------------------
+// tada
+
+@mixin animate-tada(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: tada;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include 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));
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}

data/default-configuration/assets/stylesheets/animate/attention/_wiggle.scss

@@ -0,0 +1,52 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "compass/css3/animation";
+
+// ---------------------------------------------------------------------------
+// wiggle
+
+@mixin animate-wiggle(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: wiggle;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include skewX(9deg);
+      }
+      10% {
+        @include skewX(-8deg);
+      }
+      20% {
+        @include skewX(7deg);
+      }
+      30% {
+        @include skewX(-6deg);
+      }
+      40% {
+        @include skewX(5deg);
+      }
+      50% {
+        @include skewX(-4deg);
+      }
+      60% {
+        @include skewX(3deg);
+      }
+      70% {
+        @include skewX(-2deg);
+      }
+      80% {
+        @include skewX(1deg);
+      }
+      90% {
+        @include skewX(0deg);
+      }
+      100% {
+        @include skewX(0deg);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}

data/default-configuration/assets/stylesheets/animate/attention/_wobble.scss

@@ -0,0 +1,41 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "compass/css3/animation";
+@import "compass/css3/transform";
+
+// ---------------------------------------------------------------------------
+// wobble
+
+@mixin animate-wobble(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: wobble;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include translateX(0%);
+      }
+      15% {
+        @include transform(translateX(-25%) rotate(-5deg));
+      }
+      30% {
+        @include transform(translateX(20%) rotate(3deg));
+      }
+      45% {
+        @include transform(translateX(-15%) rotate(-3deg));
+      }
+      60% {
+        @include transform(translateX(10%) rotate(2deg));
+      }
+      75% {
+        @include transform(translateX(-5%) rotate(-1deg));
+      }
+      100% {
+        @include transform(translateX(0%));
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}

data/default-configuration/assets/stylesheets/animate/bounce/_bounceIn.scss

@@ -0,0 +1,151 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "compass/css3/animation";
+@import "compass/css3/transform";
+@import "compass/css3/opacity";
+
+// ---------------------------------------------------------------------------
+// bounceIn
+
+@mixin animate-bounceIn(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceIn;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        opacity: 0;
+        @include scale(0.3);
+      }
+      50% {
+        opacity: 1;
+        @include scale(1.05);
+      }
+      70% {
+        @include scale(0.9);
+      }
+      100% {
+        @include scale(1);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInDown
+
+@mixin animate-bounceInDown(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceInDown;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        opacity: 0;
+        @include translateY(-2000px);
+      }
+      60% {
+        opacity: 1;
+        @include translateY(30px);
+      }
+      80% {
+        @include translateY(-10px);
+      }
+      100% {
+        @include translateY(0);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInUp
+
+@mixin animate-bounceInUp(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceInUp;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        opacity: 0;
+        @include translateY(2000px);
+      }
+      60% {
+        opacity: 1;
+        @include translateY(-30px);
+      }
+      80% {
+        @include translateY(10px);
+      }
+      100% {
+        @include translateY(0);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInRight
+
+@mixin animate-bounceInRight(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceInRight;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        opacity: 0;
+        @include translateX(2000px);
+      }
+      60% {
+        opacity: 1;
+        @include translateX(-30px);
+      }
+      80% {
+        @include translateX(10px);
+      }
+      100% {
+        @include translateX(0);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceInLeft
+
+@mixin animate-bounceInLeft(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceInLeft;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        opacity: 0;
+        @include translateX(-2000px);
+      }
+      60% {
+        opacity: 1;
+        @include translateX(30px);
+      }
+      80% {
+        @include translateX(-10px);
+      }
+      100% {
+        @include translateX(0);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}

data/default-configuration/assets/stylesheets/animate/bounce/_bounceOut.scss

@@ -0,0 +1,139 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "compass/css3/animation";
+@import "compass/css3/transform";
+@import "compass/css3/opacity";
+
+// ---------------------------------------------------------------------------
+// bounceOut
+
+@mixin animate-bounceOut(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceOut;
+  @if $keyframes {
+    @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 animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutUp
+
+@mixin animate-bounceOutUp(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceOutUp;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include translateY(0);
+      }
+      20% {
+        opacity: 1;
+        @include translateY(20px);
+      }
+      100% {
+        opacity: 0;
+        @include translateY(-2000px);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutDown
+
+@mixin animate-bounceOutDown(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceOutDown;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include translateY(0);
+      }
+      20% {
+        opacity: 1;
+        @include translateY(-20px);
+      }
+      100% {
+        opacity: 0;
+        @include translateY(2000px);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutLeft
+
+@mixin animate-bounceOutLeft(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceOutLeft;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include translateX(0);
+      }
+      20% {
+        opacity: 1;
+        @include translateX(20px);
+      }
+      100% {
+        opacity: 0;
+        @include translateX(-2000px);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}
+
+// ---------------------------------------------------------------------------
+// bounceOutRight
+
+@mixin animate-bounceOutRight(
+  $class      : $default-animation-class-mode,
+  $keyframes  : $default-keyframes-output
+) {
+  $name: bounceOutRight;
+  @if $keyframes {
+    @include keyframes($name) {
+      0% {
+        @include translateX(0);
+      }
+      20% {
+        opacity: 1;
+        @include translateX(-20px);
+      }
+      100% {
+        opacity: 0;
+        @include translateX(2000px);
+      }
+    }
+  }
+  @include animation-class($name, $class) {}
+}

data/default-configuration/assets/stylesheets/animate/fade/_fadeIn.sass

@@ -0,0 +1,139 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import compass/css3/animation
+@import compass/css3/transform
+@import compass/css3/opacity
+
+// ---------------------------------------------------------------------------
+// fadeIn
+
+=animate-fadeIn($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeIn
+  @if $keyframes
+    +keyframes($name)
+      0%
+        opacity: 0
+      100%
+        opacity: 1
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInUp
+
+=animate-fadeInUp($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInUp
+  @if $keyframes
+    +keyframes($name)
+      0%
+        +translateY(20px)
+        opacity: 0
+      100%
+        +translateY(0)
+        opacity: 1
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInDown
+
+=animate-fadeInDown($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInDown
+  @if $keyframes
+    +keyframes($name)
+      0%
+        +translateY(-20px)
+        opacity: 0
+      100%
+        +translateY(0)
+        opacity: 1
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInRight
+
+=animate-fadeInRight($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInRight
+  @if $keyframes
+    +keyframes($name)
+      0%
+        +translateX(20px)
+        opacity: 0
+      100%
+        +translateX(0)
+        opacity: 1
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInLeft
+
+=animate-fadeInLeft($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInLeft
+  @if $keyframes
+    +keyframes($name)
+      0%
+        +translateX(-20px)
+        opacity: 0
+      100%
+        +translateX(0)
+        opacity: 1
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInUpBig
+
+=animate-fadeInUpBig($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInUpBig
+  @if $keyframes
+    +keyframes($name)
+      0%
+        +translateY(2000px)
+        opacity: 0
+      100%
+        +translateY(0)
+        opacity: 1
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInDownBig
+
+=animate-fadeInDownBig($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInDownBig
+  @if $keyframes
+    +keyframes($name)
+      0%
+        opacity: 0
+        +translateY(-2000px)
+      100%
+        opacity: 1
+        +translateY(0)
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInRightBig
+
+=animate-fadeInRightBig($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInRightBig
+  @if $keyframes
+    +keyframes($name)
+      0%
+        opacity: 0
+        +translateX(2000px)
+      100%
+        opacity: 1
+        +translateX(0)
+  +animation-class($name, $class)
+
+// ---------------------------------------------------------------------------
+// fadeInLeftBig
+
+=animate-fadeInLeftBig($class: $default-animation-class-mode, $keyframes: $default-keyframes-output)
+  $name: fadeInLeftBig
+  @if $keyframes
+    +keyframes($name)
+      0%
+        opacity: 0
+        +translateX(-2000px)
+      100%
+        opacity: 1
+        +translateX(0)
+  +animation-class($name, $class)