foundation_emails 2.1.0.1 → 2.2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7542e6a43c32b474876630581bf7f83b5b19f509
-  data.tar.gz: d925f2c0c0ee73604879dcc6d73b8206abefaabf
+  metadata.gz: c578a50c9bfadcac4e68d5865aed1c8ae9679ec2
+  data.tar.gz: 94a3b620c7623bec9b038e0ed2bef4f28c09c48c
 SHA512:
-  metadata.gz: a31c5db9df3e87bfafcbd6c651984f8fb02758d04fe4c3353f593c136578e809fc8dfad321ebfb20a82e64fdb8bc7e27cb8c728e4b0377dabac44f59319e4254
-  data.tar.gz: 33ef5d3850a5f1646b673239647fb90b48776ab32537fdcda856626175a7a689e1fb6e045c827b44815126e7fbff31a4e060f17872953d32b2d3d4818028afc8
+  metadata.gz: 7cf1ee1b1ea0ec42f223e8831eb7d338eb72f0cd068e3a9f399c0810696e5fb7998f15f7947fdbb7798fb100e8360940bb71ec97bae5cb9e27e1dbe888700d05
+  data.tar.gz: 675bcafba0c21306506d0a4d6f34df70a153ca8c899530be728799dfc4bd5aed648e5594f40ec5e7afabe821be1664b0aa933e59cf37132ffcfd960a03507426

data/README.md

@@ -1,26 +1,30 @@
-# Foundation for Emails Gem
+# foundation_emails
+
+[![Gem Version](https://badge.fury.io/rb/foundation_emails.svg)](https://badge.fury.io/rb/foundation_emails)
+
+**foundation_emails** is a gem that enables you to use Foundation for Emails assets within a Rails project.
 
 Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook. Our HTML/CSS components have been tested across every major email client to ensure consistency.
 
 ## Installation
 
-Add this line to your application's Gemfile:
-
-```ruby
-gem 'foundation_emails'
-```
+1. Add the following line to your Gemfile:
 
-Or install it yourself as:
+  ```ruby
+  gem 'foundation_emails'
+  ```
 
-    $ gem install foundation_emails
+2. Then execute:
 
-## Usage
+  ```bash
+  bundle install
+  ```
 
-To include in your assets, place the following in your desired stylesheets manifest:
+3. Import Foundation for Emails in your `application.scss`:
 
-```scss
-    @import "foundation-emails";
-```
+  ```scss
+  @import "foundation-emails";
+  ```
 
 ## License
 

data/lib/foundation_emails/version.rb

@@ -1,3 +1,3 @@
 module FoundationEmails
-  VERSION = "2.1.0.1"
+  VERSION = "2.2.0.0"
 end

data/vendor/assets/stylesheets/foundation-emails/_global.scss

@@ -90,7 +90,6 @@ $global-rounded: 500px !default;
 /// @type String
 $global-breakpoint: $global-width + $global-gutter !default;
 
-
 .wrapper {
   width: 100%;
 }

data/vendor/assets/stylesheets/foundation-emails/components/_alignment.scss

@@ -6,39 +6,28 @@
 /// @group alignment
 ////
 
-table.text-center,
-td.text-center,
-h1.text-center,
-h2.text-center,
-h3.text-center,
-h4.text-center,
-h5.text-center,
-h6.text-center,
-p.text-center,
-span.text-center {
-  text-align: center;
-}
+table,
+th,
+td,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+span {
+  &.text-center {
+    text-align: center;
+  }
 
-h1.text-left,
-h2.text-left,
-h3.text-left,
-h4.text-left,
-h5.text-left,
-h6.text-left,
-p.text-left,
-span.text-left {
-  text-align: left;
-}
+  &.text-left {
+    text-align: left;
+  }
 
-h1.text-right,
-h2.text-right,
-h3.text-right,
-h4.text-right,
-h5.text-right,
-h6.text-right,
-p.text-right,
-span.text-right {
-  text-align: right;
+  &.text-right {
+    text-align: right;
+  }
 }
 
 span.text-center {
@@ -77,7 +66,7 @@ img.float-right {
   text-align: right;
 }
 
-img.float-center, 
+img.float-center,
 img.text-center {
   margin: 0 auto;
   Margin: 0 auto;
@@ -85,13 +74,15 @@ img.text-center {
   text-align: center;
 }
 
-table.float-center,
-td.float-center,
-th.float-center {
-  margin: 0 auto;
-  Margin: 0 auto;
-  float: none;
-  text-align: center;
+table,
+td,
+th {
+  &.float-center {
+    margin: 0 auto;
+    Margin: 0 auto;
+    float: none;
+    text-align: center;
+  }
 }
 
 

data/vendor/assets/stylesheets/foundation-emails/components/_media-query.scss

@@ -8,8 +8,8 @@
 
 @media only screen and (max-width: #{$global-breakpoint}) {
   table.body img {
-    width: auto !important;
-    height: auto !important;
+    width: auto;
+    height: auto;
   }
 
   table.body center {
@@ -30,7 +30,7 @@
     box-sizing: border-box;
     padding-left: $global-gutter !important;
     padding-right: $global-gutter !important;
-    
+
     // Nested columns won't double the padding
     .column,
     .columns {
@@ -70,7 +70,7 @@
   @for $i from 1 through ($grid-column-count - 1) {
     table.body td.small-offset-#{$i},
     table.body th.small-offset-#{$i} {
-    //1.5 takes in effect a whole empty cell.
+      //1.5 takes in effect a whole empty cell.
       margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
       Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
     }
@@ -94,14 +94,15 @@
   //menu
   table.menu {
     width: 100% !important;
-    
+
     td,
     th {
       width: auto !important;
       display: inline-block !important;
     }
 
-    &.vertical, &.small-vertical {
+    &.vertical,
+    &.small-vertical {
       td,
       th {
         display: block !important;
@@ -113,5 +114,26 @@
   table.menu[align="center"] {
     width: auto !important;
   }
+
+  // expands buttons for small only
+  table.button.small-expand,
+  table.button.small-expanded {
+    width: 100% !important;
+
+    table {
+      width: 100%;
+
+      a {
+        text-align: center !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    center {
+      min-width: 0;
+    }
+  }
 }
 

data/vendor/assets/stylesheets/foundation-emails/components/_menu.scss

@@ -18,17 +18,16 @@ $menu-item-gutter: 10px !default;
 /// @type Color
 $menu-item-color: $primary-color !default;
 
-
 table.menu {
   width: $global-width;
 
   td.menu-item,
-  th.menu-item{
+  th.menu-item {
     padding: $menu-item-padding;
     padding-right: $menu-item-gutter;
 
     a {
-      color: $menu-item-color; 
+      color: $menu-item-color;
     }
   }
 }

data/vendor/assets/stylesheets/foundation-emails/components/_typography.scss

@@ -120,7 +120,7 @@ $hr-width: $global-width !default;
 
 /// Default border for a divider.
 /// @type List
-$hr-border: 1px solid $medium-gray !default;
+$hr-border: 1px solid $black !default;
 
 /// Default margin for a divider.
 /// @type Number | List
@@ -297,17 +297,20 @@ pre {
 }
 
 // Horizontal rule
-
-hr {
-  max-width: $hr-width;
-  height: 0;
-  border-right: 0;
-  border-top: 0;
-  border-bottom: $hr-border;
-  border-left: 0;
-  margin: $hr-margin;
-  Margin: $hr-margin;
-  clear: both;
+table.hr {
+  width: 100%;
+  
+  th {
+    height: 0;
+    max-width: $hr-width;
+    border-top: 0;
+    border-right: 0;
+    border-bottom: $hr-border;
+    border-left: 0;
+    margin: $hr-margin;
+    Margin: $hr-margin;
+    clear: both;
+  }
 }
 
 // Use to style a large number to display a statistic
@@ -321,4 +324,16 @@ hr {
   }
 }
 
-
+// preheader styles
+span.preheader {
+  display: none !important;
+  visibility: hidden;
+  mso-hide: all !important;
+  font-size: 1px;
+  color: $body-background; // needs to match background color of it's container
+  line-height: 1px;
+  max-height: 0px;
+  max-width: 0px;
+  opacity: 0;
+  overflow: hidden;
+}

data/vendor/assets/stylesheets/foundation-emails/components/_visibility.scss

@@ -8,26 +8,25 @@
 
 .hide-for-large {
   display: none !important;
-  width:0;
-  mso-hide:all; // hide selected elements in Outlook 2007-2013
-  overflow:hidden;
+  mso-hide: all; // hide selected elements in Outlook 2007-2013
+  overflow: hidden;
   max-height: 0;
   font-size: 0;
   width: 0;
-  line-height: 0; 
+  line-height: 0;
 
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: block !important;
     width: auto !important;
     overflow: visible !important;
-    max-height: none !important; 
+    max-height: none !important;
     font-size: inherit !important;
     line-height: inherit !important;
   }
 }
 
 table.body table.container .hide-for-large * {
-  mso-hide:all; // hide selected elements in Outlook 2007-2013
+  mso-hide: all; // hide selected elements in Outlook 2007-2013
 }
 
 table.body table.container .hide-for-large,
@@ -48,9 +47,9 @@ table.body table.container .callout-inner.hide-for-large {
 table.body table.container .show-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: none !important;
-    width:0;
-    mso-hide:all; // hide selected elements in Outlook 2007-2013
-    overflow:hidden;
+    width: 0;
+    mso-hide: all; // hide selected elements in Outlook 2007-2013
+    overflow: hidden;
   }
 }
 

data/vendor/assets/stylesheets/foundation-emails/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. Use a px value
+/// @type Number
+$container-radius: 0 !default;
+
 //For viewing email in browser
 @media only screen {
   html {
@@ -42,6 +46,13 @@ table {
     width: 100%;
     position: relative;
   }
+
+  &.spacer {
+    width: 100%;
+    td {
+      mso-line-height-rule: exactly;
+    }
+  }
 }
 
 table.container table.row {
@@ -56,6 +67,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,
@@ -110,16 +132,12 @@ th.column {
       width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
     }
   }
-}
 
-@for $i from 1 through $grid-column-count {
   td.large-#{$i} center,
   th.large-#{$i} center {
     min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
   }
-}
 
-@for $i from 1 through $grid-column-count {
   .body .columns td.large-#{$i},
   .body .column td.large-#{$i},
   .body .columns th.large-#{$i},
@@ -146,3 +164,9 @@ th.expander {
   width: 0;
   padding: 0 !important;
 }
+
+// adds radius to container
+table.container.radius {
+  border-radius: $container-radius;
+  border-collapse: separate;
+}

data/vendor/assets/stylesheets/foundation-emails/settings/_settings.scss

@@ -43,6 +43,7 @@ $global-breakpoint: $global-width + $global-gutter;
 
 $grid-column-count: 12;
 $column-padding-bottom: $global-padding;
+$container-radius: 0;
 
 // 3. Block Grid
 // -------------
@@ -81,7 +82,7 @@ $subheader-font-weight: $global-font-weight;
 $subheader-margin-top: 4px;
 $subheader-margin-bottom: 8px;
 $hr-width: $global-width;
-$hr-border: 1px solid $medium-gray;
+$hr-border: 1px solid $black;
 $hr-margin: 20px auto;
 $anchor-text-decoration: none;
 $anchor-color: $primary-color;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: foundation_emails
 version: !ruby/object:Gem::Version
-  version: 2.1.0.1
+  version: 2.2.0.0
 platform: ruby
 authors:
 - ZURB
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-05-19 00:00:00.000000000 Z
+date: 2016-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -70,12 +70,14 @@ files:
 - lib/foundation_emails.rb
 - lib/foundation_emails/engine.rb
 - lib/foundation_emails/version.rb
+- pkg/foundation_emails-2.1.0.1.gem
 - pkg/foundation_emails-2.1.0.gem
 - vendor/assets/stylesheets/_foundation-emails.scss
 - vendor/assets/stylesheets/foundation-emails/_global.scss
 - vendor/assets/stylesheets/foundation-emails/components/_alignment.scss
 - vendor/assets/stylesheets/foundation-emails/components/_button.scss
 - vendor/assets/stylesheets/foundation-emails/components/_callout.scss
+- vendor/assets/stylesheets/foundation-emails/components/_code.scss
 - vendor/assets/stylesheets/foundation-emails/components/_media-query.scss
 - vendor/assets/stylesheets/foundation-emails/components/_menu.scss
 - vendor/assets/stylesheets/foundation-emails/components/_normalize.scss