From: Tim Hartwick <tdhartwick2@gmail.com>
Date: Tue, 3 May 2016 18:22:10 +0000 (-0700)
Subject: updated visibility classes to respect display table-cell for table-cells
X-Git-Tag: v2.2.1~7^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f24fe7304f0b615cf828f0e90b7787a1f7aafc7d;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

updated visibility classes to respect display table-cell for table-cells
---

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 3b969b38..7a8e2761 100644
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -6,8 +6,8 @@
 /// @group visibility
 ////
 
-table.body table.container .hide-for-large {
-  display: none;
+.hide-for-large {
+  display: none !important;
   width:0;
   mso-hide:all; // hide selected elements in Outlook 2007-2013
   overflow:hidden;
@@ -30,7 +30,7 @@ table.body table.container .hide-for-large * {
   mso-hide:all; // hide selected elements in Outlook 2007-2013
 }
 
-table.body table.container .row.hide-for-large,
+table.body table.container .hide-for-large,
 table.body table.container .row.hide-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: table !important;
@@ -38,6 +38,13 @@ table.body table.container .row.hide-for-large {
   }
 }
 
+table.body table.container .callout-inner.hide-for-large {
+  @media only screen and (max-width: #{$global-breakpoint}) {
+    display: table-cell !important;
+    width: 100% !important;
+  }
+}
+
 table.body table.container .show-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: none !important;
diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 039cd81c..696265e7 100644
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -32,8 +32,6 @@ $global-width-small: 95%;
 $global-gutter: 16px;
 $body-background: $light-gray;
 $container-background: $white;
-$global-font-color: $black;
-$body-font-family: Helvetica, Arial, sans-serif;
 $global-padding: 16px;
 $global-margin: 16px;
 $global-radius: 3px;
@@ -55,6 +53,8 @@ $block-grid-gutter: $global-gutter;
 // 4. Typography
 // -------------
 
+$global-font-color: $black;
+$body-font-family: Helvetica, Arial, sans-serif;
 $global-font-weight: normal;
 $header-color: inherit;
 $global-line-height: 1.3;
diff --git a/test/visual/pages/visibility.html b/test/visual/pages/visibility.html
index 8a7c5b07..b7ec3a09 100644
--- a/test/visual/pages/visibility.html
+++ b/test/visual/pages/visibility.html
@@ -73,6 +73,40 @@
     </columns>
   </row>
 
+  <row>
+    <columns small="12" large="12">
+      <callout class="primary">
+        <h1>Show on all</h1>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+      </callout>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <callout class="primary hide-for-large">
+        <h1>Hide for Large</h1>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+      </callout>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <callout class="primary show-for-large">
+        <h1>Show for Large</h1>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+      </callout>
+    </columns>
+  </row>
+
+
   <row class="callout">
     <columns small="6" large="4">
       <p class="hide-for-large">Show for small</p>