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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f70b6dc2a2d0ebd4dfcdee53c7242e2aa6c7824571d41be81e0518e1516ce03c
-  data.tar.gz: c49e013fd55e2b2f87c204dc8b64ac093149e4d45df5e2d5da809540b2c4b399
+  metadata.gz: 75655e6d12a24abed3f9cf4fee65bc198210d1e9289196b8df80bd53791c21b2
+  data.tar.gz: 365aedf89fa3f0818ecb6808762d75045855e542172d5ad3440cb5c69dbdc748
 SHA512:
-  metadata.gz: ab6c6bff12d2787b5962c51ae97983abdd407ccdd77e72a24e62644ff8e16d5a83d33e32ec14e577c9514731038091340c66ba47fd09c645380fc2aab27d42a6
-  data.tar.gz: 74a21957509ea73128b3d13c89dd21e0b6084c1a90efdac8ef4e3238e29e7ad4c10581d480665eacb578dd78c1177d9494e932bb20b841a93960cfb4b1497f8b
+  metadata.gz: 80c34ce66af8e2024fa3547a08c1ec4330ddf77c7e25297753edd164b54586f811c19b2722df572f296fa006227b950c0803e7769fc7a523ed4cba0c1bc451d1
+  data.tar.gz: 38b53f2516bbd1f46fea866b06170174d89333f7d8b44a42bb36d7220af717ae97ab0e9967898ded0544584d120b59bde6d22c78023e562c1254460db6c7c9f0

data/VERSION

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

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%;
@@ -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/components/_grid.scss

@@ -1,13 +1,16 @@
-table.row {
-  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;
+.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;
+    }
   }
 }
 
@@ -19,19 +22,21 @@ table.row {
 }
 
 @each $space, $value in $spacers {
-  table.row.gap-#{$space},
-  table.row.gap-x-#{$space},
-  table.row.gap-lg-#{$space},
-  table.row.gap-x-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.gap-#{$space},
-  table.row.gap-y-#{$space},
-  table.row.gap-lg-#{$space},
-  table.row.gap-y-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

@@ -1,16 +1,22 @@
 @each $space, $value in $spacers {
-  table.stack-x.gap-#{$space} > tbody > tr > td {
-    padding-right: $value;
-    &:last-child {
-      padding-right: 0;
+  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} > tbody > tr {
-    & > td {
-      padding-bottom: $value;
-    }
-    &:last-child > td {
-      padding-bottom: 0;
+  table.stack-y.gap-#{$space},
+  table.stack-y.gap-lg-#{$space} {
+    & > tbody > tr {
+      & > td {
+        padding-bottom: $value;
+      }
+      &:last-child > td {
+        padding-bottom: 0;
+      }
     }
   }
 }

data/lib/bootstrap-email/compiler.rb

@@ -54,6 +54,7 @@ module BootstrapEmail
     end
 
     def compile_html!
+      BootstrapEmail::Converter::Body.build(doc)
       BootstrapEmail::Converter::Block.build(doc)
 
       BootstrapEmail::Converter::Button.build(doc)
@@ -65,17 +66,15 @@ module BootstrapEmail
       BootstrapEmail::Converter::Grid.build(doc)
       BootstrapEmail::Converter::Stack.build(doc)
 
+      BootstrapEmail::Converter::Color.build(doc)
       BootstrapEmail::Converter::Spacing.build(doc)
-      BootstrapEmail::Converter::Padding.build(doc)
       BootstrapEmail::Converter::Margin.build(doc)
       BootstrapEmail::Converter::Spacer.build(doc)
-
-      BootstrapEmail::Converter::Table.build(doc)
-      BootstrapEmail::Converter::Body.build(doc)
       BootstrapEmail::Converter::Align.build(doc)
-      BootstrapEmail::Converter::Color.build(doc)
+      BootstrapEmail::Converter::Padding.build(doc)
 
       BootstrapEmail::Converter::PreviewText.build(doc)
+      BootstrapEmail::Converter::Table.build(doc)
     end
 
     def inline_css!

data/lib/bootstrap-email/converters/align.rb

@@ -12,7 +12,7 @@ module BootstrapEmail
 
       def align_helper(node, full_type, type)
         unless table?(node) || td?(node)
-          node['class'] = node['class'].sub(full_type, '')
+          node['class'] = node['class'].sub(full_type, '').strip
           node = node.replace(template('table', classes: full_type, contents: node.to_html))[0]
         end
         node['align'] = type

data/lib/bootstrap-email/converters/base.rb

@@ -14,7 +14,8 @@ module BootstrapEmail
       private
 
       def template(file, locals_hash = {})
-        locals_hash[:classes] = locals_hash[:classes].split.join(' ') if locals_hash[:classes]
+        locals_hash[:classes] = locals_hash[:classes].to_s.split.join(' ')
+        locals_hash[:content] ||= nil
         if @cached_templates[file]
           string = @cached_templates[file]
         else
@@ -35,7 +36,7 @@ module BootstrapEmail
 
       def add_class(node, class_name)
         node['class'] ||= ''
-        node['class'] += class_name
+        node['class'] += node['class'].length.zero? ? class_name : " #{class_name}"
       end
 
       def margin?(node)

data/lib/bootstrap-email/converters/grid.rb

@@ -3,7 +3,7 @@ module BootstrapEmail
     class Grid < Base
       def build
         each_node('.row') do |node|
-          node.replace(template('table-to-tr', classes: node['class'], contents: node.inner_html))
+          node.replace(template('div', classes: node['class'], contents: template('table-to-tr', contents: node.inner_html)))
         end
         each_node('*[class*=col]') do |node|
           node.replace(template('td', classes: node['class'], contents: node.inner_html))

data/lib/bootstrap-email/converters/margin.rb

@@ -2,10 +2,10 @@ module BootstrapEmail
   module Converter
     class Margin < Base
       def build
-        each_node('*[class*=my-], *[class*=mt-], *[class*=mb-]') do |node|
+        each_node("*[class^='my-'], *[class^='mt-'], *[class^='mb-'], *[class*=' my-'], *[class*=' mt-'], *[class*=' mb-']") do |node|
           top_class = node['class'][/m[ty]{1}-(lg-)?(\d+)/]
           bottom_class = node['class'][/m[by]{1}-(lg-)?(\d+)/]
-          node['class'] = node['class'].gsub(/(m[tby]{1}-(lg-)?\d+)/, '')
+          node['class'] = node['class'].gsub(/(m[tby]{1}-(lg-)?\d+)/, '').strip
           html = ''
           if top_class
             html += template('div', classes: "s-#{top_class.gsub(/m[ty]{1}-/, '')}", contents: nil)

data/lib/bootstrap-email/converters/padding.rb

@@ -2,12 +2,12 @@ module BootstrapEmail
   module Converter
     class Padding < Base
       def build
-        each_node('*[class*=p-], *[class*=pt-], *[class*=pr-], *[class*=pb-], *[class*=pl-], *[class*=px-], *[class*=py-]') do |node|
+        each_node("*[class^=p-], *[class^=pt-], *[class^=pr-], *[class^=pb-], *[class^=pl-], *[class^=px-], *[class^=py-], *[class*=' p-'], *[class*=' pt-'], *[class*=' pr-'], *[class*=' pb-'], *[class*=' pl-'], *[class*=' px-'], *[class*=' py-']") do |node|
           next if ['table', 'td', 'a'].include?(node.name)
 
-          padding_regex = /(p[trblxy]?-\d+)/
-          classes = node['class'].scan(padding_regex).join(' ')
-          node['class'] = node['class'].gsub(padding_regex, '')
+          padding_regex = /(p[trblxy]?-(lg-)?\d+)/
+          classes = node['class'].gsub(padding_regex).to_a.join(' ')
+          node['class'] = node['class'].gsub(padding_regex, '').strip
           node.replace(template('table', classes: classes, contents: node.to_html))
         end
       end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-email
 version: !ruby/object:Gem::Version
-  version: 1.0.0.alpha3
+  version: 1.0.0.alpha3.1
 platform: ruby
 authors:
 - Stuart Yamartino
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-08 00:00:00.000000000 Z
+date: 2021-05-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri