45 lines
1022 B
Plaintext
45 lines
1022 B
Plaintext
/* SORTABLE TABLE */
|
|
.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;
|
|
}
|
|
}
|