@arco-vue-pro-components/pro-components/lib/pro-table/style/index.less

基于@arco-design/web-vue组件的高级组件，包括pro-table

@import '../../style/index.less';
@pro-table-prefix-cls: ~'@{prefix}-pro-table';
@pro-table-light-prefix-cls: ~'@{prefix}-pro-table-light';
@pro-table-alert-prefix-cls: ~'@{prefix}-pro-table-alert';
.@{pro-table-prefix-cls} {
  &:fullscreen {
    min-height: 100vh;
    overflow: auto;
    background: #ffffff;
  }
  &-toolbarContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 16px;
  }

  &-title {
    color: #121212;
    font-size: 18px;
  }

  &-setting {
    display: flex;
    align-items: center;
  }

  &-setting-item {
    display: inline-block;
    margin: 0 8px;
    color: rgba(42, 46, 54, 0.88);
    font-size: 18px;
    cursor: pointer;
  }

  &-column-indexBorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
    background: #979797;
    border-radius: 9px;

    &--top-three {
      background: #314659;
    }
  }
  &-collapse-button {
    display: flex;
    align-items: center;
    color: rgb(var(--primary-6));
  }
  &-column-setting {
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 180px;
      padding-bottom: 12px;
      font-size: 14px;
      color: #121212;
      font-weight: 600;
      .arco-checkbox {
        padding: 0;
      }
    }
    &-action-rest-button {
      color: rgb(var(--primary-6));
      cursor: pointer;
    }
    &-list {
      max-height: 280px;
      overflow-y: scroll;
      .arco-tree {
        padding-left: 18px;
      }

      &-title {
        padding-left: 10px;
        color: rgba(42, 46, 54, 0.65);
        font-size: 12px;
      }
      &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-title {
          text-align: left;
        }
        &-option {
          span:last-child {
            margin-left: 4px;
          }
          opacity: 1;
          color: rgb(var(--primary-6));
        }
        &-checked {
          position: absolute;
          left: 0;
        }
      }
      .arco-tree-node:hover {
        .am-vue-pro-table-column-setting-list-item-option {
          opacity: 1;
        }
      }
      .arco-tree-node-selected .arco-tree-node-title {
        color: inherit;
      }
      .arco-tree-node-title-text {
        flex: 1;
        position: relative;
      }
      .arco-tree-node-switcher {
        margin-right: 5px;
      }
      .arco-tree-node-title {
        margin-left: -7px;
      }
      .arco-tree-node-title-block .arco-tree-node-drag-icon {
        margin: 0;
        padding: 0;
        position: absolute;
        left: -61px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.2;
        right: auto;
        color: rgba(42, 46, 54, 0.88);
      }
      &-nocheckbox .arco-tree-node-title-block .arco-tree-node-drag-icon {
        left: -26px;
      }
      &-item-title {
        flex: 1;
        min-width: 80px;
        max-width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
      }
    }
  }
}
.@{pro-table-light-prefix-cls} {
  &-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 16px;
  }

  &-right {
    display: flex;
  }

  &-power-btn {
    color: #464646;
    border-color: #c5c6ce;
  }

  &-power-popover {
    min-width: 300px;
    color: rgba(0, 0, 0, 0.65);
  }

  &-power-buttons {
    display: flex;
    justify-content: space-between;
  }

  &-power-content {
    display: flex;
    flex-direction: column;
  }
  &-link-btn {
    padding: 0;
    background: transparent;
    margin-right: 20px;
    &:hover {
      background: transparent !important;
    }
  }
}
.@{pro-table-alert-prefix-cls} {
  &-container {
    margin-bottom: 16px;
  }
  &-clear {
    color: rgb(var(--link-6));
    cursor: pointer;
  }
}