60 lines
1.2 KiB
SCSS
60 lines
1.2 KiB
SCSS
@use "./mixins";
|
|
|
|
@include mixins.responsive using ($breakpoint, $size) {
|
|
.anim-#{$breakpoint}-none {
|
|
animation: none !important;
|
|
}
|
|
|
|
.anim-group-#{$breakpoint}-none > * {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
@keyframes hover {
|
|
from {
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
transform: translate(0, var(--anim-translation-value));
|
|
}
|
|
}
|
|
|
|
$anim-base-offset: -1s;
|
|
|
|
.anim-idle-hover {
|
|
--anim-translation-value: var(--prj-spacing-1);
|
|
--anim-offset: 0s;
|
|
animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
|
|
}
|
|
|
|
.anim-idle-hover-group {
|
|
& > * {
|
|
@extend .anim-idle-hover;
|
|
}
|
|
|
|
@for $index from 1 through 20 {
|
|
$anim-offset: $anim-base-offset * $index;
|
|
& > :nth-child(#{$index}n) {
|
|
--anim-offset: #{$anim-offset};
|
|
}
|
|
}
|
|
}
|
|
|
|
.anim-hover-zoom {
|
|
transition: scale 0.2s;
|
|
&:hover {
|
|
scale: 1.05;
|
|
}
|
|
}
|
|
|
|
.anim-hover-translate {
|
|
--anim-translation-value: -5px;
|
|
--anim-shadow-color: var(--prj-accent-bg);
|
|
transition: translate 0.2s;
|
|
|
|
&:hover {
|
|
translate: var(--anim-translation-value) var(--anim-translation-value);
|
|
box-shadow: calc(var(--anim-translation-value) * -1)
|
|
calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
|
|
}
|
|
}
|