darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-16 19:30:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a border around the email template

Browse Source 
The email looks a lot like the normal content of a page (black on white
text, same font, rendered by the browser). It needed differentiating
visually.

This commit adds a border and spacing around the email to separate it
from the things on the page that you’re supposed to be interacting with.
This commit is contained in:
Chris Hill-Scott
2017-03-10 17:00:13 +00:00
parent cf4a19e979
commit 1bfa302fce
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/components/email-message.scss
View File

@@ -1,9 +1,11 @@
$white-50-opaque: rgba($white, 0.5);
$button-bottom-border-colour: rgba(0, 0, 0, 0.17);
$email-message-gutter: $gutter * 2;
.email-message {
margin-bottom: $gutter;
border: 1px solid $border-colour;
&-meta {
@@ -13,35 +15,34 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
td,
th {
@include core-19;
border-bottom: 0;
border-top: 1px solid $border-colour;
border-top: 0;
border-bottom: 1px solid $border-colour;
vertical-align: top;
}
th {
color: $secondary-text-colour;
padding-left: $email-message-gutter;
}
td {
width: 99%;
padding-right: $email-message-gutter;
}
}
&-from {
padding-top: 15px;
border-top: 1px solid $border-colour;
}
&-body {
width: 100%;
box-sizing: border-box;
padding: $gutter-half 0 0 0;
margin: 0 0 $gutter * 1.5 0;
padding: $gutter-half $email-message-gutter 0 $email-message-gutter;
margin: 0 0 0 0;
clear: both;
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
position: relative;
word-wrap: break-word;
@@ -49,11 +50,13 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
.js-enabled & {
max-height: 92px;
padding: 0;
overflow: hidden;
}
.js-enabled .expanded & {
max-height: none;
padding-bottom: $gutter;
}
}