3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
10 @include vendor('transition', (
11 'transform #{_duration(menu)} ease',
12 'opacity #{_duration(menu)} ease',
13 'visibility #{_duration(menu)}'
15 @include vendor('align-items', 'center');
16 @include vendor('display', 'flex');
17 @include vendor('justify-content', 'center');
18 @include vendor('pointer-events', 'none');
19 background: transparentize(_palette(bg), 0.1);
30 z-index: _misc(z-index-base) + 2;
33 @include vendor('transition', (
34 'transform #{_duration(menu)} ease-out',
35 'opacity #{_duration(menu)} ease',
36 'visibility #{_duration(menu)}'
38 @include vendor('transform', 'rotateX(20deg)');
39 -webkit-overflow-scrolling: touch;
49 margin-top: _size(element-margin);
53 margin-bottom: (_size(element-margin) * 1.5);
58 margin: 0 0 (_size(element-margin) * 0.5) 0;
69 border-top: solid 1px _palette(border);
72 font-weight: _font(weight-bold);
73 letter-spacing: _font(letter-spacing-alt);
75 text-decoration: none;
76 text-transform: uppercase;
86 border-top: 0 !important;
94 @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
95 -webkit-tap-highlight-color: rgba(0,0,0,0);
102 padding-right: 1.25em;
108 vertical-align: middle;
113 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
114 background-position: center;
115 background-repeat: no-repeat;
126 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
130 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
144 background: transparentize(_palette(bg-alt), 0.025);
148 body.is-menu-visible {
150 @include vendor('filter', 'blur(0.5em)');
154 @include vendor('pointer-events', 'auto');
159 @include vendor('transform', 'none');