PageRenderTime 151ms CodeModel.GetById 31ms app.highlight 83ms RepoModel.GetById 1ms app.codeStats 0ms

/skin/frontend/rwd/default/scss/email-inline.scss

https://gitlab.com/vincent.perdereau/picandparts
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}