mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-05 14:00:51 -04:00
85dbe19611
International letters aren’t sent by first or second class post. In keeping with the little touch of skeumorphism, let’s label them with the commonly recognised marker of international mail instead.
101 lines
1.9 KiB
SCSS
101 lines
1.9 KiB
SCSS
$iso-paper-ratio: 141.42135624%;
|
|
|
|
@keyframes ellipsis {
|
|
to {
|
|
width: 1.25em;
|
|
}
|
|
}
|
|
|
|
.letter {
|
|
|
|
padding: $iso-paper-ratio 0 0 0;
|
|
margin: 0 0 govuk-spacing(6) 0;
|
|
position: relative;
|
|
background: $panel-colour;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 50%;
|
|
margin-left: -0.5em;
|
|
font-size: 96px;
|
|
color: $white;
|
|
overflow: hidden;
|
|
display: block;
|
|
vertical-align: bottom;
|
|
animation: ellipsis steps(4,end) 1.3s infinite;
|
|
content: "\2026"; // ellipsis
|
|
width: 0px;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: inset 0 0 0 1px $border-colour;
|
|
}
|
|
|
|
&-postage {
|
|
|
|
$art-width: 97.83;
|
|
$art-height: 82.27;
|
|
$fold-height: 124px;
|
|
$envelope-colour: #C4B186;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: $fold-height * ($art-width / $art-height);
|
|
height: $fold-height;
|
|
margin: 0;
|
|
background-color: mix($envelope-colour, $grey-1);
|
|
background-size: auto $fold-height;
|
|
background-position: right 0;
|
|
background-repeat: no-repeat;
|
|
background-origin: border-box;
|
|
text-indent: -1000em;
|
|
border-bottom: 1px solid $border-colour;
|
|
border-left: 1px solid $border-colour;
|
|
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
|
|
|
|
&-first {
|
|
background-image: file-url('envelope-1st-class.svg');
|
|
}
|
|
|
|
&-second {
|
|
background-image: file-url('envelope-2nd-class.svg');
|
|
}
|
|
|
|
&-international {
|
|
background-image: file-url('envelope-international.svg');
|
|
}
|
|
|
|
.letter-sent &:hover {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
background-image: file-url('envelope-fold.svg');
|
|
}
|
|
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
background: $white;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.letter-recipient-summary {
|
|
line-height: 28px;
|
|
margin-bottom: 0;
|
|
}
|