From e4051eca7b43c4ba300cbd9626883dc43e65f3f0 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sun, 16 Apr 2017 19:59:27 +0200
Subject: [PATCH] Fix mobile table2

---
 styles.css | 108 ++++++++++++++++++++++++++++++++++++++---------------
 table.scss |  56 +++++++++++++++++++++++++++
 tag.scss   |   3 +-
 3 files changed, 136 insertions(+), 31 deletions(-)

diff --git a/styles.css b/styles.css
index 48507a1..c517465 100644
--- a/styles.css
+++ b/styles.css
@@ -4775,38 +4775,48 @@ section > h2 {
 /* Content box */
 /* Navigation */
 /* Colors */
-.table.red caption {
-  background: #B8312F;
-  color: #fff; }
-.table.red thead {
-  background: #B8312F;
-  color: #fff; }
+.table.red {
+  background: none; }
+  .table.red caption {
+    background: #B8312F;
+    color: #fff; }
+  .table.red thead {
+    background: #B8312F;
+    color: #fff; }
 
-.table.orange caption {
-  background: #FBA026;
-  color: #fff; }
-.table.orange thead {
-  background: #FBA026;
-  color: #fff; }
+.table.orange {
+  background: none; }
+  .table.orange caption {
+    background: #FBA026;
+    color: #fff; }
+  .table.orange thead {
+    background: #FBA026;
+    color: #fff; }
 
-.table.green caption {
-  background: #41A85F;
-  color: #fff; }
-.table.green thead {
-  background: #41A85F;
-  color: #fff; }
+.table.green {
+  background: none; }
+  .table.green caption {
+    background: #41A85F;
+    color: #fff; }
+  .table.green thead {
+    background: #41A85F;
+    color: #fff; }
 
-.table.blue caption {
-  background: #2C82C9;
-  color: #fff; }
-.table.blue thead {
-  background: #2C82C9;
-  color: #fff; }
+.table.blue {
+  background: none; }
+  .table.blue caption {
+    background: #2C82C9;
+    color: #fff; }
+  .table.blue thead {
+    background: #2C82C9;
+    color: #fff; }
 
-.table.white caption {
-  background: #fff; }
-.table.white thead {
-  background: #fff; }
+.table.white {
+  background: none; }
+  .table.white caption {
+    background: #fff; }
+  .table.white thead {
+    background: #fff; }
 
 table.table {
   -moz-box-sizing: border-box;
@@ -4870,6 +4880,43 @@ table.list th {
 table.list td {
   padding: 2px 5px 2px 5px; }
 
+@media screen and (max-width: 600px) {
+  table.table {
+    border: 0;
+    width: 100%; }
+
+  table.table thead {
+    display: none; }
+
+  table.table tr {
+    display: block;
+    margin-bottom: .625em; }
+
+  table.table td {
+    border-left: 1px solid #b7b7b7;
+    border-right: 1px solid #b7b7b7;
+    display: block;
+    font-size: .8rem;
+    text-align: right;
+    position: relative;
+    height: 2rem;
+    line-height: 2rem; }
+
+  table.table td:before {
+    content: attr(data-label);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 20px;
+    font-weight: bold;
+    display: inline-block; }
+
+  table.table td:last-child {
+    border-bottom: 1px solid #b7b7b7; }
+
+  table.table tbody tr {
+    height: auto; } }
 .nobreak {
   white-space: nowrap; }
 
@@ -4882,6 +4929,7 @@ table.list td {
   cursor: pointer;
   border: 1px solid #b7b7b7;
   padding: 5px 10px 5px 10px;
-  font-size: 0.7em;
+  font-size: 0.7rem;
   color: #fff;
-  display: inline-block; }
+  display: inline-block;
+  line-height: 1rem; }
diff --git a/table.scss b/table.scss
index 5151f66..4181995 100644
--- a/table.scss
+++ b/table.scss
@@ -1,6 +1,8 @@
 @import "_mixins", "_vars";
 
 .table.red {
+    background: none;
+
     caption {
         background: #B8312F;
         color: #fff;
@@ -13,6 +15,8 @@
 }
 
 .table.orange {
+    background: none;
+
     caption {
         background: #FBA026;
         color: #fff;
@@ -25,6 +29,8 @@
 }
 
 .table.green {
+    background: none;
+    
     caption {
         background: #41A85F;
         color: #fff;
@@ -37,6 +43,8 @@
 }
 
 .table.blue {
+    background: none;
+
     caption {
         background: #2C82C9;
         color: #fff;
@@ -49,6 +57,8 @@
 }
 
 .table.white {
+    background: none;
+
     caption {
         background: #fff;
     }
@@ -163,6 +173,52 @@ table.list {
     }
 }
 
+@media screen and (max-width: 600px) {
+    table.table {
+        border: 0;
+        width: 100%;
+    }
+
+    table.table thead {
+        display: none;
+    }
+
+    table.table tr {
+        display: block;
+        margin-bottom: .625em;
+    }
+
+    table.table td {
+        border-left: 1px solid $content-border-color;
+        border-right: 1px solid $content-border-color;
+        display: block;
+        font-size: .8rem;
+        text-align: right;
+        position: relative;
+        height: 2rem;
+        line-height: 2rem;
+    }
+
+    table.table td:before {
+        content: attr(data-label);
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 20px;
+        font-weight: bold;
+        display: inline-block;
+    }
+
+    table.table td:last-child {
+        border-bottom: 1px solid $content-border-color;
+    }
+
+    table.table tbody tr {
+        height: auto;
+    }
+}
+
 .nobreak {
     white-space: nowrap;
 }
\ No newline at end of file
diff --git a/tag.scss b/tag.scss
index 8fc9092..6ea707b 100644
--- a/tag.scss
+++ b/tag.scss
@@ -4,7 +4,8 @@
     cursor: pointer;
     border: 1px solid $content-border-color;
     padding: 5px 10px 5px 10px;
-    font-size: 0.7em;
+    font-size: 0.7rem;
     color: #fff;
     display: inline-block;
+    line-height: 1rem;
 }