61 lines
966 B
SCSS
61 lines
966 B
SCSS
// --------------------------------------------------
|
|
// ANIMATIONS
|
|
// --------------------------------------------------
|
|
|
|
@keyframes expand-outline {
|
|
0% {
|
|
outline-offset: 0;
|
|
}
|
|
100% {
|
|
outline-offset: 4px;
|
|
}
|
|
}
|
|
|
|
@keyframes expand-width {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes expand-height {
|
|
0% {
|
|
height: 0;
|
|
}
|
|
100% {
|
|
height: calc(100% - var(--regular-icon-size));
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-from-bottom {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(0.25rem);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-from-top {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-0.25rem);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-360 {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|