From efd6e387445e8e5628b7b59f8a15d7a4f5677f71 Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Fri, 4 May 2018 23:38:56 +0200
Subject: [PATCH] feat: add "pause" mui-series modifier to rollback to pause
 behavior

Allow to enforce the previous paused behavior with a "mui-pause" modifier on `mui-series` elements.

See https://github.com/zurb/motion-ui/issues/97
---
 src/_settings.scss    |  1 +
 src/util/_series.scss | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/_settings.scss b/src/_settings.scss
index a5cc9bf..e1fe7fe 100644
--- a/src/_settings.scss
+++ b/src/_settings.scss
@@ -57,5 +57,6 @@ $motion-ui-settings: (
   hinge-and-fade: true,
   scale-and-fade: true,
   spin-and-fade: true,
+  pause-queue-class: 'pause',
   activate-queue-class: 'is-animating',
 ) !default;
diff --git a/src/util/_series.scss b/src/util/_series.scss
index 2f58b0c..c37505b 100644
--- a/src/util/_series.scss
+++ b/src/util/_series.scss
@@ -1,10 +1,12 @@
 $-mui-queue: ();
 
-/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end.
+/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent.
+/// This is not supported by Safari. See https://git.io/motion-ui-97
+///
+/// @since v1.3.0
 /// @access private
-%animated-element {
+%paused-element {
   animation-play-state: paused;
-  animation-fill-mode: both;
 
   .#{map-get($motion-ui-settings, activate-queue-class)} & {
     animation-play-state: running;
@@ -56,7 +58,15 @@ $-mui-queue: ();
   animation-fill-mode: both;
 
   // By default, animation name is set to start the animation
-  .#{map-get($motion-ui-settings, activate-queue-class)} & {
+  .#{map-get($motion-ui-settings, activate-queue-class)} &,
+  // For pausable animation, animation name must be initialy set
+  .#{map-get($motion-ui-settings, pause-queue-class)} & {
     @include mui-animation($kf);
   }
+
+  // Pausable animation.
+  // This was the behavior before v1.3.0. See https://git.io/motion-ui-97
+  .#{map-get($motion-ui-settings, pause-queue-class)} & {
+    @extend %paused-element;
+  }
 }