From f555fa186d714727cd8612d3da4a6ab66ba7a394 Mon Sep 17 00:00:00 2001
From: Andrew Buss <abuss@ucsd.edu>
Date: Tue, 26 May 2015 14:24:06 -0700
Subject: [PATCH] animations for adding a card

---
 styles/flashy.css | 66 +++++++++++++++++++++++--------------------------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/styles/flashy.css b/styles/flashy.css
index 42c91a0..1e98779 100644
--- a/styles/flashy.css
+++ b/styles/flashy.css
@@ -147,21 +147,22 @@
 }
 
 /* Card Colors */
-.card.flashy.cardcolor-blue {
-	background-color: (119, 158, 203, 0.5) !important; 
+.card.flashy.cardcolor-blue div {
+    background-color: rgba(119, 158, 203, 0.5) !important;
 }
 
-.cardcolor-red {
-	background-color: rgba(255, 105, 97, 0.5) !important;
+.cardcolor-red div {
+    background-color: rgba(255, 105, 97, 0.5) !important;
 }
 
-.cardcolor-green {
-	background-color: rgba(119, 190, 119, 0.5) !important;
+.cardcolor-green div {
+    background-color: rgba(119, 190, 119, 0.5) !important;
 }
 
-.cardcolor-yellow {
-	background-color: rgba(253, 253, 150, 0.5) !important;
+.cardcolor-yellow div {
+    background-color: rgba(253, 253, 150, 0.5) !important;
 }
+
 /* Card Colors END */
 
 .modal.bottom-sheet {
@@ -325,30 +326,26 @@ md-content.md-default-theme {
 
 /* Animation CSS, https://docs.angularjs.org/guide/animations */
 .repeated-card.ng-enter,
+.repeated-card.ng-enter > flashcard > .card,
 .repeated-card.ng-leave,
-.repeated-card.ng-move {
+.repeated-card.ng-move,
+.repeated-card.ng-move > flashcard > .card {
     -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
     -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
     -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-    transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
+    transition: 1s all cubic-bezier(0, 0, 0.6, 1);
     position: relative;
 }
 
-.repeated-card.ng-enter {
-    top: -150px;
-	opacity:0;
-}
-
-.repeated-card.ng-enter.ng-enter-active {
-    top: 0;
-}
-
-.repeated-card.ng-enter + div {
-    top: -150px;
+.repeated-card.ng-enter > flashcard > .card {
+    z-index: 1;
+    top: -236px;
+    margin-bottom: -230px;
 }
 
-.repeated-card.ng-enter.ng-enter-active + div {
-    top: 0;
+.repeated-card.ng-enter.ng-enter-active > flashcard > .card {
+    top: 0px;
+    margin-bottom: 6px;
 }
 
 .repeated-card.ng-leave {
@@ -357,24 +354,17 @@ md-content.md-default-theme {
 }
 
 .repeated-card.ng-leave.ng-leave-active {
-	top:-60px;
-	opacity:0;
-}
-
-.repeated-card.ng-move {
-    top: 150px;
-}
-
-.repeated-card.ng-move.ng-move-active {
-    top: 0;
+    top: -60px;
+    opacity: 0;
 }
 
-.repeated-card.ng-move + div {
-    top: -150px;
-}
+/*.repeated-card.ng-move + div div {*/
+/*background-color:blue;*/
+/*top: -150px;*/
+/*}*/
 
-.repeated-card.ng-move.ng-move-active + div {
-    top: 0;
+/*.repeated-card.ng-move.ng-move-active + div div{*/
+/*top: 0;*/
 }
 
 /* Animation CSS END */
-- 
1.9.1