CSS/SASS Speech Bubbles

index.haml

.quote
  %img.round-avatar{src: 'https://s3.amazonaws.com/uifaces/faces/twitter/stan/48.jpg'}
  .speech-bubble
    %p
      Stanford R.
      %span.time-ago
        2 minutes ago
    %blockquote
      "Join me on SaveUp and start being rewarded for saving money!"

.quote
  %img.round-avatar{src: 'https://s3.amazonaws.com/uifaces/faces/twitter/stan/48.jpg'}
  .speech-bubble.top
    %p
      Stanford R.
      %span.time-ago
        2 minutes ago
    %blockquote
      "Join me on SaveUp and start being rewarded for saving money!"

rCklz.markdown

rCklz

A Pen by nolastan on CodePen.

License.

style.scss

@import "compass";
$white: #FDFDFE;
$dark-gray: #2D4154;
$pastel-blue:     #E0E8ED;

$light-text: tint($dark-gray, 40%);
$medium-text: tint($dark-gray, 20%);

$light-border:    $pastel-blue;

@mixin speech-bubble($side: left, $offset-direction: top) {
  $offset: 16px;
  $size: 8px;
  $border-color: $light-border;
  $border-width: 2;

  border: 1px solid $border-color;
  border-radius: 6px;
  position: relative;
  margin-#{$side}: $size + ($border-width / 2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  margin-#{opposite-direction($side)}: 4px;
  margin-bottom: 4px;
  padding: 1ex 1em;
  background: $white;
  &:after, &:before {
    content: "";
    display: block;
    position: absolute;    
  }
  &:after {
    #{$offset-direction}: $offset;
  }
  &:before {
    #{$offset-direction}: $offset - $border-width;
  }
  &:after {
    border: $size solid transparent;
    border-#{opposite-direction($side)}: $size solid $white;
    #{$side}: -$size;
    border-#{$side}: none;
  }
  &:before {
    border: ($size + $border-width) solid transparent;
    border-#{opposite-direction($side)}: ($size + $border-width) solid $border-color;
    #{$side}: -($size + $border-width);
    border-#{$side}: none;
  }
}

@function opposite-direction($direction) {
  $opposite-direction: center;
 
  @if $direction == top {
    $opposite-direction: bottom;
  }
  @if $direction == bottom {
    $opposite-direction: top;
  }
  @if $direction == left {
    $opposite-direction: right;
  }
  @if $direction == right {
    $opposite-direction: left;
  }
 
  @return $opposite-direction;
}

body {
  font-family: Helvetica, sans-serif;
  line-height: 1.5;
}

.quote {
  display: inline-block;
  margin: 2ex 1em;
  p {
    font-weight: 500;
    .time-ago {
      font-size: 90%;
      color: $light-text;
    }
  }
  blockquote {
    color: $medium-text;
    margin: 0;
  }
  .round-avatar {
    border-radius: 50%;
    border: 1px solid $light-border;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    float: left;
    margin-right: 0.5em;
  }
  .speech-bubble {
    float: left;
    @include speech-bubble;
    &.top {
      @include speech-bubble(top, left);
      clear: both;
      margin-left: 0;
      margin-top: 2ex;
    }
    p {
      line-height: 1.3em;
      margin: 0;
    }
  }
}