From c144e122298cddcd504285c4e866ca632bee26c5 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 14:53:57 +0100
Subject: [PATCH] Added some transitions, animations and some more shadow
 variant to the styleguide

---
 styleguide/src/system/styles/shared.scss      |  2 +
 .../src/system/styles/shared/_animations.scss | 19 ++++++
 .../system/styles/shared/_transitions.scss    | 66 +++++++++++++++++++
 .../_examples/dark-purple/box-shadow.yml      |  2 +
 4 files changed, 89 insertions(+)
 create mode 100644 styleguide/src/system/styles/shared/_animations.scss
 create mode 100644 styleguide/src/system/styles/shared/_transitions.scss

diff --git a/styleguide/src/system/styles/shared.scss b/styleguide/src/system/styles/shared.scss
index e2da9cb8e..187740b1a 100644
--- a/styleguide/src/system/styles/shared.scss
+++ b/styleguide/src/system/styles/shared.scss
@@ -16,3 +16,5 @@
 @import "./shared/background";
 @import "./shared/spacing";
 @import "./shared/form";
+@import "./shared/transitions";
+@import "./shared/animations";
diff --git a/styleguide/src/system/styles/shared/_animations.scss b/styleguide/src/system/styles/shared/_animations.scss
new file mode 100644
index 000000000..c1987dcf5
--- /dev/null
+++ b/styleguide/src/system/styles/shared/_animations.scss
@@ -0,0 +1,19 @@
+@keyframes ds-animation-shake {
+  from, to {
+    transform: translate3d(0, 0, 0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translate3d(5px, 0, 0);
+  }
+}
+
+.ds-animated {
+  animation-duration: 0.8s;
+  animation-fill-mode: both;
+}
+.ds-animation-shake {
+  animation-name: ds-animation-shake;
+}
diff --git a/styleguide/src/system/styles/shared/_transitions.scss b/styleguide/src/system/styles/shared/_transitions.scss
new file mode 100644
index 000000000..805f031dd
--- /dev/null
+++ b/styleguide/src/system/styles/shared/_transitions.scss
@@ -0,0 +1,66 @@
+$easeOut: cubic-bezier(0.19, 1, 0.22, 1);
+
+// slide up ease
+.ds-transition-slide-up-enter-active {
+  transition: all 500ms $easeOut;
+  transition-delay: 20ms;
+  opacity: 1;
+  transform: translateY(0);
+}
+.ds-transition-slide-up-enter,
+.ds-transition-slide-up-leave-active {
+  opacity: 0;
+  box-shadow: none;
+  transform: translateY(15px);
+}
+
+// slide next / prev
+.ds-transition-slide-next-enter-active,
+.ds-transition-slide-prev-enter-active {
+  transition: transform 500ms $easeOut, opacity 500ms $easeOut;
+  transition-delay: 100ms;
+  opacity: 1;
+}
+.ds-transition-slide-next-enter,
+.ds-transition-slide-next-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.ds-transition-slide-prev-enter,
+.ds-transition-slide-prev-leave-active {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+.ds-transition-slide-next-leave-active,
+.ds-transition-slide-prev-leave-active {
+  display: none;
+}
+.ds-transition-slide-next-leave-active,
+.ds-transition-slide-prev-leave-active {
+  opacity: 0;
+  transform: translateX(-2px);
+  transition: transform 100ms $easeOut, opacity 100ms $easeOut;
+}
+
+.ds-transition-fade-delayed-leave-active {
+  transition: opacity 0ms;
+  transition-delay: 0ms;
+}
+.ds-transition-fade-delayed-enter-active {
+  transition: opacity 300ms ease-out;
+  transition-delay: 100ms;
+  opacity: 1;
+}
+.ds-transition-fade-delayed-enter,
+.ds-transition-fade-delayed-leave-active {
+  opacity: 0.1;
+}
+
+.ds-transition-fade-enter-active,
+.ds-transition-fade-leave-active {
+  transition: opacity 200ms;
+}
+.ds-transition-fade-enter,
+.ds-transition-fade-leave-to {
+  opacity: 0;
+}
diff --git a/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml b/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
index 59fb1e83d..de107d0ac 100644
--- a/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
+++ b/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
@@ -5,6 +5,8 @@
 #
 
 props:
+  - name: box-shadow-x-large
+    value: "0 40px 120px 0 rgba(0, 0, 0, .8)"
   - name: box-shadow-large
     value: "0 20px 60px 0 rgba(0, 0, 0, .8)"
   - name: box-shadow-base