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