From: Tim Hartwick <tdhartwick2@gmail.com>
Date: Mon, 25 Jan 2016 23:43:21 +0000 (-0800)
Subject: small and large offset work. updated syntax
X-Git-Tag: v2.0.0-rc.1~31
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cb32c1fc88b0236d4800387f1468194e6c85aef1;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

small and large offset work. updated syntax
---

diff --git a/scss/ink/components/_grid.scss b/scss/ink/components/_grid.scss
index a5044b5d..0172017b 100755
--- a/scss/ink/components/_grid.scss
+++ b/scss/ink/components/_grid.scss
@@ -116,8 +116,8 @@ th.column.last {
 }
 
 @for $i from 1 through ($grid-column-count - 1) {
-  td.offset-by-#{$i},
-  th.offset-by-#{$i} {
+  td.large-offset-#{$i},
+  th.large-offset-#{$i} {
     //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 37345d72..95836fbc 100755
--- a/scss/ink/components/_media-query.scss
+++ b/scss/ink/components/_media-query.scss
@@ -86,6 +86,14 @@ table[class="body"] .column {
   }
 }
 
+@for $i from 1 through ($grid-column-count - 1) {
+  table[class="body"] td.small-offset-#{$i},
+  table[class="body"] th.small-offset-#{$i} {
+    //1.5 takes in effect a whole empty cell.
+    margin-left: grid-calc-pct($i, $grid-column-count) !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 a613653b..c5c2f09a 100644
--- a/testing/src/pages/index.html
+++ b/testing/src/pages/index.html
@@ -2,6 +2,28 @@
   <tr>
     <td>
 
+    <table class="row">
+      <tr>
+        <th class="large-8 small-8 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-4 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 large-offset-8 small-4 small-offset-8 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>
+
+
+
     <table class="row">
       <tr>
         <th class="large-8 small-12 columns">
@@ -16,13 +38,12 @@
 
     <table class="row">
       <tr>
-        <th class="large-4 offset-by-8 small-12 columns" style="background: red;">
+        <th class="large-4 large-offset-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