Link to article: Dynamic Emails Component.
.help {
display: flex;
align-content: stretch;
padding-top: 1em;
}
.help blockquote {
margin: 0;
font-size: 85%;
}
.help blockquote > p {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
margin-right: 0;
min-height: 2rem;
margin: 0;
}
.help blockquote > p * {
margin: 0 0.1rem;
height: 100%;
}
.help blockquote:nth-of-type(1) {
background: transparent;
border: unset;
box-shadow: unset;
text-align: right;
margin-right: 0;
padding: 0;
}
.help blockquote:nth-of-type(1) > p {
justify-content: flex-end;
}
.help blockquote:nth-of-type(2) {
margin-left: 1em;
width: 60%;
}
/* --- BASE CONTAINER CLASS --- */
.dyna-email-container,
.dyna-email-container *{
box-sizing: border-box;
margin: auto;
margin-top: 10px;
margin-bottom:10px;
}
.dyna-email-container{
width: 85%;
display: flex;
position: relative;
}
/* --- MAIN EMAIL CLASS --- */
.dyna-email{
display: grid;
grid-template-areas:
"header-box"
"content-box"
"bottom-box"
"attachment-box";
width: 100%;
border: solid 3px #444444;
position: relative;
}
/* --- EMAIL HEADER BOX & CONTENTS --- */
.dyna-email > .header-box{
display: grid;
grid-template-areas:
"top-left-box top-middle-box top-right-box";
width: 100%;
min-height: 100px;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 1fr;
justify-items: stretch;
margin: 0 0 0 0;
}
.header-box .top-left-box{
grid-area: top-left-box;
grid-template-areas:
"from-box"
"to-box"
"cc-box"
"subject-box";
grid-template-rows: 1fr 1fr 1fr 1fr;
justify-items: end;
padding-left: 2em;
margin-bottom: 0px;
}
.top-left-box > .from-box, .to-box, .cc-box, .subject-box{
display: block;
text-align: right;
font-weight: 700;
margin-bottom: 0px;
margin-top: 5px;
}
.top-left-box > .from-box{
grid-area: from-box;
}
.top-left-box >.to-box{
grid-area: to-box;
}
.top-left-box > .cc-box{
grid-area: cc-box;
}
.top-left-box > .subject-box{
grid-area: subject-box;
}
.header-box > .top-middle-box{
grid-area: top-middle-box;
grid-template-areas:
"from-name-box"
"to-name-box"
"cc-text-box"
"subject-text-box";
grid-template-rows: 1fr 1fr 1fr 1fr;
justify-items: start;
margin-left: 5px;
margin-bottom: 0px;
}
.top-middle-box > .from-name-box, .to-name-box, .cc-text-box, .subject-text-box{
display: block;
text-align: left;
margin-top: 5px;
margin-bottom: 0px;
text-wrap: balance;
}
.top-middle-box > .from-name-box, .to-name-box, .cc-text-box{
color: #b01;
}
.top-middle-box > .from-name-box{
grid-area: from-name-box;
}
.top-middle-box > .to-name-box{
grid-area: to-name-box;
}
.top-middle-box > .cc-text-box{
grid-area: cc-text-box;
}
.top-middle-box > .subject-text-box{
grid-area: subject-text-box;
}
.header-box > .top-right-box{
width: 100%;
grid-area: top-right-box;
display: block;
background-image: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/SCP_icon%281%29.png");
background-size: 75px 75px;
background-position: right center;
background-repeat: no-repeat;
margin-top: 1em;
margin-right: 1em;
margin-left: -1em;
}
@media screen and (max-width: 800px){
.header-box > .top-right-box{
min-width: 75px;
margin-left: -3em;
}
.header-box > .top-left-box{
padding-left: 1em;
}
}
/* --- EMAIL CONTENT BOX --- */
.dyna-email > .content-box{
width: 100%;
display: block;
padding: 0em 1em;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
line-height: 1.5;
}
.content-box > hr{
margin: 1em 0em;
height: 2px;
background-color: black;
}
/* --- EMAIL FOOTER BOX & CONTENTS --- */
.dyna-email > .footer-box{
display: grid;
grid-template-areas:
"bottom-left-box bottom-right-box";
width: 100%;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
margin: 2em 0 1.5em 0;
}
.footer-box > .bottom-left-box{
display: grid;
grid-area: bottom-left-box;
grid-template-areas:
"name-box"
"title-box"
"sign-off-box";
grid-template-rows: 1fr 1fr 1fr;
justify-items: start;
margin-left: 2em;
padding-left: 1em;
border-left: 2px solid black;
}
.bottom-left-box > .name-box, .title-box, .sign-off-box{
display: block;
text-align: left;
width: 100%;
margin: 2px 0;
}
.bottom-left-box > .name-box{
grid-area: name-box;
margin-top: 3px;
}
.bottom-left-box > .title-box{
grid-area: title-box;
}
.bottom-left-box > .sign-off-box{
grid-area: sign-off-box;
}
.footer-box > .bottom-right-box{
width: 100%;
max-height: 100px;
grid-area: bottom-right-box;
display: block;
margin-top: 0;
margin-bottom: 0;
align-content: center;
justify-items: center;
}
.footer-box > .bottom-right-box img{
width: 100%;
height: 100%;
object-fit: contain;
margin: 0;
}
/* --- EMAIL ATTACHMENT BOX --- */
.dyna-email > .attachment-box{
display: block;
grid-area: attachment-box;
width: 85%;
font-weight: 700;
text-align: center;
justify-self: center;
border-top: 3px solid black;
margin: 0 0 5px 0;
}
/* Hide CC Box if 'none' */
.cc-text-box.cc-none {
display: none;
}
.cc-box.cc-none {
display: none;
}
.top-left-box.cc-none {
margin-top: 20px;
}
.top-middle-box.cc-none {
margin-top: 20px;
}
/* Hide Title if 'none' */
.title-box.title-none {
display:none;
margin:0px;
}
.footer-box > .bottom-left-box:has(.title-box.title-none) {
grid-template-areas:
"name-box"
"sign-off-box";
grid-template-rows: 1fr 1fr;
}
.footer-box.name-noFooter {
display: none;
}
background: #FFE36E;
border-radius: 10px; margin: 10px 10px 0 10px;
border-radius: 10px; margin: 10px 10px 0 10px;
blockquote
blockquote
code
blockquote
code
help
blockquote
code
blockquote
code
blockquote
code
help
blockquote
code
code
blockquote
blockquote
code
blockquote
dyna-email-container
dyna-email
header-box
top-left-box
cc-{$cc}
from-box
to-box
cc-box
cc-{$cc}
subject-box
top-middle-box
cc-{$cc}
from-name-box
to-name-box
cc-text-box
cc-{$cc}
subject-text-box
top-right-box
content-box
footer-box
name-{$name}
bottom-left-box
title-{$title}
name-box
name-{$name}
title-box
title-{$title}
sign-off-box
bottom-right-box
footer-box
bottom-left-box
name-box
title-box
sign-off-box
bottom-right-box
attachment-box
blockquote
footer-box
bottom-left-box
name-box
title-box
sign-off-box
bottom-right-box
attachment-box
blockquote