mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-17 21:20:32 -04:00
9be17bd728
Because the email addresses can get pretty long, and have no spaces in them, they sometimes break out of their containing box. This looks messy and causes horizontal scrolling.
112 lines
1.9 KiB
SCSS
112 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;
|
|
word-break: break-word;
|
|
}
|
|
|
|
}
|
|
|
|
&-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;
|
|
}
|