@ustack/uskin/css/components/table.less

A graceful framework which provides developers another chance to build an amazing site.

// Mixins


// Variables
@table_hd_bg_color: @color_grey;
@table_hd_font_color: @color_font_800;
@table_hd_height: 36px;
@table_bg_color: #fff;
@table_hover_bg_hover: @color_info_100;
@table_striped_bg_color: @color_info_100;
@table_selected_bg_color: @color_info_200;
@table_bd_height: 40px;
@table_bd_border: 1px solid @color_grey;
@table_padding_left: 16px;
@table_ft_color: @color_grey;
@table_resize_column_color: @color_disabled_400;

@filter_selected_color: @color_info;

@col_arrow_color: @color_font_700;
@col_arrow_hover_color: @color_font_800;
@col_arrow_selected: @color_font_800;
@loading_color: @color_font_800;


table.table {
  display: table;
  width: 100%;
  max-width: 100%;
  background-color: @table_bg_color;

  input[type="checkbox"] {
    vertical-align: middle;
  }

  > thead {
    height: @table_hd_height;
    background-color: @table_hd_bg_color;
    font-size: 12px;
    color: @table_hd_font_color;
    user-select: none;
    >tr {
      height: @table_hd_height;

      th {
        padding-left: @table_padding_left;
        text-align: left;
        font-weight: normal;

        &:not(:first-child) {
          border-left: 1px solid #fff;
        }
      }
    }
  }

  > tbody {
    >tr {
      height: @table_bd_height;
      border-bottom: @table_bd_border;

      &.selected {
        background-color: @table_selected_bg_color !important;
      }

      >td {
        padding-left: @table_padding_left;
      }
    }
  }

}

.table {
  width: 100%;
  max-width: 100%;
  background-color: @table_bg_color;
  display: flex;
  flex-direction: column;

  input[type="checkbox"] {
    vertical-align: middle;
  }

  .table-header {
    display: flex;
    user-select: none;
    min-height: 36px;
    height: 36px;
    max-height: 36px;
    > div {
      flex: 1;
      box-sizing: border-box;
      height: 36px;
      line-height: 36px;
      padding-left: 16px;
      background-color: @table_hd_bg_color;
      color: @table_hd_font_color;
      border-right: 1px solid #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .filter-box {
        display: inline-block;
        cursor: pointer;
        .filter-icon {
          display: inline-block;
          width: 16px;
          height: 36px;
          text-align: center;
          cursor: pointer;
          &::after {
            content: "";
            font-size: 0;
            width: 0;
            position: relative;
            top: -2px;
            border-top: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 3px solid @col_arrow_color;
            border-right: 3px solid @col_arrow_color;
          }

          &:hover {
            &::after {
              border-bottom: 3px solid @col_arrow_hover_color;
              border-right: 3px solid @col_arrow_hover_color;
            }
          }
        }
        .filter {
          position: absolute;
          border: 1px solid @table_hd_bg_color;
          width: 150px;
          text-align: left;
          background: #fff;
          cursor: pointer;
          box-shadow: 0 0 15px @table_hd_bg_color;
          z-index: 9;
          > div {
            margin: 2px;
            padding-left: 10px;
            padding-right: 20px;
            position: relative;
            height: 36px;
            line-height:36px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:hover {
              background: @table_hover_bg_hover
            }
            &.selected {
              background: @table_selected_bg_color !important;
              i {
                position: absolute;
                top: 12px;
                right: 6px;
                font-weight: bold;
                color: @filter_selected_color;
              }
            }
          }
        }
      }

      &:last-child {
        border-right: none;
      }

      &.checkbox {
        width: 36px;
        flex: none;
        padding: 0 10px;
      }

      &.sortable {
        display: inline-block;
        .title {
          cursor: pointer;
        }
        .sort-box {
          width: 20px;
          height: 36px;
          float: right;
          .sort-up, .sort-down {
            display: block;
            height: 50%;
            padding-left: 6px;
            cursor: pointer;
            position: relative;
          }
          .sort-up {
            .arrow-up {
              position: absolute;
              bottom: 1px;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              border-bottom: 4px solid @col_arrow_color;
            }

            &:hover {
              .arrow-up {
                border-bottom: 4px solid @col_arrow_hover_color;
              }
            }

            &.selected {
              .arrow-up {
                border-bottom: 4px solid @col_arrow_selected;
              }
            }
          }
          .sort-down {
            .arrow-down {
              position: absolute;
              top: 1px;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              border-top: 4px solid @col_arrow_color;
            }

            &:hover {
              .arrow-down {
                border-top: 4px solid @col_arrow_hover_color;
              }
            }

            &.selected {
              .arrow-down {
                border-top: 4px solid @col_arrow_selected;
              }
            }
          }
        }
      }

      .drag-line {
        float: right;
        width: 8px;
        height: @table_hd_height;
        cursor: col-resize;
      }

    }
  }

  .loading-data {
    flex: 1;
    width: 100%;
    overflow-y: hidden;
    position: relative;
    .icon-loading {
      position: absolute;
      top: 60px;
      left: 50%;
      margin-left: -18px;
      width: 36px;
      color: @loading_color;
      .loading-style(36px);
    }
  }

  .table-body {
    overflow-x: hidden;
    overflow-y: auto;
    .row {
      display: flex;
      border-bottom: @table_bd_border;
      > div {
        flex: 1;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        padding-left: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:last-child {
          border-right: none;
        }

        &.checkbox {
          width: 36px;
          flex: none;
          padding: 0 10px;
        }
      }

      &.selected {
        background-color: @table_selected_bg_color !important;
      }
    }
  }

  .resize-column-line {
    background-color: @table_resize_column_color;
    width: 1px;
    position: fixed;
    z-index: 999;
  }

}

.table-striped {
  > tbody > tr:nth-child(even) {
    background-color: @table_striped_bg_color;
  }

  .table-body .row:nth-child(even) {
    background-color: @table_striped_bg_color;
  }
}

.table-hover {
  > tbody > tr:hover {
    background-color: @table_hover_bg_hover;
  }

  .table-body .row:hover {
    background-color: @table_hover_bg_hover;
  }
}

.table-mini {
  .table-header {
    min-height: 28px;
    height: 28px;
    max-height: 28px;
    border-bottom: @table_bd_border;
    > div {
      height: 28px;
      line-height: 28px;
      background-color: #fff;
      &.sortable {
        .sort-box {
          height: 28px;
          width: 16px;
        }
      }

      .filter-box {
        .filter-icon {
          width: 12px;
          height: 28px;
        }
      }
    }
  }
  .table-body {
    .row {
      > div {
        height: 36px;
        line-height: 36px;
      }
    }
  }
}