tutorbookapp/tutorbook

View on GitHub
components/footer/group.module.scss

Summary

Maintainability
Test Coverage
div.group {
  display: block;

  &:not(:last-of-type) {
    margin-right: 24px;
  }

  input {
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    appearance: none;
    white-space: nowrap;
    word-wrap: normal;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  h3 {
    font-weight: 400;
    font-size: 0.875rem;
    margin: 12px 0;
  }

  @media (max-width: 960px) {
    margin-right: 0 !important;
    border-bottom: 1px solid var(--accents-2);

    ul {
      padding-left: 12px;
      padding-bottom: 12px;
      display: none;
    }

    input:checked ~ ul {
      display: block;
    }

    h3 {
      cursor: pointer;
    }

    h3::after {
      content: '+';
      float: right;
      transition: transform 0.15s ease;
    }

    input:checked ~ label h3::after {
      transform: rotate(45deg);
    }
  }
}