tdesign-react/esm/style/web/components/comment/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-comment {
  .reset;

  width: 100%;
  color: @comment-text-color-default;

  &__inner {
    display: flex;
  }

  &__avatar {
    flex-shrink: 0;
    margin-right: @comment-avatar-margin-right;
    cursor: pointer;
    display: flex;
  }

  &__avatar-image {
    width: @comment-avatar-size;
    height: @comment-avatar-size;
    border-radius: @border-radius-circle;
  }

  &__content {
    flex: auto;
    font: @comment-content-text-size;
  }

  &__author {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    margin-bottom: @comment-author-margin-bottom;
  }

  &__name {
    display: inline-flex;
    align-items: center;
    font: @comment-author-text-size;
    padding-right: @comment-author-name-padding-right;
    cursor: pointer;
  }

  &__time {
    font: @comment-secondary-text-size;
    padding-right: @comment-author-time-padding-right;
    color: @comment-text-color-secondary;
  }

  &__detail {
    word-break: break-all;
    font: @comment-content-text-size;
  }

  &__quote {
    margin-top: @comment-quote-margin-top;
    border-left: 4px solid @comment-border-color-default;
    padding-left: @comment-quote-padding-left;

    & .@{prefix}-comment {
      &__name,
      &__detail {
        color: @text-color-secondary;
      }
    }
  }

  &__actions {
    margin-top: @comment-actions-margin-top;
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    gap: @comment-actions-gap;

    .@{prefix}-button--variant-text {
      color: @text-color-placeholder;

      .@{prefix}-button__text {
        gap: @comment-actions-gap;
      }
    }
  }

  &__reply {
    margin-top: @comment-reply-margin-top;
    margin-left: @comment-reply-margin-left;
    background-color: @comment-bg-color-secondary;
    border-radius: @border-radius-medium;
    padding: @comment-reply-padding;

    .@{prefix}-button--variant-text {
      color: @text-color-placeholder;

      &:hover {
        background-color: @bg-color-secondarycontainer-hover;
      }

      .@{prefix}-button__text {
        gap: @comment-actions-gap;
      }
    }
  }
}