bootstrap-email 1.0.0.alpha1.2 → 1.0.0.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dff167ba86e6d966e96d13e01988af9c06a734b2f7bef9fd9c67dac20ba97d72
-  data.tar.gz: 3a9c52a5b39f2c6a18c0b4e646eedf24c3051eef56a168d3c8fb18ece7daa92a
+  metadata.gz: 56d39a3ac5d5ab4d55c407432aa0cc9145a259b6b256de499a9cbfdadaf927f5
+  data.tar.gz: 9d14f30d758ca9db6f33c3bac05bc5a09027039be8b52e2e452c6b4bd0100f3c
 SHA512:
-  metadata.gz: 8ce16ed9d76b94341b7ee39ac4633133d4dc70fa9d2a4952cdef848c61601006bee71452aff8fa9959e303c7970d3e96072459e1d7708bd6d259be2eb36aa6fa
-  data.tar.gz: 03b4b339a9c43b802b93e8d71dd8c5465ba0e085fc9a28063e09c75ed127adefa02b8f6f1e56b06b455c776cea23f74566e09706fac5333ba440defb5067cc94
+  metadata.gz: 462b7d5c6ab1b834d9973c12161e870d0b283cba5f435a42f3633fad517aa32667eda4876b4cf0f068b4d068a5db95e8c53d90c887f2e2b0e067cf3c23ce08eb
+  data.tar.gz: 2d1cdd1c3e5c7782f36056befd955b82d8a6e6a8c09ea2c3305fdb8be2f3a2383ceac7dd7e40dd9bd890ee8435fb2c7c79e3e0ce6ba2f2c3c8cffbb5e496c297

data/VERSION

@@ -1 +1 @@
-1.0.0.alpha1.2
+1.0.0.alpha4

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-row.gap-#{$space},
+  table.stack-row.gap-lg-#{$space} {
+    & > tbody > tr > td {
+      padding-right: $value;
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+  table.stack-col.gap-#{$space},
+  table.stack-col.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-ay-#{$align} > tbody > tr > td {
+    vertical-align: $align;
+  }
+}
+
+@each $align in $text-align {
+  table.stack-ax-#{$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('.ay-#{$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>