Email edits

This commit is contained in:
Manny.Muriel 2016-08-12 14:43:33 -07:00 committed by Mark Moser
parent b16b1929b4
commit dab2dc5946
2 changed files with 178 additions and 11 deletions

View File

@ -1,9 +1,168 @@
@import "foundation-emails"; @import "foundation-emails";
// Foundation for Emails Settings
// ------------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Grid
// 3. Block Grid
// 4. Typography
// 5. Button
// 6. Callout
// 7. Menu
// 8. Thumbnail
// 1. Global
// ---------
$primary-color: #2199e8;
$secondary-color: #777777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #f3f3f3;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$pre-color: #ff6908;
$global-width: 600px !default;
$global-width-small: 95%;
$global-gutter: 16px;
$body-background: $light-gray;
$container-background: $white;
$global-padding: 16px;
$global-margin: 16px;
$global-radius: 3px;
$global-rounded: 500px;
$global-breakpoint: $global-width + $global-gutter;
// 2. Grid
// -------
$grid-column-count: 12;
$column-padding-bottom: $global-padding;
$container-radius: 0;
// 3. Block Grid
// -------------
$block-grid-max: 8;
$block-grid-gutter: $global-gutter;
// 4. Typography
// -------------
$global-font-color: $black;
$body-font-family: Helvetica, Arial, sans-serif;
$global-font-weight: normal;
$header-color: inherit;
$global-line-height: 1.3;
$global-font-size: 16px;
$body-line-height: $global-line-height;
$header-font-family: $body-font-family;
$header-font-weight: $global-font-weight;
$h1-font-size: 34px;
$h2-font-size: 30px;
$h3-font-size: 28px;
$h4-font-size: 24px;
$h5-font-size: 20px;
$h6-font-size: 18px;
$header-margin-bottom: 10px;
$paragraph-margin-bottom: 10px;
$small-font-size: 80%;
$small-font-color: $medium-gray;
$lead-font-size: $global-font-size * 1.25;
$lead-line-height: 1.6;
$text-padding: 10px;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-font-weight;
$subheader-margin-top: 4px;
$subheader-margin-bottom: 8px;
$hr-width: $global-width;
$hr-border: 1px solid $black;
$hr-margin: 20px auto;
$anchor-text-decoration: none;
$anchor-color: $primary-color;
$anchor-color-visited: $anchor-color;
$anchor-color-hover: darken($primary-color, 10%);
$anchor-color-active: $anchor-color-hover;
$stat-font-size: 40px;
// 5. Button
// ---------
$button-padding: (
tiny: 4px 8px 4px 8px,
small: 5px 10px 5px 10px,
default: 8px 16px 8px 16px,
large: 10px 20px 10px 20px,
);
$button-font-size: (
tiny: 10px,
small: 12px,
default: 16px,
large: 20px,
);
$button-color: $white;
$button-color-alt: $medium-gray;
$button-font-weight: bold;
$button-margin: 0 0 $global-margin 0;
$button-background: $primary-color;
$button-border: 2px solid $button-background;
$button-radius: $global-radius;
$button-rounded: $global-rounded;
// 6. Callout
// ----------
$callout-background: $white;
$callout-background-fade: 85%;
$callout-padding: 10px;
$callout-margin-bottom: $global-margin;
$callout-border: 1px solid darken($callout-background, 20%);
$callout-border-secondary: 1px solid darken($secondary-color, 20%);
$callout-border-success: 1px solid darken($success-color, 20%);
$callout-border-warning: 1px solid darken($warning-color, 20%);
$callout-border-alert: 1px solid darken($alert-color, 20%);
// 7. Menu
// -------
$menu-item-padding: 10px;
$menu-item-gutter: 10px;
$menu-item-color: $primary-color;
// 8. Thumbnail
// ------------
$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
.pd-logo { .pd-logo {
font-size: 28px; font-size: 28px;
} }
.email-container { .email-container {
width: 100% !important;
max-width:600px; max-width:600px;
background-color:green;
.email-title {
font-family: 'HalisR', Helvetica Neue, Helvetica, Ariel, sans-serif !important;
.prft-slash {
font-size: 100px;
font-weight: 100;
color: #EF0734;
}
}
} }

View File

@ -1,12 +1,14 @@
<container class="email-container"><row>
<columns>
<div class="pd-logo">PERFICIENT<span style="color: #EF0734;">/digital</span> Skills Assessment Test</div>
</columns>
</row>
<row> <container class="email-container">
<columns> <row>
<p>Dear <strong><%= @candidate.name %></strong>,</p> <columns class="email-title">
<span class="prft-slash">/</span> Skills Assessment Test
</columns>
</row>
<row>
<columns>
<p>Dear <strong><%= @candidate.name %></strong>,</p>
<p> <p>
Thank you for taking the Skills Assessment Test. However, it looks like you have not submitted it Thank you for taking the Skills Assessment Test. However, it looks like you have not submitted it
yet. If you are having trouble, please reach out to your recruiter: yet. If you are having trouble, please reach out to your recruiter:
@ -18,6 +20,12 @@
<br /> <br />
Your Test ID is: <strong><%= @candidate.test_hash %></strong> Your Test ID is: <strong><%= @candidate.test_hash %></strong>
</p> </p>
</columns>
</row>
<row>
<columns>
<div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div> <div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div>
</columns> </columns>
</row></container> </row>
</container>