_email-extend.less 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Email extend styles
  7. // _____________________________________________
  8. // This file should be used for theme-specific styles for emails that extend or modify the styles in _email.less
  9. // This will allow you to edit email styles without copying and editing the _email.less file
  10. // Importing fonts from an external CSS file, rather than embedding @font-face declarations inside the <style> tag,
  11. // as the latter will cause font rendering issues if the web fonts are inaccessible.
  12. @import url("@{baseUrl}css/email-fonts.css");
  13. .header {
  14. background-color: @email__background-color;
  15. padding: @email-body__padding;
  16. }
  17. .footer {
  18. background-color: @email__background-color;
  19. padding: @email-body__padding;
  20. table {
  21. width: 100%;
  22. td {
  23. padding-bottom: @email-body__padding;
  24. width: 33%;
  25. p {
  26. margin-bottom: 0;
  27. &.phone {
  28. font-size: @font-size__l;
  29. a {
  30. color: inherit;
  31. }
  32. }
  33. }
  34. }
  35. }
  36. }
  37. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
  38. .header,
  39. .main-content,
  40. .footer {
  41. padding: @email-body__padding @indent__s !important;
  42. }
  43. .footer {
  44. td {
  45. display: block;
  46. width: auto !important;
  47. }
  48. }
  49. }