Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Step 4.10: Add message style to chat stylesheet
  • Loading branch information
DAB0mB authored and Dotan Simha committed Nov 22, 2016
1 parent 780c0fc commit 6c0c8bc
Showing 1 changed file with 79 additions and 0 deletions.
79 changes: 79 additions & 0 deletions scss/chat.scss
Expand Up @@ -4,4 +4,83 @@
width: 100%;
height: 100%;
border-radius: 50%;
}

.chat {
background-image: url(/img/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(/img/message-other.png)
}

&.message-mine::before {
right: -11px;
background-image: url(/img/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;
}
}

0 comments on commit 6c0c8bc

Please sign in to comment.