117 lines
2.1 KiB
Plaintext
117 lines
2.1 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.03);
|
|
}
|
|
}
|
|
|
|
.table--hover {
|
|
|
|
.table__row:not(.no-hover):not(.table__row--head):hover {
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* .table__td { */
|
|
td {
|
|
font-size: 16px;
|
|
color: #808080;
|
|
line-height: 1.4;
|
|
vertical-align: top;
|
|
}
|
|
|
|
&.table__row--head {
|
|
background-color: var(--color-dark);
|
|
}
|
|
|
|
/* .table__th { */
|
|
th {
|
|
position: relative;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
line-height: 1.4;
|
|
padding-top: 20px;
|
|
padding-bottom: 15px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.table__td-content {
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table__th-link {
|
|
color: white;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
/* SORTABLE */
|
|
.table {
|
|
|
|
/* TODO: move outside of table as soon as tds and ths get their own class */
|
|
th.sortable {
|
|
position: relative;
|
|
padding-right: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
th.sortable::after,
|
|
th.sortable::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 4px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 8px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
th.sortable::before {
|
|
/* magic numbers to move arrow back in the right position after flipping it.
|
|
this allows us to use the same border for the up and the down arrow */
|
|
transform: translateY(150%) scale(1, -1);
|
|
transform-origin: top;
|
|
}
|
|
|
|
th.sortable::after {
|
|
transform: translateY(-150%);
|
|
}
|
|
|
|
th.sortable:hover::before,
|
|
th.sortable:hover::after {
|
|
border-bottom-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
th.sorted-asc::before,
|
|
th.sorted-desc::after {
|
|
border-bottom-color: white !important;
|
|
}
|
|
}
|