From: Eric Morris <eric@zurb.com>
Date: Wed, 13 Nov 2013 19:32:19 +0000 (-0800)
Subject: Add new button syntax
X-Git-Tag: v1.0.2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8e1582d5314af7ba906ccabdc18028c666b2f0bc;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Add new button syntax
---

diff --git a/Gruntfile.js b/Gruntfile.js
index bd7ca1ab..befa1fd0 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -100,7 +100,7 @@ module.exports = function(grunt) {
     },
     watch: {
       docs: {
-        files: ['docs/docs.php', 'docs/**/*.php', 'docs/**/*.html'],
+        files: ['docs/docs.php', 'docs/**/*.php', 'docs/**/*.html', 'css/*.css'],
         tasks: ['shell:makeStage', 'includes:docsDev', 'shell:testDocs'],
         options: {
           livereload: true,
diff --git a/css/ink.css b/css/ink.css
index 74ba0fbb..39cf6e06 100644
--- a/css/ink.css
+++ b/css/ink.css
@@ -311,7 +311,7 @@ small {
 
 a {
   color: #2ba6cb; 
-  text-decoration: none !important;
+  text-decoration: none;
 }
 
 a:hover { 
@@ -363,6 +363,163 @@ td.panel {
 
 /* Buttons */
 
+table.button,
+table.tiny-button,
+table.small-button,
+table.medium-button,
+table.large-button {
+  width: 100%;
+  overflow: hidden;
+}
+
+table.button td,
+table.tiny-button td,
+table.small-button td,
+table.medium-button td,
+table.large-button td {
+  display: block;
+  width: auto !important;
+  text-align: center;
+  background: #2ba6cb;
+  border: 1px solid #2284a1;
+  color: #ffffff;
+  padding: 8px 0;
+}
+
+table.tiny-button td {
+  padding: 5px 0 4px;
+}
+
+table.small-button td {
+  padding: 8px 0 7px;
+}
+
+table.medium-button td {
+  padding: 12px 0 10px;
+}
+
+table.large-button td {
+  padding: 21px 0 18px;
+}
+
+table.button td a,
+table.tiny-button td a,
+table.small-button td a,
+table.medium-button td a,
+table.large-button td a {
+  font-weight: bold;
+  text-decoration: none;
+  font-family: Helvetica, Arial, sans-serif;
+  color: #ffffff;
+  font-size: 16px;
+}
+
+table.tiny-button td a {
+  font-size: 12px;
+  font-weight: normal;
+}
+
+table.small-button td a {
+  font-size: 16px;
+}
+
+table.medium-button td a {
+  font-size: 20px;
+}
+
+table.large-button td a {
+  font-size: 24px;
+}
+
+table.button:hover td,
+table.button:visited td,
+table.button:active td {
+  background: #2795b6 !important;
+}
+
+table.button:hover td a,
+table.button:visited td a,
+table.button:active td a {
+  color: #fff !important;
+}
+
+table.button:hover td,
+table.tiny-button:hover td,
+table.small-button:hover td,
+table.medium-button:hover td,
+table.large-button:hover td {
+  background: #2795b6 !important;
+}
+
+table.button:hover td a,
+table.button:active td a,
+table.button td a:visited,
+table.tiny-button:hover td a,
+table.tiny-button:active td a,
+table.tiny-button td a:visited,
+table.small-button:hover td a,
+table.small-button:active td a,
+table.small-button td a:visited,
+table.medium-button:hover td a,
+table.medium-button:active td a,
+table.medium-button td a:visited,
+table.large-button:hover td a,
+table.large-button:active td a,
+table.large-button td a:visited {
+  color: #ffffff !important; 
+}
+
+table.secondary td {
+  background: #e9e9e9;
+  border-color: #d0d0d0;
+  color: #555;
+}
+
+table.secondary td a {
+  color: #555;
+}
+
+table.secondary:hover td {
+  background: #d0d0d0 !important;
+  color: #555;
+}
+
+table.secondary:hover td a,
+table.secondary td a:visited,
+table.secondary:active td a {
+  color: #555 !important;
+}
+
+table.success td {
+  background: #5da423;
+  border-color: #457a1a;
+}
+
+table.success:hover td {
+  background: #457a1a !important;
+}
+
+table.alert td {
+  background: #c60f13;
+  border-color: #970b0e;
+}
+
+table.alert:hover td {
+  background: #970b0e !important;
+}
+
+table.radius td {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+table.round td {
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  border-radius: 500px;
+}
+
 .button table,
 .tiny-button table,
 .small-button table,
diff --git a/docs/components/buttons.php b/docs/components/buttons.php
index 1c1bfb5c..2666ce54 100644
--- a/docs/components/buttons.php
+++ b/docs/components/buttons.php
@@ -82,7 +82,7 @@
 <div class="compatibility-section">
   <div class="row">
     <div class="large-9 columns">
-      <p>The buttons works (without <code>:hover</code> effects) in most major email clients.</p>
+      <p>The buttons are unavailable in <strong>Microsoft Outlook (2007, 2010, 2013)</strong>. A fix is on the way.</p>
     </div>
     <div class="large-3 columns">
       <a href="#" class="reveal-table">Toggle Full Table</a>
@@ -117,8 +117,8 @@
           </tr>
           <tr>
             <td>Outlook (2007, 2010, 2013)</td>
-            <td><span class="check">&#10004;</span></td>
-            <td></td>
+            <td><span class="x">&#10008;</span></td>
+            <td>Visible, but not clickable. A fix is currently in the works.</td>
           </tr>
           <tr>
             <td>Outlook (2011)</td>
diff --git a/docs/examples/buttons.html b/docs/examples/buttons.html
index 4cf029f7..1a0d7636 100644
--- a/docs/examples/buttons.html
+++ b/docs/examples/buttons.html
@@ -27,46 +27,22 @@
           <table class="container">
             <tr>
               <td>
-                
+
                 <table class="row">
                   <tr>
                     <td class="wrapper">
 
-                      <table class="four columns">
-                        <tr>
-                          <td>
-
-                            <a class="tiny-button" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    .tiny-button
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
-
-                          </td>
-                          <td class="expander"></td>
-                        </tr>
-                      </table>
-
-                    </td>
-                    <td class="wrapper">
-
-                      <table class="four columns">
+                      <table class="six columns">
                         <tr>
                           <td>
 
-                            <a class="radius button" href="#">
-                              <table>
+                              <table class="tiny-button">
                                 <tr>
                                   <td>
-                                    .radius.button
+                                    <a href="#">.tiny-button</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -76,19 +52,17 @@
                     </td>
                     <td class="wrapper last">
 
-                      <table class="four columns">
+                      <table class="six columns">
                         <tr>
                           <td>
 
-                            <a class="primary button" href="#">
-                              <table>
+                            <table class="small-button">
                                 <tr>
                                   <td>
-                                    .primary.button
+                                    <a href="#">.small-button</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -103,19 +77,17 @@
                   <tr>
                     <td class="wrapper">
 
-                      <table class="four columns">
+                      <table class="six columns">
                         <tr>
                           <td>
 
-                            <a class="small-button" href="#">
-                              <table>
+                              <table class="medium-button">
                                 <tr>
                                   <td>
-                                    .small-button
+                                    <a href="#">.medium-button</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -123,21 +95,19 @@
                       </table>
 
                     </td>
-                    <td class="wrapper">
+                    <td class="wrapper last">
 
-                      <table class="four columns">
+                      <table class="six columns">
                         <tr>
                           <td>
 
-                            <a class="round button" href="#">
-                              <table>
+                            <table class="large-button">
                                 <tr>
                                   <td>
-                                    .round.button
+                                    <a href="#">.large-button</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -145,21 +115,24 @@
                       </table>
 
                     </td>
-                    <td class="wrapper last">
+                  </tr>
+                </table>
+
+                <table class="row">
+                  <tr>
+                    <td class="wrapper">
 
                       <table class="four columns">
                         <tr>
                           <td>
 
-                            <a class="secondary button" href="#">
-                              <table>
+                              <table class="button secondary">
                                 <tr>
                                   <td>
-                                    .secondary.button
+                                    <a href="#">.secondary</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -167,26 +140,19 @@
                       </table>
 
                     </td>
-                  </tr>
-                </table>
-
-                <table class="row">
-                  <tr>
                     <td class="wrapper">
 
-                      <table class="six columns">
+                      <table class="four columns">
                         <tr>
                           <td>
 
-                            <a class="medium-button" href="#">
-                              <table>
+                              <table class="button alert">
                                 <tr>
                                   <td>
-                                    .medium-button
+                                    <a href="#">.alert</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -196,19 +162,17 @@
                     </td>
                     <td class="wrapper last">
 
-                      <table class="six columns">
+                      <table class="four columns">
                         <tr>
                           <td>
 
-                            <a class="alert button" href="#">
-                              <table>
+                            <table class="button success">
                                 <tr>
                                   <td>
-                                    .alert.button
+                                    <a href="#">.success</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -227,15 +191,13 @@
                         <tr>
                           <td>
 
-                            <a class="large-button" href="#">
-                              <table>
+                              <table class="button radius">
                                 <tr>
                                   <td>
-                                    .large-button
+                                    <a href="#">.radius</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>
@@ -249,15 +211,13 @@
                         <tr>
                           <td>
 
-                            <a class="success button" href="#">
-                              <table>
+                            <table class="button round">
                                 <tr>
                                   <td>
-                                    .success.button
+                                    <a href="#">.round</a>
                                   </td>
                                 </tr>
                               </table>
-                            </a>
 
                           </td>
                           <td class="expander"></td>