bootstrap-email 0.2.4 → 0.3.2
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-email.scss +1 -0
- data/core/head.scss +33 -0
- data/core/sass/_border.scss +73 -0
- data/core/sass/_button.scss +17 -17
- data/core/sass/_color.scss +10 -0
- data/core/sass/_reboot_email.scss +6 -5
- data/core/sass/_table.scss +19 -19
- data/core/sass/_typography.scss +15 -6
- data/core/sass/_variables.scss +52 -9
- data/lib/bootstrap-email.rb +21 -20
- data/lib/bootstrap-email/action_mailer.rb +2 -2
- metadata +5 -17
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 62c6c5c793d4efc84cce78d500c28962ed044dcb2ee4cfa340ac366711d78275
|
|
4
|
+
data.tar.gz: 591fe6126e0b9029ba96fa8d6c00ce99dae098a08a590d70f8aed75893dde83d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '048c1bb0ed2d42b612e4fa052e6dc8f0872cb474aaa06664b6b3030f07f226d572213de43b459575ffca84d5ec75936c0341fbaa59a6fa47e9b490a47ff6c750'
|
|
7
|
+
data.tar.gz: 14ab4f2fe71b5966e39dedc63283851b9d9650f7a2bbebe3cf2ac30e69e2ca59465101c4536935f1e77e08e285df70d1c94e9338bb1404dbce4545e40a3113c3
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.2
|
|
1
|
+
0.3.2
|
data/core/bootstrap-email.scss
CHANGED
data/core/head.scss
CHANGED
|
@@ -36,6 +36,39 @@ a {
|
|
|
36
36
|
text-decoration: none;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
/*
|
|
40
|
+
Gmail inserts the following 2 rules above this file in <head> and this overrides them
|
|
41
|
+
|
|
42
|
+
body,
|
|
43
|
+
td,
|
|
44
|
+
input,
|
|
45
|
+
textarea,
|
|
46
|
+
select {
|
|
47
|
+
margin: 0;
|
|
48
|
+
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
input,
|
|
52
|
+
textarea,
|
|
53
|
+
select {
|
|
54
|
+
font-size: 100%
|
|
55
|
+
}
|
|
56
|
+
*/
|
|
57
|
+
body,
|
|
58
|
+
td,
|
|
59
|
+
input,
|
|
60
|
+
textarea,
|
|
61
|
+
select {
|
|
62
|
+
margin: unset;
|
|
63
|
+
font-family: unset;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
input,
|
|
67
|
+
textarea,
|
|
68
|
+
select {
|
|
69
|
+
font-size: unset;
|
|
70
|
+
}
|
|
71
|
+
|
|
39
72
|
@media screen and (max-width: 600px) {
|
|
40
73
|
// Grid
|
|
41
74
|
table.row {
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Border
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
.border { border: $border-width solid $border-color !important; }
|
|
6
|
+
.border-top { border-top: $border-width solid $border-color !important; }
|
|
7
|
+
.border-right { border-right: $border-width solid $border-color !important; }
|
|
8
|
+
.border-bottom { border-bottom: $border-width solid $border-color !important; }
|
|
9
|
+
.border-left { border-left: $border-width solid $border-color !important; }
|
|
10
|
+
|
|
11
|
+
.border-0 { border: 0 !important; }
|
|
12
|
+
.border-top-0 { border-top: 0 !important; }
|
|
13
|
+
.border-right-0 { border-right: 0 !important; }
|
|
14
|
+
.border-bottom-0 { border-bottom: 0 !important; }
|
|
15
|
+
.border-left-0 { border-left: 0 !important; }
|
|
16
|
+
|
|
17
|
+
@each $color, $value in $theme-colors {
|
|
18
|
+
.border-#{$color} {
|
|
19
|
+
border-color: $value !important;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.border-white {
|
|
24
|
+
border-color: $white !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
//
|
|
28
|
+
// Border-radius
|
|
29
|
+
//
|
|
30
|
+
|
|
31
|
+
.rounded-sm {
|
|
32
|
+
border-radius: $border-radius-sm !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.rounded {
|
|
36
|
+
border-radius: $border-radius !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.rounded-top {
|
|
40
|
+
border-top-left-radius: $border-radius !important;
|
|
41
|
+
border-top-right-radius: $border-radius !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.rounded-right {
|
|
45
|
+
border-top-right-radius: $border-radius !important;
|
|
46
|
+
border-bottom-right-radius: $border-radius !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.rounded-bottom {
|
|
50
|
+
border-bottom-right-radius: $border-radius !important;
|
|
51
|
+
border-bottom-left-radius: $border-radius !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.rounded-left {
|
|
55
|
+
border-top-left-radius: $border-radius !important;
|
|
56
|
+
border-bottom-left-radius: $border-radius !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.rounded-lg {
|
|
60
|
+
border-radius: $border-radius-lg !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.rounded-circle {
|
|
64
|
+
border-radius: 50% !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.rounded-pill {
|
|
68
|
+
border-radius: $rounded-pill !important;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.rounded-0 {
|
|
72
|
+
border-radius: 0 !important;
|
|
73
|
+
}
|
data/core/sass/_button.scss
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
.btn {
|
|
2
|
-
border-radius:
|
|
2
|
+
border-radius: $btn-border-radius;
|
|
3
3
|
border-collapse: separate !important;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.btn td {
|
|
7
|
-
border-radius:
|
|
7
|
+
border-radius: $btn-border-radius;
|
|
8
8
|
text-align: center;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.btn td a {
|
|
12
|
-
font-size:
|
|
13
|
-
font-family:
|
|
12
|
+
font-size: $btn-font-size;
|
|
13
|
+
font-family: $btn-font-family;
|
|
14
14
|
text-decoration: none;
|
|
15
|
-
border-radius:
|
|
16
|
-
padding:
|
|
17
|
-
line-height:
|
|
18
|
-
border:
|
|
15
|
+
border-radius: $btn-border-radius;
|
|
16
|
+
padding: $btn-padding-y $btn-padding-x;
|
|
17
|
+
line-height: $btn-line-height;
|
|
18
|
+
border: $btn-border-width solid transparent;
|
|
19
19
|
display: inline-block;
|
|
20
|
-
font-weight:
|
|
20
|
+
font-weight: $btn-font-weight;
|
|
21
21
|
white-space: nowrap;
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -45,15 +45,15 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.btn-sm td a {
|
|
48
|
-
font-size:
|
|
49
|
-
padding:
|
|
50
|
-
line-height:
|
|
51
|
-
border-radius:
|
|
48
|
+
font-size: $btn-font-size-sm;
|
|
49
|
+
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
|
50
|
+
line-height: $btn-line-height-sm;
|
|
51
|
+
border-radius: $btn-border-radius-sm;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.btn-lg td a {
|
|
55
|
-
font-size:
|
|
56
|
-
padding:
|
|
57
|
-
line-height:
|
|
58
|
-
border-radius:
|
|
55
|
+
font-size: $btn-font-size-lg;
|
|
56
|
+
padding: $btn-padding-y-lg $btn-padding-x-lg;
|
|
57
|
+
line-height: $btn-line-height-lg;
|
|
58
|
+
border-radius: $btn-border-radius-lg;
|
|
59
59
|
}
|
data/core/sass/_color.scss
CHANGED
|
@@ -5,6 +5,16 @@
|
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
.bg-white,
|
|
9
|
+
.bg-white > tbody > tr > td {
|
|
10
|
+
background-color: $white !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.bg-transparent,
|
|
14
|
+
.bg-transparent > tbody > tr > td {
|
|
15
|
+
background-color: transparent !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
8
18
|
@each $color, $value in $theme-colors {
|
|
9
19
|
.text-#{$color},
|
|
10
20
|
.text-#{$color} > tbody > tr > td {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* Based on https://templates.mailchimp.com/development/css/reset-styles/ by Mailchimp */
|
|
2
2
|
body, .body {
|
|
3
3
|
margin: 0;
|
|
4
|
-
Margin: 0;
|
|
4
|
+
Margin: 0; // For compatibility with Outlook https://www.emailonacid.com/blog/article/email-development/outlook-com-does-support-margins/
|
|
5
5
|
padding: 0;
|
|
6
6
|
border: 0;
|
|
7
7
|
outline: 0;
|
|
@@ -10,13 +10,15 @@ body, .body {
|
|
|
10
10
|
height: 100%;
|
|
11
11
|
-webkit-text-size-adjust: 100%;
|
|
12
12
|
-ms-text-size-adjust: 100%;
|
|
13
|
-
font-family: $font-family-
|
|
13
|
+
font-family: $font-family-base;
|
|
14
14
|
line-height: $line-height-base * $font-size-base;
|
|
15
|
-
font-weight:
|
|
15
|
+
font-weight: $font-weight-base;
|
|
16
16
|
font-size: $font-size-base;
|
|
17
17
|
-moz-box-sizing: border-box;
|
|
18
18
|
-webkit-box-sizing: border-box;
|
|
19
19
|
box-sizing: border-box;
|
|
20
|
+
background-color: $body-bg;
|
|
21
|
+
color: $body-color;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
img {
|
|
@@ -33,7 +35,7 @@ a img {
|
|
|
33
35
|
|
|
34
36
|
// don't apply to spacers
|
|
35
37
|
table:not([class^=s-]) {
|
|
36
|
-
font-family: $font-family-
|
|
38
|
+
font-family: $font-family-base;
|
|
37
39
|
mso-table-lspace: 0pt;
|
|
38
40
|
mso-table-rspace: 0pt;
|
|
39
41
|
}
|
|
@@ -60,4 +62,3 @@ p {
|
|
|
60
62
|
font-size: $font-size-base;
|
|
61
63
|
margin: 0;
|
|
62
64
|
}
|
|
63
|
-
|
data/core/sass/_table.scss
CHANGED
|
@@ -5,27 +5,24 @@
|
|
|
5
5
|
.table {
|
|
6
6
|
width: 100%;
|
|
7
7
|
max-width: 100%;
|
|
8
|
-
|
|
9
|
-
background-color: $white; // Reset for nesting within parents with `background-color`.
|
|
8
|
+
background-color: $table-background-color; // Reset for nesting within parents with `background-color`.
|
|
10
9
|
|
|
11
10
|
& > thead > tr > th {
|
|
12
11
|
text-align: left;
|
|
12
|
+
vertical-align: bottom;
|
|
13
|
+
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
& > thead > tr > th,
|
|
16
|
-
& > tbody > tr > td
|
|
17
|
+
& > tbody > tr > td,
|
|
18
|
+
& > tfoot > tr > td {
|
|
17
19
|
padding: 0.75 * $font-size-base;
|
|
18
20
|
vertical-align: top;
|
|
19
21
|
border-top: $table-border-width solid $table-border-color;
|
|
20
22
|
}
|
|
21
|
-
|
|
22
|
-
& > thead > th {
|
|
23
|
-
vertical-align: bottom;
|
|
24
|
-
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
|
25
|
-
}
|
|
26
23
|
}
|
|
27
24
|
|
|
28
|
-
.table-unstyled{
|
|
25
|
+
.table-unstyled {
|
|
29
26
|
width: 100%;
|
|
30
27
|
max-width: 100%;
|
|
31
28
|
background-color: transparent;
|
|
@@ -43,7 +40,8 @@
|
|
|
43
40
|
|
|
44
41
|
.table-sm {
|
|
45
42
|
& > thead > tr > th,
|
|
46
|
-
& > tbody > tr > td
|
|
43
|
+
& > tbody > tr > td,
|
|
44
|
+
& > tfoot > tr > td {
|
|
47
45
|
padding: 0.3 * $font-size-base;;
|
|
48
46
|
}
|
|
49
47
|
}
|
|
@@ -57,7 +55,8 @@
|
|
|
57
55
|
border: $table-border-width solid $table-border-color;
|
|
58
56
|
|
|
59
57
|
& > thead > tr > th,
|
|
60
|
-
& > tbody > tr > td
|
|
58
|
+
& > tbody > tr > td,
|
|
59
|
+
& > tfoot > tr > td {
|
|
61
60
|
border: $table-border-width solid $table-border-color;
|
|
62
61
|
}
|
|
63
62
|
|
|
@@ -76,7 +75,7 @@
|
|
|
76
75
|
|
|
77
76
|
.table-striped {
|
|
78
77
|
& > tbody > tr:nth-of-type(odd) {
|
|
79
|
-
background-color:
|
|
78
|
+
background-color: $table-accent-bg;
|
|
80
79
|
}
|
|
81
80
|
}
|
|
82
81
|
|
|
@@ -98,30 +97,31 @@
|
|
|
98
97
|
|
|
99
98
|
|
|
100
99
|
|
|
101
|
-
//
|
|
100
|
+
// Dark styles
|
|
102
101
|
//
|
|
103
102
|
// Same table markup, but inverted color scheme: dark background and light text.
|
|
104
103
|
|
|
105
|
-
.thead-
|
|
106
|
-
|
|
104
|
+
.thead-dark {
|
|
105
|
+
th {
|
|
107
106
|
color: $white;
|
|
108
107
|
background-color: $gray-900;
|
|
109
108
|
}
|
|
110
109
|
}
|
|
111
110
|
|
|
112
|
-
.thead-
|
|
113
|
-
|
|
111
|
+
.thead-light {
|
|
112
|
+
th {
|
|
114
113
|
color: $gray-700;
|
|
115
114
|
background-color: $gray-200;
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
|
|
119
|
-
.table-
|
|
118
|
+
.table-dark {
|
|
120
119
|
color: $white;
|
|
121
120
|
background-color: $gray-900;
|
|
122
121
|
|
|
123
122
|
& > thead > tr > th,
|
|
124
|
-
& > tbody > tr > td
|
|
123
|
+
& > tbody > tr > td,
|
|
124
|
+
& > tfoot > tr > td {
|
|
125
125
|
border-color: #32383e;
|
|
126
126
|
}
|
|
127
127
|
|
data/core/sass/_typography.scss
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
h1, h2, h3, h4, h5, h6,
|
|
2
2
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
3
|
-
margin-top:
|
|
4
|
-
margin-bottom:
|
|
5
|
-
|
|
6
|
-
font-weight:
|
|
7
|
-
color:
|
|
3
|
+
margin-top: $headings-margin-top;
|
|
4
|
+
margin-bottom: $headings-margin-bottom;
|
|
5
|
+
font-family: $headings-font-family;
|
|
6
|
+
font-weight: $headings-font-weight;
|
|
7
|
+
color: $headings-color;
|
|
8
8
|
text-align: left;
|
|
9
9
|
vertical-align: baseline;
|
|
10
10
|
}
|
|
@@ -16,6 +16,14 @@ h1, h2, h3, h4, h5, h6,
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
.font-weight-bold {
|
|
20
|
+
font-weight: bold !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.font-weight-normal {
|
|
24
|
+
font-weight: normal !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
19
27
|
.text-left {
|
|
20
28
|
text-align: left !important;
|
|
21
29
|
}
|
|
@@ -28,7 +36,8 @@ h1, h2, h3, h4, h5, h6,
|
|
|
28
36
|
text-align: center !important;
|
|
29
37
|
}
|
|
30
38
|
|
|
31
|
-
|
|
39
|
+
p {
|
|
40
|
+
margin-bottom: $paragraph-margin-bottom;
|
|
32
41
|
width: 100%;
|
|
33
42
|
& > tbody > tr > td {
|
|
34
43
|
margin: 0;
|
data/core/sass/_variables.scss
CHANGED
|
@@ -1,7 +1,21 @@
|
|
|
1
|
-
$font-size-base: 16px !default;
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
1
|
+
$font-size-base: 16px !default;
|
|
2
|
+
$font-weight-base: normal !default;
|
|
3
|
+
$font-family-sans-serif: Helvetica, Arial, sans-serif !default;
|
|
4
|
+
$font-family-base: $font-family-sans-serif !default;
|
|
5
|
+
$border-radius: $font-size-base * 0.25 !default;
|
|
6
|
+
$border-radius-lg: $font-size-base * 0.3 !default;
|
|
7
|
+
$border-radius-sm: $font-size-base * 0.2 !default;
|
|
8
|
+
$border-width: 1px !default;
|
|
9
|
+
$line-height-base: 1.5 !default;
|
|
10
|
+
$headings-line-height: 1.2 !default;
|
|
11
|
+
$headings-ratios: (1: 2.25, 2: 2, 3: 1.75, 4: 1.5, 5: 1.25, 6: 1) !default;
|
|
12
|
+
$headings-margin-top: 0 !default;
|
|
13
|
+
$headings-margin-bottom: 0 !default;
|
|
14
|
+
$headings-font-family: null !default;
|
|
15
|
+
$headings-font-weight: 500 !default;
|
|
16
|
+
$headings-color: null !default;
|
|
17
|
+
$paragraph-margin-bottom: 0 !default;
|
|
18
|
+
$rounded-pill: 50 * $font-size-base !default;
|
|
5
19
|
|
|
6
20
|
//
|
|
7
21
|
// Color system
|
|
@@ -88,8 +102,6 @@ $spacers: (
|
|
|
88
102
|
5: ($spacer * 3)
|
|
89
103
|
) !default;
|
|
90
104
|
|
|
91
|
-
$font-family-sans-serif: Helvetica, Arial, sans-serif !default;
|
|
92
|
-
|
|
93
105
|
$widths: (
|
|
94
106
|
25: 25%,
|
|
95
107
|
50: 50%,
|
|
@@ -98,10 +110,41 @@ $widths: (
|
|
|
98
110
|
auto: auto
|
|
99
111
|
) !default;
|
|
100
112
|
|
|
101
|
-
$
|
|
102
|
-
|
|
113
|
+
$border-color: $gray-300 !default;
|
|
114
|
+
|
|
115
|
+
$table-accent-bg: #f2f2f2 !default;
|
|
116
|
+
$table-background-color: null !default;
|
|
117
|
+
$table-border-color: $border-color !default;
|
|
118
|
+
$table-border-width: $border-width !default;
|
|
119
|
+
|
|
120
|
+
$body-color: $black !default;
|
|
121
|
+
$body-bg: $white !default;
|
|
122
|
+
|
|
123
|
+
$btn-padding-y: 8px !default;
|
|
124
|
+
$btn-padding-x: 12px !default;
|
|
125
|
+
$btn-font-family: $font-family-base !default;
|
|
126
|
+
$btn-font-size: $font-size-base !default;
|
|
127
|
+
$btn-line-height: 1.25 * $btn-font-size !default;
|
|
128
|
+
|
|
129
|
+
$btn-padding-y-sm: 0.25 * $btn-font-size !default;
|
|
130
|
+
$btn-padding-x-sm: 0.5 * $btn-font-size !default;
|
|
131
|
+
$btn-font-size-sm: 0.875 * $btn-font-size !default;
|
|
132
|
+
$btn-line-height-sm: $btn-line-height * 0.875 !default;
|
|
133
|
+
|
|
134
|
+
$btn-padding-y-lg: 0.5 * $btn-font-size !default;
|
|
135
|
+
$btn-padding-x-lg: $btn-font-size !default;
|
|
136
|
+
$btn-font-size-lg: 1.25 * $btn-font-size !default;
|
|
137
|
+
$btn-line-height-lg: $btn-line-height * 1.25 !default;
|
|
138
|
+
|
|
139
|
+
$btn-border-width: $border-width !default;
|
|
140
|
+
|
|
141
|
+
$btn-font-weight: $font-weight-base !default;
|
|
142
|
+
|
|
143
|
+
// Allows for customizing button radius independently from global border radius
|
|
144
|
+
$btn-border-radius: $border-radius !default;
|
|
145
|
+
$btn-border-radius-lg: $border-radius-lg !default;
|
|
146
|
+
$btn-border-radius-sm: $border-radius-sm !default;
|
|
103
147
|
|
|
104
148
|
// Utility functions
|
|
105
149
|
@function heading-size($n) { @return map-get($headings-ratios, $n) * $font-size-base; }
|
|
106
150
|
@function heading-line-height($n) { @return heading-size($n) * $headings-line-height; }
|
|
107
|
-
|
data/lib/bootstrap-email.rb
CHANGED
|
@@ -8,13 +8,13 @@ require 'rails'
|
|
|
8
8
|
|
|
9
9
|
module BootstrapEmail
|
|
10
10
|
class Compiler
|
|
11
|
-
def initialize
|
|
11
|
+
def initialize(mail)
|
|
12
12
|
@mail = mail
|
|
13
13
|
@source = mail.html_part || mail
|
|
14
14
|
update_doc(@source.body.raw_source)
|
|
15
15
|
end
|
|
16
16
|
|
|
17
|
-
def update_doc
|
|
17
|
+
def update_doc(source)
|
|
18
18
|
@doc = Nokogiri::HTML(source)
|
|
19
19
|
end
|
|
20
20
|
|
|
@@ -60,23 +60,24 @@ module BootstrapEmail
|
|
|
60
60
|
private
|
|
61
61
|
|
|
62
62
|
def bootstrap_email_head
|
|
63
|
+
engine = defined?(SassC::Engine).nil? ? Sass::Engine : SassC::Engine
|
|
63
64
|
html_string = <<-HEREDOC
|
|
64
65
|
<style type="text/css">
|
|
65
|
-
#{
|
|
66
|
+
#{engine.new(File.open(File.expand_path('../core/head.scss', __dir__)).read, syntax: :scss, style: :compressed, cache: false, read_cache: false).render}
|
|
66
67
|
</style>
|
|
67
68
|
HEREDOC
|
|
68
69
|
html_string
|
|
69
70
|
end
|
|
70
71
|
|
|
71
|
-
def template
|
|
72
|
+
def template(file, locals_hash = {})
|
|
72
73
|
namespace = OpenStruct.new(locals_hash)
|
|
73
74
|
template_html = File.open(File.expand_path("../core/templates/#{file}.html.erb", __dir__)).read
|
|
74
75
|
ERB.new(template_html).result(namespace.instance_eval { binding })
|
|
75
76
|
end
|
|
76
77
|
|
|
77
|
-
def each_node
|
|
78
|
+
def each_node(css_lookup, &blk)
|
|
78
79
|
# sort by youngest child and traverse backwards up the tree
|
|
79
|
-
@doc.css(css_lookup).sort_by{ |n| n.ancestors.size }.reverse!.each(&blk)
|
|
80
|
+
@doc.css(css_lookup).sort_by { |n| n.ancestors.size }.reverse!.each(&blk)
|
|
80
81
|
end
|
|
81
82
|
|
|
82
83
|
def button
|
|
@@ -109,7 +110,7 @@ module BootstrapEmail
|
|
|
109
110
|
end
|
|
110
111
|
end
|
|
111
112
|
|
|
112
|
-
def align_helper
|
|
113
|
+
def align_helper(node, klass, template)
|
|
113
114
|
if node.name != 'table' # if it is already on a table, set the proprieties on the current table
|
|
114
115
|
node['class'] = node['class'].sub(klass, '')
|
|
115
116
|
node.replace(template("align-#{template}", contents: node.to_html))
|
|
@@ -153,12 +154,12 @@ module BootstrapEmail
|
|
|
153
154
|
|
|
154
155
|
def padding
|
|
155
156
|
each_node('*[class*=p-], *[class*=pt-], *[class*=pr-], *[class*=pb-], *[class*=pl-], *[class*=px-], *[class*=py-]') do |node|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
157
|
+
next unless node.name != 'table' # if it is already on a table, set the padding on the table, else wrap the content in a table
|
|
158
|
+
|
|
159
|
+
padding_regex = /(p[trblxy]?-\d)/
|
|
160
|
+
classes = node['class'].scan(padding_regex).join(' ')
|
|
161
|
+
node['class'] = node['class'].gsub(padding_regex, '')
|
|
162
|
+
node.replace(template('table', classes: classes, contents: node.to_html))
|
|
162
163
|
end
|
|
163
164
|
end
|
|
164
165
|
|
|
@@ -212,13 +213,13 @@ module BootstrapEmail
|
|
|
212
213
|
|
|
213
214
|
def preview_text
|
|
214
215
|
preview_node = @doc.at_css('preview')
|
|
215
|
-
if preview_node.
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
216
|
+
return if preview_node.blank?
|
|
217
|
+
|
|
218
|
+
# apply spacing after the text max of 100 characters so it doesn't show body text
|
|
219
|
+
preview_node.content += ' ' * [(100 - preview_node.content.length.to_i), 0].max
|
|
220
|
+
node = template('div', classes: 'preview', contents: preview_node.content)
|
|
221
|
+
preview_node.remove
|
|
222
|
+
node
|
|
222
223
|
end
|
|
223
224
|
end
|
|
224
225
|
end
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
class ActionMailer::Base
|
|
2
2
|
# sit in the middle and compile the html
|
|
3
|
-
def bootstrap_mail
|
|
3
|
+
def bootstrap_mail(*args)
|
|
4
4
|
bootstrap = BootstrapEmail::Compiler.new(mail(*args) { |format| format.html { render layout: 'layouts/bootstrap-mailer.html.erb' } })
|
|
5
5
|
bootstrap.perform_full_compile
|
|
6
6
|
end
|
|
7
7
|
|
|
8
|
-
def make_bootstrap_mail
|
|
8
|
+
def make_bootstrap_mail(*args, &block)
|
|
9
9
|
bootstrap = BootstrapEmail::Compiler.new(mail(*args, &block))
|
|
10
10
|
bootstrap.perform_full_compile
|
|
11
11
|
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: 0.2
|
|
4
|
+
version: 0.3.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Stuart Yamartino
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2020-07-15 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionmailer
|
|
@@ -17,9 +17,6 @@ dependencies:
|
|
|
17
17
|
- - ">="
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
19
|
version: '3'
|
|
20
|
-
- - "<"
|
|
21
|
-
- !ruby/object:Gem::Version
|
|
22
|
-
version: '6'
|
|
23
20
|
type: :runtime
|
|
24
21
|
prerelease: false
|
|
25
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
@@ -27,9 +24,6 @@ dependencies:
|
|
|
27
24
|
- - ">="
|
|
28
25
|
- !ruby/object:Gem::Version
|
|
29
26
|
version: '3'
|
|
30
|
-
- - "<"
|
|
31
|
-
- !ruby/object:Gem::Version
|
|
32
|
-
version: '6'
|
|
33
27
|
- !ruby/object:Gem::Dependency
|
|
34
28
|
name: nokogiri
|
|
35
29
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -65,9 +59,6 @@ dependencies:
|
|
|
65
59
|
- - ">="
|
|
66
60
|
- !ruby/object:Gem::Version
|
|
67
61
|
version: '3'
|
|
68
|
-
- - "<"
|
|
69
|
-
- !ruby/object:Gem::Version
|
|
70
|
-
version: '6'
|
|
71
62
|
type: :runtime
|
|
72
63
|
prerelease: false
|
|
73
64
|
version_requirements: !ruby/object:Gem::Requirement
|
|
@@ -75,11 +66,8 @@ dependencies:
|
|
|
75
66
|
- - ">="
|
|
76
67
|
- !ruby/object:Gem::Version
|
|
77
68
|
version: '3'
|
|
78
|
-
- - "<"
|
|
79
|
-
- !ruby/object:Gem::Version
|
|
80
|
-
version: '6'
|
|
81
69
|
description:
|
|
82
|
-
email:
|
|
70
|
+
email: stu@stuyam.com
|
|
83
71
|
executables: []
|
|
84
72
|
extensions: []
|
|
85
73
|
extra_rdoc_files: []
|
|
@@ -89,6 +77,7 @@ files:
|
|
|
89
77
|
- core/head.scss
|
|
90
78
|
- core/sass/_alert.scss
|
|
91
79
|
- core/sass/_badge.scss
|
|
80
|
+
- core/sass/_border.scss
|
|
92
81
|
- core/sass/_button.scss
|
|
93
82
|
- core/sass/_card.scss
|
|
94
83
|
- core/sass/_color.scss
|
|
@@ -141,8 +130,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
141
130
|
- !ruby/object:Gem::Version
|
|
142
131
|
version: '0'
|
|
143
132
|
requirements: []
|
|
144
|
-
|
|
145
|
-
rubygems_version: 2.7.6
|
|
133
|
+
rubygems_version: 3.0.3
|
|
146
134
|
signing_key:
|
|
147
135
|
specification_version: 4
|
|
148
136
|
summary: Bootstrap 4 stylesheet, compiler, and inliner for responsive and consistent
|