England Football

Legends Squad Filter 

<div class="legends-squad-filter remove-filter" data-behaviour="legends-squad-filter">
    <div class="legends-squad-filter__content">
        <div class="legends-squad-filter__result">Filter Results</div>
        <div class="legends-squad-filter__count">
            <div class="number" id="number">0</div>
        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    export default parentElement => {
  const openFilter = parentElement.querySelector(
    '.legends-squad-filter__content'
  );
  const closeFilter = document.querySelector('.close-filter');

  function showFilterPanel() {
    document
      .querySelector('.legends-squad-filter')
      .classList.add('remove-filter');
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.add('add-animation');
  }

  function hideFilterPanel() {
    document
      .querySelector('.legends-squad-filter-menu')
      .classList.remove('add-animation');
    document.querySelector('.legends-squad-filter').classList.add('add-filter');
  }

  const scrollToTopButton = document.querySelector('.legends-squad-filter');

  const scrollFunc = () => {
    const y = window.scrollY;

    if (y >= 100) {
      scrollToTopButton.className = 'legends-squad-filter add-filter';
    } else {
      scrollToTopButton.className = 'legends-squad-filter remove-filter';
    }
  };

  window.addEventListener('scroll', scrollFunc);

  openFilter.addEventListener('click', showFilterPanel);
  closeFilter.addEventListener('click', hideFilterPanel);
};
  • URL: /components/raw/legends-squad-filter/legends-squad-filter.js
  • Filesystem Path: src/library/components/legends-squad-filter/legends-squad-filter.js
  • Size: 1.1 KB
  • Content: 
    .legends-squad-filter {
  cursor: pointer;
  width: 24.6rem;
  height: 4.4rem;
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  visibility: visible;
  opacity: 1;
  transition: all 0.25s ease-in-out;
  transform: translateX(-50%);

  &.add-filter {
    visibility: visible;
    opacity: 1;
  }

  &.remove-filter {
    visibility: hidden;
    opacity: 0;
  }

  &__content {
    display: flex;
    align-items: center;
    background: $white;
    border: 0.1rem solid $white;
    box-shadow: 0 0.2rem 1.2rem rgba(57, 48, 48, 0.15);
    border-radius: 5rem;
    position: absolute;
  }

  &__result {
    font-size: 1.4rem;
    line-height: 2rem;
    font-family: $text-font;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 2rem;

    &::before {
      content: '';
      background: url(./assets/images/filter-icon.svg) no-repeat center;
      display: inline-block;
      width: 2rem;
      height: 1.5rem;
      margin-right: 1.7rem;
    }
  }

  &__count {
    background: $grey-light;
    padding: 0.9rem 1.4rem;
    border-radius: 5rem 0 0 5rem;
    transform: matrix(-1, 0, 0, 1, 0, 0);

    .number {
      font-family: $ef-font;
      font-size: 1.6rem;
      line-height: 2.4rem;
      background: $black;
      width: 2.6rem;
      height: 2.6rem;
      color: $white;
      text-align: center;
      border-radius: 50%;
      transform: inherit;
    }
  }
}
  • URL: /components/raw/legends-squad-filter/legends-squad-filter.scss
  • Filesystem Path: src/library/components/legends-squad-filter/legends-squad-filter.scss
  • Size: 1.4 KB 
<div class="legends-squad-filter remove-filter" data-behaviour="legends-squad-filter">
    <div class="legends-squad-filter__content">
        <div class="legends-squad-filter__result">Filter Results</div>
        <div class="legends-squad-filter__count">
            <div class="number" id="number">0</div>
        </div>
    </div>
</div>