From: RafiBomb <rafi@zurb.com>
Date: Wed, 8 Jun 2016 18:46:44 +0000 (-0700)
Subject: adds preheader styles
X-Git-Tag: v2.2.0~11^2~6
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=cd44785ae07ef3685124690f6ebeafca046b08d4;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

adds preheader styles
---

diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
index 7b8250e0..b206b4ec 100755
--- a/scss/components/_typography.scss
+++ b/scss/components/_typography.scss
@@ -321,4 +321,18 @@ hr {
   }
 }
 
+// preheader styles
+span.preheader {
+  display:none !important;
+  visibility:hidden;
+  mso-hide:all !important;
+  font-size:1px;
+  color: $body-background; // needs to match background color
+  line-height:1px;
+  max-height:0px;
+  max-width:0px;
+  opacity:0;
+  overflow:hidden;
+}
+
 
diff --git a/test/visual/pages/alignment.html b/test/visual/pages/alignment.html
index 0340a550..555d704e 100644
--- a/test/visual/pages/alignment.html
+++ b/test/visual/pages/alignment.html
@@ -49,22 +49,38 @@
   </row>
 
   <center>
-    <button href="some-place">Center</button>
+    <button href="#">Center</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</button>
+        <button href="#">Center</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</button>
+        <button href="#">Center</button>
       </center>
     </columns>
   </row>
 
+  <row>
+    <columns small="12" large="4">
+      <callout>
+        <h3 class="small-text-center">Presentations<span>8</span></h3>
+        <spacer size="35"></spacer>
+        <center>
+          <img src="http://placehold.it/74x50">
+        </center>
+        <spacer size="40"></spacer>
+      </callout>
+    </columns>
+    <columns small="12" large="8">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sapiente quis at fuga reprehenderit, velit iure fugiat debitis repellat assumenda perspiciatis? Commodi minus labore sit dolorem reprehenderit eveniet porro asperiores.</p>
+    </columns>
+  </row>
+
 </container>