tningjs/sam-and-his-friends

///
/// Future Imperfect by Pixelarity
/// pixelarity.com | hello@pixelarity.com
/// License: pixelarity.com/license
///

/* Menu */

#menu {
  @include vendor('transform', 'translateX(#{_size(menu)})');
  @include vendor(
    'transition',
    ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}')
  );
  -webkit-overflow-scrolling: touch;
  background: _palette(bg);
  border-left: solid 1px _palette(border);
  box-shadow: none;
  height: 100%;
  max-width: 80%;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  width: _size(menu);
  z-index: _misc(z-index-base) + 2;

  > * {
    border-top: solid 1px _palette(border);
    padding: _size(section-spacing);

    > :last-child {
      margin-bottom: 0;
    }
  }

  > :first-child {
    border-top: 0;
  }

  .links {
    list-style: none;
    padding: 0;

    > li {
      border: 0;
      border-top: dotted 1px _palette(border);
      margin: 1.5em 0 0 0;
      padding: 1.5em 0 0 0;

      a {
        display: block;
        border-bottom: 0;

        h3 {
          @include vendor('transition', 'color #{_duration(transition)} ease');
          font-size: 0.7em;
        }

        p {
          font-family: _font(family-heading);
          font-size: 0.6em;
          font-weight: _font(weight-heading);
          letter-spacing: _font(kerning-heading);
          letter-spacing: _size(letter-spacing-alt);
          margin-bottom: 0;
          text-decoration: none;
          text-transform: uppercase;
        }

        &:hover {
          h3 {
            color: _palette(accent);
          }
        }
      }

      &:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
      }
    }
  }

  body.is-menu-visible & {
    @include vendor('transform', 'translateX(0)');
    visibility: visible;
  }

  @include breakpoint('<=small') {
    > * {
      padding: _size(section-spacing-small);
    }
  }
}