Added Toast Styling

frontend/components/Toast.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="toast-container">
+		<div class="toast">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="sass">
+	.toast-container {
+		display: block;
+    	position: fixed;
+    	z-index: 10000;
+	}
+
+	.toast {
+		border-radius: 2px;
+	    top: 0;
+	    width: auto;
+	    clear: both;
+	    margin-top: 10px;
+	    position: relative;
+	    max-width: 100%;
+	    height: auto;
+	    min-height: 48px;
+	    line-height: 1.5em;
+	    word-break: break-all;
+	    background-color: #323232;
+	    padding: 10px 25px;
+	    font-size: 1.1rem;
+	    font-weight: 300;
+	    color: #fff;
+	    display: flex;
+	    align-items: center;
+	    justify-content: space-between;
+		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+	}
+</style>

frontend/components/pages/Home.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="app">
 		<main-header></main-header>
+		<toast>
+			Test
+		</toast>
 		<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register-modal">
 			<div class="modal-dialog" role="document">
 				<div class="modal-content">
@@ -64,9 +67,10 @@
 <script>
 	import MainHeader from '../MainHeader.vue'
 	import MainFooter from '../MainFooter.vue'
+	import Toast from '../Toast.vue';
 
 	export default {
-		components: { MainHeader, MainFooter }
+		components: { MainHeader, MainFooter, Toast }
 	}
 </script>