Add animation to results

4 files changed, 31 insertions, 1 deletions

diff --git a/src/client/style/_component-help-box.scss b/src/client/style/_component-help-box.scss
new file mode 100644
index 0000000..e7457c2
--- /dev/null
+++ b/src/client/style/_component-help-box.scss
@@ -0,0 +1,23 @@
+.help-box {
+  position: relative;
+  margin-top: 32px;
+
+  .arrow {
+    position: absolute;
+    background-color: white;
+    width: 32px;
+    height: 32px;
+    top: -16px;
+    left: 48px;
+    transform: rotate(45deg);
+  }
+
+  .bubble {
+    position: relative;
+    background-color: white;
+    font-weight: bold;
+    margin: 16px;
+    padding: 16px;
+    border-radius: 4px;
+  }
+}
diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss
index cac1ae3..d819e6f 100644
--- a/src/client/style/_component-search.scss
+++ b/src/client/style/_component-search.scss
@@ -35,6 +35,11 @@
     }
   }
 
+  &__results {
+    transition: 0.1s ease-in-out min-height;
+    overflow: hidden;
+  }
+
   &__result {
     display: flex;
 
diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss
index 410a542..6fe7739 100644
--- a/src/client/style/_page-index.scss
+++ b/src/client/style/_page-index.scss
@@ -17,4 +17,4 @@
       margin-top: 64px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index 9521ab7..d2ad825 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -8,4 +8,6 @@ body {
 }
 
 @import "page-index";
+
 @import "component-search";
+@import "component-help-box";