bootstrap-email 0.2.6 → 0.3.4
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 +5 -5
- 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/_hr.scss +0 -1
- 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 +20 -20
- data/lib/bootstrap-email/action_mailer.rb +11 -9
- metadata +10 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: c3ae7bb3c555b31ee3611cedd6c5ed5d4d2c79acd46c4882b29d060a1d5d31a2
|
|
4
|
+
data.tar.gz: 1c51d7adf429cc7389b588ce00fa7a30a79279c9deae0fbf1bcfe53b31915384
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 435ea12fecc4b9922c1c9c301dff507efeb789087d83fa85ca43976f28572b0914b317b0e1b627e656a2cf77b77f65fef0ce5118759fab7c948b24a3eb16a567
|
|
7
|
+
data.tar.gz: b509f82549a68c3c378d00e0b39454dc3a0288e0a0b429788541a65f8264e08d6b3edd341948b46306e3d5a5a3e12386d2ce3d6d64a5f3ca7b46ca84ed48aabe
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.
|
|
1
|
+
0.3.4
|
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 {
|
data/core/sass/_hr.scss
CHANGED
|
@@ -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
|
|
|
@@ -63,21 +63,21 @@ module BootstrapEmail
|
|
|
63
63
|
engine = defined?(SassC::Engine).nil? ? Sass::Engine : SassC::Engine
|
|
64
64
|
html_string = <<-HEREDOC
|
|
65
65
|
<style type="text/css">
|
|
66
|
-
#{engine.new(File.open(File.expand_path('../core/head.scss', __dir__)).read,
|
|
66
|
+
#{engine.new(File.open(File.expand_path('../core/head.scss', __dir__)).read, syntax: :scss, style: :compressed, cache: false, read_cache: false).render}
|
|
67
67
|
</style>
|
|
68
68
|
HEREDOC
|
|
69
69
|
html_string
|
|
70
70
|
end
|
|
71
71
|
|
|
72
|
-
def template
|
|
72
|
+
def template(file, locals_hash = {})
|
|
73
73
|
namespace = OpenStruct.new(locals_hash)
|
|
74
74
|
template_html = File.open(File.expand_path("../core/templates/#{file}.html.erb", __dir__)).read
|
|
75
75
|
ERB.new(template_html).result(namespace.instance_eval { binding })
|
|
76
76
|
end
|
|
77
77
|
|
|
78
|
-
def each_node
|
|
78
|
+
def each_node(css_lookup, &blk)
|
|
79
79
|
# sort by youngest child and traverse backwards up the tree
|
|
80
|
-
@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)
|
|
81
81
|
end
|
|
82
82
|
|
|
83
83
|
def button
|
|
@@ -110,7 +110,7 @@ module BootstrapEmail
|
|
|
110
110
|
end
|
|
111
111
|
end
|
|
112
112
|
|
|
113
|
-
def align_helper
|
|
113
|
+
def align_helper(node, klass, template)
|
|
114
114
|
if node.name != 'table' # if it is already on a table, set the proprieties on the current table
|
|
115
115
|
node['class'] = node['class'].sub(klass, '')
|
|
116
116
|
node.replace(template("align-#{template}", contents: node.to_html))
|
|
@@ -154,12 +154,12 @@ module BootstrapEmail
|
|
|
154
154
|
|
|
155
155
|
def padding
|
|
156
156
|
each_node('*[class*=p-], *[class*=pt-], *[class*=pr-], *[class*=pb-], *[class*=pl-], *[class*=px-], *[class*=py-]') do |node|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
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))
|
|
163
163
|
end
|
|
164
164
|
end
|
|
165
165
|
|
|
@@ -213,13 +213,13 @@ module BootstrapEmail
|
|
|
213
213
|
|
|
214
214
|
def preview_text
|
|
215
215
|
preview_node = @doc.at_css('preview')
|
|
216
|
-
if preview_node.
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
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
|
|
223
223
|
end
|
|
224
224
|
end
|
|
225
225
|
end
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
ActiveSupport.on_load(:action_mailer, {yield: true}) do |action_mailer|
|
|
2
|
+
action_mailer.class_eval do # To support Rails less than 6
|
|
3
|
+
# sit in the middle and compile the html
|
|
4
|
+
def bootstrap_mail(*args)
|
|
5
|
+
bootstrap = BootstrapEmail::Compiler.new(mail(*args) { |format| format.html { render layout: 'layouts/bootstrap-mailer.html.erb' } })
|
|
6
|
+
bootstrap.perform_full_compile
|
|
7
|
+
end
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
def make_bootstrap_mail(*args, &block)
|
|
10
|
+
bootstrap = BootstrapEmail::Compiler.new(mail(*args, &block))
|
|
11
|
+
bootstrap.perform_full_compile
|
|
12
|
+
end
|
|
11
13
|
end
|
|
12
14
|
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.
|
|
4
|
+
version: 0.3.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Stuart Yamartino
|
|
8
|
-
autorequire:
|
|
8
|
+
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2021-01-08 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionmailer
|
|
@@ -66,8 +66,8 @@ dependencies:
|
|
|
66
66
|
- - ">="
|
|
67
67
|
- !ruby/object:Gem::Version
|
|
68
68
|
version: '3'
|
|
69
|
-
description:
|
|
70
|
-
email:
|
|
69
|
+
description:
|
|
70
|
+
email: stu@stuyam.com
|
|
71
71
|
executables: []
|
|
72
72
|
extensions: []
|
|
73
73
|
extra_rdoc_files: []
|
|
@@ -77,6 +77,7 @@ files:
|
|
|
77
77
|
- core/head.scss
|
|
78
78
|
- core/sass/_alert.scss
|
|
79
79
|
- core/sass/_badge.scss
|
|
80
|
+
- core/sass/_border.scss
|
|
80
81
|
- core/sass/_button.scss
|
|
81
82
|
- core/sass/_card.scss
|
|
82
83
|
- core/sass/_color.scss
|
|
@@ -114,13 +115,13 @@ homepage: https://bootstrapemail.com
|
|
|
114
115
|
licenses:
|
|
115
116
|
- MIT
|
|
116
117
|
metadata: {}
|
|
117
|
-
post_install_message:
|
|
118
|
+
post_install_message:
|
|
118
119
|
rdoc_options: []
|
|
119
120
|
require_paths:
|
|
120
121
|
- lib
|
|
121
122
|
required_ruby_version: !ruby/object:Gem::Requirement
|
|
122
123
|
requirements:
|
|
123
|
-
- - "
|
|
124
|
+
- - ">="
|
|
124
125
|
- !ruby/object:Gem::Version
|
|
125
126
|
version: '2.0'
|
|
126
127
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
@@ -129,9 +130,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
129
130
|
- !ruby/object:Gem::Version
|
|
130
131
|
version: '0'
|
|
131
132
|
requirements: []
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
signing_key:
|
|
133
|
+
rubygems_version: 3.0.3
|
|
134
|
+
signing_key:
|
|
135
135
|
specification_version: 4
|
|
136
136
|
summary: Bootstrap 4 stylesheet, compiler, and inliner for responsive and consistent
|
|
137
137
|
emails with the Bootstrap syntax you know and love.
|