@pi0/framework7/src/components/messages/messages-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  @import (multiple) '../../less/vars-ios.less';
  .messages-content,
  .messages {
    background: #fff;
  }
  .messages-title {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 10px;
    &:last-child {
      margin-bottom: 10px;
    }
    b {
      font-weight: 600;
    }
  }
  .message {
    margin-top: 10px;
    &:last-child {
      margin-bottom: 10px;
    }
  }
  .message-avatar {
    width: 29px;
    height: 29px;
  }
  .message-header, .message-footer, .message-name {
    color: #8e8e93;
    b {
      font-weight: 600;
    }
  }

  .message-header, .message-name {
    margin-bottom: 3px;
  }
  .message-footer {
    margin-top: 3px;
  }

  .message-bubble {
    font-size: 17px;
    line-height: 1.2;
    border-radius: 16px;
    padding: 6px 16px 9px;
    min-width: 48px;
    min-height: 35px;
  }
  .message-image {
    margin: 6px -16px;
    &:first-child {
      margin-top: -6px;
      img {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
    }
    &:last-child {
      margin-bottom: -9px;
      img {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
      }
    }
  }
  .message-text-header {
    margin-bottom: 3px;
  }
  .message-text-footer {
    margin-top: 3px;
  }
  .message-received {
    margin-left: 10px;
    .message-header, .message-footer, .message-name {
      margin-left: 16px;
    }
    .message-text-header, .message-text-footer {
      opacity: 0.5;
    }
    .message-bubble {
      color: @messageReceivedColor;
      background: @messageReceivedBg;
      padding-left: 22px;
      -webkit-mask-box-image: 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>") 50% 42% 46% 56%;
    }
    .message-image {
      margin-left: -22px;
    }
    &.message-tail:not(.message-typing) .message-bubble {
      border-radius: 16px 16px 16px 0;
      -webkit-mask-box-image: 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>") 50% 42% 46% 56%;
      .message-image:last-child img {
        border-bottom-left-radius: 0px;
      }
    }
  }
  .message-sent {
    margin-right: 10px;
    .message-header, .message-footer, .message-name {
      margin-right: 16px;
    }
    .message-text-header, .message-text-footer {
      opacity: 0.8;
    }
    .message-bubble {
      background: @messageSentBg;
      color: @messageSentColor;
      padding-right: 22px;
      -webkit-mask-box-image: 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>") 50% 56% 46% 42%;
    }
    .message-image {
      margin-right: -22px;
    }
    &.message-tail .message-bubble {
      border-radius: 16px 16px 0 16px;
      -webkit-mask-box-image: 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>") 50% 56% 46% 42%;
      .message-image:last-child img {
        border-bottom-right-radius: 0px;
      }
    }
  }

  // Rules
  .message + .message:not(.message-first) {
    margin-top: 1px;
  }

  // Typing
  .message-received.message-typing {
    .message-content {
      &:after, &:before {
        content: '';
        position: absolute;
        background: @messageReceivedBg;
        border-radius: 50%;
      }
      &:after {
        width: 11px;
        height: 11px;
        left: 4px;
        bottom: 0px;
      }
      &:before {
        width: 6px;
        height: 6px;
        left: -1px;
        bottom: -4px;
      }
    }
  }
  // Typing
  .message-typing-indicator {
    > div {
      width: 9px;
      height: 9px;
      opacity: 0.35;
      + div {
        .ltr({
          margin-left: 4px;
        });
        .rtl({
          margin-right: 4px;
        });
      }
    }
    > div:nth-child(1) {
      animation: ios-message-typing-indicator 900ms infinite;
    }
    > div:nth-child(2) {
      animation: ios-message-typing-indicator 900ms 150ms infinite;
    }
    > div:nth-child(3) {
      animation: ios-message-typing-indicator 900ms 300ms infinite;
    }
  }
}

@keyframes ios-message-typing-indicator {
  0% {
    opacity: 0.35;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.2;
  }
}