added simple and vertical menus

diff --git a/scss/ink/components/_inline-list.scss b/scss/ink/components/_inline-list.scss
index f2ad487641d6b8dfea2709783643647cb4153bbe..7fe9fd958a191398117eccfa778957b5df338760 100644 (file)
--- a/scss/ink/components/_inline-list.scss
+++ b/scss/ink/components/_inline-list.scss
@@ -25,4 +25,25 @@ table.menu.simple {
     padding: 0;
     padding-right: 10px;
   }
+}
+
+//Doesn't work on the pesky ESPs like outlook 2000
+table.menu.vertical {
+  td,
+  th,
+  a {
+    display: block;
+    width: 100%;
+  }
+
+  //Nested lists need some more padding to the left
+  td,
+  th {
+    table.menu.vertical {
+      td,
+      th {
+        padding-left: 20px;
+      }
+    }
+  }
 }
\ No newline at end of file

diff --git a/testing/src/pages/block-grid.html b/testing/src/pages/block-grid.html
new file mode 100644 (file)
index 0000000..5a3a427
--- /dev/null
+++ b/testing/src/pages/block-grid.html
@@ -0,0 +1,70 @@
+<table class="container">
+  <tr>
+    <td>
+
+    <table class="block-grid up-2" cellspacing="0">
+      <tr>
+        <td style="background:red;">
+          <p style="text-align: center;">one</p>
+        </td>
+        <td style="background: pink;">
+          <p style="text-align: center;">two</p>
+        </td>
+      </tr>
+    </table>
+
+    <table class="block-grid up-3">
+      <tr>
+        <td style="background:red;">
+          <p style="text-align: center;">one</p>
+        </td>
+        <td style="background: pink;">
+          <p style="text-align: center;">two</p>
+        </td>
+        <td style="background:red;">
+          <p style="text-align: center;">three</p>
+        </td>
+      </tr>
+    </table>
+
+      <table class="block-grid up-4">
+        <tr>
+          <td style="background:red;">
+            <p style="text-align: center;">one</p>
+          </td>
+          <td style="background: pink;">
+            <p style="text-align: center;">two</p>
+          </td>
+          <td style="background:red;">
+            <p style="text-align: center;">three</p>
+          </td>
+          <td style="background: pink;">
+            <p style="text-align: center;">four</p>
+          </td>
+        </tr>
+      </table>
+
+      <table class="block-grid up-5">
+        <tr>
+          <td style="background:red;">
+            <p style="text-align: center;">one</p>
+          </td>
+          <td style="background: pink;">
+            <p style="text-align: center;">two</p>
+          </td>
+          <td style="background:red;">
+            <p style="text-align: center;">three</p>
+          </td>
+          <td style="background: pink;">
+            <p style="text-align: center;">four</p>
+          </td>
+          <td style="background:red;">
+            <p style="text-align: center;">five</p>
+          </td>
+        </tr>
+      </table>
+    
+
+    </td>
+  </tr>
+</table>
\ No newline at end of file

diff --git a/testing/src/pages/index.html b/testing/src/pages/index.html
index 0322e0cbb7b29d6ce200ce677fc87d9a35313912..0ab106da14d5b9565807d26fc08a63d74d75bb25 100644 (file)
--- a/testing/src/pages/index.html
+++ b/testing/src/pages/index.html
@@ -46,6 +46,68 @@
       </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>