2 /// Phantom by HTML5 UP
\r
3 /// html5up.net | @ajlkn
\r
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
\r
10 @include vendor('transition', 'opacity #{_duration(menu)} ease');
\r
15 @include vendor('transform', 'translateX(#{_size(menu)})');
\r
16 @include vendor('transition', ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
\r
23 -webkit-overflow-scrolling: touch;
\r
24 background: _palette(fg);
\r
25 color: _palette(bg);
\r
28 z-index: _misc(z-index-base) + 2;
\r
31 @include vendor('transition', 'opacity #{_duration(menu)} ease');
\r
32 -webkit-overflow-scrolling: touch;
\r
44 margin: 0 0 (_size(element-margin) * 0.5) 0;
\r
49 border-top: solid 1px transparentize(_palette(bg), 0.85);
\r
68 @include vendor('transition', (
\r
69 'opacity #{_duration(menu)} ease',
\r
70 'transform #{_duration(menu)} ease'
\r
72 @include vendor('transform', 'scale(0.25) rotate(180deg)');
\r
73 -webkit-tap-highlight-color: transparent;
\r
86 white-space: nowrap;
\r
89 @include vendor('transition', 'opacity #{_duration(transition)} ease');
\r
97 background-position: center;
\r
98 background-repeat: no-repeat;
\r
99 background-size: 2em 2em;
\r
103 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');
\r
108 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');
\r
123 @include breakpoint(small) {
\r
124 @include vendor('transform', 'translateX(#{_size(menu) * 0.75})');
\r
125 width: (_size(menu) * 0.75);
\r
128 padding: 2.75em 1.5em;
\r
135 text-indent: 4.25em;
\r
137 &:before, &:after {
\r
138 background-size: 1.5em 1.5em;
\r
144 body.is-menu-visible {
\r
146 @include vendor('pointer-events', 'none');
\r
152 @include vendor('transform', 'translateX(0)');
\r
153 visibility: visible;
\r
160 @include vendor('transform', 'scale(1.0) rotate(0deg)');
\r