117 lines
2.2 KiB
SCSS
117 lines
2.2 KiB
SCSS
@import 'framework/variables';
|
|
|
|
// Do not use 3-letter hex codes, bgcolor vs css background-color is problematic in emails
|
|
// See https://stackoverflow.com/questions/28551981/why-are-3-digit-hex-color-code-values-interpreted-differently-in-internet-explor
|
|
//
|
|
// stylelint-disable color-hex-length
|
|
|
|
$mailer-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$mailer-text-color: #333;
|
|
$mailer-bg-color: #fafafa;
|
|
$mailer-link-color: #3777b0;
|
|
$mailer-link-muted-color: #333;
|
|
$mailer-line-cell-bg-color: #6b4fbb;
|
|
$mailer-wrapper-cell-bg-color: #fff;
|
|
$mailer-wrapper-cell-border-color: #ededed;
|
|
$mailer-header-footer-text-color: #5c5c5c;
|
|
|
|
body {
|
|
margin: 0 !important;
|
|
background-color: $mailer-bg-color;
|
|
padding: 0;
|
|
text-align: center;
|
|
min-width: 640px;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: $mailer-font;
|
|
}
|
|
|
|
table#body {
|
|
background-color: $mailer-bg-color;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
min-width: 640px;
|
|
width: 100%;
|
|
}
|
|
|
|
a {
|
|
color: $mailer-link-color;
|
|
text-decoration: none;
|
|
|
|
&.muted {
|
|
color: $mailer-link-muted-color;
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
font-weight: 500;
|
|
}
|
|
|
|
tr td {
|
|
font-family: $mailer-font;
|
|
}
|
|
|
|
tr.line td {
|
|
font-family: $mailer-font;
|
|
background-color: $mailer-line-cell-bg-color;
|
|
height: 4px;
|
|
font-size: 4px;
|
|
line-height: 4px;
|
|
}
|
|
|
|
tr.header td,
|
|
tr.footer td,
|
|
td.footer-message {
|
|
font-family: $mailer-font;
|
|
padding: 25px 0;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: $mailer-header-footer-text-color;
|
|
}
|
|
|
|
table.wrapper {
|
|
width: 640px;
|
|
margin: 0 auto;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
|
|
td.wrapper-cell {
|
|
font-family: $mailer-font;
|
|
background-color: $mailer-wrapper-cell-bg-color;
|
|
text-align: left;
|
|
padding: 18px 25px;
|
|
border: 1px solid $mailer-wrapper-cell-border-color;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
table.content {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
|
|
td.text-content {
|
|
font-family: $mailer-font;
|
|
color: $mailer-text-color;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
padding: 15px 5px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
tr.footer td {
|
|
img {
|
|
display: block;
|
|
margin: 0 auto 1em;
|
|
}
|
|
|
|
.mng-notif-link,
|
|
.help-link {
|
|
color: $mailer-link-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|