bootstrap-email 1.0.0.alpha3 → 1.0.0.alpha3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/VERSION +1 -1
- data/core/bootstrap-head.scss +88 -15
- data/core/scss/components/_grid.scss +25 -20
- data/core/scss/components/_stack.scss +16 -10
- data/lib/bootstrap-email/compiler.rb +4 -5
- data/lib/bootstrap-email/converters/align.rb +1 -1
- data/lib/bootstrap-email/converters/base.rb +3 -2
- data/lib/bootstrap-email/converters/grid.rb +1 -1
- data/lib/bootstrap-email/converters/margin.rb +2 -2
- data/lib/bootstrap-email/converters/padding.rb +4 -4
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 75655e6d12a24abed3f9cf4fee65bc198210d1e9289196b8df80bd53791c21b2
|
|
4
|
+
data.tar.gz: 365aedf89fa3f0818ecb6808762d75045855e542172d5ad3440cb5c69dbdc748
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 80c34ce66af8e2024fa3547a08c1ec4330ddf77c7e25297753edd164b54586f811c19b2722df572f296fa006227b950c0803e7769fc7a523ed4cba0c1bc451d1
|
|
7
|
+
data.tar.gz: 38b53f2516bbd1f46fea866b06170174d89333f7d8b44a42bb36d7220af717ae97ab0e9967898ded0544584d120b59bde6d22c78023e562c1254460db6c7c9f0
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.0.alpha3
|
|
1
|
+
1.0.0.alpha3.1
|
data/core/bootstrap-head.scss
CHANGED
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
@import 'scss/selectors_for_utils';
|
|
9
9
|
@import 'scss/helper_groups';
|
|
10
10
|
|
|
11
|
+
// Force base font in Outlook
|
|
12
|
+
body, table, td {
|
|
13
|
+
font-family: $font-family-base !important;
|
|
14
|
+
}
|
|
15
|
+
|
|
11
16
|
// Forces Outlook.com to display emails at full width
|
|
12
17
|
.ExternalClass {
|
|
13
18
|
width: 100%;
|
|
@@ -66,18 +71,57 @@ table:not([class^=s-]) {
|
|
|
66
71
|
/*! allow_purge_after */
|
|
67
72
|
|
|
68
73
|
@media screen and (max-width: 600px) {
|
|
74
|
+
// Row Gap
|
|
75
|
+
@each $space, $value in $spacers {
|
|
76
|
+
.gap-#{$space}.row,
|
|
77
|
+
.gap-x-#{$space}.row {
|
|
78
|
+
margin-right: -1 * $value !important;
|
|
79
|
+
& > table > tbody > tr > td {
|
|
80
|
+
padding-right: $value !important;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
.gap-#{$space}.row,
|
|
84
|
+
.gap-y-#{$space}.row {
|
|
85
|
+
margin-bottom: -1 * $value !important;
|
|
86
|
+
& > table > tbody > tr > td {
|
|
87
|
+
padding-bottom: $value !important;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Stack Gap
|
|
93
|
+
@each $space, $value in $spacers {
|
|
94
|
+
table.gap-lg-#{$space}.stack-x > tbody > tr > td {
|
|
95
|
+
padding-right: 0 !important;
|
|
96
|
+
}
|
|
97
|
+
table.gap-lg-#{$space}.stack-y > tbody > tr > td {
|
|
98
|
+
padding-bottom: 0 !important;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
@each $space, $value in $spacers {
|
|
102
|
+
table.gap-#{$space}.stack-x > tbody > tr > td {
|
|
103
|
+
padding-right: $value !important;
|
|
104
|
+
}
|
|
105
|
+
table.gap-#{$space}.stack-y > tbody > tr > td {
|
|
106
|
+
padding-bottom: $value !important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
69
110
|
// Grid
|
|
70
111
|
@each $key, $value in $grid-cols {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
padding-left: 0 !important;
|
|
77
|
-
padding-right: 0 !important;
|
|
78
|
-
}
|
|
112
|
+
td.col-lg-#{$key} {
|
|
113
|
+
display: block;
|
|
114
|
+
width: 100% !important;
|
|
115
|
+
padding-left: 0 !important;
|
|
116
|
+
padding-right: 0 !important;
|
|
79
117
|
}
|
|
80
118
|
}
|
|
119
|
+
td.col-lg {
|
|
120
|
+
display: block;
|
|
121
|
+
width: 100% !important;
|
|
122
|
+
padding-left: 0 !important;
|
|
123
|
+
padding-right: 0 !important;
|
|
124
|
+
}
|
|
81
125
|
|
|
82
126
|
// Display
|
|
83
127
|
@each $display in $display-type {
|
|
@@ -91,26 +135,56 @@ table:not([class^=s-]) {
|
|
|
91
135
|
}
|
|
92
136
|
}
|
|
93
137
|
|
|
94
|
-
// Sizing
|
|
138
|
+
// Sizing Max Width / Height
|
|
139
|
+
@each $name, $property in $sizing-types {
|
|
140
|
+
@include sizing-util('.max-#{$name}-lg-full') {
|
|
141
|
+
max-#{$property}: unset !important;
|
|
142
|
+
#{$property}: auto !important;
|
|
143
|
+
}
|
|
144
|
+
@each $size, $value in $sizing {
|
|
145
|
+
@include sizing-util('.max-#{$name}-lg-#{$size}') {
|
|
146
|
+
max-#{$property}: unset !important;
|
|
147
|
+
#{$property}: auto !important;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
@each $name, $property in $sizing-types {
|
|
152
|
+
@include sizing-util('.max-#{$name}-full') {
|
|
153
|
+
max-#{$property}: 100% !important;
|
|
154
|
+
#{$property}: 100% !important;
|
|
155
|
+
}
|
|
156
|
+
@each $size, $value in $sizing {
|
|
157
|
+
@include sizing-util('.max-#{$name}-#{$size}') {
|
|
158
|
+
max-#{$property}: $value !important;
|
|
159
|
+
#{$property}: 100% !important;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
// Sizing Width / Height
|
|
95
165
|
@each $name, $property in $sizing-types {
|
|
96
166
|
@include sizing-util('.#{$name}-lg-full') {
|
|
97
|
-
|
|
167
|
+
#{$property}: auto !important;
|
|
168
|
+
}
|
|
169
|
+
@include sizing-util('.#{$name}-lg-auto') {
|
|
98
170
|
#{$property}: auto !important;
|
|
99
171
|
}
|
|
100
172
|
@each $size, $value in $sizing {
|
|
101
173
|
@include sizing-util('.#{$name}-lg-#{$size}') {
|
|
102
|
-
max-#{$property}: auto !important;
|
|
103
174
|
#{$property}: auto !important;
|
|
104
175
|
}
|
|
105
176
|
}
|
|
177
|
+
}
|
|
178
|
+
@each $name, $property in $sizing-types {
|
|
106
179
|
@include sizing-util('.#{$name}-full') {
|
|
107
|
-
max-#{$property}: 100% !important;
|
|
108
180
|
#{$property}: 100% !important;
|
|
109
181
|
}
|
|
182
|
+
@include sizing-util('.#{$name}-auto') {
|
|
183
|
+
#{$property}: auto !important;
|
|
184
|
+
}
|
|
110
185
|
@each $size, $value in $sizing {
|
|
111
186
|
@include sizing-util('.#{$name}-#{$size}') {
|
|
112
|
-
|
|
113
|
-
#{$property}: 100% !important;
|
|
187
|
+
#{$property}: $value !important;
|
|
114
188
|
}
|
|
115
189
|
}
|
|
116
190
|
}
|
|
@@ -132,7 +206,6 @@ table:not([class^=s-]) {
|
|
|
132
206
|
line-height: 0 !important;
|
|
133
207
|
height: 0 !important;
|
|
134
208
|
}
|
|
135
|
-
|
|
136
209
|
@each $size, $value in $spacers {
|
|
137
210
|
@include spacer-util('.s-#{$size}') {
|
|
138
211
|
font-size: $value !important;
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
.row {
|
|
2
|
+
margin-right: -24px;
|
|
3
|
+
& > table {
|
|
4
|
+
table-layout: fixed;
|
|
5
|
+
-premailer-width: 100%;
|
|
6
|
+
width: 100%;
|
|
7
|
+
& > tbody > tr > td {
|
|
8
|
+
min-height: 1px;
|
|
9
|
+
font-weight: normal;
|
|
10
|
+
padding-right: 24px;
|
|
11
|
+
vertical-align: top;
|
|
12
|
+
text-align: left;
|
|
13
|
+
}
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
16
|
|
|
@@ -19,19 +22,21 @@ table.row {
|
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
@each $space, $value in $spacers {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
.row.gap-#{$space},
|
|
26
|
+
.row.gap-x-#{$space},
|
|
27
|
+
.row.gap-lg-#{$space},
|
|
28
|
+
.row.gap-x-lg-#{$space} {
|
|
29
|
+
margin-right: -1 * $value;
|
|
30
|
+
& > table > tbody > tr > td {
|
|
27
31
|
padding-right: $value;
|
|
28
32
|
}
|
|
29
33
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
.row.gap-#{$space},
|
|
35
|
+
.row.gap-y-#{$space},
|
|
36
|
+
.row.gap-lg-#{$space},
|
|
37
|
+
.row.gap-y-lg-#{$space} {
|
|
38
|
+
margin-bottom: -1 * $value;
|
|
39
|
+
& > table > tbody > tr > td {
|
|
35
40
|
padding-bottom: $value;
|
|
36
41
|
}
|
|
37
42
|
}
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
@each $space, $value in $spacers {
|
|
2
|
-
table.stack-x.gap-#{$space}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
padding-right:
|
|
2
|
+
table.stack-x.gap-#{$space},
|
|
3
|
+
table.stack-x.gap-lg-#{$space} {
|
|
4
|
+
& > tbody > tr > td {
|
|
5
|
+
padding-right: $value;
|
|
6
|
+
&:last-child {
|
|
7
|
+
padding-right: 0;
|
|
8
|
+
}
|
|
6
9
|
}
|
|
7
10
|
}
|
|
8
|
-
table.stack-y.gap-#{$space}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
table.stack-y.gap-#{$space},
|
|
12
|
+
table.stack-y.gap-lg-#{$space} {
|
|
13
|
+
& > tbody > tr {
|
|
14
|
+
& > td {
|
|
15
|
+
padding-bottom: $value;
|
|
16
|
+
}
|
|
17
|
+
&:last-child > td {
|
|
18
|
+
padding-bottom: 0;
|
|
19
|
+
}
|
|
14
20
|
}
|
|
15
21
|
}
|
|
16
22
|
}
|
|
@@ -54,6 +54,7 @@ module BootstrapEmail
|
|
|
54
54
|
end
|
|
55
55
|
|
|
56
56
|
def compile_html!
|
|
57
|
+
BootstrapEmail::Converter::Body.build(doc)
|
|
57
58
|
BootstrapEmail::Converter::Block.build(doc)
|
|
58
59
|
|
|
59
60
|
BootstrapEmail::Converter::Button.build(doc)
|
|
@@ -65,17 +66,15 @@ module BootstrapEmail
|
|
|
65
66
|
BootstrapEmail::Converter::Grid.build(doc)
|
|
66
67
|
BootstrapEmail::Converter::Stack.build(doc)
|
|
67
68
|
|
|
69
|
+
BootstrapEmail::Converter::Color.build(doc)
|
|
68
70
|
BootstrapEmail::Converter::Spacing.build(doc)
|
|
69
|
-
BootstrapEmail::Converter::Padding.build(doc)
|
|
70
71
|
BootstrapEmail::Converter::Margin.build(doc)
|
|
71
72
|
BootstrapEmail::Converter::Spacer.build(doc)
|
|
72
|
-
|
|
73
|
-
BootstrapEmail::Converter::Table.build(doc)
|
|
74
|
-
BootstrapEmail::Converter::Body.build(doc)
|
|
75
73
|
BootstrapEmail::Converter::Align.build(doc)
|
|
76
|
-
BootstrapEmail::Converter::
|
|
74
|
+
BootstrapEmail::Converter::Padding.build(doc)
|
|
77
75
|
|
|
78
76
|
BootstrapEmail::Converter::PreviewText.build(doc)
|
|
77
|
+
BootstrapEmail::Converter::Table.build(doc)
|
|
79
78
|
end
|
|
80
79
|
|
|
81
80
|
def inline_css!
|
|
@@ -12,7 +12,7 @@ module BootstrapEmail
|
|
|
12
12
|
|
|
13
13
|
def align_helper(node, full_type, type)
|
|
14
14
|
unless table?(node) || td?(node)
|
|
15
|
-
node['class'] = node['class'].sub(full_type, '')
|
|
15
|
+
node['class'] = node['class'].sub(full_type, '').strip
|
|
16
16
|
node = node.replace(template('table', classes: full_type, contents: node.to_html))[0]
|
|
17
17
|
end
|
|
18
18
|
node['align'] = type
|
|
@@ -14,7 +14,8 @@ module BootstrapEmail
|
|
|
14
14
|
private
|
|
15
15
|
|
|
16
16
|
def template(file, locals_hash = {})
|
|
17
|
-
locals_hash[:classes] = locals_hash[:classes].split.join(' ')
|
|
17
|
+
locals_hash[:classes] = locals_hash[:classes].to_s.split.join(' ')
|
|
18
|
+
locals_hash[:content] ||= nil
|
|
18
19
|
if @cached_templates[file]
|
|
19
20
|
string = @cached_templates[file]
|
|
20
21
|
else
|
|
@@ -35,7 +36,7 @@ module BootstrapEmail
|
|
|
35
36
|
|
|
36
37
|
def add_class(node, class_name)
|
|
37
38
|
node['class'] ||= ''
|
|
38
|
-
node['class'] += class_name
|
|
39
|
+
node['class'] += node['class'].length.zero? ? class_name : " #{class_name}"
|
|
39
40
|
end
|
|
40
41
|
|
|
41
42
|
def margin?(node)
|
|
@@ -3,7 +3,7 @@ module BootstrapEmail
|
|
|
3
3
|
class Grid < Base
|
|
4
4
|
def build
|
|
5
5
|
each_node('.row') do |node|
|
|
6
|
-
node.replace(template('
|
|
6
|
+
node.replace(template('div', classes: node['class'], contents: template('table-to-tr', contents: node.inner_html)))
|
|
7
7
|
end
|
|
8
8
|
each_node('*[class*=col]') do |node|
|
|
9
9
|
node.replace(template('td', classes: node['class'], contents: node.inner_html))
|
|
@@ -2,10 +2,10 @@ module BootstrapEmail
|
|
|
2
2
|
module Converter
|
|
3
3
|
class Margin < Base
|
|
4
4
|
def build
|
|
5
|
-
each_node('*[class*=my-], *[class*=mt-], *[class*=mb-]
|
|
5
|
+
each_node("*[class^='my-'], *[class^='mt-'], *[class^='mb-'], *[class*=' my-'], *[class*=' mt-'], *[class*=' mb-']") do |node|
|
|
6
6
|
top_class = node['class'][/m[ty]{1}-(lg-)?(\d+)/]
|
|
7
7
|
bottom_class = node['class'][/m[by]{1}-(lg-)?(\d+)/]
|
|
8
|
-
node['class'] = node['class'].gsub(/(m[tby]{1}-(lg-)?\d+)/, '')
|
|
8
|
+
node['class'] = node['class'].gsub(/(m[tby]{1}-(lg-)?\d+)/, '').strip
|
|
9
9
|
html = ''
|
|
10
10
|
if top_class
|
|
11
11
|
html += template('div', classes: "s-#{top_class.gsub(/m[ty]{1}-/, '')}", contents: nil)
|
|
@@ -2,12 +2,12 @@ module BootstrapEmail
|
|
|
2
2
|
module Converter
|
|
3
3
|
class Padding < Base
|
|
4
4
|
def build
|
|
5
|
-
each_node(
|
|
5
|
+
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|
|
|
6
6
|
next if ['table', 'td', 'a'].include?(node.name)
|
|
7
7
|
|
|
8
|
-
padding_regex = /(p[trblxy]
|
|
9
|
-
classes = node['class'].
|
|
10
|
-
node['class'] = node['class'].gsub(padding_regex, '')
|
|
8
|
+
padding_regex = /(p[trblxy]?-(lg-)?\d+)/
|
|
9
|
+
classes = node['class'].gsub(padding_regex).to_a.join(' ')
|
|
10
|
+
node['class'] = node['class'].gsub(padding_regex, '').strip
|
|
11
11
|
node.replace(template('table', classes: classes, contents: node.to_html))
|
|
12
12
|
end
|
|
13
13
|
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bootstrap-email
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.0.alpha3
|
|
4
|
+
version: 1.0.0.alpha3.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Stuart Yamartino
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-05-
|
|
11
|
+
date: 2021-05-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: nokogiri
|