bootstrap-email 1.3.1 → 1.4.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
2
  SHA256:
3
- metadata.gz: 0af8d16392d189b851cad1448686b2fda2a322b61c0b98553090394a598d0b32
4
- data.tar.gz: '009e81f356b5f8519113b32f44b1c82cac62692b1bf035b2449da4dea46e60a0'
3
+ metadata.gz: 04e71823407d63e303e4b0e02f8ba43ed5969a3b6156f4076de8953db61e9522
4
+ data.tar.gz: 2e88e162a938d9a785ef315cfc450425ca29f8d7f2725f99a7e8b1dde3986ac4
5
5
  SHA512:
6
- metadata.gz: 2f2f9702d22b020da0968896dd7e3134a716c450492569fd3597676e4ad8305c340ba7abc26bd93b6d0b78b5f60de70a0d7bca2b0f310ccd15c73763e0bc3ca2
7
- data.tar.gz: fd7db09c66be97a4082768c8b66025f714932dc356bac007033bb7f7a333d722d45caac63818cfca54344c23cf74bbd882045fc8cfeb11e2fef50217799a34a3
6
+ metadata.gz: f049857967b4afb28a04651661013f858b9892c204bda978f1b52b02489ea9b3e1cedb24445301f32b7c02a2fb15f53572cbd049388f0b7cede467ac932f393b
7
+ data.tar.gz: f9992f886d948d9f433c017202849a5895bce4c42d76759c9cac798240168b0a6dddddeed04d4c19cf402d760fd5f0ecf37431b836250471477fa10cb484f24c
data/VERSION CHANGED
@@ -1 +1 @@
1
- 1.3.1
1
+ 1.4.0
@@ -1,9 +1,5 @@
1
- @import 'scss/functions';
2
- @import 'scss/colors';
1
+ @import 'scss/helpers';
3
2
  @import 'scss/variables';
4
- @import 'scss/utilities';
5
- @import 'scss/selectors_for_utils';
6
- @import 'scss/helper_groups';
7
3
  @import 'scss/reboot_email';
8
4
 
9
5
  @import 'scss/components/alert';
@@ -1,73 +1,23 @@
1
1
  //
2
2
  // This file will be placed in the head of the document and will not be inlined
3
3
  //
4
- @import 'scss/functions';
5
- @import 'scss/colors';
4
+ @import 'scss/helpers';
6
5
  @import 'scss/variables';
7
- @import 'scss/utilities';
8
- @import 'scss/selectors_for_utils';
9
- @import 'scss/helper_groups';
10
6
 
11
- // Force base font in Outlook
12
- body, table, td {
13
- font-family: $font-family-base !important;
14
- }
15
-
16
- // Forces Outlook.com to display emails at full width
17
- .ExternalClass {
18
- width: 100%;
19
- }
20
-
21
- // Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
22
- .ExternalClass,
23
- .ExternalClass p,
24
- .ExternalClass span,
25
- .ExternalClass font,
26
- .ExternalClass td,
27
- .ExternalClass div {
28
- line-height: 150%;
29
- }
30
-
31
- // Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
32
- a {
33
- text-decoration: none;
34
- }
35
-
36
- // Inherit text color so color can be set on the body and inherited by children
37
- * {
38
- color: inherit;
39
- }
40
-
41
- // Fix link colors set on automatic detection such as email addresses and phone numbers
42
- a[x-apple-data-detectors],
43
- u + #body a,
44
- #MessageViewBody a {
45
- color: inherit;
46
- text-decoration: none;
47
- font-size: inherit;
48
- font-family: inherit;
49
- font-weight: inherit;
50
- line-height: inherit;
51
- }
52
-
53
- // Use a better rendering method when resizing images in Outlook IE.
54
- img {
55
- -ms-interpolation-mode: bicubic;
56
- }
57
-
58
- // Prevent Outlook from adding extra spacing to tables.
59
- table:not([class^=s-]) {
60
- font-family: $font-family-base;
61
- mso-table-lspace: 0pt;
62
- mso-table-rspace: 0pt;
63
- border-spacing: 0px;
64
- border-collapse: collapse;
65
- td {
66
- border-spacing: 0px;
67
- border-collapse: collapse;
7
+ @if $font-faces {
8
+ @each $font-face in $font-faces {
9
+ // @font-face has the least quirks in email clients: https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts
10
+ @font-face {
11
+ font-family: map-get($font-face, "font-family");
12
+ font-style: map-get($font-face, "font-style");
13
+ font-weight: map-get($font-face, "font-weight");
14
+ src: map-get($font-face, "src");
15
+ }
68
16
  }
69
17
  }
70
18
 
19
+ @import 'scss/reboot_head';
20
+
71
21
  /*! allow_purge_after */
72
22
 
73
23
  @media screen and (max-width: 600px) {
@@ -0,0 +1,3 @@
1
+ @import 'helpers/functions';
2
+ @import 'helpers/mixins';
3
+ @import 'helpers/selectors_for_utils';
@@ -0,0 +1,59 @@
1
+ // Force base font in Outlook
2
+ body, table, td {
3
+ font-family: $font-family-base !important;
4
+ }
5
+
6
+ // Forces Outlook.com to display emails at full width
7
+ .ExternalClass {
8
+ width: 100%;
9
+ }
10
+
11
+ // Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
12
+ .ExternalClass,
13
+ .ExternalClass p,
14
+ .ExternalClass span,
15
+ .ExternalClass font,
16
+ .ExternalClass td,
17
+ .ExternalClass div {
18
+ line-height: 150%;
19
+ }
20
+
21
+ // Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
22
+ a {
23
+ text-decoration: none;
24
+ }
25
+
26
+ // Inherit text color so color can be set on the body and inherited by children
27
+ * {
28
+ color: inherit;
29
+ }
30
+
31
+ // Fix link colors set on automatic detection such as email addresses and phone numbers
32
+ a[x-apple-data-detectors],
33
+ u + #body a,
34
+ #MessageViewBody a {
35
+ color: inherit;
36
+ text-decoration: none;
37
+ font-size: inherit;
38
+ font-family: inherit;
39
+ font-weight: inherit;
40
+ line-height: inherit;
41
+ }
42
+
43
+ // Use a better rendering method when resizing images in Outlook IE.
44
+ img {
45
+ -ms-interpolation-mode: bicubic;
46
+ }
47
+
48
+ // Prevent Outlook from adding extra spacing to tables.
49
+ table:not([class^=s-]) {
50
+ font-family: $font-family-base;
51
+ mso-table-lspace: 0pt;
52
+ mso-table-rspace: 0pt;
53
+ border-spacing: 0px;
54
+ border-collapse: collapse;
55
+ td {
56
+ border-spacing: 0px;
57
+ border-collapse: collapse;
58
+ }
59
+ }
@@ -1,52 +1,7 @@
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-width: 1px !default;
6
- $line-height-base: 1.5 !default;
7
- $headings-line-height: 1.2 !default;
8
- $headings-margin-top: 0 !default;
9
- $headings-margin-bottom: 0 !default;
10
- $headings-font-family: null !default;
11
- $headings-font-weight: 500 !default;
12
- $headings-color: null !default;
13
-
14
- $border-color: $gray-300 !default;
15
-
16
- $border-radius-sm: 3px !default;
17
- $border-radius: 6px !default;
18
- $border-radius-lg: 9px !default;
19
- $border-radius-xl: 12px !default;
20
- $border-radius-pill: 9999px !default;
21
-
22
- $table-accent-bg: #f2f2f2 !default;
23
- $table-background-color: null !default;
24
- $table-border-color: $border-color !default;
25
- $table-border-width: $border-width !default;
26
-
27
- $body-color: $black !default;
28
- $body-bg: $white !default;
29
-
30
- $btn-padding-y: 8px !default;
31
- $btn-padding-x: 12px !default;
32
- $btn-font-family: $font-family-base !default;
33
- $btn-font-size: $font-size-base !default;
34
- $btn-line-height: 1.25 * $btn-font-size !default;
35
-
36
- $btn-padding-y-sm: 0.25 * $btn-font-size !default;
37
- $btn-padding-x-sm: 0.5 * $btn-font-size !default;
38
- $btn-font-size-sm: 0.875 * $btn-font-size !default;
39
- $btn-line-height-sm: $btn-line-height * 0.875 !default;
40
-
41
- $btn-padding-y-lg: 0.5 * $btn-font-size !default;
42
- $btn-padding-x-lg: $btn-font-size !default;
43
- $btn-font-size-lg: 1.25 * $btn-font-size !default;
44
- $btn-line-height-lg: $btn-line-height * 1.25 !default;
45
-
46
- $btn-border-width: $border-width !default;
47
- $btn-font-weight: $font-weight-base !default;
48
- $btn-border-radius: $border-radius !default;
49
- $btn-border-radius-lg: $border-radius-lg !default;
50
- $btn-border-radius-sm: $border-radius-sm !default;
51
-
52
- $link-color: $primary !default;
1
+ @import 'variables/colors';
2
+ @import 'variables/body';
3
+ @import 'variables/typography';
4
+ @import 'variables/borders';
5
+ @import 'variables/tables';
6
+ @import 'variables/buttons';
7
+ @import 'variables/utilities';
@@ -21,30 +21,14 @@
21
21
  white-space: nowrap;
22
22
  }
23
23
 
24
- @each $name, $color in $all-colors {
25
- @if $name != "transparent" {
26
- .btn-#{$name} td {
27
- background-color: $color;
28
- }
29
- .btn-#{$name} td a {
30
- background-color: $color;
31
- @include color-contrast($color);
32
- border-color: $color;
33
- }
24
+ @each $name, $theme in $btn-themes {
25
+ .btn-#{$name} td {
26
+ background-color: map-get($theme, "background-color");
34
27
  }
35
- }
36
-
37
- @each $name, $color in $all-colors {
38
- @if $name != "transparent" {
39
- .btn-outline-#{$name} td {
40
- background-color: transparent;
41
- border-color: $color;
42
- }
43
- .btn-outline-#{$name} td a {
44
- background-color: transparent;
45
- border-color: $color;
46
- color: $color;
47
- }
28
+ .btn-#{$name} td a {
29
+ background-color: map-get($theme, "background-color");
30
+ color: map-get($theme, "color");
31
+ border-color: map-get($theme, "border-color");
48
32
  }
49
33
  }
50
34
 
@@ -1,4 +1,4 @@
1
- @mixin color-contrast($color) {
1
+ @function color-contrast($color) {
2
2
  $r: red($color);
3
3
  $g: green($color);
4
4
  $b: blue($color);
@@ -6,9 +6,9 @@
6
6
  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
7
7
 
8
8
  @if ($yiq >= 150) {
9
- color: #111111;
9
+ @return #111111;
10
10
  } @else {
11
- color: $white;
11
+ @return $white;
12
12
  }
13
13
  }
14
14
 
@@ -0,0 +1,2 @@
1
+ $body-color: $black !default;
2
+ $body-bg: $white !default;
@@ -0,0 +1,6 @@
1
+ $border-color: $gray-300 !default;
2
+ $border-width: 1px !default;
3
+ $border-radius-sm: 3px !default;
4
+ $border-radius: 6px !default;
5
+ $border-radius-lg: 9px !default;
6
+ $border-radius-pill: 9999px !default;
@@ -0,0 +1,47 @@
1
+ $btn-padding-y: 8px !default;
2
+ $btn-padding-x: 12px !default;
3
+ $btn-font-family: $font-family-base !default;
4
+ $btn-font-size: $font-size-base !default;
5
+ $btn-line-height: 1.25 * $btn-font-size !default;
6
+
7
+ $btn-padding-y-sm: 0.25 * $btn-font-size !default;
8
+ $btn-padding-x-sm: 0.5 * $btn-font-size !default;
9
+ $btn-font-size-sm: 0.875 * $btn-font-size !default;
10
+ $btn-line-height-sm: $btn-line-height * 0.875 !default;
11
+
12
+ $btn-padding-y-lg: 0.5 * $btn-font-size !default;
13
+ $btn-padding-x-lg: $btn-font-size !default;
14
+ $btn-font-size-lg: 1.25 * $btn-font-size !default;
15
+ $btn-line-height-lg: $btn-line-height * 1.25 !default;
16
+
17
+ $btn-border-width: $border-width !default;
18
+ $btn-font-weight: $font-weight-base !default;
19
+ $btn-border-radius: $border-radius !default;
20
+ $btn-border-radius-lg: $border-radius-lg !default;
21
+ $btn-border-radius-sm: $border-radius-sm !default;
22
+
23
+
24
+ /** Button Theme Structure Example
25
+ *
26
+ * $btn-themes: (
27
+ * "primary": (
28
+ * "background-color": blue,
29
+ * "color": white,
30
+ * "border-color": blue
31
+ * ),
32
+ * "outline-primary": (
33
+ * "background-color": transparent,
34
+ * "color": blue,
35
+ * "border-color": blue
36
+ * )
37
+ * )
38
+ */
39
+ $tmp-btn-themes: ();
40
+ @each $name, $color in $all-colors {
41
+ @if $name != "transparent" {
42
+ $tmp-btn-themes: map-merge($tmp-btn-themes, ($name: ("background-color": $color, "color": color-contrast($color), "border-color": $color)));
43
+ $tmp-btn-themes: map-merge($tmp-btn-themes, ("outline-#{$name}": ("background-color": transparent, "color": $color, "border-color": $color)));
44
+ }
45
+ }
46
+
47
+ $btn-themes: $tmp-btn-themes !default;
File without changes
@@ -0,0 +1,4 @@
1
+ $table-accent-bg: #f2f2f2 !default;
2
+ $table-background-color: null !default;
3
+ $table-border-color: $border-color !default;
4
+ $table-border-width: $border-width !default;
@@ -0,0 +1,26 @@
1
+ $font-size-base: 16px !default;
2
+ $font-weight-base: normal !default;
3
+ $line-height-base: 1.5 !default;
4
+ $headings-line-height: 1.2 !default;
5
+ $headings-margin-top: 0 !default;
6
+ $headings-margin-bottom: 0 !default;
7
+ $headings-font-family: null !default;
8
+ $headings-font-weight: 500 !default;
9
+ $headings-color: null !default;
10
+ $link-color: $primary !default;
11
+
12
+ /*
13
+ **** Override the following variables to customize font or add web font ie: Google Fonts ****
14
+ */
15
+ $font-family-base: Helvetica, Arial, sans-serif !default;
16
+ $font-faces: null !default;
17
+ // Example below:
18
+ // $font-family-base: 'Anton', Helvetica, Arial, sans-serif;
19
+ // $font-faces: (
20
+ // (
21
+ // "font-family": 'Anton',
22
+ // "font-style": normal,
23
+ // "font-weight": 400,
24
+ // "src": url(https://fonts.gstatic.com/s/anton/v23/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2')
25
+ // ),
26
+ // );
@@ -20,6 +20,7 @@ module BootstrapEmail
20
20
 
21
21
  def purged_css_from_head
22
22
  default, custom = BootstrapEmail::SassCache.compile('bootstrap-head', @config).split('/*! allow_purge_after */')
23
+ custom ||= ''
23
24
  # get each CSS declaration
24
25
  custom.scan(/\w*\.[\w\-]*[\s\S\n]+?(?=})}{1}/).each do |group|
25
26
  # get the first class for each comma separated CSS declaration
@@ -4,13 +4,15 @@ module BootstrapEmail
4
4
  module Converter
5
5
  class SupportUrlTokens < Base
6
6
  OPEN_BRACKETS = CGI.escape('{{').freeze
7
+ OPEN_PERCENT = (CGI.escape('{') + '%').freeze
7
8
  CLOSE_BRACKETS = CGI.escape('}}').freeze
9
+ CLOSE_PERCENT = ('%' + CGI.escape('}')).freeze
8
10
 
9
11
  def self.replace(html)
10
- regex = /((href|src)=("|'))(.*?((#{Regexp.quote(OPEN_BRACKETS)}).*?(#{Regexp.quote(CLOSE_BRACKETS)})).*?)("|')/
12
+ regex = /((href|src)=("|'))(.*?((#{Regexp.quote(OPEN_BRACKETS)}|#{Regexp.quote(OPEN_PERCENT)}).*?(#{Regexp.quote(CLOSE_BRACKETS)}|#{Regexp.quote(CLOSE_PERCENT)})).*?)("|')/
11
13
  return unless regex.match?(html)
12
14
 
13
- inner_regex = /((#{Regexp.quote(OPEN_BRACKETS)}).*?(#{Regexp.quote(CLOSE_BRACKETS)}))/
15
+ inner_regex = /((#{Regexp.quote(OPEN_BRACKETS)}|#{Regexp.quote(OPEN_PERCENT)}).*?(#{Regexp.quote(CLOSE_BRACKETS)}|#{Regexp.quote(CLOSE_PERCENT)}))/
14
16
 
15
17
  html.gsub!(regex) do |_match|
16
18
  start_text = Regexp.last_match(1)
@@ -22,8 +22,18 @@ module BootstrapEmail
22
22
 
23
23
  def compile
24
24
  cache_path = "#{cache_dir}/#{checksum}/#{type}.css"
25
- compile_and_cache_scss(cache_path) unless cached?(cache_path)
26
- File.read(cache_path)
25
+ lock_path = "#{cache_dir}/#{checksum}/#{type}.css.lock"
26
+ FileUtils.mkdir_p("#{cache_dir}/#{checksum}") unless File.directory?("#{cache_dir}/#{checksum}")
27
+
28
+ File.open(lock_path, File::RDWR | File::CREAT) do |lock_file|
29
+ lock_file.flock(File::LOCK_EX)
30
+
31
+ if cached?(cache_path)
32
+ File.read(cache_path)
33
+ else
34
+ compile_and_cache_scss(cache_path)
35
+ end
36
+ end
27
37
  end
28
38
 
29
39
  private
@@ -55,9 +65,9 @@ module BootstrapEmail
55
65
  def compile_and_cache_scss(cache_path)
56
66
  file = sass_config || File.read("#{file_path}.scss")
57
67
  css = SassC::Engine.new(file, style: style).render
58
- FileUtils.mkdir_p("#{cache_dir}/#{checksum}") unless File.directory?("#{cache_dir}/#{checksum}")
59
68
  File.write(cache_path, css)
60
69
  puts "New css file cached for #{type}" if config.sass_log_enabled?
70
+ css
61
71
  end
62
72
  end
63
73
  end
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: 1.3.1
4
+ version: 1.4.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: 2022-07-11 00:00:00.000000000 Z
11
+ date: 2023-01-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: htmlbeautifier
@@ -78,12 +78,9 @@ files:
78
78
  - core/bootstrap-email.scss
79
79
  - core/bootstrap-head.scss
80
80
  - core/layout.html.erb
81
- - core/scss/_colors.scss
82
- - core/scss/_functions.scss
83
- - core/scss/_helper_groups.scss
81
+ - core/scss/_helpers.scss
84
82
  - core/scss/_reboot_email.scss
85
- - core/scss/_selectors_for_utils.scss
86
- - core/scss/_utilities.scss
83
+ - core/scss/_reboot_head.scss
87
84
  - core/scss/_variables.scss
88
85
  - core/scss/components/_alert.scss
89
86
  - core/scss/components/_badge.scss
@@ -96,6 +93,9 @@ files:
96
93
  - core/scss/components/_preview.scss
97
94
  - core/scss/components/_stack.scss
98
95
  - core/scss/components/_table.scss
96
+ - core/scss/helpers/_functions.scss
97
+ - core/scss/helpers/_mixins.scss
98
+ - core/scss/helpers/_selectors_for_utils.scss
99
99
  - core/scss/utilities/_background.scss
100
100
  - core/scss/utilities/_border-radius.scss
101
101
  - core/scss/utilities/_border.scss
@@ -106,6 +106,13 @@ files:
106
106
  - core/scss/utilities/_text-decoration.scss
107
107
  - core/scss/utilities/_typography.scss
108
108
  - core/scss/utilities/_valign.scss
109
+ - core/scss/variables/_body.scss
110
+ - core/scss/variables/_borders.scss
111
+ - core/scss/variables/_buttons.scss
112
+ - core/scss/variables/_colors.scss
113
+ - core/scss/variables/_tables.scss
114
+ - core/scss/variables/_typography.scss
115
+ - core/scss/variables/_utilities.scss
109
116
  - core/templates/body.html
110
117
  - core/templates/container.html
111
118
  - core/templates/div.html