foundation_emails 2.1.0

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

@@ -0,0 +1,67 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group visibility
+////
+
+.hide-for-large {
+  display: none !important;
+  width:0;
+  mso-hide:all; // hide selected elements in Outlook 2007-2013
+  overflow:hidden;
+  max-height: 0;
+  font-size: 0;
+  width: 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; 
+    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
+}
+
+table.body table.container .hide-for-large,
+table.body table.container .row.hide-for-large {
+  @media only screen and (max-width: #{$global-breakpoint}) {
+    display: table !important;
+    width: 100% !important;
+  }
+}
+
+table.body table.container .callout-inner.hide-for-large {
+  @media only screen and (max-width: #{$global-breakpoint}) {
+    display: table-cell !important;
+    width: 100% !important;
+  }
+}
+
+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;
+  }
+}
+
+// [todo] add image resets
+// img {
+//   max-height: 0;
+//   width: 0;
+// }
+// in media query
+// img { 
+//   max-height: none !important; 
+//   width: auto !important; 
+// }
+

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

@@ -0,0 +1,27 @@
+// Foundation for Emails by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import
+  'util/util',
+  'global',
+  'components/normalize',
+  'grid/grid',
+  'grid/block-grid',
+  'components/alignment',
+  'components/visibility',
+  'components/typography',
+  'components/button',
+  'components/callout',
+  'components/thumbnail',
+  'components/menu',
+  'components/outlook-first',
+  'components/media-query';
+
+
+
+
+
+
+
+

data/vendor/assets/stylesheets/foundation-emails/grid/_block-grid.scss

@@ -0,0 +1,32 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group block-grid
+////
+
+/// The highest number of `.x-up` classes available when using the block grid CSS.
+/// @type Number
+$block-grid-max: 8 !default;
+
+/// Gutter between elements in a block grid.
+/// @type Number
+$block-grid-gutter: $global-gutter !default;
+
+.block-grid {
+  width: 100%;
+  max-width: $global-width;
+
+  td {
+    display: inline-block;
+    padding: $block-grid-gutter / 2;
+  }
+}
+
+// Sizing classes
+@for $i from 2 through $block-grid-max {
+  .up-#{$i} td {
+    width: floor(($global-width - $i * $block-grid-gutter) / $i) !important;
+  }
+}

data/vendor/assets/stylesheets/foundation-emails/grid/_grid.scss

@@ -0,0 +1,148 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Default number of columns for an email.
+/// @type Number
+$grid-column-count: 12 !default;
+
+/// Default padding for the bottom of a column.
+/// @type Number
+$column-padding-bottom: $global-padding !default;
+
+//For viewing email in browser
+@media only screen {
+  html {
+    min-height: 100%;
+    background: $body-background;
+  }
+}
+
+table {
+  &.body {
+    background: $body-background;
+    height: 100%;
+    width: 100%;
+  }
+
+  &.container {
+    background: $container-background;
+    width: $global-width;
+    margin: 0 auto;
+    Margin: 0 auto;
+    text-align: inherit;
+  }
+
+  &.row {
+    padding: 0;
+    width: 100%;
+    position: relative;
+  }
+}
+
+table.container table.row {
+  display: table;
+}
+
+td.columns,
+td.column,
+th.columns,
+th.column {
+  margin: 0 auto;
+  Margin: 0 auto;
+  padding-left: $global-gutter;
+  padding-bottom: $column-padding-bottom;
+}
+
+td.columns.last,
+td.column.last,
+th.columns.last,
+th.column.last {
+  padding-right: $global-gutter;
+}
+
+//makes sure nested tables are 100% width
+td.columns,
+td.column,
+th.columns,
+th.column {
+  table:not(.button) {
+    width: 100%;
+  }
+}
+
+@for $i from 1 through $grid-column-count {
+  td.large-#{$i},
+  th.large-#{$i} {
+    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
+    padding-left: $global-gutter / 2;
+    padding-right: $global-gutter / 2;
+  }
+
+  td.large-#{$i}.first,
+  th.large-#{$i}.first {
+    padding-left: $global-gutter;
+  }
+
+  td.large-#{$i}.last,
+  th.large-#{$i}.last {
+    padding-right: $global-gutter;
+  }
+
+  //Collapsed logic
+  .collapse {
+    > tbody > tr > td.large-#{$i},
+    > tbody > tr > th.large-#{$i} {
+      padding-right: 0;
+      padding-left: 0;
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
+    }
+
+    //Gotta give it that extra love for the first and last columns.
+    td.large-#{$i}.first,
+    th.large-#{$i}.first,
+    td.large-#{$i}.last,
+    th.large-#{$i}.last {
+      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},
+  .body .column th.large-#{$i} {
+    width: -zf-grid-calc-pct($i, $grid-column-count);
+  }
+}
+
+@for $i from 1 through ($grid-column-count - 1) {
+  td.large-offset-#{$i},
+  td.large-offset-#{$i}.first,
+  td.large-offset-#{$i}.last,
+  th.large-offset-#{$i},
+  th.large-offset-#{$i}.first,
+  th.large-offset-#{$i}.last {
+    //1.5 takes in effect a whole empty cell.
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
+  }
+}
+
+td.expander,
+th.expander {
+  visibility: hidden;
+  width: 0;
+  padding: 0 !important;
+}

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

@@ -0,0 +1,146 @@
+//  Foundation for Emails Settings
+//  ------------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Grid
+//   3. Block Grid
+//   4. Typography
+//   5. Button
+//   6. Callout
+//   7. Menu
+//   8. Thumbnail
+
+
+// 1. Global
+// ---------
+
+$primary-color: #2199e8;
+$secondary-color: #777777;
+$success-color: #3adb76;
+$warning-color: #ffae00;
+$alert-color: #ec5840;
+$light-gray: #f3f3f3;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$pre-color: #ff6908;
+$global-width: 580px;
+$global-width-small: 95%;
+$global-gutter: 16px;
+$body-background: $light-gray;
+$container-background: $white;
+$global-padding: 16px;
+$global-margin: 16px;
+$global-radius: 3px;
+$global-rounded: 500px;
+$global-breakpoint: $global-width + $global-gutter;
+
+// 2. Grid
+// -------
+
+$grid-column-count: 12;
+$column-padding-bottom: $global-padding;
+
+// 3. Block Grid
+// -------------
+
+$block-grid-max: 8;
+$block-grid-gutter: $global-gutter;
+
+// 4. Typography
+// -------------
+
+$global-font-color: $black;
+$body-font-family: Helvetica, Arial, sans-serif;
+$global-font-weight: normal;
+$header-color: inherit;
+$global-line-height: 1.3;
+$global-font-size: 16px;
+$body-line-height: $global-line-height;
+$header-font-family: $body-font-family;
+$header-font-weight: $global-font-weight;
+$h1-font-size: 34px;
+$h2-font-size: 30px;
+$h3-font-size: 28px;
+$h4-font-size: 24px;
+$h5-font-size: 20px;
+$h6-font-size: 18px;
+$header-margin-bottom: 10px;
+$paragraph-margin-bottom: 10px;
+$small-font-size: 80%;
+$small-font-color: $medium-gray;
+$lead-font-size: $global-font-size * 1.25;
+$lead-line-height: 1.6;
+$text-padding: 10px;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$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-margin: 20px auto;
+$anchor-text-decoration: none;
+$anchor-color: $primary-color;
+$anchor-color-visited: $anchor-color;
+$anchor-color-hover: darken($primary-color, 10%);
+$anchor-color-active: $anchor-color-hover;
+$stat-font-size: 40px;
+
+// 5. Button
+// ---------
+
+$button-padding: (
+  tiny: 4px 8px 4px 8px,
+  small: 5px 10px 5px 10px,
+  default: 8px 16px 8px 16px,
+  large: 10px 20px 10px 20px,
+);
+$button-font-size: (
+  tiny: 10px,
+  small: 12px,
+  default: 16px,
+  large: 20px,
+);
+$button-color: $white;
+$button-color-alt: $medium-gray;
+$button-font-weight: bold;
+$button-margin: 0 0 $global-margin 0;
+$button-background: $primary-color;
+$button-border: 2px solid $button-background;
+$button-radius: $global-radius;
+$button-rounded: $global-rounded;
+
+// 6. Callout
+// ----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-padding: 10px;
+$callout-margin-bottom: $global-margin;
+$callout-border: 1px solid darken($callout-background, 20%);
+$callout-border-secondary: 1px solid darken($secondary-color, 20%);
+$callout-border-success: 1px solid darken($success-color, 20%);
+$callout-border-warning: 1px solid darken($warning-color, 20%);
+$callout-border-alert: 1px solid darken($alert-color, 20%);
+
+// 7. Menu
+// -------
+
+$menu-item-padding: 10px;
+$menu-item-gutter: 10px;
+$menu-item-color: $primary-color;
+
+// 8. Thumbnail
+// ------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+

data/vendor/assets/stylesheets/foundation-emails/util/_util.scss

@@ -0,0 +1,22 @@
+// Foundation for Emails by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+/// Calculates a percentage value for a grid column width.
+/// @access private
+/// @param {number} $colNumber - Column count of the column.
+/// @param {number} $totalColumns - Column count of the entire row.
+/// @returns {number} A percentage width value.
+@function -zf-grid-calc-pct($colNumber, $totalColumns) {
+  @return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000;
+}
+
+/// Calculates a pixel value for a grid column width.
+/// @access private
+/// @param {number} $columnNumber - Column count of the column.
+/// @param {number} $totalColumns - Column count of the entire row.
+/// @param {number} $containerWidth - Width of the surrounding container, in pixels.
+/// @returns {number} A pixel width value.
+@function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
+  @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter);
+}