collapse for small working dude

diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss
index 6f456583ddfa26c6a2f2ef08c06a3e0d849630f0..8ae2541dc9e175b849ce39fb9763f5addbb8bc68 100755 (executable)
--- 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 969968f1cdbdcd8e7191a88b9376d175bb77ad6a..ad093a858d029edcb6ed366dcf4072ded91d37ed 100644 (file)
--- 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>