65 lines
870 B
CSS
65 lines
870 B
CSS
/* Grid layout */
|
|
.TemporaryModal {
|
|
--timeToClose: 3s;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: repeat(1fr, 3) auto;
|
|
grid-template-areas:
|
|
"content close"
|
|
"content ."
|
|
"countdown countdown"
|
|
"helper-text helper-text";
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.content {
|
|
grid-area: content;
|
|
}
|
|
|
|
button.close {
|
|
grid-area: close;
|
|
}
|
|
|
|
.countdown {
|
|
grid-area: countdown;
|
|
}
|
|
|
|
|
|
.time-helper-text {
|
|
grid-area: helper-text;
|
|
}
|
|
|
|
/* Apperance */
|
|
|
|
.TemporaryModal {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.countdown .time-background {
|
|
background-color: beige;
|
|
height: 1ch;
|
|
}
|
|
|
|
.countdown .time {
|
|
background-color: red;
|
|
height: 100%;
|
|
width: 100%;
|
|
animation: countdown var(--timeToClose) ease-in-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.countdown .time-helper-text {
|
|
font-size: 70%;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes countdown {
|
|
0% {
|
|
width: 100%;
|
|
}
|
|
|
|
100% {
|
|
width: 0
|
|
}
|
|
}
|