From f708c42ec630bcc403b8a9e8ca3275d858a5ac7b Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 11:52:22 -0400
Subject: [PATCH] Studio: revises anim syntax, adds utility anims, and revises
 rotate transitions for nav

---
 cms/static/sass/assets/_anims.scss        | 109 +++++++++++++++++++---
 cms/static/sass/elements/_navigation.scss |   5 +-
 2 files changed, 100 insertions(+), 14 deletions(-)

diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 6b214f03a1..772fa4b48e 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -1,6 +1,93 @@
 // studio animations & keyframes
 // ====================
 
+// fade in
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-fadeIn {
+  @include animation(fadeIn 0.25s linear 1);
+}
+
+
+// fade out
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 0.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-fadeOut {
+  @include animation(fadeOut 0.25s linear 1);
+}
+
+
+// ====================
+
+
+// rotate up
+@include keyframes(rotateUp) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(-90deg));
+  }
+
+  100% {
+    @include transform(rotate(-180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateUp {
+  @include animation(rotateUp 0.25s ease-in-out 1);
+}
+
+
+// rotate up
+@include keyframes(rotateDown) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(90deg));
+  }
+
+  100% {
+    @include transform(rotate(180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateDown {
+  @include animation(rotateDown 0.25s ease-in-out 1);
+}
+
+
 // rotate clockwise
 @include keyframes(rotateCW) {
   0% {
@@ -16,13 +103,12 @@
   }
 }
 
-// ====================
-
-// canned rotate clockwise animation - use if you want out of the box/non-customized anim
+// canned animation - use if you want out of the box/non-customized anim
 .anim-rotateCW {
-  @include animation(rotateCW 1.0s linear inifinte);
+  @include animation(rotateCW 1.0s linear infinite);
 }
 
+
 // rotate counter-clockwise
 @include keyframes(rotateCCW) {
   0% {
@@ -38,13 +124,15 @@
   }
 }
 
-// canned rotate counter-clockwise animation - use if you want out of the box/non-customized anim
+// canned  animation - use if you want out of the box/non-customized anim
 .anim-rotateCCW {
-  @include animation(rotateCCW 1.0s linear inifinte);
+  @include animation(rotateCCW 1.0s linear infinite);
 }
 
+
 // ====================
 
+
 // notifications slide up
 @include keyframes(notificationSlideUp) {
   0% {
@@ -60,8 +148,6 @@
   }
 }
 
-// ====================
-
 // notifications slide down
 @include keyframes(notificationSlideDown) {
   0% {
@@ -77,8 +163,10 @@
   }
 }
 
+
 // ====================
 
+
 // bounce in
 @include keyframes(bounceIn) {
   0% {
@@ -96,12 +184,11 @@
   }
 }
 
-// canned bounce in animation - use if you want out of the box/non-customized anim
+// canned animation - use if you want out of the box/non-customized anim
 .anim-bounceIn {
   @include animation(bounceIn 0.5s ease-in-out 1);
 }
 
-// ====================
 
 // bounce out
 @include keyframes(bounceOut) {
@@ -120,7 +207,7 @@
   }
 }
 
-// canned bounce in animation - use if you want out of the box/non-customized anim
+// canned animation - use if you want out of the box/non-customized anim
 .anim-bounceOut {
   @include animation(bounceOut 0.5s ease-in-out 1);
 }
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index e97c31b8ae..354dfbb5a5 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -33,7 +33,7 @@ nav {
     }
 
     .ui-toggle-dd {
-      @include transition(rotate .25s ease-in-out .25s);
+      @include transition(all 0.25s ease-in-out 0);
       margin-left: ($baseline/10);
       display: inline-block;
       vertical-align: middle;
@@ -44,7 +44,6 @@ nav {
 
       .ui-toggle-dd {
         @include transform(rotate(-180deg));
-        @include transform-origin(50% 50%);
       }
     }
   }
@@ -58,7 +57,7 @@ nav {
   }
 
   .wrapper-nav-sub {
-    @include transition (opacity 1.0s ease-in-out 0s);
+    @include transition (opacity 0.25s ease-in-out 0s);
     position: absolute;
     top: ($baseline*2.5);
     opacity: 0.0;