linkmore-design/lib/chart-table/style/index-pure.less

🌈 🚀lm组件库。🚀

@import '../../style/themes/index.less';
@chart-prefix-cls: lm-chart-table;

.@{chart-prefix-cls} {
  &_layout {
    height: inherit;

    &,
    * {
      box-sizing: border-box;

      &::-webkit-scrollbar {
        width: @padding-xs;
        height: @padding-xs;
        border-radius: (@padding-xs + 2px);
      }

      &::-webkit-scrollbar-button {
        display: none;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: @text-color-disable;
        border-radius: @padding-xs;
      }

      &::-webkit-scrollbar-thumb:hover,
      &::-webkit-scrollbar-thumb:active {
        background: @text-color-secondary-deep;
      }
    }

    &_content {
      overflow: auto;
    }
  }

  &_group_header {
    display: flex;
    align-items: center;
    gap: @padding-xss;
    padding: @padding-xs 0;
    .group_title {
      font-weight: bold;
    }
    .group_tip {
      color: @text-color-secondary-deep;
    }
  }

  &_row {
    display: grid;
    width: 100%;
    // gap: @gap-base;
    // containIntrinsicSize: contentHeight,
    // content-visibility: auto;
  }

  &_cell {
    display: grid;
    overflow: hidden;
  }
}

/** 初始化样式 -> 对应卡片的样式
  card_wrapper
    |-card-thumb
    |-card-complex
      |-content-header
      |  |-title-wrapper
      |  |-safe-area-code
      |-content-body
        |-desc-item
          |-desc-label
          |-desc-content
**/
.@{chart-prefix-cls} {
  &-card-wrapper {
    position: relative;
    display: flex;
    border: 1px solid transparent;
    border-radius: @border-radius-base;
    background-color: @text-color-bg;
    padding: @padding-sm;
    overflow: hidden;
    gap: @padding-sm;
    transition: 0.2s;

    &:hover {
      border-color: @text-color-disable;
    }

    &.@{chart-prefix-cls}-card-selected {
      border-color: @primary-color;
    }
  }

  &-card-checkbox {
    position: absolute;
    z-index: 1;
    left: @padding-sm;
    top: @padding-sm;
    line-height: 1;
    border: @border-radius-base solid transparent;
    border-radius: @border-radius-base;
    background-color: @text-color-dark;
    opacity: 0;
    transition: 0.2s;

    .ant-checkbox-wrapper {
      align-items: center;

      .ant-checkbox {
        top: 0;
      }
    }
  }

  /** 图片容器: 宽高比3:4 **/
  &-card-thumb {
    flex-shrink: 0;
    height: 100%;
    border-radius: @border-radius-base;
    background-color: @text-color-disable;
    overflow: hidden;
    aspect-ratio: 3/4; // 此处若存在兼容问题可通过隐藏(visibility)一个3:4的图片来实现
    // padding-top: 75%; /* 3/4 */

    /** 图片充满显示 **/
    img {
      object-fit: cover;
    }
  }

  /** 组合内容区域 **/
  &-card-complex {
    flex-grow: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;

    .dynamic-extra {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: @gap-base;
    }

    .extra-tag {
      opacity: 1;
    }

    .extra-operate {
      line-height: 1;
      border: @border-radius-sm solid transparent;
      border-radius: @border-radius-base;
      color: @text-color-secondary-deep;
      transition: 0.2s;
      cursor: pointer;
      &:empty {
        display: none;
      }
    }

    hr {
      border: none;
      height: 1px;
      background-color: @text-color-border;
      margin: @margin-xs 0;
    }
  }

  &-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: @gap-base;

    .header-wrapper {
      flex-grow: 1;
      overflow: hidden;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: @gap-base;
    }

    .safe-area-title {
      font-size: @font-size-base;
      font-weight: 600;
      line-height: @line-height-base;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .safe-area-code {
      font-size: @font-size-sm;
      line-height: 20px;
      color: @text-color-secondary-deep;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &-content-body {
    overflow-y: auto;

    &::-webkit-scrollbar-thumb {
      background: transparent;
    }
  }

  &-grid-wrapper {
    display: grid;
    /** 根据列排布设置同列数量 **/
    // grid-template-columns: repeat(2, 1fr);
    gap: (@gap-base / 2) (@gap-base * 1.5);

    .desc-item {
      display: flex;
      align-items: center;
      font-size: @font-size-base;
      overflow: hidden;
      // content-visibility: auto;

      .desc-label {
        flex-shrink: 0;
        color: @text-color-secondary-deep;

        &:not(:empty)::after {
          content: '：';
        }
      }

      .desc-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  &-card-wrapper:hover,
  &-card-hover {
    .@{chart-prefix-cls}-card-complex {
      .extra-operate {
        background-color: @text-color-dark;
      }
    }

    .@{chart-prefix-cls}-content-body {
      &::-webkit-scrollbar-thumb {
        background: @text-color-disable;
      }
    }
  }

  /** 悬停或存在选中状态 **/
  &-card-wrapper:hover,
  &-body.has-selected {
    .@{chart-prefix-cls}-card-checkbox {
      opacity: 1;
    }
  }
}