fbi-cde/crime-data-frontend

View on GitHub
sass/components/_glossary.scss

Summary

Maintainability
Test Coverage
// scss-lint:disable ImportantRule

.glossary {
  bottom: 0;
  box-sizing: border-box;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  transition: right .2s;
  width: 20rem;

  &[aria-hidden=true] {
    right: -20rem;
  }

  [aria-hidden=true] {
    display: none !important;
  }
}

.glossary__content {
  ul {
    padding: 0;
  }

  li {
    border-bottom: 1px solid $white;
    border-top: 1px solid $white;
    list-style-type: none;
    margin-bottom: -1px;
  }

  button {
    appearance: none;
    background-color: transparent;
    background-image: url('/img/chevron-right-white.svg');
    background-position: center right .5rem;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border: 0;
    color: $white;
    padding: 1rem 2rem 1rem 0;
    position: relative;
    text-align: left;
    width: 100%;

    &[aria-expanded=true] {
      background-image: url('/img/chevron-down-white.svg');
      font-weight: $bold-font-weight;
    }
  }

  .glossary__definition {
    margin-bottom: $space-2;
    margin-top: $space-tiny;
  }

  a {
    color: $white;
    text-decoration: underline;
  }
}

.glossary-icon::after {
  background-image: url('/img/glossary.svg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 10px;
  padding-left: .5rem;
  width: 10px;
}