From 9285d4fe6486c62d081497c3398964ea130ef6b8 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 20 Dec 2016 19:49:00 -0800
Subject: [PATCH] Sortable table styles moved to table component sheet

---
 ui/src/style/components/tables.scss | 52 +++++++++++++++++++++++++++++
 ui/src/style/pages/hosts.scss       | 48 --------------------------
 2 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index 6cfdf6e78..6760bbd5d 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -33,6 +33,58 @@ table .monotype {
   }
 }
 
+/*
+    Sortable Tables
+    ----------------------------------------------
+*/
+.sortable-header {
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease;
+  position: relative;
+
+  &:after {
+    content: '\e910';
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    color: #fff;
+    font-family: 'icomoon';
+    opacity: 0;
+    transform: translateY(-50%);
+    transition:
+      opacity 0.25s ease,
+      color 0.25s ease,
+      transform 0.35s ease;
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: $g19-ghost;
+    background-color: $g5-pepper;
+
+    &:after {
+      opacity: 1;
+    }
+  }
+  &.sorting-down,
+  &.sorting-up {
+    background-color: $g5-pepper;
+    color: $g19-ghost;
+
+    &:after {
+      opacity: 1;
+    }
+  }
+  &.sorting-down {
+
+    &:after {
+      transform: translateY(-50%) rotate(180deg);
+    }
+  }
+}
+
 /*
     Empty State for Tables
     ----------------------------------------------
diff --git a/ui/src/style/pages/hosts.scss b/ui/src/style/pages/hosts.scss
index a8b6e7e79..047afbc67 100644
--- a/ui/src/style/pages/hosts.scss
+++ b/ui/src/style/pages/hosts.scss
@@ -82,54 +82,6 @@
     font-weight: 900;
   }
 }
-
-.sortable-header {
-  transition:
-    color 0.25s ease,
-    background-color 0.25s ease;
-  position: relative;
-
-  &:after {
-    content: '\e910';
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 8px;
-    color: #fff;
-    font-family: 'icomoon';
-    opacity: 0;
-    transform: translateY(-50%);
-    transition:
-      opacity 0.25s ease,
-      color 0.25s ease,
-      transform 0.35s ease;
-  }
-
-  &:hover {
-    cursor: pointer;
-    color: $g19-ghost;
-    background-color: $g5-pepper;
-
-    &:after {
-      opacity: 1;
-    }
-  }
-  &.sorting-down,
-  &.sorting-up {
-    background-color: $g5-pepper;
-    color: $g19-ghost;
-
-    &:after {
-      opacity: 1;
-    }
-  }
-  &.sorting-down {
-
-    &:after {
-      transform: translateY(-50%) rotate(180deg);
-    }
-  }
-}
 .host-table-header {
   display: flex;
   align-items: center;