@salaxy/ng1/less/salaxy-component/messages.less

AngularJS libraries for Salaxy platform (Palkkaus.fi)

.salaxy-component.salaxy-message-thread {
  salaxy-avatar { 
    font-size: 52px;
  }
  .messages-container {
    textarea {
      border-radius: 10px;
      border-color: @brand-primary;
      padding: 10px;
      border-width: 2px;
      width: 100%;
      height: 100px;
    }
    .padding {
      margin-left: 66px;
      margin-right: 66px;
    }
  } 

  .message-bubble {
    display: inline-block;
    margin: 2px 0 2px;
    border: 2px solid;
    max-width: ~"calc(100% - 190px)";
    min-width: 320px;
    position: relative;
    padding: 15px 15px 30px 15px;
    margin: 0.1em 0 1.5em;
    color:@text-color;
    &.unread {
      border-width: 4px;
    }
    &.in-edit {
      min-width: 64%;
    }
    &.right {
      background-color:fade(@brand-info, 5%);
      border-color: @brand-info;
      margin-right:10px;
      text-align: left;
      border-radius: 10px 0px 10px 10px;
    }
    &.left{
      background-color:fade(@brand-primary, 5%);
      border-color: @brand-primary;
      border-radius: 0px 10px 10px 10px;
      margin-left:10px;
    }
    &.email{
      border-color: #ddd;
      border-width: 2px;
      border-radius:10px;
      .message-content{
        color:#666;
      }
      .updated-at{
          &:before{
          font-family: 'fontAwesome';
          content: "\f003";
          position: absolute;
          margin-left: -17px;
          font-size: 11px;
          margin-top: 1px;
          color: #666;
        }
      }
    }
    .message-content {
      white-space: pre-wrap;
    }
    .updated-at {
      position: absolute;
      right: 10px;
      bottom: 2px;
      font-size: 0.85em;
      text-align: right;
    }
    .edit-toolbar {
      position: absolute;
      left: -4px;
      top: -4px;
    }
    .textarea {
      width: 75%;
      min-width: 240px;
    }
  }
}