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

57
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 {
position: relative;
}
th.sortable::after,
th.sortable::before {
content: ''; content: '';
position: absolute; position: absolute;
right: 0; right: 0;
width: 0; width: 0;
height: 0; height: 0;
transform: translateY(-100%); 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);
}
table th.sortable::before { th.sortable::before {
top: 21px; /* magic numbers to move arrow back in the right position after flipping it.
border-top: 8px solid rgba(0, 0, 0, 0.1); this allows us to use the same border for the up and the down arrow */
} bottom: -3px;
table th.sortable::after { transform: translateX(-8px) scale(1, -1);
top: 9px; transform-origin: top;
border-bottom: 8px solid rgba(0, 0, 0, 0.1); }
}
table th.sorted-asc::before {
border-top: 8px solid var(--color-light);
}
table th.sorted-desc::after { th.sortable::after {
border-bottom: 8px solid var(--color-light); 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;
}
} }