mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
cf4a19e979
Letter previews take a few seconds to load. Good to let the user know that something is happening and that they should wait.
52 lines
835 B
SCSS
52 lines
835 B
SCSS
$iso-paper-ratio: 141.42135624%;
|
|
|
|
@keyframes ellipsis {
|
|
to {
|
|
width: 1.25em;
|
|
}
|
|
}
|
|
|
|
.letter {
|
|
|
|
padding: 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;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 0;
|
|
padding: $iso-paper-ratio 0 0 0;
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
background: $white;
|
|
box-shadow: inset 0 0 0 1px $border-colour;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
}
|