233 lines
7.4 KiB
CSS
233 lines
7.4 KiB
CSS
/*
|
|
Tables
|
|
========================================
|
|
*/
|
|
|
|
/* BASE TABLES */
|
|
table {
|
|
max-width: 100%;
|
|
background-color: var(--table-background);
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/* BASELINE STYLES */
|
|
.table {
|
|
width: 100%;
|
|
margin-bottom: var(--base-line-height);
|
|
}
|
|
|
|
/* Cells */
|
|
.table th,
|
|
.table td {
|
|
padding: 8px;
|
|
line-height: var(--base-line-height);
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border-top: 1px solid var(--table-border);
|
|
}
|
|
|
|
.table th {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Bottom align for column headings */
|
|
.table thead th {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/* Remove top border from thead by default */
|
|
.table caption + thead tr:first-child th,
|
|
.table caption + thead tr:first-child td,
|
|
.table colgroup + thead tr:first-child th,
|
|
.table colgroup + thead tr:first-child td,
|
|
.table thead:first-child tr:first-child th,
|
|
.table thead:first-child tr:first-child td {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* Account for multiple tbody instances */
|
|
.table tbody + tbody {
|
|
border-top: 2px solid var(--table-border);
|
|
}
|
|
|
|
/* Nesting */
|
|
.table .table {
|
|
background-color: var(--body-background);
|
|
}
|
|
|
|
/* CONDENSED TABLE W/ HALF PADDING */
|
|
.table-condensed th,
|
|
.table-condensed td {
|
|
padding: 4px 5px;
|
|
}
|
|
|
|
/* BORDERED VERSION */
|
|
.table-bordered {
|
|
border: 1px solid var(--table-border);
|
|
border-collapse: separate;
|
|
border-left: 0;
|
|
border-radius: var(--base-border-radius);
|
|
}
|
|
|
|
.table-bordered th,
|
|
.table-bordered td {
|
|
border-left: 1px solid var(--table-border);
|
|
}
|
|
|
|
/* Prevent a double border */
|
|
.table-bordered caption + thead tr:first-child th,
|
|
.table-bordered caption + tbody tr:first-child th,
|
|
.table-bordered caption + tbody tr:first-child td,
|
|
.table-bordered colgroup + thead tr:first-child th,
|
|
.table-bordered colgroup + tbody tr:first-child th,
|
|
.table-bordered colgroup + tbody tr:first-child td,
|
|
.table-bordered thead:first-child tr:first-child th,
|
|
.table-bordered tbody:first-child tr:first-child th,
|
|
.table-bordered tbody:first-child tr:first-child td {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* For first th/td in the first row in the first thead or tbody */
|
|
.table-bordered thead:first-child tr:first-child > th:first-child,
|
|
.table-bordered tbody:first-child tr:first-child > td:first-child,
|
|
.table-bordered tbody:first-child tr:first-child > th:first-child {
|
|
border-top-left-radius: var(--base-border-radius);
|
|
}
|
|
|
|
/* For last th/td in the first row in the first thead or tbody */
|
|
.table-bordered thead:first-child tr:first-child > th:last-child,
|
|
.table-bordered tbody:first-child tr:first-child > td:last-child,
|
|
.table-bordered tbody:first-child tr:first-child > th:last-child {
|
|
border-top-right-radius: var(--base-border-radius);
|
|
}
|
|
|
|
/* For first th/td in the last row in the last thead, tbody, and tfoot */
|
|
.table-bordered thead:last-child tr:last-child > th:first-child,
|
|
.table-bordered tbody:last-child tr:last-child > td:first-child,
|
|
.table-bordered tbody:last-child tr:last-child > th:first-child,
|
|
.table-bordered tfoot:last-child tr:last-child > td:first-child,
|
|
.table-bordered tfoot:last-child tr:last-child > th:first-child {
|
|
border-bottom-left-radius: var(--base-border-radius);
|
|
}
|
|
|
|
/* For last th/td in the last row in the last thead, tbody, and tfoot */
|
|
.table-bordered thead:last-child tr:last-child > th:last-child,
|
|
.table-bordered tbody:last-child tr:last-child > td:last-child,
|
|
.table-bordered tbody:last-child tr:last-child > th:last-child,
|
|
.table-bordered tfoot:last-child tr:last-child > td:last-child,
|
|
.table-bordered tfoot:last-child tr:last-child > th:last-child {
|
|
border-bottom-right-radius: var(--base-border-radius);
|
|
}
|
|
|
|
/* Clear border-radius for first and last td in the last row in the last tbody for table with tfoot */
|
|
.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Special fixes to round the left border on the first td/th */
|
|
.table-bordered caption + thead tr:first-child th:first-child,
|
|
.table-bordered caption + tbody tr:first-child td:first-child,
|
|
.table-bordered colgroup + thead tr:first-child th:first-child,
|
|
.table-bordered colgroup + tbody tr:first-child td:first-child {
|
|
border-top-left-radius: var(--base-border-radius);
|
|
}
|
|
|
|
.table-bordered caption + thead tr:first-child th:last-child,
|
|
.table-bordered caption + tbody tr:first-child td:last-child,
|
|
.table-bordered colgroup + thead tr:first-child th:last-child,
|
|
.table-bordered colgroup + tbody tr:first-child td:last-child {
|
|
border-top-right-radius: var(--base-border-radius);
|
|
}
|
|
|
|
/* ZEBRA-STRIPING */
|
|
/* Default zebra-stripe styles (alternating gray and transparent backgrounds) */
|
|
.table-striped tbody > tr:nth-child(odd) > td,
|
|
.table-striped tbody > tr:nth-child(odd) > th {
|
|
background-color: var(--table-background-accent);
|
|
}
|
|
|
|
/* HOVER EFFECT */
|
|
/* Placed here since it has to come after the potential zebra striping */
|
|
.table-hover tbody tr:hover > td,
|
|
.table-hover tbody tr:hover > th {
|
|
background-color: var(--table-background-hover);
|
|
}
|
|
|
|
/* TABLE CELL SIZING */
|
|
/* Reset default grid behavior */
|
|
table td[class*="span"],
|
|
table th[class*="span"],
|
|
.row-fluid table td[class*="span"],
|
|
.row-fluid table th[class*="span"] {
|
|
display: table-cell;
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Change the column widths to account for td/th padding */
|
|
.table td.span1,
|
|
.table th.span1 { width: calc((var(--grid-column-width) * 1) + var(--grid-gutter-width) * 0); }
|
|
.table td.span2,
|
|
.table th.span2 { width: calc((var(--grid-column-width) * 2) + var(--grid-gutter-width) * 1); }
|
|
.table td.span3,
|
|
.table th.span3 { width: calc((var(--grid-column-width) * 3) + var(--grid-gutter-width) * 2); }
|
|
.table td.span4,
|
|
.table th.span4 { width: calc((var(--grid-column-width) * 4) + var(--grid-gutter-width) * 3); }
|
|
.table td.span5,
|
|
.table th.span5 { width: calc((var(--grid-column-width) * 5) + var(--grid-gutter-width) * 4); }
|
|
.table td.span6,
|
|
.table th.span6 { width: calc((var(--grid-column-width) * 6) + var(--grid-gutter-width) * 5); }
|
|
.table td.span7,
|
|
.table th.span7 { width: calc((var(--grid-column-width) * 7) + var(--grid-gutter-width) * 6); }
|
|
.table td.span8,
|
|
.table th.span8 { width: calc((var(--grid-column-width) * 8) + var(--grid-gutter-width) * 7); }
|
|
.table td.span9,
|
|
.table th.span9 { width: calc((var(--grid-column-width) * 9) + var(--grid-gutter-width) * 8); }
|
|
.table td.span10,
|
|
.table th.span10 { width: calc((var(--grid-column-width) * 10) + var(--grid-gutter-width) * 9); }
|
|
.table td.span11,
|
|
.table th.span11 { width: calc((var(--grid-column-width) * 11) + var(--grid-gutter-width) * 10); }
|
|
.table td.span12,
|
|
.table th.span12 { width: calc((var(--grid-column-width) * 12) + var(--grid-gutter-width) * 11); }
|
|
|
|
/* TABLE BACKGROUNDS */
|
|
/* Exact selectors below required to override .table-striped */
|
|
|
|
.table tbody tr.success > td {
|
|
background-color: var(--success-background);
|
|
}
|
|
|
|
.table tbody tr.error > td {
|
|
background-color: var(--error-background);
|
|
}
|
|
|
|
.table tbody tr.warning > td {
|
|
background-color: var(--warning-background);
|
|
}
|
|
|
|
.table tbody tr.info > td {
|
|
background-color: var(--info-background);
|
|
}
|
|
|
|
/* Hover states for .table-hover */
|
|
.table-hover tbody tr.success:hover > td {
|
|
background-color: color-mix(in srgb, var(--success-background), black 5%);
|
|
}
|
|
|
|
.table-hover tbody tr.error:hover > td {
|
|
background-color: color-mix(in srgb, var(--error-background), black 5%);
|
|
}
|
|
|
|
.table-hover tbody tr.warning:hover > td {
|
|
background-color: color-mix(in srgb, var(--warning-background), black 5%);
|
|
}
|
|
|
|
.table-hover tbody tr.info:hover > td {
|
|
background-color: color-mix(in srgb, var(--info-background), black 5%);
|
|
}
|