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 |
19 | background: transparentize(_palette(bg), 0.1);\r |
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 |
31 | \r |
32 | .inner {\r |
33 | @include vendor('transition', (\r |
34 | 'transform #{_duration(menu)} ease-out',\r |
35 | 'opacity #{_duration(menu)} ease',\r |
36 | 'visibility #{_duration(menu)}'\r |
37 | ));\r |
38 | @include vendor('transform', 'rotateX(20deg)');\r |
39 | -webkit-overflow-scrolling: touch;\r |
40 | max-width: 100%;\r |
41 | max-height: 100vh;\r |
42 | opacity: 0;\r |
43 | overflow: auto;\r |
44 | text-align: center;\r |
45 | visibility: hidden;\r |
46 | width: 18em;\r |
47 | \r |
48 | > :first-child {\r |
49 | margin-top: _size(element-margin);\r |
50 | }\r |
51 | \r |
52 | > :last-child {\r |
53 | margin-bottom: (_size(element-margin) * 1.5);\r |
54 | }\r |
55 | }\r |
56 | \r |
57 | ul {\r |
58 | margin: 0 0 (_size(element-margin) * 0.5) 0;\r |
59 | \r |
60 | &.links {\r |
61 | list-style: none;\r |
62 | padding: 0;\r |
63 | \r |
64 | > li {\r |
65 | padding: 0;\r |
66 | \r |
67 | > a:not(.button) {\r |
68 | border: 0;\r |
69 | border-top: solid 1px _palette(border);\r |
70 | display: block;\r |
71 | font-size: 0.8em;\r |
72 | font-weight: _font(weight-bold);\r |
73 | letter-spacing: _font(letter-spacing-alt);\r |
74 | line-height: 4em;\r |
75 | text-decoration: none;\r |
76 | text-transform: uppercase;\r |
77 | }\r |
78 | \r |
79 | > .button {\r |
80 | display: block;\r |
81 | margin: 0.5em 0 0 0;\r |
82 | }\r |
83 | \r |
84 | &:first-child {\r |
85 | > a:not(.button) {\r |
86 | border-top: 0 !important;\r |
87 | }\r |
88 | }\r |
89 | }\r |
90 | }\r |
91 | }\r |
92 | \r |
93 | .close {\r |
94 | @include vendor('transition', 'color #{_duration(transition)} ease-in-out');\r |
95 | -webkit-tap-highlight-color: rgba(0,0,0,0);\r |
96 | border: 0;\r |
97 | cursor: pointer;\r |
98 | display: block;\r |
99 | height: 4em;\r |
100 | line-height: 4em;\r |
101 | overflow: hidden;\r |
102 | padding-right: 1.25em;\r |
103 | position: absolute;\r |
104 | right: 0;\r |
105 | text-align: right;\r |
106 | text-indent: 8em;\r |
107 | top: 0;\r |
108 | vertical-align: middle;\r |
109 | white-space: nowrap;\r |
110 | width: 8em;\r |
111 | \r |
112 | &:before, &:after {\r |
113 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r |
114 | background-position: center;\r |
115 | background-repeat: no-repeat;\r |
116 | content: '';\r |
117 | display: block;\r |
118 | height: 4em;\r |
119 | position: absolute;\r |
120 | right: 0;\r |
121 | top: 0;\r |
122 | width: 4em;\r |
123 | }\r |
124 | \r |
125 | &:before {\r |
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>');\r |
127 | }\r |
128 | \r |
129 | &:after {\r |
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>');\r |
131 | opacity: 0;\r |
132 | }\r |
133 | \r |
134 | &:hover, &:active {\r |
135 | &:after {\r |
136 | opacity: 1;\r |
137 | }\r |
138 | }\r |
139 | }\r |
140 | }\r |
141 | \r |
142 | body.is-ie {\r |
143 | #menu {\r |
144 | background: transparentize(_palette(bg-alt), 0.025);\r |
145 | }\r |
146 | }\r |
147 | \r |
148 | body.is-menu-visible {\r |
149 | #wrapper {\r |
150 | @include vendor('filter', 'blur(0.5em)');\r |
151 | }\r |
152 | \r |
153 | #menu {\r |
154 | @include vendor('pointer-events', 'auto');\r |
155 | opacity: 1;\r |
156 | visibility: visible;\r |
157 | \r |
158 | .inner {\r |
159 | @include vendor('transform', 'none');\r |
160 | opacity: 1;\r |
161 | visibility: visible;\r |
162 | }\r |
163 | }\r |
164 | } |