From: Tim Hartwick <tdhartwick2@gmail.com>
Date: Tue, 19 Jan 2016 00:55:23 +0000 (-0800)
Subject: collapse for small working dude
X-Git-Tag: v2.0.0-rc.1~41
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c49de25a94f6dc28a730c8e1b915706c56eb5c63;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

collapse for small working dude
---

diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss
index 6f456583..8ae2541d 100755
--- a/scss/ink/components/_media-query.scss
+++ b/scss/ink/components/_media-query.scss
@@ -32,12 +32,24 @@ table[class="body"] .container {
 }
 
 //If it supports border-box, why not? Am I right?
+//Also, by default padd that to the grid-column-gutter variable
 table[class="body"] .columns,
 table[class="body"] .column {
   height: auto !important;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  padding-left: $grid-column-gutter !important;
+  padding-right: $grid-column-gutter !important;
+}
+
+//If it's collapsed make it so.
+.collapse {
+  table[class="body"] & .columns,
+  table[class="body"] & .column {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 }
 
 //Basic grid rules
@@ -49,7 +61,8 @@ table[class="body"] .column {
   }
 }
 
-//If it's the last column, give it block and 100% width to knock down the wimpy columns to their own row.
+//If it's the last column in column count (12 by default),
+//give it block and 100% width to knock down the wimpy columns to their own row.
 .columns td.small-#{$grid-column-count},
 .column td.small-#{$grid-column-count},
 .columns th.small-#{$grid-column-count},
@@ -106,8 +119,6 @@ table[class="body"] .hide-for-desktop {
 }
 
 
-
-
 }
 
 // table[class="body"] table.inline-list {
diff --git a/testing/src/pages/tim-test.html b/testing/src/pages/tim-test.html
index 969968f1..ad093a85 100644
--- a/testing/src/pages/tim-test.html
+++ b/testing/src/pages/tim-test.html
@@ -124,43 +124,6 @@
         </tr>
       </table>
 
-      <table class="row collapse">
-        <tr>
-          <th class="large-2 small-12 columns first" style="background: red;">
-            <table>
-              <tr>
-                <th>
-                  <p>
-                    One word
-                  </p>
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-4 small-4 columns" style="background: green;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-6 small-8 columns last" style="background: blue;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-        </tr>
-      </table>
-
 
 <!--       <table class="row">
         <tr>