Files
notifications-admin/app/assets/stylesheets/components/email-message.scss
Chris Hill-Scott 6e83bec7b0 Merge pull request #439 from alphagov/wrap-long-words-in-emails
Wrap long words in email template previews
2016-04-13 16:13:54 +01:00

103 lines
1.7 KiB
SCSS

$white-50-opaque: rgba($white, 0.5);
.email-message {
margin-bottom: $gutter;
&-name {
@include bold-24;
margin: 20px 0 10px 0;
}
&-meta {
@include core-19;
margin: 0;
td,
th {
@include core-19;
border-bottom: 0;
border-top: 1px solid $border-colour;
vertical-align: top;
}
th {
color: $secondary-text-colour;
}
td {
width: 99%;
}
}
&-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;
clear: both;
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
position: relative;
word-wrap: break-word;
&-wrapper {
.collapsed & {
max-height: 92px;
overflow: hidden;
}
}
.toggle {
position: absolute;
left: 50%;
bottom: -18px;
height: 25px;
display: inline-block;
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-1;
color: $white;
border-style: solid;
border-width: 3px;
border-color: $white;
border-radius: 6px;
box-shadow: 0 0 0 1px $white-50-opaque;
&:hover {
background: $link-hover-colour;
}
&:focus,
&:active {
background: $yellow;
border-color: $white;
color: $text-colour;
outline: none;
}
}
}
}