bootstrap-email 1.0.0.alpha1.2 → 1.0.0.alpha4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/VERSION +1 -1
- data/core/bootstrap-email.scss +2 -0
- data/core/bootstrap-head.scss +89 -16
- data/core/scss/_selectors_for_utils.scss +24 -0
- data/core/scss/_utilities.scss +24 -4
- data/core/scss/components/_grid.scss +25 -17
- data/core/scss/components/_stack.scss +39 -0
- data/core/scss/utilities/_sizing.scss +21 -2
- data/core/scss/utilities/_typography.scss +4 -10
- data/core/scss/utilities/_valign.scss +5 -0
- data/core/templates/body.html +9 -0
- data/core/templates/{container.html.erb → container.html} +4 -4
- data/core/templates/div.html +3 -0
- data/core/templates/table-left.html +9 -0
- data/core/templates/table-to-tbody.html +5 -0
- data/core/templates/table-to-tr.html +7 -0
- data/core/templates/table.html +9 -0
- data/core/templates/td.html +3 -0
- data/core/templates/tr.html +5 -0
- data/lib/{bootstrap_email.rb → bootstrap-email.rb} +6 -3
- data/lib/bootstrap-email/bootstrap_email_cli.rb +6 -7
- data/lib/bootstrap-email/compiler.rb +50 -65
- data/lib/bootstrap-email/config.rb +50 -0
- data/lib/bootstrap-email/{components → converters}/alert.rb +1 -1
- data/lib/bootstrap-email/converters/align.rb +22 -0
- data/lib/bootstrap-email/{components → converters}/badge.rb +1 -1
- data/lib/bootstrap-email/converters/base.rb +63 -0
- data/lib/bootstrap-email/converters/block.rb +13 -0
- data/lib/bootstrap-email/converters/body.rb +10 -0
- data/lib/bootstrap-email/{components → converters}/button.rb +1 -1
- data/lib/bootstrap-email/{components → converters}/card.rb +3 -3
- data/lib/bootstrap-email/{components → converters}/color.rb +1 -1
- data/lib/bootstrap-email/{components → converters}/container.rb +1 -1
- data/lib/bootstrap-email/converters/force_encoding.rb +14 -0
- data/lib/bootstrap-email/converters/grid.rb +14 -0
- data/lib/bootstrap-email/converters/head_style.rb +33 -0
- data/lib/bootstrap-email/{components → converters}/hr.rb +2 -2
- data/lib/bootstrap-email/{components → converters}/margin.rb +3 -3
- data/lib/bootstrap-email/converters/padding.rb +16 -0
- data/lib/bootstrap-email/converters/paragraph.rb +13 -0
- data/lib/bootstrap-email/converters/preview_text.rb +18 -0
- data/lib/bootstrap-email/{components → converters}/spacer.rb +1 -1
- data/lib/bootstrap-email/{components → converters}/spacing.rb +5 -6
- data/lib/bootstrap-email/converters/stack.rb +30 -0
- data/lib/bootstrap-email/{components → converters}/table.rb +1 -1
- data/lib/bootstrap-email/converters/version_comment.rb +15 -0
- data/lib/bootstrap-email/erb.rb +9 -0
- data/lib/bootstrap-email/rails/action_mailer.rb +7 -2
- data/lib/bootstrap-email/sass_cache.rb +43 -26
- data/lib/bootstrap-email/setup.rb +27 -0
- metadata +44 -32
- data/core/templates/body.html.erb +0 -9
- data/core/templates/col.html.erb +0 -3
- data/core/templates/div.html.erb +0 -3
- data/core/templates/row.html.erb +0 -7
- data/core/templates/table-left.html.erb +0 -9
- data/core/templates/table.html.erb +0 -9
- data/lib/bootstrap-email/components/align.rb +0 -21
- data/lib/bootstrap-email/components/base.rb +0 -26
- data/lib/bootstrap-email/components/body.rb +0 -22
- data/lib/bootstrap-email/components/grid.rb +0 -14
- data/lib/bootstrap-email/components/padding.rb +0 -16
- data/lib/bootstrap-email/components/paragraph.rb +0 -24
- data/lib/bootstrap-email/initialize.rb +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 56d39a3ac5d5ab4d55c407432aa0cc9145a259b6b256de499a9cbfdadaf927f5
|
4
|
+
data.tar.gz: 9d14f30d758ca9db6f33c3bac05bc5a09027039be8b52e2e452c6b4bd0100f3c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 462b7d5c6ab1b834d9973c12161e870d0b283cba5f435a42f3633fad517aa32667eda4876b4cf0f068b4d068a5db95e8c53d90c887f2e2b0e067cf3c23ce08eb
|
7
|
+
data.tar.gz: 2d1cdd1c3e5c7782f36056befd955b82d8a6e6a8c09ea2c3305fdb8be2f3a2383ceac7dd7e40dd9bd890ee8435fb2c7c79e3e0ce6ba2f2c3c8cffbb5e496c297
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.0.0.
|
1
|
+
1.0.0.alpha4
|
data/core/bootstrap-email.scss
CHANGED
@@ -16,6 +16,7 @@
|
|
16
16
|
@import 'scss/components/image';
|
17
17
|
@import 'scss/components/preview';
|
18
18
|
@import 'scss/components/table';
|
19
|
+
@import 'scss/components/stack';
|
19
20
|
|
20
21
|
@import 'scss/utilities/background';
|
21
22
|
@import 'scss/utilities/border';
|
@@ -26,3 +27,4 @@
|
|
26
27
|
@import 'scss/utilities/spacing';
|
27
28
|
@import 'scss/utilities/text-decoration';
|
28
29
|
@import 'scss/utilities/typography';
|
30
|
+
@import 'scss/utilities/valign';
|
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%;
|
@@ -28,7 +33,7 @@ a {
|
|
28
33
|
text-decoration: none;
|
29
34
|
}
|
30
35
|
|
31
|
-
//
|
36
|
+
// Inherit text color so color can be set on the body and inherited by children
|
32
37
|
* {
|
33
38
|
color: inherit;
|
34
39
|
}
|
@@ -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;
|
@@ -98,3 +98,27 @@
|
|
98
98
|
}
|
99
99
|
}
|
100
100
|
}
|
101
|
+
|
102
|
+
//
|
103
|
+
// Text align
|
104
|
+
//
|
105
|
+
@mixin text-align-util($class) {
|
106
|
+
#{$class} {
|
107
|
+
&,
|
108
|
+
& > tbody > tr > td {
|
109
|
+
@content
|
110
|
+
}
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
//
|
115
|
+
// Vertical align
|
116
|
+
//
|
117
|
+
@mixin valign-util($class) {
|
118
|
+
#{$class} {
|
119
|
+
&,
|
120
|
+
& > tbody > tr > td {
|
121
|
+
@content
|
122
|
+
}
|
123
|
+
}
|
124
|
+
}
|
data/core/scss/_utilities.scss
CHANGED
@@ -117,9 +117,29 @@ $border-widths: (
|
|
117
117
|
) !default;
|
118
118
|
|
119
119
|
$border-radiuses: (
|
120
|
-
'
|
121
|
-
'':
|
122
|
-
'-
|
120
|
+
'': 4px,
|
121
|
+
'-none': 0px,
|
122
|
+
'-sm': 2px,
|
123
|
+
'-md': 6px,
|
124
|
+
'-lg': 8px,
|
123
125
|
'-xl': 12px,
|
124
|
-
'-
|
126
|
+
'-2xl': 16px,
|
127
|
+
'-3xl': 24px,
|
128
|
+
'-full': 9999px
|
129
|
+
) !default;
|
130
|
+
|
131
|
+
$vertical-align: (
|
132
|
+
top,
|
133
|
+
middle,
|
134
|
+
bottom,
|
135
|
+
baseline,
|
136
|
+
text-top,
|
137
|
+
text-bottom
|
138
|
+
) !default;
|
139
|
+
|
140
|
+
$text-align: (
|
141
|
+
left,
|
142
|
+
right,
|
143
|
+
center,
|
144
|
+
justify
|
125
145
|
) !default;
|
@@ -1,10 +1,16 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
+
}
|
8
14
|
}
|
9
15
|
}
|
10
16
|
|
@@ -16,19 +22,21 @@ table.row {
|
|
16
22
|
}
|
17
23
|
|
18
24
|
@each $space, $value in $spacers {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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 {
|
24
31
|
padding-right: $value;
|
25
32
|
}
|
26
33
|
}
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
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 {
|
32
40
|
padding-bottom: $value;
|
33
41
|
}
|
34
42
|
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
@each $space, $value in $spacers {
|
2
|
+
table.stack-row.gap-#{$space},
|
3
|
+
table.stack-row.gap-lg-#{$space} {
|
4
|
+
& > tbody > tr > td {
|
5
|
+
padding-right: $value;
|
6
|
+
&:last-child {
|
7
|
+
padding-right: 0;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
}
|
11
|
+
table.stack-col.gap-#{$space},
|
12
|
+
table.stack-col.gap-lg-#{$space} {
|
13
|
+
& > tbody > tr {
|
14
|
+
& > td {
|
15
|
+
padding-bottom: $value;
|
16
|
+
}
|
17
|
+
&:last-child > td {
|
18
|
+
padding-bottom: 0;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
.stack-cell {
|
25
|
+
vertical-align: top;
|
26
|
+
text-align: left;
|
27
|
+
}
|
28
|
+
|
29
|
+
@each $align in $vertical-align {
|
30
|
+
table.stack-ay-#{$align} > tbody > tr > td {
|
31
|
+
vertical-align: $align;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
@each $align in $text-align {
|
36
|
+
table.stack-ax-#{$align} > tbody > tr > td {
|
37
|
+
text-align: $align;
|
38
|
+
}
|
39
|
+
}
|
@@ -1,12 +1,12 @@
|
|
1
1
|
@each $prefix in $breakpoints {
|
2
2
|
@each $name, $property in $sizing-types {
|
3
|
-
@include sizing-util('
|
3
|
+
@include sizing-util('.max-#{$name}-#{$prefix}full') {
|
4
4
|
max-#{$property}: 100%;
|
5
5
|
-premailer-#{$property}: 100%;
|
6
6
|
#{$property}: 100%;
|
7
7
|
}
|
8
8
|
@each $size, $value in $sizing {
|
9
|
-
@include sizing-util('
|
9
|
+
@include sizing-util('.max-#{$name}-#{$prefix}#{$size}') {
|
10
10
|
max-#{$property}: $value;
|
11
11
|
-premailer-#{$property}: strip-unit($value);
|
12
12
|
#{$property}: 100%;
|
@@ -14,3 +14,22 @@
|
|
14
14
|
}
|
15
15
|
}
|
16
16
|
}
|
17
|
+
|
18
|
+
@each $prefix in $breakpoints {
|
19
|
+
@each $name, $property in $sizing-types {
|
20
|
+
@include sizing-util('.#{$name}-#{$prefix}full') {
|
21
|
+
-premailer-#{$property}: 100%;
|
22
|
+
#{$property}: 100%;
|
23
|
+
}
|
24
|
+
@include sizing-util('.#{$name}-#{$prefix}auto') {
|
25
|
+
-premailer-#{$property}: auto;
|
26
|
+
#{$property}: auto;
|
27
|
+
}
|
28
|
+
@each $size, $value in $sizing {
|
29
|
+
@include sizing-util('.#{$name}-#{$prefix}#{$size}') {
|
30
|
+
-premailer-#{$property}: strip-unit($value);
|
31
|
+
#{$property}: $value;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
@@ -36,16 +36,10 @@ h1, h2, h3, h4, h5, h6,
|
|
36
36
|
}
|
37
37
|
}
|
38
38
|
|
39
|
-
|
40
|
-
text-align
|
41
|
-
|
42
|
-
|
43
|
-
.text-right {
|
44
|
-
text-align: right !important;
|
45
|
-
}
|
46
|
-
|
47
|
-
.text-center {
|
48
|
-
text-align: center !important;
|
39
|
+
@each $align in $text-align {
|
40
|
+
@include text-align-util('.text-#{$align}') {
|
41
|
+
text-align: $align !important;
|
42
|
+
}
|
49
43
|
}
|
50
44
|
|
51
45
|
p {
|
@@ -1,18 +1,18 @@
|
|
1
|
-
<table class="
|
1
|
+
<table class="{{ classes }}" role="presentation">
|
2
2
|
<tbody>
|
3
3
|
<tr>
|
4
4
|
<td align="center">
|
5
5
|
<!--[if (gte mso 9)|(IE)]>
|
6
|
-
<table align="center">
|
6
|
+
<table align="center" role="presentation">
|
7
7
|
<tbody>
|
8
8
|
<tr>
|
9
9
|
<td width="600">
|
10
10
|
<![endif]-->
|
11
|
-
<table align="center">
|
11
|
+
<table align="center" role="presentation">
|
12
12
|
<tbody>
|
13
13
|
<tr>
|
14
14
|
<td>
|
15
|
-
|
15
|
+
{{ contents }}
|
16
16
|
</td>
|
17
17
|
</tr>
|
18
18
|
</tbody>
|