From 2cd3e68d1c24133e2b41f027dfbc87fe2e7cdb83 Mon Sep 17 00:00:00 2001
From: DAB0mB <emanor6@gmail.com>
Date: Sat, 2 Apr 2016 17:12:43 +0300
Subject: [PATCH] Step 3.9: Add message style to chat stylesheet

---
 client/styles/chat.scss | 79 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/client/styles/chat.scss b/client/styles/chat.scss
index 2637ff1..aefef95 100644
--- a/client/styles/chat.scss
+++ b/client/styles/chat.scss
@@ -4,4 +4,83 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
+}
+
+.chat {
+  background-image: url(/chat-background.jpg);
+  background-color: #E0DAD6;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.message-list {
+  margin-top: 12px;
+  padding: 0 5%;
+}
+
+.message-wrapper {
+  margin-bottom: 9px;
+
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+.message {
+  display: inline-block;
+  position: relative;
+  max-width: 236px;
+  border-radius: 7px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+
+  &.message-mine {
+    float: right;
+    background-color: #DCF8C6;
+  }
+
+  &.message-other {
+    float: left;
+    background-color: #FFF;
+  }
+
+  &.message-other::before, &.message-mine::before, {
+    content: "";
+    position: absolute;
+    bottom: 3px;
+    width: 12px;
+    height: 19px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  &.message-other::before {
+    left: -11px;
+    background-image: url(/message-other.png)
+  }
+
+  &.message-mine::before {
+    right: -11px;
+    background-image: url(/message-mine.png)
+  }
+
+  .message-text {
+    padding: 5px 7px;
+    word-wrap: break-word;
+
+    &::after {
+      content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
+      display: inline;
+    }
+  }
+
+  .message-timestamp {
+    position: absolute;
+    bottom: 2px;
+    right: 7px;
+    color: gray;
+    font-size: 12px;
+  }
 }
\ No newline at end of file