mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-25 02:19:12 -04:00
cc713b4057
Our usage for these browsers in the last month is down to 0.2% of all users, or 14 individual users, according to Google Analytics. These users also visit about half the number of pages per sessions, suggesting that they’re not signed in.
92 lines
1.8 KiB
SCSS
92 lines
1.8 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');
|
|
}
|
|
|
|
&-second {
|
|
background-image: file-url('envelope-2nd-class.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;
|
|
}
|
|
|
|
}
|