From 0bddf7661d7ece709a18f2d167b928749638f318 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 24 Jan 2018 15:44:31 +0100
Subject: Add animation to results

---
 src/client/style/_component-help-box.scss | 23 +++++++++++++++++++++++
 src/client/style/_component-search.scss   |  5 +++++
 src/client/style/_page-index.scss         |  2 +-
 src/client/style/index.scss               |  2 ++
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/client/style/_component-help-box.scss

(limited to 'src/client/style')

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";
-- 
cgit v1.1