z-react-ui/es/send-msg/style/index.less

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

@import '../../style/themes/default.less';

@chat-send-msg: ~'@{st-prefix}-chat-send-msg';

// 发送消息
.@{chat-send-msg} {
  width: 100%;
  height: 180px;
  position: relative;

  // border: 1px solid red;

  .@{chat-send-msg}-input-panel {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 100%;
    height: 100px;
    // max-height: 120px;
    overflow-y: auto;
    outline: none;
    display: flex;
    // align-items: center;
    flex-flow: row wrap;
    padding: 10px;
    box-sizing: border-box;
    // 强制换行
    word-break: break-all;
  }

  .@{chat-send-msg}-btn {
    margin-top: 10px;
    text-align: right;
    padding-right: 20px;
  }
}

// 工具栏
@chat-tool-bar: ~'@{st-prefix}-chat-tool-bar';
// 表情
@chat-emoji: ~'@{st-prefix}-chat-emoji';
// 上传文件
@chat-file-upload: ~'@{st-prefix}-chat-file-upload';
// 上传图片
@chat-img-upload: ~'@{st-prefix}-chat-img-upload';

@icon-size: 28px;
// 工具栏
.@{chat-tool-bar} {
  // 表情
  .@{chat-emoji} {
    display: inline-block;
    padding: 4px;
    .@{chat-emoji}-img {
      width: @icon-size;
      height: @icon-size;
    }
  }
}

// 表情popOver
.@{chat-emoji}-overlay {
  .ant-popover-inner {
    // background-color: transparent;
    width: 400px;
  }
  .@{chat-emoji}-img {
    width: @icon-size;
    height: @icon-size;
  }
}
// 上传文件
.@{chat-file-upload} {
  display: inline-block;
  padding: 4px;
  .@{chat-file-upload}-img {
    width: @icon-size;
    height: @icon-size;
  }
  .@{chat-file-upload}-file {
    display: none;
  }
}
// 上传图片
.@{chat-img-upload} {
  display: inline-block;
  padding: 4px;
  .@{chat-img-upload}-img {
    width: @icon-size;
    height: @icon-size;
  }
  .@{chat-img-upload}-file {
    display: none;
  }
}