bootstrap-email 0.3.4 → 1.0.0.alpha2.1
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/bin/bootstrap-email +2 -0
- data/core/bootstrap-email.scss +29 -18
- data/core/bootstrap-head.scss +143 -0
- data/core/layout.html.erb +11 -0
- data/core/scss/_colors.scss +161 -0
- data/core/scss/_functions.scss +29 -0
- data/core/scss/_helper_groups.scss +21 -0
- data/core/{sass → scss}/_reboot_email.scss +7 -22
- data/core/scss/_selectors_for_utils.scss +124 -0
- data/core/scss/_utilities.scss +145 -0
- data/core/scss/_variables.scss +52 -0
- data/core/{sass → scss/components}/_alert.scss +0 -1
- data/core/{sass → scss/components}/_badge.scss +8 -15
- data/core/{sass → scss/components}/_button.scss +21 -17
- data/core/{sass → scss/components}/_card.scss +3 -2
- data/core/{sass → scss/components}/_container.scss +0 -0
- data/core/scss/components/_grid.scss +38 -0
- data/core/scss/components/_hr.scss +8 -0
- data/core/{sass → scss/components}/_image.scss +2 -1
- data/core/{sass → scss/components}/_preview.scss +0 -0
- data/core/scss/components/_stack.scss +33 -0
- data/core/{sass → scss/components}/_table.scss +0 -0
- data/core/scss/utilities/_background.scss +5 -0
- data/core/scss/utilities/_border-radius.scss +21 -0
- data/core/scss/utilities/_border.scss +13 -0
- data/core/scss/utilities/_color.scss +9 -0
- data/core/scss/utilities/_display.scss +7 -0
- data/core/scss/utilities/_sizing.scss +31 -0
- data/core/scss/utilities/_spacing.scss +18 -0
- data/core/scss/utilities/_text-decoration.scss +9 -0
- data/core/scss/utilities/_typography.scss +48 -0
- data/core/scss/utilities/_valign.scss +5 -0
- data/core/templates/body.html.erb +1 -1
- data/core/templates/container.html.erb +3 -3
- data/core/templates/table-left.html.erb +1 -1
- data/core/templates/table-to-tbody.html.erb +5 -0
- data/core/templates/table-to-tr.html.erb +7 -0
- data/core/templates/table.html.erb +1 -1
- data/core/templates/td.html.erb +3 -0
- data/core/templates/tr.html.erb +5 -0
- data/lib/bootstrap-email.rb +20 -222
- data/lib/bootstrap-email/bootstrap_email_cli.rb +92 -0
- data/lib/bootstrap-email/compiler.rb +98 -0
- data/lib/bootstrap-email/components/alert.rb +11 -0
- data/lib/bootstrap-email/components/align.rb +22 -0
- data/lib/bootstrap-email/components/badge.rb +11 -0
- data/lib/bootstrap-email/components/base.rb +54 -0
- data/lib/bootstrap-email/components/block.rb +13 -0
- data/lib/bootstrap-email/components/body.rb +10 -0
- data/lib/bootstrap-email/components/button.rb +11 -0
- data/lib/bootstrap-email/components/card.rb +14 -0
- data/lib/bootstrap-email/components/color.rb +13 -0
- data/lib/bootstrap-email/components/container.rb +14 -0
- data/lib/bootstrap-email/components/force_encoding.rb +16 -0
- data/lib/bootstrap-email/components/grid.rb +14 -0
- data/lib/bootstrap-email/components/head_style.rb +33 -0
- data/lib/bootstrap-email/components/hr.rb +12 -0
- data/lib/bootstrap-email/components/margin.rb +22 -0
- data/lib/bootstrap-email/components/padding.rb +16 -0
- data/lib/bootstrap-email/components/paragraph.rb +13 -0
- data/lib/bootstrap-email/components/preview_text.rb +18 -0
- data/lib/bootstrap-email/components/spacer.rb +11 -0
- data/lib/bootstrap-email/components/spacing.rb +17 -0
- data/lib/bootstrap-email/components/stack.rb +30 -0
- data/lib/bootstrap-email/components/table.rb +13 -0
- data/lib/bootstrap-email/components/version_comment.rb +15 -0
- data/lib/bootstrap-email/erb.rb +9 -0
- data/lib/bootstrap-email/initialize.rb +1 -0
- data/lib/bootstrap-email/rails/action_mailer.rb +15 -0
- data/lib/bootstrap-email/{engine.rb → rails/engine.rb} +0 -0
- data/lib/bootstrap-email/sass_cache.rb +67 -0
- data/lib/bootstrap-email/version.rb +3 -5
- metadata +82 -59
- data/core/head.scss +0 -269
- data/core/sass/_border.scss +0 -73
- data/core/sass/_color.scss +0 -33
- data/core/sass/_display.scss +0 -7
- data/core/sass/_functions.scss +0 -14
- data/core/sass/_grid.scss +0 -131
- data/core/sass/_hr.scss +0 -13
- data/core/sass/_spacing.scss +0 -100
- data/core/sass/_typography.scss +0 -50
- data/core/sass/_variables.scss +0 -150
- data/core/template.html.erb +0 -11
- data/core/templates/align-center.html.erb +0 -9
- data/core/templates/align-left.html.erb +0 -9
- data/core/templates/align-right.html.erb +0 -9
- data/core/templates/col.html.erb +0 -3
- data/core/templates/hr.html.erb +0 -9
- data/core/templates/row.html.erb +0 -7
- data/lib/assets/stylesheets/bootstrap-email.scss +0 -1
- data/lib/bootstrap-email/action_mailer.rb +0 -14
- data/lib/bootstrap-email/premailer_railtie.rb +0 -5
data/core/sass/_hr.scss
DELETED
data/core/sass/_spacing.scss
DELETED
@@ -1,100 +0,0 @@
|
|
1
|
-
// Width Helper
|
2
|
-
@each $size, $percentage in $widths {
|
3
|
-
.w-#{$size} {
|
4
|
-
width: $percentage;
|
5
|
-
& > tbody > tr > td {
|
6
|
-
width: $percentage;
|
7
|
-
}
|
8
|
-
}
|
9
|
-
}
|
10
|
-
|
11
|
-
@each $size, $percentage in $widths {
|
12
|
-
.w-lg-#{$size} {
|
13
|
-
width: $percentage;
|
14
|
-
& > tbody > tr > td {
|
15
|
-
width: $percentage;
|
16
|
-
}
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
// Padding Helper
|
21
|
-
@each $size, $length in $spacers {
|
22
|
-
.p-#{$size} {
|
23
|
-
& > tbody > tr > td {
|
24
|
-
padding: $length;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
.pt-#{$size},
|
28
|
-
.py-#{$size} {
|
29
|
-
& > tbody > tr > td {
|
30
|
-
padding-top: $length;
|
31
|
-
}
|
32
|
-
}
|
33
|
-
.pr-#{$size},
|
34
|
-
.px-#{$size} {
|
35
|
-
& > tbody > tr > td {
|
36
|
-
padding-right: $length;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
.pb-#{$size},
|
40
|
-
.py-#{$size} {
|
41
|
-
& > tbody > tr > td {
|
42
|
-
padding-bottom: $length;
|
43
|
-
}
|
44
|
-
}
|
45
|
-
.pl-#{$size},
|
46
|
-
.px-#{$size} {
|
47
|
-
& > tbody > tr > td {
|
48
|
-
padding-left: $length;
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
@each $size, $length in $spacers {
|
54
|
-
.p-lg-#{$size} {
|
55
|
-
& > tbody > tr > td {
|
56
|
-
padding: $length;
|
57
|
-
}
|
58
|
-
}
|
59
|
-
.pt-lg-#{$size},
|
60
|
-
.py-lg-#{$size} {
|
61
|
-
& > tbody > tr > td {
|
62
|
-
padding-top: $length;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
.pr-lg-#{$size},
|
66
|
-
.px-lg-#{$size} {
|
67
|
-
& > tbody > tr > td {
|
68
|
-
padding-right: $length;
|
69
|
-
}
|
70
|
-
}
|
71
|
-
.pb-lg-#{$size},
|
72
|
-
.py-lg-#{$size} {
|
73
|
-
& > tbody > tr > td {
|
74
|
-
padding-bottom: $length;
|
75
|
-
}
|
76
|
-
}
|
77
|
-
.pl-lg-#{$size},
|
78
|
-
.px-lg-#{$size} {
|
79
|
-
& > tbody > tr > td {
|
80
|
-
padding-left: $length;
|
81
|
-
}
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
// Spacing Helper
|
86
|
-
@each $size, $length in $spacers {
|
87
|
-
.s-#{$size} > tbody > tr > td {
|
88
|
-
font-size: $length;
|
89
|
-
line-height: $length;
|
90
|
-
height: $length;
|
91
|
-
}
|
92
|
-
}
|
93
|
-
|
94
|
-
@each $size, $length in $spacers {
|
95
|
-
.s-lg-#{$size} > tbody > tr > td {
|
96
|
-
font-size: $length;
|
97
|
-
line-height: $length;
|
98
|
-
height: $length;
|
99
|
-
}
|
100
|
-
}
|
data/core/sass/_typography.scss
DELETED
@@ -1,50 +0,0 @@
|
|
1
|
-
h1, h2, h3, h4, h5, h6,
|
2
|
-
.h1, .h2, .h3, .h4, .h5, .h6 {
|
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
|
-
text-align: left;
|
9
|
-
vertical-align: baseline;
|
10
|
-
}
|
11
|
-
|
12
|
-
@for $n from 1 through 6 {
|
13
|
-
h#{$n}, .h#{$n} {
|
14
|
-
font-size: heading-size($n);
|
15
|
-
line-height: heading-line-height($n);
|
16
|
-
}
|
17
|
-
}
|
18
|
-
|
19
|
-
.font-weight-bold {
|
20
|
-
font-weight: bold !important;
|
21
|
-
}
|
22
|
-
|
23
|
-
.font-weight-normal {
|
24
|
-
font-weight: normal !important;
|
25
|
-
}
|
26
|
-
|
27
|
-
.text-left {
|
28
|
-
text-align: left !important;
|
29
|
-
}
|
30
|
-
|
31
|
-
.text-right {
|
32
|
-
text-align: right !important;
|
33
|
-
}
|
34
|
-
|
35
|
-
.text-center {
|
36
|
-
text-align: center !important;
|
37
|
-
}
|
38
|
-
|
39
|
-
p {
|
40
|
-
margin-bottom: $paragraph-margin-bottom;
|
41
|
-
width: 100%;
|
42
|
-
& > tbody > tr > td {
|
43
|
-
margin: 0;
|
44
|
-
padding: 0 0 $font-size-base * 1.25 0;
|
45
|
-
& > p {
|
46
|
-
margin: 0;
|
47
|
-
padding: 0;
|
48
|
-
}
|
49
|
-
}
|
50
|
-
}
|
data/core/sass/_variables.scss
DELETED
@@ -1,150 +0,0 @@
|
|
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;
|
19
|
-
|
20
|
-
//
|
21
|
-
// Color system
|
22
|
-
//
|
23
|
-
|
24
|
-
$white: #ffffff !default;
|
25
|
-
$gray-100: #f8f9fa !default;
|
26
|
-
$gray-200: #e9ecef !default;
|
27
|
-
$gray-300: #dee2e6 !default;
|
28
|
-
$gray-400: #ced4da !default;
|
29
|
-
$gray-500: #adb5bd !default;
|
30
|
-
$gray-600: #868e96 !default;
|
31
|
-
$gray-700: #495057 !default;
|
32
|
-
$gray-800: #343a40 !default;
|
33
|
-
$gray-900: #212529 !default;
|
34
|
-
$black: #000000 !default;
|
35
|
-
|
36
|
-
$grays: (
|
37
|
-
100: $gray-100,
|
38
|
-
200: $gray-200,
|
39
|
-
300: $gray-300,
|
40
|
-
400: $gray-400,
|
41
|
-
500: $gray-500,
|
42
|
-
600: $gray-600,
|
43
|
-
700: $gray-700,
|
44
|
-
800: $gray-800,
|
45
|
-
900: $gray-900
|
46
|
-
) !default;
|
47
|
-
|
48
|
-
$blue: #007bff !default;
|
49
|
-
$indigo: #6610f2 !default;
|
50
|
-
$purple: #6f42c1 !default;
|
51
|
-
$pink: #e83e8c !default;
|
52
|
-
$red: #dc3545 !default;
|
53
|
-
$orange: #fd7e14 !default;
|
54
|
-
$yellow: #ffc107 !default;
|
55
|
-
$green: #28a745 !default;
|
56
|
-
$teal: #20c997 !default;
|
57
|
-
$cyan: #17a2b8 !default;
|
58
|
-
|
59
|
-
$colors: (
|
60
|
-
blue: $blue,
|
61
|
-
indigo: $indigo,
|
62
|
-
purple: $purple,
|
63
|
-
pink: $pink,
|
64
|
-
red: $red,
|
65
|
-
orange: $orange,
|
66
|
-
yellow: $yellow,
|
67
|
-
green: $green,
|
68
|
-
teal: $teal,
|
69
|
-
cyan: $cyan,
|
70
|
-
white: $white,
|
71
|
-
gray: $gray-600,
|
72
|
-
gray-dark: $gray-800
|
73
|
-
) !default;
|
74
|
-
|
75
|
-
$theme-primary: $blue !default;
|
76
|
-
$theme-secondary: $gray-600 !default;
|
77
|
-
$theme-success: $green !default;
|
78
|
-
$theme-danger: $red !default;
|
79
|
-
$theme-warning: $yellow !default;
|
80
|
-
$theme-info: $cyan !default;
|
81
|
-
$theme-light: $gray-100 !default;
|
82
|
-
$theme-dark: $gray-800 !default;
|
83
|
-
|
84
|
-
$theme-colors: (
|
85
|
-
primary: $theme-primary,
|
86
|
-
secondary: $theme-secondary,
|
87
|
-
success: $theme-success,
|
88
|
-
danger: $theme-danger,
|
89
|
-
warning: $theme-warning,
|
90
|
-
info: $theme-info,
|
91
|
-
light: $theme-light,
|
92
|
-
dark: $theme-dark
|
93
|
-
) !default;
|
94
|
-
|
95
|
-
$spacer: $font-size-base;
|
96
|
-
$spacers: (
|
97
|
-
0: 0,
|
98
|
-
1: ($spacer * .25),
|
99
|
-
2: ($spacer * .5),
|
100
|
-
3: $spacer,
|
101
|
-
4: ($spacer * 1.5),
|
102
|
-
5: ($spacer * 3)
|
103
|
-
) !default;
|
104
|
-
|
105
|
-
$widths: (
|
106
|
-
25: 25%,
|
107
|
-
50: 50%,
|
108
|
-
75: 75%,
|
109
|
-
100: 100%,
|
110
|
-
auto: auto
|
111
|
-
) !default;
|
112
|
-
|
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;
|
147
|
-
|
148
|
-
// Utility functions
|
149
|
-
@function heading-size($n) { @return map-get($headings-ratios, $n) * $font-size-base; }
|
150
|
-
@function heading-line-height($n) { @return heading-size($n) * $headings-line-height; }
|
data/core/template.html.erb
DELETED
@@ -1,11 +0,0 @@
|
|
1
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2
|
-
<html>
|
3
|
-
<head>
|
4
|
-
<meta charset="utf-8">
|
5
|
-
<link rel="stylesheet" href="../../css/email.css">
|
6
|
-
<!-- inject-style src="./css/head.css" -->
|
7
|
-
</head>
|
8
|
-
<body>
|
9
|
-
<%= contents %>
|
10
|
-
</body>
|
11
|
-
</html>
|
data/core/templates/col.html.erb
DELETED
data/core/templates/hr.html.erb
DELETED
data/core/templates/row.html.erb
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
@import '../../../core/bootstrap-email'
|
@@ -1,14 +0,0 @@
|
|
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
|
8
|
-
|
9
|
-
def make_bootstrap_mail(*args, &block)
|
10
|
-
bootstrap = BootstrapEmail::Compiler.new(mail(*args, &block))
|
11
|
-
bootstrap.perform_full_compile
|
12
|
-
end
|
13
|
-
end
|
14
|
-
end
|