bootstrap-email 0.2.6 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- 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/_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
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 3068f698e28c2952f3750af9b111c53775dae856d5d61ac4a2f5818574b96a9c
|
4
|
+
data.tar.gz: ce3c3385c6026ae6343e021b8ab603a336d1eb20b610d548ad1a8d51aee02dc8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8f5426b43f8bb3f1bc8ee1e04def080e4c99d2f4da96857046d7f23b02778ad0a6ae36ab3761ff65b8cf37bacee579de66c2c526fc00f8ac668b37094c6b5536
|
7
|
+
data.tar.gz: bc7b30f58c14ad3ca147713cc25004adb7de6938eb9438e790808bcdcd438e68a9b180ae7ac5bcd946cfa1300794dbed8be0048252f89b93cd9ffbbe42952b59
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.3.0
|
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
|
-
|
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.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Stuart Yamartino
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-
|
11
|
+
date: 2019-12-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionmailer
|
@@ -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
|
@@ -129,8 +130,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
129
130
|
- !ruby/object:Gem::Version
|
130
131
|
version: '0'
|
131
132
|
requirements: []
|
132
|
-
|
133
|
-
rubygems_version: 2.6.13
|
133
|
+
rubygems_version: 3.0.3
|
134
134
|
signing_key:
|
135
135
|
specification_version: 4
|
136
136
|
summary: Bootstrap 4 stylesheet, compiler, and inliner for responsive and consistent
|