adds radius container class

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index e5261fa4518dca1c8e192dfde0d2696f97784a96..15329b3561b5ca72f6358c5732813b9651bb779f 100755 (executable)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -14,6 +14,10 @@ $grid-column-count: 12 !default;
 /// @type Number
 $column-padding-bottom: $global-padding !default;
 
+/// Default border radius for the container.
+/// @type Number
+$container-radius: 50px !default;
+
 //For viewing email in browser
 @media only screen {
   html {
@@ -160,3 +164,9 @@ th.expander {
   width: 0;
   padding: 0 !important;
 }
+
+// adds radius to container
+table.container.radius {
+  border-radius: $container-radius;
+  border-collapse: separate;
+}

diff --git a/test/visual/pages/alignment.html b/test/visual/pages/alignment.html
index 281402b2a0f0fdeae4a7e3009562711fdc52da96..8e2fdb02502c14477621dcefc7c8d7464f3cb347 100644 (file)
--- a/test/visual/pages/alignment.html
+++ b/test/visual/pages/alignment.html
@@ -33,7 +33,7 @@
         <img src="http://placehold.it/200?text=center" alt="">
       </center>
       <br/>
-      <p>Center on all clients except Outlook 20017, 10, 13</p>
+      <p>Center on all clients except Outlook 2007, 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="">
@@ -120,4 +120,6 @@
     </columns>
   </row>
 
+  <button class="success" href="https://litmus.com/checklist/emails/public/120ca5f">Passing Tests</button>
+
 </container>

diff --git a/test/visual/pages/basic.html b/test/visual/pages/basic.html
deleted file mode 100644 (file)
index fced733..0000000
--- a/test/visual/pages/basic.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="header">
-  <container>
-    <row class="collapse">
-      <columns small="6">
-        <img src="http://placehold.it/150x30/663399">
-      </columns>
-      <columns small="6">
-        <p class="text-right">BASIC</p>
-      </columns>
-    </row>
-  </container>
-</div>
-
-<container>
-  <row>
-    <columns>
-      <br/>
-      <center>
-        <img class="hide-for-large" src="http://placehold.it/200x50">
-      </center>
-      <br/>
-      <h1>Hi, Susan Calvin</h1>
-      <p class="lead">YO YOY Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
-      <callout class="primary">
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>
-      </callout>
-      <callout class="secondary">
-        <row>
-          <columns large="6">
-            <h5>Connect With Us:</h5>
-            <button class="facebook expand" href="http://zurb.com">Facebook</button>
-            <button class="twitter expand" href="http://zurb.com">Twitter</button>
-            <button class="google expand" href="http://zurb.com">Google+</button>
-          </columns>
-          <columns large="6">
-            <h5>Contact Info:</h5>
-            <p>Phone: 408-341-0600</p>
-            <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
-          </columns>
-        </row>
-      </callout>
-    </columns>
-  </row>
-</container>

diff --git a/test/visual/pages/block-inky.html b/test/visual/pages/block-inky.html
index 5ebf97facb6cd5855d0d166f0ffe7e8e44c4d717..40a6bcd8df9f8b6ffbd6c3740832c4fd3faf72a2 100644 (file)
--- a/test/visual/pages/block-inky.html
+++ b/test/visual/pages/block-inky.html
@@ -2,6 +2,7 @@
   .block-grid p {
     background: dodgerblue;
     text-align: center !important;
+    color: white !important;
   }
 </style>
 

diff --git a/test/visual/pages/block.html b/test/visual/pages/block.html
deleted file mode 100644 (file)
index bbfa4da..0000000
--- a/test/visual/pages/block.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-      <table class="block-grid up-2">
-        <tr>
-          <td>
-            <p>one</p>
-          </td>
-          <td>
-            <p>two</p>
-          </td>
-        </tr>
-      </table>
-
-      <table class="block-grid up-3">
-        <tr>
-          <td>
-            <p>one</p>
-          </td>
-          <td>
-            <p>two</p>
-          </td>
-          <td>
-            <p>three</p>
-          </td>
-        </tr>
-      </table>
-
-      <table class="block-grid up-4">
-        <tr>
-          <td>
-            <p>one</p>
-          </td>
-          <td>
-            <p>two</p>
-          </td>
-          <td>
-            <p>three</p>
-          </td>
-          <td>
-            <p>four</p>
-          </td>
-        </tr>
-      </table>
-
-      <table class="block-grid up-5">
-        <tr>
-          <td>
-            <p>one</p>
-          </td>
-          <td>
-            <p>two</p>
-          </td>
-          <td>
-            <p>three</p>
-          </td>
-          <td>
-            <p>four</p>
-          </td>
-          <td>
-            <p>five</p>
-          </td>
-        </tr>
-      </table>
-
-    </td>
-  </tr>
-</table>
\ No newline at end of file

diff --git a/test/visual/pages/button-expanded.html b/test/visual/pages/button-expanded.html
deleted file mode 100644 (file)
index 66b660a..0000000
--- a/test/visual/pages/button-expanded.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<container>
-  <row>
-    <columns>
-      <button class="expand" href="#">Button One</button>
-      <button class="expand" href="#">Button Two</button>
-      <button class="expand" href="#">Button Three</button>
-    </columns>
-  </row>
-</container>

diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index 1a317721bf77e36d3aabe3b9ad3a70a06fe7db78..32a5dd13251f427751d2164f6b446639ce90b8a3 100644 (file)
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -4,7 +4,7 @@
   }
 </style>
 <container>
-<a href="https://litmus.com/checklist/emails/public/52b6fb8">Test Results - Passing 6/8/1016</a>
+<a href="https://litmus.com/checklist/emails/public/52b6fb8">Test Results - Passing 6/28/2016</a>
   <row>
     <columns small="12" large="12">
       <center>
@@ -76,6 +76,7 @@
   </row>
   <row>
     <columns small="12" large="12">
+    Radius and round edges except Outlook 2007, 10, 13
       <button href="http://zurb.com" class="radius">I have a radius</button>
     </columns>
   </row>

diff --git a/test/visual/pages/button.html b/test/visual/pages/button.html
deleted file mode 100644 (file)
index 3e50f71..0000000
--- a/test/visual/pages/button.html
+++ /dev/null
@@ -1,266 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button large">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I am a large button</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I am a button</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-        </th>
-      </tr>
-    </table>
-
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">          
-
-          <table class="button small">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I am a small button</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table  class="button tiny">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I am a tiny button</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-        </th>
-      </tr>
-    </table>  
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button radius">
-            <tbody>
-              <tr>
-                <td>
-                  <table>
-                    <tbody>
-                      <tr>
-                        <td>
-                          <a href="#">Radius?</a>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button rounded">
-            <tbody>
-              <tr>
-                <td>
-                  <table>
-                    <tbody>
-                      <tr>
-                        <td>
-                          <a href="#">Rounded?</a>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button secondary">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I am secondary</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table> 
-
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button success">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I am successful</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-        </th>
-      </tr>
-    </table>
-
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button alert">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I alert</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="small-12 large-12 columns">
-
-          <table class="button warning">
-            <tr>
-              <td>
-                <table>
-                  <tr>
-                    <td>
-                      <a href="https://zurb.com">I warn</a>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <td class="small-12 large-12 columns">
-
-          <table class="button expand">
-            <tr>
-              <td>
-                
-                <table>
-                  <tr>
-                    <td>
-                      <center>
-                        <a href="https://zurb.com">I expand</a>
-                      </center>
-                    </td>
-                  </tr>
-                </table>
-
-              </td>
-              <td class="expander"></td>
-            </tr>
-          </table>
-
-        </td>
-      </tr>
-    </table>
-
-
-    </td>
-  </tr>
-</table>

diff --git a/test/visual/pages/callout-in-grid.html b/test/visual/pages/callout-in-grid.html
index fac2151a060801a8d30b4bf54c847bac29187ec4..a7374e502848b19e4e319620d7dee16542f9507b 100644 (file)
--- a/test/visual/pages/callout-in-grid.html
+++ b/test/visual/pages/callout-in-grid.html
@@ -11,26 +11,44 @@
           </columns>
         </row>
       </callout>
-      <callout class="secondary">
+      <row>
+        <columns small="6">
+          <p>Not in a callout :(</p>
+        </columns>
+        <columns small="6">
+          <callout class="secondary">
+            <p>I'm in a callout!</p>
+          </callout>
+        </columns>
+      </row>
+
+      <callout class="primary">
         <row>
-          <columns>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque necessitatibus perferendis doloremque quod quam nisi, unde ipsum qui, nesciunt reiciendis adipisci. Ratione nemo adipisci aspernatur quaerat tempore omnis delectus ipsam!</p>
-          </columns>
-          <columns>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, doloremque explicabo aperiam vitae autem dolorum id placeat cumque praesentium qui, similique rerum error quibusdam sed officia eligendi obcaecati illum. Quo!</p>
+          <columns small="12">
+            <p>This whole row is in a callout!</p>
           </columns>
         </row>
       </callout>
-      <callout class="secondary">
-        <row>
-          <columns>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque necessitatibus perferendis doloremque quod quam nisi, unde ipsum qui, nesciunt reiciendis adipisci. Ratione nemo adipisci aspernatur quaerat tempore omnis delectus ipsam!</p>
-          </columns>
-          <columns>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, doloremque explicabo aperiam vitae autem dolorum id placeat cumque praesentium qui, similique rerum error quibusdam sed officia eligendi obcaecati illum. Quo!</p>
-          </columns>
-        </row>
+
+      <callout>
+        <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+      </callout>
+      <callout class="primary">
+        <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+      </callout>
+
+      <callout class="success">
+        <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+      </callout>
+
+      <callout class="warning">
+        <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+      </callout>
+
+      <callout class="alert">
+        <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
       </callout>
+      
     </columns>
   </row>
 

diff --git a/test/visual/pages/center.html b/test/visual/pages/center.html
deleted file mode 100644 (file)
index a79ca91..0000000
--- a/test/visual/pages/center.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<style>
-  .columns {
-    border: 1px solid dodgerblue;
-  }
-</style>
-
-<container>
-  <row>
-    <columns small="12" large="12" class="text-center">
-      <center>
-        <p class="text-center">I should be centered</p>
-      </center>
-    </columns>
-  </row>
-  <row>
-    <columns small="12" large="12" class="text-center">
-      <center>
-        <img src="http://placehold.it/200x150">
-      </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/container-radius.html b/test/visual/pages/container-radius.html
index 39a3ef2b3bbd710b3cb39874d1a02062a9c0d571..d1f29f2082ebf392ff1842781a28e4447223705f 100644 (file)
--- a/test/visual/pages/container-radius.html
+++ b/test/visual/pages/container-radius.html
@@ -1,11 +1,12 @@
 <spacer size="100"></spacer>
 
-<container class="radius" style="border-radius: 50px; border: 1px solid salmon; border-collapse: separate;">
+<container class="radius" style="border: 1px solid salmon;">
 
   <spacer size="100"></spacer>
 
   <row>
     <columns small="12" large="12">
+      <h4>Container should have a border and border radius except on Outlook 2000, 02, 03, 07, 10, 13</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?</p>

diff --git a/test/visual/pages/inliner-bugs.html b/test/visual/pages/inliner-bugs.html
index ace565f55803d8c867015e77ffae83b5fc2c01e3..f43c53324fc3df4d97d17bff840ca81c66b024d9 100644 (file)
--- a/test/visual/pages/inliner-bugs.html
+++ b/test/visual/pages/inliner-bugs.html
@@ -4,7 +4,7 @@
       
       #417 - 2 sets of angle backets: outer set should not get converted to charachter codes. you should not see 2 angle brackets here:
       <br>
-      <<LCG Program\TG LCG Coupon Code Default='246996'>>
+      <raw><<LCG Program\TG LCG Coupon Code Default='246996'>></raw>
       confirmed on inliner (both) need to 
 
       <hr>