From 5fe1240d5d850ca6a9d2d30fd19a013131b3cec2 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Fri, 18 Oct 2013 13:34:09 -0400
Subject: [PATCH] Adds responsive styles to table

---
 src/collections/table.less | 67 ++++++++++++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/collections/table.less b/src/collections/table.less
index c39738055..1a7b6f13c 100755
--- a/src/collections/table.less
+++ b/src/collections/table.less
@@ -100,6 +100,53 @@
   display: block;
 }
 
+
+/* Responsive */
+
+@media only screen and (max-width : 768px) {
+  .ui.table {
+    display: block;
+    padding: 0em;
+  }
+  .ui.table thead,
+  .ui.table tfoot {
+    display: none;
+  }
+  .ui.table tbody {
+    display: block;
+  }
+  .ui.table tr {
+    display: block;
+  }
+
+  .ui.table tr > td {
+    width: 100% !important;
+    display: block;
+    border: none !important;
+    padding: 0.25em 0.75em;
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
+  }
+  .ui.table td:first-child {
+    font-weight: bold;
+    padding-top: 1em;
+  }
+  .ui.table td:last-child {
+    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
+    padding-bottom: 1em;
+  }
+
+  /* Clear BG Colors */
+  .ui.table tr > td.warning,
+  .ui.table tr > td.error,
+  .ui.table tr > td.active,
+  .ui.table tr > td.positive,
+  .ui.table tr > td.negative {
+    background-color: transparent !important;
+  }
+}
+
+
+
 /*******************************
              States
 *******************************/
@@ -168,8 +215,8 @@
 .ui.table tr.negative:hover td,
 .ui.table td:hover.negative,
 .ui.table th:hover.negative {
-  background-color: #F2E8E8 !important;
-  color: #CD2929 !important;
+  background-color: #F2E8E8;
+  color: #CD2929;
 }
 
 /*--------------
@@ -185,16 +232,16 @@
 .ui.table tr.error td,
 .ui.table td.error,
 .ui.table th.error {
-  background-color: #F9F4F4 !important;
-  color: #CD2929 !important;
+  background-color: #F9F4F4;
+  color: #CD2929;
 }
 .ui.celled.table tr.error:hover td,
 .ui.celled.table tr:hover td.error,
 .ui.table tr.error:hover td,
 .ui.table td:hover.error,
 .ui.table th:hover.error {
-  background-color: #F2E8E8 !important;
-  color: #CD2929 !important;
+  background-color: #F2E8E8;
+  color: #CD2929;
 }
 
 /*--------------
@@ -211,15 +258,15 @@
 .ui.table td.warning,
 .ui.table th.warning {
   background-color: #FBF6E9;
-  color: #7D6C00 !important;
+  color: #7D6C00;
 }
 .ui.celled.table tr.warning:hover td,
 .ui.celled.table tr:hover td.warning,
 .ui.table tr.warning:hover td,
 .ui.table td:hover.warning,
 .ui.table th:hover.warning {
-  background-color: #F3EDDC !important;
-  color: #7D6C00 !important;
+  background-color: #F3EDDC;
+  color: #7D6C00;
 }
 
 
@@ -236,7 +283,7 @@
 
 .ui.table tr.active td,
 .ui.table tr td.active {
-  background-color: #E0E0E0 !important;
+  background-color: #E0E0E0;
   color: rgba(50, 50, 50, 0.9);
   /* border-color: rgba(0, 0, 0, 0.15) !important; */
 }