From 5e70ae8e75a5778c7318da5956560ddeb5d631a2 Mon Sep 17 00:00:00 2001
From: Tim Hartwick <tdhartwick2@gmail.com>
Date: Mon, 25 Jan 2016 15:32:26 -0800
Subject: [PATCH] large offsets working, basic buttons working as well

---
 scss/ink/components/_grid.scss        |   3 +-
 scss/ink/components/_media-query.scss |   7 --
 testing/src/pages/index.html          |  27 +++---
 testing/src/pages/inline-lists.html   | 114 ++++++++++++++++++++++++++
 4 files changed, 132 insertions(+), 19 deletions(-)
 create mode 100644 testing/src/pages/inline-lists.html

diff --git a/scss/ink/components/_grid.scss b/scss/ink/components/_grid.scss
index a1d96d8e..a5044b5d 100755
--- a/scss/ink/components/_grid.scss
+++ b/scss/ink/components/_grid.scss
@@ -118,7 +118,8 @@ th.column.last {
 @for $i from 1 through ($grid-column-count - 1) {
   td.offset-by-#{$i},
   th.offset-by-#{$i} {
-    padding-left: grid-calc-px($i, $grid-column-count, $container-width);
+    //1.5 takes in effect a whole empty cell.
+    padding-left: grid-calc-px($i, $grid-column-count, $container-width) + 1.5 * $grid-column-gutter;
   }
 }
 
diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss
index eb91d6fd..37345d72 100755
--- a/scss/ink/components/_media-query.scss
+++ b/scss/ink/components/_media-query.scss
@@ -86,13 +86,6 @@ table[class="body"] .column {
   }
 }
 
-@for $i from 1 through ($grid-column-count - 1) {
-  table[class="body"] td.offset-by-#{$i}, 
-  table[class="body"] th.offset-by-#{$i} {
-    padding-left: 0 !important;
-  }
-}
-
 table[class="body"] table.columns td.expander,
 table[class="body"] table.columns th.expander {
   display: none !important;
diff --git a/testing/src/pages/index.html b/testing/src/pages/index.html
index cd703bd8..a613653b 100644
--- a/testing/src/pages/index.html
+++ b/testing/src/pages/index.html
@@ -4,20 +4,25 @@
 
     <table class="row">
       <tr>
-        <td class="large-12 small-12 columns">
-          <table class="menu">
-            <tr>
-            {{#repeat 10}}
-              <td>
-                <a href="http://google.com">One</a>
-              </td>
-            {{/repeat}}
-            </tr>
-          </table>
-        </td>
+        <th class="large-8 small-12 columns">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
+        </th>
+
+        <th class="large-4 small-12 columns">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
+        </th>
       </tr>
     </table>
 
+    <table class="row">
+      <tr>
+        <th class="large-4 offset-by-8 small-12 columns" style="background: red;">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
+        </th>
+      </tr>
+    </table>
+
+
     </td>
   </tr>
 </table>
\ No newline at end of file
diff --git a/testing/src/pages/inline-lists.html b/testing/src/pages/inline-lists.html
new file mode 100644
index 00000000..0ab106da
--- /dev/null
+++ b/testing/src/pages/inline-lists.html
@@ -0,0 +1,114 @@
+<table class="container">
+  <tr>
+    <td>
+
+    <table class="row">
+      <tr>
+        <td class="large-12 small-12 columns">
+          <table class="menu">
+            <tr>
+            {{#repeat 10}}
+              <td>
+                <a href="http://google.com">One</a>
+              </td>
+            {{/repeat}}
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+
+    <table class="row">
+      <th class="large-12 small-12 columns" style="background: pink;">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
+      </th>
+    </table>
+
+    <table class="row">
+      <tr>
+        <td class="large-12 small-12 columns">
+          <table class="menu simple">
+            <tr>
+            {{#repeat 10}}
+              <td>
+                <a href="http://google.com">One</a>
+              </td>
+            {{/repeat}}
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+
+    <table class="row">
+      <th class="large-12 small-12 columns" style="background: pink;">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
+      </th>
+    </table>
+
+    <table class="row">
+      <tr>
+        <td class="large-12 small-12 columns">
+          <table class="menu vertical">
+            <tr>
+            {{#repeat 10}}
+              <td>
+                <a href="http://google.com">One</a>
+              </td>
+            {{/repeat}}
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+
+    <table class="row">
+      <th class="large-12 small-12 columns" style="background: pink;">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
+      </th>
+    </table>
+
+
+    <table class="row">
+      <tr>
+        <td class="large-12 small-12 columns">
+          <table class="menu vertical">
+            <tr>
+            <td>
+                <a href="http://google.com">One</a>
+                <table class="menu vertical">
+                  <tr>
+                    <td>
+                      <a href="http://google.com">Uno</a>
+                    </td>
+                    <td>
+                      <a href="http://google.com">Dos</a>
+                    </td>
+                    <td>
+                      <a href="http://google.com">Tres</a>
+                    </td>
+                  </tr>
+                </table>
+            </td>
+            {{#repeat 10}}
+              <td>
+                <a href="http://google.com">One</a>
+              </td>
+            {{/repeat}}
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+
+    <table class="row">
+      <th class="large-12 small-12 columns" style="background: pink;">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
+      </th>
+    </table>
+
+
+
+    </td>
+  </tr>
+</table>
\ No newline at end of file
-- 
2.47.3