bootstrap-email 1.0.0.alpha1.1 → 1.0.0.alpha3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e24aee0c8377f6497e1e0598262cc39e65eb07cc6aa520c5b644d5e5507d712e
-  data.tar.gz: 4bc3678c69852ae32fa1533bd8fef2eb5f4ad9fab2f7ecac5a171db2a1a6c0c9
+  metadata.gz: 75655e6d12a24abed3f9cf4fee65bc198210d1e9289196b8df80bd53791c21b2
+  data.tar.gz: 365aedf89fa3f0818ecb6808762d75045855e542172d5ad3440cb5c69dbdc748
 SHA512:
-  metadata.gz: 75bb3a64345077bd4e4621106efa1a89b7df1237b4f492d77db28fc88a2b17eb24b1b2a1ba3e6bdf52fface8c4fef64e0f3580fa141b915365ca1e0182ce7cfb
-  data.tar.gz: a030f98e7ae7c5f26bdc2fa2f31dce874ab94859a3e5ea0d61eaf1703694a8a3be3caa14559d8b0fda9f42afa03fff2bdff0a1409f650c6b85014406e89bbc41
+  metadata.gz: 80c34ce66af8e2024fa3547a08c1ec4330ddf77c7e25297753edd164b54586f811c19b2722df572f296fa006227b950c0803e7769fc7a523ed4cba0c1bc451d1
+  data.tar.gz: 38b53f2516bbd1f46fea866b06170174d89333f7d8b44a42bb36d7220af717ae97ab0e9967898ded0544584d120b59bde6d22c78023e562c1254460db6c7c9f0

data/VERSION

@@ -1 +1 @@
-1.0.0.alpha1.1
+1.0.0.alpha3.1

data/core/bootstrap-email.scss

@@ -16,6 +16,7 @@
 @import 'scss/components/image';
 @import 'scss/components/preview';
 @import 'scss/components/table';
+@import 'scss/components/stack';
 
 @import 'scss/utilities/background';
 @import 'scss/utilities/border';
@@ -26,3 +27,4 @@
 @import 'scss/utilities/spacing';
 @import 'scss/utilities/text-decoration';
 @import 'scss/utilities/typography';
+@import 'scss/utilities/valign';

data/core/bootstrap-head.scss

@@ -8,6 +8,11 @@
 @import 'scss/selectors_for_utils';
 @import 'scss/helper_groups';
 
+// Force base font in Outlook
+body, table, td {
+  font-family: $font-family-base !important;
+}
+
 // Forces Outlook.com to display emails at full width
 .ExternalClass {
   width: 100%;
@@ -28,7 +33,7 @@ a {
   text-decoration: none;
 }
 
-// Inhere text color so color can be set on the body and inherited by children
+// Inherit text color so color can be set on the body and inherited by children
 * {
   color: inherit;
 }
@@ -66,18 +71,57 @@ table:not([class^=s-]) {
 /*! allow_purge_after */
 
 @media screen and (max-width: 600px) {
+  // Row Gap
+  @each $space, $value in $spacers {
+    .gap-#{$space}.row,
+    .gap-x-#{$space}.row {
+      margin-right: -1 * $value !important;
+      & > table > tbody > tr > td {
+        padding-right: $value !important;
+      }
+    }
+    .gap-#{$space}.row,
+    .gap-y-#{$space}.row {
+      margin-bottom: -1 * $value !important;
+      & > table > tbody > tr > td {
+        padding-bottom: $value !important;
+      }
+    }
+  }
+
+  // Stack Gap
+  @each $space, $value in $spacers {
+    table.gap-lg-#{$space}.stack-x > tbody > tr > td {
+      padding-right: 0 !important;
+    }
+    table.gap-lg-#{$space}.stack-y > tbody > tr > td {
+      padding-bottom: 0 !important;
+    }
+  }
+  @each $space, $value in $spacers {
+    table.gap-#{$space}.stack-x > tbody > tr > td {
+      padding-right: $value !important;
+    }
+    table.gap-#{$space}.stack-y > tbody > tr > td {
+      padding-bottom: $value !important;
+    }
+  }
+
   //  Grid
   @each $key, $value in $grid-cols {
-    table.row > tbody > tr {
-      & > td.col-lg-#{$key},
-      & > td.col-lg {
-        display: block;
-        width: 100% !important;
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-      }
+    td.col-lg-#{$key} {
+      display: block;
+      width: 100% !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
     }
   }
+  td.col-lg {
+    display: block;
+    width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 
   // Display
   @each $display in $display-type {
@@ -91,26 +135,56 @@ table:not([class^=s-]) {
     }
   }
 
-  // Sizing
+  // Sizing Max Width / Height
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.max-#{$name}-lg-full') {
+      max-#{$property}: unset !important;
+      #{$property}: auto !important;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.max-#{$name}-lg-#{$size}') {
+        max-#{$property}: unset !important;
+        #{$property}: auto !important;
+      }
+    }
+  }
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.max-#{$name}-full') {
+      max-#{$property}: 100% !important;
+      #{$property}: 100% !important;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.max-#{$name}-#{$size}') {
+        max-#{$property}: $value !important;
+        #{$property}: 100% !important;
+      }
+    }
+  }
+
+  // Sizing Width / Height
   @each $name, $property in $sizing-types {
     @include sizing-util('.#{$name}-lg-full') {
-      max-#{$property}: auto !important;
+      #{$property}: auto !important;
+    }
+    @include sizing-util('.#{$name}-lg-auto') {
       #{$property}: auto !important;
     }
     @each $size, $value in $sizing {
       @include sizing-util('.#{$name}-lg-#{$size}') {
-        max-#{$property}: auto !important;
         #{$property}: auto !important;
       }
     }
+  }
+  @each $name, $property in $sizing-types {
     @include sizing-util('.#{$name}-full') {
-      max-#{$property}: 100% !important;
       #{$property}: 100% !important;
     }
+    @include sizing-util('.#{$name}-auto') {
+      #{$property}: auto !important;
+    }
     @each $size, $value in $sizing {
       @include sizing-util('.#{$name}-#{$size}') {
-        max-#{$property}: $value !important;
-        #{$property}: 100% !important;
+        #{$property}: $value !important;
       }
     }
   }
@@ -132,7 +206,6 @@ table:not([class^=s-]) {
     line-height: 0 !important;
     height: 0 !important;
   }
-
   @each $size, $value in $spacers {
     @include spacer-util('.s-#{$size}') {
       font-size: $value !important;

data/core/scss/_selectors_for_utils.scss

@@ -98,3 +98,27 @@
     }
   }
 }
+
+//
+// Text align
+//
+@mixin text-align-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}
+
+//
+// Vertical align
+//
+@mixin valign-util($class) {
+  #{$class} {
+    &,
+    & > tbody > tr > td {
+      @content
+    }
+  }
+}

data/core/scss/_utilities.scss

@@ -117,9 +117,29 @@ $border-widths: (
 ) !default;
 
 $border-radiuses: (
-  '-sm': 3px,
-  '': 6px,
-  '-lg': 9px,
+  '': 4px,
+  '-none': 0px,
+  '-sm': 2px,
+  '-md': 6px,
+  '-lg': 8px,
   '-xl': 12px,
-  '-0': 0px
+  '-2xl': 16px,
+  '-3xl': 24px,
+  '-full': 9999px
+) !default;
+
+$vertical-align: (
+  top,
+  middle,
+  bottom,
+  baseline,
+  text-top,
+  text-bottom
+) !default;
+
+$text-align: (
+  left,
+  right,
+  center,
+  justify
 ) !default;

data/core/scss/components/_grid.scss

@@ -1,10 +1,16 @@
-table.row {
-  table-layout: fixed;
-  width: 100%;
-  & > tbody > tr > td {
-    min-height: 1px;
-    font-weight: normal;
-    padding-right: 30px;
+.row {
+  margin-right: -24px;
+  & > table {
+    table-layout: fixed;
+    -premailer-width: 100%;
+    width: 100%;
+    & > tbody > tr > td {
+      min-height: 1px;
+      font-weight: normal;
+      padding-right: 24px;
+      vertical-align: top;
+      text-align: left;
+    }
   }
 }
 
@@ -16,19 +22,21 @@ table.row {
 }
 
 @each $space, $value in $spacers {
-  table.row.g-#{$space},
-  table.row.gx-#{$space},
-  table.row.g-lg-#{$space},
-  table.row.gx-lg-#{$space} {
-    & > tbody > tr > td {
+  .row.gap-#{$space},
+  .row.gap-x-#{$space},
+  .row.gap-lg-#{$space},
+  .row.gap-x-lg-#{$space} {
+    margin-right: -1 * $value;
+    & > table > tbody > tr > td {
       padding-right: $value;
     }
   }
-  table.row.g-#{$space},
-  table.row.gy-#{$space},
-  table.row.g-lg-#{$space},
-  table.row.gy-lg-#{$space} {
-    & > tbody > tr > td {
+  .row.gap-#{$space},
+  .row.gap-y-#{$space},
+  .row.gap-lg-#{$space},
+  .row.gap-y-lg-#{$space} {
+    margin-bottom: -1 * $value;
+    & > table > tbody > tr > td {
       padding-bottom: $value;
     }
   }

data/core/scss/components/_stack.scss

@@ -0,0 +1,39 @@
+@each $space, $value in $spacers {
+  table.stack-x.gap-#{$space},
+  table.stack-x.gap-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-right: $value;
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+  table.stack-y.gap-#{$space},
+  table.stack-y.gap-lg-#{$space} {
+    & > tbody > tr {
+      & > td {
+        padding-bottom: $value;
+      }
+      &:last-child > td {
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+
+.stack-cell {
+  vertical-align: top;
+  text-align: left;
+}
+
+@each $align in $vertical-align {
+  table.stack-valign-#{$align} > tbody > tr > td {
+    vertical-align: $align;
+  }
+}
+
+@each $align in $text-align {
+  table.stack-align-#{$align} > tbody > tr > td {
+    text-align: $align;
+  }
+}

data/core/scss/utilities/_sizing.scss

@@ -1,12 +1,12 @@
 @each $prefix in $breakpoints {
   @each $name, $property in $sizing-types {
-    @include sizing-util('.#{$name}-#{$prefix}full') {
+    @include sizing-util('.max-#{$name}-#{$prefix}full') {
       max-#{$property}: 100%;
       -premailer-#{$property}: 100%;
       #{$property}: 100%;
     }
     @each $size, $value in $sizing {
-      @include sizing-util('.#{$name}-#{$prefix}#{$size}') {
+      @include sizing-util('.max-#{$name}-#{$prefix}#{$size}') {
         max-#{$property}: $value;
         -premailer-#{$property}: strip-unit($value);
         #{$property}: 100%;
@@ -14,3 +14,22 @@
     }
   }
 }
+
+@each $prefix in $breakpoints {
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.#{$name}-#{$prefix}full') {
+      -premailer-#{$property}: 100%;
+      #{$property}: 100%;
+    }
+    @include sizing-util('.#{$name}-#{$prefix}auto') {
+      -premailer-#{$property}: auto;
+      #{$property}: auto;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.#{$name}-#{$prefix}#{$size}') {
+        -premailer-#{$property}: strip-unit($value);
+        #{$property}: $value;
+      }
+    }
+  }
+}

data/core/scss/utilities/_typography.scss

@@ -36,16 +36,10 @@ h1, h2, h3, h4, h5, h6,
   }
 }
 
-.text-left {
-  text-align: left !important;
-}
-
-.text-right {
-  text-align: right !important;
-}
-
-.text-center {
-  text-align: center !important;
+@each $align in $text-align {
+  @include text-align-util('.text-#{$align}') {
+    text-align: $align !important;
+  }
 }
 
 p {

data/core/scss/utilities/_valign.scss

@@ -0,0 +1,5 @@
+@each $align in $vertical-align {
+  @include valign-util('.valign-#{$align}') {
+    vertical-align: $align !important;
+  }
+}

data/core/templates/body.html

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" valign="top" role="presentation">
+  <tbody>
+    <tr>
+      <td valign="top">
+        {{ contents }}
+      </td>
+    </tr>
+  </tbody>
+</table>

data/core/templates/{container.html.erb → container.html}

@@ -1,18 +1,18 @@
-<table class="<%= classes %>">
+<table class="{{ classes }}" role="presentation">
   <tbody>
     <tr>
       <td align="center">
         <!--[if (gte mso 9)|(IE)]>
-          <table align="center">
+          <table align="center" role="presentation">
             <tbody>
               <tr>
                 <td width="600">
         <![endif]-->
-        <table align="center">
+        <table align="center" role="presentation">
           <tbody>
             <tr>
               <td>
-                <%= contents %>
+                {{ contents }}
               </td>
             </tr>
           </tbody>