Merge pull request #153 from SnowdogApps/feature/32702

Add email styles support

.test/.stylelintignore

@@ -0,0 +1,2 @@
+email.css
+email-inline.css

Magento_Bundle/styles/_email-inline.scss

@@ -0,0 +1,31 @@
+//
+//  Bundle Module Styles
+//  ---------------------------------------------
+
+//
+//  Bundle Items
+//  ---------------------------------------------
+
+.email-items {
+    .bundle-option-label {
+        > td {
+            padding: 0 $email-content__padding__base 0 $email-content__padding__l;
+        }
+    }
+
+    .bundle-option-value {
+        > td {
+            padding: 0 $email-content__padding__base $email-content__padding__base;
+
+            &.item-info {
+                padding: 0 $email-content__padding__base $email-content__padding__base $email-content__padding__xl;
+            }
+        }
+    }
+
+    tr.bundle-option-value + tr {
+        > td.item-extra {
+            padding-top: $email-content__padding__base;
+        }
+    }
+}

Magento_Bundle/styles/_email.scss

@@ -0,0 +1,4 @@
+//
+//  Bundle Module Styles
+//  ---------------------------------------------
+// inline styles moved to _email-inline.scss

Magento_Rma/styles/_email-inline.scss

@@ -0,0 +1,3 @@
+//
+//  RMA table styles
+//  _____________________________________________

Magento_Rma/styles/_email.scss

@@ -1,12 +1,13 @@
 //
 //  RMA table styles
 //  _____________________________________________
+// inline styles should be added in _email-inline.scss
 
 @include max-screen($screen__s) {
     //  Shrink table size on small screens to fit as much as possible without requiring horizontal scrolling
     .rma-items td,
     .rma-items th {
-        font-size: $font-size__s !important;
-        padding: 5px !important;
+        font-size: $font-size__s !important; // sass-lint:disable-line no-important
+        padding: 5px !important; // sass-lint:disable-line no-important
     }
 }

Magento_Sales/styles/_email-inline.scss

@@ -0,0 +1,215 @@
+//
+//  Sales Module Styles
+//  _____________________________________________
+
+.email-summary {
+    h1 {
+        margin-bottom: $indent__xs;
+    }
+}
+
+
+//
+//  Order Summary
+//  ----------------------------------------------
+
+.order-details {
+    width: 100%;
+
+    tr {
+        > .address-details,
+        > .method-info {
+            padding: $email-content__padding__base $email-content__padding__base $email-content__padding__base 0;
+            width: 50%;
+
+            h3 {
+                margin-top: 0;
+            }
+        }
+
+        //  Prevent extra spacing on Payment & Shipping Method row
+        & + .method-info {
+            > td {
+                padding: 0 0 $email-content__padding__base;
+            }
+        }
+    }
+
+    .payment-method {
+        margin-bottom: $indent__s;
+
+        .title {
+            font-weight: $font-weight__regular;
+        }
+
+        .data.table {
+            > caption {
+                display: none;
+            }
+
+            th {
+                padding-right: $email-content__padding__base;
+            }
+        }
+    }
+}
+
+//  Remove address and phone number link color on iOS
+.address-details a {
+    // copy instead of using @extend .no-link-a; as we can't access non-inline emails styles like in less version
+    color: $text__color !important; // sass-lint:disable-line no-important
+    cursor: default !important; // sass-lint:disable-line no-important
+    text-decoration: none !important; // sass-lint:disable-line no-important
+}
+
+
+//
+//  Shipment Tracking
+//  ----------------------------------------------
+
+.shipment-track {
+    @include lib-table($table__width, 0);
+
+    thead,
+    tbody {
+        > tr {
+            > th,
+            > td {
+                background-color: $color-gray95;
+                padding: $email-content__padding__base;
+                width: 50%;
+            }
+
+            & + tr {
+                th,
+                td {
+                    padding-top: 0;
+                }
+            }
+        }
+    }
+}
+
+
+//
+//  Items Table
+//  ----------------------------------------------
+
+.email-items {
+    @include lib-table($table__width, 0);
+    border: $table__border-width $table__border-style $table__border-color;
+
+    thead,
+    tfoot {
+        > tr {
+            > th,
+            > td {
+                background-color: $color-gray95;
+            }
+        }
+    }
+
+    > thead,
+    > tbody {
+        > tr {
+            > th {
+                padding: $email-content__padding__base;
+            }
+
+            > td {
+                padding: $email-content__padding__base;
+
+                &.message-gift {
+                    border-top: none;
+                    padding-top: 0;
+                }
+            }
+        }
+    }
+
+    > tbody,
+    > tfoot {
+        > tr {
+            > th,
+            > td {
+                border-top: $table__border-width $table__border-style $table__border-color;
+            }
+
+            & + tr {
+                > th,
+                > td {
+                    border-top: 0;
+                }
+            }
+        }
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+
+    .product-name {
+        font-weight: $font-weight__bold;
+        margin-bottom: $email-content__padding__s;
+    }
+
+    .has-extra .sku {
+        margin-bottom: $email-content__padding__base;
+    }
+
+    .item-info {
+        dl {
+            margin-bottom: 0;
+            padding-left: $email-content__padding__m;
+
+            dt,
+            dd {
+                margin-bottom: 0;
+                padding-bottom: 0;
+            }
+
+            dd {
+                padding-left: $email-content__padding__base;
+            }
+        }
+    }
+
+    .item-qty {
+        text-align: center;
+    }
+
+    .item-price,
+    .item-subtotal {
+        text-align: right;
+    }
+
+    .item-extra {
+        padding-top: 0;
+    }
+
+    .order-totals {
+        > tr {
+            > th {
+                font-weight: $font-weight__regular;
+            }
+
+            > th,
+            > td {
+                padding: $email-content__padding__base;
+                text-align: right;
+            }
+
+            & + tr {
+                th,
+                td {
+                    padding-top: 0;
+                }
+            }
+        }
+
+        .price {
+            white-space: nowrap;
+        }
+    }
+}
+

Magento_Sales/styles/_email.scss

@@ -0,0 +1,35 @@
+//
+//  Sales Module Styles
+//  _____________________________________________
+// inline styles moved to _email-inline.scss
+
+@include max-screen($screen__xs) {
+    //  Shrink order number in order email so it will fit on single line on small screens
+    .email-summary {
+        h1 {
+            // output 24px
+            font-size: ceil(1.7 * $font-size__base) !important; // sass-lint:disable-line no-important
+        }
+    }
+}
+
+//
+//  Order Summary
+//  ----------------------------------------------
+
+@include max-screen($screen__xs) {
+    //  Stack columns
+    .order-details {
+        .address-details,
+        .method-info {
+            display: block;
+            padding: $email-content__padding__base 0 !important; // sass-lint:disable-line no-important
+            width: auto !important; // sass-lint:disable-line no-important
+
+            h3 {
+                margin-bottom: $indent__xs !important; // sass-lint:disable-line no-important
+                margin-top: 0 !important; // sass-lint:disable-line no-important
+            }
+        }
+    }
+}

styles/email-fonts.scss

@@ -0,0 +1,19 @@
+//  Fonts for Emails
+
+@import 'vendor/magento-ui/lib'; // Global lib
+@import 'vendor/magento-ui/variables/email'; // Global email variables
+@import 'variables'; // Local theme variables
+@import 'email/email-variables'; // Theme variables for emails
+
+// Mixins
+@import "mixins/media-queries";
+
+
+//  Output @font-face declarations
+
+$media-common: true;
+
+//  Font stylesheet @import is wrapped in a media query in order to prevent it from causing problems in Outlook
+@media screen {
+    @import 'blocks/typography';
+}

styles/email-inline.scss

@@ -0,0 +1,18 @@
+//
+//  Styles for emails
+//  _____________________________________________
+
+//  See comments in source/_email-base.scss for explanation of email styles
+
+@import 'vendor/magento-ui/lib'; // Global lib
+@import 'vendor/magento-ui/variables/email'; // Global email variables
+@import 'variables'; // Local theme variables
+@import 'email/email-variables'; // Theme variables for emails
+
+@import 'email/email-base-inline';
+@import 'email/email-extend-inline';
+
+//  Module-specific styles for emails
+@import '../Magento_Bundle/styles/email-inline';
+@import '../Magento_Rma/styles/email-inline';
+@import '../Magento_Sales/styles/email-inline';

styles/email.scss

@@ -0,0 +1,25 @@
+//
+//  Styles for emails
+//  _____________________________________________
+
+//  See comments in source/_email-base.scss for explanation of email styles
+
+@import 'vendor/magento-ui/lib'; // Global lib
+@import 'vendor/magento-ui/variables/email'; // Global email variables
+@import 'variables'; // Local theme variables
+@import 'email/email-variables'; // Theme variables for emails
+
+// Mixins
+@import "mixins/media-queries";
+
+//  Include all styles that have been indicated as non-inline styles
+@import 'email/email-base';
+@import 'email/email-extend';
+
+//  Module-specific styles for emails
+@import '../Magento_Bundle/styles/email';
+@import '../Magento_Rma/styles/email';
+@import '../Magento_Sales/styles/email';
+
+//  It is impossible to apply media queries as inline styles, so all media queries must be output in this file
+$media-target: 'all';