Newer
Older
gnexus-ui-kit / src / scss / _motion.scss
@use "kit-deps" as *;

@keyframes terminal_scan_x {
	0% {
		transform: translateX(-120%);
	}

	100% {
		transform: translateX(220%);
	}
}

@keyframes terminal_scan_y {
	0% {
		transform: translateY(-120%);
	}

	100% {
		transform: translateY(220%);
	}
}

@keyframes terminal_pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba($color-primary, 0);
	}

	50% {
		box-shadow: 0 0 0 4px rgba($color-primary, 0.18);
	}
}

@keyframes panel_boot {
	0% {
		opacity: 0;
		transform: translateY($space-2);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes overlay_reveal {
	0% {
		opacity: 0;
		transform: translateY(-$space-2);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tooltip_reveal {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY($space-1);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}