From b5051306210909e82b921008133ba1bd8f47f7b3 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 10 Jun 2018 20:17:14 +0200
Subject: [PATCH] fixed styling of sort-buttons in sortable tables

---
 templates/table/colonnade.lucius | 71 ++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/templates/table/colonnade.lucius b/templates/table/colonnade.lucius
index 63a42bb84..1da9b5e60 100644
--- a/templates/table/colonnade.lucius
+++ b/templates/table/colonnade.lucius
@@ -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;
+  }
 }