vd/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less

@prefix: ~"vue-bigdata-table";
@select-border-color: #3695FE;

@keyframes scroll-tip {
  0% {
    background: #fff;
  }

  50% {
    background: #d0e8ff;
  }
}

.@{prefix} {
  width: 100%;
  box-sizing: border-box;

  * {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #495060;
    font-size: 12px;
    font-weight: 400;
  }

  &-outer {
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 1px solid #e9eaec;
    box-sizing: border-box;
    position: relative;

    .@{prefix}-header-wrapper {
      box-sizing: border-box;
      z-index: 70;

      &.header-wrapper-fixed {
        position: -webkit-sticky;
        position: sticky;
      }

      table {
        table-layout: fixed;
        height: 100%;

        tr th {
          border-right: 1px solid #e9eaec;
          border-bottom: 1px solid #e9eaec;
          background: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;

          // &:last-child{
          //     border-right: none;
          // }
          .@{prefix}-header-inside-wrapper {
            box-sizing: border-box;
            padding: 0 8px;
          }
        }
      }
    }
  }

  &-fixed-header {
    position: -webkit-sticky;
    position: sticky;
    transform: translateX(0);
    left: 0;
    z-index: 110;
    transition: box-shadow .2s ease;

    &.box-shadow {
      box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2);
      transition: box-shadow .2s ease;
    }
  }

  &-wrapper {
    width: 100%;
    border-bottom: none;

    .@{prefix}-content {
      width: 100%;
      height: auto;
      // &.noselect-text{
      // 	-webkit-touch-callout: none;
      // 	-webkit-user-select: none;
      // 	-khtml-user-select: none;
      // 	-moz-user-select: none;
      // 	-ms-user-select: none;
      // 	user-select: none;
      // }
    }

    &:nth-child(2) {
      border-top: 1px solid #e9eaec;
    }

    &:nth-child(4) {
      border-bottom: 1px solid #e9eaec;
    }

    .@{prefix}-data-table {
      &.@{prefix}-content-table {

        left: 0;
        top: 0;
      }

      border-bottom: none;
      border-top: none;
      table-layout: fixed;

      tr {
        background: #fff;

        &.scroll-to-row-tip {
          animation: scroll-tip .6s 3;
        }

        td {
          min-width: 0;
          height: 48px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          border-bottom: 1px solid #e9eaec;
          border-right: 1px solid #e9eaec;

          border-left: 1px solid transparent;
          border-top: 1px solid transparent; // 表格选中

          .@{prefix}-cell {
            box-sizing: border-box;
            padding: 0 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
          }

          // &:last-child{
          //     border-right: none;
          // }
          .edit-item-con {
            width: 100%;
            text-align: left;
            padding: 0 6px;
            box-sizing: border-box;

            .edit-item {
              &-input {
                width: ~"calc(100% - 50px)";
                float: left;
              }

              &-btn-con {
                float: left;

                .edit-btn {
                  width: 20px;
                  margin: 7px 4px 0 0;
                }
              }
            }
          }

          &.start-select-cell {
            border-left: 1px solid @select-border-color;
            border-top: 1px solid @select-border-color;
          }

          &.end-select-cell {
            border-right: 1px solid @select-border-color;
            border-bottom: 1px solid @select-border-color;
          }

          &.right-top-select-cell {
            border-right: 1px solid @select-border-color;
            border-top: 1px solid @select-border-color;
          }

          &.left-bottom-select-cell {
            border-left: 1px solid @select-border-color;
            border-bottom: 1px solid @select-border-color;
          }

          &.top-center-select-cell {
            border-top: 1px solid @select-border-color;
          }

          &.bottom-center-select-cell {
            border-bottom: 1px solid @select-border-color;
          }

          &.left-center-select-cell {
            border-left: 1px solid @select-border-color;
          }

          &.right-center-select-cell {
            border-right: 1px solid @select-border-color;
          }
        }

        &.stripe-gray {
          background: #f8f8f9;
        }

        &.highlight-row {
          background: #ebf7ff;
        }
      }

      &-left {
        text-align: left;
      }

      &-center {
        text-align: center;
      }

      &-right {
        text-align: right;
      }
    }
  }

  &-fixed {
    .@{prefix}-header-wrapper {
      top: 0;
      left: 0;
      box-sizing: border-box;
    }
  }

  &-fixed-table {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 60;
    transition: box-shadow .2s ease;

    &.box-shadow {
      box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2);
      transition: box-shadow .2s ease;
    }

    td {
      border-right: 1px solid #e9eaec;
      // &:last-child{
      //     border-right: 1px solid #e9eaec !important;
      // }
    }
  }

  &-item-table {
    position: relative;
  }

  .sort-button {
    &-wrapper {
      display: inline-block;
      position: relative;
      width: 10px;
      height: 11px;
      transform: translateY(1px);
    }

    &-item {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      margin: 0;
      padding: 0;
      cursor: pointer;
      transition: border-color .2s ease;

      &-up {
        top: -4px;
        border-bottom: 4px solid #bbbec4;

        &:hover {
          border-bottom: 4px solid #495060;
        }

        &-active {
          border-bottom: 4px solid #2d8cf0;
        }
      }

      &-down {
        bottom: -4px;
        border-top: 4px solid #bbbec4;

        &:hover {
          border-top: 4px solid #495060;
        }

        &-active {
          border-top: 4px solid #2d8cf0;
        }
      }
    }
  }
}