bootstrap-email 0.3.2 → 1.0.0.alpha1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. checksums.yaml +4 -4
  2. data/VERSION +1 -1
  3. data/bin/bootstrap-email +2 -0
  4. data/core/bootstrap-email.scss +27 -18
  5. data/core/bootstrap-head.scss +143 -0
  6. data/core/layout.html.erb +11 -0
  7. data/core/scss/_colors.scss +161 -0
  8. data/core/scss/_functions.scss +29 -0
  9. data/core/scss/_helper_groups.scss +21 -0
  10. data/core/{sass → scss}/_reboot_email.scss +7 -22
  11. data/core/scss/_selectors_for_utils.scss +100 -0
  12. data/core/scss/_utilities.scss +125 -0
  13. data/core/scss/_variables.scss +52 -0
  14. data/core/{sass → scss/components}/_alert.scss +0 -1
  15. data/core/{sass → scss/components}/_badge.scss +8 -15
  16. data/core/{sass → scss/components}/_button.scss +21 -17
  17. data/core/{sass → scss/components}/_card.scss +3 -2
  18. data/core/{sass → scss/components}/_container.scss +0 -0
  19. data/core/scss/components/_grid.scss +35 -0
  20. data/core/scss/components/_hr.scss +8 -0
  21. data/core/{sass → scss/components}/_image.scss +2 -1
  22. data/core/{sass → scss/components}/_preview.scss +0 -0
  23. data/core/{sass → scss/components}/_table.scss +0 -0
  24. data/core/scss/utilities/_background.scss +5 -0
  25. data/core/scss/utilities/_border-radius.scss +21 -0
  26. data/core/scss/utilities/_border.scss +13 -0
  27. data/core/scss/utilities/_color.scss +9 -0
  28. data/core/scss/utilities/_display.scss +7 -0
  29. data/core/scss/utilities/_sizing.scss +16 -0
  30. data/core/scss/utilities/_spacing.scss +18 -0
  31. data/core/scss/utilities/_text-decoration.scss +9 -0
  32. data/core/scss/utilities/_typography.scss +54 -0
  33. data/core/templates/col.html.erb +2 -2
  34. data/core/templates/row.html.erb +2 -2
  35. data/lib/bootstrap-email/bootstrap_email_cli.rb +92 -0
  36. data/lib/bootstrap-email/compiler.rb +118 -0
  37. data/lib/bootstrap-email/components/alert.rb +11 -0
  38. data/lib/bootstrap-email/components/align.rb +21 -0
  39. data/lib/bootstrap-email/components/badge.rb +11 -0
  40. data/lib/bootstrap-email/components/base.rb +26 -0
  41. data/lib/bootstrap-email/components/body.rb +22 -0
  42. data/lib/bootstrap-email/components/button.rb +11 -0
  43. data/lib/bootstrap-email/components/card.rb +14 -0
  44. data/lib/bootstrap-email/components/color.rb +13 -0
  45. data/lib/bootstrap-email/components/container.rb +14 -0
  46. data/lib/bootstrap-email/components/grid.rb +14 -0
  47. data/lib/bootstrap-email/components/hr.rb +12 -0
  48. data/lib/bootstrap-email/components/margin.rb +22 -0
  49. data/lib/bootstrap-email/components/padding.rb +16 -0
  50. data/lib/bootstrap-email/components/paragraph.rb +24 -0
  51. data/lib/bootstrap-email/components/spacer.rb +11 -0
  52. data/lib/bootstrap-email/components/spacing.rb +18 -0
  53. data/lib/bootstrap-email/components/table.rb +13 -0
  54. data/lib/bootstrap-email/initialize.rb +1 -0
  55. data/lib/bootstrap-email/rails/action_mailer.rb +10 -0
  56. data/lib/bootstrap-email/{engine.rb → rails/engine.rb} +0 -0
  57. data/lib/bootstrap-email/sass_cache.rb +47 -0
  58. data/lib/bootstrap-email/version.rb +3 -5
  59. data/lib/bootstrap_email.rb +27 -0
  60. metadata +75 -63
  61. data/core/head.scss +0 -269
  62. data/core/sass/_border.scss +0 -73
  63. data/core/sass/_color.scss +0 -33
  64. data/core/sass/_display.scss +0 -7
  65. data/core/sass/_functions.scss +0 -14
  66. data/core/sass/_grid.scss +0 -131
  67. data/core/sass/_hr.scss +0 -14
  68. data/core/sass/_spacing.scss +0 -100
  69. data/core/sass/_typography.scss +0 -50
  70. data/core/sass/_variables.scss +0 -150
  71. data/core/template.html.erb +0 -11
  72. data/core/templates/align-center.html.erb +0 -9
  73. data/core/templates/align-left.html.erb +0 -9
  74. data/core/templates/align-right.html.erb +0 -9
  75. data/core/templates/hr.html.erb +0 -9
  76. data/lib/assets/stylesheets/bootstrap-email.scss +0 -1
  77. data/lib/bootstrap-email.rb +0 -230
  78. data/lib/bootstrap-email/action_mailer.rb +0 -12
  79. data/lib/bootstrap-email/premailer_railtie.rb +0 -5
data/core/head.scss DELETED
@@ -1,269 +0,0 @@
1
- // This file will be placed in the head of the document and will not be inlined
2
- $spacer: 16px;
3
- $spacers: (
4
- 0: 0,
5
- 1: ($spacer * .25),
6
- 2: ($spacer * .5),
7
- 3: $spacer,
8
- 4: ($spacer * 1.5),
9
- 5: ($spacer * 3)
10
- ) !default;
11
-
12
- $widths: (
13
- 25: 25%,
14
- 50: 50%,
15
- 75: 75%,
16
- 100: 100%,
17
- auto: auto
18
- ) !default;
19
-
20
- // Forces Outlook.com to display emails at full width
21
- .ExternalClass {
22
- width: 100%;
23
- }
24
-
25
- // Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
26
- .ExternalClass,
27
- .ExternalClass p,
28
- .ExternalClass span,
29
- .ExternalClass font,
30
- .ExternalClass td,
31
- .ExternalClass div {
32
- line-height: 150%;
33
- }
34
-
35
- a {
36
- text-decoration: none;
37
- }
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
-
72
- @media screen and (max-width: 600px) {
73
- // Grid
74
- table.row {
75
- th.col-lg-1,
76
- th.col-lg-2,
77
- th.col-lg-3,
78
- th.col-lg-4,
79
- th.col-lg-5,
80
- th.col-lg-6,
81
- th.col-lg-7,
82
- th.col-lg-8,
83
- th.col-lg-9,
84
- th.col-lg-10,
85
- th.col-lg-11,
86
- th.col-lg-12{
87
- display: block;
88
- width: 100% !important;
89
- }
90
- }
91
-
92
- // Display
93
- .d-mobile {
94
- display: block !important;
95
- }
96
- .d-desktop {
97
- display: none !important;
98
- }
99
-
100
- // Width
101
- @each $size, $percentage in $widths {
102
- .w-lg-#{$size} {
103
- width: auto !important;
104
- & > tbody > tr > td {
105
- width: auto !important;
106
- }
107
- }
108
- }
109
- @each $size, $percentage in $widths {
110
- .w-#{$size} {
111
- width: $percentage !important;
112
- & > tbody > tr > td {
113
- width: $percentage !important;
114
- }
115
- }
116
- }
117
-
118
- // Spacing
119
- // Reset large padding to 0 on small device
120
- @each $size, $length in $spacers {
121
- .p-lg-#{$size} {
122
- & > tbody > tr > td {
123
- padding: 0 !important;
124
- }
125
- }
126
- .pt-lg-#{$size},
127
- .py-lg-#{$size} {
128
- & > tbody > tr > td {
129
- padding-top: 0 !important;
130
- }
131
- }
132
- .pr-lg-#{$size},
133
- .px-lg-#{$size} {
134
- & > tbody > tr > td {
135
- padding-right: 0 !important;
136
- }
137
- }
138
- .pb-lg-#{$size},
139
- .py-lg-#{$size} {
140
- & > tbody > tr > td {
141
- padding-bottom: 0 !important;
142
- }
143
- }
144
- .pl-lg-#{$size},
145
- .px-lg-#{$size} {
146
- & > tbody > tr > td {
147
- padding-left: 0 !important;
148
- }
149
- }
150
- }
151
-
152
- // Set proper padding on small devices
153
- @each $size, $length in $spacers {
154
- .p-#{$size} {
155
- & > tbody > tr > td {
156
- padding: $length !important;
157
- }
158
- }
159
- .pt-#{$size},
160
- .py-#{$size} {
161
- & > tbody > tr > td {
162
- padding-top: $length !important;
163
- }
164
- }
165
- .pr-#{$size},
166
- .px-#{$size} {
167
- & > tbody > tr > td {
168
- padding-right: $length !important;
169
- }
170
- }
171
- .pb-#{$size},
172
- .py-#{$size} {
173
- & > tbody > tr > td {
174
- padding-bottom: $length !important;
175
- }
176
- }
177
- .pl-#{$size},
178
- .px-#{$size} {
179
- & > tbody > tr > td {
180
- padding-left: $length !important;
181
- }
182
- }
183
- }
184
-
185
- // Spacers
186
- .s-lg-1 > tbody > tr > td,
187
- .s-lg-2 > tbody > tr > td,
188
- .s-lg-3 > tbody > tr > td,
189
- .s-lg-4 > tbody > tr > td,
190
- .s-lg-5 > tbody > tr > td {
191
- font-size: 0 !important;
192
- line-height: 0 !important;
193
- height: 0 !important;
194
- }
195
-
196
- @each $size, $length in $spacers {
197
- .s-#{$size} > tbody > tr > td {
198
- font-size: $length !important;
199
- line-height: $length !important;
200
- height: $length !important;
201
- }
202
- }
203
-
204
- }
205
-
206
- // Yahoo specific media query to revert above
207
- @media yahoo {
208
- // Display
209
- .d-mobile {
210
- display: none !important;
211
- }
212
- .d-desktop {
213
- display: block !important;
214
- }
215
-
216
- // Width
217
- @each $size, $percentage in $widths {
218
- .w-lg-#{$size} {
219
- width: $percentage !important;
220
- & > tbody > tr > td {
221
- width: $percentage !important;
222
- }
223
- }
224
- }
225
-
226
- // Spacing
227
- // Set proper spacing again on Yahoo
228
- @each $size, $length in $spacers {
229
- .p-lg-#{$size} {
230
- & > tbody > tr > td {
231
- padding: $length !important;
232
- }
233
- }
234
- .pt-lg-#{$size},
235
- .py-lg-#{$size} {
236
- & > tbody > tr > td {
237
- padding-top: $length !important;
238
- }
239
- }
240
- .pr-lg-#{$size},
241
- .px-lg-#{$size} {
242
- & > tbody > tr > td {
243
- padding-right: $length !important;
244
- }
245
- }
246
- .pb-lg-#{$size},
247
- .py-lg-#{$size} {
248
- & > tbody > tr > td {
249
- padding-bottom: $length !important;
250
- }
251
- }
252
- .pl-lg-#{$size},
253
- .px-lg-#{$size} {
254
- & > tbody > tr > td {
255
- padding-left: $length !important;
256
- }
257
- }
258
- }
259
-
260
- // Spacing
261
- @each $size, $length in $spacers {
262
- .s-lg-#{$size} > tbody > tr > td {
263
- font-size: $length !important;
264
- line-height: $length !important;
265
- height: $length !important;
266
- }
267
- }
268
-
269
- }
data/core/sass/_border.scss DELETED
@@ -1,73 +0,0 @@
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/_color.scss DELETED
@@ -1,33 +0,0 @@
1
- @each $color, $value in $theme-colors {
2
- .bg-#{$color},
3
- .bg-#{$color} > tbody > tr > td {
4
- background-color: $value;
5
- }
6
- }
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
-
18
- @each $color, $value in $theme-colors {
19
- .text-#{$color},
20
- .text-#{$color} > tbody > tr > td {
21
- color: $value;
22
- }
23
- }
24
-
25
- .text-white,
26
- .text-white > tbody > tr > td {
27
- color: $white;
28
- }
29
-
30
- .text-muted,
31
- .text-mute > tbody > tr > td {
32
- color: #636c72;
33
- }
data/core/sass/_display.scss DELETED
@@ -1,7 +0,0 @@
1
- .d-mobile {
2
- display: none;
3
- }
4
-
5
- .d-desktop {
6
- display: block;
7
- }
data/core/sass/_functions.scss DELETED
@@ -1,14 +0,0 @@
1
- // Color contrast
2
- @mixin color-yiq($color) {
3
- $r: red($color);
4
- $g: green($color);
5
- $b: blue($color);
6
-
7
- $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
8
-
9
- @if ($yiq >= 150) {
10
- color: #111111;
11
- } @else {
12
- color: $white;
13
- }
14
- }
data/core/sass/_grid.scss DELETED
@@ -1,131 +0,0 @@
1
- table.row {
2
- margin-right: -15px;
3
- margin-left: -15px;
4
- table-layout: fixed;
5
- width: 100%;
6
- }
7
-
8
- th.col-1,
9
- th.col-lg-1,
10
- th.col-2,
11
- th.col-lg-2,
12
- th.col-3,
13
- th.col-lg-3,
14
- th.col-4,
15
- th.col-lg-4,
16
- th.col-5,
17
- th.col-lg-5,
18
- th.col-6,
19
- th.col-lg-6,
20
- th.col-7,
21
- th.col-lg-7,
22
- th.col-8,
23
- th.col-lg-8,
24
- th.col-9,
25
- th.col-lg-9,
26
- th.col-10,
27
- th.col-lg-10,
28
- th.col-11,
29
- th.col-lg-11,
30
- th.col-12,
31
- th.col-lg-12 {
32
- min-height: 1px;
33
- padding-right: 15px;
34
- padding-left: 15px;
35
- font-weight: normal;
36
- }
37
-
38
- table.no-gutters {
39
- margin-right: 0;
40
- margin-left: 0;
41
- }
42
-
43
- .no-gutters > thead > tr {
44
- & > th.col-1,
45
- & > th.col-lg-1,
46
- & > th.col-2,
47
- & > th.col-lg-2,
48
- & > th.col-3,
49
- & > th.col-lg-3,
50
- & > th.col-4,
51
- & > th.col-lg-4,
52
- & > th.col-5,
53
- & > th.col-lg-5,
54
- & > th.col-6,
55
- & > th.col-lg-6,
56
- & > th.col-7,
57
- & > th.col-lg-7,
58
- & > th.col-8,
59
- & > th.col-lg-8,
60
- & > th.col-9,
61
- & > th.col-lg-9,
62
- & > th.col-10,
63
- & > th.col-lg-10,
64
- & > th.col-11,
65
- & > th.col-lg-11,
66
- & > th.col-12,
67
- & > th.col-lg-12{
68
- padding-right: 0;
69
- padding-left: 0;
70
- }
71
- }
72
-
73
- th.col-1,
74
- th.col-lg-1 {
75
- width: 8.333333%;
76
- }
77
-
78
- th.col-2,
79
- th.col-lg-2 {
80
- width: 16.666667%;
81
- }
82
-
83
- th.col-3,
84
- th.col-lg-3 {
85
- width: 25%;
86
- }
87
-
88
- th.col-4,
89
- th.col-lg-4 {
90
- width: 33.333333%;
91
- }
92
-
93
- th.col-5,
94
- th.col-lg-5 {
95
- width: 41.666667%;
96
- }
97
-
98
- th.col-6,
99
- th.col-lg-6 {
100
- width: 50%;
101
- }
102
-
103
- th.col-7,
104
- th.col-lg-7 {
105
- width: 58.333333%;
106
- }
107
-
108
- th.col-8,
109
- th.col-lg-8 {
110
- width: 66.666667%;
111
- }
112
-
113
- th.col-9,
114
- th.col-lg-9 {
115
- width: 75%;
116
- }
117
-
118
- th.col-10,
119
- th.col-lg-10 {
120
- width: 83.333333%;
121
- }
122
-
123
- th.col-11,
124
- th.col-lg-11 {
125
- width: 91.666667%;
126
- }
127
-
128
- th.col-12,
129
- th.col-lg-12 {
130
- width: 100%;
131
- }