zp-bee/lib/bee-text-area/style/index.less

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

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

textarea {
  border: 1px solid #d8dae2;
  border-radius: 2px;
  font-size: @default-font-size;
  outline: none;

  :focus {
    border-right-width: 1px !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
  }
}

.zp-input-group-wrapper {
  position: relative;
  font-size: @default-font-size;
  display: flex !important;
  border-radius: 2px;
  z-index: 1;
  border: 1px solid #d8dae2;

  //https://www.zhangxinxu.com/wordpress/2016/08/css-parent-selector/
  .border {
    /* 尺寸自适应容器大小，假装是容器 */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* 在输入框的下面 */
    z-index: -1;
    /* 外观模拟 */
    // border: 1px solid #D8DAE2;
  }

  .ant-input-group-addon {
    padding: 0;
    font-size: @default-font-size;
    color: #75798e;
    padding-top: 3px;
    padding-left: 7px;
    background-color: transparent;
    border: none;
    width: auto;
  }

  textarea {
    flex: 1;
    border: none;
    padding: 2px;
    margin: 1px 0;
    font-size: @default-font-size;
    outline: none;
  }

  // 计算加入padding和margin  总和为18px
  textarea.ant-input {
    min-height: 18px;
    height: 18px;
    box-sizing: content-box;
  }

  .ant-input:focus,
  .ant-input-focused {
    border-color: transparent;
    border-right-width: 0 !important;
    box-shadow: none;
  }

  &:hover {
    border: 1px solid #1755c0;
  }

  &:not(:hover) {
    .ant-input:focus + .border {
      /* 容器边框颜色高亮 */
      border: 1px solid #1755c0;
    }
  }

  .number-limit {
    position: absolute;
    bottom: 1px;
    right: 17px;
    background-color: white;
  }
}

// hover颜色修改
.ant-input:hover {
  border-color: #1755c0;
}

// focus颜色修改
.ant-input:focus,
.ant-input-focused {
  border-color: #1755c0;
}

// 不可输入样式
.disabled {
  background-color: #f3f2f7;

  .ant-input[disabled] {
    background-color: transparent;
  }
}