get rid of assets/img in favor of css arrows

2 files changed, 38 insertions, 14 deletions

diff --git a/lib/patterns.less b/lib/patterns.less
index 3ce02ea10..a3a949244 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -131,15 +131,17 @@ div.topbar {
       position: relative;
       a.menu {
         &:after {
-          width: 7px;
-          height: 7px;
+          width: 0px;
+          height: 0px;
           display: inline-block;
-          background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;
           content: "↓";
           text-indent: -99999px;
           vertical-align: top;
           margin-top: 8px;
           margin-left: 4px;
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 4px solid #fff;
           .opacity(50);
         }
       }
diff --git a/lib/tables.less b/lib/tables.less
index 5cde1b5ce..7c315ff35 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -44,32 +44,54 @@ table.zebra-striped {
   // Tablesorting styles w/ jQuery plugin
   th.header { // For tablesorter tables, make THs have a pointer on hover
     cursor: pointer;
-    padding-right: 20px;
+    &:after {
+      width: 0px;
+      height: 0px;
+      display: inline-block;
+      float: right;
+      margin-top:7px;
+      content: "↓";
+      text-indent: -99999px;
+      vertical-align: top;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-bottom: 4px solid #000;
+      visibility:hidden;
+      .box-shadow(0 1px 0 #fff);
+      .opacity(30);
+    }
   }
   th.headerSortUp,
   th.headerSortDown { // Style the sorted column headers (THs)
-    background-image: url(assets/img/tablesorter-indicators.png);
-    background-position: right -23px;
-    background-repeat: no-repeat;
     background-color: rgba(141,192,219,.25);
     text-shadow: 0 1px 1px rgba(255,255,255,.75);
     .border-radius(3px 3px 0 0);
   }
   th.header:hover { // Style the ascending (reverse alphabetical) column header
-    background-image: url(assets/img/tablesorter-indicators.png);
-    background-position: right 15px;
-    background-repeat: no-repeat;
+    &:after {
+      visibility:visible;
+    }
   }
   th.actions:hover {
     background-image: none;
   }
   th.headerSortDown,
   th.headerSortDown:hover { // Style the descending (alphabetical) column header
-    background-position: right -25px;
+    &:after {
+      visibility:visible;
+      .opacity(60);
+    }
   }
-  th.headerSortUp,
-  th.headerSortUp:hover { // Style the ascending (reverse alphabetical) column header
-    background-position: right -65px;
+  th.headerSortUp { // Style the ascending (reverse alphabetical) column header
+    &:after {
+      border-bottom: none;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid #000;
+      visibility:visible;
+      .box-shadow(none); //can't add boxshadow to downward facing arrow :(
+      .opacity(60);
+    }
   }
   // Blue Table Headings
   th.blue {