From: RafiBomb <rafi@zurb.com>
Date: Fri, 3 Jun 2016 23:37:16 +0000 (-0700)
Subject: fix for nested grid with center tags
X-Git-Tag: v2.2.0~13
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d75a1120a55cd87cb09959a117dcf8824b855ddd;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

fix for nested grid with center tags
---

diff --git a/package.json b/package.json
index 7947dfb0..0d4c694e 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-wrap": "^0.11.0",
     "gulp-zip": "^3.2.0",
-    "inky": "zurb/inky",
+    "inky": "zurb/inky#brandonbarringer-attributes",
     "lazypipe": "^1.0.1",
     "motion-ui": "^1.1.1",
     "multiline": "^1.0.2",
diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 9f5b8e20..0f73be6c 100755
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -63,6 +63,17 @@ th.column {
   Margin: 0 auto;
   padding-left: $global-gutter;
   padding-bottom: $column-padding-bottom;
+
+  // Prevents Nested columns from double the padding
+  .column,
+  .columns {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+
+    center {
+      min-width: none !important;
+    }
+  }
 }
 
 td.columns.last,
diff --git a/test/visual/pages/alignment.html b/test/visual/pages/alignment.html
index 0340a550..2b49ec2c 100644
--- a/test/visual/pages/alignment.html
+++ b/test/visual/pages/alignment.html
@@ -37,6 +37,43 @@
       <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="">
+      
+    </columns>
+  </row>
+</container>
+
+<container>
+  <row>
+    <columns small="12" large="12">
+      <row>
+        <columns small="12" large="12">
+        <p>Center on all (nested columns)</p>
+          <center>
+            <img src="http://placehold.it/200?text=center" alt="">
+          </center>
+        </columns>
+      </row>
+    </columns>
+  </row>
+</container>
+
+<container>
+  <row>
+    <columns small="12" large="12">
+      <row>
+        <columns small="6" large="6">
+          <p>Center on all (nested columns)</p>
+          <center>
+            <img src="http://placehold.it/200?text=center" alt="">
+          </center>
+        </columns>
+        <columns small="6" large="6">
+          <p>Center on all (nested columns)</p>
+          <center>
+            <img src="http://placehold.it/200?text=center" alt="">
+          </center>
+        </columns>
+      </row>
     </columns>
   </row>
 </container>
diff --git a/test/visual/pages/attributes.html b/test/visual/pages/attributes.html
new file mode 100644
index 00000000..f0c8a20e
--- /dev/null
+++ b/test/visual/pages/attributes.html
@@ -0,0 +1,24 @@
+<container>
+  
+  <spacer size="32"></spacer>
+
+  <row dir="rtl">
+    <columns large="4" valign="middle">
+      <img class="small-float-center" src="http://placehold.it/300x200/345" alt="">
+    </columns>
+    <columns large="8">
+      <h4>HEADLINE</h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!</p>
+    </columns>
+  </row>
+
+  <row>
+    <columns large="8">
+      <h4>HEADLINE</h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!</p>
+    </columns>
+    <columns large="4" valign="middle">
+      <img class="small-float-center" src="http://placehold.it/300x200/621" alt="">
+    </columns>
+  </row>  
+</container>
diff --git a/test/visual/pages/grid-nested.html b/test/visual/pages/grid-nested.html
index 2f8a69fa..7335608f 100644
--- a/test/visual/pages/grid-nested.html
+++ b/test/visual/pages/grid-nested.html
@@ -27,7 +27,7 @@
             <table class="row">
               <tr>
                 <th class="small-6 large-6 columns first" style="background:blue;">
-                  <p>1</p>
+                  <p class="text-right">1</p>
                 </th>
 
                 <th class="small-6 large-6 columns first" style="background:purple;">
diff --git a/test/visual/pages/layout-break-center.html b/test/visual/pages/layout-break-center.html
new file mode 100644
index 00000000..01db5962
--- /dev/null
+++ b/test/visual/pages/layout-break-center.html
@@ -0,0 +1,52 @@
+<container>
+ 
+
+<!-- 2 columns CTA / non collapsable / no gutter -->
+<row class="collapse">
+  <columns>
+    <wrapper class="product-listing" >
+      <row class="no-padding-b">
+        <columns small="6" large="6">
+          <a href="http://google.com" title="" target="_blank">
+            <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
+          </a>
+          <p class="text-center"><span class="name text-center">Name of Product</span></p>
+
+          <p class="pre-price text-center" style="text-decoration:line-through;">$9.99</p>
+          <p class="price text-center">
+        $25.99
+      </p>
+
+      <center>
+        <button href="http://tacticalgear.com" class="small">button</button>
+      </center>
+    </columns>
+    <columns small="6" large="6">
+      <a href="http://google.com" title="" target="_blank">
+        <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
+      </a>
+      <p class="text-center">
+      <span class="name text-center">
+        Name of Product
+      </span>
+      </p>
+
+      <p class="pre-price text-center" style="text-decoration:line-through;">
+      $9.99
+      </p>
+      <p class="price text-center">
+      $25.99
+      </p>
+
+    <center>
+      <button href="http://google.com" class="small">button</button>
+    </center>
+
+  </columns>
+</row>
+</wrapper>
+</columns>
+</row>
+
+
+</container>
\ No newline at end of file