intital pass at buttons

diff --git a/gulpfile.js b/gulpfile.js
index dea02397c8151f482115fe789673ba3de1456326..a1b4e8608f40b1a207c4a157fb8ab0957c6ee879 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -58,7 +58,7 @@ gulp.task('sass:foundation', function() {
 gulp.task('settings', function() {
   octophant('scss/**/*.scss', {
     title: 'Foundation for Emails Settings',
-    output: 'foundation-emails-template/src/assets/scss/_settings.scss',
+    output: 'testing/src/assets/scss/_settings.scss',
     sort: ['global', 'grid']
   });
 });

diff --git a/scss/ink/components/_button.scss b/scss/ink/components/_button.scss
index dde705b39f3814314b427dc30fa0b3529dc8a4e2..27ca257aad844a09b17f366f3e79f11173a374e4 100755 (executable)
--- a/scss/ink/components/_button.scss
+++ b/scss/ink/components/_button.scss
@@ -10,19 +10,19 @@
 
 /// Default padding for button.
 /// @type List
-$button-padding: 12px 0 12px 0 !default;
+$button-padding: 12px 10px 12px 10px !default;
 
 /// Default padding for a tiny button.
 /// @type List
-$button-padding-tiny: 5px 0 4px 0 !default;
+$button-padding-tiny: 5px 4px 4px 4px !default;
 
 /// Default padding for a small button.
 /// @type List
-$button-padding-small: 8px 0 7px !default;
+$button-padding-small: 8px 3px 7px 3px !default;
 
 /// Default padding for a large button.
 /// @type List
-$button-padding-large: 21px 0 18px !default;
+$button-padding-large: 13px 26px 12px 26px!default;
 
 /// Default color of the font in a button.
 /// @type Color
@@ -58,31 +58,31 @@ $button-background-color: $primary-color !default;
 
 /// Default border color for a button.
 /// @type Color
-$button-border: 1px solid darken($button-background-color, 10%);
+$button-border: 1px solid $button-background-color !default;
 
-table.button {
+table.expanded {
   width: 100%;
-  overflow: visible;
+}
+
+table.button {
+  margin-bottom: 10px;
 
   td {
-    display: block;
     width: auto !important;
-    text-align: center;
+    text-align: left;
     background: $button-background-color;
     border: $button-border;
     color: $button-font-color;
-    padding: $button-padding;
 
     a {
       font-weight: $button-font-weight;
       text-decoration: none;
       font-family: $global-font-family;
       color: $button-font-color;
-      display: block;
-      height: 100%;
-      width: 100%;
+      display: inline-block;
       padding: $button-padding;
       font-size: $button-font-size;
+      border: $button-border;
     }
   }
 
@@ -104,8 +104,8 @@ table.button {
   }
 
   &.large {
-    td, a {
-      padding: $button-padding-large 0;
+    a {
+      padding: $button-padding-large;
       font-size: $button-font-size-large;
     }
   }
@@ -113,17 +113,17 @@ table.button {
   &:hover td,
   &:visited td,
   &:active td {
-    background: $button-background-color !important;
+    background: darken($button-background-color, 10%);
     color: $button-font-color !important;
   }
 
-  &:hover td
-  &.tiny:hover td,
-  &.small:hover td,
-  &.large:hover td {
-    background: darken($button-background-color, 10%);
+  &:hover a,
+  &:visited a,
+  &:active a {
+    border: 1px solid darken($button-background-color, 10%);
   }
 
+
   &:hover td a,
   &:active td a,
   & td a:visited,
@@ -141,11 +141,12 @@ table.button {
 
   &.secondary td {
     background: $secondary-color;
-    border: lighten($secondary-color, 10%);
     color: $button-font-color-alt;
+    border: 1px solid $secondary-color;
 
     a {
       color: $button-font-color-alt;
+      border: 1px solid $secondary-color;
     }
   }
 
@@ -154,6 +155,10 @@ table.button {
     color: $button-font-color-alt;
   }
 
+  &.secondary:hover a {
+    border: 1px solid lighten($secondary-color, 10%) !important;
+  }
+
   &.secondary:hover td a,
   &.secondary td a:visited,
   &.secondary:active td a {
@@ -162,19 +167,35 @@ table.button {
 
   &.success td {
     background: $success-color;
-    border-color: 1px solid darken($success-color, 10%);
+    border: 1px solid $success-color !important;
+
+    a {
+      border: 1px solid $success-color !important;
+    }
   }
 
   &.success:hover td {
     background: darken($success-color, 10%) !important;
   }
 
+  &.success:hover a {
+    border: 1px solid darken($success-color, 10%) !important;
+  }
+
   &.alert td {
     background: $alert-color;
-    border-color: 1px solid darken($alert-color, 10%);
+    border: 1px solid $alert-color !important;
+
+    a {
+      border: 1px solid $alert-color !important;
+    }
   }
 
   &.alert:hover td {
     background: darken($alert-color, 10%) !important;
   }
+
+  &.alert:hover a {
+    border: 1px solid darken($alert-color, 10%) !important;
+  }
 }

diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index bfd0a1f5b37ebfaaeb894d5f123905726a699082..4de97618664097b727a212be296a314e5dea4379 100644 (file)
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -8,10 +8,11 @@
 //   3. Block Grid
 //   4. Button
 //   5. Callout
-//   6. Media Query
-//   7. Normalize
-//   8. Thumbnail
-//   9. Typography
+//   6. Inline List
+//   7. Media Query
+//   8. Normalize
+//   9. Thumbnial
+//  10. Typography
 
 
 // 1. Global
@@ -28,10 +29,11 @@ $dark-gray: #8a8a8a;
 $black: #0a0a0a;
 $white: #fefefe;
 $pre-color: #ff6908;
-$column-gutter: 20px;
 $container-width: 580px;
+$container-background-color: $white;
 $global-radius: 3px;
 $global-rounded: 500px;
+$grid-column-gutter: 16px;
 
 // 2. Grid
 // -------
@@ -39,21 +41,21 @@ $global-rounded: 500px;
 $grid-column-count: 12;
 $wrapper-padding-top: 10px;
 $column-padding-bottom: 10px;
-$sub-column-padding-right: $column-gutter / 2;
+$sub-column-padding-right: $grid-column-gutter / 2;
 
 // 3. Block Grid
 // -------------
 
 $block-grid-elements: 8;
-$block-grid-spacing: $column-gutter;
+$block-grid-spacing: $grid-column-gutter;
 
 // 4. Button
 // ---------
 
-$button-padding: 12px 0 12px 0;
-$button-padding-tiny: 5px 0 4px 0;
-$button-padding-small: 8px 0 7px;
-$button-padding-large: 21px 0 18px;
+$button-padding: 12px 10px 12px 10px;
+$button-padding-tiny: 5px 4px 4px 4px;
+$button-padding-small: 8px 3px 7px 3px;
+$button-padding-large: 13px 26px 12px 26px!default;
 $button-font-color: $white;
 $button-font-color-alt: $medium-gray;
 $button-font-weight: bold;
@@ -62,7 +64,7 @@ $button-font-size-tiny: 12px;
 $button-font-size-small: 16px;
 $button-font-size-large: 24px;
 $button-background-color: $primary-color;
-$button-border: 1px solid darken($button-background-color, 10%);
+$button-border: 1px solid $button-background-color;
 
 // 5. Callout
 // ----------
@@ -74,19 +76,25 @@ $callout-border-success: 1px solid darken($success-color, 20%);
 $callout-border-warning: 1px solid darken($warning-color, 20%);
 $callout-border-alert: 1px solid darken darken($alert-color, 20%);
 
-// 6. Media Query
+// 6. Inline List
+// --------------
+
+$menu-item-padding: 20px;
+$menu-simple-item-gutter: 10px;
+
+// 7. Media Query
 // --------------
 
 $small-container-width: 95%;
 $small-range: $container-width;
 
-// 7. Normalize
+// 8. Normalize
 // ------------
 
 $hr-color: $medium-gray;
 $hr-height: 1px;
 
-// 8. Thumbnail
+// 9. Thumbnial
 // ------------
 
 $thumbnail-shadow-h: 0;
@@ -96,8 +104,8 @@ $thumbnail-shadow-spread: 1px;
 $thumbnail-shadow-color: $primary-color;
 $thumbnail-shadow-opacity: 0.5;
 
-// 9. Typography
-// -------------
+// 10. Typography
+// --------------
 
 $global-font-color: $black;
 $global-font-family: Helvetica, Arial, sans-serif;
@@ -105,7 +113,7 @@ $global-font-weight: normal;
 $global-line-height: 1.3;
 $body-font-size: 14px;
 $body-line-height: 19px;
-$header-font-family: Georgia, Times, serif;
+$header-font-family: $global-font-family;
 $h1-font-size: 40px;
 $h2-font-size: 36px;
 $h3-font-size: 32px;

diff --git a/testing/src/pages/index.html b/testing/src/pages/index.html
index c5c2f09af91539a4854fdf11b4f9114b7503b1b6..a97e0bfa1da681152717e6035871e15b74494cd3 100644 (file)
--- a/testing/src/pages/index.html
+++ b/testing/src/pages/index.html
@@ -4,30 +4,111 @@
 
     <table class="row">
       <tr>
-        <th class="large-8 small-8 columns">
+        <th class="large-8 small-12 columns">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
-        </th>
 
-        <th class="large-4 small-4 columns">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
-        </th>
-      </tr>
-    </table>
+        <table>
+          <tr>
+            <td>
+              <table class="button large">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+
+        <table>
+          <tr>
+            <td>
+              <table class="button">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+        <table>
+          <tr>
+            <td>
+              <table class="button small">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+        <table>
+          <tr>
+            <td>
+              <table class="button tiny">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+        <table>
+          <tr>
+            <td>
+              <table class="button secondary">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+        <table>
+          <tr>
+            <td>
+              <table class="button success">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+
+        <table class="expanded">
+          <tr>
+            <td>
+              <table class="button alert expanded">
+                <tr>
+                  <td>
+                    <a href="https://zurb.com">I am a button</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
 
-    <table class="row">
-      <tr>
-        <th class="large-4 large-offset-8 small-4 small-offset-8 columns" style="background: red;">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
-        </th>
-      </tr>
-    </table>
 
 
 
-    <table class="row">
-      <tr>
-        <th class="large-8 small-12 columns">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
         </th>
 
         <th class="large-4 small-12 columns">
@@ -36,13 +117,6 @@
       </tr>
     </table>
 
-    <table class="row">
-      <tr>
-        <th class="large-4 large-offset-8 small-12 columns" style="background: red;">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
-        </th>
-      </tr>
-    </table>
 
     </td>
   </tr>