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_light(bg), 0.1);
30 z-index: _misc(z-index-base) + 2;
31 @media screen and (prefers-color-scheme: dark) {
32 background: transparentize(_palette_dark(bg), 0.1);
36 @include vendor('transition', (
37 'transform #{_duration(menu)} ease-out',
38 'opacity #{_duration(menu)} ease',
39 'visibility #{_duration(menu)}'
41 @include vendor('transform', 'rotateX(20deg)');
42 -webkit-overflow-scrolling: touch;
52 margin-top: _size(element-margin);
56 margin-bottom: (_size(element-margin) * 1.5);
61 margin: 0 0 (_size(element-margin) * 0.5) 0;
72 border-top: solid 1px _palette_light(border);
75 font-weight: _font(weight-bold);
76 letter-spacing: _font(letter-spacing-alt);
78 text-decoration: none;
79 text-transform: uppercase;
80 @media screen and (prefers-color-scheme: dark) {
81 border-top: solid 1px _palette_dark(border);
92 border-top: 0 !important;
100 @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
101 -webkit-tap-highlight-color: rgba(0,0,0,0);
108 padding-right: 1.25em;
114 vertical-align: middle;
119 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
120 background-position: center;
121 background-repeat: no-repeat;
132 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_light(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>');
133 @media screen and (prefers-color-scheme: dark) {
134 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_dark(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>');
139 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_light(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
141 @media screen and (prefers-color-scheme: dark) {
142 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_dark(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
156 background: transparentize(_palette_light(bg-alt), 0.025);
157 @media screen and (prefers-color-scheme: dark) {
158 background: transparentize(_palette_dark(bg-alt), 0.025);
163 body.is-menu-visible {
165 @include vendor('filter', 'blur(0.5em)');
169 @include vendor('pointer-events', 'auto');
174 @include vendor('transform', 'none');