From bbe2f69a7fb0c2cb1ed2d727d034b29bd2b1ce27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tautvidas=20Sipavi=C4=8Dius?= <t.9b5as@gmail.com>
Date: Tue, 5 Jan 2016 17:32:59 +0200
Subject: [PATCH] Clean up unused and speed up animations, fix sidebar
 transitions

---
 .../components/blockTools.styl                |  1 -
 .../components/dragAndDrop.styl               |  2 +-
 .../newsletter_editor/components/sidebar.styl |  6 +--
 .../newsletter_editor/contentBlocks/base.styl |  5 ---
 .../newsletter_editor/mixins/transitions.styl | 37 ++++---------------
 .../templates/components/sidebar/content.hbs  |  2 +-
 6 files changed, 12 insertions(+), 41 deletions(-)

diff --git a/assets/css/src/newsletter_editor/components/blockTools.styl b/assets/css/src/newsletter_editor/components/blockTools.styl
index 1ac48caba4..069a6577c3 100644
--- a/assets/css/src/newsletter_editor/components/blockTools.styl
+++ b/assets/css/src/newsletter_editor/components/blockTools.styl
@@ -85,7 +85,6 @@ $layer-selector-width = 30px
     max-width: 100%
     display: inline-block
     opacity: 1
-    animation-fade-in-and-scale-horizontally()
 
   .mailpoet_delete_block_confirm,
   .mailpoet_delete_block_cancel
diff --git a/assets/css/src/newsletter_editor/components/dragAndDrop.styl b/assets/css/src/newsletter_editor/components/dragAndDrop.styl
index 69b74def55..f49254b96d 100644
--- a/assets/css/src/newsletter_editor/components/dragAndDrop.styl
+++ b/assets/css/src/newsletter_editor/components/dragAndDrop.styl
@@ -52,7 +52,7 @@ $draggable-widget-z-index = 2
   padding: 0
   margin: 0
   z-index: $draggable-widget-z-index
-  animation-fade-in-and-scale-up()
+  animation-fade-in()
 
   .mailpoet_widget_icon
     padding: 0
diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl
index 1de2cf27bb..13146178dc 100644
--- a/assets/css/src/newsletter_editor/components/sidebar.styl
+++ b/assets/css/src/newsletter_editor/components/sidebar.styl
@@ -27,14 +27,14 @@ $widget-icon-width = 30px
 
     &.closed .mailpoet_region_content
       max-height: 0px
-      overflow: hidden
       margin-top: 0
 
   .mailpoet_region_content
-    max-height: 100%
-    transition: max-height 350ms ease
+    max-height: 5000px
+    transition: max-height 400ms ease
     padding: 0 20px
     margin-top: 12px
+    overflow: hidden
 
   &, .postbox
     background-color: $sidebar-background-color
diff --git a/assets/css/src/newsletter_editor/contentBlocks/base.styl b/assets/css/src/newsletter_editor/contentBlocks/base.styl
index 79c9b9498e..2ead16df83 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/base.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/base.styl
@@ -30,8 +30,3 @@ $block-hover-highlight-color = $primary-active-color
 
 .mailpoet_content
   position: relative
-
-.mailpoet_block_transition_in
-  animation-fade-in-and-scale-up()
-.mailpoet_block_transition_out
-  animation-fade-out-and-scale-down()
diff --git a/assets/css/src/newsletter_editor/mixins/transitions.styl b/assets/css/src/newsletter_editor/mixins/transitions.styl
index bb5cfb6c62..374d0b8216 100644
--- a/assets/css/src/newsletter_editor/mixins/transitions.styl
+++ b/assets/css/src/newsletter_editor/mixins/transitions.styl
@@ -1,5 +1,5 @@
 animation-slide-open-downwards()
-  transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+  transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
   max-height: 2000px
   opacity: 1
 
@@ -9,45 +9,22 @@ animation-slide-open-downwards()
     overflow-y: hidden
 
 animation-background-color()
-  transition: background 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+  transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
 
-animation-fade-in-and-scale-up()
-  animation-name: fadeInAndScaleUp
-  animation-duration: 500ms
-  animation-fill-mode: forwards
-
-animation-fade-out-and-scale-down()
-  animation-name: fadeOutAndScaleDown
-  animation-duration: 500ms
+animation-fade-in()
+  animation-name: fadeIn
+  animation-duration: 250ms
   animation-fill-mode: forwards
 
 animation-fade-in-and-scale-horizontally()
-  transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+  transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
 
-@keyframes fadeInAndScaleUp {
+@keyframes fadeIn {
   0% {
     opacity: 0.3
-    max-height: 0
-    overflow: hidden
   }
 
   100% {
     opacity: 1
-    max-height: 5000px
-    overflow: hidden
-  }
-}
-
-@keyframes fadeOutAndScaleDown {
-  0% {
-    opacity: 1
-    max-height: 5000px
-    overflow: hidden
-  }
-
-  100% {
-    opacity: 0.3
-    max-height: 0
-    overflow: hidden
   }
 }
diff --git a/views/newsletter/templates/components/sidebar/content.hbs b/views/newsletter/templates/components/sidebar/content.hbs
index 5fef7b2b14..93a19a9040 100644
--- a/views/newsletter/templates/components/sidebar/content.hbs
+++ b/views/newsletter/templates/components/sidebar/content.hbs
@@ -1,5 +1,5 @@
 <div class="handlediv" title="Click to toggle"><br></div>
 <h3><%= __('Content') %></h3>
-<div class="mailpoet_region_content">
+<div class="mailpoet_region_content clearfix">
 </div>
 <div style="clear:both;"></div>