d-render/src/cip-table/style/index.less

基于 Element Plus 二次封装的数据驱动渲染组件库 - 表单、搜索表单、表格配置化渲染

.cip-table {
  --el-component-size: 28px;

  &__header-hint {
    margin-left: 6px;
    color: #BFBFBF;
    padding-bottom: 2px;
  }

  &__header-cell {
    display: flex;
    align-items: center;
  }

  &__header-hint {
    margin-left: 6px;
    color: #BFBFBF;
  }

  .@{elNamespace}-table__expanded-cell[class*=cell] {
    padding: 10px 12px
  }

  .@{elNamespace}-table__row {
    .cell {
      display: flex;

      .cip-form-item {
        flex-grow: 2;
      }
    }
  }

  .@{elNamespace}-table__empty-text {
    line-height: normal;
  }

  &__empty {
    height: 142px;
    padding: 32px 0;
    box-sizing: border-box;

    &__svg {
      font-size: 56px;
    }

    &__text {
      height: 22px;
      line-height: 22px;
      font-size: 14px;
    }
  }

  .cip-table-column-selection {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
  }

  .cip-button-text {
    padding: 0;
  }

  .cip-button+.cip-button {
    margin-left: 8px;
  }

  .@{elNamespace}-table__cell {
    &.is-right {
      --header-justify-content: flex-end;
    }

    &.is-center {
      --header-justify-content: center;
    }

    >.cell>.cip-table__header-cell {
      justify-content: var(--header-justify-content);
    }
  }
}

// 颜色的修改
html:not(.dark) {
  .cip-table__text {
    color: #c0c0c0;
  }
}

// 列文字层级
.cip-table {
  .text-primary > .cell {
    color: var(--el-text-color-primary);
  }
  .text-regular > .cell {
    color: var(--el-text-color-regular);
  }
  .text-secondary > .cell {
    color: var(--el-text-color-secondary);
  }
}