36 lines
No EOL
662 B
SCSS
36 lines
No EOL
662 B
SCSS
@use './mixins/effects' as *;
|
|
|
|
#tiles {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--columns), 1fr);
|
|
grid-template-rows: repeat(var(--rows), 1fr);
|
|
|
|
.tile {
|
|
background-color: var(--bg-color-1);
|
|
|
|
&.active {
|
|
animation: bright .3s forwards;
|
|
animation-delay: var(--delay);
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes bright {
|
|
0% {
|
|
background-color: var(--bg-color-1);
|
|
}
|
|
|
|
50% {
|
|
|
|
background-color: var(--bg-color-2);
|
|
filter: brightness(130%);
|
|
outline: 1px solid white;
|
|
}
|
|
|
|
100% {
|
|
|
|
background-color: var(--bg-color-2);
|
|
}
|
|
} |