app/views/layouts/email.html.erb
<html>
<head>
<style type="text/css">
#email_body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 13px;
line-height: 1.38em;
color: #333 !important;
position: relative;
}
a {
color: #08C;
text-decoration: none;
}
a:hover {
color: #005580;
text-decoration: underline;
}
table { font-size: inherit; border-collapse: collapse; }
.alert {
padding: 8px 35px 8px 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert-danger, .alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
code {
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
white-space: nowrap;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
border: 1px solid #BBB;
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #A2A2A2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-large {
padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.btn-primary {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #04C #04C #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-success {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #51A351 #51A351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.label, .badge {
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
font-weight: 500;
line-height: 14px;
color: #ffffff;
vertical-align: baseline;
white-space: nowrap;
background-color: #999999;
}
.label {
font-size: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.badge {
padding-left: 9px;
padding-right: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.project-banner {
background: #73746F;
position: static;
color: white;
font-weight: 500;
padding: .66em;
margin: -8px;
margin-bottom: 1.5em;
-moz-box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.25);
}
.project-banner small {
font-weight: 100;
font-size: .75em;
text-transform: uppercase;
}
.project-banner .light { font-weight: 100; }
<% stylesheets.each do |stylesheet| %>
<%= render_scss stylesheet %>
<% end %>
</style>
<style type="text/css" data-premailer="ignore">
.btn {
background-color: #F5F5F5;
background-image: -moz-linear-gradient(top, white, #E6E6E6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
background-image: -webkit-linear-gradient(top, white, #E6E6E6);
background-image: -o-linear-gradient(top, white, #E6E6E6);
background-image: linear-gradient(to bottom, white, #E6E6E6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn:hover {
color: #333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:hover, .btn:active {
color: #333;
background-color: #E6E6E6;
}
.btn-primary {
background-color: #006DCC;
background-image: -moz-linear-gradient(top, #08C, #04C);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#04C));
background-image: -webkit-linear-gradient(top, #08C, #04C);
background-image: -o-linear-gradient(top, #08C, #04C);
background-image: linear-gradient(to bottom, #08C, #04C);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary:hover, .btn-primary:active {
color: white;
background-color: #04C;
}
.btn-success {
background-color: #5BB75B;
background-image: -moz-linear-gradient(top, #62C462, #51A351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62C462), to(#51A351));
background-image: -webkit-linear-gradient(top, #62C462, #51A351);
background-image: -o-linear-gradient(top, #62C462, #51A351);
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-success:hover, .btn-success:active {
color: white;
background-color: #51A351;
}
</style>
<%= yield :head %>
</head>
<body>
<div id="email_body">
<%= yield %>
</div>
</body>
</html>