From: RafiBomb <rafi@zurb.com>
Date: Thu, 10 Mar 2016 15:35:06 +0000 (-0800)
Subject: adds more comprehensive centering classes
X-Git-Tag: v2.0.0-rc.4~56
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=202099a123bdf3206356d2f52820981eea28504c;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

adds more comprehensive centering classes
---

diff --git a/scss/components/_alignment.scss b/scss/components/_alignment.scss
index 01ac6809..b1ba7555 100755
--- a/scss/components/_alignment.scss
+++ b/scss/components/_alignment.scss
@@ -44,6 +44,7 @@ span.text-right {
 span.text-center {
   display: block;
   width: 100%;
+  text-align: center;
 }
 
 img.float-left {
@@ -56,13 +57,16 @@ img.float-right {
   text-align: right;
 }
 
-img.float-center, img.text-center {
+img.float-center, 
+img.text-center {
   margin: 0 auto;
   float: none;
   text-align: center;
 }
 
-table.float-center {
+table.float-center,
+td.float-center,
+th.float-center {
   margin: 0 auto;
   float: none;
   text-align: center;
diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index ecb0fe4b..d0637249 100755
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -105,16 +105,6 @@
     padding-right: $text-padding !important;
   }
 
-  table.body .hide-for-small,
-  table.body .show-for-desktop {
-    display: none !important;
-  }
-
-  table.body .show-for-small,
-  table.body .hide-for-desktop {
-    display: inherit !important;
-  }
-
   //menu
   table.menu {
     td,
diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 09400bf0..e6e208ce 100644
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -6,22 +6,33 @@
 /// @group visibility
 ////
 
-.hide-for-large {
-  display: none;
+table.body .hide-for-large {
+  display: none !important;
   width:0;
   mso-hide:all;
   overflow:hidden;
 
   @media only screen and (max-width: #{$global-breakpoint}) {
-    display: block;
+    display: inherit !important;
   }
 }
 
-.show-for-large {
+table.body .row.hide-for-large,
+table.body .row.hide-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
-    display: none;
+    display: table !important;
+    width: 100%;
+  }
+}
+
+table.body .show-for-large {
+  @media only screen and (max-width: #{$global-breakpoint}) {
+    display: none !important;
     width:0;
     mso-hide:all;
     overflow:hidden;
   }
 }
+
+
+
diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss
index 532d047d..cc83c983 100644
--- a/testing/src/assets/scss/app.scss
+++ b/testing/src/assets/scss/app.scss
@@ -12,10 +12,6 @@
     text-align: center;
   }
 
-  .up-3 td {
-    width: 45% !important;
-  }
-
   table.menu.small-vertical {
     td,
     th,
@@ -77,13 +73,6 @@
   }
 }
 
-// testing styles
-
-.block-grid p {
-  background: dodgerblue;
-  text-align: center;
-}
-
 
 // building block
 
@@ -116,11 +105,3 @@
 }
 
 
-  .columns {
-    border: 1px solid red;
-
-    p {
-      background: green;
-    }
-  }
-
diff --git a/testing/src/pages/visibility.html b/testing/src/pages/visibility.html
index 48ba8e9c..8a7c5b07 100644
--- a/testing/src/pages/visibility.html
+++ b/testing/src/pages/visibility.html
@@ -1,72 +1,87 @@
-<row>
-  <columns small="12" large="12">
-    <h4 class="text-center">furry friends</h4>
-  </columns>
-</row>
+<container>
 
-<row>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="hide-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
+  <row>
+    <columns small="12" large="12">
+      <h4 class="text-center">furry friends</h4>
+    </columns>
+  </row>
 
-<row>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="hide-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
+  <row>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4" class="show-for-large">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show large</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
 
-<row>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="hide-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
+  <row>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4" class="show-for-large">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show large</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
 
-<row>
-  <columns small="6" large="4" class="show-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="show-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
\ No newline at end of file
+  <row>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4" class="show-for-large">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show large</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
+
+  <row class="hide-for-large">
+    <columns small="6" large="6">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show small</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="6">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show small</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
+
+  <row class="callout">
+    <columns small="6" large="4">
+      <p class="hide-for-large">Show for small</p>
+      <p class="show-for-large">Show for large</p>
+    </columns>
+    <columns small="6" large="4">
+      <button class="hide-for-large" href="">show small</button>
+      <button class="show-for-large" href="">show large</button>
+    </columns>
+  </row>
+
+</container>
\ No newline at end of file