darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 17:45:32 -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); $white-50-opaque: rgba($white, 0.5);
$button-bottom-border-colour: rgba(0, 0, 0, 0.17); $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
$email-message-gutter: $gutter * 2;
.email-message { .email-message {
margin-bottom: $gutter; margin-bottom: $gutter;
border: 1px solid $border-colour;
&-meta { &-meta {
@@ -13,35 +15,34 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
td, td,
th { th {
@include core-19; @include core-19;
border-bottom: 0; border-top: 0;
border-top: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
vertical-align: top; vertical-align: top;
} }
th { th {
color: $secondary-text-colour; color: $secondary-text-colour;
padding-left: $email-message-gutter;
} }
td { td {
width: 99%; width: 99%;
padding-right: $email-message-gutter;
} }
} }
&-from { &-from {
padding-top: 15px; padding-top: 15px;
border-top: 1px solid $border-colour;
} }
&-body { &-body {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: $gutter-half 0 0 0; padding: $gutter-half $email-message-gutter 0 $email-message-gutter;
margin: 0 0 $gutter * 1.5 0; margin: 0 0 0 0;
clear: both; clear: both;
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
position: relative; position: relative;
word-wrap: break-word; word-wrap: break-word;
@@ -49,11 +50,13 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
.js-enabled & { .js-enabled & {
max-height: 92px; max-height: 92px;
padding: 0;
overflow: hidden; overflow: hidden;
} }
.js-enabled .expanded & { .js-enabled .expanded & {
max-height: none; max-height: none;
padding-bottom: $gutter;
} }
} }