amazeui/less/table.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                      Table
//
// Description:               Define style for table
//
// Component:                `.am-table`
//
// Modifiers:                `.am-table-bordered`
//                           `.am-table-radius`
//                           `.am-table-striped`
//                           `.am-table-hover`
//
// =============================================================================


// Table mixin
// =============================================================================

.table-row-variant(@state; @background; @border) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.@{state},
    > th.@{state},
    &.@{state} > td,
    &.@{state} > th {
      background-color: @background;
      border-color: @border;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .@{ns}table-hover > tbody > tr {
    > td.@{state}:hover,
    > th.@{state}:hover,
    &.@{state}:hover > td,
    &.@{state}:hover > th {
      background-color: darken(@background, 5%);
      border-color: darken(@border, 5%);
    }
  }
}

.table-state-variant(@state; @bg; @color) when (@color = '') {
  > td.@{ns}@{state},
  > th.@{ns}@{state},
  &.@{ns}@{state} > td,
  &.@{ns}@{state} > th {
    background-color: @bg;
  }
}

.table-state-variant(@state; @bg; @color) when (@bg = '') {
  > td.@{ns}@{state},
  > th.@{ns}@{state},
  &.@{ns}@{state} > td,
  &.@{ns}@{state} > th {
    color: @color;
  }
}

.table-state-variant(@state; @bg; @color) when not (@bg = '') and not (@color =  '') {
  > td.@{ns}@{state},
  > th.@{ns}@{state},
  &.@{ns}@{state} > td,
  &.@{ns}@{state} > th {
    color: @color;
    background-color: @bg;
  }
}


/* ==========================================================================
   Component: Table
 ============================================================================ */

table {
  max-width: 100%;
  background-color: @table-bg;
  empty-cells: show;

  code {
    white-space: normal;
  }
}

th {
  text-align: left;
}


.@{ns}table {
  width: 100%;
  margin-bottom: @global-margin;
  border-spacing: 0;
  border-collapse: separate;
  .hook-table;

  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: @table-cell-padding;
        line-height: @table-line-height;
        vertical-align: top;
        border-top: 1px solid @table-border-color;
      }
    }
  }

  // Bottom align for headings
  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid @table-border-color;
  }

  // Remove top border from thead
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }

  // multiple tbody
  > tbody + tbody {
    tr:first-child {
      td {
        border-top: 2px solid @table-border-color;
      }
    }
  }
}


/* Bordered version */
.@{ns}table-bordered {
  border: 1px solid @table-border-color;
  border-left: none;
  .hook-table-bordered;

  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border-left: 1px solid @table-border-color;

        // 避免有 rowspan 的时候后面的行没有左边框
        /*&:first-child {
          border-left: none;
        }*/
      }
    }
  }

  // fixes #566
  > tbody > tr:first-child {
    > th,
    > td {
      border-top: none;
    }
  }

  > thead {
    & + tbody {
      > tr:first-child {
        > th,
        > td {
          border-top: 1px solid @table-border-color;
        }
      }
    }
  }
}


/* Border-radius version */

.@{ns}table-radius {
  border: 1px solid @table-border-color;
  // box-shadow: 0 0 1px @gray-light;
  border-radius: @radius-normal;
  .hook-table-radius;

  > thead {
    > tr:first-child {
      > th:first-child,
      > td:first-child {
        border-top-left-radius: @radius-normal;
        border-left: none;
      }

      > th:last-child,
      > td:last-child {
        border-top-right-radius: @radius-normal;
        border-right: none;
      }
    }
  }

  > tbody {
    > tr {
      > th:first-child,
      > td:first-child {
        border-left: none;
      }

      > th:last-child,
      > td:last-child {
        border-right: none;
      }
    }

    > tr:last-child {
      > th,
      > td {
        border-bottom: none;
      }

      > th:first-child,
      > td:first-child {
        border-bottom-left-radius: @radius-normal;
      }

      > th:last-child,
      > td:last-child {
        border-bottom-right-radius: @radius-normal;
      }
    }
  }
}


/* Zebra-striping */

.@{ns}table-striped > tbody > tr:nth-child(odd) {
  > td,
  > th {
    background-color: @table-bg-striped;
    .hook-table-striped;
  }
}


/* Hover effect */

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


// Modifiers: compact
// =============================================================================

.@{ns}table-compact {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: @table-cell-padding-compact;
      }
    }
  }
}


// Modifiers: centered
// =============================================================================

.@{ns}table-centered {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        text-align: center;
      }
    }
  }
}


// Modifiers: states
// =============================================================================

.@{ns}table > thead > tr,
.@{ns}table > tbody > tr,
.@{ns}table > tfoot > tr {
  .table-state-variant(active, @table-bg-active, '');
  .table-state-variant(disabled; ''; @gray-light);
  .table-state-variant(primary; @table-primary-bg; @table-primary-color);
  .table-state-variant(success; @table-success-bg; @table-success-color);
  .table-state-variant(warning; @table-warning-bg; @table-warning-color);
  .table-state-variant(danger; @table-danger-bg; @table-danger-color);
}


// Hooks
// =============================================================================

.hook-table() {}
.hook-table-bordered() {}
.hook-table-radius() {}
.hook-table-striped() {}
.hook-table-hover() {}