1/*
2MIT License
3
4Copyright (c) 2019 Mark Harkin, 2016 Dylan Hicks (aka. dylanh333)
5
6Permission is hereby granted, free of charge, to any person obtaining a copy
7of this software and associated documentation files (the "Software"), to deal
8in the Software without restriction, including without limitation the rights
9to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10copies of the Software, and to permit persons to whom the Software is
11furnished to do so, subject to the following conditions:
12
13The above copyright notice and this permission notice shall be included in all
14copies or substantial portions of the Software.
15
16THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22SOFTWARE.
23
24*/
25
26.Menu {
27    display: none;
28    position: relative;
29    z-index: 100000;
30}
31    /* Three basic menu layouts */
32    /* This also enforces that menu is a ul, and that
33     * layout modifier is specified
34     */
35    ul.Menu.-horizontal,
36    ul.Menu.-vertical {
37        display: inline-block;
38    }
39    ul.Menu.-floating {
40        display: block;
41        position: absolute;
42    }
43
44    /* Menu and menu-item layout */
45    .Menu,
46    .Menu li,
47    .Menu li > ul {
48        list-style: none;
49        padding: 0px;
50        margin: 0px;
51    }
52    .Menu li {
53        display: block;
54        position: relative;
55        white-space: nowrap;
56        word-break: keep-all;
57    }
58    .Menu.-horizontal > li {
59        display: inline-block;
60        float: left;
61    }
62    .Menu li > * {
63        display: block;
64        position: relative;
65    }
66    .Menu li > ul {
67        position: absolute;
68        min-width: 100%;
69        top: 0px;
70        left: 100%;
71    }
72    .Menu.-horizontal.-alignRight li > ul {
73        left: auto;
74        right: 100%;
75    }
76    .Menu.-horizontal.-alignRight > li > ul {
77        right: 0px;
78    }
79    .Menu.-horizontal > li > ul {
80        top: auto;
81        left: auto;
82    }
83
84    /* Menu behaviour */
85    .Menu li > ul,
86    .Menu.-floating {
87        display: none;
88    }
89    .Menu li > ul.-visible,
90    ul.Menu.-floating.-visible {
91        display: block;
92    }
93
94    /* Menu animation */
95    .Menu li > ul,
96    .Menu.-horizontal.-alignRight li > ul,
97    .Menu.-floating {
98        opacity: 1;
99        transform: scale(1) translateY(0px);
100        transform-origin: left top;
101    }
102    .Menu.-alignRight li > ul,
103    .Menu.-floating.-alignRight {
104        transform-origin: right top;
105    }
106    .Menu li > ul.-animating,
107    .Menu.-floating.-animating {
108        opacity: 0 !important;
109        transform: scale(0.96) translateX(-16px);
110    }
111    .Menu li > ul.-animating {
112        z-index: -1 !important;
113    }
114    .Menu.-horizontal > li > ul.-animating {
115        transform: scale(0.96) translateY(-16px);
116    }
117    .Menu.-alignRight li > ul.-animating,
118    .Menu.-floating.-alignRight.-animating {
119        transform: scale(0.96) translateX(16px);
120    }
121    .Menu.-horizontal.-alignRight > li > ul.-animating {
122        transform: scale(0.96) translateY(-16px);
123    }
124
125    /* Menu item icons */
126    .Menu *[data-icon]:before {
127        position: absolute;
128        left: 0px;
129        top: 0px;
130        bottom: 0px;
131        margin: auto 0px;
132    }
133    .Menu .Icon,
134    .Menu *[data-icon]:before {
135        line-height: inherit;
136    }
137    .Menu .Icon {
138        padding: 0px;
139    }
140    .Menu *:empty[data-icon] {
141        padding-left: 0px !important;
142        padding-right: 0px !important;
143    }
144
145    /* Submenu chevrons */
146    .Menu li.-hasSubmenu > a:after {
147        display: block;
148        position: absolute;
149
150        width: 8px;
151        height: 8px;
152        right: 8px;
153        bottom: 0px;
154        top: 0px;
155        margin: auto 0px;
156
157        transform: rotate(45deg);
158        border-width: 1px;
159        border-color: black;
160        border-style: solid solid none none;
161
162        content: "";
163    }
164    .Menu.-horizontal > li.-hasSubmenu > a:after {
165        width: 4px;
166        height: 4px;
167        bottom: 4px;
168        top: auto;
169        left: 0px;
170        right: 0px;
171        margin: 0px auto;
172
173        border-style: none solid solid none;
174    }
175    .Menu li.-hasSubmenu.-noChevron > a:after {
176        display: none;
177    }
178
179/*
180** Configurable values
181*/
182    /* Height of navbar, and menu items */
183    /* All of these must be of equal value */
184    .Menu {
185        line-height: 30px;
186    }
187    .Menu.-horizontal,
188    .Menu li,
189    .Menu li > :first-child {
190        height: 30px;
191    }
192    .Menu *[data-icon]:before,
193    .Menu .Icon {
194        width: 30px;
195        height: 30px;
196    }
197    .Menu *[data-icon] {
198        min-width: 30px;
199        min-height: 30px;
200        padding-left: 30px;
201    }
202
203    /* Default font settings for menu */
204    .Menu {
205        font-family: Arial, Helvetica, Sans;
206        font-size: 16px;
207    }
208
209    /* Icon font sizes */
210    .Menu *[data-icon]:before,
211    .Menu .Icon {
212        font-size: 24px;
213    }
214    /* For submenus */
215    .Menu > li ul .Icon,
216    .Menu.-floating .Icon,
217    .Menu > li ul *[data-icon]:before,
218    .Menu.-floating *[data-icon]:before
219    {
220        font-size: 18px;
221    }
222
223    /* Colouring of menus */
224    /* Foreground */
225    .Menu,
226    .Menu li.-hasSubmenu > a:after {
227        color: black;
228        border-color: black; /* chevron colour */
229    }
230    /* Background */
231    .Menu ul,
232    .Menu.-floating {
233        background: white;
234    }
235
236    /* Padding for each menu item */
237    .Menu li > * {
238        padding: 0px 12px;
239    }
240    /* Indent of chevron */
241    .Menu li li.-hasSubmenu > a:after,
242    .Menu:not(.-horizontal) > li.-hasSubmenu > a:after {
243        right: 12px;
244    }
245    .Menu li li.-hasSubmenu > a,
246    .Menu:not(.-horizontal) > li.-hasSubmenu > a {
247        padding-right: 28px;
248    }
249
250    /* Minimum width of dropdown menus */
251    .Menu.-horizontal li > ul,
252    .Menu.-floating {
253        min-width: 200px;
254    }
255
256    /* Animation speed of dropdown menus */
257    .Menu li > ul,
258    .Menu.-floating {
259        transition: width 0.1s, height 0.1s, transform 0.1s, opacity 0.1s;
260    }
261
262    /* Styling of hyperlink text */
263    .Menu li > a {
264        text-decoration: none;
265        color: inherit;
266    }
267
268    /* Animation speed of :hover shading */
269    .Menu li > a:first-child {
270        transition: background-color 0.2s;
271    }
272
273    /* Colour of :hover shading */
274    .Menu li:hover > a:first-child,
275    .Menu li.-active > a:first-child {
276        background-color: rgba(0,0,0,0.1);
277    }
278
279/*
280** End configurable values
281*/
282