zui/src/less/views/datagrid.less

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

/// ========================================================================
/// ZUI: datagrid.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2017-2018 cnezsoft.com; Licensed MIT
/// ========================================================================


// Variables
@cell-span-zIndex: 10;
@hover-row-zIndex: 20;
@fixed-cell-zIndex: 30;
@fixed-row-zIndex: 35;
@fixed-hover-row-zIndex: 38;
@hover-cell-zIndex: 40;
@fixed-row-hover-cell-zIndex: 42;
@scrollbar-zIndex: 50;
@dagagrid-messager-zIndex: 60;
@dagagrid-loading-zIndex: 61;


// Basic style

.datagrid-container {
  position: relative;
  overflow: hidden;
  background-color: @color-gray-pale;
  border: 1px solid @color-gray-light;
}
.datagrid-cells {
  overflow: visible;
  position: absolute;
  left: 0;
  top: 0;
  // transition: @animation-speed-fast @animation-type;
  // transition-property: left, top;
}
.datagrid-cell {
  overflow: hidden;
  position: absolute;
  padding: 8px;
  border: 1px solid @color-gray-light;
  transition: @animation-speed-normal @animation-type;
  transition-property: background, outline;
  background-color: @color-white;
  .nobr();
  text-overflow: ellipsis;

  &.datagrid-cell-index {
    background-color: @color-gray-pale;
    color: @color-gray;
    text-align: right;
    font-family: @font-family-monospace;
  }

  &.datagrid-cell-head {
    background-color: @color-gray-pale;
  }
}
.datagrid-cell-span {
  z-index: @cell-span-zIndex;
}

.datagrid-row {
  width: 100%;
  position: absolute;
  background-color: #fff;
  transition: @animation-speed-normal @animation-type;
  transition-property: background, outline;
}
.datagrid-row-head {
  font-weight: bold;
  background-color: @color-gray-pale;
  color: @color-gray;
}

.datagrid-fixed {
  &.datagrid-row {
    z-index: @fixed-row-zIndex;
  }
  &.datagrid-cell {
    z-index: @fixed-cell-zIndex;
  }
}
.datagrid-fixed-edge-top {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125), 0 1px 0 rgba(0, 0, 0, 0.25);
}
.datagrid-fixed-edge-bottom {
  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.125), 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datagrid-fixed-edge-left {
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.25) inset;
}
.datagrid-fixed-edge-right {
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.25) inset;
}

.datagrid-row-cell.active {
  .datagrid-cell {
    background-color: @color-yellow-pale;

    &.datagrid-cell-index {
      background-color: darken(@color-yellow-pale, 5%);
    }
  }
}

.datagrid-hover-row {
  .datagrid-row-cell:hover {
    z-index: @hover-row-zIndex;

    .datagrid-cell {
      background-color: @color-pale;
    }

    &.datagrid-fixed {
      z-index: @fixed-hover-row-zIndex;
    }

    > .datagrid-cell-index {
      background-color: @color-gray-light;
    }

    &.active {
      .datagrid-cell {
        background-color: darken(@color-yellow-pale, 8%);
      }

      .datagrid-cell-index {
        background-color: darken(@color-yellow-pale, 12%);
      }
    }
  }

  &.datagrid-hover-shadow .datagrid-row-cell:hover {
    box-shadow: 0 1px 3px 2px rgba(0,0,0,.05), 0 0px 2px 1px rgba(0,0,0,.075);
  }
}
.datagrid-hover-cell {
  .datagrid-row-cell .datagrid-cell-cell:hover {
    outline: 1px solid @color-gray;
    outline-offset: -1px;
    z-index: @hover-cell-zIndex;
    background-color: @color-white;
  }

  .datagrid-row-cell .datagrid-cell-cell.datagrid-fixed:hover,
  .datagrid-row-cell.datagrid-fixed .datagrid-cell-cell:hover {
    z-index: @fixed-row-hover-cell-zIndex;
  }

  &.datagrid-hover-shadow .datagrid-row-cell .datagrid-cell:hover {
    box-shadow: 0 1px 3px 3px rgba(0,0,0,.075), 0 0px 2px rgba(0,0,0,.1);
  }
}
.datagrid-hover-col {
  .datagrid-cell.hover {
    background-color: @color-pale;
  }

  .datagrid-cell-head.hover,
  .datagrid-cell-index.hover {
    background-color: @color-gray-light;
  }

  .datagrid-row-cell.active {
    .datagrid-cell.hover {
      background-color: darken(@color-pale, 5%);
    }
  }
}

.datagrid-scrollbar {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: 2.5s @animation-type;
  transition-property: background, opacity;
  z-index: @scrollbar-zIndex;

  &.scrolling,
  .datagrid-container:hover & {
    opacity: 1;
  }

  > .bar {
    background-color: @color-gray-light;
    background-color: rgba(0,0,0,.25);
    position: absolute;
    min-width: 10px;
  }

  &.scrolling,
  &:hover {
    background-color: rgba(0,0,0,.075);
    > .bar {
      background-color: @color-gray;
      background-color: rgba(0,0,0,.5);
      position: absolute;
    }
  }
}
.datagrid-scrollbar-h {
  left: 0;
  height: 10px;

  > .bar {
    top: 0!important;
    bottom: 0!important;
    min-width: 20px;
  }
}
.datagrid-scrollbar-v {
  top: 0;
  width: 10px;
  > .bar {
    left: 0!important;
    right: 0!important;
    min-height: 20px;
  }
}

.datagrid-messager {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: @dagagrid-messager-zIndex;
  padding: 5px 10px;
  text-align: center;

  > .close {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 20px;
    padding-bottom: 5px;

    &:hover {
      background-color: rgba(0,0,0,.1);
    }
  }
}

.datagrid-loading {
  position: absolute;
  z-index: @dagagrid-loading-zIndex;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.6);

  > .content {
    display: block;
    height: 50px;
    text-align: center;
    position: relative;
    top: 50%;
    margin-top: -25px;

    > .icon {
      color: @color-primary;
    }
  }
}

.datagrid-col-sortable {
  padding-right: 20px;
  cursor: pointer;
}

.datagrid-sorter {
  position: absolute;
  top: 3px;
  right: 0;
  width: 20px;
  text-align: center;
  bottom: 0;
  line-height: 30px;
}
.datagrid-sort-down > .icon-sort:before {
  content: @icon-caret-down;
  color: @color-primary;
}
.datagrid-sort-up > .icon-sort:before {
  content: @icon-caret-up;
  color: @color-primary;
}

.datagrid-borderless {
  .datagrid-container {border-color: transparent}
  .datagrid-cell {
    border-left-color: transparent;
    border-right-color: transparent;
  }
  .datagrid-fixed-edge-left {
    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1) inset;
  }
  .datagrid-fixed-edge-right {
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1) inset;
  }
}

.datagrid-striped .datagrid-cells > .datagrid-row-cell:nth-child(odd) {
  .datagrid-cell-cell {
    background-color: @table-bg-accent;
  }
  &.active {
    .datagrid-cell {
      background-color: @color-yellow-pale;

      &.datagrid-cell-index {
        background-color: darken(@color-yellow-pale, 5%);
      }
    }
  }

  .datagrid-cell-cell.hover {
    background-color: @color-pale;
  }
  .datagrid-cell-head.hover,
  .datagrid-cell-index.hover {
    background-color: @color-gray-light;
  }

  &.active {
    .datagrid-cell.hover {
      background-color: darken(@color-pale, 5%);
    }
  }
}