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