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

fixed styling of sort-buttons in sortable tables

Browse Source
This commit is contained in:
Felix Hamann 2018-06-10 20:17:14 +02:00
parent c54495fe58
commit b505130621
1 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
templates/table/colonnade.lucius
View File

@ -49,8 +49,8 @@
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
line-height: 1.4; line-height: 1.4;
padding-top: 15px; padding-top: 20px;
padding-bottom: 10px; padding-bottom: 15px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
} }
@ -66,40 +66,49 @@
font-weight: bold; font-weight: bold;
&:hover { &:hover {
background-color: var(--color-light); color: inherit;
} }
} }
/* SORTABLE */ /* SORTABLE */
table th.sorted-asc, .table {
table th.sorted-desc {
color: var(--color-light);
}
table th.sortable::after, /* TODO: move outside of table as soon as tds and ths get their own class */
table th.sortable::before { th.sortable {
content: ''; position: relative;
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 { th.sortable::after,
top: 21px; th.sortable::before {
border-top: 8px solid rgba(0, 0, 0, 0.1); content: '';
} position: absolute;
table th.sortable::after { right: 0;
top: 9px; width: 0;
border-bottom: 8px solid rgba(0, 0, 0, 0.1); height: 0;
} left: 50%;
table th.sorted-asc::before { transform: translate(-50%, -100%);
border-top: 8px solid var(--color-light); border-left: 8px solid transparent;
} border-right: 8px solid transparent;
border-bottom: 8px solid rgba(255, 255, 255, 0.4);
}
table th.sorted-desc::after { th.sortable::before {
border-bottom: 8px solid var(--color-light); /* 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 */
bottom: -3px;
transform: translateX(-8px) scale(1, -1);
transform-origin: top;
}
th.sortable::after {
top: 15px;
}
th.sortable:hover::before,
th.sorted-asc:hover::after,
th.sorted-asc::before,
th.sorted-desc:hover::after,
th.sorted-desc::after {
border-bottom-color: white;
}
} }