zui/src/less/views/datatable.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: datatable.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Datatable view

.datatable-head,
.datatable-rows {
  display: table;
  width: 100%;
  table-layout:fixed;
}

.datatable {
  margin-bottom: 20px;

  > .datatable-head { transition: box-shadow .2s; }

  .table {
    margin: 0;
    table-layout: fixed;

    > tbody > tr > td,
    > thead > tr > th {
      min-width: 20px;

      &.check-btn {
        cursor: pointer;
        width: 30px;
        text-align: center;
        color: lighten(@color-fore, 40%);
      }
    }

    > tbody > tr.hover > td.check-btn,
    > tbody > tr.active > td.check-btn,
    > thead > tr > th.check-btn:hover,
    > tbody > tr > td.check-btn:hover,
    > thead > tr > th.check-btn.checked,
    > tbody > tr > td.check-btn.checked {
       color: lighten(@color-fore, 10%);
    }

    > thead > tr > th.check-btn.checked,
    > tbody > tr > td.check-btn.checked,
    > tbody > tr.active > td.check-btn {
      > .icon-check-empty:before {
        content: @icon-checked;
      }
    }

    > thead > tr > th.col-hover {
      background-color: darken(@table-head-bg, 6%);
    }

    > tbody > tr > td.col-hover,
    > tbody > tr.hover > td {
      background-color: @table-bg-hover;
    }

    > tbody > tr.active.hover td {
      background-color: darken(@table-bg-active, 5%);
    }
  }

  &.head-fixed {
    > .datatable-head {
      position: fixed;
      z-index: @zindex-navbar-fixed;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
    }
  }

  &.sortable {
    .datatable-head-span .table > thead > tr > th {
      cursor: pointer;
      .nobr();

      &.text-center {
        padding-left: 0;
        padding-right: 0;
      }

      &:after {
        .icon-zenicon();
        content: @icon-sort;
        display: inline-block;
        margin-left: 5px;
        color: @color-gray;
      }

      &.sort-down:after {
        content: @icon-caret-down;
        color: @link-color;
      }

      &.sort-up:after {
        content: @icon-caret-up;
        color: @link-color;
      }

      &.check-btn:after, &.sort-disabled:after {
        display: none
      }

      &.sort-disabled {
        cursor: default;
      }
    }
  }

  // .size-handle {display: none}

  // &.customizable
  // {
  //   &.size-changing
  //   {
  //     cursor: e-resize!important;
  //   }

  //   .size-handle
  //   {
  //     display: block;
  //     position: absolute;
  //     width: 3px;
  //     height: 100%;
  //     top: 0;
  //     cursor: w-resize;
  //     border: 1px dotted transparent;
  //     border-top: none;
  //     border-bottom: none;
  //     .transition();
  //   }

  //   .datatable-head-span
  //   {
  //     position: relative;

  //     &.fixed-left
  //     {
  //       .size-handle
  //       {
  //         right: 0;
  //       }
  //     }

  //     &.fixed-right
  //     {
  //       .size-handle
  //       {
  //         left: 0;
  //       }
  //     }

  //     .table > thead > tr > th
  //     {
  //       position: relative;
  //       .size-handle
  //       {
  //         right: 0;
  //       }
  //     }
  //   }

  //   .datatable-head
  //   {
  //     &:hover
  //     {
  //       .size-handle
  //       {
  //         border-color: @color-gray;
  //         background-color: @color-back;
  //       }
  //     }
  //   }

  //   &.size-changing
  //   {
  //     .table > thead > tr > th,
  //     .table > tbody > tr > td
  //     {
  //       transition: none;
  //     }
  //   }
  // }
}

.datatable-wrapper {position: relative;}

.datatable-span {
  display: table-cell;
  vertical-align: top;

  &.flexarea {
    overflow: hidden;

    &.datatable-head-span {
      &.dragging { cursor: move !important; }
    }

    .table {
      position: relative;
      left: 0;
      top: 0;
    }

    .scrolled-shadow {
      width: 20px;
      position: absolute;
      top: 0;
      bottom: 0;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      display: none;
      opacity: 0;
      .transition();
    }

    .scrolled-in-shadow  { left: -30px; }
    .scrolled-out-shadow { right: -30px; }
  }
}

.datatable > .scroll-wrapper {
  position: relative;
  width: 100%;
}

.datatable .scroll-slide {
  position: absolute;
  bottom: 0;
  left: -1px;
  right: -1px;
  background: @color-gray-lighter;
  background: fade(@color-gray, 10%);
  border: 1px solid @color-gray-lighter;
  border-bottom: none;
  height: 11px;
  opacity: 0;
  display: none;
  transition: opacity 0.5s, background 0.3s;

  > .bar {
    cursor: move;
    position: absolute;
    height: 10px;
    top: 0px;
    min-width: 50px;
    left: 0;
    background-color: lighten(@color-gray, 15%);
  }

  &:hover {
    > .bar { background-color: @color-gray; }
  }


  &.scroll-pos-out {
    bottom: -14px;
    height: 15px;

    > .bar { height: 14px; }
  }
}

.datatable.show-scroll-slide {
  &:hover,
  &.scrolling {
    .scroll-slide, .scrolled-shadow   { opacity: 1 };
  }

  .scroll-slide, .scrolled-shadow     { display: block; }

  &.scrolled-in .scrolled-in-shadow   { left: -20px; }
  &.scrolled-out .scrolled-out-shadow { right: -20px; }
}