/// /// Future Imperfect by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/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); } } }