From 7623d4be5b70666c5de1ebca11f0da7dc5fc1522 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 20 Aug 2019 00:04:56 +0100
Subject: [PATCH] Made Search tile functionality, and filter component

---
 src/components/FilterTile.vue | 55 ++++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
index 041470f6..d184b821 100644
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@@ -1,11 +1,12 @@
 <template>
-    <div>
-        <el-input
-          placeholder="Start typing station name or code"
-          v-model="input"
-          v-on:input="userIsTypingSomething">
-        </el-input>
-    </div>
+  <section>
+    <label for="filter-tiles">Search</label>
+    <input
+      id="filter-tiles"
+      v-model="input"
+      placeholder="Start typing to filter tiles..."
+      v-on:input="userIsTypingSomething" />
+  </section>
 </template>
 
 <script>
@@ -18,14 +19,48 @@ export default {
     }
   },
   methods: {
-    userIsTypingSomething (stuff) {
-      this.$emit('user-is-searchin', stuff)
+    userIsTypingSomething () {
+      this.$emit('user-is-searchin', this.input)
     }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+  section {
+    display: flex;
+    align-items: center;
+    margin: 0.25em;
+    border-radius: 5px;
+    border: 1px solid transparent;
 
+    border: 1px solid #30556469;
+    -webkit-box-shadow: 1px 1px 2px #130f23;
+    box-shadow: 1px 1px 2px #130f23;
+  }
+  label {
+      display: inline;
+      background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
+      background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin: 0.5em;
+      display: inline;
+  }
+  input {
+    display: inline-block;
+    width: 200px;
+    padding: 0.5em;
+    margin: 0.5em;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: #607d8b33;
+    box-shadow: 1px 1px 2px #232323;
+    color: #1CA8DD;
+    font-family: 'Comfortaa', cursive;
+    &:focus {
+      background: #607d8b4a;
+    }
+  }
 </style>