From: RafiBomb <rafi@zurb.com>
Date: Thu, 14 Apr 2016 22:18:19 +0000 (-0700)
Subject: removes center tag rules in media query fixes #352
X-Git-Tag: v2.1.0~20
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=184cca3009bd68f93c69071512d7bc85d6f15a63;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

removes center tag rules in media query fixes #352
---

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index b1228ffd..4ec03d0f 100755
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -159,6 +159,8 @@ table.expanded {
   }
 }
 
+
+
 table.button:hover,
 table.button:visited,
 table.button:active {
diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 6308e597..7018b634 100755
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -67,21 +67,6 @@
     width: 100% !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,
-
-    .body .columns th.small-#{$i},
-    .body .column th.small-#{$i},
-    th.small-#{$i} center {
-      display: inline-block !important;
-      width: -zf-grid-calc-pct($i, $grid-column-count) !important;
-    }
-  }
-
   @for $i from 1 through ($grid-column-count - 1) {
     table.body td.small-offset-#{$i},
     table.body th.small-offset-#{$i} {
@@ -124,12 +109,12 @@
     }
   }
 
-  //Centers the menus!
+  // Centers the menus!
   table.menu[align="center"] {
     width: auto !important;
   }
 
-  //Buttons
+  // Buttons
   table.button.expand {
     width: 100% !important;
   }
diff --git a/test/visual/pages/alignment.html b/test/visual/pages/alignment.html
index 771a332a..f7c4994f 100644
--- a/test/visual/pages/alignment.html
+++ b/test/visual/pages/alignment.html
@@ -1,14 +1,20 @@
+<style>
+  .columns {
+    border: 1px solid dodgerblue;
+  }
+</style>
+
 <container>
   <row>
-    <th class="small-4 large-4 columns first">
+    <columns class="small-4 large-4 columns first">
       <center>Centered Text</center>
-    </th>
-    <th class="small-4 large-4 columns">
+    </columns>
+    <columns class="small-4 large-4 columns">
       <center>Centered Text</center>
-    </th>
-    <th class="small-4 large-4 columns last">
+    </columns>
+    <columns class="small-4 large-4 columns last">
       <center>Centered Text</center>
-    </th>
+    </columns>
   </row>
 </container>
 
@@ -22,10 +28,12 @@
       <p class="text-left">Left Text</p>
       <h4 class="text-left">Left Text</h4>
       <br>
+      <p>Center on all clients</p>
       <center>
         <img src="http://placehold.it/200?text=center" alt="">
       </center>
       <br>
+      <p>Center on all clients except Outlook 20017, 10, 13</p>
       <img class="float-center" src="http://placehold.it/200?text=center" alt="">
       <img class="float-right" src="http://placehold.it/200?text=right" alt="">
       <img class="float-left" src="http://placehold.it/200?text=left" alt="">
@@ -35,8 +43,28 @@
 
 <container>
   <row>
-    <columns></columns>
-    <columns>Centering a column</columns>
-    <columns></columns>
+    <columns small="4"></columns>
+    <columns small="4">Centering a column</columns>
+    <columns small="4"></columns>
   </row>
+
+  <center>
+    <button href="some-place">Center Button</button>
+  </center>
+
+  <row>
+    <columns small="6" large="6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
+      <center>
+        <button href="some-place">Center Always</button>
+      </center>
+    </columns>
+    <columns small="6" large="6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
+      <center>
+        <button href="some-place">Center Always</button>
+      </center>
+    </columns>
+  </row>
+
 </container>
diff --git a/test/visual/pages/center.html b/test/visual/pages/center.html
index d67bac6a..a79ca91e 100644
--- a/test/visual/pages/center.html
+++ b/test/visual/pages/center.html
@@ -1,3 +1,9 @@
+<style>
+  .columns {
+    border: 1px solid dodgerblue;
+  }
+</style>
+
 <container>
   <row>
     <columns small="12" large="12" class="text-center">
@@ -13,5 +19,17 @@
       </center>
     </columns>
   </row>
+    <row>
+    <columns small="6" large="6" class="text-center">
+      <center>
+        <img src="http://placehold.it/150">
+      </center>
+    </columns>
+        <columns small="6" large="6" class="text-center">
+      <center>
+        <img src="http://placehold.it/150">
+      </center>
+    </columns>
+  </row>
 </container>
 
diff --git a/test/visual/pages/grid-inky.html b/test/visual/pages/grid-inky.html
index 4af5e7ca..ba8e8daf 100644
--- a/test/visual/pages/grid-inky.html
+++ b/test/visual/pages/grid-inky.html
@@ -3,6 +3,9 @@
   table.body {
     background: red !important;
   }
+  .columns {
+    border: 1px solid dodgerblue;
+  }
 </style>
 
 <container>
@@ -11,11 +14,6 @@
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
     </columns>
   </row>
-  <row class="collapse">
-    <columns small="12" large="12">
-      <p>This is a collapse column sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
-    </columns>
-  </row>
   <row>
     <columns small="12" large="6">
       <p>One Word</p>