From 6737bfd38a0568d61c691a507303a65550ae23fc Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 10 Sep 2020 18:44:05 +0200
Subject: viewer: information panel scrollbar and collapse with animation

github: resolves #78
---
 viewer/src/assets/scss/theme.scss      |  4 ++++
 viewer/src/assets/scss/transition.scss | 13 +++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 viewer/src/assets/scss/transition.scss

(limited to 'viewer/src/assets/scss')

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0c351e5..c59eba9 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -76,3 +76,7 @@ $proposed-category-bgcolor: $palette-700;
 
 $layout-top: 45px;
 $layout-left: 250px;
+
+// Transitions
+
+$transition-flex-expand: 0.1s;
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
new file mode 100644
index 0000000..160f625
--- /dev/null
+++ b/viewer/src/assets/scss/transition.scss
@@ -0,0 +1,13 @@
+@import "~@/assets/scss/theme.scss";
+
+// === Transitions for Vue
+
+.flex-expand-enter-active, .flex-expand-leave-active {
+  transition: max-height $transition-flex-expand linear;
+}
+.flex-expand-enter, .flex-expand-leave-to {
+  max-height: 0%;
+}
+.flex-expand-enter-to, .flex-expand-leave {
+  max-height: 100%;
+}
-- 
cgit v1.2.3