index : www.armandphilippot.com	main
	The frontend of my personal website.	Armand Philippot

summaryrefslogtreecommitdiffstats

log msg author committer range

path: root/src/styles/abstracts/_placeholders.scss

	Commit message (Collapse)	Author	Age	Files	Lines
*	chore: define Sass functions, mixins, placeholders and variables	Armand Philippot	2021-12-13	1	-0/+2

generated by cgit v1.2.3 (git 2.39.1) at 2025-11-18 13:30:28 +0000

@use "@styles/abstracts/functions" as fun;

@keyframes pulse {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

@keyframes draw-borders {
  0% {
    background-position: top left, top right, bottom right, bottom left;
    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%;
  }

  25% {
    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%;
  }

  50% {
    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%;
  }

  75% {
    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%;
  }

  100% {
    background-position: top left, top right, bottom right, bottom left;
    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%;
  }
}

@keyframes slide-in-from-bottom {
  0% {
    transform: translateY(100%);
  }

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

@keyframes slide-in-from-top {
  0% {
    transform: translateY(-200%);
  }

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

@keyframes flip-logo {
  0%,
  90% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes hide-text {
  0%,
  100% {
    transform: translateX(0);
    transform-origin: right;
    content: "";
    visibility: visible;
  }
}

@keyframes typing {
  0%,
  35% {
    transform: translateX(0);
    transform-origin: right;
    content: "|";
    visibility: visible;
  }

  100% {
    transform: translateX(100%);
    transform-origin: right;
  }
}

@keyframes blink {
  0% {
    color: var(--color-primary-darker);
  }

  100% {
    color: var(--color-bg-tertiary);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}