mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-27 11:19:21 -04:00
1bfa302fce
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.
111 lines
1.9 KiB
SCSS
111 lines
1.9 KiB
SCSS
$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 {
|
|
|
|
@include core-19;
|
|
margin: 0;
|
|
|
|
td,
|
|
th {
|
|
@include core-19;
|
|
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;
|
|
}
|
|
|
|
&-body {
|
|
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: $gutter-half $email-message-gutter 0 $email-message-gutter;
|
|
margin: 0 0 0 0;
|
|
clear: both;
|
|
position: relative;
|
|
word-wrap: break-word;
|
|
|
|
&-wrapper {
|
|
|
|
.js-enabled & {
|
|
max-height: 92px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.js-enabled .expanded & {
|
|
max-height: none;
|
|
padding-bottom: $gutter;
|
|
}
|
|
|
|
}
|
|
|
|
.toggle {
|
|
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -18px;
|
|
height: 27px;
|
|
padding: 0;
|
|
margin: 0 0 0 -30px;
|
|
line-height: 12px;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
width: 60px;
|
|
text-decoration: none;
|
|
background: $grey-3;
|
|
color: $text-colour;
|
|
border-style: solid;
|
|
border-width: 3px;
|
|
border-color: $white;
|
|
box-shadow: inset 0 -2px 0 $button-bottom-border-colour, 0 0 0 1px $white-50-opaque;
|
|
|
|
&:hover {
|
|
background: $grey-2;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
border-color: $yellow;
|
|
outline: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.js-enabled .toggle {
|
|
display: inline-block;
|
|
}
|
|
|
|
.js-enabled .expanded .toggle {
|
|
display: none;
|
|
}
|