Currently trying to revamp the email notification template we are using to convey information about ETO requests to make them more readable. Wrote up some CSS and used a <style> tag to inject it rather than writing it directly inline. the <style> tag has a type of text/css, yet I am getting an error about using javascript? Is it the tag type that is triggering this error?
<style type="text/css">.EmailBody__sectionTitle {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #1d1d1d;
font-weight: 800;
text-decoration: underline;
}
.subContainer__label {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 1.2em;
color: #0000FF;
}
.subContainer__data {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1em;
}
.subContainer__information {
font-style: italic;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: .8em;
}
.EmailBody {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.EmailBody__contentContainer {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 2%;
}
.contentContainer__subContainer {
height: 20%;
display: flex;
align-items: center;
justify-content: space-around;
}
#ETO {
height: 80%;
background-color: #ffffcc;
}
#employee {
height: 40%;
background-color: #ccffff;
}
#approval {
height: 30%;
background-color: #ccffcc;
}
#name {
width: 45%;
}
#role {
width: 45%;
}
#employeeEmail {
width: 60%;
}
#LeaveStart {
width: 50%;
}
#LeaveEnd {
width: 50%;
}
#ETORequested {
width: 30%;
}
#Manager {
width: 40%;
}
#Reason {
width: 100%;
padding-left: 2%;
flex-direction: column;
align-items: flex-start;
}
#ETOinformation {
flex-direction: column;
padding: 0 2% 0 2%;
justify-content: center;
height: 20%;
width: 100%;
text-align: center;
}
</style>
<div class="EmailBody">
<h1 class="EmailBody__sectionTitle">Employee Information</h1>
<div class="EmailBody__contentContainer" id="employee">
<div class="contentContainer__subContainer" id="name">
<p class="subContainer__label">Employee Name:</p>
<p class="subContainer__data">[Employee - Candidate - First & Last Name]</p>
</div>
<div class="contentContainer__subContainer" id="role">
<p class="subContainer__label">Employee Role:</p>
<p class="subContainer__data">[Record - Employee - Candidate - Positions - Title]</p>
</div>
<div class="contentContainer__subContainer" id="employeeEmail">
<p class="subContainer__label">Employee Email:</p>
<p class="subContainer__data">[Record - Employee - Company E-Mail]</p>
</div>
</div>
<hr />
<h1 class="EmailBody__sectionTitle">ETO Request</h1>
<div class="EmailBody__contentContainer" id="ETO">
<div class="contentContainer__subContainer" id="LeaveStart">
<p class="subContainer__label">Leave Starts:</p>
<p class="subContainer__data">[First Leave Day]</p>
</div>
<div class="contentContainer__subContainer" id="LeaveEnd">
<p class="subContainer__label">Leave Ends:</p>
<p class="subContainer__data">[Last Leave Day]</p>
</div>
<div class="contentContainer__subContainer">
<p class="subContainer__label" id="ETORequested">ETO Hours Requested:</p>
<p class="subContainer__data">[Number of ETO Hours Requesting to Use:]</p>
</div>
<div class="contentContainer__subContainer" id="Manager">
<p class="subContainer__label">Employee Manager Email:</p>
<p class="subContainer__data">[Record - Employee - Managers Email:]</p>
</div>
<div class="contentContainer__subContainer" id="Reason">
<p class="subContainer__label">Reason for Leave:</p>
<p class="subContainer__data">[Reason for Leave:]</p>
</div>
<div class="contentContainer__subContainer" id="ETOinformation">
<p class="subContainer__information">Supervisor to indicate approval below. Requests will be sent to HR for verification of eligibility. Approval or Disapproval will be sent to employee after HR action.</p>
<p class="subContainer__information">Eligible employees will recieve PTO for the following federal holidays: Memorial Day, Independence Day, Labor Day, Thanksgiving, Christmas Eve, Christmas Day.<br />
There is no need to submit PTO requests for these days.</p>
</div>
</div>
<hr />
<h1 class="EmailBody__sectionTitle">Approve or Decline</h1>
<div class="EmailBody__contentContainer" id="approval">
<p class="contentContainer__button" id="btn_approve">[Approve]</p>
<p class="contentContainer__button" id="btn_decline">[Decline]</p>
</div>
</div>
------------------------------
Alex Couts
------------------------------