@chatui/core/es/components/Goods/style.less

The React library for Chatbot UI

.Goods {
  padding: 12Px;
  font-size: var(--font-size-sm);

  &[data-elder-mode="true"] {
    --goods-img-size: 56Px;

    .Goods-desc,
    .Goods-count {
      font-size: 16Px;
    }
  }
  &[data-variant="inList"] {
    --goods-img-size: 88Px;

    .Goods-status {
      display: flex;
      justify-content: flex-end;
      color: var(--highlight-2);
    }
  }
  &[data-variant="compact"] {
    --goods-img-size: 39Px;
    padding: 0 6px 0 0;
    align-items: center;
    background: var(--color-fill-2);
    color: var(--color-text-2);
    border-radius: var(--radius-md);

    .Goods-figure {
      padding: 1px;
    }
    .Goods-name {
      font-size: var(--font-size-xs);
    }
    .Price {
      font-weight: 400;
      font-size: var(--font-size-xs);
    }
    .Goods-aside {
      flex-direction: row;
      align-items: center;
    }
    .Goods-countUnit {
      margin-top: 0;
      font-size: var(--font-size-xs);
    }
  }
  & + & {
    border-top: @goods-border-width solid @goods-border-color;
  }
  &-img {
    width: var(--goods-img-size);
    height: var(--goods-img-size);
    object-fit: cover;
    border-radius: var(--radius-md);
  }
  &-name {
    margin: 0;
    font-size: @font-size-sm;
    font-weight: 400;
  }
  &-main {
    .Price {
      margin-right: @goods-gap;
    }
  }
  &-desc {
    margin-top: 2Px;
    color: @goods-desc-color;
    word-break: break-all;
  }
  &-meta {
    color: @goods-meta-color;
    font-size: @goods-meta-font-size;
  }
  &-countUnit {
    margin-left: 6px;
    color: @goods-count-color;
    font-size: @goods-count-font-size;
  }
  &-unit {
    margin-left: 3px;
    font-size: @goods-unit-font-size;
  }
  &-buyBtn {
    float: right;
    background: @goods-buy-btn-bg;
    color: @goods-buy-btn-color;
    padding: @goods-buy-btn-padding;

    &:hover {
      background: @goods-buy-btn-bg;
    }
  }
  &-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 6Px;
  }
  &-status {
    display: inline-flex;
    align-items: center;
    color: var(--highlight-1);
  }
  .Btn {
    min-width: 0;
  }
}

.Goods-tags,
.Goods-countUnit,
.Goods-status,
.Goods-slot {
  margin-top: 2Px;
}

.Goods-figure {
  display: flex;
  align-self: flex-start;
  position: relative;
  margin-right: 8px;
}

.Goods-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  white-space: nowrap;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-mask);
  color: var(--white);
  font-size: var(--font-size-xs);
  line-height: 20px;
}