groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/anim/_all-animations.scss

@@ -0,0 +1,37 @@
+// =============================================
+//             CSS Animations
+//          Last Updated:2013-8-25
+// =============================================
+
+@charset "UTF-8";
+$dismiss-animation: "fadeOut" !default;
+
+
+body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
+  -webkit-backface-visibility: hidden;
+}
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+.dismiss {
+  @extend .#{$dismiss-animation};
+}
+
+@import "bounce";
+@import "fade";
+@import "flash";
+@import "flip";
+@import "hinge";
+@import "lightspeed";
+@import "pulse";
+@import "roll";
+@import "rotate";
+@import "shake";
+@import "spin";
+@import "swing";
+@import "tada";
+@import "wiggle";
+@import "wobble";

data/app/assets/stylesheets/groundworkcss/anim/_bounce.scss

@@ -0,0 +1,253 @@
+$bounce-animations: true !default;
+
+
+@if $bounce-animations {
+
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+    40% {transform: translateY(-30px);}
+    60% {transform: translateY(-15px);}
+  }
+
+  .bounce {
+    animation-name: bounce;
+  }
+
+  @keyframes bounceIn {
+    0% {
+      opacity: 0;
+      transform: scale(.3);
+    }
+    
+    50% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+    
+    70% {
+      transform: scale(.9);
+    }
+    
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  .bounceIn {
+    animation-name: bounceIn;
+  }
+
+  @keyframes bounceInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(2000px);
+    }
+    
+    60% {
+      opacity: 1;
+      transform: translateY(-30px);
+    }
+    
+    80% {
+      transform: translateY(10px);
+    }
+    
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  .bounceInUp {
+    animation-name: bounceInUp;
+  }
+
+  @keyframes bounceInDown {
+    0% {
+      opacity: 0;
+      transform: translateY(-2000px);
+    }
+    
+    60% {
+      opacity: 1;
+      transform: translateY(30px);
+    }
+    
+    80% {
+      transform: translateY(-10px);
+    }
+    
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  .bounceInDown {
+    animation-name: bounceInDown;
+  }
+
+  @keyframes bounceInLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-2000px);
+    }
+    
+    60% {
+      opacity: 1;
+      transform: translateX(30px);
+    }
+    
+    80% {
+      transform: translateX(-10px);
+    }
+    
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .bounceInLeft {
+    animation-name: bounceInLeft;
+  }
+
+  @keyframes bounceInRight {
+    0% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+    
+    60% {
+      opacity: 1;
+      transform: translateX(-30px);
+    }
+    
+    80% {
+      transform: translateX(10px);
+    }
+    
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .bounceInRight {
+    animation-name: bounceInRight;
+  }
+
+  @keyframes bounceOut {
+    0% {
+      transform: scale(1);
+    }
+    
+    25% {
+      transform: scale(.95);
+    }
+    
+    50% {
+      opacity: 1;
+      transform: scale(1.1);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: scale(.3);
+    }
+  }
+
+  .bounceOut {
+    animation-name: bounceOut;
+  }
+
+  @keyframes bounceOutUp {
+    0% {
+      transform: translateY(0);
+    }
+    
+    20% {
+      opacity: 1;
+      transform: translateY(20px);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateY(-2000px);
+    }
+  }
+
+  .bounceOutUp {
+    animation-name: bounceOutUp;
+  }
+
+  @keyframes bounceOutDown {
+    0% {
+      transform: translateY(0);
+    }
+    
+    20% {
+      opacity: 1;
+      transform: translateY(-20px);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateY(2000px);
+    }
+  }
+
+  .bounceOutDown {
+    animation-name: bounceOutDown;
+  }
+
+  @keyframes bounceOutLeft {
+    0% {
+      transform: translateX(0);
+    }
+    
+    20% {
+      opacity: 1;
+      transform: translateX(20px);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateX(-2000px);
+    }
+  }
+
+  .bounceOutLeft {
+    animation-name: bounceOutLeft;
+  }
+
+  @keyframes bounceOutRight {
+    0% {
+      transform: translateX(0);
+    }
+    
+    20% {
+      opacity: 1;
+      transform: translateX(-20px);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+  }
+
+  .bounceOutRight {
+    animation-name: bounceOutRight;
+  }
+
+  @keyframes rotateIn {
+    0% {
+      transform-origin: center center;
+      transform: rotate(-200deg);
+      opacity: 0;
+    }
+    
+    100% {
+      transform-origin: center center;
+      transform: rotate(0);
+      opacity: 1;
+    }
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_fade.scss

@@ -0,0 +1,279 @@
+$fade-animations: true !default;
+
+
+@if $fade-animations {
+
+  @keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+
+  .fadeIn {
+    animation-name: fadeIn;
+  }
+
+  @keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fadeInUp {
+    animation-name: fadeInUp;
+  }
+
+  @keyframes fadeInDown {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fadeInDown {
+    animation-name: fadeInDown;
+  }
+
+  @keyframes fadeInLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .fadeInLeft {
+    animation-name: fadeInLeft;
+  }
+
+  @keyframes fadeInRight {
+    0% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .fadeInRight {
+    animation-name: fadeInRight;
+  }
+
+  @keyframes fadeInUpBig {
+    0% {
+      opacity: 0;
+      transform: translateY(2000px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fadeInUpBig {
+    animation-name: fadeInUpBig;
+  }
+
+  @keyframes fadeInDownBig {
+    0% {
+      opacity: 0;
+      transform: translateY(-2000px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fadeInDownBig {
+    animation-name: fadeInDownBig;
+  }
+
+  @keyframes fadeInLeftBig {
+    0% {
+      opacity: 0;
+      transform: translateX(-2000px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .fadeInLeftBig {
+    animation-name: fadeInLeftBig;
+  }
+
+  @keyframes fadeInRightBig {
+    0% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+    
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .fadeInRightBig {
+    animation-name: fadeInRightBig;
+  }
+
+  @keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+  }
+
+  .fadeOut {
+    animation-name: fadeOut;
+  }
+
+  @keyframes fadeOutUp {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+  }
+
+  .fadeOutUp {
+    animation-name: fadeOutUp;
+  }
+
+  @keyframes fadeOutDown {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+  }
+
+  .fadeOutDown {
+    animation-name: fadeOutDown;
+  }
+
+  @keyframes fadeOutLeft {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+  }
+
+  .fadeOutLeft {
+    animation-name: fadeOutLeft;
+  }
+
+  @keyframes fadeOutRight {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+  }
+
+  .fadeOutRight {
+    animation-name: fadeOutRight;
+  }
+
+  @keyframes fadeOutUpBig {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateY(-2000px);
+    }
+  }
+
+  .fadeOutUpBig {
+    animation-name: fadeOutUpBig;
+  }
+
+  @keyframes fadeOutDownBig {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateY(2000px);
+    }
+  }
+
+  .fadeOutDownBig {
+    animation-name: fadeOutDownBig;
+  }
+
+  @keyframes fadeOutLeftBig {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateX(-2000px);
+    }
+  }
+
+  .fadeOutLeftBig {
+    animation-name: fadeOutLeftBig;
+  }
+
+  @keyframes fadeOutRightBig {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    
+    100% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+  }
+
+  .fadeOutRightBig {
+    animation-name: fadeOutRightBig;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_flash.scss

@@ -0,0 +1,14 @@
+$flash-animations: true !default;
+
+
+@if $flash-animations {
+
+  @keyframes flash {
+    0%, 50%, 100% {opacity: 1;}
+    25%, 75% {opacity: 0;}
+  }
+
+  .flash {
+    animation-name: flash;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_flip.scss

@@ -0,0 +1,115 @@
+$flip-animations: true !default;
+
+
+@if $flip-animations {
+
+  @keyframes flip {
+    0% {
+      transform: perspective(400px) rotateY(0);
+      animation-timing-function: ease-out;
+    }
+    40% {
+      transform: perspective(400px) translateZ(150px) rotateY(170deg);
+      animation-timing-function: ease-out;
+    }
+    50% {
+      transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+      animation-timing-function: ease-in;
+    }
+    80% {
+      transform: perspective(400px) rotateY(360deg) scale(.95);
+      animation-timing-function: ease-in;
+    }
+    100% {
+      transform: perspective(400px) scale(1);
+      animation-timing-function: ease-in;
+    }
+  }
+
+  .flip {
+    backface-visibility: visible !important;
+    animation-name: flip;
+  }
+
+  @keyframes flipInX {
+    0% {
+      transform: perspective(400px) rotateX(90deg);
+      opacity: 0;
+    }
+    
+    40% {
+      transform: perspective(400px) rotateX(-10deg);
+    }
+    
+    70% {
+      transform: perspective(400px) rotateX(10deg);
+    }
+    
+    100% {
+      transform: perspective(400px) rotateX(0deg);
+      opacity: 1;
+    }
+  }
+
+  .flipInX {
+    backface-visibility: visible !important;
+    animation-name: flipInX;
+  }
+
+  @keyframes flipOutX {
+    0% {
+      transform: perspective(400px) rotateX(0deg);
+      opacity: 1;
+    }
+    100% {
+      transform: perspective(400px) rotateX(90deg);
+      opacity: 0;
+    }
+  }
+
+  .flipOutX {
+    animation-name: flipOutX;
+    backface-visibility: visible !important;
+  }
+
+  @keyframes flipInY {
+    0% {
+      transform: perspective(400px) rotateY(90deg);
+      opacity: 0;
+    }
+    
+    40% {
+      transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+      transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+      transform: perspective(400px) rotateY(0deg);
+      opacity: 1;
+    }
+  }
+
+  .flipInY {
+    backface-visibility: visible !important;
+    animation-name: flipInY;
+  }
+
+  @keyframes flipOutY {
+    0% {
+      transform: perspective(400px) rotateY(0deg);
+      opacity: 1;
+    }
+    100% {
+      transform: perspective(400px) rotateY(90deg);
+      opacity: 0;
+    }
+  }
+
+  .flipOutY {
+    backface-visibility: visible !important;
+    animation-name: flipOutY;
+  }
+}

data/app/assets/stylesheets/groundworkcss/anim/_hinge.scss

@@ -0,0 +1,21 @@
+$hinge-animations: true !default;
+
+
+@if $hinge-animations {
+
+  @keyframes hinge {
+    0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
+    20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
+    40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
+    80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
+    100% { transform: translateY(700px); opacity: 0; }
+  }
+
+  .hinge {
+    animation-name: hinge;
+  }
+
+  .animated.hinge {
+    animation-duration: 2s;
+  }
+}