src/app/stylesheets/custom/responsive-tables.less
//-----------------------------------------
// 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;
}
}