bootstrap-email 0.2.4 → 0.3.2
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 +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
|