linkmore-design/es/lm-edit-table/style/variables.less

🌈 🚀lm组件库。🚀

.lm_editTable_warpper {
  height: 100%;
  width: 100%;
  .ant-picker {
    width: 100%;
  }
  .upload_single {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 8px;
  }
  .ant-table-cell {
    border-right: 0px !important;
    &:empty::before {
      content: '-';
    }
  }
  .ant-table-thead {
    .ant-table-cell {
      min-height: 40px;
      padding: 10px 8px;
      font-family: PingFangSC-Medium;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0em;
      color: var(--color-85);
      &.ant-table-selection-column {
        width: 32px;
        padding: 0 8px;
      }
    }
  }

  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    height: 100%;
  }

  .lm_editTable_cell {
    cursor: pointer;
    height: 40px;
    padding: 8px 16px !important;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    color: var(--color-85);
  }

  .lm_custom_cell_td {
    position: relative;
    &.ant-table-cell-with-append {
      // display: flex;
      // flex-direction: row;
      // flex-wrap: nowrap;
      .ant-table-row-expand-icon {
        margin-right: 8px;
        flex: none;
        // width: 23px;
        // height: 17px;
      }
    }
    >.ant-form-item {
      flex: 1 1 auto;
    }
    .ant-form-item-control-input-content {
      display: flex;
      flex-direction: row;
      >div {
        flex: 1;
        max-width: 100%;
      }
    }
    .ant-table-row-expand-icon {
      margin-top: 6px;
    }
    .quick_copy_warp {
      font-size: 8px;
      position: absolute;
      left: calc(50% - 10px);
      z-index: 100;
      width: 20px;
      height: 10px;
      background-color: var(--color-6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #D8D8D8;
      &:hover {
        cursor: pointer;
        background-color: var(--primary-color);
        color: #fff;
      }
    }
    .quick_copy_up {
      top: -4px;
      left: calc(50% - 10px);
    }
    .quick_copy_down {
      bottom: -6px;
      left: calc(50% - 10px);
    }
  }

  .lm_editTable_cell_edit {
    height: 40px;
    padding: 8px 8px !important;
    box-sizing: border-box;
  }

  .ant-form-item-explain-error {
    font-size: 12px;
  }

  .lm_table_quickcopy {
    .anticon {
      color: var(--text-color);
    }
  }

  .ant-table-body {
    scroll-behavior: smooth;
  }

  .icon_drag {
    color: var(--tip-text-color);
    &:hover {
      color: var(--text-color);
    }
  }

  .ant-form-item-control-input{
    // min-height: 24px;
    // .ant-input {
    //   height: 24px;
    //   padding-left: 7px;
    //   padding-right: 7px;
    //   box-sizing: border-box;
    // }

    // .ant-input-number-group-addon {
    //   width: 22px !important;
    //   max-width: 22px !important;
    //   text-align: center !important;
    //   padding: 0 !important;
    //   font-size: 12px !important;
    //   color: var(--color-85);
    // }
  }
  
  .ant-table .ant-table-tbody>.ant-table-measure-row>td {
    padding: 0 !important;
  }

  .lm_edit_opetate {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    background-color: rgba(0, 0, 0, 0.06) !important;
  }

  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    background-color: rgba(0, 0, 0, 0.06) !important;
  }

  .lm_table_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    font-size: 12px;

    >img {
      width: 130px;
      height: 80px;
      margin-bottom: 8px;
    }

    .empty_img {
      margin-bottom: 8px;
      background-image: url('data:image/png;base64,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');
      background-size: cover;
    }

    >span {
      color: var(--font-color);
    }
  }

  .ant-table-empty {
    table {
      height: 100%;
      // .ant-table-cell {
      //   border-bottom: 0;
      // }
    }
  }
  
  // picker
  .ant-picker {
    height: 24px !important;
    padding: 2px 8px;
    padding-left: 7px;
    box-sizing: border-box;
  }

  .ant-table-bordered>.ant-table-container {
    border: 1px solid #f0f0f0;
  }

  // TODO: 添加子项
  &.lm_editable_autosize {
    .ant-table-wrapper,
      .ant-spin-nested-loading,
      .ant-spin-container,
      .ant-table,
      .ant-table-container {
        height: 100%;
    
        .ant-table-body {
          height: calc(100% - 41px);
        }
      }
  }
}

.lm_editTable_wrapperRange {
  .inputRange {
    display: inline-flex;
    align-items: center;
  }
}

.lm_editTable_add_bar {
  height: 32px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: var(--color-85);

  span {
    margin-left: 5px !important;
  }

  .lm_editTable_add_icon {
    width: 14px;
    height: 14px;
    color: var(--color-85);
    margin-left: 0 !important;
  }
}

.lm_table_append_add_popover {
  .ant-popover-inner-content {
    padding: 0px;
    ul {
      margin: 0;
      li {
        font-size: 12px;
        padding: 4px 8px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &:hover {
          background-color: var(--color-15);
        }
      }
    }
  }
}

.lm_edittable_col_sort_item {
  overflow: hidden;
}

.lm_editable_col_drag {
  background-color: #fff;
  font-size: 12px;
  display: flex;
  box-sizing: border-box;
  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  transform-origin: 0 0;
  touch-action: manipulation;
  scale: 1.05;
  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
  padding: 8px;
}