133 lines
3.1 KiB
CSS
133 lines
3.1 KiB
CSS
@import '../colors.css';
|
|
@import '../variables.css';
|
|
|
|
:root {
|
|
--table-font-size: calc(1.3 * var(--unit));
|
|
--table-header-font-size: calc(1.2 * var(--unit));
|
|
--table-header-sort-icon-size: calc(1.6 * var(--unit));
|
|
--table-header-color: color(#000 a(54%));
|
|
--table-header-sorted-color: color(#000 a(87%));
|
|
--table-header-sorted-icon-hover-color: color(#000 a(26%));
|
|
--table-dividers: 1px solid #e6e6e6;
|
|
--table-row-color: color(#000 a(87%));
|
|
--table-hover-color: #eee;
|
|
--table-selection-color: #f5f5f5;
|
|
--table-row-height: calc(4.8 * var(--unit));
|
|
--table-column-spacing: calc(3.6 * var(--unit));
|
|
--table-column-padding: calc(var(--table-column-spacing) / 2);
|
|
--table-cell-padding: calc(2.4 * var(--unit));
|
|
--table-cell-top: calc(var(--table-cell-padding) / 2);
|
|
}
|
|
|
|
.table {
|
|
background-color: var(--color-white);
|
|
border-collapse: collapse;
|
|
font-size: var(--table-font-size);
|
|
width: 100%;
|
|
|
|
@apply --reset;
|
|
}
|
|
|
|
.table > head,
|
|
.head {
|
|
padding-bottom: calc(0.3 * var(--unit));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table > tbody > tr,
|
|
.row {
|
|
color: var(--table-row-color);
|
|
height: var(--table-row-height);
|
|
transition-duration: 0.28s;
|
|
transition-property: background-color;
|
|
transition-timing-function: var(--animation-curve-default);
|
|
|
|
&:hover,
|
|
&.selected:hover { background-color: var(--table-hover-color); }
|
|
&.selected { background-color: var(--table-selection-color); }
|
|
}
|
|
|
|
/* common styles for all kinds of cells */
|
|
.table > thead > tr > th,
|
|
.table > tbody > tr > th,
|
|
.table > thead > tr > td,
|
|
.table > tbody > tr > td,
|
|
.rowCell,
|
|
.headCell {
|
|
border-bottom: var(--table-dividers);
|
|
height: var(--table-row-height);
|
|
padding: 0 var(--table-column-padding) 12px var(--table-column-padding);
|
|
text-align: left;
|
|
|
|
&:first-of-type { padding-left: 24px; }
|
|
&:last-of-type { padding-right: 24px; }
|
|
&.numeric { text-align: right; }
|
|
|
|
&.checkboxCell {
|
|
padding-right: 5px;
|
|
width: calc(1.8 * var(--unit));
|
|
}
|
|
}
|
|
|
|
/* styles for both header and normal body cells */
|
|
.table > tbody > tr > th,
|
|
.table > tbody > tr > td,
|
|
.rowCell {
|
|
border-top: var(--table-dividers);
|
|
padding-top: var(--table-cell-top);
|
|
vertical-align: middle;
|
|
|
|
&.checkboxCell {
|
|
& > * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* styles for header cells both in body and header */
|
|
.table > thead > tr > th,
|
|
.table > tbody > tr > th,
|
|
.headCell {
|
|
color: var(--table-header-color);
|
|
font-size: var(--table-header-font-size);
|
|
font-weight: 500;
|
|
height: var(--table-row-height);
|
|
line-height: calc(2.4 * var(--unit));
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* styles for all cells in header */
|
|
.table > thead > tr > th,
|
|
.table > thead > tr > td,
|
|
.headCell {
|
|
padding-bottom: 8px;
|
|
vertical-align: bottom;
|
|
|
|
&.checkboxCell {
|
|
& > * {
|
|
margin: 0 0 3px;
|
|
}
|
|
}
|
|
|
|
&.sorted {
|
|
color: var(--table-header-sorted-color);
|
|
cursor: pointer;
|
|
|
|
&:hover .sortIcon {
|
|
color: var(--table-header-sorted-icon-hover-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sortIcon {
|
|
display: inline-block;
|
|
font-size: calc(1.6 * var(--unit));
|
|
margin-right: 3px;
|
|
transition: 0.28s transform var(--animation-curve-default);
|
|
vertical-align: sub;
|
|
|
|
&.asc {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|