]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
menus fixed
authorTim Hartwick <tdhartwick2@gmail.com>
Thu, 17 Mar 2016 18:08:42 +0000 (11:08 -0700)
committerTim Hartwick <tdhartwick2@gmail.com>
Thu, 17 Mar 2016 18:08:42 +0000 (11:08 -0700)
scss/components/_media-query.scss
scss/components/_menu.scss
scss/settings/_settings.scss
test/visual/pages/menu.html

index 8e853663b8511eb45a7dd022cd04bf840133dc14..d6511baa4197b6026162bad919141e8ba5aa4fc2 100755 (executable)
 
   //menu
   table.menu {
+    width: 100% !important;
+    
     td,
     th {
       width: auto !important;
index f90fb1ec90b178aec6e5e8d6c1417c281a250dac..bdd15823e9f341ccda09b350af511585c6429e01 100644 (file)
@@ -8,46 +8,46 @@
 
 /// Padding inside a menu item.
 /// @type Length
-$menu-item-padding: 20px !default;
+$menu-item-padding: 0 !default;
 
 /// Right-hand spacing of items in menus with the `.simple` class.
 /// @type Length
-$menu-simple-item-spacing: 10px !default;
+$menu-item-gutter: 10px !default;
+
+/// This is the color of the menu item links.
+/// @type Color
+$menu-item-color: $primary-color !default;
 
 
 table.menu {
-  width: 100%;
+  width: $global-width;
 
-  td,
-  th {
-    display: inline-block;
+  td.menu-item,
+  th.menu-item{
     padding: $menu-item-padding;
-  }
-}
+    padding-right: $menu-item-gutter;
 
-table.menu.simple {
-  td,
-  th {
-    padding: 0;
-    padding-right: $menu-simple-item-spacing;
+    a {
+      color: $menu-item-color; 
+    }
   }
 }
 
 // Doesn't work on the pesky ESPs like outlook 2000
 table.menu.vertical {
-  td,
-  th,
+  td.menu-item,
+  th.menu-item,
   a {
     display: block;
     width: 100%;
   }
 
   // Nested lists need some more padding to the left
-  td,
-  th {
+  td.menu-item,
+  th.menu-item {
     table.menu.vertical {
-      td,
-      th {
+      td.menu-item,
+      th.menu-item {
         padding-left: $menu-item-padding;
       }
     }
index 2161f103b9d10d6ac2b859626f63a49c3286c583..d10a64351caba6f89b168297f0db78a80c2f52d2 100644 (file)
@@ -128,8 +128,9 @@ $callout-border-alert: 1px solid darken($alert-color, 20%);
 // 7. Menu
 // -------
 
-$menu-item-padding: 20px;
-$menu-simple-item-spacing: 10px;
+$menu-item-padding: 0;
+$menu-item-gutter: 10px;
+$menu-item-color: $primary-color;
 
 // 8. Thumbnial
 // ------------
index 650fe55399dc8a49ae0b036bdb52912b41442afa..668dd329db35212212f635b43e8112acc0daa0f0 100644 (file)
@@ -4,9 +4,36 @@
 
       <table class="menu">
         <tr>
-          <td><a href="http://zurb.com">Item</a></td>
-          <td><a href="http://zurb.com">Item</a></td>
-          <td><a href="http://zurb.com">Item</a></td>
+          <td>
+            <table>
+              <tr>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 1</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 2</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 3</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 4</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 5</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 6</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 7</a>
+                </th>
+                <th class="menu-item">
+                  <a href="http://google.com">Nav 8</a>
+                </th>
+              </tr>
+            </table>
+          </td>
         </tr>
       </table>