mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-23 11:51:05 -05:00
980fc249d8
We were removing the border to ‘unfold’ the corner of the page. This was causing the size of the element to shrink. This meant that it you hovered the bottom 1px of the element it would cycle in and out of the hover state as fast as the browser could render it. This commit fixes that by making the border transparent, rather than removing it.
110 lines
2.1 KiB
SCSS
110 lines
2.1 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-color: transparent;
|
|
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;
|
|
}
|
|
|
|
}
|