From 0c91bb83d83558bfce25564790eac67968bcc51a Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 17 Jun 2018 22:29:38 +0200
Subject: [PATCH] moved sort-handles back to the side of the th

---
 templates/table/colonnade.lucius | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/templates/table/colonnade.lucius b/templates/table/colonnade.lucius
index 6385e29c4..66824f8e9 100644
--- a/templates/table/colonnade.lucius
+++ b/templates/table/colonnade.lucius
@@ -7,14 +7,14 @@
 .table--striped {
 
   .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__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 */
   th.sortable {
     position: relative;
+    padding-right: 24px;
+    cursor: pointer;
   }
 
   th.sortable::after,
   th.sortable::before {
     content: '';
     position: absolute;
-    right: 0;
+    top: 50%;
+    right: 4px;
     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);
@@ -95,20 +96,21 @@
   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: translateY(150%) scale(1, -1);
     transform-origin: top;
   }
 
   th.sortable::after {
-    top: 15px;
+    transform: translateY(-150%);
   }
 
   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-desc:hover::after,
   th.sorted-desc::after {
-    border-bottom-color: white;
+    border-bottom-color: white !important;
   }
 }