From ef9ddc9ae07df117bcd2117f710554441594e41e Mon Sep 17 00:00:00 2001
From: Callum Chaney <35102876+CallumChaney@users.noreply.github.com>
Date: Fri, 3 Jul 2020 16:10:35 +0100
Subject: [PATCH] Css for message overflow with a custom scrollbar (#26)

Css Styles for message container
---
 client/src/views/Messages.vue | 43 ++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/client/src/views/Messages.vue b/client/src/views/Messages.vue
index 1b29ab1..999ea22 100644
--- a/client/src/views/Messages.vue
+++ b/client/src/views/Messages.vue
@@ -2,7 +2,7 @@
   <div class="messages">
     <Navbar></Navbar>
     <main class="messages__main">
-      <div>
+      <div class="messages__main--body">
         <Message v-for="message in messages" :key="message._id" :message="message" />
       </div>
       <ChatBox class="messages__main--bottom" />
@@ -80,6 +80,47 @@ export default {
   position: relative;
 }
 
+.messages__main--body {
+  height: 100%;
+  overflow-y: scroll;
+  padding-bottom: 70px; /* this is the chatbox height probably wants to be more responsive */
+}
+
+.messages__main--body::-webkit-scrollbar {
+    width: 7px;
+}
+
+.messages__main--body::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: $bg-dark;
+}
+
+.messages__main--body::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: $primary;
+}
+
+.messages__main--body::before {
+  content: '';
+  position: absolute;
+  width: 100vw;
+  height: 1rem;
+  background: linear-gradient($bg 1%, rgba(1,1,1,0));
+  top: 0px;
+}
+
+
+.messages__main--body::after {
+  content: '';
+  position: absolute;
+  width: 100vw;
+  height: 50vh;
+  background: linear-gradient(rgba(1,1,1,0) 80%, $bg);
+  bottom: 0px;
+}
+
+
+
 .messages__main--bottom {
   position: absolute;
   bottom: 0px;