frontpage/styles/Blog/ThemeSwitch.module.scss

49 lines
834 B
SCSS

.switch {
position: relative;
width: 1.5em;
height: 1.5em;
cursor: pointer;
& > * {
position: absolute;
opacity: 0;
transform: translate(0, 100%);
}
& > .selected {
opacity: 1;
transform: translate(0, 0);
}
.fadeOut {
animation: fadeOut 0.2s ease-in-out;
animation-fill-mode: forwards;
}
.fadeIn {
animation: fadeIn 0.2s ease-in-out;
animation-fill-mode: forwards;
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translate(0, 0);
}
to {
opacity: 0;
transform: translate(0, -100%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate(0, 100%);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}