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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: c024506e2aaf4905e18b18af3ce1622844300bb6
4
- data.tar.gz: cf9fb2f424e88b6dc8e4b9481daf4794729f6876
2
+ SHA256:
3
+ metadata.gz: 3068f698e28c2952f3750af9b111c53775dae856d5d61ac4a2f5818574b96a9c
4
+ data.tar.gz: ce3c3385c6026ae6343e021b8ab603a336d1eb20b610d548ad1a8d51aee02dc8
5
5
  SHA512:
6
- metadata.gz: 8e0dc6a198361a998beddd6f748969ce18305d78f4d596d5a78c40b6f21e18a9422ae6be5066af79d0cf8156f570e762bc4f12c47b4dfea2acb89ccf9c724193
7
- data.tar.gz: d49db65a997dedcc0a3eaa05e2b5e07c81bcf933c8b7d8c301c6ecf69cef04de4af62470cbf0ebd35b569b716e5936f7c987671e19265e0bfd7f84af62cf8dab
6
+ metadata.gz: 8f5426b43f8bb3f1bc8ee1e04def080e4c99d2f4da96857046d7f23b02778ad0a6ae36ab3761ff65b8cf37bacee579de66c2c526fc00f8ac668b37094c6b5536
7
+ data.tar.gz: bc7b30f58c14ad3ca147713cc25004adb7de6938eb9438e790808bcdcd438e68a9b180ae7ac5bcd946cfa1300794dbed8be0048252f89b93cd9ffbbe42952b59
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.2.6
1
+ 0.3.0
@@ -16,3 +16,4 @@
16
16
  @import 'sass/color';
17
17
  @import 'sass/preview';
18
18
  @import 'sass/spacing';
19
+ @import 'sass/border';
@@ -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
+ }
@@ -1,23 +1,23 @@
1
1
  .btn {
2
- border-radius: 4px;
2
+ border-radius: $btn-border-radius;
3
3
  border-collapse: separate !important;
4
4
  }
5
5
 
6
6
  .btn td {
7
- border-radius: 4px;
7
+ border-radius: $btn-border-radius;
8
8
  text-align: center;
9
9
  }
10
10
 
11
11
  .btn td a {
12
- font-size: 16px;
13
- font-family: Helvetica, Arial, sans-serif;
12
+ font-size: $btn-font-size;
13
+ font-family: $btn-font-family;
14
14
  text-decoration: none;
15
- border-radius: 4px;
16
- padding: 8px 12px;
17
- line-height: 1.25 * $font-size-base;
18
- border: 1px solid #e9703e;
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: normal;
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: .875 * $font-size-base;
49
- padding: .25 * $font-size-base .5 * $font-size-base;
50
- line-height: 1.5 * .875 * $font-size-base;
51
- border-radius: .2 * $font-size-base;
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: 1.25 * $font-size-base;
56
- padding: .5 * $font-size-base 1 * $font-size-base;
57
- line-height: 1.5 * 1.25 * $font-size-base;
58
- border-radius: .3 * $font-size-base;
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
  }
@@ -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-sans-serif;
13
+ font-family: $font-family-base;
14
14
  line-height: $line-height-base * $font-size-base;
15
- font-weight: normal;
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-sans-serif;
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
-
@@ -5,27 +5,24 @@
5
5
  .table {
6
6
  width: 100%;
7
7
  max-width: 100%;
8
- // margin-bottom: $spacer;
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: #f2f2f2;
78
+ background-color: $table-accent-bg;
80
79
  }
81
80
  }
82
81
 
@@ -98,30 +97,31 @@
98
97
 
99
98
 
100
99
 
101
- // Inverse styles
100
+ // Dark styles
102
101
  //
103
102
  // Same table markup, but inverted color scheme: dark background and light text.
104
103
 
105
- .thead-inverse {
106
- & > thead > tr > th {
104
+ .thead-dark {
105
+ th {
107
106
  color: $white;
108
107
  background-color: $gray-900;
109
108
  }
110
109
  }
111
110
 
112
- .thead-default {
113
- & > thead > tr > th {
111
+ .thead-light {
112
+ th {
114
113
  color: $gray-700;
115
114
  background-color: $gray-200;
116
115
  }
117
116
  }
118
117
 
119
- .table-inverse {
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
 
@@ -1,10 +1,10 @@
1
1
  h1, h2, h3, h4, h5, h6,
2
2
  .h1, .h2, .h3, .h4, .h5, .h6 {
3
- margin-top: 0;
4
- margin-bottom: 0;
5
- // margin-bottom: $font-size-base / 2;
6
- font-weight: 500;
7
- color: inherit;
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
- .p {
39
+ p {
40
+ margin-bottom: $paragraph-margin-bottom;
32
41
  width: 100%;
33
42
  & > tbody > tr > td {
34
43
  margin: 0;
@@ -1,7 +1,21 @@
1
- $font-size-base: 16px !default;
2
- $line-height-base: 1.5;
3
- $headings-line-height: 1.2;
4
- $headings-ratios: (1: 2.25, 2: 2, 3: 1.75, 4: 1.5, 5: 1.25, 6: 1);
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
- $table-border-color: $gray-200;
102
- $table-border-width: 1px;
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.2.6
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-08-20 00:00:00.000000000 Z
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
- rubyforge_project:
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