Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Clean up unused and speed up animations, fix sidebar transitions

Browse Source
This commit is contained in:
Tautvidas Sipavičius
2016-01-05 17:32:59 +02:00
parent c844488b0b
commit bbe2f69a7f
6 changed files with 12 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/src/newsletter_editor/components/blockTools.styl
View File

@@ -85,7 +85,6 @@ $layer-selector-width = 30px
max-width: 100% max-width: 100%
display: inline-block display: inline-block
opacity: 1 opacity: 1
animation-fade-in-and-scale-horizontally()
.mailpoet_delete_block_confirm, .mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel .mailpoet_delete_block_cancel

2
assets/css/src/newsletter_editor/components/dragAndDrop.styl
View File

@@ -52,7 +52,7 @@ $draggable-widget-z-index = 2
padding: 0 padding: 0
margin: 0 margin: 0
z-index: $draggable-widget-z-index z-index: $draggable-widget-z-index
animation-fade-in-and-scale-up() animation-fade-in()
.mailpoet_widget_icon .mailpoet_widget_icon
padding: 0 padding: 0

6
assets/css/src/newsletter_editor/components/sidebar.styl
View File

@@ -27,14 +27,14 @@ $widget-icon-width = 30px
&.closed .mailpoet_region_content &.closed .mailpoet_region_content
max-height: 0px max-height: 0px
overflow: hidden
margin-top: 0 margin-top: 0
.mailpoet_region_content .mailpoet_region_content
max-height: 100% max-height: 5000px
transition: max-height 350ms ease transition: max-height 400ms ease
padding: 0 20px padding: 0 20px
margin-top: 12px margin-top: 12px
overflow: hidden
&, .postbox &, .postbox
background-color: $sidebar-background-color background-color: $sidebar-background-color

5
assets/css/src/newsletter_editor/contentBlocks/base.styl
View File

@@ -30,8 +30,3 @@ $block-hover-highlight-color = $primary-active-color
.mailpoet_content .mailpoet_content
position: relative position: relative
.mailpoet_block_transition_in
animation-fade-in-and-scale-up()
.mailpoet_block_transition_out
animation-fade-out-and-scale-down()

37
assets/css/src/newsletter_editor/mixins/transitions.styl
View File

@@ -1,5 +1,5 @@
animation-slide-open-downwards() 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 max-height: 2000px
opacity: 1 opacity: 1
@@ -9,45 +9,22 @@ animation-slide-open-downwards()
overflow-y: hidden overflow-y: hidden
animation-background-color() 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-fade-in()
animation-name: fadeInAndScaleUp animation-name: fadeIn
animation-duration: 500ms animation-duration: 250ms
animation-fill-mode: forwards
animation-fade-out-and-scale-down()
animation-name: fadeOutAndScaleDown
animation-duration: 500ms
animation-fill-mode: forwards animation-fill-mode: forwards
animation-fade-in-and-scale-horizontally() 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% { 0% {
opacity: 0.3 opacity: 0.3
max-height: 0
overflow: hidden
} }
100% { 100% {
opacity: 1 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
} }
} }

2
views/newsletter/templates/components/sidebar/content.hbs
View File

@@ -1,5 +1,5 @@
<div class="handlediv" title="Click to toggle"><br></div> <div class="handlediv" title="Click to toggle"><br></div>
<h3><%= __('Content') %></h3> <h3><%= __('Content') %></h3>
<div class="mailpoet_region_content"> <div class="mailpoet_region_content clearfix">
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>