106 lines
1.8 KiB
Plaintext
106 lines
1.8 KiB
Plaintext
|
|
.table {
|
|
margin: 21px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.table--striped {
|
|
|
|
.table__row:not(.no-stripe):nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
}
|
|
|
|
.table--hover {
|
|
|
|
.table__row:not(.no-hover):not(.table__row--head):hover {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
/* TABLE DESIGN */
|
|
.table__row {
|
|
|
|
/* TODO: move outside of table__row as soon as tds and ths get their own class */
|
|
/* .table__td, .table__th { */
|
|
td, th {
|
|
padding-top: 14px;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
vertical-align: top;
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* .table__td { */
|
|
td {
|
|
font-size: 16px;
|
|
color: #808080;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
&.table__row--head {
|
|
background-color: var(--color-dark);
|
|
}
|
|
|
|
/* .table__th { */
|
|
th {
|
|
position: relative;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
line-height: 1.4;
|
|
padding-top: 15px;
|
|
padding-bottom: 10px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.table__td-content {
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table__th-link {
|
|
color: white;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
background-color: var(--color-light);
|
|
}
|
|
}
|
|
|
|
/* SORTABLE */
|
|
table th.sorted-asc,
|
|
table th.sorted-desc {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
table th.sortable::after,
|
|
table th.sortable::before {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: 0;
|
|
height: 0;
|
|
transform: translateY(-100%);
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
}
|
|
|
|
table th.sortable::before {
|
|
top: 21px;
|
|
border-top: 8px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
table th.sortable::after {
|
|
top: 9px;
|
|
border-bottom: 8px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
table th.sorted-asc::before {
|
|
border-top: 8px solid var(--color-light);
|
|
}
|
|
|
|
table th.sorted-desc::after {
|
|
border-bottom: 8px solid var(--color-light);
|
|
}
|