naive-ui/styles/Card.scss

@import './mixins/mixins.scss';

$--card-margin-left: (
  'small': 16px,
  'medium': 24px,
  'large': 32px,
  'huge': 40px
);

$--card-margin-top: (
  'small': 12px,
  'medium': 16px,
  'large': 20px,
  'huge': 24px
);

$--card-margin-bottom: (
  'small': 8px,
  'medium': 12px,
  'large': 16px,
  'huge': 20px
);

@mixin card-size-mixin ($size) {
  @include m($size + '-size') {
    @include m(title-segmented) {
      @include b(card-title) {
        &:not(:last-child) {
          margin-bottom: 0;
          padding-bottom: map-get($--card-margin-bottom, $size);
        }
      }
    }
    @include m(title-soft-segmented) {
      @include b(card-title) {
        padding: map-get($--card-margin-top, $size) 0 map-get($--card-margin-bottom, $size) 0;
        margin: 0 map-get($--card-margin-left, $size);
      }
    }
    @include m(content-segmented) {
      @include e(content) {
        &:not(:last-child) {
          margin-bottom: 0;
          padding-bottom: map-get($--card-margin-bottom, $size);
        }
      }
    }
    @include m(content-soft-segmented) {
      @include e(content) {
        padding: 0;
        margin: map-get($--card-margin-bottom, $size) map-get($--card-margin-left, $size);
        &:not(:last-child) {
          margin-bottom: 0;
          padding-bottom: map-get($--card-margin-bottom, $size);
        }
      }
    }
    @include m(extra-segmented) {
      @include e(extra) {
        &:not(:last-child) {
          margin-bottom: 0;
          padding-bottom: map-get($--card-margin-bottom, $size);
        }
      }
    }
    @include m(extra-soft-segmented) {
      @include e(extra) {
        padding: 0;
        margin: map-get($--card-margin-bottom, $size) map-get($--card-margin-left, $size);
        &:not(:last-child) {
          margin-bottom: 0;
          padding-bottom: map-get($--card-margin-bottom, $size);
        }
      }
    }
    @include b(card-title) {
      padding: 0px map-get($--card-margin-left, $size);
      margin: map-get($--card-margin-top, $size) 0 map-get($--card-margin-bottom, $size) 0;
      @include e(main) {
        font-size: 18px;
      }
      @include e(extra) {
        font-size: 14px;
      }
    }
    @include e(content, extra) {
      padding: 0px map-get($--card-margin-left, $size);
      margin: map-get($--card-margin-bottom, $size) 0;
      font-size: 14px;
    }
    @include e(action) {
      background-color: $--n-table-header-color;
      padding: map-get($--card-margin-bottom, $size) map-get($--card-margin-left, $size);
      font-size: 14px;
    }
  }
}

@include themes-mixin {
  @include b(card) {
    display: block;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: $--n-card-color;
    transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
    color: $--n-secondary-text-color;
    @include m(bordered) {
      border: 1px solid $--n-alpha-divider-color;
    }
    border-radius: 6px;
    @include card-size-mixin('small');
    @include card-size-mixin('medium');
    @include card-size-mixin('large');
    @include card-size-mixin('huge');
    @include b(card-cover) {
      width: 100%;
      img {
        display: block;
        width: 100%;
      }
    }
    @include m(title-segmented, title-soft-segmented) {
      @include b(card-title) {
        transition: border-color .3s $default-cubic-bezier;
        &:not(:last-child) {
          border-bottom: 1px solid $--n-alpha-divider-color;
        }
      }
    }
    @include m(content-segmented, content-soft-segmented) {
      @include e(content) {
        transition: border-color .3s $default-cubic-bezier;
        &:not(:last-child) {
          border-bottom: 1px solid $--n-alpha-divider-color;
        }
      }
    }
    @include m(extra-segmented, extra-soft-segmented) {
      @include e(extra) {
        transition: border-color .3s $default-cubic-bezier;
        &:not(:last-child) {
          border-bottom: 1px solid $--n-alpha-divider-color;
        }
      }
    }
    @include b(card-title) {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      @include e(main) {
        font-weight: 700;
        font-size: 18px;
        color: $--n-text-color;
        transition: color .3s $default-cubic-bezier;
        flex: 1;
      }
      @include e(extra) {
        font-weight: 400;
        font-size: 14px;
        color: $--n-secondary-text-color;
        transition: color .3s $default-cubic-bezier;
      }
      @include e(close-mark) {
        cursor: pointer;
        fill: $--n-secondary-text-color;
        transition: fill .3s $default-cubic-bezier
      }
    }
    @include e(content) {
      line-height: 1.5;
      font-size: 14px;
    }
    @include e(extra) {
      line-height: 1.5;
      font-size: 14px;
    }
    @include e(action) {
      transition: background-color .3s $default-cubic-bezier;
      background-color: $--n-table-header-color;
      line-height: 1.5;
      font-size: 14px;
    }
  }
}