A Pen by Secret Sam.

CSS-Flexbox:-Google-Hangouts.markdown

CSS Flexbox: Google Hangouts

Imitation of Google Hangouts chat log layout, using only CSS. Had to lean on Flexbox here, so it needs -webkit prefixes in Safari.

I briefly discuss it in this blog post: http://jokeyrhy.me/blog/2014/04/23/1/imitating-google-hangouts-with-css-flexbox.html

See the Facebook Messenger version here: http://codepen.io/jokeyrhyme/pen/dAwet

Forked from Ron's Pen CSS Flexbox: Google Hangouts.

A Pen by Secret Sam on CodePen.

License.

index.html

<div class="arrow"></div>
<ul class="ChatLog">
  <li class="ChatLog__entry">
    <img class="ChatLog__avatar" src="//placekitten.com/g/50/50" />
    <p class="ChatLog__message">
      Hello!
      <time class="ChatLog__timestamp">6 minutes ago</time>
    </p>
  </li>
  <li class="ChatLog__entry">
    <img class="ChatLog__avatar" src="//placekitten.com/g/50/50" />
    <p class="ChatLog__message">
      What is going on here?
      <time class="ChatLog__timestamp">5 minutes ago</time>
    </p>
  </li>
  <li class="ChatLog__entry ChatLog__entry_mine">
    <img class="ChatLog__avatar" src="//placekitten.com/56/56" />
    <p class="ChatLog__message">
      I have no idea.
      <time class="ChatLog__timestamp">4 minutes ago</time>
    </p>
  </li>
  <li class="ChatLog__entry">
    <img class="ChatLog__avatar" src="//placekitten.com/g/50/50" />
    <p class="ChatLog__message">
      I have a neat idea. Maybe I should explain it to you in detail?
      <time class="ChatLog__timestamp">3 minutes ago</time>
    </p>
  </li>
  <li class="ChatLog__entry ChatLog__entry_mine">
    <img class="ChatLog__avatar" src="//placekitten.com/50/50" />
    <p class="ChatLog__message">
      YOUR AD HERE?! YEAH SHURE
      <time class="ChatLog__timestamp">2 minutes ago</time>
    </p>
  </li>
</ul>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbb;
}

ul.ChatLog {
  list-style: none;
}

.ChatLog {
  max-width: 20em;
  margin: 0 auto;
}
.ChatLog .ChatLog__entry {
  margin: .5em;
}

.ChatLog__entry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.ChatLog__entry.ChatLog__entry_mine {
  flex-direction: row-reverse;  
  align-items: flex-end;
}

.ChatLog__avatar {
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 1;
}

.ChatLog__entry.ChatLog__entry_mine .ChatLog__avatar {
  box-shadow: 2px 2px 0px #aaa;   
}

.ChatLog__entry .ChatLog__message {
  position: relative;
}

.ChatLog__entry .ChatLog__message::before {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: -12px;
  height: 0;
  content: '';
  border: 6px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  z-index: 2;
}

.ChatLog__entry.ChatLog__entry_mine .ChatLog__message::before {
  top: auto;
  right: -12px;
  bottom: 0;
  left: auto;
  border: 6px solid transparent;
  border-bottom-color: #fff;
  border-left-color: #fff;
}

.ChatLog__message {
  background-color: #fff;
  padding: .5em;
  box-shadow: 2px 2px 0px #aaa; 
}

.ChatLog__message .ChatLog__timestamp {
  display: block;
  margin: .2em;
  font-size: 80%;
  color: #444;
}