mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 08:28:15 -04:00
6824eeebf5
Sometimes people print stuff under where we’re folding the letter. It’s annoying to not be able to see it. This commit adds a little detail where, once you’ve sent the letter you can unfolds the corner to see what’s underneath. It’s better that we do this for all letters for discoverability.
110 lines
2.0 KiB
SCSS
110 lines
2.0 KiB
SCSS
$iso-paper-ratio: 141.42135624%;
|
|
|
|
@keyframes ellipsis {
|
|
to {
|
|
width: 1.25em;
|
|
}
|
|
}
|
|
|
|
.letter {
|
|
|
|
padding: $iso-paper-ratio 0 0 0;
|
|
margin: 0 0 $gutter 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');
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('envelope-1st-class.png');
|
|
}
|
|
|
|
}
|
|
|
|
&-second {
|
|
|
|
background-image: file-url('envelope-2nd-class.svg');
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('envelope-2nd-class.png');
|
|
}
|
|
|
|
}
|
|
|
|
.letter-sent &:hover {
|
|
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
background-image: file-url('envelope-fold.svg');
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('envelope-fold.png');
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
background: $white;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
}
|