2 files changed, 93 insertions, 0 deletions
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 4755c3c85f..95e601a060 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -3,8 +3,10 @@
 @import 'fonts.css';
 @import 'global.css';
 @import 'buttons.css';
+@import 'transitions.css';
 
 /* app */
+@import '../../components/WindowChrome.css';
 @import '../../components/CustomScrollbars.css';
 @import '../../components/Login.css';
 @import '../../components/Connect.css';
diff --git a/app/assets/css/transitions.css b/app/assets/css/transitions.css
new file mode 100644
index 0000000000..239be5b63b
--- /dev/null
+++ b/app/assets/css/transitions.css
@@ -0,0 +1,91 @@
+/**
+ * CSS rules for transitions using React-router and CSSTransitionGroup
+ */
+
+div[class*="-transition-leave"], div[class*="-transition-enter"] {
+  /* keep animated .layout divs pinned to viewport boundaries */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+
+  /* disable UI interaction during transitions */
+  pointer-events: none;
+}
+
+.transition-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* New view slides bottom top */
+
+.slide-up-transition-leave { z-index: 0; }
+.slide-up-transition-enter {
+  transform: translateY(100vh);
+  z-index: 1;
+}
+
+.slide-up-transition-enter.slide-up-transition-enter-active {
+  transform: translateY(0);
+  transition: transform 450ms ease;
+}
+
+/* New view slides top bottom */
+
+.slide-down-transition-enter { z-index: 0; }
+.slide-down-transition-leave {
+  transform: translateY(0);
+  z-index: 1;
+}
+
+.slide-down-transition-leave.slide-down-transition-leave-active {
+  transform: translateY(100vh);
+  transition: transform 450ms ease;
+}
+
+/* New view slids right to left */
+
+.push-transition-leave {
+  transform: translateX(0vw);
+  z-index: 0;
+}
+
+.push-transition-enter {
+  transform: translateX(100vw);
+  z-index: 1;
+}
+
+.push-transition-leave.push-transition-leave-active {
+  transform: translateX(-50vw);
+  transition: transform 450ms ease;
+}
+
+.push-transition-enter.push-transition-enter-active {
+  transform: translateX(0);
+  transition: transform 450ms ease;
+}
+
+/* New view slides left to right */
+
+.pop-transition-enter {
+  transform: translateX(-50vw);
+  z-index: 0;
+}
+
+.pop-transition-leave {
+  transform: translateX(0);
+  z-index: 1;
+}
+
+.pop-transition-enter.pop-transition-enter-active {
+  transform: translateX(0vw);
+  transition: transform 450ms ease;
+}
+
+.pop-transition-leave.pop-transition-leave-active {
+  transform: translateX(100vw);
+  transition: transform 450ms ease;
+}
+\ No newline at end of file