collapse is good enough for now. still needs some outlook love, but pretty good

diff --git a/scss/ink/components/_block-grid.scss b/scss/ink/components/_block-grid.scss
index c280b0ac79601c88f5ea4a5425ef37fa9017f3dc..6fbed5972998a3a6314b82748a225b09d58438dc 100755 (executable)
--- a/scss/ink/components/_block-grid.scss
+++ b/scss/ink/components/_block-grid.scss
@@ -14,7 +14,7 @@ $block-grid-elements: 8 !default;
 
 ///Defualt gutter between elements in the block grid.
 ///@type Number
-$block-grid-spacing: $column-gutter !default;
+$block-grid-spacing: $grid-column-gutter !default;
 
 ///Creates all of the block-grid classes.
 @mixin block-grid {

diff --git a/scss/ink/components/_grid.scss b/scss/ink/components/_grid.scss
index 3216b14958050f90014b50d41c2c5b26f514f7c0..60b3c25132a34cdf0bc6e7f18d966588232dbf9f 100755 (executable)
--- a/scss/ink/components/_grid.scss
+++ b/scss/ink/components/_grid.scss
@@ -22,7 +22,7 @@ $column-padding-bottom: 10px !default;
 
 /// Default padding for the right of a sub-column.
 /// @type Number
-$sub-column-padding-right: $column-gutter / 2 !default;
+$sub-column-padding-right: $grid-column-gutter / 2 !default;
 
 table {
   &.body {
@@ -80,12 +80,23 @@ th.column.last {
   th.large-#{$i}.last {
     padding-right: $grid-column-gutter;
   }
-
-  td.large-#{$i}.collapse,
-  th.large-#{$i}.collapse {
-    padding-right: 0;
-    padding-left: 0;
-    width: grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter;
+  
+  //Collapsed logic
+  .collapse {
+    td.large-#{$i},
+    th.large-#{$i} {
+      padding-right: 0;
+      padding-left: 0;
+      width: grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter;
+    }
+    
+    //Gotta give it that extra love for the first and last columns.
+    td.large-#{$i}.first,
+    th.large-#{$i}.first,
+    td.large-#{$i}.last,
+    th.large-#{$i}.last {
+      width: grid-calc-px($i, $grid-column-count, $container-width) + ($grid-column-gutter * 1.5);
+    }
   }
 }
 

diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss
index 750055e77fc7e67a453b4f724d00694a37824e1e..6f456583ddfa26c6a2f2ef08c06a3e0d849630f0 100755 (executable)
--- a/scss/ink/components/_media-query.scss
+++ b/scss/ink/components/_media-query.scss
@@ -17,113 +17,110 @@ $small-container-width: 95% !default;
 $small-range: $container-width !default;
 
 @media only screen and (max-width: #{$small-range}) {
+  
+table[class="body"] img {
+  width: auto !important;
+  height: auto !important;
+}
 
-  table[class="body"] img {
-    width: auto !important;
-    height: auto !important;
-  }
-
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
+table[class="body"] center {
+  min-width: 0 !important;
+}
 
-  table[class="body"] .container {
-    width: $small-container-width !important;
-  }
+table[class="body"] .container {
+  width: $small-container-width !important;
+}
 
+//If it supports border-box, why not? Am I right?
+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;
+}
 
-  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;
+//Basic grid rules
+@for $i from 1 through $grid-column-count {
+  td.small-#{$i},
+  th.small-#{$i} {
+    display: inline-block !important;
+    width: grid-calc-pct($i, $grid-column-count) !important;    
   }
+}
 
-  @for $i from 1 through $grid-column-count {
-    td.small-#{$i},
-    th.small-#{$i} {
-      display: inline-block !important;
-
-      width: grid-calc-pct($i, $grid-column-count) !important;    
-    }
-  }
+//If it's the last column, 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},
+.column th.small-#{$grid-column-count} {
+  display: block !important;
+  width: 100% !important;
+}
 
-  @for $i from 1 through ($grid-column-count - 1) {
-    .body .columns td.small-#{$i},
-    .body .column td.small-#{$i},
-    td.small-#{$i} center,
-
-    .body .columns th.small-#{$i},
-    .body .column th.small-#{$i},
-    th.small-#{$i} center {
-      display: inline-block !important;
-      width: grid-calc-pct($i, $grid-column-count) !important;
-    }
-  }
 
-  @for $i from 1 through ($grid-column-count - 1) {
-    table[class="body"] .columns td.small-#{$i},
-    table[class="body"] .column td.small-#{$i},
-    table[class="body"] .columns th.small-#{$i},
-    table[class="body"] .column th.small-#{$i} {
-      display: inline-block !important;
-      width: grid-calc-pct($i, $grid-column-count) !important;
-    }
-  }
+//Rules for the Center Tag
+@for $i from 1 through ($grid-column-count - 1) {
+  .body .columns td.small-#{$i},
+  .body .column td.small-#{$i},
+  td.small-#{$i} center,
 
-  table[class="body"] .columns td.small-#{$grid-column-count},
-  table[class="body"] .column td.small-#{$grid-column-count},
-  table[class="body"] .columns th.small-#{$grid-column-count},
-  table[class="body"] .column th.small-#{$grid-column-count} {
-    display: block !important;
-    width: 100% !important;
+  .body .columns th.small-#{$i},
+  .body .column th.small-#{$i},
+  th.small-#{$i} center {
+    display: inline-block !important;
+    width: grid-calc-pct($i, $grid-column-count) !important;
   }
+}
 
-  @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;
-    }
+@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;
-  }
+table[class="body"] table.columns td.expander,
+table[class="body"] table.columns th.expander {
+  display: none !important;
+}
 
-  table[class="body"] .right-text-pad,
-  table[class="body"] .text-pad-right {
-    padding-left: $text-padding !important;
-  }
+table[class="body"] .right-text-pad,
+table[class="body"] .text-pad-right {
+  padding-left: $text-padding !important;
+}
 
-  table[class="body"] .left-text-pad,
-  table[class="body"] .text-pad-left {
-    padding-right: $text-padding !important;
-  }
+table[class="body"] .left-text-pad,
+table[class="body"] .text-pad-left {
+  padding-right: $text-padding !important;
+}
 
-  table[class="body"] .hide-for-small,
-  table[class="body"] .show-for-desktop {
-    display: none !important;
-  }
+table[class="body"] .hide-for-small,
+table[class="body"] .show-for-desktop {
+  display: none !important;
+}
 
-  table[class="body"] .show-for-small,
-  table[class="body"] .hide-for-desktop {
-    display: inherit !important;
-  }
+table[class="body"] .show-for-small,
+table[class="body"] .hide-for-desktop {
+  display: inherit !important;
 }
 
-table[class="body"] table.inline-list {
-  td,
-  th {
-    width: auto !important;
-    display: inline-block !important;
-  }
 
-  &.vertical {
-    td,
-    th {
-      display: block !important;
-    }
-  }
+
+
 }
+
+// table[class="body"] table.inline-list {
+//   td,
+//   th {
+//     width: auto !important;
+//     display: inline-block !important;
+//   }
+
+//   &.vertical {
+//     td,
+//     th {
+//       display: block !important;
+//     }
+//   }
+// }

diff --git a/scss/ink/components/_normalize.scss b/scss/ink/components/_normalize.scss
index 2aef5f3abc125aaba3069708597097cc3446fd1f..d1a9555c0ca59f93af0d547d4b8fc53ecf22aee1 100755 (executable)
--- a/scss/ink/components/_normalize.scss
+++ b/scss/ink/components/_normalize.scss
@@ -28,6 +28,9 @@ body {
   -ms-text-size-adjust: 100%;
   margin: 0;
   padding: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .ExternalClass {

diff --git a/testing/src/pages/tim-test.html b/testing/src/pages/tim-test.html
index 496877882e02fd9798b0593df26f97b9c9e7698f..969968f1cdbdcd8e7191a88b9376d175bb77ad6a 100644 (file)
--- a/testing/src/pages/tim-test.html
+++ b/testing/src/pages/tim-test.html
@@ -2,9 +2,28 @@
   <tr>
     <td>
 
+    <table class="row collapse">
+      <tr>
+        <th class="large-12 small-12 columns">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
+        </th>
+      </tr>
+    </table>
+
+    <table class="row collapse">
+      <tr>
+        <th class="large-6 small-12 columns" style="background:green;">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
+        </th>
+        <th class="large-6 small-12 columns" style="background:yellow">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
+        </th>
+      </tr>
+    </table>
+
     <table class="row">
       <tr>
-        <th class="large-6 small-6 columns first" style="background: red;">
+        <th class="large-6 small-12 columns first" style="background: red;">
           <table>
             <tr>
               <th>
@@ -16,7 +35,7 @@
             </tr>
           </table>
         </th>
-        <th class="large-6 small-6 columns last" style="background: blue;">
+        <th class="large-6 small-12 columns last" style="background: blue;">
           <table>
             <tr>
               <th>
@@ -105,8 +124,45 @@
         </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">
+
+<!--       <table class="row">
         <tr>
           <td class="large-4 small-4 columns first" style="background: red;">
             <table>
@@ -130,7 +186,7 @@
           </td>
         </tr>
       </table>
-
+ -->
 
     </td>
   </tr>