tdesign-react/esm/common/style/web/components/card/_index.less

TDesign Component for React

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

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

@import "./_var.less";

@import "./_mixin.less";

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

.@{prefix}-card {
  .reset;

  position: relative;
  box-sizing: border-box;
  border-radius: @card-border-radius;
  background-color: @card-background;
  color: @text-color-primary;
  transition: box-shadow @anim-duration-base @anim-time-fn-easing;
}

.@{prefix}-card--bordered {
  border: 1px solid @card-border-color;
}

.@{prefix}-card--shadow-hover:hover,
.@{prefix}-card--shadow {
  box-shadow: @shadow-1;
}

.@{prefix}-card__cover {
  display: flow-root;
}

.@{prefix}-card__cover img {
  display: flow-root;
  width: 100%;
  max-height: 100%;
  border-radius: @border-radius-default @border-radius-default 0 0;
}

.@{prefix}-card__body {
  display: flow-root;
  padding: @card-body-padding;
}

.@{prefix}-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: @card-header-padding;
  position: relative;

  &-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
  }

  + .@{prefix}-card__cover img {
    border-radius: 0;
  }
}

.@{prefix}-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @card-footer-padding;

  &-wrapper {
    flex: 1;
  }
}

.@{prefix}-size-s {
  .@{prefix}-card__body {
    padding: @card-body-padding-s;
  }

  .@{prefix}-card__header {
    padding: @card-header-padding-s;
  }

  .@{prefix}-card__footer {
    padding: @card-footer-padding-s;
  }
}

.@{prefix}-card__avatar {
  margin-right: @card-avatar-margin;
  width: @card-avatar-size;
  height: @card-avatar-size;
}

.@{prefix}-card__title {
  font: @font-title-medium;
  color: @card-color;
  margin-right: @card-title-margin;
  word-break: break-all;
}

.@{prefix}-card__subtitle {
  font: @font-body-medium;
  color: @card-subtitle-color;
  word-break: break-all;
}

.@{prefix}-card__description {
  font: @font-body-medium;
  color: @card-subtitle-color;
  margin-top: @card-description-margin;
  word-break: break-all;
}

.@{prefix}-card__actions {
  float: right;
  color: @brand-color;
}

.@{prefix}-card__title--bordered {
  border-bottom: 1px solid @card-border-color;

  + .@{prefix}-card__body {
  }
}