From c6c8d842daf68a19b3d29b8529273ebaa20a019b Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Wed, 10 Mar 2021 17:26:21 +0100
Subject: [PATCH] feat: animate search options entrance

---
 .../javascripts/views/notes/notes-view.pug      |  2 +-
 app/assets/stylesheets/_ui.scss                 | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/views/notes/notes-view.pug b/app/assets/javascripts/views/notes/notes-view.pug
index 7433890f7..ea3d8feec 100644
--- a/app/assets/javascripts/views/notes/notes-view.pug
+++ b/app/assets/javascripts/views/notes/notes-view.pug
@@ -26,7 +26,7 @@
             ng-click='self.clearFilterText();',
             ng-show='self.state.noteFilter.text'
             ) ✕
-        label.sk-panel-row.justify-left.mt-2(
+        label.sk-panel-row.justify-left.mt-2.animate-slide-in-top(
           ng-if='self.state.searchIsFocused || self.state.searchOptionsAreFocused || self.state.authorizingSearchOptions'
           style="padding-bottom: 0"
         )
diff --git a/app/assets/stylesheets/_ui.scss b/app/assets/stylesheets/_ui.scss
index dac4ccaf5..2b44ab40f 100644
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -97,6 +97,23 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   justify-self: flex-start;
 }
 
+.animate-slide-in-top {
+  animation: slide-in-top .1s ease-out;
+}
+
+@keyframes slide-in-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-40%);
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
 .m-0 {
   margin: 0;
 }