/skin/frontend/rwd/default/scss/email-inline.scss
Sass | 679 lines | 570 code | 37 blank | 72 comment | 0 complexity | b1af26ef7e81deb5dd15986407fde7d9 MD5 | raw file
1//
2// Magento
3//
4// NOTICE OF LICENSE
5//
6// This source file is subject to the Academic Free License (AFL 3.0)
7// that is bundled with this package in the file LICENSE_AFL.txt.
8// It is also available through the world-wide-web at this URL:
9// http://opensource.org/licenses/afl-3.0.php
10// If you did not receive a copy of the license and are unable to
11// obtain it through the world-wide-web, please send an email
12// to license@magento.com so we can send you a copy immediately.
13//
14// DISCLAIMER
15//
16// Do not edit or add to this file if you wish to upgrade Magento to newer
17// versions in the future. If you wish to customize Magento for your
18// needs please refer to http://www.magento.com for more information.
19//
20// @category design
21// @package rwd_default
22// @copyright Copyright (c) 2006-2016 X.commerce, Inc. and affiliates (http://www.magento.com)
23// @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
24//
25
26// ==============================================
27// Styles for transactional emails that will be applied to the HTML markup via an "inlining" process when emails are
28// sent. Inlining CSS is the most reliable way to get styles to apply uniformly across all email clients.
29//
30// Refer to the Emogrifier README to see what selectors are supported: https://github.com/jjriv/emogrifier#emogrifier
31//
32// Since the styles in this file are being applied to the HTML markup using an inlining library, Sass nesting was not
33// used in order to keep the CSS selectors simple.
34// ==============================================
35
36@import "framework";
37
38/* ============================================ *
39 * General Styles
40 * ============================================ */
41
42body, table.body, th, h1, h2, h3, h4, h5, h6, td, p, strong {
43 font-family: Verdana, Arial;
44 font-weight: normal;
45}
46
47body {
48 margin: 0;
49 padding: 0;
50 text-align: left;
51 color: $c-gray;
52 background-color: $c-email-background;
53}
54// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
55body {
56 -webkit-text-size-adjust: 100%;
57 -ms-text-size-adjust: 100%;
58}
59// Remove spacing from around tables in Outlook 2007 and 2010
60table {
61 mso-table-lspace: 0pt;
62 mso-table-rspace: 0pt;
63}
64// CSS Property to properly resize images in IE
65img {
66 -ms-interpolation-mode: bicubic;
67}
68body {
69 background: $c-email-background;
70 font-size: 12px;
71 margin: 0;
72 padding: 0;
73}
74table,
75table td {
76 border-collapse: collapse;
77}
78table td {
79 vertical-align: top;
80}
81a {
82 color: $c-email-action;
83}
84.cell-content.product-info,
85.bundle-item,
86.bundle-item-parent.product-info,
87.bill-ship-to,
88.method-information {
89 text-align: left;
90}
91html,
92#background-table {
93 background-color: $c-email-background;
94}
95#background-table {
96 font-size: $f-size-xs;
97 margin: 0 auto;
98 padding: 0;
99}
100.container-td {
101 width: 100%;
102}
103.container-table {
104 width: 600px;
105 margin: 0 auto;
106}
107
108/* ============================================ *
109 * Header Styles
110 * ============================================ */
111
112.top-content {
113 border: 1px solid $c-email-background;
114 background: #FFF;
115 padding: 5px;
116}
117table.logo-container {
118 width: 100%;
119}
120td.logo {
121 padding: 15px 0px 10px 5px;
122}
123td.logo a {
124 float: left;
125 display: block;
126}
127td.logo img {
128 outline: none;
129 text-decoration: none;
130}
131td.email-heading {
132 padding: 0 1%;
133 background: $c-email-background-secondary;
134 border-right: 1px dashed $c-email-border;
135 text-align: center;
136 width: 58%;
137}
138td.email-heading h1 {
139 font-weight: 700;
140 font-size: 16px;
141 margin: 1em 0;
142 line-height: 20px;
143 text-transform: uppercase;
144}
145td.email-heading p {
146 line-height: 20px;
147 margin: 1em 0;
148}
149td.store-info {
150 padding: 2%;
151 background: $c-email-background-secondary;
152 width: 40%;
153}
154td.store-info h4 {
155 margin-bottom: 5px;
156 font-size: $f-size-xxs;
157}
158td.store-info p {
159 font-size: $f-size-xxs;
160 line-height: 17px;
161 margin: 1em 0;
162}
163td.store-info a {
164 text-decoration: underline;
165 color: $c-email-action;
166}
167
168/* ============================================ *
169 * Content - Styles
170 * ============================================ */
171
172td.order-details {
173 padding: 5px 15px;
174 text-align: center;
175}
176td.order-details h3 {
177 font-size: 17px;
178 margin-bottom: 10px;
179 margin-top: 15px;
180 font-weight: normal;
181}
182td.order-details p {
183 font-size: $f-size-xxs;
184 margin: 1em 0 15px;
185}
186.items {
187 width: 100%;
188 padding: 10px 15px;
189}
190.cell-name {
191 padding: 10px 15px;
192 background: $c-email-cell;
193 font-weight: 700;
194 text-transform: uppercase;
195 text-align: left;
196 font-size: $f-size-xxs;
197}
198.cell-name.align-center {
199 text-align: center;
200}
201.cell-name.align-right {
202 text-align: right;
203}
204.method-info,
205.method-info h6,
206.method-info p,
207.method-info strong {
208 text-align: left;
209}
210.cell-content {
211 padding: 10px 15px;
212 border-top: 1px solid $c-email-background;
213 font-family: Verdana, Arial;
214}
215.product-info a.product-name {
216 font-weight: 700;
217 text-transform: uppercase;
218 color: $c-email-action;
219 text-decoration: none;
220 vertical-align: middle;
221 float: left;
222 width: 100%;
223 display: block;
224}
225.table-totals {
226 width: 100%;
227 background: $c-email-background-secondary;
228}
229.padding-totals {
230 padding: 20px 15px;
231 text-align: right;
232 line-height: 20px;
233}
234.padding-totals .last {
235 width: 1px; // Constrain the width of the right column so that prices are displayed close to labels
236 white-space: nowrap;
237}
238.table-totals table {
239 width: 100%;
240}
241.shipping {
242 padding-bottom: 5px;
243}
244.grand-total {
245 border-top: 1px solid $c-email-border;
246 padding-top: 5px;
247 font-weight: 700;
248 font-size: 15px;
249}
250.shipping-information td {
251 padding: 0 15px;
252}
253.shipping-information > td > table {
254 width: 100%;
255}
256.address-details {
257 padding-top: 10px;
258}
259.address-details,
260.method-info {
261 text-align: left;
262 padding: 10px 15px 0;
263}
264.address-details h6,
265.method-info h6 {
266 font-size: 12px;
267 font-weight: 700;
268 margin-bottom: 0px;
269 margin-top: 5px;
270 text-transform: uppercase;
271}
272.address-details p {
273 font-size: 12px;
274 line-height: 18px;
275 margin-bottom: 15px;
276 margin-top: 2px;
277}
278.method-info {
279 padding-bottom: 10px;
280}
281.method-info p {
282 font-size: 12px;
283 margin-top: 2px;
284 margin-bottom: 30px;
285 line-height: 18px;
286}
287.closing-text {
288 text-align: center;
289 font-size: 22px;
290 line-height: 32px;
291 font-weight: normal;
292 margin-bottom: 75px;
293 margin-top: 30px;
294}
295.product-info > p,
296.product-info > dl {
297 float: left;
298 width: 100%;
299 display: block;
300}
301.product-info > dl {
302 line-height: 20px;
303}
304.action-content {
305 padding: 10px 20px 15px;
306 line-height: 18px;
307}
308.action-content h1 {
309 font-size: 25px;
310 font-weight: bold;
311 margin-bottom: 25px;
312 margin-top: 5px;
313 line-height: 28px;
314}
315.line-separator {
316 height: 5px;
317}
318.method-info p, .method-info dl {
319 padding: 0;
320}
321
322/* ============================================ *
323 * Comments and Messages - Styles
324 * ============================================ */
325
326// Style comments from users/admins
327.message-container {
328 margin: 15px 0;
329 width: 100%;
330 background-color: $c-email-highlighted-background;
331 border: 1px solid $c-email-highlighted-border;
332}
333.message-container,
334.order-information > td > table,
335.top-content > table {
336 width: 100%;
337}
338.message-container td {
339 padding: 10px 15px;
340 margin: 0;
341}
342// Highlight information like username/password
343.highlighted-text {
344 border: 1px solid $c-email-border;
345 padding: 13px 18px;
346 background: $c-email-cell;
347}
348
349/* ============================================ *
350 * Bundle Products - Styles
351 * ============================================ */
352
353.bundle-item {
354 padding: 0px 15px;
355 text-align: left;
356}
357.bundle-item-parent {
358 border-top: 1px solid $c-email-background;
359 padding: 10px 15px;
360}
361.bundle-item-parent.product-info {
362 text-align: left;
363}
364.bundle-item > div,
365.bundle-item > strong {
366 float: left;
367 width: 100%;
368 display: block;
369}
370.bundle-item.bundle-details > div {
371 margin-bottom: 15px;
372}
373
374/* ============================================ *
375 * Buttons - Styles
376 * ============================================ */
377
378.action-button {
379 width: 220px;
380 margin: 0 auto;
381 text-align: center;
382}
383.action-button td {
384 background-color: $c-email-action;
385 color: #FFF;
386 width: 100%;
387 height: 40px;
388 display: block;
389 border: 0 none;
390 text-align: center;
391 text-transform: uppercase;
392 vertical-align: middle;
393 white-space: nowrap;
394 margin: 0 auto;
395}
396.action-button a {
397 width: 100%;
398 height: 100%;
399 line-height: 40px;
400 font-size: 15px;
401 display: inline-block;
402 text-decoration: none;
403}
404.action-button a span {
405 color: #FFF;
406}
407
408/* ============================================ *
409 * Newsletter - Default Template Styles
410 * ============================================ */
411
412hr {
413 background-color: #D9D9D9;
414 border: medium none;
415 color: #D9D9D9;
416 height: 1px;
417 margin-left: 3%;
418 width: 94%;
419}
420td.email-heading h1 {
421 margin-top: 25px;
422}
423td.store-info h4 {
424 font-size: 12px;
425 margin-top: 13px;
426 font-weight: bold;
427}
428table, table td {
429 padding: 0;
430 margin: 0;
431}
432table.columns.heading {
433 margin-bottom: 3px;
434}
435.main-image {
436 width: 100%;
437 margin-bottom: 3px;
438 margin-top: 5px;
439}
440table.row {
441 padding: 0px;
442 width: 100%;
443 position: relative;
444}
445table.container table.row {
446 display: block;
447 margin: 5px;
448}
449td.wrapper {
450 padding: 10px 0 0;
451 position: relative;
452}
453.full {
454 width: 100%;
455}
456.half {
457 width: 50%;
458}
459.half.left {
460 padding-right: 5px;
461 padding-left: 10px;
462}
463.half.right {
464 padding-left: 5px;
465}
466.columns {
467 width: 100%;
468}
469td.expander {
470 visibility: hidden;
471 width: 0px;
472 padding: 0;
473}
474table.button {
475 width: 100%;
476 overflow: hidden;
477}
478table.button td,
479table.social-button td {
480 display: block;
481 width: auto;
482 text-align: center;
483 color: #FFF;
484 padding: 8px 4%;
485 cursor: pointer;
486}
487.social-button {
488 width: 94% ;
489 margin: 5px 3%;
490}
491table.button td {
492 background: $c-email-action;
493}
494table.social-button td {
495 padding: 5px 4%;
496}
497table.button td a,
498table.social-button td a {
499 color: #FFF;
500 font-size: 16px;
501 text-transform: uppercase;
502 text-decoration: none;
503}
504table.social-button td a {
505 font-size: 12px;
506 font-weight: normal;
507}
508.panel {
509 background-color: #F2F2F2;
510 border: 1px solid #D9D9D9;
511}
512.panel p {
513 margin: 10px;
514}
515.panel h6 {
516 font-size: 20px;
517 margin: 15px 10px;
518}
519.panel a {
520 color: $c-email-action;
521 text-decoration: none;
522}
523.sidebar-links table {
524 width: 100%;
525}
526.sidebar-links td {
527 width: 100%;
528}
529.sidebar-links a {
530 margin: 8px 0;
531 float: left;
532 width: 100%;
533 text-align: left;
534}
535.sidebar-links table p {
536 margin: 0 10px;
537}
538.sidebar-links a span {
539 margin-left: 3%;
540}
541table.facebook td,
542table.twitter td,
543table.google-plus td,
544table.facebook td a,
545table.twitter td a,
546table.google-plus td a {
547 text-align: center;
548 height: 17px;
549}
550table.facebook td {
551 background: #3B5998;
552}
553table.twitter td {
554 background: #00ACEE;
555}
556table.google-plus td {
557 background: #DB4A39;
558}
559
560/* ============================================ *
561 * Product Grid
562 * ============================================ */
563
564h2.products {
565 padding-left: 10px;
566 padding-right: 10px;
567}
568.products-grid > tr > td {
569 width: 25%;
570}
571.products-grid > tr > td img {
572 width: 100%;
573 height: auto;
574}
575.products-grid .product-wrapper {
576 padding-left: 10px;
577 padding-right: 10px;
578}
579.product-name {
580 margin: 0 0 5px 0;
581 color: $c-h2;
582 font-style: normal;
583 text-rendering: optimizeLegibility;
584 text-transform: uppercase;
585 line-height: 1.4;
586 font-size: $f-size;
587}
588p.product-name {
589 font-weight: bold;
590}
591p.sku {
592 margin: 0 0 5px;
593}
594
595/* ============================================ *
596 * Product Grid - Price Styles
597 * The price styles are copied directly from the _common.scss file
598 * ============================================ */
599
600.price-box {
601 margin: $element-spacing 0;
602 font-family: $f-stack-sans;
603}
604
605.price-box p {
606 margin-bottom: 0;
607}
608
609.price-notice {
610 color: $c-text-gray;
611}
612
613.price-box .price {
614 color: $c-text-primary;
615 font-size: $f-size-xl;
616}
617
618.price-box .price,
619.price {
620 font-family: $f-stack-sans;
621}
622
623.price-box .price-label {
624 color: $c-text-gray;
625 white-space: nowrap;
626 font-family: $f-stack-special;
627}
628
629.price-box .minimal-price-link {
630 padding-left: 1em;
631 color: $c-text-primary;
632 display: block; /* We want this to show on its own line, otherwise the layout looks funky */
633
634 .label {
635 color: $c-text-gray;
636 }
637}
638
639/* -------------------------------------------- *
640 * Price Box - Special
641 */
642
643.price-box .old-price,
644.price-box .special-price {
645 display: inline-block;
646
647 .price-label {
648 display: none;
649 }
650
651 .price {
652 display: inline-block;
653 }
654}
655
656.price-box .old-price {
657 .price {
658 color: $c-text-gray;
659 text-decoration: line-through;
660 }
661}
662
663.price-box .special-price {
664 color: $c-text-primary;
665 padding-left: 1em;
666
667 .price-label {
668 color: #D84D3C;
669 }
670}
671
672/* -------------------------------------------- *
673 * Price Box - Taxes
674 */
675
676.price-box .price-excluding-tax,
677.price-box .price-including-tax {
678 display: block;
679}