iep-ui/lib/iep-business-card/style/index.less

An enterprise-class UI design language and Vue-based implementation

@import '../../style/themes/index';
@import '../../style/mixins/index';

.@{ant-prefix}-business-card {
  border-radius: @border-radius-base;
  background: #f9f9f9;
  border: 1px solid #eaeff4;
  padding: 12px 12px 0 12px;
  display: flex;
  flex-direction: column;
  width: auto;
  min-height: 190px;
  user-select: none;
  transition: all 0.3s;
  .anticon-check-square {
    color: @primary-color;
  }
  &-active {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 113, 250, 0.16);
  }
  .iep-button-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #999;
    font-size: 16px;
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      width: 24px;
      height: 24px;
      border-radius: @border-radius-base;
      line-height: 24px;
      text-align: center;
      color: #fff;
      box-shadow: @shadow-1-up;
      background: var(--color);
    }
    &-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0 10px;
      transition: all 0.3s;
      &:hover {
        .ant-business-card-header-right-tools {
          transition: all 0.3s;
          display: flex;
        }
        .ant-business-card-header-right-more {
          transition: all 0.3s;
          display: none;
        }
      }
      &-show {
        .ant-business-card-header-right-tools {
          transition: all 0.3s;
          display: flex;
        }
        .ant-business-card-header-right-more {
          transition: all 0.3s;
          display: none;
        }
      }
      &-tools {
        display: none;
        justify-content: flex-end;
        align-items: center;
        gap: 0 10px;
        &-item {
          &:active {
            svg {
              fill: @primary-color;
            }
          }
        }
      }
    }
  }
  &-body {
    overflow: hidden;
    flex: 1;
    padding: 12px 0;
    span {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #000;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  &-footer {
    height: 34px;
    border-radius: 17px;
    background: #f9f9f9;
    text-align: center;
    line-height: 34px;
    span {
      font-weight: 400;
      font-size: 14px;
      color: #000;
    }
  }
  &-checked {
    height: 34px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}