maestrano/mno-enterprise-angular

View on GitHub
src/app/stylesheets/custom/responsive-tables.less

Summary

Maintainability
Test Coverage
//-----------------------------------------
// Responsive tables (using TWB grid)
// see templates/dashboard/organization/invoices.html
// for an example
//-----------------------------------------
.table-cell {
  .th-row {
    margin-top: @table-cell-header-row-spacing;
    margin-left: 0;
    margin-right: 0;
    padding-top: @table-cell-header-row-padding;
    padding-bottom: @table-cell-header-row-padding;
    color: @table-cell-header-text-color;
    background-color: @table-cell-header-bg-color;
    font-size: @table-cell-header-text-size;
    line-height: (@table-cell-header-text-size + @table-cell-row-padding)*2;
    @table-cell-header-additional-rule();
  }

  .td-row {
    margin-top: @table-cell-row-spacing;
    margin-bottom: @table-cell-row-spacing;
    margin-left: 0;
    margin-right: 0;
    padding-top: @table-cell-row-padding;
    padding-bottom: @table-cell-row-padding;
    font-size: @table-cell-row-text-size;
    line-height: (@table-cell-row-text-size + @table-cell-row-padding)*2;

    .cell {
      // Add '...' at the end of text if too long for the cell
      .ellipsis();
    }

    .cell > .cell-label {
      font-weight: bold;
    }

    .cell > a > i {
      font-size: 20px;
    }

    &:nth-child(odd) {
      background-color: @table-cell-row-odd-bg-color;
    }

    &:nth-child(even) {
      background-color: @table-cell-row-even-bg-color;
    }
  }
}

@media (max-width: @screen-sm) {
  .table-cell .td-row .cell > a { padding-left: 0; }
}

// Table style in a well
.well .table-cell .th-row,
.well .table-cell .td-row {
  margin-left: -15px;
  margin-right: -15px;
}

// Inverse Style
.table-cell.inverse {
  .th-row {
    color: @table-inverse-cell-header-text-color;
    background-color: @table-inverse-cell-header-bg-color;
  }

  .td-row:nth-child(odd) {
    background-color: @table-inverse-cell-row-odd-bg-color;
  }

  .td-row:nth-child(even) {
    background-color: @table-inverse-cell-row-even-bg-color;
  }
}