748286b5 |
1 | ///\r |
2 | /// Forty 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 |
5 | ///\r |
6 | \r |
7 | /* Menu */\r |
8 | \r |
9 | #menu {\r |
10 | @include vendor('transition', (\r |
11 | 'transform #{_duration(menu)} ease',\r |
12 | 'opacity #{_duration(menu)} ease',\r |
13 | 'visibility #{_duration(menu)}'\r |
14 | ));\r |
15 | @include vendor('align-items', 'center');\r |
16 | @include vendor('display', 'flex');\r |
17 | @include vendor('justify-content', 'center');\r |
18 | @include vendor('pointer-events', 'none');\r |
cb4379e1 |
19 | background: transparentize(_palette_light(bg), 0.1);\r |
748286b5 |
20 | box-shadow: none;\r |
21 | height: 100%;\r |
22 | left: 0;\r |
23 | opacity: 0;\r |
24 | overflow: hidden;\r |
25 | padding: 3em 2em;\r |
26 | position: fixed;\r |
27 | top: 0;\r |
28 | visibility: hidden;\r |
29 | width: 100%;\r |
30 | z-index: _misc(z-index-base) + 2;\r |
cb4379e1 |
31 | @media screen and (prefers-color-scheme: dark) {\r |
32 | background: transparentize(_palette_dark(bg), 0.1);\r |
33 | }\r |
748286b5 |
34 | \r |
35 | .inner {\r |
36 | @include vendor('transition', (\r |
37 | 'transform #{_duration(menu)} ease-out',\r |
38 | 'opacity #{_duration(menu)} ease',\r |
39 | 'visibility #{_duration(menu)}'\r |
40 | ));\r |
41 | @include vendor('transform', 'rotateX(20deg)');\r |
42 | -webkit-overflow-scrolling: touch;\r |
43 | max-width: 100%;\r |
44 | max-height: 100vh;\r |
45 | opacity: 0;\r |
46 | overflow: auto;\r |
47 | text-align: center;\r |
48 | visibility: hidden;\r |
49 | width: 18em;\r |
50 | \r |
51 | > :first-child {\r |
52 | margin-top: _size(element-margin);\r |
53 | }\r |
54 | \r |
55 | > :last-child {\r |
56 | margin-bottom: (_size(element-margin) * 1.5);\r |
57 | }\r |
58 | }\r |
59 | \r |
60 | ul {\r |
61 | margin: 0 0 (_size(element-margin) * 0.5) 0;\r |
62 | \r |
63 | &.links {\r |
64 | list-style: none;\r |
65 | padding: 0;\r |
66 | \r |
67 | > li {\r |
68 | padding: 0;\r |
69 | \r |
70 | > a:not(.button) {\r |
71 | border: 0;\r |
cb4379e1 |
72 | border-top: solid 1px _palette_light(border);\r |
748286b5 |
73 | display: block;\r |
74 | font-size: 0.8em;\r |
75 | font-weight: _font(weight-bold);\r |
76 | letter-spacing: _font(letter-spacing-alt);\r |
77 | line-height: 4em;\r |
78 | text-decoration: none;\r |
79 | text-transform: uppercase;\r |
cb4379e1 |
80 | @media screen and (prefers-color-scheme: dark) {\r |
81 | border-top: solid 1px _palette_dark(border);\r |
82 | }\r |
748286b5 |
83 | }\r |
84 | \r |
85 | > .button {\r |
86 | display: block;\r |
87 | margin: 0.5em 0 0 0;\r |
88 | }\r |
89 | \r |
90 | &:first-child {\r |
91 | > a:not(.button) {\r |
92 | border-top: 0 !important;\r |
93 | }\r |
94 | }\r |
95 | }\r |
96 | }\r |
97 | }\r |
98 | \r |
99 | .close {\r |
100 | @include vendor('transition', 'color #{_duration(transition)} ease-in-out');\r |
101 | -webkit-tap-highlight-color: rgba(0,0,0,0);\r |
102 | border: 0;\r |
103 | cursor: pointer;\r |
104 | display: block;\r |
105 | height: 4em;\r |
106 | line-height: 4em;\r |
107 | overflow: hidden;\r |
108 | padding-right: 1.25em;\r |
109 | position: absolute;\r |
110 | right: 0;\r |
111 | text-align: right;\r |
112 | text-indent: 8em;\r |
113 | top: 0;\r |
114 | vertical-align: middle;\r |
115 | white-space: nowrap;\r |
116 | width: 8em;\r |
117 | \r |
118 | &:before, &:after {\r |
119 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r |
120 | background-position: center;\r |
121 | background-repeat: no-repeat;\r |
122 | content: '';\r |
123 | display: block;\r |
124 | height: 4em;\r |
125 | position: absolute;\r |
126 | right: 0;\r |
127 | top: 0;\r |
128 | width: 4em;\r |
129 | }\r |
130 | \r |
131 | &:before {\r |
cb4379e1 |
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>');\r |
133 | @media screen and (prefers-color-scheme: dark) {\r |
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>');\r |
135 | }\r |
748286b5 |
136 | }\r |
137 | \r |
138 | &:after {\r |
cb4379e1 |
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>');\r |
748286b5 |
140 | opacity: 0;\r |
cb4379e1 |
141 | @media screen and (prefers-color-scheme: dark) {\r |
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>');\r |
143 | }\r |
748286b5 |
144 | }\r |
145 | \r |
146 | &:hover, &:active {\r |
147 | &:after {\r |
148 | opacity: 1;\r |
149 | }\r |
150 | }\r |
151 | }\r |
152 | }\r |
153 | \r |
154 | body.is-ie {\r |
155 | #menu {\r |
cb4379e1 |
156 | background: transparentize(_palette_light(bg-alt), 0.025);\r |
157 | @media screen and (prefers-color-scheme: dark) {\r |
158 | background: transparentize(_palette_dark(bg-alt), 0.025);\r |
159 | }\r |
748286b5 |
160 | }\r |
161 | }\r |
162 | \r |
163 | body.is-menu-visible {\r |
164 | #wrapper {\r |
165 | @include vendor('filter', 'blur(0.5em)');\r |
166 | }\r |
167 | \r |
168 | #menu {\r |
169 | @include vendor('pointer-events', 'auto');\r |
170 | opacity: 1;\r |
171 | visibility: visible;\r |
172 | \r |
173 | .inner {\r |
174 | @include vendor('transform', 'none');\r |
175 | opacity: 1;\r |
176 | visibility: visible;\r |
177 | }\r |
178 | }\r |
179 | } |