doctype 5
html.no-js(lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml')
  head
    meta(charset='UTF-8')
    title Messages
    meta(content='initial-scale=1, width=device-width' name='viewport')
    sass:
      *, *:before, *:after
        -webkit-box-sizing: border-box
        -moz-box-sizing: border-box
        box-sizing: border-box
 
      body
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif
        margin: 0
 

      // mixins

      =animation($a)
        -webkit-animation: $a
        animation: $a

      =flexbox
        display: -webkit-box
        display: -moz-box
        display: -ms-flexbox
        display: -webkit-flex
        display: flex

      =keyframes-message-appear($name)
        @-webkit-keyframes #{$name}
          from
            -webkit-transform: translate3d(0,100%,0)
          to
            -webkit-transform: translate3d(0,0,0)

        @keyframes #{$name}
          from
            transform: translate3d(0,100%,0)
          to
            transform: translate3d(0,0,0)


      // variables

      $message-sent-imsg-bgcolor: #007aff
      $message-sent-sms-bgcolor: #00d449
      $message-sent-bgcolor: $message-sent-sms-bgcolor

      $message-rcvd-bgcolor: #e5e5ea

      $message-appear-animation-name: messageAppear

      // http://www.w3.org/TR/css-masking-1/
      // http://caniuse.com/#feat=css-masks
      $message-sent-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 55.75% 49.5% 43.25%
      $message-sent-last-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 49.5% 55.75% 49.5% 43.25%
      $message-rcvd-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 43.25% 49.5% 55.75%
      $message-rcvd-last-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 49.5% 43.25% 49.5% 55.75%


      // @extend-only placeholder selectors

      %messages-page
        background: #fff

      %messages-container
        +flexbox
        -webkit-box-orient: vertical
        -moz-box-orient: vertical
        -ms-flex-direction: column
        -webkit-flex-direction: column
        flex-direction: column

      %messages-date
        text-align: center
        font-weight: 500
        font-size: 11px
        line-height: 1
        margin: 10px 15px
        color: #8e8e93

      %messages-date-bold
        font-weight: 700

      %messages-time
        font-weight: 400

      %messages-time-bold
        font-weight: 500

      %message
        font-size: 17px
        line-height: 1.2
        margin: 1px 10px 0
        padding: 6px 16px 9px
        min-width: 48px
        min-height: 35px
        max-width: 60%

      %message-bold
        font-weight: 500

      %message-sent
        padding-right: 22px

        -ms-flex-item-align: end
        -webkit-align-self: flex-end
        align-self: flex-end

        background-color: $message-sent-bgcolor
        color: #fff

        -webkit-mask-box-image: $message-sent-mask-box
        // mask-box: $message-sent-mask-box

      %message-sent-last
        margin-bottom: 8px
        -webkit-mask-box-image: $message-sent-last-mask-box
        // mask-box: $message-sent-last-mask-box

      %message-rcvd
        padding-left: 22px

        -ms-flex-item-align: start
        -webkit-align-self: flex-start
        align-self: flex-start

        background-color: $message-rcvd-bgcolor
        color: #000

        -webkit-mask-box-image: $message-rcvd-mask-box
        // mask-box: $message-rcvd-mask-box

      %message-rcvd-last
        margin-bottom: 8px
        -webkit-mask-box-image: $message-rcvd-last-mask-box
        // mask-box: $message-rcvd-last-mask-box

      %message-has-img
        padding: 0
        & img
          display: block
          height: auto
          max-width: 100%

      %message-animation
        +animation($message-appear-animation-name 400ms)


      // @extend class/elements directives

      .messages-content
        @extend %messages-page

      .messages
        @extend %messages-container

      .messages-date
        @extend %messages-date
        & span
          @extend %messages-time

      .message
        @extend %message
        &.message-pic
          @extend %message-has-img

      .message-sent
        @extend %message-sent
        &.message-last
          @extend %message-sent-last

      .message-received
        @extend %message-rcvd
        &.message-last
          @extend %message-rcvd-last

      .message-appear
        @extend %message-animation

      +keyframes-message-appear($message-appear-animation-name)

body
  div.messages-content.page-content
    div.messages
      div.messages-date
        ' Sun, Feb 9,
        span 12:58 PM
      div.message.message-sent Hello
      div.message.message-sent.message-last How are you?
      div.message.message-received Hi
      div.message.message-received.message-last I am fine, thanks! And how are you?
      div.message.message-sent I am great!
      div.message.message-sent.message-last What do you think about my new logo?
      div.messages-date
        ' Wed, Feb 12,
        span 7:33 PM
      div.message.message-sent.message-last Hey? Any thoughts about my new logo?
      div.messages-date
        ' Thu, Feb 13,
        span 11:20 AM
      div.message.message-sent Alo...
      div.message.message-sent.message-last Are you there?
      div.message.message-received Hi, I am here
      div.message.message-received Your logo is great
      div.message.message-received.message-last Leave me alone!
      div.message.message-sent.message-last
        |:(
      div.message.message-received.message-last.message-pic
        img(alt='kitten' src='http://placekitten.com/600/800')
      div.message.message-sent.message-last.message-pic
        img(alt='kitten' src='http://placekitten.com/g/600/800')