atui/src/styles/tables.less

components built with Vue.js

// Table
// --------------------------------------------------
@prefix-cls-table: e("@{prefix-cls}-table");

.@{prefix-cls-table} {
  position: relative;
  width: 100%;
  .atui-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }
  &.@{prefix-cls-table}-loading table {
    opacity: .7;
    filter: blur(1px);
    pointer-events: none;
  }
  table {
    width: 100%;
    transition: all .3s cubic-bezier(.78, .14, .15, .86);
    border-collapse: collapse;
  }
  thead {
    background-color: #f2f2f2;
  }
  tbody,tfoot {
    background-color: #fff;
  }
  th,td {
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-all;
  }
  th {
    position: relative;
    padding: 14px;
    color: #666;
    font-weight: normal;

    .@{prefix-cls}-iconfont {
      cursor: pointer;
    }
    .icon-filter {
      color: #999;
      &:hover {
        color: #666;
      }
      &:active {
        color: @primary-color;
      }
    }
    .@{prefix-cls-table}-sorter {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 10px;
      height: 14px;
      line-height: 7px;
      i {
        display: inline-block;
        transform: rotate(0deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
        color: #999;
        &:hover {
          color: #333;
        }
      }
      .@{prefix-cls-table}-active {
        color: @primary-color;
      }
    }
  }

  th.@{prefix-cls-table}-expand-icon-th {
    width: 34px;
  }

  tbody tr:hover {
    background-color: @tr-hover-color;
  }
  tr.none td {
    text-align: center;
  }
  tr.none:hover {
    background-color: #fff;
  }
  tfoot tr:hover {
    background-color: inherit;
  }
  td {
    padding: 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #666;
  }

  td.@{prefix-cls-table}-row-expand-icon-cell {
    width: 18px;
  }

  .@{prefix-cls-table}-row-expand-icon {
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 14px;
    border: 1px solid #e9e9e9;
    user-select: none;
    background: #fff;
  }

  .@{prefix-cls-table}-row-collapsed:after {
    content: '+';
  }

  .@{prefix-cls-table}-row-expanded:after {
    content: '-';
  }

  .@{prefix-cls-table}-expanded-row {
    background: #fbfbfb;
  }

  &-pagination {
    float: right;
    margin: 16px 0;
  }

  &-selection-column {
    text-align: center;
    width: 42px;
    padding: 14px 6px 14px 14px;
  }

  &-middle th, &-middle td, &-small th {
    padding: 10px 8px;
  }

  &-fixed-header {
    height: 260px;
    overflow: auto;
  }


  &-small td {
    padding: 6px 8px;
  }

  &-filter-dropdown {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
    box-shadow: 0 1px 6px hsla(0, 0%, 39%, .2);
    ul {
      list-style: none;
      min-width: 100px;
      padding: 0;
    }
    li {
      padding: 3px 5px;
      &:hover {
        background-color: @tr-hover-color;
      }
      i {
        display: none;
      }

      input {
        margin: 0 10px 0 5px;
      }
    }
    li.selected {
      background-color: #f2f2f2;

      i {
        display: inline;
        font-weight: bold;
      }
    }
    li.@{prefix-cls-table}-filter-single-item {
      cursor: pointer;
    }
  }

  &-filter-dropdown-btns {
    overflow: hidden;
    padding: 7px 15px;
    font-size: 12px;
    border-top: 1px solid #e9e9e9;
    width: 100%;
  }
  &-filter-dropdown-link {
    float: left;
    &.@{prefix-cls-table}-clear {
      float: right;
    }
  }

  &:after {
    clear: both;
    content: '';
    display: block;
  }
}