feat: add ".is-paused" mui-series modifier to pause the queue

As `.is-paused` is not set at the animation definition, Safari handle it correctly and can play and pause the animation.

See #97 (comment)

docs/configuration.md

@@ -55,6 +55,7 @@ $motion-ui-settings: (
   hinge-and-fade: true,
   scale-and-fade: true,
   spin-and-fade: true,
+  pause-queue-class: 'is-paused',
   activate-queue-class: 'is-animating'
 );
 ```

docs/src/configuration.md

@@ -58,6 +58,7 @@ $motion-ui-settings: (
   hinge-and-fade: true,
   scale-and-fade: true,
   spin-and-fade: true,
+  pause-queue-class: 'is-paused',
   activate-queue-class: 'is-animating'
 );
 ```

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: 'is-paused',
   activate-queue-class: 'is-animating',
 ) !default;

src/util/_series.scss

@@ -46,4 +46,10 @@ $-mui-queue: ();
     animation-delay: $actual-delay;
     animation-duration: $duration;
   }
+
+  // Pause the animation
+  // This was the behavior before v1.3.0. See https://git.io/motion-ui-97
+  .#{map-get($motion-ui-settings, pause-queue-class)} & {
+    animation-play-state: paused;
+  }
 }