mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-22 00:49:23 -04:00
152b1f5256
Things in CSS stack top to bottom like this: - image - `box-shadow` - `background` We are drawing the border around the letter using `box-shadow`. This was working fine because the images of our letters had a transparent background, so you could see the border through them. At some point our letters have changed to have a white background. So you can no longer see the border. This commit: - adds a new pseudo element which stacks above the image of the letter - moves the border from the image itself to said pseudo element
51 lines
811 B
SCSS
51 lines
811 B
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;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
background: $white;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
}
|