fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved sort-handles back to the side of the th

Browse Source
This commit is contained in:
Felix Hamann 2018-06-17 22:29:38 +02:00
parent e2f37699d9
commit 0c91bb83d8
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
templates/table/colonnade.lucius
View File

@ -7,14 +7,14 @@
.table--striped { .table--striped {
.table__row:not(.no-stripe):nth-child(even) { .table__row:not(.no-stripe):nth-child(even) {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.03);
} }
} }
.table--hover { .table--hover {
.table__row:not(.no-hover):not(.table__row--head):hover { .table__row:not(.no-hover):not(.table__row--head):hover {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.07);
} }
} }
@ -76,17 +76,18 @@
/* TODO: move outside of table as soon as tds and ths get their own class */ /* TODO: move outside of table as soon as tds and ths get their own class */
th.sortable { th.sortable {
position: relative; position: relative;
padding-right: 24px;
cursor: pointer;
} }
th.sortable::after, th.sortable::after,
th.sortable::before { th.sortable::before {
content: ''; content: '';
position: absolute; position: absolute;
right: 0; top: 50%;
right: 4px;
width: 0; width: 0;
height: 0; height: 0;
left: 50%;
transform: translate(-50%, -100%);
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-bottom: 8px solid rgba(255, 255, 255, 0.4); border-bottom: 8px solid rgba(255, 255, 255, 0.4);
@ -95,20 +96,21 @@
th.sortable::before { th.sortable::before {
/* magic numbers to move arrow back in the right position after flipping it. /* 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 */ this allows us to use the same border for the up and the down arrow */
bottom: -3px; transform: translateY(150%) scale(1, -1);
transform: translateX(-8px) scale(1, -1);
transform-origin: top; transform-origin: top;
} }
th.sortable::after { th.sortable::after {
top: 15px; transform: translateY(-150%);
} }
th.sortable:hover::before, th.sortable:hover::before,
th.sorted-asc:hover::after, th.sortable:hover::after {
border-bottom-color: rgba(255, 255, 255, 0.7);
}
th.sorted-asc::before, th.sorted-asc::before,
th.sorted-desc:hover::after,
th.sorted-desc::after { th.sorted-desc::after {
border-bottom-color: white; border-bottom-color: white !important;
} }
} }