bootstrap-email 0.2.6 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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