ten-design-vue/lib/theme/components/mention.less

ten-vue

/* dependencies input,icon,loading */
@import "../vars.less";

.ten-mention {
  position: relative;
  cursor: pointer;
  .ten-input-textarea textarea {
    resize: none;
  }
}

.ten-mention-options {
  max-height: 400px;
  overflow-y: auto;
  outline: none;
}

.ten-mention-option {
  padding: 0 10px;
  line-height: @mention-option-line-height;
  cursor: pointer;

  .ten-checkbox {
    margin-right: 8px;
  }

  &--mentioned {
    color: @primary-color;
  }
  &:hover:not(.ten-mention-option--disabled), 
  &:focus:not(.ten-mention-option--disabled), 
  &.ten-mention-option--focused:not(.ten-mention-option--disabled) {
    background: @primary-color-ligher-7;
  }
  // 禁用
  &--disabled {
    color: @disabled-color;
    cursor: not-allowed;
  }
}

.ten-mention__spy, .ten-mention__textarea {
  overflow-x: hidden;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ten-mention__spy {
  min-height: 34px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 9px 8px;
  line-height: 16.1px;
  z-index: -1;
  color: transparent;
  text-align: left;
  pointer-events: none;
}

.ten-mention__popup {
  &-content {
    position: relative;
  }
  &.ten-popup {
    padding: 0;
  }
  &--size-small {
    .ten-mention-option {
      line-height: 40px;
    }
  }

  &--loading &-content {
    min-height: 48px;
  }

  .ten-mention__empty {
    padding: 0 10px;
    text-align: center;
    color: @text-color-lighter-2;
    line-height: 48px;
  }

  .ten-mention__loading {
    position: relative;
    width: 80px;
    height: 48px;
  }
}