diff options
Diffstat (limited to 'src/components/Footer')
| -rw-r--r-- | src/components/Footer/Footer.module.scss | 90 | ||||
| -rw-r--r-- | src/components/Footer/Footer.tsx | 54 | 
2 files changed, 0 insertions, 144 deletions
| diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss deleted file mode 100644 index 1d156f8..0000000 --- a/src/components/Footer/Footer.module.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; - -.wrapper { -  display: flex; -  flex-flow: column wrap; -  gap: var(--spacing-xs); -  place-items: center; -  place-content: center; -  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md)); -  border-top: fun.convert-px(3) solid var(--color-border-light); - -  @include mix.media("screen") { -    @include mix.dimensions("sm") { -      flex-flow: row wrap; -      font-size: var(--font-size-sm); -    } -  } -} - -.back-to-top { -  --button-size: #{fun.convert-px(55)}; -  --icon-size: #{fun.convert-px(32)}; - -  position: fixed; -  bottom: calc(var(--toolbar-size) + var(--spacing-md)); -  right: var(--spacing-md); -  transition: all 0.4s ease-in 0s; - -  &--hidden { -    opacity: 0; -    transform: translateY(calc(var(--button-size) + var(--spacing-md))); -  } - -  &--visible { -    opacity: 1; -    transform: translateY(0); -  } - -  a { -    display: flex; -    place-content: center; -    padding: 0; -    width: var(--button-size); -    height: var(--button-size); - -    svg { -      height: 85%; -    } - -    :global { -      .arrow-head { -        transform: translateY(30%); -        transition: all 0.45s ease-in-out 0s; -      } - -      .arrow-bar { -        opacity: 0; -        transform: translateY(30%) translateX(25%) scale(0.5); -        transition: transform 0.45s ease-in-out 0s, opacity 0.3s ease-in-out 0s; -      } -    } - -    &:hover, -    &:focus { -      :global { -        .arrow-head { -          transform: translateY(0); -        } - -        .arrow-bar { -          opacity: 1; -          transform: translateY(0) translateX(0) scale(1); -        } -      } - -      svg { -        :global { -          animation: pulse 1.2s ease-in-out 0.6s infinite; -        } -      } -    } - -    &:active { -      svg { -        animation-play-state: paused; -      } -    } -  } -} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx deleted file mode 100644 index 381b4a8..0000000 --- a/src/components/Footer/Footer.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { ButtonLink } from '@components/Buttons'; -import Copyright from '@components/Copyright/Copyright'; -import FooterNav from '@components/FooterNav/FooterNav'; -import { ArrowIcon } from '@components/Icons'; -import { useEffect, useState } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './Footer.module.scss'; - -const Footer = () => { -  const intl = useIntl(); -  const [backToTopClasses, setBackToTopClasses] = useState( -    `${styles['back-to-top']} ${styles['back-to-top--hidden']}` -  ); - -  const handleScroll = () => { -    const currentScrollY = window.scrollY; - -    if (currentScrollY > 300) { -      setBackToTopClasses( -        `${styles['back-to-top']} ${styles['back-to-top--visible']}` -      ); -    } else { -      setBackToTopClasses( -        `${styles['back-to-top']} ${styles['back-to-top--hidden']}` -      ); -    } -  }; - -  useEffect(() => { -    window.addEventListener('scroll', handleScroll); -    return () => window.removeEventListener('scroll', handleScroll); -  }, []); - -  return ( -    <footer className={styles.wrapper}> -      <Copyright /> -      <FooterNav /> -      <div className={backToTopClasses}> -        <ButtonLink target="#top" position="center"> -          <span className="screen-reader-text"> -            {intl.formatMessage({ -              defaultMessage: 'Back to top', -              description: 'Footer: Back to top button', -              id: 'dqrd6I', -            })} -          </span> -          <ArrowIcon direction="top" /> -        </ButtonLink> -      </div> -    </footer> -  ); -}; - -export default Footer; | 
