2 | |
3 |
4 |
5 |
6 | |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/views/templates/sunny/contentStart.blade.php:
--------------------------------------------------------------------------------
1 |
2 | |
3 |
4 |
5 |
6 | |
7 | |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/Snowfire/Beautymail/BeautymailFacade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |  }}/vendor/beautymail/assets/images/widgets/spacer.gif) |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/views/templates/widgets/newfeatureStart.blade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 | |
4 |
5 |
6 |
7 |
8 | |
--------------------------------------------------------------------------------
/src/views/templates/ark/heading.blade.php:
--------------------------------------------------------------------------------
1 | |
2 | |
3 |
4 |
5 |
6 | |
7 |
8 | |
9 |
10 | <{{ $level }}>{{ $heading }}
11 |
12 | |
13 |
14 |
15 |
16 | |
17 | |
18 |
--------------------------------------------------------------------------------
/phpunit.xml:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 | ./tests/
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/views/templates/minty/contentStart.blade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/views/templates/minty/contentCenteredStart.blade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/views/templates/sunny/heading.blade.php:
--------------------------------------------------------------------------------
1 |
2 | |
3 |
4 |
5 |
6 | |
7 | |
8 | |
9 |
10 | |
11 |
12 | <{{ $level }}>{{ $heading }}
13 |
14 | |
15 |
16 |
17 |
18 | |
19 | |
20 |
--------------------------------------------------------------------------------
/src/views/templates/sunny/button.blade.php:
--------------------------------------------------------------------------------
1 |
2 | |
3 |
4 |
5 |
6 | |
7 |
8 | |
9 |
12 | |
13 |
14 |
15 |
16 | |
17 | |
18 |
--------------------------------------------------------------------------------
/src/config/settings.php:
--------------------------------------------------------------------------------
1 | [
9 | '.button-content .button { background: red }',
10 | ],
11 | */
12 |
13 | 'colors' => [
14 |
15 | 'highlight' => '#004ca3',
16 | 'button' => '#004cad',
17 |
18 | ],
19 |
20 | 'view' => [
21 | 'senderName' => null,
22 | 'reminder' => null,
23 | 'unsubscribe' => null,
24 | 'address' => null,
25 |
26 | 'logo' => [
27 | 'path' => '%PUBLIC%/vendor/beautymail/assets/images/sunny/logo.png',
28 | 'width' => '',
29 | 'height' => '',
30 | ],
31 |
32 | 'twitter' => null,
33 | 'facebook' => null,
34 | 'flickr' => null,
35 | ],
36 |
37 | ];
38 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "snowfire/beautymail",
3 | "description": "Send beautiful html emails with Laravel",
4 | "keywords": ["laravel", "html", "email"],
5 | "license": "MIT",
6 | "authors": [
7 | {
8 | "name": "Emil Sundberg",
9 | "email": "emil@snowfire.net"
10 | }
11 | ],
12 | "require": {
13 | "php": ">=7.0.0",
14 | "illuminate/support": "4.*|5.*|^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0",
15 | "pelago/emogrifier": "^3.0|^4.0|^5.0|^6.0|^7.0"
16 | },
17 | "autoload": {
18 | "psr-0": {
19 | "Snowfire\\Beautymail\\": "src/"
20 | }
21 | },
22 | "minimum-stability": "stable",
23 | "extra": {
24 | "laravel": {
25 | "providers": [
26 | "Snowfire\\Beautymail\\BeautymailServiceProvider"
27 | ]
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/views/templates/minty/button.blade.php:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/Snowfire/Beautymail/SwiftCssInlinerPlugin.php:
--------------------------------------------------------------------------------
1 | getMessage();
17 |
18 | $properTypes = [
19 | 'text/html',
20 | 'multipart/alternative',
21 | 'multipart/mixed',
22 | ];
23 |
24 | if ($message->getBody() && in_array($message->getContentType(), $properTypes)) {
25 | $message->setBody(
26 | CssInliner::fromHtml($message->getBody())->inlineCss()->render()
27 | );
28 | }
29 |
30 | foreach ($message->getChildren() as $part) {
31 | if (strpos($part->getContentType(), 'text/html') === 0) {
32 | $message->setBody(
33 | CssInliner::fromHtml($part->getBody())->inlineCss()->render()
34 | );
35 | }
36 | }
37 | }
38 |
39 | /**
40 | * Do nothing.
41 | *
42 | * @param \Swift_Events_SendEvent $evt
43 | */
44 | public function sendPerformed(\Swift_Events_SendEvent $evt)
45 | {
46 | // Do Nothing
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/Snowfire/Beautymail/BeautymailServiceProvider.php:
--------------------------------------------------------------------------------
1 | publishes([
26 | __DIR__.'/../../config/settings.php' => config_path('beautymail.php'),
27 | ], 'config');
28 |
29 | $this->publishes([
30 | __DIR__.'/../../../public' => public_path('vendor/beautymail'),
31 | ], 'public');
32 |
33 | $this->loadViewsFrom(__DIR__.'/../../views', 'beautymail');
34 |
35 | if (version_compare($this->app->version(), '9.0', '>=')) {
36 | Event::listen('Illuminate\Mail\Events\MessageSending', 'Snowfire\Beautymail\SymfonyCssInlinerPlugin');
37 | } else {
38 | try {
39 | $this->app['mailer']->getSwiftMailer()->registerPlugin(new SwiftCssInlinerPlugin());
40 | } catch (\Exception $e) {
41 | \Log::debug('Skipped registering SwiftMailer plugin: CssInlinerPlugin.');
42 | }
43 | }
44 | }
45 |
46 | /**
47 | * Register the service provider.
48 | *
49 | * @return void
50 | */
51 | public function register()
52 | {
53 | $this->app->singleton('Snowfire\Beautymail\Beautymail',
54 | function ($app) {
55 | return new \Snowfire\Beautymail\Beautymail(
56 | array_merge(
57 | config('beautymail.view', []),
58 | [
59 | 'css' => !is_null(config('beautymail.css')) && count(config('beautymail.css')) > 0 ? implode(' ', config('beautymail.css')) : '',
60 | ]
61 | )
62 | );
63 | });
64 | }
65 |
66 | /**
67 | * Get the services provided by the provider.
68 | *
69 | * @return array
70 | */
71 | public function provides()
72 | {
73 | return [];
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/Snowfire/Beautymail/SymfonyCssInlinerPlugin.php:
--------------------------------------------------------------------------------
1 | message;
25 |
26 | if (!$message instanceof Email) {
27 | return;
28 | }
29 |
30 | $this->handleSymfonyEmail($message);
31 | }
32 |
33 | /**
34 | * @param \Symfony\Component\Mime\Email $message
35 | *
36 | * @return void
37 | */
38 | private function handleSymfonyEmail(Email $message)
39 | {
40 | $body = $message->getBody();
41 |
42 | if ($body === null) {
43 | return;
44 | }
45 |
46 | if ($body instanceof TextPart) {
47 | $message->setBody($this->processPart($body));
48 | } elseif ($body instanceof AlternativePart || $body instanceof MixedPart) {
49 | $partType = get_class($body);
50 | $message->setBody(new $partType(
51 | ...array_map(
52 | function (AbstractPart $part) {
53 | return $this->processPart($part);
54 | },
55 | $body->getParts()
56 | )
57 | ));
58 | }
59 | }
60 |
61 | /**
62 | * @param \Symfony\Component\Mime\Part\AbstractPart $part
63 | *
64 | * @return \Symfony\Component\Mime\Part\AbstractPart
65 | */
66 | private function processPart(AbstractPart $part)
67 | {
68 | if ($part instanceof TextPart && $part->getMediaType() === 'text' && $part->getMediaSubtype() === 'html') {
69 | return $this->processHtmlTextPart($part);
70 | } else if ($part instanceof AbstractMultipartPart) {
71 | $partClass = get_class($part);
72 | $parts = [];
73 |
74 | foreach ($part->getParts() as $childPart) {
75 | $parts[] = $this->processPart($childPart);
76 | }
77 |
78 | return new $partClass(...$parts);
79 | }
80 |
81 | return $part;
82 | }
83 |
84 | /**
85 | * @param \Symfony\Component\Mime\Part\TextPart $part
86 | *
87 | * @return \Symfony\Component\Mime\Part\TextPart
88 | */
89 | private function processHtmlTextPart(TextPart $part)
90 | {
91 | return new TextPart(
92 | CssInliner::fromHtml($part->getBody())->inlineCss()->render(),
93 | $part->getPreparedHeaders()->getHeaderParameter('Content-Type', 'charset') ?: 'utf-8',
94 | 'html'
95 | );
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/Snowfire/Beautymail/Beautymail.php:
--------------------------------------------------------------------------------
1 | settings = $settings;
32 | $this->mailer = app()->make('Illuminate\Contracts\Mail\Mailer');
33 | $this->setLogoPath();
34 | }
35 |
36 | public function to($users)
37 | {
38 | return (new PendingMail($this))->to($users);
39 | }
40 |
41 | public function bcc($users)
42 | {
43 | return (new PendingMail($this))->bcc($users);
44 | }
45 |
46 | public function cc($users)
47 | {
48 | return (new PendingMail($this))->cc($users);
49 | }
50 |
51 | /**
52 | * Retrieve the settings.
53 | *
54 | * @return mixed
55 | */
56 | public function getData()
57 | {
58 | return $this->settings;
59 | }
60 |
61 | /**
62 | * @return \Illuminate\Contracts\Mail\Mailer
63 | */
64 | public function getMailer()
65 | {
66 | return $this->mailer;
67 | }
68 |
69 | /**
70 | * Send a new message using a view.
71 | *
72 | * @param string|array $view
73 | * @param array $data
74 | * @param \Closure|string $callback
75 | *
76 | * @return void
77 | */
78 | public function send($view, array $data = [], $callback = null)
79 | {
80 | $data = array_merge($this->settings, $data);
81 |
82 | $this->mailer->send($view, $data, $callback);
83 | }
84 |
85 | /**
86 | * Send a new message using the a view via queue.
87 | *
88 | * @param string|array $view
89 | * @param array $data
90 | * @param \Closure|string $callback
91 | *
92 | * @return void
93 | */
94 | public function queue($view, array $data, $callback)
95 | {
96 | $data = array_merge($this->settings, $data);
97 |
98 | $this->mailer->queue($view, $data, $callback);
99 | }
100 |
101 | /**
102 | * @param $view
103 | * @param array $data
104 | *
105 | * @return \Illuminate\View\View
106 | */
107 | public function view($view, array $data = [])
108 | {
109 | $data = array_merge($this->settings, $data);
110 |
111 | return view($view, $data);
112 | }
113 |
114 | /**
115 | * Send a new message when only a raw text part.
116 | *
117 | * @param string $text
118 | * @param mixed $callback
119 | *
120 | * @return void
121 | */
122 | public function raw($text, $callback)
123 | {
124 | return $this->mailer->send(['raw' => $text], [], $callback);
125 | }
126 |
127 | /**
128 | * Get the array of failed recipients.
129 | *
130 | * @return array
131 | */
132 | public function failures()
133 | {
134 | return $this->mailer->failures();
135 | }
136 |
137 | /**
138 | * @return mixed
139 | */
140 | private function setLogoPath()
141 | {
142 | $this->settings['logo']['path'] = str_replace(
143 | '%PUBLIC%',
144 | \Request::getSchemeAndHttpHost(),
145 | $this->settings['logo']['path'] ?? ''
146 | );
147 | }
148 |
149 | public function sendNow($mailable, array $data = [], $callback = null)
150 | {
151 | return $this->mailer->sendNow($mailable, $data, $callback);
152 | }
153 | }
154 |
--------------------------------------------------------------------------------
/src/styles/scss/minty.scss:
--------------------------------------------------------------------------------
1 | /* Client-specific Styles */
2 | #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
3 | body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
4 | /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
5 | .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
6 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
7 | #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
8 | img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
9 | a img {border:none;}
10 | .image_fix {display:block;}
11 | p {margin: 0px 0px !important;}
12 |
13 | table td {border-collapse: collapse;}
14 | table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
15 | /*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
16 | /*STYLES*/
17 | table[class=full] { width: 100%; clear: both; }
18 |
19 | /*################################################*/
20 | /*IPAD STYLES*/
21 | /*################################################*/
22 | @media only screen and (max-width: 640px) {
23 | a[href^="tel"], a[href^="sms"] {
24 | text-decoration: none;
25 | color: #ffffff; /* or whatever your want */
26 | pointer-events: none;
27 | cursor: default;
28 | }
29 | .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
30 | text-decoration: default;
31 | color: #ffffff !important;
32 | pointer-events: auto;
33 | cursor: default;
34 | }
35 | table[class=devicewidth] {width: 440px!important;text-align:center!important;}
36 | table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
37 | table[class="sthide"]{display: none!important;}
38 | img[class="bigimage"]{width: 420px!important;height:219px!important;}
39 | img[class="col2img"]{width: 420px!important;height:258px!important;}
40 | img[class="image-banner"]{width: 440px!important;height:106px!important;}
41 | td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}
42 | td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}
43 | img[class="logo"]{padding:0!important;margin: 0 auto !important;}
44 |
45 | }
46 | /*##############################################*/
47 | /*IPHONE STYLES*/
48 | /*##############################################*/
49 | @media only screen and (max-width: 480px) {
50 | a[href^="tel"], a[href^="sms"] {
51 | text-decoration: none;
52 | color: #ffffff; /* or whatever your want */
53 | pointer-events: none;
54 | cursor: default;
55 | }
56 | .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
57 | text-decoration: default;
58 | color: #ffffff !important;
59 | pointer-events: auto;
60 | cursor: default;
61 | }
62 | table[class=devicewidth] {width: 280px!important;text-align:center!important;}
63 | table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
64 | table[class="sthide"]{display: none!important;}
65 | img[class="bigimage"]{width: 260px!important;height:136px!important;}
66 | img[class="col2img"]{width: 260px!important;height:160px!important;}
67 | img[class="image-banner"]{width: 280px!important;height:68px!important;}
68 |
69 | }
70 |
71 | /*##############################################*/
72 | /*CONTENT STYLE*/
73 | /*##############################################*/
74 | body {
75 | background: #f6f4f5;
76 | }
77 |
78 | .title {
79 | font-family: Arial, sans-serif; font-size: 18px; color: #333333; text-align:left;line-height: 20px;
80 | }
81 | .title.center {
82 | text-align: center;
83 | }
84 |
85 | .paragraph {
86 | font-family: Arial, sans-serif;
87 | font-size: 14px;
88 | color: #666666;
89 | text-align:left;
90 | line-height: 22px;
91 | }
92 | .paragraph.alt {
93 | font-size: 14px;
94 | color: #95a5a6;
95 | text-align:center;
96 | line-height: 30px;
97 | }
--------------------------------------------------------------------------------
/src/views/templates/ark.blade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ isset($senderName) ? $senderName : '' }}
4 |
5 |
6 | @if($css)
7 |
10 | @endif
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | |
21 |
22 |
23 | |
24 |
25 |
26 |
27 |  ? $logo['path'] : '' }})
28 | |
29 |
30 |
31 | |
32 |
33 |
34 | |
35 |
36 |
37 | |
38 |
39 |
40 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | @section('content')
62 | @show
63 |
64 |
65 |
66 | |
67 |
68 |
69 | |
70 |
71 |
72 |
73 |
74 |
75 | |
76 |
77 | @if (isset($reminder))
78 |
79 | @endif
80 | |
81 |
82 |
83 |
84 | |
85 |
86 |
87 | @if (isset($twitter))
88 |  }}/vendor/beautymail/assets/images/ark/twitter.png) |
89 | @endif
90 |
91 | @if (isset($facebook))
92 |  }}/vendor/beautymail/assets/images/ark/fb.png) |
93 | @endif
94 |
95 |
96 | |
97 | |
98 |
99 |
100 |
101 | |
102 |
103 |
104 | |
105 |
106 |
107 |
108 | |
109 |
110 |
111 |
112 |
113 |
114 |
--------------------------------------------------------------------------------
/src/views/templates/minty.blade.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | @if($css)
7 |
10 | @endif
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | |
25 |
26 |
27 |
28 | |
29 |
30 | |
31 |
32 |
33 |
34 | |
35 |
36 |
37 |
38 |
39 | |
40 |
41 |
42 |
43 |
44 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
74 | |
75 |
76 |
77 |
78 |
79 | |
80 |
81 |
82 |
83 | |
84 |
85 |
86 |
87 |
88 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 | |
107 |
108 |
109 | @if ($unsubscribe)
110 |
111 | |
112 | {{ $unsubscribe }}
113 | |
114 |
115 | @endif
116 |
117 |
118 | |
119 |
120 |
121 |
122 |
123 | |
124 |
125 |
126 |
127 |
128 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | |
21 |
22 |
23 | |
24 |
25 |
26 | |
27 |
28 |
29 |
30 |
31 |
32 | |
33 |
34 |
35 | |
36 | |
37 |
38 |
39 | |
40 |
41 |
42 | |
43 |
44 |
45 | |
46 |
47 |
48 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | @section('content')
73 | @show
74 |
75 |
76 |
77 | |
78 |
79 |
80 | |
81 |
82 |
83 | |
84 |
85 |
86 |
87 |
88 |
89 | |
90 |
91 | @if (isset($reminder))
92 |
93 | @endif
94 | |
95 |
96 |
97 |
98 | |
99 |
100 |
101 | @if (isset($twitter))
102 | |
103 | @endif
104 |
105 | @if (isset($facebook))
106 | |
107 | @endif
108 |
109 |
110 | |
111 | |
112 |
113 |
114 |
115 | |
116 |
117 |
118 | |
119 |
120 |
121 |
127 |
128 |
129 | |
130 |
131 |
132 |
133 | |
134 |
135 |
136 |
137 |
138 |
139 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Beautymail for Laravel
2 |
3 | Beautymail makes it super easy to send beautiful responsive HTML emails. It's made for things like:
4 |
5 | * Welcome emails
6 | * Password reminders
7 | * Invoices
8 | * Data exports
9 |
10 | ### Index:
11 |
12 | - [Templates](#templates)
13 | - [Installation](#installation)
14 | - [Send your first Beauty mail](#send-your-first-beauty-mail)
15 | - [Options](#options)
16 | - [Lumen support](#lumen-support)
17 |
18 | ## Templates
19 |
20 | There are tons of great looking HTML email templates out there. Campaign Monitor and Mailchimp has released hundreds for free. It is pretty simple to adapt a template to Beautymail.
21 |
22 | __Widgets__ by [Campaign Monitor](https://www.campaignmonitor.com/templates/all/):
23 |
24 | 
25 |
26 | __Minty__ by __Stamplia__:
27 |
28 | 
29 |
30 | __Sunny__
31 |
32 | 
33 |
34 | ## Installation
35 |
36 | Add the package to your `composer.json` by running:
37 |
38 | ```bash
39 | composer require snowfire/beautymail
40 | ```
41 |
42 | Configure your settings such as logo url and social links in `config/beautymail.php`
43 |
44 | ## Send your first Beauty mail
45 |
46 | Add this to your `routes/web.php`
47 |
48 | ```php
49 | Route::get('/test', function()
50 | {
51 | $beautymail = app()->make(Snowfire\Beautymail\Beautymail::class);
52 | $beautymail->send('emails.welcome', [], function($message)
53 | {
54 | $message
55 | ->from('bar@example.com')
56 | ->to('foo@example.com', 'John Smith')
57 | ->subject('Welcome!');
58 | });
59 |
60 | });
61 | ```
62 |
63 | Now create `resources/views/emails/welcome.blade.php`
64 |
65 | ```html
66 | @extends('beautymail::templates.widgets')
67 |
68 | @section('content')
69 |
70 | @include('beautymail::templates.widgets.articleStart')
71 |
72 | Hello World
73 | This is a test
74 |
75 | @include('beautymail::templates.widgets.articleEnd')
76 |
77 |
78 | @include('beautymail::templates.widgets.newfeatureStart')
79 |
80 | Hello World again
81 | This is another test
82 |
83 | @include('beautymail::templates.widgets.newfeatureEnd')
84 |
85 | @stop
86 | ```
87 |
88 | That's it!
89 |
90 | ## Options
91 |
92 | ### _Template:_ Widgets
93 |
94 | To change colours for the different segments, pass a colour variable:
95 |
96 | ```php
97 | @include('beautymail::templates.widgets.articleStart', ['color' => '#0000FF'])
98 | ```
99 |
100 | #### Minty template example
101 |
102 | ```html
103 | @extends('beautymail::templates.minty')
104 |
105 | @section('content')
106 |
107 | @include('beautymail::templates.minty.contentStart')
108 |
109 | |
110 | Welcome Steve
111 | |
112 |
113 |
114 | |
115 |
116 |
117 | |
118 | This is a paragraph text
119 | |
120 |
121 |
122 | |
123 |
124 |
125 | |
126 | This is a heading
127 | |
128 |
129 |
130 | |
131 |
132 |
133 | |
134 | More paragraph text.
135 | |
136 |
137 |
138 | |
139 |
140 |
141 | |
142 | @include('beautymail::templates.minty.button', ['text' => 'Sign in', 'link' => '#'])
143 | |
144 |
145 |
146 | |
147 |
148 | @include('beautymail::templates.minty.contentEnd')
149 |
150 | @stop
151 | ```
152 |
153 | ### Ark template example
154 |
155 | ```html
156 | @extends('beautymail::templates.ark')
157 |
158 | @section('content')
159 |
160 | @include('beautymail::templates.ark.heading', [
161 | 'heading' => 'Hello World!',
162 | 'level' => 'h1'
163 | ])
164 |
165 | @include('beautymail::templates.ark.contentStart')
166 |
167 | Hello World
168 | This is a test
169 |
170 | @include('beautymail::templates.ark.contentEnd')
171 |
172 | @include('beautymail::templates.ark.heading', [
173 | 'heading' => 'Another headline',
174 | 'level' => 'h2'
175 | ])
176 |
177 | @include('beautymail::templates.ark.contentStart')
178 |
179 | Hello World again
180 | This is another test
181 |
182 | @include('beautymail::templates.ark.contentEnd')
183 |
184 | @stop
185 | ```
186 |
187 | #### Sunny template example
188 |
189 | ```html
190 | @extends('beautymail::templates.sunny')
191 |
192 | @section('content')
193 |
194 | @include ('beautymail::templates.sunny.heading' , [
195 | 'heading' => 'Hello!',
196 | 'level' => 'h1',
197 | ])
198 |
199 | @include('beautymail::templates.sunny.contentStart')
200 |
201 | Today will be a great day!
202 |
203 | @include('beautymail::templates.sunny.contentEnd')
204 |
205 | @include('beautymail::templates.sunny.button', [
206 | 'title' => 'Click me',
207 | 'link' => 'http://google.com'
208 | ])
209 |
210 | @stop
211 | ```
212 |
213 | ## Lumen support
214 |
215 | In order to get this working on Lumen follow the installation instructions except for the `artisan vendor:publish` command, since Lumen does not provide this command. Instead you have to copy the assets folder from `vendor/snowfire/beautymail/public/` to the public folder in your Lumen project manually.
216 |
217 | Make sure to also put the `beautymail.php` config file in the `config` folder (default available in `src/config/settings.php`)
218 |
219 | ### Enable mailing in Lumen
220 |
221 | After this you will need to install and configure `illuminate/mailer` with:
222 |
223 | composer require illuminate/mail
224 |
225 | and add this to your `bootstrap/app.php`:
226 |
227 | $app->withFacades();
228 | $app->register(App\Providers\AppServiceProvider::class);
229 |
230 | See [this blog post](https://medium.com/@edwardsteven/using-lumen-and-laravel-mail-with-mailgun-270415daed37) for more details and how to use different mail libraries in lumen:
231 |
232 | ### Configure Beautymail classes and configuration parameters
233 |
234 | In order to get Beautymail working on Lumen you need to add the following to your `bootstrap/app.php` in order to resolve missing config files, parameters and classes (before you register `BeautymailServiceProvider`):
235 |
236 | // Provide required path variables
237 | $app->instance('path.config', env("STORAGE_DIR", app()->basePath()) . DIRECTORY_SEPARATOR . 'config');
238 | $app->instance('path.public', env("STORAGE_DIR", app()->basePath()) . DIRECTORY_SEPARATOR . 'public');
239 |
240 | // Enable config for beautymail
241 | $app->configure('beautymail');
242 |
243 | // Provide class alliases to resolve Request and Config
244 | class_alias(\Illuminate\Support\Facades\Request::class, "\Request");
245 | class_alias(\Illuminate\Support\Facades\Config::class, "\Config");
246 |
247 | ### Start using Beautymail
248 |
249 | Congratulations, you can know start using Beautymail in Lumen. See: [Send your first Beauty mail](#send-your-first-beauty-mail) on what to do next.
250 |
--------------------------------------------------------------------------------
/src/views/templates/widgets.blade.php:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 | {{ isset($senderName) ? $senderName : '' }}
8 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | @if (isset($logo))
114 |
115 | @endif
116 |
117 |
|
118 |
|
119 |
120 |
121 |
122 |
123 |
124 | @section('content')
125 | @show
126 |
127 | |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | |
142 |
143 |
188 |
189 | |
190 |
191 |
192 |
193 |
194 |
195 | |
196 |
197 |
198 |
199 | |
200 |
201 |
202 |
203 |
204 |
205 |
--------------------------------------------------------------------------------
/src/styles/scss/ark.scss:
--------------------------------------------------------------------------------
1 | $fontFamily: Helvetica Neue, Helvetica, Arial, Helvetica, serif;
2 |
3 | /* Mobile-specific Styles */
4 | @media only screen and (max-device-width: 480px) {
5 | //@media only screen and (max-width: 5480px) {
6 | table[class=w0], td[class=w0] {
7 | width: 0 !important; }
8 |
9 | table[class=w10], td[class=w10], img[class=w10] {
10 | width: 10px !important; }
11 |
12 | table[class=w15], td[class=w15], img[class=w15] {
13 | width: 5px !important; }
14 |
15 | table[class=w30], td[class=w30], img[class=w30], table[class=w50], td[class=w50], img[class=w50], table[class=w60], td[class=w60], img[class=w60] {
16 | width: 10px !important; }
17 |
18 | table[class=w125], td[class=w125], img[class=w125] {
19 | width: 80px !important; }
20 |
21 | table[class=w130], td[class=w130], img[class=w130] {
22 | width: 55px !important; }
23 |
24 | table[class=w140], td[class=w140], img[class=w140] {
25 | width: 90px !important; }
26 |
27 | table[class=w160], td[class=w160], img[class=w160] {
28 | width: 180px !important; }
29 |
30 | table[class=w170], td[class=w170], img[class=w170] {
31 | width: 100px !important; }
32 |
33 | table[class=w180], td[class=w180], img[class=w180], table[class=w195], td[class=w195], img[class=w195], table[class=w220], td[class=w220], img[class=w220] {
34 | width: 80px !important; }
35 |
36 | table[class=w240], td[class=w240], img[class=w240] {
37 | width: 180px !important; }
38 |
39 | table[class=w255], td[class=w255], img[class=w255] {
40 | width: 185px !important; }
41 |
42 | table[class=w275], td[class=w275], img[class=w275], table[class=w280], td[class=w280], img[class=w280] {
43 | width: 135px !important; }
44 |
45 | table[class=w300], td[class=w300], img[class=w300] {
46 | width: 140px !important; }
47 |
48 | table[class=w325], td[class=w325], img[class=w325] {
49 | width: 95px !important; }
50 |
51 | table[class=w360], td[class=w360], img[class=w360] {
52 | width: 140px !important; }
53 |
54 | table[class=w410], td[class=w410], img[class=w410] {
55 | width: 180px !important; }
56 |
57 | table[class=w470], td[class=w470], img[class=w470] {
58 | width: 200px !important; }
59 |
60 | table[class=w560], td[class=w560], img[class=w560], table[class=w580], td[class=w580], img[class=w580] {
61 | width: 280px !important; }
62 |
63 | table[class=w640], td[class=w640], img[class=w640] {
64 | width: 300px !important; }
65 |
66 | .mobile_only {
67 | display: block !important;
68 | max-height: none !important;
69 | font-size: 12px !important; }
70 |
71 | .large_only {
72 | display: none !important; }
73 |
74 | #superheading {
75 | width: 560px !important; }
76 |
77 | #logo {
78 | display: none !important; }
79 | #logo img {
80 | padding-bottom: 20px; }
81 |
82 | table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide {
83 | display: none !important; }
84 |
85 | #customHeaderImageArea {
86 | text-align: center !important; }
87 |
88 | #toppbild, #mellanbild {
89 | height: auto; }
90 |
91 | table[class=h0], td[class=h0] {
92 | height: 0 !important; }
93 |
94 | p[class=footer-content-left] {
95 | text-align: left !important; }
96 |
97 | #headline p {
98 | font-size: 30px !important; } }
99 | @media all and (min-device-pixel-ratio: 1.5) {
100 | #background-table, body {
101 | background: url("/images/bg_2x.png") !important;
102 | background-size: 106px 142px !important; } }
103 | #superheading {
104 | width: 360px;
105 | font-size: 26px; }
106 | #superheading font {
107 | font-size: 26px;
108 | color: #333;
109 | text-align: left; }
110 | #superheading h1 {
111 | margin: 0;
112 | padding: 0; }
113 |
114 | #logo {
115 | width: 195px; }
116 |
117 | .mobile_only {
118 | display: none;
119 | max-height: 0px;
120 | font-size: 0; }
121 |
122 | .large_only {
123 | display: block; }
124 |
125 | /* Client-specific Styles */
126 | #outlook a {
127 | padding: 0; }
128 |
129 | /* Force Outlook to provide a "view in browser" button. */
130 | body {
131 | width: 100% !important; }
132 |
133 | .ReadMsgBody {
134 | width: 100%; }
135 |
136 | .ExternalClass {
137 | width: 100%;
138 | display: block !important; }
139 |
140 | /* Force Hotmail to display emails at full width */
141 | /* Reset Styles */
142 | /* Add 100px so mobile switch bar doesn't cover street address. */
143 | html, body {
144 | background-color: #F7F7F7;
145 | margin: 0;
146 | padding: 0; }
147 |
148 | img {
149 | /*height: auto;*/
150 | line-height: 100%;
151 | outline: none;
152 | text-decoration: none;
153 | display: block;
154 | max-width: 100%; }
155 |
156 | #footer img {
157 | display: inline; }
158 |
159 | br, strong br, b br, em br, i br {
160 | line-height: 100%; }
161 |
162 | h1, h2, h3, h4, h5, h6 {
163 | font-family: $fontFamily;
164 | font-weight: 300;
165 | line-height: 130% !important;
166 | -webkit-font-smoothing: antialiased;
167 | color: #333;
168 | text-align: left;
169 | margin: 0;
170 | }
171 |
172 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
173 | color: blue !important; }
174 |
175 | h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
176 | color: red !important; }
177 |
178 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
179 | h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
180 | color: purple !important; }
181 |
182 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
183 | table td, table tr {
184 | border-collapse: collapse; }
185 |
186 | .yshortcuts {
187 | color: black;
188 | text-decoration: none !important;
189 | border-bottom: none !important;
190 | background: none !important; }
191 | .yshortcuts a {
192 | color: black;
193 | text-decoration: none !important;
194 | border-bottom: none !important;
195 | background: none !important; }
196 | .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
197 | color: black;
198 | text-decoration: none !important;
199 | border-bottom: none !important;
200 | background: none !important; }
201 |
202 | /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
203 | #background-table {
204 | background-color: #F7F7F7; }
205 |
206 | /* Webkit Elements */
207 | #top-bar {
208 | border-radius: 6px 6px 0px 0px;
209 | -moz-border-radius: 6px 6px 0px 0px;
210 | -webkit-border-radius: 6px 6px 0px 0px;
211 | -webkit-font-smoothing: antialiased;
212 | background: url("bg2.png");
213 | background-color: #ffffff;
214 | color: #7d7b7d; }
215 | #top-bar a {
216 | font-weight: normal;
217 | color: #7D7B7D;
218 | text-decoration: none; }
219 |
220 | #footer {
221 | border-radius: 0px 0px 6px 6px;
222 | -moz-border-radius: 0px 0px 6px 6px;
223 | -webkit-border-radius: 0px 0px 6px 6px;
224 | -webkit-font-smoothing: antialiased; }
225 |
226 | /* Fonts and Content */
227 | body {
228 | font-family: $fontFamily
229 | }
230 | body p {
231 | font-weight: 400; }
232 |
233 | strong {
234 | font-weight: 600; }
235 |
236 | .header-content, .footer-content-left, .footer-content-right {
237 | -webkit-text-size-adjust: none;
238 | -ms-text-size-adjust: none; }
239 |
240 | /* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
241 | .header-content {
242 | font-size: 12px;
243 | color: #7d7b7d; }
244 | .header-content a {
245 | font-weight: bold;
246 | color: #eeeeee;
247 | text-decoration: none; }
248 |
249 | #headline p {
250 | color: #eeeeee;
251 | font-family: $fontFamily;
252 | font-size: 36px;
253 | text-align: left;
254 | margin-top: 0px;
255 | margin-bottom: 30px; }
256 | #headline p a {
257 | color: #eeeeee;
258 | text-decoration: none; }
259 |
260 | .article-title {
261 | font-size: 14px;
262 | color: #ffffff;
263 | font-weight: normal;
264 | margin-top: 0px;
265 | margin-bottom: 0px;
266 | background: #f26728;
267 | display: block;
268 | padding: 0px 5px 0px 10px;
269 | text-transform: uppercase;
270 | letter-spacing: .071em;
271 | line-height: 22px;
272 | height: 22px; }
273 | .article-title a {
274 | color: #f26728;
275 | text-decoration: none; }
276 |
277 | .article-content {
278 | font-size: 14px;
279 | line-height: 20px;
280 | color: #5e5b5b;
281 | margin-top: 0px;
282 | margin-bottom: 0px;
283 | }
284 | .article-content a {
285 | color: #f26728;
286 | font-weight: bold;
287 | text-decoration: none;
288 | font-weight: 600; }
289 | .article-content a:hover {
290 | text-decoration: underline; }
291 | .article-content ol, .article-content ul {
292 | margin-top: 0px;
293 | margin-bottom: 18px;
294 | margin-left: 19px;
295 | padding: 0; }
296 | .article-content li {
297 | font-size: 13px;
298 | line-height: 20px;
299 | color: #444444; }
300 | .article-content li a {
301 | color: #f26728;
302 | text-decoration: underline; }
303 | .article-content p {
304 | margin-top: 0;
305 | padding-top: 0; }
306 |
307 | .footer-content-left {
308 | font-size: 12px;
309 | line-height: 15px;
310 | color: #8f8f8f;
311 | margin-top: 15px;
312 | margin-bottom: 15px; }
313 | .footer-content-left a {
314 | color: #8F8F8F;
315 | font-weight: bold;
316 | text-decoration: none; }
317 |
318 | .footer-content-right {
319 | font-size: 11px;
320 | color: #8f8f8f;
321 | margin-top: 0px; }
322 | .footer-content-right a {
323 | color: #8F8F8F;
324 | font-weight: bold;
325 | text-decoration: none; }
326 |
327 | #footer {
328 | background-color: #ffffff;
329 | color: #8f8f8f; }
330 | #footer a {
331 | color: #8F8F8F;
332 | text-decoration: none;
333 | font-weight: bold; }
334 |
335 | #permission-reminder {
336 | white-space: pre-wrap;
337 | font-weight: 400; }
338 |
339 | #street-address {
340 | color: #ffffff;
341 | white-space: pre-wrap; }
--------------------------------------------------------------------------------
/src/styles/css/ark.css:
--------------------------------------------------------------------------------
1 | /* Mobile-specific Styles */
2 | @media only screen and (max-device-width: 480px) {
3 | table[class=w0], td[class=w0] {
4 | width: 0 !important; }
5 |
6 | table[class=w10], td[class=w10], img[class=w10] {
7 | width: 10px !important; }
8 |
9 | table[class=w15], td[class=w15], img[class=w15] {
10 | width: 5px !important; }
11 |
12 | table[class=w30], td[class=w30], img[class=w30], table[class=w50], td[class=w50], img[class=w50], table[class=w60], td[class=w60], img[class=w60] {
13 | width: 10px !important; }
14 |
15 | table[class=w125], td[class=w125], img[class=w125] {
16 | width: 80px !important; }
17 |
18 | table[class=w130], td[class=w130], img[class=w130] {
19 | width: 55px !important; }
20 |
21 | table[class=w140], td[class=w140], img[class=w140] {
22 | width: 90px !important; }
23 |
24 | table[class=w160], td[class=w160], img[class=w160] {
25 | width: 180px !important; }
26 |
27 | table[class=w170], td[class=w170], img[class=w170] {
28 | width: 100px !important; }
29 |
30 | table[class=w180], td[class=w180], img[class=w180], table[class=w195], td[class=w195], img[class=w195], table[class=w220], td[class=w220], img[class=w220] {
31 | width: 80px !important; }
32 |
33 | table[class=w240], td[class=w240], img[class=w240] {
34 | width: 180px !important; }
35 |
36 | table[class=w255], td[class=w255], img[class=w255] {
37 | width: 185px !important; }
38 |
39 | table[class=w275], td[class=w275], img[class=w275], table[class=w280], td[class=w280], img[class=w280] {
40 | width: 135px !important; }
41 |
42 | table[class=w300], td[class=w300], img[class=w300] {
43 | width: 140px !important; }
44 |
45 | table[class=w325], td[class=w325], img[class=w325] {
46 | width: 95px !important; }
47 |
48 | table[class=w360], td[class=w360], img[class=w360] {
49 | width: 140px !important; }
50 |
51 | table[class=w410], td[class=w410], img[class=w410] {
52 | width: 180px !important; }
53 |
54 | table[class=w470], td[class=w470], img[class=w470] {
55 | width: 200px !important; }
56 |
57 | table[class=w560], td[class=w560], img[class=w560], table[class=w580], td[class=w580], img[class=w580] {
58 | width: 280px !important; }
59 |
60 | table[class=w640], td[class=w640], img[class=w640] {
61 | width: 300px !important; }
62 |
63 | .mobile_only {
64 | display: block !important;
65 | max-height: none !important;
66 | font-size: 12px !important; }
67 |
68 | .large_only {
69 | display: none !important; }
70 |
71 | #superheading {
72 | width: 560px !important; }
73 |
74 | #logo {
75 | display: none !important; }
76 |
77 | #logo img {
78 | padding-bottom: 20px; }
79 |
80 | table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide {
81 | display: none !important; }
82 |
83 | #customHeaderImageArea {
84 | text-align: center !important; }
85 |
86 | #toppbild, #mellanbild {
87 | height: auto; }
88 |
89 | table[class=h0], td[class=h0] {
90 | height: 0 !important; }
91 |
92 | p[class=footer-content-left] {
93 | text-align: left !important; }
94 |
95 | #headline p {
96 | font-size: 30px !important; } }
97 | @media all and (min-device-pixel-ratio: 1.5) {
98 | #background-table, body {
99 | background: url("/images/bg_2x.png") !important;
100 | background-size: 106px 142px !important; } }
101 | #superheading {
102 | width: 360px;
103 | font-size: 26px; }
104 |
105 | #superheading font {
106 | font-size: 26px;
107 | color: #333;
108 | text-align: left; }
109 |
110 | #superheading h1 {
111 | margin: 0;
112 | padding: 0; }
113 |
114 | #logo {
115 | width: 195px; }
116 |
117 | .mobile_only {
118 | display: none;
119 | max-height: 0px;
120 | font-size: 0; }
121 |
122 | .large_only {
123 | display: block; }
124 |
125 | /* Client-specific Styles */
126 | #outlook a {
127 | padding: 0; }
128 |
129 | /* Force Outlook to provide a "view in browser" button. */
130 | body {
131 | width: 100% !important; }
132 |
133 | .ReadMsgBody {
134 | width: 100%; }
135 |
136 | .ExternalClass {
137 | width: 100%;
138 | display: block !important; }
139 |
140 | /* Force Hotmail to display emails at full width */
141 | /* Reset Styles */
142 | /* Add 100px so mobile switch bar doesn't cover street address. */
143 | html, body {
144 | background-color: #F7F7F7;
145 | margin: 0;
146 | padding: 0; }
147 |
148 | img {
149 | /*height: auto;*/
150 | line-height: 100%;
151 | outline: none;
152 | text-decoration: none;
153 | display: block;
154 | max-width: 100%; }
155 |
156 | #footer img {
157 | display: inline; }
158 |
159 | br, strong br, b br, em br, i br {
160 | line-height: 100%; }
161 |
162 | h1, h2, h3, h4, h5, h6 {
163 | font-family: Helvetica Neue, Helvetica, Arial, Helvetica, serif;
164 | font-weight: 300;
165 | line-height: 130% !important;
166 | -webkit-font-smoothing: antialiased;
167 | color: #333;
168 | text-align: left;
169 | margin: 0; }
170 |
171 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
172 | color: blue !important; }
173 |
174 | h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
175 | color: red !important; }
176 |
177 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
178 | h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
179 | color: purple !important; }
180 |
181 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
182 | table td, table tr {
183 | border-collapse: collapse; }
184 |
185 | .yshortcuts {
186 | color: black;
187 | text-decoration: none !important;
188 | border-bottom: none !important;
189 | background: none !important; }
190 |
191 | .yshortcuts a {
192 | color: black;
193 | text-decoration: none !important;
194 | border-bottom: none !important;
195 | background: none !important; }
196 |
197 | .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
198 | color: black;
199 | text-decoration: none !important;
200 | border-bottom: none !important;
201 | background: none !important; }
202 |
203 | /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
204 | #background-table {
205 | background-color: #F7F7F7; }
206 |
207 | /* Webkit Elements */
208 | #top-bar {
209 | border-radius: 6px 6px 0px 0px;
210 | -moz-border-radius: 6px 6px 0px 0px;
211 | -webkit-border-radius: 6px 6px 0px 0px;
212 | -webkit-font-smoothing: antialiased;
213 | background: url("bg2.png");
214 | background-color: #ffffff;
215 | color: #7d7b7d; }
216 |
217 | #top-bar a {
218 | font-weight: normal;
219 | color: #7D7B7D;
220 | text-decoration: none; }
221 |
222 | #footer {
223 | border-radius: 0px 0px 6px 6px;
224 | -moz-border-radius: 0px 0px 6px 6px;
225 | -webkit-border-radius: 0px 0px 6px 6px;
226 | -webkit-font-smoothing: antialiased; }
227 |
228 | /* Fonts and Content */
229 | body {
230 | font-family: Helvetica Neue, Helvetica, Arial, Helvetica, serif; }
231 |
232 | body p {
233 | font-weight: 400; }
234 |
235 | strong {
236 | font-weight: 600; }
237 |
238 | .header-content, .footer-content-left, .footer-content-right {
239 | -webkit-text-size-adjust: none;
240 | -ms-text-size-adjust: none; }
241 |
242 | /* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
243 | .header-content {
244 | font-size: 12px;
245 | color: #7d7b7d; }
246 |
247 | .header-content a {
248 | font-weight: bold;
249 | color: #eeeeee;
250 | text-decoration: none; }
251 |
252 | #headline p {
253 | color: #eeeeee;
254 | font-family: Helvetica Neue, Helvetica, Arial, Helvetica, serif;
255 | font-size: 36px;
256 | text-align: left;
257 | margin-top: 0px;
258 | margin-bottom: 30px; }
259 |
260 | #headline p a {
261 | color: #eeeeee;
262 | text-decoration: none; }
263 |
264 | .article-title {
265 | font-size: 14px;
266 | color: #ffffff;
267 | font-weight: normal;
268 | margin-top: 0px;
269 | margin-bottom: 0px;
270 | background: #f26728;
271 | display: block;
272 | padding: 0px 5px 0px 10px;
273 | text-transform: uppercase;
274 | letter-spacing: .071em;
275 | line-height: 22px;
276 | height: 22px; }
277 |
278 | .article-title a {
279 | color: #f26728;
280 | text-decoration: none; }
281 |
282 | .article-content {
283 | font-size: 14px;
284 | line-height: 20px;
285 | color: #5e5b5b;
286 | margin-top: 0px;
287 | margin-bottom: 0px; }
288 |
289 | .article-content a {
290 | color: #f26728;
291 | font-weight: bold;
292 | text-decoration: none;
293 | font-weight: 600; }
294 |
295 | .article-content a:hover {
296 | text-decoration: underline; }
297 |
298 | .article-content ol, .article-content ul {
299 | margin-top: 0px;
300 | margin-bottom: 18px;
301 | margin-left: 19px;
302 | padding: 0; }
303 |
304 | .article-content li {
305 | font-size: 13px;
306 | line-height: 20px;
307 | color: #444444; }
308 |
309 | .article-content li a {
310 | color: #f26728;
311 | text-decoration: underline; }
312 |
313 | .article-content p {
314 | margin-top: 0;
315 | padding-top: 0; }
316 |
317 | .footer-content-left {
318 | font-size: 12px;
319 | line-height: 15px;
320 | color: #8f8f8f;
321 | margin-top: 15px;
322 | margin-bottom: 15px; }
323 |
324 | .footer-content-left a {
325 | color: #8F8F8F;
326 | font-weight: bold;
327 | text-decoration: none; }
328 |
329 | .footer-content-right {
330 | font-size: 11px;
331 | color: #8f8f8f;
332 | margin-top: 0px; }
333 |
334 | .footer-content-right a {
335 | color: #8F8F8F;
336 | font-weight: bold;
337 | text-decoration: none; }
338 |
339 | #footer {
340 | background-color: #ffffff;
341 | color: #8f8f8f; }
342 |
343 | #footer a {
344 | color: #8F8F8F;
345 | text-decoration: none;
346 | font-weight: bold; }
347 |
348 | #permission-reminder {
349 | white-space: pre-wrap;
350 | font-weight: 400; }
351 |
352 | #street-address {
353 | color: #ffffff;
354 | white-space: pre-wrap; }
355 |
356 | /*# sourceMappingURL=ark.css.map */
357 |
--------------------------------------------------------------------------------
/src/styles/scss/sunny.scss:
--------------------------------------------------------------------------------
1 | $fontFamily: Helvetica Neue, Helvetica, Arial, Helvetica, serif;
2 |
3 | /* Mobile-specific Styles */
4 | @media only screen and (max-device-width: 480px) {
5 | //@media only screen and (max-width: 5480px) {
6 | table[class=w0], td[class=w0] {
7 | width: 0 !important; }
8 |
9 | table[class=w10], td[class=w10], img[class=w10] {
10 | width: 10px !important; }
11 |
12 | table[class=w15], td[class=w15], img[class=w15] {
13 | width: 5px !important; }
14 |
15 | table[class=w30], td[class=w30], img[class=w30], table[class=w50], td[class=w50], img[class=w50], table[class=w60], td[class=w60], img[class=w60] {
16 | width: 10px !important; }
17 |
18 | table[class=w125], td[class=w125], img[class=w125] {
19 | width: 80px !important; }
20 |
21 | table[class=w130], td[class=w130], img[class=w130] {
22 | width: 55px !important; }
23 |
24 | table[class=w140], td[class=w140], img[class=w140] {
25 | width: 90px !important; }
26 |
27 | table[class=w160], td[class=w160], img[class=w160] {
28 | width: 180px !important; }
29 |
30 | table[class=w170], td[class=w170], img[class=w170] {
31 | width: 100px !important; }
32 |
33 | table[class=w180], td[class=w180], img[class=w180], table[class=w195], td[class=w195], img[class=w195], table[class=w220], td[class=w220], img[class=w220] {
34 | width: 80px !important; }
35 |
36 | table[class=w240], td[class=w240], img[class=w240] {
37 | width: 180px !important; }
38 |
39 | table[class=w255], td[class=w255], img[class=w255] {
40 | width: 185px !important; }
41 |
42 | table[class=w275], td[class=w275], img[class=w275], table[class=w280], td[class=w280], img[class=w280] {
43 | width: 135px !important; }
44 |
45 | table[class=w300], td[class=w300], img[class=w300] {
46 | width: 140px !important; }
47 |
48 | table[class=w325], td[class=w325], img[class=w325] {
49 | width: 95px !important; }
50 |
51 | table[class=w360], td[class=w360], img[class=w360] {
52 | width: 140px !important; }
53 |
54 | table[class=w410], td[class=w410], img[class=w410] {
55 | width: 180px !important; }
56 |
57 | table[class=w470], td[class=w470], img[class=w470] {
58 | width: 200px !important; }
59 |
60 | table[class=w560], td[class=w560], img[class=w560], table[class=w580], td[class=w580], img[class=w580] {
61 | width: 280px !important; }
62 |
63 | table[class=w640], td[class=w640], img[class=w640] {
64 | width: 300px !important; }
65 |
66 | .mobile_only {
67 | display: block !important;
68 | max-height: none !important;
69 | font-size: 12px !important;
70 |
71 | &.mobile-logo {
72 | max-width: 80%;
73 | max-height: 60px !important;
74 | }
75 | }
76 |
77 | .large_only {
78 | display: none !important; }
79 |
80 | #superheading {
81 | width: 560px !important; }
82 |
83 | #logo {
84 | display: none !important; }
85 | #logo img {
86 | padding-bottom: 20px; }
87 |
88 | table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide {
89 | display: none !important; }
90 |
91 | #customHeaderImageArea {
92 | text-align: center !important; }
93 |
94 | #toppbild, #mellanbild {
95 | height: auto; }
96 |
97 | table[class=h0], td[class=h0] {
98 | height: 0 !important; }
99 |
100 | p[class=footer-content-left] {
101 | text-align: left !important; }
102 |
103 | #headline p {
104 | font-size: 30px !important;
105 | }
106 |
107 | }
108 | @media all and (min-device-pixel-ratio: 1.5) {
109 | #background-table, body {
110 | background: url("/images/bg_2x.png") !important;
111 | background-size: 106px 142px !important; } }
112 | #superheading {
113 | width: 360px;
114 | font-size: 26px; }
115 | #superheading font {
116 | font-size: 26px;
117 | color: #333;
118 | text-align: left; }
119 | #superheading h1 {
120 | margin: 0;
121 | padding: 0; }
122 |
123 | #logo {
124 | text-align: center;
125 | width: 195px; }
126 |
127 | .mobile_only {
128 | display: none;
129 | max-height: 0px;
130 | font-size: 0; }
131 |
132 | .large_only {
133 | display: block; }
134 |
135 | /* Client-specific Styles */
136 | #outlook a {
137 | padding: 0; }
138 |
139 | /* Force Outlook to provide a "view in browser" button. */
140 | body {
141 | width: 100% !important; }
142 |
143 | .ReadMsgBody {
144 | width: 100%; }
145 |
146 | .ExternalClass {
147 | width: 100%;
148 | display: block !important; }
149 |
150 | /* Force Hotmail to display emails at full width */
151 | /* Reset Styles */
152 | /* Add 100px so mobile switch bar doesn't cover street address. */
153 | html, body {
154 | background-color: #f4f4f2;
155 | margin: 0;
156 | padding: 0; }
157 |
158 | img {
159 | /*height: auto;*/
160 | line-height: 100%;
161 | outline: none;
162 | text-decoration: none;
163 | display: block;
164 | max-width: 100%; }
165 |
166 | #footer img {
167 | display: inline; }
168 |
169 | br, strong br, b br, em br, i br {
170 | line-height: 100%; }
171 |
172 | h1, h2, h3, h4, h5, h6 {
173 | font-family: $fontFamily;
174 | font-weight: 300;
175 | line-height: 130% !important;
176 | -webkit-font-smoothing: antialiased;
177 | color: #333;
178 | text-align: left;
179 | margin: 0;
180 | }
181 |
182 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
183 | color: blue !important; }
184 |
185 | h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
186 | color: red !important; }
187 |
188 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
189 | h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
190 | color: purple !important; }
191 |
192 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
193 | table td, table tr {
194 | border-collapse: collapse; }
195 |
196 | .yshortcuts {
197 | color: black;
198 | text-decoration: none !important;
199 | border-bottom: none !important;
200 | background: none !important; }
201 | .yshortcuts a {
202 | color: black;
203 | text-decoration: none !important;
204 | border-bottom: none !important;
205 | background: none !important; }
206 | .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
207 | color: black;
208 | text-decoration: none !important;
209 | border-bottom: none !important;
210 | background: none !important; }
211 |
212 | /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
213 | #background-table {
214 | background-color: #f4f4f2; }
215 |
216 | /* Webkit Elements */
217 | #top-bar {
218 | border-radius: 6px 6px 0px 0px;
219 | -moz-border-radius: 6px 6px 0px 0px;
220 | -webkit-border-radius: 6px 6px 0px 0px;
221 | -webkit-font-smoothing: antialiased;
222 | background: url("bg2.png");
223 | background-color: #ffffff;
224 | color: #7d7b7d; }
225 | #top-bar a {
226 | font-weight: normal;
227 | color: #7D7B7D;
228 | text-decoration: none; }
229 |
230 | #footer {
231 | border-radius: 0px 0px 6px 6px;
232 | -moz-border-radius: 0px 0px 6px 6px;
233 | -webkit-border-radius: 0px 0px 6px 6px;
234 | -webkit-font-smoothing: antialiased; }
235 |
236 | /* Fonts and Content */
237 | body {
238 | font-family: $fontFamily
239 | }
240 | body p {
241 | font-weight: 400; }
242 |
243 | strong {
244 | font-weight: 600; }
245 |
246 | .header-content, .footer-content-left, .footer-content-right {
247 | -webkit-text-size-adjust: none;
248 | -ms-text-size-adjust: none; }
249 |
250 | /* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
251 | .header-content {
252 | font-size: 12px;
253 | color: #7d7b7d; }
254 | .header-content a {
255 | font-weight: bold;
256 | color: #eeeeee;
257 | text-decoration: none; }
258 |
259 | #headline p {
260 | color: #eeeeee;
261 | font-family: $fontFamily;
262 | font-size: 36px;
263 | text-align: left;
264 | margin-top: 0px;
265 | margin-bottom: 30px; }
266 | #headline p a {
267 | color: #eeeeee;
268 | text-decoration: none; }
269 |
270 | .article-title {
271 | font-size: 14px;
272 | color: #ffffff;
273 | font-weight: normal;
274 | margin-top: 0px;
275 | margin-bottom: 0px;
276 | background: #f26728;
277 | display: block;
278 | padding: 0px 5px 0px 10px;
279 | text-transform: uppercase;
280 | letter-spacing: .071em;
281 | line-height: 22px;
282 | height: 22px; }
283 | .article-title a {
284 | color: #f26728;
285 | text-decoration: none; }
286 |
287 | .article-content {
288 | font-size: 14px;
289 | line-height: 20px;
290 | color: #5e5b5b;
291 | margin-top: 0px;
292 | margin-bottom: 0px;
293 | }
294 | .article-content a {
295 | color: #f26728;
296 | font-weight: bold;
297 | text-decoration: none;
298 | font-weight: 600; }
299 | .article-content a:hover {
300 | text-decoration: underline; }
301 | .article-content ol, .article-content ul {
302 | margin-top: 0px;
303 | margin-bottom: 18px;
304 | margin-left: 19px;
305 | padding: 0; }
306 | .article-content li {
307 | font-size: 13px;
308 | line-height: 20px;
309 | color: #444444; }
310 | .article-content li a {
311 | color: #f26728;
312 | text-decoration: underline; }
313 | .article-content p {
314 | margin-top: 0;
315 | padding-top: 0; }
316 |
317 | .footer-content-left {
318 | font-size: 12px;
319 | line-height: 15px;
320 | color: #8f8f8f;
321 | margin-top: 15px;
322 | margin-bottom: 15px; }
323 | .footer-content-left a {
324 | color: #8F8F8F;
325 | font-weight: bold;
326 | text-decoration: none; }
327 |
328 | .footer-content-right {
329 | font-size: 11px;
330 | color: #8f8f8f;
331 | margin-top: 0px; }
332 | .footer-content-right a {
333 | color: #8F8F8F;
334 | font-weight: bold;
335 | text-decoration: none; }
336 |
337 | #footer a {
338 | color: #8F8F8F;
339 | text-decoration: none;
340 | font-weight: bold; }
341 |
342 | #permission-reminder {
343 | white-space: pre-wrap;
344 | font-weight: 400; }
345 |
346 | #street-address {
347 | color: #ffffff;
348 | white-space: pre-wrap; }
349 |
350 |
351 | //Ny style
352 |
353 |
354 | #header {
355 | background-color: #f4f4f2;
356 |
357 | #logo {
358 | img {
359 | margin-left: auto;
360 | margin-right: auto;
361 | }
362 | }
363 | }
364 |
365 | .article-content {
366 | color: #202020;
367 |
368 | h1 {
369 | text-align: center;
370 | }
371 |
372 | p {
373 | line-height: 23px;
374 | letter-spacing: 0.4px;
375 |
376 | &.text-center {
377 | text-align: center;
378 | }
379 | }
380 | }
381 |
382 | .button-content {
383 | .button {
384 | letter-spacing: 0.08em;
385 | border-radius: 3px;
386 | text-transform: uppercase;
387 | font-size: 18px;
388 | cursor: pointer;
389 | padding: 15px 26px;
390 | font-weight: 400;
391 | font-size: 14px;
392 | text-align: center;
393 | margin-top: 20px;
394 | margin-bottom: 10px;
395 | transition: all 0.15s ease-in-out;
396 | background: #ff7b3a;
397 | color: #fff;
398 | border: none;
399 | text-decoration: none;
400 | }
401 | }
402 |
403 | .panel {
404 | border-collapse: collapse;
405 | font-size: 14px;
406 | color: #202020;
407 |
408 | thead {
409 | border-left: 15px solid #ececec;
410 | border-right: 15px solid #ececec;
411 | }
412 |
413 | tbody {
414 | border-left: 15px solid #fff;
415 | border-right: 15px solid #fff;
416 |
417 | td.vat {
418 | color: #707070;
419 | }
420 | }
421 |
422 | .divider-line {
423 | border-top: 1px solid #202020;
424 | }
425 |
426 | .label-style {
427 | font-size: 10px;
428 | text-transform: uppercase;
429 | margin-right: 10px;
430 | }
431 | }
432 |
433 | #footer {
434 | p {
435 | font-size: 13px;
436 | color: #595959;
437 | line-height: 19px;
438 | }
439 | }
440 |
--------------------------------------------------------------------------------
/src/styles/css/sunny.css:
--------------------------------------------------------------------------------
1 | /* Mobile-specific Styles */
2 | @media only screen and (max-device-width: 480px) {
3 | table[class=w0], td[class=w0] {
4 | width: 0 !important; }
5 |
6 | table[class=w10], td[class=w10], img[class=w10] {
7 | width: 10px !important; }
8 |
9 | table[class=w15], td[class=w15], img[class=w15] {
10 | width: 5px !important; }
11 |
12 | table[class=w30], td[class=w30], img[class=w30], table[class=w50], td[class=w50], img[class=w50], table[class=w60], td[class=w60], img[class=w60] {
13 | width: 10px !important; }
14 |
15 | table[class=w125], td[class=w125], img[class=w125] {
16 | width: 80px !important; }
17 |
18 | table[class=w130], td[class=w130], img[class=w130] {
19 | width: 55px !important; }
20 |
21 | table[class=w140], td[class=w140], img[class=w140] {
22 | width: 90px !important; }
23 |
24 | table[class=w160], td[class=w160], img[class=w160] {
25 | width: 180px !important; }
26 |
27 | table[class=w170], td[class=w170], img[class=w170] {
28 | width: 100px !important; }
29 |
30 | table[class=w180], td[class=w180], img[class=w180], table[class=w195], td[class=w195], img[class=w195], table[class=w220], td[class=w220], img[class=w220] {
31 | width: 80px !important; }
32 |
33 | table[class=w240], td[class=w240], img[class=w240] {
34 | width: 180px !important; }
35 |
36 | table[class=w255], td[class=w255], img[class=w255] {
37 | width: 185px !important; }
38 |
39 | table[class=w275], td[class=w275], img[class=w275], table[class=w280], td[class=w280], img[class=w280] {
40 | width: 135px !important; }
41 |
42 | table[class=w300], td[class=w300], img[class=w300] {
43 | width: 140px !important; }
44 |
45 | table[class=w325], td[class=w325], img[class=w325] {
46 | width: 95px !important; }
47 |
48 | table[class=w360], td[class=w360], img[class=w360] {
49 | width: 140px !important; }
50 |
51 | table[class=w410], td[class=w410], img[class=w410] {
52 | width: 180px !important; }
53 |
54 | table[class=w470], td[class=w470], img[class=w470] {
55 | width: 200px !important; }
56 |
57 | table[class=w560], td[class=w560], img[class=w560], table[class=w580], td[class=w580], img[class=w580] {
58 | width: 280px !important; }
59 |
60 | table[class=w640], td[class=w640], img[class=w640] {
61 | width: 300px !important; }
62 |
63 | .mobile_only {
64 | display: block !important;
65 | max-height: none !important;
66 | font-size: 12px !important; }
67 | .mobile_only.mobile-logo {
68 | max-width: 80%;
69 | max-height: 60px !important; }
70 |
71 | .large_only {
72 | display: none !important; }
73 |
74 | #superheading {
75 | width: 560px !important; }
76 |
77 | #logo {
78 | display: none !important; }
79 |
80 | #logo img {
81 | padding-bottom: 20px; }
82 |
83 | table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide {
84 | display: none !important; }
85 |
86 | #customHeaderImageArea {
87 | text-align: center !important; }
88 |
89 | #toppbild, #mellanbild {
90 | height: auto; }
91 |
92 | table[class=h0], td[class=h0] {
93 | height: 0 !important; }
94 |
95 | p[class=footer-content-left] {
96 | text-align: left !important; }
97 |
98 | #headline p {
99 | font-size: 30px !important; } }
100 | @media all and (min-device-pixel-ratio: 1.5) {
101 | #background-table, body {
102 | background: url("/images/bg_2x.png") !important;
103 | background-size: 106px 142px !important; } }
104 | #superheading {
105 | width: 360px;
106 | font-size: 26px; }
107 |
108 | #superheading font {
109 | font-size: 26px;
110 | color: #333;
111 | text-align: left; }
112 |
113 | #superheading h1 {
114 | margin: 0;
115 | padding: 0; }
116 |
117 | #logo {
118 | text-align: center;
119 | width: 195px; }
120 |
121 | .mobile_only {
122 | display: none;
123 | max-height: 0px;
124 | font-size: 0; }
125 |
126 | .large_only {
127 | display: block; }
128 |
129 | /* Client-specific Styles */
130 | #outlook a {
131 | padding: 0; }
132 |
133 | /* Force Outlook to provide a "view in browser" button. */
134 | body {
135 | width: 100% !important; }
136 |
137 | .ReadMsgBody {
138 | width: 100%; }
139 |
140 | .ExternalClass {
141 | width: 100%;
142 | display: block !important; }
143 |
144 | /* Force Hotmail to display emails at full width */
145 | /* Reset Styles */
146 | /* Add 100px so mobile switch bar doesn't cover street address. */
147 | html, body {
148 | background-color: #f4f4f2;
149 | margin: 0;
150 | padding: 0; }
151 |
152 | img {
153 | /*height: auto;*/
154 | line-height: 100%;
155 | outline: none;
156 | text-decoration: none;
157 | display: block;
158 | max-width: 100%; }
159 |
160 | #footer img {
161 | display: inline; }
162 |
163 | br, strong br, b br, em br, i br {
164 | line-height: 100%; }
165 |
166 | h1, h2, h3, h4, h5, h6 {
167 | font-family: Helvetica Neue, Helvetica, Arial, Helvetica, serif;
168 | font-weight: 300;
169 | line-height: 130% !important;
170 | -webkit-font-smoothing: antialiased;
171 | color: #333;
172 | text-align: left;
173 | margin: 0; }
174 |
175 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
176 | color: blue !important; }
177 |
178 | h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
179 | color: red !important; }
180 |
181 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
182 | h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
183 | color: purple !important; }
184 |
185 | /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
186 | table td, table tr {
187 | border-collapse: collapse; }
188 |
189 | .yshortcuts {
190 | color: black;
191 | text-decoration: none !important;
192 | border-bottom: none !important;
193 | background: none !important; }
194 |
195 | .yshortcuts a {
196 | color: black;
197 | text-decoration: none !important;
198 | border-bottom: none !important;
199 | background: none !important; }
200 |
201 | .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
202 | color: black;
203 | text-decoration: none !important;
204 | border-bottom: none !important;
205 | background: none !important; }
206 |
207 | /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
208 | #background-table {
209 | background-color: #f4f4f2; }
210 |
211 | /* Webkit Elements */
212 | #top-bar {
213 | border-radius: 6px 6px 0px 0px;
214 | -moz-border-radius: 6px 6px 0px 0px;
215 | -webkit-border-radius: 6px 6px 0px 0px;
216 | -webkit-font-smoothing: antialiased;
217 | background: url("bg2.png");
218 | background-color: #ffffff;
219 | color: #7d7b7d; }
220 |
221 | #top-bar a {
222 | font-weight: normal;
223 | color: #7D7B7D;
224 | text-decoration: none; }
225 |
226 | #footer {
227 | border-radius: 0px 0px 6px 6px;
228 | -moz-border-radius: 0px 0px 6px 6px;
229 | -webkit-border-radius: 0px 0px 6px 6px;
230 | -webkit-font-smoothing: antialiased; }
231 |
232 | /* Fonts and Content */
233 | body {
234 | font-family: Helvetica Neue, Helvetica, Arial, Helvetica, serif; }
235 |
236 | body p {
237 | font-weight: 400; }
238 |
239 | strong {
240 | font-weight: 600; }
241 |
242 | .header-content, .footer-content-left, .footer-content-right {
243 | -webkit-text-size-adjust: none;
244 | -ms-text-size-adjust: none; }
245 |
246 | /* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
247 | .header-content {
248 | font-size: 12px;
249 | color: #7d7b7d; }
250 |
251 | .header-content a {
252 | font-weight: bold;
253 | color: #eeeeee;
254 | text-decoration: none; }
255 |
256 | #headline p {
257 | color: #eeeeee;
258 | font-family: Helvetica Neue, Helvetica, Arial, Helvetica, serif;
259 | font-size: 36px;
260 | text-align: left;
261 | margin-top: 0px;
262 | margin-bottom: 30px; }
263 |
264 | #headline p a {
265 | color: #eeeeee;
266 | text-decoration: none; }
267 |
268 | .article-title {
269 | font-size: 14px;
270 | color: #ffffff;
271 | font-weight: normal;
272 | margin-top: 0px;
273 | margin-bottom: 0px;
274 | background: #f26728;
275 | display: block;
276 | padding: 0px 5px 0px 10px;
277 | text-transform: uppercase;
278 | letter-spacing: .071em;
279 | line-height: 22px;
280 | height: 22px; }
281 |
282 | .article-title a {
283 | color: #f26728;
284 | text-decoration: none; }
285 |
286 | .article-content {
287 | font-size: 14px;
288 | line-height: 20px;
289 | color: #5e5b5b;
290 | margin-top: 0px;
291 | margin-bottom: 0px; }
292 |
293 | .article-content a {
294 | color: #f26728;
295 | font-weight: bold;
296 | text-decoration: none;
297 | font-weight: 600; }
298 |
299 | .article-content a:hover {
300 | text-decoration: underline; }
301 |
302 | .article-content ol, .article-content ul {
303 | margin-top: 0px;
304 | margin-bottom: 18px;
305 | margin-left: 19px;
306 | padding: 0; }
307 |
308 | .article-content li {
309 | font-size: 13px;
310 | line-height: 20px;
311 | color: #444444; }
312 |
313 | .article-content li a {
314 | color: #f26728;
315 | text-decoration: underline; }
316 |
317 | .article-content p {
318 | margin-top: 0;
319 | padding-top: 0; }
320 |
321 | .footer-content-left {
322 | font-size: 12px;
323 | line-height: 15px;
324 | color: #8f8f8f;
325 | margin-top: 15px;
326 | margin-bottom: 15px; }
327 |
328 | .footer-content-left a {
329 | color: #8F8F8F;
330 | font-weight: bold;
331 | text-decoration: none; }
332 |
333 | .footer-content-right {
334 | font-size: 11px;
335 | color: #8f8f8f;
336 | margin-top: 0px; }
337 |
338 | .footer-content-right a {
339 | color: #8F8F8F;
340 | font-weight: bold;
341 | text-decoration: none; }
342 |
343 | #footer a {
344 | color: #8F8F8F;
345 | text-decoration: none;
346 | font-weight: bold; }
347 |
348 | #permission-reminder {
349 | white-space: pre-wrap;
350 | font-weight: 400; }
351 |
352 | #street-address {
353 | color: #ffffff;
354 | white-space: pre-wrap; }
355 |
356 | #header {
357 | background-color: #f4f4f2; }
358 | #header #logo img {
359 | margin-left: auto;
360 | margin-right: auto; }
361 |
362 | .article-content {
363 | color: #202020; }
364 | .article-content h1 {
365 | text-align: center; }
366 | .article-content p {
367 | line-height: 23px;
368 | letter-spacing: 0.4px; }
369 | .article-content p.text-center {
370 | text-align: center; }
371 |
372 | .button-content .button {
373 | letter-spacing: 0.08em;
374 | border-radius: 3px;
375 | text-transform: uppercase;
376 | font-size: 18px;
377 | cursor: pointer;
378 | padding: 15px 26px;
379 | font-weight: 400;
380 | font-size: 14px;
381 | text-align: center;
382 | margin-top: 20px;
383 | margin-bottom: 10px;
384 | transition: all 0.15s ease-in-out;
385 | background: #ff7b3a;
386 | color: #fff;
387 | border: none;
388 | text-decoration: none; }
389 |
390 | .panel {
391 | border-collapse: collapse;
392 | font-size: 14px;
393 | color: #202020; }
394 | .panel thead {
395 | border-left: 15px solid #ececec;
396 | border-right: 15px solid #ececec; }
397 | .panel tbody {
398 | border-left: 15px solid #fff;
399 | border-right: 15px solid #fff; }
400 | .panel tbody td.vat {
401 | color: #707070; }
402 | .panel .divider-line {
403 | border-top: 1px solid #202020; }
404 | .panel .label-style {
405 | font-size: 10px;
406 | text-transform: uppercase;
407 | margin-right: 10px; }
408 |
409 | #footer p {
410 | font-size: 13px;
411 | color: #595959;
412 | line-height: 19px; }
413 |
414 | /*# sourceMappingURL=sunny.css.map */
415 |
--------------------------------------------------------------------------------
| | | | | | | | | | |
 }}/vendor/beautymail/assets/images/widgets/flickr.gif){kind=small}
 }}/vendor/beautymail/assets/images/widgets/twitter.gif){kind=small}
 }}/vendor/beautymail/assets/images/widgets/facebook.gif){kind=small}