FooterNav.module.scss « FooterNav « components « src - www.armandphilippot.com - The frontend of my personal website.

about summary refs log tree commit diff stats

path: root/src/components/FooterNav/FooterNav.module.scss

blob: af72df08697edfd8b08f1e1f3688c4a70111c34a (plain)

@use "@styles/abstracts/placeholders";

.wrapper {
  font-size: var(--font-size-sm);
}

.list {
  @extend %flex-list;
  gap: var(--spacing-xs);
}

.item {
  &::before {
    content: "\2022";
    margin-right: var(--spacing-xs);
  }
}

/span>: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); svg { width: 100%; } :global { .arrow-head { transform: translateY(30%) scale(1.2); transition: all 0.45s ease-in-out 0s; } .arrow-bar { opacity: 0; transform: translateY(30%) scaleY(0); transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s; } } &:hover, &:focus { :global { .arrow-head { transform: translateY(0) scale(1); } .arrow-bar { opacity: 1; transform: translateY(0) scaleY(1); } } svg { :global { animation: pulse 1.2s ease-in-out 0.6s infinite; } } } &:active { svg { animation-play-state: paused; } } } }